/* HOSS · Página principal — generado por armar_sitio.py; no editar a mano. */
/* HOSS — Agente de Negociación · Design System
   Punto de entrada global. Solo imports — sin reglas inline.
   Consumidores enlazan únicamente este archivo. */

/* HOSS — Webfonts
   Poppins        → titulares de marca (manual de posicionamiento), vía Google Fonts
   SF Pro Display → titulares de documento y producto (semibold/heavy, tracking ajustado)
   SF Pro Text    → cuerpo (line-height 1.5–1.65)
   Inter          → respaldo / fallback variable */
/* Respaldo variable */
/* HOSS — Color tokens
   Dos modos: oscuro (por defecto) y claro [data-theme="light"].
   Los colores de MARCA no cambian entre modos — solo el escenario.
   Semántica de mercado (positivo/negativo) son los únicos saturados en datos. */

:root {
  /* ── Brand primitives (constantes en ambos modos) ───────────────── */
  /* Piso de continuidad — Manual de posicionamiento v1 (sep. 2026).
     Los cuatro hex oficiales; el resto de la rampa deriva de ellos. */
  --brand-navy: #1b1f30;       /* Navy — fondo de marca (= --bg-app oscuro) */
  --brand-teal: #4ecdc4;       /* Teal — acento principal */
  --brand-violet: #7b6cf6;     /* Violeta — acento secundario */
  --brand-gold: #f2c94c;       /* Dorado — distinción; nunca en datos */

  --brand-teal-300: #6ee7de;   /* teal claro — inicio del gradiente */
  --brand-teal-500: var(--brand-teal);   /* teal oficial — fin del gradiente teal */
  --brand-teal-700: #1ba79a;   /* teal oscurecido para fondos claros */

  --brand-purple-300: #9b80ff; /* púrpura claro — inicio gradiente púrpura */
  --brand-purple-500: var(--brand-violet); /* violeta oficial — acento sólido */
  --brand-purple-600: #5535d4; /* púrpura — fin / acento sólido en claro */

  /* Gradiente corporativo (isotipo, títulos, marcadores) */
  --brand-gradient: linear-gradient(120deg, #6ee7de 0%, #9b80ff 100%); /* @kind color */
  --brand-gradient-teal: linear-gradient(120deg, #6ee7de 0%, #4ecdc4 100%); /* @kind color */
  --brand-gradient-purple: linear-gradient(120deg, #9b80ff 0%, #5535d4 100%); /* @kind color */
  /* Variante de gradiente para títulos en modo claro (más contraste) */
  --brand-gradient-strong: linear-gradient(120deg, #2bb3a6 0%, #5535d4 100%); /* @kind color */

  /* ── Semántica de mercado ───────────────────────────────────────── */
  --market-up: #16c784;        /* positivo */
  --market-down: #ea3943;      /* negativo */

  /* ── Escenario: MODO OSCURO (por defecto) ───────────────────────── */
  --bg-app: #1b1f30;           /* fondo de la aplicación */
  --bg-lockup: #11141f;        /* plate del lockup / fondo más profundo */
  --surface-card: #22273a;     /* tarjeta */
  --surface-nested: #262c40;   /* superficie anidada dentro de card */
  --surface-raised: #2b3148;   /* hover / superficie elevada */

  --text-primary: rgba(255, 255, 255, 1);
  --text-secondary: rgba(255, 255, 255, 0.70);
  --text-tertiary: rgba(255, 255, 255, 0.62);   /* AA en texto chico */
  --text-quaternary: rgba(255, 255, 255, 0.45); /* SOLO decorativo — nunca texto */

  --border-subtle: rgba(255, 255, 255, 0.08);  /* hairline */
  --border-strong: rgba(255, 255, 255, 0.12);

  /* Acentos aplicados (referencian la marca; en oscuro usan los claros) */
  --accent-teal: var(--brand-teal-500);
  --accent-purple: var(--brand-purple-300);
  --accent-gold: var(--brand-gold);     /* sello / marcador de distinción, nunca dato */
  --accent-title-gradient: var(--brand-gradient);

  /* Tinta de acento para TEXTO CHICO sobre la superficie del modo.
     Los --accent-* / --market-* son para superficies y marcadores; sobre papel
     blanco el teal (2,98:1) y el verde (3,53:1) no pasan AA. Usar estas tintas
     en cualquier texto por debajo de 18px. */
  --accent-teal-ink: var(--brand-teal-300);
  --accent-purple-ink: var(--brand-purple-300);
  --market-up-ink: var(--market-up);
  --market-down-ink: #ff6b73;          /* el rojo de marca da 3,57:1 sobre navy */
  --accent-gold-ink: var(--brand-gold); /* 10,4:1 sobre navy */
  --chip-fg: #b9a4ff;
  --chip-bg: #2a2547;
  --chip-bd: rgba(155,128,255,.34);

  /* Sombra mínima (editorial, no dashboard) */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-raised: 0 8px 28px rgba(0, 0, 0, 0.32);
  --shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.48);

  /* Tinte translúcido del isotipo para fondos de imagen abstractos */
  --field-teal: rgba(110, 231, 222, 0.16);
  --field-purple: rgba(155, 128, 255, 0.16);
}

/* ── Escenario: MODO CLARO ─────────────────────────────────────────── */
[data-theme="light"] {
  --bg-app: #f5f6f9;
  --bg-lockup: #eceef3;
  --surface-card: #ffffff;
  --surface-nested: #f1f3f7;
  --surface-raised: #ffffff;

  --text-primary: #11141f;
  --text-secondary: rgba(17, 20, 31, 0.70);
  --text-tertiary: rgba(17, 20, 31, 0.62);   /* .50 daba 3,41:1 — no pasaba AA */
  --text-quaternary: rgba(17, 20, 31, 0.45); /* SOLO decorativo — nunca texto */

  --border-subtle: rgba(17, 20, 31, 0.08);
  --border-strong: rgba(17, 20, 31, 0.12);

  /* Acentos oscurecidos para mantener contraste sobre blanco */
  --accent-teal: var(--brand-teal-700);
  --accent-purple: var(--brand-purple-600);
  --accent-gold: var(--brand-gold);     /* superficie/marcador; como texto usar la tinta */
  --accent-title-gradient: var(--brand-gradient-strong);

  /* Tinta de acento para texto chico: AA sobre #ffffff
     teal 5,3:1 · púrpura 7,4:1 · verde 5,4:1 · rojo 5,2:1 */
  --accent-teal-ink: #0f7a70;
  --accent-purple-ink: #4a2bc0;
  --market-up-ink: #0a7349;    /* 5,8:1 sobre blanco · 5,0:1 sobre el plate #eceef3 */
  --market-down-ink: #c01f2b;
  --accent-gold-ink: #7a5600;   /* 6,6:1 sobre blanco — el dorado puro da 1,6:1 */
  --chip-fg: #4a2bc0;
  --chip-bg: #f1edfd;
  --chip-bd: #cfc2f5;

  /* Semántica oscurecida en claro */
  --market-up: #0f9b67;
  --market-down: #d22531;

  --shadow-card: 0 1px 2px rgba(17, 20, 31, 0.06);
  --shadow-raised: 0 8px 28px rgba(17, 20, 31, 0.10);
  --shadow-overlay: 0 24px 64px rgba(17, 20, 31, 0.16);

  --field-teal: rgba(27, 167, 154, 0.10);
  --field-purple: rgba(85, 53, 212, 0.10);
}

/* HOSS — Typography tokens
   Poppins (titulares de marca) · SF Pro Display (titulares de documento y producto)
   SF Pro Text / Inter (cuerpo). Eyebrows en mayúsculas, tracking 0.14em. Números tabulares.
   El manual de posicionamiento fija Poppins/Inter como piso de continuidad;
   informes y terminal conservan SF Pro (ya verificados hoja por hoja). */

:root {
  /* ── Familias ───────────────────────────────────────────────────── */
  --font-brand: "Poppins", "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, sans-serif; /* mensaje central, manifiesto, piezas institucionales y comerciales */
  --font-display: "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-text: "SF Pro Text", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "SF Pro Text", Menlo, monospace;

  /* ── Pesos ──────────────────────────────────────────────────────── */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;

  /* ── Escala tipográfica (editorial, generosa) ───────────────────── */
  --text-display: 56px;   /* portada de reporte */
  --text-h1: 44px;
  --text-h2: 34px;
  --text-h3: 26px;
  --text-h4: 21px;
  --text-lead: 20px;      /* entradilla / lead paragraph */
  --text-body: 17px;      /* cuerpo base */
  --text-sm: 15px;
  --text-caption: 13px;
  --text-eyebrow: 12px;
  --text-micro: 11px;

  /* Números grandes / data display */
  --text-stat: 40px;
  --text-stat-lg: 64px;

  /* ── Line-height ────────────────────────────────────────────────── */
  --leading-tight: 1.08;   /* titulares grandes */
  --leading-snug: 1.2;     /* subtítulos */
  --leading-normal: 1.5;   /* cuerpo */
  --leading-relaxed: 1.65; /* cuerpo extenso / ensayo */

  /* ── Tracking ───────────────────────────────────────────────────── */
  --tracking-tighter: -0.03em;  /* display heavy */
  --tracking-tight: -0.02em;    /* titulares */
  --tracking-snug: -0.01em;     /* subtítulos */
  --tracking-normal: 0;
  --tracking-eyebrow: 0.14em;   /* eyebrows en mayúsculas */
  --tracking-wide: 0.08em;
}

/* HOSS — Spacing, radius, layout & motion tokens
   Layout editorial: columna única ~960px, márgenes 80px, 72px entre secciones. */

:root {
  /* ── Spacing scale (base 4px) ───────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-18: 72px;   /* separación entre secciones */
  --space-20: 80px;   /* márgenes de página */
  --space-24: 96px;

  /* ── Layout ─────────────────────────────────────────────────────── */
  --measure-column: 960px;   /* columna única del reporte */
  --measure-essay: 720px;    /* ensayo editorial */
  --page-margin: 80px;
  --section-gap: 72px;

  /* ── Radii ──────────────────────────────────────────────────────── */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-card: 18px;   /* card base */
  --radius-lg: 24px;     /* card destacada */
  --radius-pill: 999px;

  /* ── Borders ────────────────────────────────────────────────────── */
  --hairline: 1px;

  /* ── Motion (calmo: 140–360ms, easing suave; sin bounce) ────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */

  /* ── Iconos (Lucide, trazo 1.75px) ──────────────────────────────── */
  --icon-stroke: 1.75;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
}

/* HOSS — Base element defaults (opcional para consumidores) */

body {
  margin: 0;
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-text);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "tnum" 1, "kern" 1; /* números tabulares por defecto */
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-primary);
  margin: 0;
}

/* Eyebrow utilitario */
.hoss-eyebrow {
  font-family: var(--font-text);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Título con gradiente corporativo */
.hoss-gradient-text {
  background: var(--accent-title-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

::selection {
  background: var(--field-purple);
}


/* Tipografías: Poppins (titulares de marca) e Inter (texto), de Google Fonts, pedidas desde el HTML.
   SF Pro NO se sirve en la web: su licencia lo limita a plataformas de Apple. */
:root { --font-brand: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        --font-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

/* HOSS — Página principal · base compartida por las cinco direcciones (2026-09-17)
   Tokens del HOSS Design System (no se redefinen acá). Poppins en titulares de marca, Inter/SF en
   cuerpo, gradiente solo en títulos y marcadores, dorado UNA vez por pieza, sin fotos ni emoji. */


* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-text); font-size: 16px; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
.wrap { width: min(1120px, 100% - 2 * clamp(20px, 5vw, 80px)); margin-inline: auto; }
.col { width: min(var(--measure-column), 100%); margin-inline: auto; }
.essay { width: min(var(--measure-essay), 100%); }
section { padding-block: var(--section-gap); }
.rule { border-top: 1px solid var(--border-subtle); }

/* tipografía */
.eyebrow { font: 600 11px/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--text-tertiary); }
.brand { font-family: var(--font-brand); font-weight: 600; letter-spacing: -.025em; line-height: 1.04; margin: 0; }
.h-hero { font-size: clamp(44px, 7.4vw, 104px); }
.h-2 { font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -.02em; line-height: 1.1; }
.h-3 { font: 600 19px/1.3 var(--font-brand); letter-spacing: -.01em; margin: 0; }
.grad { white-space: nowrap; background: var(--accent-title-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--text-secondary); margin: 0; }
.muted { color: var(--text-tertiary); }
p { margin: 0; }

/* botones: planos, sin gradiente (el gradiente es de títulos y marcadores) */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 24px; border-radius: var(--radius-pill);
  font: 600 15px/1 var(--font-text); letter-spacing: -.005em; border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.btn:active { transform: scale(.99); }
.btn-solid { background: var(--text-primary); color: var(--bg-app); }
.btn-solid:hover { background: color-mix(in srgb, var(--text-primary) 88%, transparent); }
.btn-line { border-color: var(--border-strong); color: var(--text-primary); }
.btn-line:hover { border-color: var(--text-tertiary); }
.btn-text { height: auto; padding: 0; color: var(--text-secondary); border-radius: 0; }
.btn-text:hover { color: var(--text-primary); }
.btn-text::after { content: "→"; transition: transform var(--dur-base) var(--ease-out); }
.btn-text:hover::after { transform: translateX(3px); }

/* navegación */
.nav { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px); background: color-mix(in srgb, var(--bg-app) 82%, transparent); border-bottom: 1px solid var(--border-subtle); }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 68px; }
/* logo SOLO (sin la aclaración, 2026-09-24): el archivo es solo la palabra, así que va a la altura que tenía la palabra
   dentro del logo completo (~20 px), no a los 46 px del bloque entero (quedaba inmenso) */
.nav img { height: 21px; display: block; }
.nav nav { display: flex; gap: 26px; margin-left: auto; font-size: 14px; color: var(--text-secondary); }
.nav nav a:hover { color: var(--text-primary); }
.nav .ing { display: flex; gap: 10px; }
.nav .btn { height: 38px; padding: 0 18px; font-size: 13.5px; }
@media (max-width: 860px) { .nav nav { display: none; } .nav .ing { margin-left: auto; } }
/* en el celular los dos botones de la barra entran achicados (la portada ya no trae botones propios) */
@media (max-width: 620px) { .nav .wrap { gap: 12px; } .nav .ing { gap: 6px; } .nav .btn { height: 34px; padding: 0 12px; font-size: 12.5px; } .nav img { height: 18px; } }

/* campo abstracto en el lenguaje del isotipo: trapecios desplazados, translúcidos */
.campo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.campo i { position: absolute; display: block; opacity: .62; }
.campo .t1 { width: 46vw; height: 46vw; max-width: 720px; max-height: 720px; right: -8vw; top: -12vw; background: var(--field-teal);
  clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%); }
