/* ==========================================================================
   Trixi Systems — hoja de estilos
   Tokens tomados tal cual del design system de marca "Trixi"
   (project/tokens.json). La composición usa paneles redondeados a sangre,
   titulares grandes y un cierre con el logotipo recortado.
   No agregar colores ni tipografías fuera de estas escalas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens de marca
   -------------------------------------------------------------------------- */
:root {
  /* Escala esmeralda */
  --esmeralda-50:  #edf7f5;
  --esmeralda-100: #d6f0eb;
  --esmeralda-200: #ace2d7;
  --esmeralda-300: #5ccfb2;
  --esmeralda-400: #2bb69b;
  --esmeralda-500: #16a085;
  --esmeralda-600: #12826c;
  --esmeralda-700: #0e6756;
  --esmeralda-800: #0c5043;
  --esmeralda-900: #0a3b31;
  --esmeralda-950: #072720;

  /* Escala grafito */
  --grafito-50:  #f5f6f7;
  --grafito-100: #e6e8eb;
  --grafito-200: #cdd1d5;
  --grafito-300: #aaafb6;
  --grafito-400: #848c94;
  --grafito-500: #636a74;
  --grafito-600: #49515a;
  --grafito-700: #343a42;
  --grafito-800: #20252b;
  --grafito-900: #181c20;
  --grafito-950: #101316;

  /* Escala blanco cálido */
  --calido-50:  #fbfbf7;
  --calido-100: #f5f4ef;
  --calido-200: #eae9e1;
  --calido-300: #d5d3c8;

  /* Roles semánticos */
  --bg: #ffffff;
  --surface: #f5f4ef;
  --surface-sand: #eae9e1;
  --surface-raised: #ffffff;
  --inverse: #20252b;
  --on-inverse: #f5f4ef;
  --line: #eae9e1;
  --line-strong: #848c94;
  --ink: #20252b;
  --ink-muted: #5b626c;
  --primary: #0e6756;
  --primary-hover: #0c5043;
  --on-primary: #ffffff;
  --brand: #16a085;
  --highlight: #12826c;
  --accent: #5ccfb2;
  --on-accent: #20252b;
  --accent-soft: #d6f0eb;
  --on-accent-soft: #0a3b31;
  --tint: #edf7f5;
  --tint-strong: #d6f0eb;
  --on-tint: #0c5043;

  /* Tipografía */
  --font-display: "Plus Jakarta Sans", "Figtree", system-ui, sans-serif;
  --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Espaciado (base 4px) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;
  --container-max: 1200px;

  /* Radios: todo lo accionable es píldora */
  --radius-xs: 8px;  --radius-sm: 12px; --radius-md: 20px;
  --radius-lg: 28px; --radius-xl: 40px; --radius-full: 9999px;

  /* Sombras: una sola, amplia y difusa */
  --shadow-sm: 0 12px 30px -14px #20252b29;
  --shadow-lg: 0 30px 70px -20px #20252b33;
  --shadow-icon: 0 24px 48px -18px #0e675680;
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #0e6756;
  --focus-ring-dark: 0 0 0 2px #101316, 0 0 0 4px #5ccfb2;

  /* Resplandores esmeralda: la firma visual de la marca */
  --glow-light:
    radial-gradient(75% 45% at 15% 90%, #5ccfb28c, #5ccfb200 70%),
    radial-gradient(55% 40% at 100% 100%, #16a08566, #16a08500 70%),
    #f5f4ef;
  --glow-hero:
    radial-gradient(95% 72% at 6% 112%, #5ccfb2 0%, #5ccfb200 60%),
    radial-gradient(70% 55% at 46% 118%, #2bb69b99, #2bb69b00 70%),
    radial-gradient(85% 95% at 98% 4%, #0c50434d, #0c504300 70%),
    linear-gradient(166deg, #101316 0%, #0a2b26 62%, #0a3b31 100%);
  /* Los centros van por debajo del bloque de texto: el resplandor sólo roza el
     borde inferior del panel y las filas conservan su contraste. */
  --glow-dark:
    radial-gradient(56% 38% at 90% 118%, #16a085cc, #16a08500 70%),
    radial-gradient(44% 34% at 2% 122%, #5ccfb28c, #5ccfb200 70%),
    #101316;
  --glow-end:
    radial-gradient(70% 60% at 4% 2%, #16a085b3, #16a08500 68%),
    radial-gradient(60% 55% at 104% 86%, #5ccfb273, #5ccfb200 70%),
    #0a3b31;
  --gradient-icon: linear-gradient(145deg, #16a085 0%, #0c5043 100%);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }
.on-dark :focus-visible { box-shadow: var(--focus-ring-dark); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
  color: inherit;
  letter-spacing: -.02em;
}
p { margin: 0; text-wrap: pretty; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-5); top: -100px; z-index: 100;
  background: var(--inverse); color: var(--on-inverse);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-full);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--space-3); color: var(--on-inverse); }

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   3. Rejilla: paneles a sangre con canal lateral
   -------------------------------------------------------------------------- */
/* Los paneles estructurales van de borde a borde. El ancho del texto lo fija
   .inner, no el contenedor exterior. */
.shell { width: 100%; }
.inner {
  width: min(100%, calc(var(--container-max) + 2 * clamp(20px, 4vw, 60px)));
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 60px);
}
.panel { border-radius: var(--radius-xl); overflow: hidden; }

.section { padding-block: clamp(64px, 9vw, 112px); scroll-margin-top: 24px; }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }

/* Escalera de fondos. Cada sección usa un peldaño distinto al de su vecina,
   para que al bajar se note el cambio de tema sin leer el titular. Todos los
   valores salen de las tres familias del sistema: esmeralda, grafito y cálido. */
.section--white  { background: var(--bg); }
.section--warm   { background: var(--surface); }
.section--sand   { background: var(--surface-sand); }
.section--mint   { background: var(--tint); }
.section--mint-strong { background: var(--tint-strong); }
.section--glow   { background: var(--glow-light); }
/* Grafito plano, sin resplandor: así no se confunde con el panel de zonas. */
.section--ink    { background: var(--grafito-900); color: var(--calido-100); }

/* Ajustes de los bordes y fichas cuando el fondo deja de ser blanco */
.section--ink .nots li { border-color: #f5f4ef26; }
.section--ink .nots .ico { color: var(--grafito-400); }
.section--sand .faq__item { border-color: var(--calido-300); }
.section--sand .faq__chevron { background: var(--surface-raised); }
.section--sand .faq__item[open] .faq__chevron { background: var(--inverse); color: var(--accent); }

/* Tipografía auxiliar */
.eyebrow {
  margin: 0 0 var(--space-5);
  font-family: var(--font-mono);
  font-size: 13px; line-height: 1.3; font-weight: 400;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-muted);
}
.on-dark .eyebrow { color: var(--esmeralda-200); }
.hl { color: var(--highlight); }
.on-dark .hl { color: var(--accent); }

.h-display { font-size: clamp(34px, 4.6vw, 64px); line-height: 1.06; letter-spacing: -.026em; }
.h-section { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.07; letter-spacing: -.022em; }
.h-card    { font-size: clamp(20px, 2vw, 25px); line-height: 1.25; letter-spacing: -.012em; }
.lead      { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--ink-muted); }
.on-dark .lead { color: var(--esmeralda-100); }

/* Píldora de etiqueta */
.pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 7px var(--space-4) 7px var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid #f5f4ef3d; background: #f5f4ef14;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--calido-100);
  backdrop-filter: blur(8px);
}
.pill__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

/* --------------------------------------------------------------------------
   4. Botones — todo lo accionable es píldora
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-3);
  font-family: var(--font-sans); font-weight: 600; line-height: 1.2;
  border-radius: var(--radius-full); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}
.btn--sm { height: 40px; padding: 0 var(--space-5); font-size: 14px; }
.btn--md { height: 48px; padding: 0 var(--space-5); font-size: 15px; }
.btn--lg { height: 62px; padding: 0 var(--space-6); font-size: 17px; }
.btn--arrow.btn--sm { padding-right: 4px; }
.btn--arrow.btn--md { padding-right: 6px; }
.btn--arrow.btn--lg { padding-right: 8px; }

.btn__dot {
  display: grid; place-items: center; flex: none;
  border-radius: var(--radius-full);
  background: var(--accent); color: var(--on-accent);
  transition: transform .2s;
}
.btn--sm .btn__dot { width: 32px; height: 32px; }
.btn--md .btn__dot { width: 36px; height: 36px; }
.btn--lg .btn__dot { width: 46px; height: 46px; }
.btn:hover .btn__dot { transform: translateX(2px); }

.btn--primary { background: var(--inverse); color: var(--on-inverse); }
.btn--primary:hover { background: var(--grafito-700); color: var(--on-inverse); }
.btn--light { background: var(--calido-100); color: var(--inverse); }
.btn--light:hover { background: #ffffff; color: var(--inverse); }
.btn--light .btn__dot { background: var(--inverse); color: var(--accent); }
.btn--accent { background: var(--accent); color: var(--on-accent); }
.btn--accent .btn__dot { background: var(--on-accent); color: var(--accent); }
.btn--accent:hover { background: var(--esmeralda-200); color: var(--on-accent); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--secondary:hover { background: var(--surface-sand); border-color: var(--ink); color: var(--ink); }
.btn--glass {
  background: #f5f4ef1f; color: var(--calido-100); border-color: #f5f4ef4d;
  backdrop-filter: blur(10px);
}
.btn--glass:hover { background: #f5f4ef33; color: var(--calido-100); }
.btn:active { transform: translateY(1px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: 600; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--line-strong); padding-bottom: 3px;
}
.link-arrow:hover { color: var(--primary); border-color: var(--primary); }
.on-dark .link-arrow { color: var(--calido-100); border-color: #f5f4ef59; }
.on-dark .link-arrow:hover { color: var(--accent); border-color: var(--accent); }
.link-arrow .ico { transition: transform .2s; }
.link-arrow:hover .ico { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   5. Íconos
   -------------------------------------------------------------------------- */
.ico { flex: none; display: block; width: 20px; height: 20px; }
.ico--sm { width: 16px; height: 16px; }
.ico--lg { width: 24px; height: 24px; }

.chip {
  display: inline-grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  background: var(--tint); color: var(--on-tint);
}
.chip--strong { background: var(--tint-strong); }
.chip--sand { background: var(--surface-sand); color: var(--ink); }
.chip--solid {
  background: var(--gradient-icon); color: var(--calido-100);
  box-shadow: var(--shadow-icon), inset 0 2px 0 #ffffff40;
}

/* --------------------------------------------------------------------------
   6. Hero: panel oscuro con la navegación adentro
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--glow-hero);
  color: var(--calido-100);
  overflow: hidden;
  display: grid; grid-template-rows: auto 1fr;
  /* Ocupa la primera vista completa. svh evita que en móvil la barra del
     navegador empuje el contenido fuera de pantalla. */
  min-height: 100vh;
  min-height: 100svh;
  padding-bottom: clamp(24px, 3vw, 44px);
}

/* Navegación dentro del hero */
.topbar { padding-block: var(--space-5); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.topbar__logo { display: flex; flex: none; }
.topbar__logo img { height: 32px; width: auto; }
.topbar__menu { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }
.topbar__links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); list-style: none; margin: 0; padding: 0; }
.topbar__links a {
  color: var(--calido-100); text-decoration: none;
  font-size: 15px; font-weight: 500; padding-block: var(--space-2);
  border-bottom: 1px solid transparent;
}
.topbar__links a:hover { color: var(--accent); border-color: var(--accent); }
.topbar__toggle {
  display: none; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: none;
  border: 1px solid #f5f4ef4d; border-radius: var(--radius-full);
  background: #f5f4ef14; color: var(--calido-100); cursor: pointer;
}
.topbar__toggle .ico--close { display: none; }
.topbar__toggle[aria-expanded="true"] .ico--menu { display: none; }
.topbar__toggle[aria-expanded="true"] .ico--close { display: block; }

/* Contenido del hero: una sola columna de lectura, título y llamado */
.hero__body { align-self: end; padding-block: clamp(24px, 3vw, 44px) clamp(24px, 5vh, 64px); }
.hero__title { max-width: 19ch; }
.hero__actions {
  margin-top: clamp(28px, 3.2vw, 44px);
  display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center;
}

/* Barra fija que aparece al bajar: solo logo y llamado a la acción.
   Sin JavaScript nunca se muestra y no se pierde nada. */
.sticky-cta {
  position: fixed; inset: 0 0 auto; z-index: 60;
  background: #ffffffeb; backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-100%); transition: transform .25s ease;
}
.sticky-cta.is-on { transform: none; }
.sticky-cta__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); min-height: 66px;
}
.sticky-cta img { height: 28px; width: auto; }

/* --------------------------------------------------------------------------
   7. Dos columnas: titular a la izquierda, contenido a la derecha
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.split__head { position: sticky; top: var(--space-7); }
/* El titular de una columna estrecha necesita un cuerpo menor que el de
   ancho completo, o se parte en cinco líneas. */
.split__head .h-section { font-size: clamp(27px, 3.2vw, 42px); line-height: 1.08; }
.split--static .split__head { position: static; }

/* Lista de señales */
.signals { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.signals li {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.5;
}
.signals li:first-child { border-top: 1px solid var(--line); }
.signals .ico { margin-top: 4px; color: var(--primary); }

/* Lista de descartes */
.nots { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.nots li {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.5;
}
.nots li:first-child { border-top: 1px solid var(--line); }
.nots .ico { margin-top: 4px; color: var(--grafito-400); }

/* --------------------------------------------------------------------------
   8. Banda de énfasis
   -------------------------------------------------------------------------- */
.band__text {
  max-width: 24ch;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(26px, 3.6vw, 44px); line-height: 1.12; letter-spacing: -.02em;
  text-wrap: balance;
}
.band__note { margin-top: var(--space-5); max-width: 46ch; }

/* --------------------------------------------------------------------------
   9. Zonas de la operación: titulares grandes numerados sobre panel oscuro
   -------------------------------------------------------------------------- */
.dark-panel {
  background: var(--glow-dark);
  color: var(--calido-100);
  overflow: hidden;
}

.zones { margin-top: clamp(40px, 5vw, 64px); display: grid; }
.zone {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: var(--space-5) clamp(24px, 4vw, 64px); align-items: center;
  padding-block: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid #f5f4ef26;
  transition: background-color .2s;
}
.zone:last-child { border-bottom: 1px solid #f5f4ef26; }
.zone__name {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(26px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -.026em;
  color: var(--grafito-300);
  transition: color .2s;
  display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap;
}
.zone__num {
  font-family: var(--font-mono); font-size: clamp(11px, 1vw, 14px);
  letter-spacing: .06em; color: var(--esmeralda-300); align-self: flex-start;
  transition: color .2s;
}
.zone__text { font-size: clamp(15px, 1.35vw, 17px); line-height: 1.55; color: var(--grafito-300); transition: color .2s; }
.zone:hover .zone__name, .zone:focus-within .zone__name { color: var(--calido-100); }
.zone:hover .zone__text, .zone:focus-within .zone__text { color: var(--esmeralda-100); }

/* Dos ideas en paralelo, separadas por filete: se leen de un vistazo en vez de
   apilarse como un párrafo largo. */
.duo {
  margin-top: clamp(40px, 5vw, 72px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 72px);
}
.duo__item {
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  margin: 0;
}
.on-dark .duo__item { border-top-color: #f5f4ef38; }

/* --------------------------------------------------------------------------
   10. Tarjetas (cómo trabajamos)
   -------------------------------------------------------------------------- */
.cards {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5);
}
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.card {
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.2vw, 30px);
  border-radius: var(--radius-lg);
  background: var(--surface-raised); border: 1px solid var(--line);
  min-height: 300px;
}
.card--raised { border-color: transparent; box-shadow: var(--shadow-lg); }
.card__num {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em;
  color: var(--primary); margin-bottom: var(--space-6);
}
.card__title { margin-top: var(--space-6); }
.card__text { margin-top: auto; padding-top: var(--space-5); font-size: 16.5px; line-height: 1.6; color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   11. Quién está detrás
   -------------------------------------------------------------------------- */
.founder {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px); align-items: start;
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--radius-xl);
  background: var(--surface-raised); box-shadow: var(--shadow-lg);
}
.founder__text { margin-top: var(--space-5); font-size: clamp(16px, 1.5vw, 18px); line-height: 1.65; color: var(--ink-muted); }
.founder__links { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-5); }

/* --------------------------------------------------------------------------
   12. Newsletter
   -------------------------------------------------------------------------- */
.news { max-width: 62ch; }
/* Sin esto, un hijo con ancho propio (un botón que no parte) ensancha su columna
   y empuja el contenido fuera de la pantalla. */
.hero__body > *, .founder > *, .end__top > *, .end__cols > *, .split > * { min-width: 0; }
.news__text { margin-top: var(--space-5); font-size: clamp(16px, 1.5vw, 18px); line-height: 1.6; color: var(--grafito-600); }

.form__fine { margin-top: var(--space-4); font-size: 13px; line-height: 1.5; color: var(--grafito-600); }
.form__fine a { color: var(--primary); }

/* --------------------------------------------------------------------------
   13. Preguntas frecuentes (acordeón sin JavaScript)
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 0; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__q {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-5);
  padding: var(--space-5) 0;
  font-family: var(--font-sans); font-size: clamp(16px, 1.5vw, 18.5px);
  font-weight: 500; line-height: 1.4;
  color: var(--ink); cursor: pointer; list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--primary); }
.faq__chevron {
  flex: none; width: 18px; height: 18px; padding: 7px;
  box-sizing: content-box; border-radius: var(--radius-full);
  background: var(--surface-sand); color: var(--ink);
  transition: transform .2s, background-color .2s, color .2s;
}
.faq__item[open] .faq__chevron { transform: rotate(180deg); background: var(--inverse); color: var(--accent); }
.faq__a { padding: 0 0 var(--space-6); max-width: 62ch; font-size: 16.5px; line-height: 1.65; color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   14. Panel de cierre: llamado, enlaces y logotipo recortado
   -------------------------------------------------------------------------- */
.end {
  background: var(--glow-end);
  color: var(--calido-100);
  overflow: hidden;
  padding-block: clamp(56px, 7vw, 104px) clamp(40px, 5vw, 64px);
}
.end__brand { margin-bottom: clamp(28px, 3vw, 40px); display: block; }
.end__brand img { height: 32px; width: auto; }
.end__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 72px); }
.end__title { font-size: clamp(30px, 4vw, 50px); line-height: 1.07; letter-spacing: -.024em; max-width: 16ch; }
.end__text { margin-top: var(--space-5); max-width: 42ch; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.55; color: var(--esmeralda-100); }
.end__cta { margin-top: var(--space-7); }

