/* =====================================================================
   INTERFAZ «ESTILO APPLE» (12 oct 2026; probada en una rama y adoptada
   por Martín ese mismo día). Capa que se carga DESPUÉS de site.css y no
   modifica nada de él. Al final, el sistema de textos unificados.
   Criterio, tomado de las guías de interfaz de Apple (HIG):
   · Dos capas. El cristal (fondo translúcido con desenfoque) va solo en lo
     que flota sobre el contenido: barra del visor y panel «Hablemos». La
     cabecera se adapta al tono de la pantalla. El contenido sigue opaco.
   · El color de marca se guarda para la acción principal y los estados.
   · Formas continuas: botones en cápsula, radios amplios, sombras suaves.
   · Superficies lisas, sin retícula de puntos.
   La composición de las pantallas y los textos no cambian.
   ===================================================================== */

/* ---------- Fichas de diseño ---------- */
:root {
  --surface: #F5F5F7;
  --ink: #1D1D1F;
  --ink-2: #6E6E73;      /* 5,1:1 sobre blanco y 4,7:1 sobre #F5F5F7 */
  --line: #E3E3E8;
  --radius: 12px;        /* campos y cajas pequeñas (los botones pasan a cápsula) */
  --radius-card: 22px;
  --radius-chip: 10px;
  --shadow-1: 0 1px 1px rgb(0 0 0 / 0.03), 0 10px 30px -16px rgb(0 0 0 / 0.16);
  --shadow-2: 0 2px 4px rgb(0 0 0 / 0.04), 0 30px 70px -30px rgb(0 0 0 / 0.3);
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
  --glass-edge: color-mix(in srgb, var(--ink) 11%, transparent);
}

/* ---------- Tipografía: titulares en seminegra y más cerrados; cuerpo algo más cerrado ---------- */
body { letter-spacing: -0.011em; }
h1, h2, h3, .h2, .h3, .statement, .pull, .ask-q, .manifesto-h, .cr-a, .diag-q, .offer-xl h3, .ask-answer strong { font-weight: 600; }
h1, h2, .h2, .statement, .ask-q { letter-spacing: -0.032em; }
.h3, h3, .pull, .lead { letter-spacing: -0.02em; }
.nav-list a, .btn { letter-spacing: -0.01em; }

/* ---------- Superficies lisas: fuera la retícula de puntos ---------- */
.section-soft, .screen-dark, .screen-graphite,
:root[data-theme="dark"] .section-soft { background-image: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .section-soft { background-image: none; } }
.ask { background-image: radial-gradient(46rem 32rem at 100% 100%, rgb(230 20 32 / 0.24), transparent 64%); background-size: auto; }
@media (min-width: 62rem) {
  .ask:not(.ask-solo) { background-image: radial-gradient(46rem 32rem at 0% 100%, rgb(230 20 32 / 0.24), transparent 64%); }
}

/* ---------- Botones: cápsula; el secundario pasa de contorno a relleno gris ---------- */
.btn { border-radius: 999px; padding-inline: 1.5rem; }
.btn-secondary { background: color-mix(in srgb, var(--ink) 8%, transparent); border-color: transparent; color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .btn-secondary:not([disabled]):hover { background: color-mix(in srgb, var(--ink) 14%, transparent); color: var(--ink); }
}
.theme-toggle, .menu-toggle, .talk-close { border-radius: 50%; border-color: transparent; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.offer-cta, .offer-xl article, .offer-xl article + article { border-radius: 26px; }
.nav-list .submenu-foot .btn, .submenu-foot .btn { border-radius: 999px; }

/* ---------- Tarjetas y campos del contenido: opacos, radio amplio, borde fino ---------- */
.rows, .question-list, .next-steps ol, .principles, .zone, .diag, .form-panel, .stage-panel,
.offer article, .offer article + article, .creed-rest li, .md-job, .md-store, .sectors li, .find-grid li { border-radius: var(--radius-card); }
.ask-list li { border-radius: 14px; }
.tags li { border-radius: 999px; }
.input { border-radius: var(--radius); }
.segmented { border-radius: 999px; border-color: transparent; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.segmented span { border-radius: 999px; }
.diag-option { border-radius: 14px; }

/* ---------- Capa funcional ----------
   Cabecera: toma el color de la pantalla que tiene debajo (lo decide apple.js con data-bar y --bar), clara sobre
   pantallas claras y negra sobre las negras. No lleva desenfoque real: la cabecera tiene nombre propio en las
   transiciones de vista (para quedarse quieta al cambiar de página o de tema) y eso impide que ella y lo que cuelga
   de ella desenfoquen lo que hay detrás. Por eso los menús desplegables son opacos. */
.site-header { background: transparent; border-bottom-color: transparent; isolation: isolate; }
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--bar, var(--paper)); border-bottom: 1px solid var(--glass-edge);
}
html.bar-ready .site-header::before { transition: background-color 260ms ease, border-color 260ms ease; }
.nav-list > li > a { color: color-mix(in srgb, var(--ink) 84%, transparent); }
.nav-list > li > a[aria-current="page"] { color: var(--ink); }
/* Sobre una pantalla negra, la cabecera y lo que cuelga de ella usan los colores de las pantallas oscuras y el
   logotipo pasa a negativo. La portada lo trae puesto en el HTML (data-bar="dark") para no parpadear al cargar. */