.campo .t2 { width: 38vw; height: 38vw; max-width: 600px; max-height: 600px; right: 10vw; top: 6vw; background: var(--field-purple);
  clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%); }
.sobre { position: relative; z-index: 1; }

/* pilares */
.pilares { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--border-subtle); }
.pilar { padding: 32px 32px 8px 0; border-right: 1px solid var(--border-subtle); }
.pilar + .pilar { padding-left: 32px; }
.pilar:last-child { border-right: 0; padding-right: 0; }
.pilar .n { font: 600 12px/1 var(--font-text); letter-spacing: .14em; color: var(--text-tertiary); }
.pilar h3 { margin: 18px 0 10px; }
.pilar p { color: var(--text-secondary); font-size: 15px; }
.marca { display: inline-block; width: 28px; height: 3px; border-radius: 2px; background: var(--accent-title-gradient); }
.marca-oro { background: var(--accent-gold); }
@media (max-width: 860px) { .pilares { grid-template-columns: minmax(0, 1fr); } .pilar, .pilar + .pilar { padding: 28px 0 8px; border-right: 0; border-top: 1px solid var(--border-subtle); } .pilar:first-child { border-top: 0; } }

/* líneas de negocio */
.lineas { border-top: 1px solid var(--border-subtle); }
.linea { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 32px; padding: 26px 0; border-bottom: 1px solid var(--border-subtle); }
.linea p { color: var(--text-secondary); font-size: 15.5px; }
.linea .eyebrow { margin-top: 6px; display: block; }
@media (max-width: 760px) { .linea { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* comisiones */
.tarifas { width: 100%; border-collapse: collapse; font-size: 15px; }
.tarifas th { text-align: left; font: 600 11px/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--text-tertiary); padding: 0 0 14px; }
.tarifas th:last-child, .tarifas td:last-child { text-align: right; }
.tarifas td { padding: 15px 0; border-top: 1px solid var(--border-subtle); color: var(--text-secondary); }
.tarifas td:last-child { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 24px; }
details.mas { margin-top: 8px; }
details.mas summary { list-style: none; cursor: pointer; padding: 16px 0; border-top: 1px solid var(--border-subtle); font: 600 14px/1 var(--font-text); color: var(--text-secondary); }
details.mas summary::-webkit-details-marker { display: none; }
details.mas summary::after { content: " +"; }
details.mas[open] summary::after { content: " −"; }

/* muestra de la cuenta (datos de EJEMPLO, no son de ningún cliente) */
.cuenta { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); overflow: hidden; font-family: var(--font-display); }
.cuenta .top { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--border-subtle); }
.cuenta .av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 600 13px/1 var(--font-text); background: var(--surface-raised); color: var(--text-secondary); }
.cuenta .top b { font-weight: 600; font-size: 15px; }
.cuenta .top small { display: block; color: var(--text-tertiary); font: 400 12px/1.4 var(--font-text); }
.cuenta .chip { margin-left: auto; font: 600 10.5px/1 var(--font-text); letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); border: 1px solid var(--border-strong); border-radius: 999px; padding: 6px 10px; }
.cuenta .pat { padding: 22px 22px 6px; }
.cuenta .pat .v { font-size: clamp(30px, 3.2vw, 40px); font-weight: 600; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.cuenta .pat .d { font: 600 13px/1 var(--font-text); color: var(--market-up); margin-left: 10px; }
.cuenta svg { display: block; width: 100%; height: 110px; }
.cuenta .kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border-subtle); }
.cuenta .kpis div { padding: 16px 22px; border-right: 1px solid var(--border-subtle); min-width: 0; }
.cuenta .kpis div:last-child { border-right: 0; }
.cuenta .kpis span { display: block; font: 600 10px/1 var(--font-text); letter-spacing: .13em; text-transform: uppercase; color: var(--text-tertiary); }
.cuenta .kpis b { display: block; margin-top: 9px; font-size: clamp(13px, 1.3vw, 17px); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.up { color: var(--market-up); } .down { color: var(--market-down); }
.cuenta table { width: 100%; border-collapse: collapse; font: 400 13.5px/1 var(--font-text); }
.cuenta th { text-align: right; padding: 14px 16px 10px; font: 600 10px/1 var(--font-text); letter-spacing: .13em; text-transform: uppercase; color: var(--text-tertiary); border-top: 1px solid var(--border-subtle); }
.cuenta th:first-child, .cuenta td:first-child { text-align: left; }
.cuenta td { text-align: right; padding: 11px 16px; border-top: 1px solid var(--border-subtle); font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.cuenta td:first-child { padding-left: 22px; } .cuenta td:last-child, .cuenta th:last-child { padding-right: 22px; }
.cuenta td b { display: block; font-weight: 600; } .cuenta td small { display: block; margin-top: 3px; font: 400 11.5px/1.25 var(--font-text); color: var(--text-tertiary); }
.cuenta td:first-child { color: var(--text-primary); font-weight: 600; }
@media (max-width: 620px) { .cuenta .oc { display: none; } }

/* contacto y empresa */
.datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--border-subtle); }
.dato { padding: 26px 28px 26px 0; border-right: 1px solid var(--border-subtle); }
.dato + .dato { padding-left: 28px; }
.dato:last-child { border-right: 0; }
.dato b { display: block; margin-top: 12px; font: 600 18px/1.35 var(--font-brand); letter-spacing: -.01em; }
.dato span.s { display: block; margin-top: 6px; font-size: 14px; color: var(--text-tertiary); }
@media (max-width: 760px) { .datos { grid-template-columns: minmax(0, 1fr); } .dato, .dato + .dato { padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--border-subtle); } }
.sello { display: inline-flex; align-items: center; gap: 10px; font: 600 11px/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.sello::before { content: ""; width: 22px; height: 1px; background: var(--brand-teal); flex: none; }

/* pie */
.pie { border-top: 1px solid var(--border-subtle); padding: 44px 0 56px; font-size: 13px; color: var(--text-tertiary); }
.pie .fila { display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: center; }
.pie img { height: 40px; opacity: .9; margin-left: -6px; }
.pie .leg { margin-top: 22px; max-width: 880px; line-height: 1.6; }
/* tres columnas (2026-09-24): logo + leyenda · Contacto · Matrículas */
.pie .cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
.pie .cols p { margin-top: 10px; font-size: 13.5px; color: var(--text-secondary); }
.pie .cols > div:first-child p { margin-top: 14px; }
.pie .leg { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--border-subtle); font-size: 12.5px; max-width: none; }
.pie .cols .eyebrow { display: block; margin-top: 8px; }
@media (max-width: 760px) { .pie .cols { grid-template-columns: minmax(0, 1fr); gap: 26px; } }

