/* =========================================================
   Lacarte & González — hoja de estilo única
   Fuentes autoalojadas (OFL 1.1). Cero llamadas a terceros.
   ========================================================= */

/* ---------- Fuentes ----------
   Inter Tight es la misma familia que usa dianneblackburn.com, la referencia que
   pidieron copiar. Source Sans 3 va en el texto: humanista y tranquila, que es lo
   que buscaban al citar Kalinga para el cuerpo (Kalinga no es licenciable en web). */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/InterTight-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/InterTight-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/InterTight-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/InterTight-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/SourceSans3-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/SourceSans3-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/SourceSans3-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/SourceSans3-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  /* color — una sola familia, del navy al hielo. Sin segundo tono: en monocromo
     el énfasis lo da el valor, no el color, y por eso no envejece ni abarata.
     Todos los valores están medidos sobre el DOM, no elegidos a ojo. */
  --navy-900: #02142E;        /* profundidad: capas del hero y del pie */
  --navy: #041E42;            /* base */
  --navy-700: #0A2B54;        /* superficies elevadas sobre navy */
  --navy-600: #0F3260;        /* enlaces sobre claro — 11,99:1 */
  --navy-400: #3D5576;        /* texto secundario — 7,15:1 */
  --hielo-400: #7B93B2;       /* apoyo sobre navy — 5,24:1 */
  --hielo-300: #AFC1D6;       /* 9,00:1 sobre navy */
  --hielo-200: #C9D3DF;       /* texto secundario sobre navy — 10,92:1 */
  --hielo-100: #DDE6F0;       /* 13,12:1 sobre navy */
  --claro: #F6F8FA;           /* fondo general — 15,54:1 con navy */
  --claro-alt: #EBEFF4;       /* sección alterna — 14,32:1 con navy */
  --blanco: #FFFFFF;
  --linea: #DDE3EB;           /* divisores decorativos */
  --linea-navy: #1E3A5F;      /* divisores sobre navy */
  --linea-fuerte: #687F9C;    /* borde de campos: 3,86:1 sobre el fondo */

  /* tipografía */
  --display: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --texto: 'Source Sans 3', Kalinga, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* espaciado 8-pt */
  --e1: 8px;
  --e2: 16px;
  --e3: 24px;
  --e4: 32px;
  --e6: 48px;
  --e8: 64px;
  --e12: 96px;
  --e16: 128px;

  /* medidas */
  --ancho: 1200px;
  --ancho-texto: 680px;
  --radio: 6px;
  --radio-lg: 12px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* La cabecera fija mide 73px: sin este colchón, el elemento que recibe el foco
     con Tab queda tapado por ella (WCAG 2.2, 2.4.11 Foco no oscurecido). */
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--claro);
  color: var(--navy);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (min-width: 768px) { body { font-size: 1.125rem; } }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin: 0 0 var(--e3);
}

h1 { font-size: clamp(2.25rem, 6vw, 4rem); }
h2 { font-size: clamp(1.875rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.25; margin-bottom: var(--e2); }
h4 { font-size: 1.125rem; line-height: 1.3; margin-bottom: var(--e1); }

p { margin: 0 0 var(--e3); text-wrap: pretty; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy-400); }

strong { font-weight: 600; }

img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 3px solid var(--navy-600);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Sobre navy el anillo oscuro no se distingue: se aclara al hielo (9,00:1). */
.pie :focus-visible,
.hero :focus-visible,
.seccion--navy :focus-visible { outline-color: var(--hielo-300); }

main:focus { outline: none; }

[id] { scroll-margin-top: 88px; }

::selection { background: var(--hielo-300); color: var(--navy); }