html[data-bar="dark"] .site-header {
  --paper: #090909; --surface: #161616; --ink: #FFFFFF; --ink-2: #B8B8B8; --line: #2C2C2C; --line-strong: #6E6E6E; --focus: #FFFFFF;
  --glass-edge: rgb(255 255 255 / 0.13);
  color: var(--ink);
}
html[data-bar="dark"] .site-header::before { background: var(--bar, rgb(9 9 9 / 0.92)); }
html[data-bar="dark"] .site-header .brand-mark { content: url("../brand/gte-simbolo-negativo.png"); }
html[data-bar="dark"] .site-header .brand-name img { content: url("../brand/galatea-tandem-negativo.png"); }

/* Menús desplegables: sin filo rojo (el color de marca queda para la acción principal), borde fino y radio amplio */
.submenu, .cmenu { border: 1px solid var(--glass-edge); border-top: 1px solid var(--glass-edge); border-radius: 0 0 24px 24px; }
.mobile-nav { border-bottom-color: var(--glass-edge); }
.cmenu-foot { border-radius: 0 0 23px 23px; background: color-mix(in srgb, var(--ink) 5%, transparent); border-top-color: var(--glass-edge); }

/* Cristal de verdad (fondo translúcido con desenfoque) donde sí funciona: lo que flota sobre el contenido */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  /* Barra del visor de temas: cápsula oscura translúcida */
  .viewer-bar {
    background: rgb(28 28 30 / 0.72); border-color: rgb(255 255 255 / 0.16);
    -webkit-backdrop-filter: saturate(1.8) blur(24px); backdrop-filter: saturate(1.8) blur(24px);
    box-shadow: 0 16px 40px -18px rgb(0 0 0 / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.1);
  }
  /* Panel «Hablemos»: la página de detrás se desenfoca en lugar de oscurecerse tanto */
  .talk::backdrop { background: rgb(9 9 9 / 0.34); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
}
/* En la barra del visor solo «Siguiente» lleva color; «Todos los temas» pasa a relleno neutro */
.viewer-bar .viewer-back { background: rgb(255 255 255 / 0.16); color: #FFFFFF; }
@media (hover: hover) and (pointer: fine) { .viewer-bar .viewer-back:hover { background: rgb(255 255 255 / 0.26); } }
.talk { border-radius: 28px; }

/* Accesibilidad: menos transparencia o más contraste devuelven fondos opacos y bordes más marcados */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .site-header::before { background: var(--paper); border-bottom-color: var(--line-strong); }
  .submenu, .cmenu { border-color: var(--line-strong); }
  .viewer-bar { background: #111111; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .talk::backdrop { background: rgb(9 9 9 / 0.6); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* =====================================================================
   TEXTOS UNIFICADOS (12 oct 2026, petición de Martín: «todas las pantallas
   con textos de este estilo deberían ser más uniformes»)
   Antes convivían quince tamaños de titular (86, 82, 72, 70, 62, 61, 53,
   49, 48, 47, 46, 44, 43, 36 y 22 px a 1440×820), cada uno con su
   interlineado y su separación de letras. Ahora hay cuatro papeles:
   · Portada  (--t-display): la frase que abre o cierra una página y las
     frases-pantalla. La frase en rojo que la completa va al MISMO tamaño.
   · Título   (--t-title): el titular de una pantalla normal.
   · Subtítulo (--t-sub): la frase que remata una pantalla.
   · Línea fuerte: frase corta en negrita al tamaño de la entradilla.
   Se usa !important porque estos papeles tienen que ganar a las reglas por
   pantalla que site.css fue acumulando; las excepciones están aquí mismo.
   ===================================================================== */
:root {
  --t-display: clamp(2.3rem, 1.2rem + 4vw, 4.1rem);
  --t-title: var(--step-3);
  --t-sub: var(--step-2);
}
@media (min-width: 62rem) and (min-height: 40rem) {
  :root {
    --t-display: clamp(2.5rem, min(1.2rem + 3.6vw, 8vh), 4.1rem);
    --t-title: clamp(1.9rem, min(1.4rem + 2.6vw, 5.4vh), 3rem);
    --t-sub: clamp(1.5rem, min(1.1rem + 1.4vw, 4.4vh), 2.25rem);
  }
}
/* Portada */
.hero h1, .page-hero h1, .statement, .closing h2, .friction-layout .h2, .manifesto-h, .ask-grid .ask-q, .hero-second {
  font-size: var(--t-display) !important; line-height: 1.06 !important; letter-spacing: -0.035em !important; font-weight: 600;
}
/* Título */
.h2, .contact-top h1, .contact-top .hero-second, .ask-solo .ask-q, #datos-en-casa .statement, .split.has-aside.aside-right .pull {
  font-size: var(--t-title) !important; line-height: 1.1 !important; letter-spacing: -0.03em !important; font-weight: 600;
}
.friction-layout .h2 { font-size: var(--t-display) !important; line-height: 1.06 !important; letter-spacing: -0.035em !important; }
/* Subtítulo */
.h3, .pull, .ask-answer, .contact-top .form-success .pull {
  font-size: var(--t-sub) !important; line-height: 1.2 !important; letter-spacing: -0.022em !important; font-weight: 600;
}
.split.has-aside.aside-right .pull { font-size: var(--t-title) !important; line-height: 1.1 !important; letter-spacing: -0.03em !important; }
/* Línea fuerte y entradilla */
.outcome, .decide, .ask-lead, .ask-eyebrow, .local .pull, .contact-top .pull {
  font-size: var(--step-1) !important; line-height: 1.35 !important; letter-spacing: -0.015em !important; font-weight: 600;
}
.lead { letter-spacing: -0.015em; }
/* La frase en rojo que completa un titular de portada va pegada a él, como una línea más */
.page-hero .hero-second { margin-top: 0.12em; max-width: 17ch; }
.contact-top .hero-second { margin-top: 0.1em; max-width: 20ch; }