/* aparición calma */
.js .ap { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js .ap.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .ap { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* isla oscura dentro de una página clara (la muestra de la cuenta, bandas navy): los tokens del modo oscuro */
.oscuro, .contraste { --bg-app: #1b1f30; --bg-lockup: #11141f; --surface-card: #22273a; --surface-nested: #262c40; --surface-raised: #2b3148;
  --text-primary: #fff; --text-secondary: rgba(255,255,255,.70); --text-tertiary: rgba(255,255,255,.62);
  --border-subtle: rgba(255,255,255,.08); --border-strong: rgba(255,255,255,.12); --shadow-raised: 0 8px 28px rgba(0,0,0,.32);
  --accent-title-gradient: linear-gradient(120deg, #6ee7de 0%, #9b80ff 100%); --accent-gold-ink: #f2c94c;
  --field-teal: rgba(110,231,222,.16); --field-purple: rgba(155,128,255,.16); color: var(--text-primary); }

/* el logo navy (hoss-logo.png) viene sobre placa blanca: en papel claro se funde con multiply */
[data-theme="light"] .nav img, [data-theme="light"] .pie img { mix-blend-mode: multiply; }

/* números de la muestra: nunca se parten en dos renglones */
.cuenta td, .cuenta th { white-space: nowrap; }
.cuenta td:first-child { white-space: normal; }

/* celular: nada más ancho que la pantalla */
@media (max-width: 620px) {
  .tarifas td:last-child { white-space: normal; padding-left: 16px; }
  .tarifas { font-size: 14px; }
  .cuenta .top, .cuenta .pat { padding-inline: 16px; }
  .cuenta th, .cuenta td { padding-inline: 12px; }
  .cuenta .kpis div { padding: 14px 16px; }
  .btn { height: 46px; padding: 0 20px; }
}

[data-theme="dark"] .contraste, .claro {
  --bg-app: #f5f6f9;
  --bg-lockup: #eceef3;
  --surface-card: #ffffff;
  --surface-nested: #f1f3f7;
  --surface-raised: #ffffff;

  --text-primary: #11141f;
  --text-secondary: rgba(17, 20, 31, 0.70);
  --text-tertiary: rgba(17, 20, 31, 0.62);   /* .50 daba 3,41:1 — no pasaba AA */
  --text-quaternary: rgba(17, 20, 31, 0.45); /* SOLO decorativo — nunca texto */

  --border-subtle: rgba(17, 20, 31, 0.08);
  --border-strong: rgba(17, 20, 31, 0.12);

  /* Acentos oscurecidos para mantener contraste sobre blanco */
  --accent-teal: var(--brand-teal-700);
  --accent-purple: var(--brand-purple-600);
  --accent-gold: var(--brand-gold);     /* superficie/marcador; como texto usar la tinta */
  --accent-title-gradient: var(--brand-gradient-strong);

  /* Tinta de acento para texto chico: AA sobre #ffffff
     teal 5,3:1 · púrpura 7,4:1 · verde 5,4:1 · rojo 5,2:1 */
  --accent-teal-ink: #0f7a70;
  --accent-purple-ink: #4a2bc0;
  --market-up-ink: #0a7349;    /* 5,8:1 sobre blanco · 5,0:1 sobre el plate #eceef3 */
  --market-down-ink: #c01f2b;
  --accent-gold-ink: #7a5600;   /* 6,6:1 sobre blanco — el dorado puro da 1,6:1 */
  --chip-fg: #4a2bc0;
  --chip-bg: #f1edfd;
  --chip-bd: #cfc2f5;

  /* Semántica oscurecida en claro */
  --market-up: #0f9b67;
  --market-down: #d22531;

  --shadow-card: 0 1px 2px rgba(17, 20, 31, 0.06);
  --shadow-raised: 0 8px 28px rgba(17, 20, 31, 0.10);
  --shadow-overlay: 0 24px 64px rgba(17, 20, 31, 0.16);

  --field-teal: rgba(27, 167, 154, 0.10);
  --field-purple: rgba(85, 53, 212, 0.10);
  color: var(--text-primary); }

/* ── propio del diseno ── */

/* 2 — BOUTIQUE. Modo claro, papel. Cada sección es una doble página: el título queda fijo a la izquierda
   y el contenido corre a la derecha. El dorado aparece una sola vez, en el respaldo institucional. */
/* FONDO DE TODA LA PÁGINA (Manuel 2026-09-23: «un difuminado pero muuuy difuminado en todo el fondo»):
   dos brillos de la marca, fijos, casi imperceptibles, detrás de todo. Las bandas navy y la portada
   pintan encima. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(ellipse 60% 50% at 12% 20%, rgba(110, 231, 222, .07), transparent 70%),
  radial-gradient(ellipse 55% 55% at 88% 80%, rgba(155, 128, 255, .08), transparent 70%); }
[data-theme="dark"] body::before { background:
  radial-gradient(ellipse 60% 50% at 12% 20%, rgba(110, 231, 222, .10), transparent 70%),
  radial-gradient(ellipse 55% 55% at 88% 80%, rgba(155, 128, 255, .12), transparent 70%); }
/* PANTALLAS GRANDES (Manuel 2026-09-28: «se tiene que ver bien en todas las pantallas»): en un monitor de 2560 px la
   página quedaba chiquita (tipografías y botones en px fijos) y con mucho vacío (contenido de 1120 px, barra de borde
   a borde). Por encima de 1800 px toda la página se agranda EN PROPORCIÓN con `zoom`; debajo no cambia nada. Las tres
   secciones de pantalla completa dividen el alto de la pantalla por el mismo factor, así siguen llenándola justo. */
html { --z: 1; }
@media (min-width: 1800px) { html { --z: 1.2; } }
@media (min-width: 2200px) { html { --z: 1.35; } }
@media (min-width: 3000px) { html { --z: 1.7; } }
body { zoom: var(--z); }
/* BARRA más baja (Manuel 2026-09-25: «la podés achicar un toque»): 68 -> 56 px, botones 38 -> 34. Los altos de
   portada, Atención y Comisiones descuentan 57 px (barra + filete) en vez de 69. */
/* …y A TODO EL ANCHO (Manuel 2026-09-25: «Registrarse e Ingresar a la derecha del todo»): la barra ya no usa la
   columna de 1120 px del contenido; el logo va al borde izquierdo y los botones al derecho, con 28 px de margen. */
.nav .wrap { height: 56px; width: calc(100% - 56px); }
/* MODO OSCURO FIJO (Manuel 2026-09-25): sin botón sol/luna. El tema lo fija el <html data-theme="dark">. */
.nav .tema { display: none; }
.nav .btn { height: 34px; padding: 0 16px; }
/* BOTÓN SOL / LUNA en la barra (Manuel 2026-09-23). El tema lo maneja HOSS.tema() en contenido.js. */
.nav .tema { appearance: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-strong); background: transparent;
  color: var(--text-primary); display: inline-grid; place-items: center; cursor: pointer; flex: none; }
.nav .tema:hover { border-color: var(--text-tertiary); }
.nav .tema svg { width: 17px; height: 17px; }
.nav .tema .luna, [data-theme="dark"] .nav .tema .sol { display: none; }
[data-theme="dark"] .nav .tema .luna { display: block; }
/* BLOQUE DE CONTRASTE (Manuel 2026-09-23): de «Tu cuenta» para abajo la página va en el tono OPUESTO al
   elegido: navy en modo claro, claro en modo oscuro. Las variables las pone .contraste (base.css y el
   armador, que copia los tokens claros para el modo oscuro). */
.contraste { background: var(--bg-app); }
.contraste.rule { border-top-color: var(--border-subtle); }
.hero { padding-block: 56px; }
/* PORTADA A PANTALLA COMPLETA (Manuel 2026-09-21): «que lo de Empresa comience abajo, que no se vea en la
   primer vista». 69 px = la barra de arriba (68 + el filete). svh y no vh: en el celular vh cuenta la barra
   del navegador y la portada quedaba más alta que la pantalla. */
.hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: calc(100vh / var(--z) - 57px); min-height: calc(100svh / var(--z) - 57px); }
.hero .wrap { position: relative; z-index: 1; }
/* GRÁFICO de fondo: la variante 5 «grilla + línea» TAL CUAL la eligió Manuel (2026-09-21), sin la grilla de
   puntos. Probé agrandarla y llevarla de punta a punta y no: «así como está, tal cual». Una línea fina que sube,
   con su punto final y un brillo difuminado debajo. Decoración (aria-hidden): no es un dato. */
.hero .graf { position: absolute; inset: 0 0 0 auto; width: min(72%, 1280px); pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 80% 85% at 70% 50%, #000 20%, transparent 78%); mask-image: radial-gradient(ellipse 80% 85% at 70% 50%, #000 20%, transparent 78%); }
.hero .graf svg { display: block; width: 100%; height: 100%; }
/* COLOR (Manuel 2026-09-21: «queda como muy vacío, ¿no debería haber un poco más de color?» -> opción C):
   un brillo teal arriba y uno violeta abajo, los dos colores de la marca, y la línea más gruesa para que no
   se pierda en el brillo. Va en ::before, DETRÁS del gráfico y del texto. */
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(ellipse 50% 58% at 74% 26%, rgba(110, 231, 222, .40), transparent 68%),
  radial-gradient(ellipse 56% 64% at 94% 70%, rgba(155, 128, 255, .42), transparent 68%); }
.hero .graf path[stroke] { stroke-width: 4px; opacity: 1; }
/* celular: los brillos bajan, para que el teal no quede detrás del titular */
@media (max-width: 900px) { .hero::before { background:
  radial-gradient(ellipse 80% 34% at 88% 60%, rgba(110, 231, 222, .36), transparent 70%),
  radial-gradient(ellipse 90% 40% at 96% 88%, rgba(155, 128, 255, .42), transparent 70%); } }
/* celular: debajo del texto, a todo el ancho */
@media (max-width: 900px) { .hero { align-items: flex-start; padding-top: 18vh; } .hero .graf { inset: 56% 0 0 0; width: 100%; } }
.hero .h-hero { font-size: clamp(46px, 8vw, 116px); max-width: 11ch; }
/* padding-top 28 -> 52: Manuel quiso la bajada «un poco más abajo» del filete (2026-09-21) */
.hero .pie-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; margin-top: 56px; padding-top: 52px; }   /* sin filete (Manuel 2026-09-23: «sacá esta línea») */
.hero .lead { max-width: 520px; }
.hero .acc { display: flex; gap: 12px; flex-wrap: wrap; }
.doble { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 32px clamp(32px, 6vw, 96px); align-items: start; }
.doble > header { position: sticky; top: 88px; }
.doble > header .h-2 { margin-top: 14px; }
.doble > header p { margin-top: 16px; color: var(--text-secondary); font-size: 15.5px; }
.manif { font: 500 clamp(20px, 2vw, 26px)/1.55 var(--font-brand); letter-spacing: -.012em; }
.doble .pilares { grid-template-columns: minmax(0, 1fr); border-top: 0; }
.doble .pilar, .doble .pilar + .pilar { padding: 26px 0; border-right: 0; border-top: 1px solid var(--border-subtle); }
.doble .pilar:first-child { border-top: 0; padding-top: 0; }
.doble .pilar h3 { margin-top: 12px; }
.doble .linea { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.doble .lineas { border-top: 0; }
.doble .linea:first-child { padding-top: 0; }
.doble .datos { grid-template-columns: minmax(0, 1fr); border-top: 0; }
.doble .dato, .doble .dato + .dato { padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--border-subtle); }
.doble .dato:first-child { padding-top: 0; }
.pilares-emp { margin-top: 40px; padding-top: 34px; border-top: 1px solid var(--border-subtle); }
/* COMISIONES compacta (Manuel: «esto me encantó como quedó así»): título y texto a la izquierda, botón a la derecha */
/* …y en SU PROPIA PANTALLA (Manuel 2026-09-24: «cuando llegás ahí ya no se vea el título de Atención al cliente, como el
   resto de la página: una parte no se ve en la otra»). Misma altura que la portada, contenido centrado. */