/* ---------- Utilidades ---------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--e3);
}
@media (min-width: 768px) { .contenedor { padding-inline: var(--e6); } }

.seccion { padding-block: var(--e8); }
@media (min-width: 768px) { .seccion { padding-block: var(--e12); } }

.seccion--arena { background: var(--claro-alt); }
.seccion--navy { background: var(--navy); color: var(--claro); }
.seccion--navy h2, .seccion--navy h3 { color: var(--claro); }
.seccion--navy a { color: var(--hielo-300); }
.seccion--navy a:hover { color: var(--blanco); }

.medida { max-width: var(--ancho-texto); }

.antetitulo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-400);
  margin-bottom: var(--e3);
}
.antetitulo::before {
  content: '';
  width: 32px;
  height: 2px;
  background: currentColor;
  flex: none;
}
.seccion--navy .antetitulo, .hero .antetitulo { color: var(--hielo-300); }

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: var(--claro);
  padding: var(--e2) var(--e3);
  z-index: 100;
}
.saltar:focus { left: 0; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e1);
  min-height: 52px;
  padding: 14px var(--e4);
  border: 2px solid transparent;
  border-radius: var(--radio);
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s cubic-bezier(.4,0,.2,1), color .2s, transform .15s, border-color .2s;
}

/* La duración dentro del botón: «Reservar una consulta · 45 min». Es un dato, no la
   acción, así que va en peso normal y algo más pequeña, pero NO se baja con opacidad
   —el botón ya es el elemento de máximo contraste de la página y rebajarlo ahí es lo
   que suele tirar el texto por debajo del AA—. El punto lo pone el CSS para que el
   HTML no lleve separadores sueltos que un lector de pantalla leería como ruido. */
.boton__nota {
  font-weight: 400;
  font-size: 0.875em;
  white-space: nowrap;
}
.boton__nota::before { content: "· "; }

/* En monocromo el botón principal es siempre el máximo contraste disponible:
   navy sobre fondo claro, claro sobre fondo navy. */
.boton--primario {
  background: var(--navy);
  color: var(--claro);
  box-shadow: 0 1px 2px rgba(4, 30, 66, .16), 0 8px 24px -12px rgba(4, 30, 66, .5);
}
.boton--primario:hover {
  background: var(--navy-700);
  box-shadow: 0 2px 4px rgba(4, 30, 66, .2), 0 14px 32px -14px rgba(4, 30, 66, .62);
  transform: translateY(-1px);
}
.boton--primario:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(4, 30, 66, .18); }

.boton--secundario { background: transparent; color: var(--navy); border-color: var(--linea-fuerte); }
.boton--secundario:hover { background: var(--navy); color: var(--claro); border-color: var(--navy); }
.boton--secundario:active { transform: translateY(1px); }

/* Sobre navy se invierten */
.hero .boton--primario,
.seccion--navy .boton--primario {
  background: var(--claro);
  color: var(--navy);
  box-shadow: 0 1px 2px rgba(2, 20, 46, .4), 0 10px 30px -14px rgba(175, 193, 214, .55);
}
.hero .boton--primario:hover,
.seccion--navy .boton--primario:hover { background: var(--blanco); color: var(--navy-900); }

.hero .boton--secundario,
.seccion--navy .boton--secundario { color: var(--claro); border-color: var(--hielo-300); }
.hero .boton--secundario:hover,
.seccion--navy .boton--secundario:hover { background: var(--claro); color: var(--navy); border-color: var(--claro); }

.boton[disabled], .boton[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.nota-cta {
  font-size: 0.9375rem;
  color: var(--navy-400);
  margin-top: var(--e2);
}
.hero .nota-cta, .seccion--navy .nota-cta { color: var(--hielo-200); }

/* ---------- Marca ----------
   Monograma L&G con la ampersand a la mitad de altura, centrada ópticamente en la
   caja de la mayúscula. Así el bloque deja de leerse como el «LG» de otra marca y
   pasa a decir lo que es: dos apellidos. */
.marca {
  display: flex;
  align-items: center;
  gap: 14px;
  color: inherit;
  text-decoration: none;
  line-height: 1;
}
.marca__monograma {
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}
.marca__amp {
  font-size: 0.65em;
  font-weight: 600;
  /* apoyada en la misma línea base que la L y la G: flotando en el centro parecía
     un superíndice y partía la palabra en dos. Al 65 % por petición de los dos socios;
     ver LOGO/_TAMANOS-AMPERSAND.png para el 50 y el 80. */
  vertical-align: baseline;
  margin-inline: 0.08em;
}
.marca__texto {
  display: block;
  padding-left: 14px;
  border-left: 1px solid var(--linea);
}
.marca__nombre {
  display: block;
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.marca__descriptor {
  display: block;
  font-family: var(--texto);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-400);
  margin-top: 3px;
}
/* En pantallas estrechas el bloque de texto sobra: manda el monograma */
@media (max-width: 480px) {
  .marca__texto { display: none; }
  .marca__monograma { font-size: 1.625rem; }
}
.hero .marca__descriptor,
.pie .marca__descriptor { color: var(--hielo-200); }
.pie .marca__texto { border-left-color: var(--linea-navy); }
.hero .marca__descriptor, .pie .marca__descriptor { color: var(--hielo-200); }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 248, 250, .9);
  backdrop-filter: blur(10px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}