.end__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.end__h {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--esmeralda-200); margin: 0 0 var(--space-4);
}
.end__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); font-size: 15px; }
.end__list a { color: var(--calido-100); text-decoration: none; }
.end__list a:hover { color: var(--accent); }

.end__data {
  margin-top: clamp(40px, 5vw, 72px); padding-top: var(--space-6);
  border-top: 1px solid #f5f4ef2e;
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-7);
  font-size: 15px;
}
.end__data span { display: inline-flex; align-items: center; gap: var(--space-2); }
.end__data a { color: var(--calido-100); text-decoration: underline; text-underline-offset: 3px; }
.end__data a:hover { color: var(--accent); }

.end__legal {
  margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: 1px solid #f5f4ef1f;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4);
  font-size: 13.5px; color: var(--esmeralda-200);
}
.end__legal a { color: var(--esmeralda-200); text-decoration: none; }
.end__legal a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   15. Páginas internas
   -------------------------------------------------------------------------- */
.pagehead {
  background: var(--glow-hero);
  color: var(--calido-100);
  overflow: hidden;
  padding-bottom: clamp(48px, 6vw, 88px);
}
.pagehead__body { padding-top: clamp(48px, 7vw, 96px); }
.pagehead__title { font-size: clamp(32px, 4.6vw, 56px); line-height: 1.06; letter-spacing: -.024em; max-width: 18ch; }
.pagehead__lead { margin-top: var(--space-5); max-width: 52ch; }