/* Alto = la pantalla MENOS el pie (Manuel: «no quiero que quede TODO en blanco»): al llegar desde el menú, la última pantalla
   es Comisiones + pie y nada de Atención al cliente. 300 px ≈ el pie de tres columnas. */
.final { display: flex; flex-direction: column; min-height: calc(100vh / var(--z) - 57px); min-height: calc(100svh / var(--z) - 57px); }
#comisiones { flex: 1; min-height: 320px; display: flex; align-items: center; }
#comisiones > .wrap { width: min(1120px, 100% - 2 * clamp(20px, 5vw, 80px)); }
.comisiones { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.comisiones p { color: var(--text-secondary); font-size: 15.5px; max-width: 48ch; margin-top: 8px; }
.comisiones h2 { margin: 0; }
/* cierre de «Qué hacemos»: la frase que iba bajo el título pasa al final de la lista, en un renglón */
.cierre { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: 15.5px; }
/* ── COLOR (Manuel 2026-09-22: «se ve muy blanco» -> banda navy en Tu cuenta, pie navy, íconos) ─────────────────────────────────────────────── */
#cuenta { position: relative; overflow: hidden; border-top: 0; }
#cuenta::before { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(ellipse 42% 60% at 8% 18%, rgba(110, 231, 222, .16), transparent 70%),
  radial-gradient(ellipse 50% 70% at 96% 86%, rgba(155, 128, 255, .22), transparent 70%); }