/* Solo se separa del contenido cuando hay contenido debajo que separar. */
.cabecera.desplazada {
  background: rgba(246, 248, 250, .96);
  border-bottom-color: var(--linea);
  box-shadow: 0 1px 24px -12px rgba(4, 30, 66, .5);
}
.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  min-height: 72px;
}
.cabecera .boton { min-height: 44px; padding: 10px var(--e3); font-size: 0.9375rem; }
.cabecera__cta-corto { display: inline; }
@media (min-width: 600px) { .cabecera__cta-corto { display: none; } }
.cabecera__cta-largo { display: none; }
@media (min-width: 600px) { .cabecera__cta-largo { display: inline; } }

/* ---------- Hero ----------
   El navy no es plano: dos focos de luz muy tenues y una capa de grano finísimo.
   Es lo que separa un fondo de color de un fondo con materia. El grano va en un SVG
   embebido: cero peticiones y pesa menos de 300 bytes. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 15% 0%, rgba(87, 122, 168, .28) 0%, rgba(87, 122, 168, 0) 55%),
    radial-gradient(90% 70% at 92% 105%, rgba(120, 158, 205, .20) 0%, rgba(120, 158, 205, 0) 60%),
    linear-gradient(178deg, var(--navy) 0%, var(--navy-900) 100%);
  color: var(--claro);
  padding-block: var(--e12);
}
@media (min-width: 768px) { .hero { padding-block: var(--e16); } }

/* ---------- Hero con fotografía ----------
   La imagen va en un <picture> y no en background-image: así hay srcset, WebP con
   respaldo JPEG y un alt de verdad. El velo navy lo pinta el ::after del propio
   <picture>, que queda por encima de la foto y por debajo del texto.

   El navy no se sustituye por la foto: se mantiene encima como capa de contraste, y
   es lo que permite que el texto siga cumpliendo AA aunque la fotografía sea clara.
   Las opacidades del velo NO se bajan sin volver a medir el contraste sobre los
   píxeles renderizados: la foto tiene zonas de madera y ropa clara que se comen el
   texto blanco. El criterio de qué foto sirve está en LEEME.md. */
.hero__fondo {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
}
.hero__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 15% desde el 31/8/2026, con la foto del posado en oficina (antes 34%, con la captura
     de pantalla). Calibrado con Pillow sobre una captura del hero ya renderizado, no a
     ojo: antetítulo 9,0:1, h1 8,3:1, párrafo 9,5:1 y borde del botón secundario 5,8:1,
     todos por encima del mínimo AA. */
  object-position: center 15%;
  /* Espejada a propósito, y sigue siéndolo con la fotografía del 31/8/2026. El velo
     es un gradiente de 96deg: tapa al 96% por la izquierda y se abre al 72% por la
     derecha. O sea que la única mitad donde se ve una cara es la derecha, y el texto
     vive en la izquierda. Sin voltear, los dos caen dentro del bloque del titular —se
     pierden bajo el velo y lo que luce es el sillón del fondo—; volteada queda una cara
     entera fuera del texto y en la zona clara: con la foto del 27/8 era la de Over, con
     la del 31/8 es la de Agustina, porque cambió quién estaba a cada lado. Comprobado
     componiendo el velo sobre los píxeles, no a ojo. Si algún día se cambia la foto, se
     vuelve a comprobar: esto depende del encuadre, no de la imagen. */
  transform: scaleX(-1);
}
/* La declaración de imagen generada con IA que exige el art. 50.4 del Reglamento de
   IA. Va dentro del hero, visible sin interacción y con contraste AA: si se esconde
   o se baja de tamaño, deja de cumplir. Se declara ANTES de las media queries: si va
   después, su `margin` pisa al que la coloca bajo la foto en móvil. */