.prose { max-width: 70ch; }
.prose h2 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.25; margin-top: var(--space-8); }
.prose h3 { font-size: 20px; line-height: 1.3; margin-top: var(--space-6); }
.prose p, .prose ul, .prose ol { margin-top: var(--space-4); font-size: 17px; line-height: 1.7; color: var(--ink-muted); }
.prose li { margin-top: var(--space-2); }
.prose strong { color: var(--ink); }

.empty-state {
  padding: clamp(28px, 4vw, 48px);
  border: 1px dashed var(--line-strong); border-radius: var(--radius-lg);
  background: var(--surface); max-width: 70ch;
}
.empty-state p { color: var(--ink-muted); font-size: 17px; }
.empty-state p + p { margin-top: var(--space-4); }

.post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.post-card {
  display: block; padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface-raised); text-decoration: none; color: inherit;
}
.post-card:hover { box-shadow: var(--shadow-sm); color: inherit; }
.post-card__meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.post-card__title { margin-top: var(--space-3); font-size: clamp(20px, 2vw, 26px); line-height: 1.25; }
.post-card__text { margin-top: var(--space-3); color: var(--ink-muted); font-size: 17px; }

/* --------------------------------------------------------------------------
   16. Marcador de dato pendiente — NO DEBE QUEDAR AL PUBLICAR
   Cada {{TOKEN}} está listado en PENDIENTES.md.
   -------------------------------------------------------------------------- */