#cuenta .wrap { position: relative; }
#cuenta + section { border-top: 0; }
/* ATENCIÓN AL CLIENTE en su propia pantalla (2026-09-25): alto de portada, contenido centrado. El campo de
   trapecios va abajo a la IZQUIERDA (los datos están a la derecha y no se pisan) y los brillos en las esquinas. */
#contacto { position: relative; overflow: hidden; min-height: calc(100vh / var(--z) - 57px); min-height: calc(100svh / var(--z) - 57px); display: flex; align-items: center; }
#contacto::before { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(ellipse 46% 60% at 6% 92%, rgba(110, 231, 222, .20), transparent 70%),
  radial-gradient(ellipse 44% 64% at 94% 10%, rgba(155, 128, 255, .22), transparent 70%); }
#contacto .campo .t1 { right: auto; top: auto; left: -14vw; bottom: -18vw; width: 44vw; height: 44vw; }
#contacto .campo .t2 { right: auto; top: auto; left: 8vw; bottom: -6vw; width: 30vw; height: 30vw; }
#contacto > .wrap { width: min(1120px, 100% - 2 * clamp(20px, 5vw, 80px)); margin-inline: auto; }
#contacto .doble > header { position: static; }
#contacto .datos { align-self: center; }
@media (max-width: 900px) { #contacto { min-height: 0; padding-block: 72px; } #contacto .campo .t1, #contacto .campo .t2 { opacity: .35; } }
.pie { border-top: 0; }
.pie a:hover { color: #fff; }
/* la regla del tema claro multiplica el logo contra el fondo: sobre navy el logo blanco desaparecía */
.pie.contraste img { mix-blend-mode: normal; opacity: 1; }   /* pesa igual que [data-theme=light] .pie img y va despues: gana */
.pie, .pie .leg { color: var(--text-tertiary); } .pie a, .pie .fila span { color: var(--text-secondary); }   /* tokens: el pie cambia de tono con el tema */
.ico { display: block; width: 30px; height: 30px; }
.pilar .ico { margin-bottom: 16px; }
.pilar .n { display: none; }
.doble .linea.con-ico { grid-template-columns: 46px minmax(0, 1fr); column-gap: 8px; }
.doble .linea.con-ico > .ico { grid-row: 1 / span 2; margin-top: 2px; }
.doble .linea.con-ico > p { grid-column: 2; }
.respaldo { margin-top: 30px; padding: 22px 24px; border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--surface-card); }
.respaldo p { margin-top: 12px; color: var(--text-secondary); font-size: 15px; }
/* botones: el primario en el degradé de la marca (Manuel: «con el Registrarse de color, está bueno») */
/* SIN borde (Manuel 2026-09-25: «se ve mal, tiene como un corte»): el borde de 1 px transparente sobre el degradé
   dejaba una costura en el contorno redondeado en pantallas con escala fraccionaria (125 %). La altura es fija, así
   que sacarlo no cambia el tamaño. */
.btn-solid { background: var(--brand-gradient-strong); color: #fff; border: 0; }
.btn-solid:hover { filter: brightness(1.08); }
.h-2 { font-size: clamp(28px, 2.6vw, 34px); }
/* cada línea de «Qué hacemos» abre su subpágina (2026-09-24): título enlazado y un «Ver más →» en su propio renglón
   (el «Más» pegado al final del texto quedaba «todo muy junto», Manuel) */
.linea h3 a:hover { color: var(--brand-violet); }
.doble .linea.con-ico > .mas { grid-column: 2; justify-self: start; margin-top: 4px; font-size: 14px; }
@media (max-width: 900px) { .doble { grid-template-columns: minmax(0, 1fr); } .doble > header { position: static; } .hero .pie-hero { grid-template-columns: minmax(0, 1fr); } }

/* foco visible con teclado en las puertas y en los botones */
.puerta:focus-visible, .btn:focus-visible, .nav a:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; }
.panel[hidden] { display: none !important; }

/* ── subpaginas de Que hacemos ── */

/* SUBPÁGINA de una línea de «Qué hacemos» (Manuel 2026-09-24). Misma Boutique: portada corta con el título de la
   línea, doble página con los puntos, los botones en la portada (sin muestras de la terminal, Manuel 2026-09-24),
   el pie. (Sin «Las otras líneas»: Manuel 2026-09-24, «no va para nada».) Una maqueta para las cinco: armar_sitio.py escribe <clave>.html con <body data-pagina="clave">
   y contenido.js rellena los huecos «pagina-…» desde H.paginas. Los estilos de la Boutique (#hero, .doble,
   .contraste, sol/luna) ya están en estilos.css: acá va solo lo propio, con el prefijo .sub. */
.sub .hero { min-height: 0; padding-block: 56px 64px; align-items: flex-start; }
.sub .hero::before { background:
  radial-gradient(ellipse 46% 70% at 84% 30%, rgba(110, 231, 222, .26), transparent 68%),
  radial-gradient(ellipse 50% 70% at 100% 90%, rgba(155, 128, 255, .28), transparent 68%); }
.sub .hero .h-hero { font-size: clamp(38px, 5.4vw, 72px); max-width: 14ch; margin-top: 14px; }
.sub .hero .lead { max-width: 60ch; margin-top: 26px; }
.sub .volver { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 30px; font: 500 14px/1 var(--font-text); color: var(--text-secondary); }
.sub .volver:hover { color: var(--text-primary); }
.sub .volver::before { content: "←"; }
.sub .doble > header p { margin-top: 16px; color: var(--text-secondary); font-size: 15.5px; max-width: 40ch; }
.sub .hero .acc { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
/* banda de cierre (AP): frase grande centrada, texto y botón, con los brillos de la marca. Vacía en las otras páginas. */
.cierre-banda { position: relative; overflow: hidden; text-align: center; padding-block: 88px; }
.cierre-banda:has(.wrap:empty) { display: none; }
.cierre-banda::before { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(ellipse 40% 70% at 18% 30%, rgba(110, 231, 222, .18), transparent 70%),
  radial-gradient(ellipse 45% 70% at 86% 80%, rgba(155, 128, 255, .22), transparent 70%); }
.cierre-banda .wrap { position: relative; }
.cierre-banda .h-2c { font-size: clamp(34px, 4.4vw, 56px); margin-top: 14px; }
.cierre-banda .lead { margin: 16px auto 0; max-width: 44ch; }
.cierre-banda .acc { display: flex; justify-content: center; margin-top: 28px; }
.cierre-banda + .pie { border-top: 1px solid var(--border-subtle); }

/* ── INFORMES (2026-10-19) ── */
.informes-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.informes-cab p { color: var(--text-secondary); font-size: 15.5px; max-width: 48ch; margin-top: 8px; }
.informes-cab h2 { margin: 0; }
.rs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
/* la tarjeta (diseño B, Manuel 2026-10-19): la primera hoja del informe esfumada detrás, un velo navy y el título centrado abajo */
.r { position: relative; overflow: hidden; border-radius: 22px; min-height: 320px; display: block; text-decoration: none; color: #fff; background: #11141f; transition: transform .18s ease, box-shadow .18s ease; }
.r:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0, 0, 0, .25); }
.r img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; filter: blur(2px) saturate(.6); opacity: .55; transform: scale(1.04); }
.r .velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17, 20, 31, .25) 0%, rgba(17, 20, 31, .85) 55%, #11141f 100%); }
.r .txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; padding: 28px 26px 30px; }
.r .ey { font: 600 9.5px/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.r h4 { font: 600 22px/1.15 var(--font-brand); letter-spacing: -.02em; margin: 14px 0 0; max-width: 20ch; color: #fff; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.informes-grupo { margin-top: 56px; } .informes-grupo:first-of-type { margin-top: 0; }
.informes-grupo h3 { margin: 0 0 -22px; }
/* la página de un informe: título y botón arriba, las hojas abajo */
.inf-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 40px 0 28px; }
.inf-cab h1 { margin: 10px 0 0; font-size: clamp(26px, 3vw, 38px); max-width: 24ch; }
.inf-cab .bajada { color: var(--text-secondary); font-size: 15.5px; max-width: 60ch; margin-top: 10px; }
.inf-cab .btn { flex-shrink: 0; margin-top: 6px; }
.hojas-inf { display: flex; flex-direction: column; gap: 18px; padding-bottom: 72px; }
.hojas-inf img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 18px 50px rgba(0, 0, 0, .28); background: #fff; }
.inf-pie { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 0 0 72px; font-size: 14px; }
@media (max-width: 900px) { .rs { grid-template-columns: minmax(0, 1fr); } .informes-cab { align-items: flex-start; } .inf-cab .btn { width: 100%; justify-content: center; } }