/* Especificidad deliberada: `p:last-child { margin-bottom: 0 }` gana a una sola clase
   y se comía la separación. */
.hero .hero__credito {
  margin: var(--e6) auto 0;
  font-size: 0.8125rem;
  letter-spacing: .02em;
  color: var(--hielo-300);
}

/* Por debajo de 900px la fotografía NO va de fondo: el texto ocupa todo el ancho y el
   velo que haría falta para que se lea la deja en un navy casi plano. Así que en móvil
   sale del fondo y pasa a ser una banda al principio del hero: se ve entera, sin velo
   y sin espejar. El navy del hero sigue detrás del texto, que es lo que da el contraste. */
@media (max-width: 899px) {
  .hero {
    padding-top: 0;
    display: flex;
    flex-direction: column;
  }
  .hero__fondo {
    position: static;
    z-index: auto;
    order: 1;
  }
  .hero__fondo img {
    height: auto;
    aspect-ratio: 16 / 9;
    /* En móvil no hay velo ni texto encima: se ve entera y en su orientación real. */
    transform: none;
  }
  /* la declaración de IA va pegada a la imagen, no al final del bloque */
  .hero .hero__credito { order: 2; margin: var(--e2) auto var(--e8); }
  .hero > .contenedor:not(.hero__credito) { order: 3; }
}

/* El velo solo existe cuando hay texto encima, o sea de 900px para arriba. Se inclina
   para que la escena respire por la derecha, que es donde no llega el titular. */
@media (min-width: 900px) {
  .hero__fondo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(96deg,
      rgba(4, 30, 66, .96) 0%,
      rgba(4, 30, 66, .92) 44%,
      rgba(2, 20, 46, .72) 100%);
  }
}


.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

/* Filete de luz que cierra el hero por abajo: el corte deja de ser un borde y pasa
   a ser un remate. */
.hero::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(175, 193, 214, .45) 22%, rgba(175, 193, 214, .45) 78%, transparent);
}

.hero .contenedor { position: relative; z-index: 1; }
.hero h1 { color: var(--claro); max-width: 20ch; margin-bottom: var(--e4); }
.hero__entrada {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  color: var(--hielo-200);
  max-width: 52ch;
}
.hero__acciones { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e6); }

/* ---------- Entrada en cascada ----------
   Solo se activa si hay JS (la clase la pone main.js): sin JS todo se ve desde el
   primer frame, que es lo que garantiza que nadie se quede sin contenido. */
.js .hero__ent {
  opacity: 0;
  transform: translateY(14px);
  animation: entra .82s cubic-bezier(.16, .84, .34, 1) forwards;
}
.js .hero__ent:nth-child(1) { animation-delay: .06s; }
.js .hero__ent:nth-child(2) { animation-delay: .16s; }
.js .hero__ent:nth-child(3) { animation-delay: .28s; }
.js .hero__ent:nth-child(4) { animation-delay: .40s; }

@keyframes entra {
  to { opacity: 1; transform: none; }
}

/* ---------- Revelado al entrar en pantalla ----------
   Con IntersectionObserver, nunca con un listener de scroll. Desplazamiento corto y
   una sola vez: el contenido no debe volver a moverse si el visitante sube. */
.js .revela {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.16, .84, .34, 1), transform .7s cubic-bezier(.16, .84, .34, 1);
  will-change: opacity, transform;
}
.js .revela.visible { opacity: 1; transform: none; will-change: auto; }
.js .revela--2 { transition-delay: .08s; }
.js .revela--3 { transition-delay: .16s; }
.js .revela--4 { transition-delay: .24s; }

/* ---------- Credenciales ---------- */
.credenciales { border-bottom: 1px solid var(--linea); padding-block: var(--e6); }
.credenciales__lista {
  display: grid;
  gap: var(--e4);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) { .credenciales__lista { grid-template-columns: repeat(2, 1fr); } }
/* Cinco tarjetas: en tres columnas quedan 3+2 y el texto respira. En cinco columnas
   cada una bajaría de 215 px y los títulos se partirían en tres líneas. */