.pend {
  background: #f7efdf; color: #8a5f12;
  padding: 1px 6px; border-radius: var(--radius-xs);
  font-family: var(--font-mono); font-size: .85em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* --------------------------------------------------------------------------
   17. Adaptación a pantallas pequeñas (desde 360px)
   -------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  .topbar__toggle { display: inline-flex; }
  .topbar { position: relative; }
  .topbar__menu {
    display: none;
    position: absolute; left: 0; right: 0; top: calc(100% + var(--space-3));
    z-index: 20;
    flex-direction: column; align-items: stretch; gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: #101316f2; border: 1px solid #f5f4ef26;
    backdrop-filter: blur(14px);
  }
  .topbar__menu.is-open { display: flex; }
  .topbar__links { flex-direction: column; align-items: stretch; gap: 0; }
  .topbar__links a { display: block; padding: var(--space-3) 0; border-bottom: 1px solid #f5f4ef1f; }
  .topbar__menu .btn { width: 100%; }

  .split { grid-template-columns: 1fr; gap: var(--space-7); }
  .split__head { position: static; }
  .duo { grid-template-columns: 1fr; gap: var(--space-6); }
  .cards { grid-template-columns: 1fr; }
  .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
  .card { min-height: 0; }
  .end__top { grid-template-columns: 1fr; }
  .end__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zone { grid-template-columns: 1fr; gap: var(--space-3); align-items: start; }
  .zone__text { max-width: 52ch; }
  .founder { grid-template-columns: 1fr; }
  .hero__title { max-width: 18ch; }
}

@media (max-width: 640px) {
  .inner { padding-inline: 20px; }
  .founder { border-radius: var(--radius-lg); }
  /* En móvil el botón grande no se estira al ancho de la pantalla: se ajusta a
     su texto. Las etiquetas están pensadas para caber en una línea a 15px. */
  .btn { white-space: normal; }
  .btn--lg {
    height: 54px; min-height: 0; padding-block: 0;
    font-size: 15px; padding-inline: var(--space-5);
  }
  .btn--arrow.btn--lg { padding-right: 6px; }
  .btn--lg .btn__dot { width: 38px; height: 38px; }
  .hero__actions { align-items: flex-start; }
  .cards--4 { grid-template-columns: 1fr; }
  .end__cols { grid-template-columns: 1fr; gap: var(--space-7); }
  .end__data { flex-direction: column; gap: var(--space-3); }
  /* La etiqueta larga en píldora se parte en tres líneas en pantallas
     angostas: ahí se lee mejor como rótulo suelto. */
  .pill { border: 0; background: transparent; backdrop-filter: none; padding: 0; gap: var(--space-3); }
}

/* --------------------------------------------------------------------------
   18. Formulario sobre el panel oscuro de cierre
   -------------------------------------------------------------------------- */
.end .form__fine { color: var(--esmeralda-200); }
.end .form__fine a { color: var(--esmeralda-200); text-decoration: underline; }
.end .form__fine a:hover { color: var(--accent); }


/* --------------------------------------------------------------------------
   19. Formulario de solicitud de diagnóstico
   -------------------------------------------------------------------------- */
.form { max-width: 620px; display: grid; gap: var(--space-5); }
.field { display: grid; gap: var(--space-2); }
.field__label { font-size: 14px; font-weight: 600; color: var(--ink); }
.field__label span { font-weight: 400; color: var(--ink-muted); }
.field__hint { font-size: 13px; color: var(--ink-muted); }

.input, .textarea, .select {
  width: 100%; min-width: 0;
  font: inherit; font-size: 16px; color: var(--ink);
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-4);
  height: 54px;
}
.textarea { height: auto; min-height: 140px; padding: var(--space-4); resize: vertical; line-height: 1.55; }
.input::placeholder, .textarea::placeholder { color: var(--grafito-400); }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--primary); box-shadow: var(--focus-ring);
}
.input:invalid:not(:placeholder-shown), .textarea:invalid:not(:placeholder-shown) { border-color: var(--danger); }

.field--dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }

/* Consentimiento: el texto va al lado de la casilla, no debajo */
.consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.consent input[type="checkbox"] {
  width: 22px; height: 22px; margin: 2px 0 0; flex: none;
  accent-color: var(--primary); cursor: pointer;
}
.consent label { font-size: 14px; line-height: 1.55; color: var(--ink-muted); }
.consent a { color: var(--primary); }

/* Trampa para robots: invisible para personas, nunca la rellenan */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__submit { margin-top: var(--space-2); }
.form__nota { font-size: 13px; line-height: 1.55; color: var(--ink-muted); }

@media (max-width: 640px) {
  .field--dos { grid-template-columns: 1fr; }
}