@media (min-width: 1024px) { .credenciales__lista { grid-template-columns: repeat(3, 1fr); } }
.credenciales__lista dt {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.credenciales__lista dd { margin: 0; font-size: 0.9375rem; color: var(--navy-400); line-height: 1.5; }

/* ---------- Manifiesto ---------- */
.manifiesto p {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.022em;
  max-width: 26ch;
  margin-bottom: var(--e4);
}
.manifiesto .firma {
  font-family: var(--texto);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: 0;
  color: var(--hielo-200);
  max-width: 60ch;
}

/* ---------- Escenarios ---------- */
/* Llamada al diagnóstico: el texto de esta sección promete tres minutos, así que el
   botón tiene que estar donde se hace esa promesa, no enterrado en un enlace. */
.acciones-momento {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
  margin-top: var(--e6);
  max-width: none;
}
.acciones-momento .nota-cta { margin-top: 0; }

/* Grupo de botones. Desde el 18/9/2026 la reserva son DOS enlaces —reunión general y
   consulta—, y dos botones dentro de un mismo <p> se pegan el uno al otro. En móvil
   se apilan por el wrap, cada uno a su ancho, sin estirarse de lado a lado. */
.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  margin-top: var(--e5);
}

.separador-o {
  margin-top: var(--e8);
  margin-bottom: 0;
  font-size: 1rem;
  color: var(--navy-400);
}

.escenarios { display: grid; gap: var(--e2); grid-template-columns: 1fr; margin-top: var(--e3); }
@media (min-width: 768px) { .escenarios { grid-template-columns: repeat(2, 1fr); gap: var(--e3); } }
@media (min-width: 1100px) { .escenarios { grid-template-columns: repeat(3, 1fr); } }

.escenario {
  position: relative;
  overflow: hidden;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  padding: var(--e4);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s cubic-bezier(.16,.84,.34,1);
}
/* Filete superior que se dibuja de izquierda a derecha al pasar por encima.
   Es el único adorno de la página y solo aparece si hay intención. */
.escenario::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .38s cubic-bezier(.16,.84,.34,1);
}
.escenario:hover {
  border-color: var(--hielo-400);
  box-shadow: 0 18px 40px -28px rgba(4, 30, 66, .55);
  transform: translateY(-3px);
}
.escenario:hover::before { transform: scaleX(1); }
/* Columna con el enlace pegado abajo: con seis tarjetas de texto desigual, los
   «Empezar por aquí» quedaban a distinta altura y la rejilla se veía descuadrada. */
.escenario { display: flex; flex-direction: column; }
.escenario h3 { margin-bottom: var(--e1); }
.escenario p { font-size: 1rem; color: var(--navy-400); margin: 0; }
.escenario__accion { margin-top: auto !important; padding-top: var(--e3); font-size: 0.9375rem; }

/* ---------- Servicios ---------- */
.servicios { margin-top: var(--e6); border-top: 1px solid var(--linea); }
.servicio {
  display: grid;
  gap: var(--e2);
  grid-template-columns: 1fr;
  padding-block: var(--e6);
  border-bottom: 1px solid var(--linea);
}
@media (min-width: 900px) { .servicio { grid-template-columns: 5fr 7fr; gap: var(--e6); } }

.servicio__numero {
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--navy-400);
  margin-bottom: var(--e1);
}
.servicio h3 { margin-bottom: 0; }
.servicio p { margin-bottom: var(--e2); }
.servicio ul { margin: 0; padding-left: 1.1em; color: var(--navy-400); font-size: 1rem; }
.servicio li { margin-bottom: 4px; }

/* ---------- Método ---------- */
.metodo { display: grid; gap: var(--e6); grid-template-columns: 1fr; margin-top: var(--e6); }
@media (min-width: 900px) { .metodo { grid-template-columns: repeat(3, 1fr); gap: var(--e4); } }

.paso { border-top: 2px solid var(--hielo-300); padding-top: var(--e3); }
.paso__numero {
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-400);
  margin-bottom: var(--e1);
}
.paso p { font-size: 1rem; color: var(--navy-400); margin: 0; }

/* ---------- Socios ---------- */
.socios { display: grid; gap: var(--e8); grid-template-columns: 1fr; margin-top: var(--e6); }
@media (min-width: 900px) { .socios { grid-template-columns: repeat(2, 1fr); gap: var(--e6); } }

.socio__retrato {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radio-lg);
  margin-bottom: var(--e3);
  background: var(--claro-alt);
}

/* Trayectoria bajo cada biografía: mismos cargos, mismo tratamiento para los dos. */
.socio__rotulo {
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-400);
  margin: var(--e4) 0 var(--e2);
}
.socio__ruta { list-style: none; margin: 0; padding: 0; }
.socio__ruta li {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  padding-block: 9px;
  border-top: 1px solid var(--linea);
  font-size: 0.9375rem;
}
.socio__ruta li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--navy);
  flex: none;
  transform: translateY(-2px);
}
.socio h3 { margin-bottom: 2px; }
.socio__cargo {
  font-family: var(--display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-400);
  margin-bottom: var(--e3);
}
.socio p { font-size: 1rem; }

/* ---------- Cita de diagnóstico ---------- */
.diagnostico { display: grid; gap: var(--e6); grid-template-columns: 1fr; }
@media (min-width: 900px) { .diagnostico { grid-template-columns: 5fr 7fr; gap: var(--e8); align-items: start; } }

.agenda { list-style: none; margin: 0; padding: 0; }
.agenda li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding-block: var(--e3);
  border-bottom: 1px solid var(--linea);
}
@media (min-width: 600px) { .agenda li { grid-template-columns: 92px 1fr; gap: var(--e3); } }
.agenda li:first-child { border-top: 1px solid var(--linea); }
.agenda__tiempo {
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy-400);
  padding-top: 4px;
  /* cifras de ancho fijo: los rangos de minutos quedan alineados en columna */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.agenda p { margin: 0; font-size: 1rem; }
.agenda strong { display: block; font-family: var(--display); }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin-top: var(--e6); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
  padding-block: var(--e3);
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
/* El signo gira 45° al abrirse: un solo carácter haciendo de más y de menos.
   Menos ruido que dos glifos distintos y se lee como un movimiento, no como un cambio. */
.faq summary::after {
  content: '+';
  font-family: var(--texto);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--navy-400);
  line-height: 1;
  flex: none;
  transition: transform .3s cubic-bezier(.16,.84,.34,1), color .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--navy-600); }
.faq summary:hover::after { color: var(--navy); }
.faq details p { padding-bottom: var(--e3); color: var(--navy-400); font-size: 1rem; max-width: 72ch; }
/* La respuesta entra deslizándose en vez de aparecer de golpe. */
.js .faq details[open] p { animation: abre .32s cubic-bezier(.16,.84,.34,1); }
@keyframes abre {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Cierre y formulario ---------- */
.cierre { display: grid; gap: var(--e8); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .cierre { grid-template-columns: 1fr 1fr; gap: var(--e8); align-items: start; }
  .cierre__reserva { position: sticky; top: 104px; }
}

.formulario { display: grid; gap: var(--e3); }
.campo { display: grid; gap: 6px; }
.campo label { font-size: 0.9375rem; font-weight: 600; }
.campo .opcional { font-weight: 400; color: var(--navy-400); }

.campo input, .campo textarea, .campo select {
  width: 100%;
  min-height: 48px;
  padding: 12px var(--e2);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--navy);
  font-family: var(--texto);
  font-size: 1rem;
  line-height: 1.5;
}
.campo textarea { min-height: 128px; resize: vertical; }
.campo input:hover, .campo textarea:hover, .campo select:hover { border-color: var(--navy); }
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: #A3251B; border-width: 2px; }

.campo__error { font-size: 0.875rem; color: #A3251B; font-weight: 600; }
.campo__error:empty { display: none; }

.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.trampa input, .trampa label { width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; }

.consentimiento { display: flex; align-items: flex-start; gap: var(--e2); font-size: 0.9375rem; }
/* 24×24 mínimo: WCAG 2.2 criterio 2.5.8 (tamaño del objetivo, AA). */
.consentimiento input { width: 24px; height: 24px; min-height: 24px; flex: none; margin-top: 2px; accent-color: var(--navy); }

.legal-form {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--navy-400);
  background: var(--claro-alt);
  border-radius: var(--radio);
  padding: var(--e3);
  max-width: none;
}
.legal-form strong { color: var(--navy); }

.aviso-envio { font-size: 0.9375rem; font-weight: 600; padding: var(--e2) var(--e3); border-radius: var(--radio); }
.aviso-envio--ok { background: #E4EDE6; color: #1D4A2B; border: 1px solid #1D4A2B; }
.aviso-envio--ko { background: #F6E3E1; color: #8A231A; border: 1px solid #8A231A; }

/* ---------- Pie ---------- */
.pie { background: var(--navy); color: var(--hielo-200); padding-block: var(--e8); font-size: 0.9375rem; }
.pie a { color: var(--claro); }
.pie a:hover { color: var(--hielo-300); }
.pie__fila { display: grid; gap: var(--e6); grid-template-columns: 1fr; }
@media (min-width: 768px) { .pie__fila { grid-template-columns: 2fr 1fr 1fr; gap: var(--e6); } }
.pie h2 {
  font-size: 0.8125rem;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--claro);
  margin-bottom: var(--e2);
}
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: var(--e1); }
.pie .marca { color: var(--claro); margin-bottom: var(--e3); }
.pie__marca {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--claro);
  margin-bottom: var(--e2);
}
.pie__legal { border-top: 1px solid rgba(247, 245, 241, .18); margin-top: var(--e6); padding-top: var(--e3); font-size: 0.875rem; }
.pie p { max-width: 60ch; }

/* Enlace con subrayado que se dibuja al pasar por encima, en vez de aparecer.
   Es el detalle más barato que separa una web cuidada de una web hecha. */
.enlace-destacado {
  display: inline;
  font-weight: 600;
  color: var(--navy-600);
  text-decoration: none;
  background-image: linear-gradient(var(--navy), var(--navy));
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .38s cubic-bezier(.16,.84,.34,1), color .2s ease;
  padding-bottom: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.enlace-destacado:hover, .enlace-destacado:focus-visible {
  background-size: 100% 1.5px;
  color: var(--navy);
}
/* Sin JS y sin ratón, el subrayado tiene que estar: se dibuja siempre en pantallas
   táctiles, donde no existe el hover. */
@media (hover: none) {
  .enlace-destacado { background-size: 100% 1.5px; }
}

/* ---------- Autodiagnóstico ---------- */
.hero--corto { padding-block: var(--e8); }
@media (min-width: 768px) { .hero--corto { padding-block: var(--e12); } }
.hero__nota { font-size: 0.9375rem; color: var(--hielo-200); margin-top: var(--e3); max-width: 56ch; }
.hero__nota strong { color: var(--claro); }

.cuestionario { max-width: 780px; }

.bloque { border: 0; margin: 0 0 var(--e8); padding: 0; }
.bloque__titulo {
  display: block;
  width: 100%;
  padding: 0 0 var(--e3);
  margin-bottom: var(--e6);
  border-bottom: 2px solid var(--navy);
  font-family: var(--display);
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.bloque__numero {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy-400);
  margin-bottom: 6px;
}

.pregunta { margin-bottom: var(--e6); }
.pregunta__texto {
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-bottom: var(--e2);
  max-width: 60ch;
}

.opciones { display: grid; gap: var(--e1); }
.opciones label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e2);
  align-items: start;
  padding: 14px var(--e3);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--blanco);
  font-size: 1rem;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, transform .18s cubic-bezier(.16,.84,.34,1);
}
.opciones label:hover { border-color: var(--hielo-400); transform: translateX(2px); }
.opciones input {
  width: 20px;
  height: 20px;
  margin: 3px 0 0;
  accent-color: var(--navy);
  flex: none;
}
/* La opción elegida se marca con el filete de la casa, no con un color de relleno */
.opciones label:has(input:checked) {
  border-color: var(--navy);
  box-shadow: inset 3px 0 0 var(--navy);
  background: var(--claro);
}

/* Las dos preguntas de contexto: obligatorias, pero no puntúan. Se separan del resto
   para que se entienda que están ahí por otro motivo. */
.bloque--contexto {
  background: var(--claro-alt);
  border-radius: var(--radio-lg);
  padding: var(--e4);
  margin-bottom: var(--e8);
}
@media (min-width: 768px) { .bloque--contexto { padding: var(--e6); } }
.bloque--contexto .bloque__titulo { margin-bottom: var(--e2); }
.bloque__nota {
  font-size: 0.9375rem;
  color: var(--navy-400);
  margin-bottom: var(--e6);
  max-width: 60ch;
}
.bloque--contexto .pregunta:last-child { margin-bottom: 0; }

/* El bloque opcional: plegado por defecto para que nadie se asuste al ver la lista
   completa, pero visible como oferta y no escondido. */
.bloques-extra {
  margin-bottom: var(--e8);
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  background: var(--claro-alt);
}
.bloques-extra__titulo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--e3) var(--e4);
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  position: relative;
  padding-right: var(--e8);
}
.bloques-extra__titulo::-webkit-details-marker { display: none; }
.bloques-extra__titulo::after {
  content: '+';
  position: absolute;
  right: var(--e4);
  top: var(--e3);
  font-family: var(--texto);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--navy-400);
  line-height: 1.2;
  transition: transform .3s cubic-bezier(.16,.84,.34,1);
}
.bloques-extra[open] .bloques-extra__titulo::after { transform: rotate(45deg); }
.bloques-extra__nota {
  font-family: var(--texto);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--navy-400);
}
.bloques-extra__cuerpo { padding: 0 var(--e4) var(--e2); }
@media (min-width: 768px) { .bloques-extra__cuerpo { padding-inline: var(--e6); } }
.bloques-extra__intro { font-size: 1rem; color: var(--navy-400); margin-bottom: var(--e6); max-width: 62ch; }
.bloques-extra .bloque:last-of-type { margin-bottom: var(--e4); }

.cuestionario__pie { margin-top: var(--e8); display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }
.cuestionario__aviso { font-size: 0.9375rem; color: var(--navy-400); margin: 0; }
.cuestionario__aviso--ko { color: #A3251B; font-weight: 600; }
.cuestionario__aviso--ok { color: #1D4A2B; font-weight: 600; }

.enlace-boton {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--navy-600);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.lectura {
  max-width: 780px;
  margin-top: var(--e12);
  padding: var(--e6);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-top: 3px solid var(--navy);
  border-radius: var(--radio-lg);
  box-shadow: 0 30px 60px -45px rgba(4, 30, 66, .6);
}
@media (min-width: 768px) { .lectura { padding: var(--e8); } }
.lectura:focus { outline: none; }
.lectura h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: var(--e4); }
.lectura__cuerpo p { font-size: 1.0625rem; }
.lectura__sub {
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-400);
  margin: var(--e6) 0 var(--e2);
}
.lectura__lista { margin: 0; padding-left: 1.1em; }
.lectura__lista li { margin-bottom: var(--e1); max-width: 62ch; }
.lectura__acciones { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e6); }
.lectura__honestidad {
  margin-top: var(--e6);
  padding-top: var(--e3);
  border-top: 1px solid var(--linea);
  font-size: 0.9375rem;
  color: var(--navy-400);
}

/* ---------- Páginas legales ---------- */
.documento { padding-block: var(--e8); }
.documento .contenedor { max-width: 780px; }
.documento h1 { font-size: clamp(1.875rem, 4vw, 2.75rem); margin-bottom: var(--e2); }
.documento h2 { font-size: clamp(1.25rem, 2.4vw, 1.625rem); margin-top: var(--e6); }
.documento h3 { font-size: 1.125rem; margin-top: var(--e4); }
.documento ul { padding-left: 1.2em; }
.documento li { margin-bottom: var(--e1); max-width: 68ch; }
.documento .actualizado { font-size: 0.9375rem; color: var(--navy-400); }
.documento table { width: 100%; border-collapse: collapse; margin-bottom: var(--e3); font-size: 0.9375rem; }
.documento th, .documento td { text-align: left; vertical-align: top; padding: var(--e2); border-bottom: 1px solid var(--linea); }
.documento th { font-weight: 600; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- Impresión ---------- */
@media print {
  .cabecera, .hero__acciones, .formulario { display: none; }
  body { background: #fff; color: #000; }
  .hero, .seccion--navy, .pie { background: #fff; color: #000; }
}