/* =============================================================================
   MARTÍN NADAL — V4 PREMIUM
   -----------------------------------------------------------------------------
   Tres reglas sostienen esta versión.

   1. EL BLANCO MANDA. La página es blanca; el gris roto solo separa bloques.
      El verde corporativo es identidad —logotipo, algunos títulos, el pie— no
      fondo. No hay bandas enormes de color.

   2. CAJAS, NO FRANJAS. El contenido vive en tarjetas independientes con
      esquinas de 28 px y sombras casi imperceptibles. La profundidad la dan
      la sombra y el aire, nunca un borde grueso ni un degradado.

   3. UNA SOLA FAMILIA. Inter en varios pesos. Sin serif, sin cursivas
      ornamentales. Los titulares van en 700 con el tracking apretado, que es
      lo que les da el aire limpio de una página de producto.

   Sobre SF Pro: Apple la licencia para diseñar interfaces de apps en sus
   plataformas, no para servirla en una web pública. No se descarga ni se
   redistribuye. Inter es la alternativa prevista en el encargo y ya estaba
   autoalojada en el proyecto.
   ========================================================================== */

/* ------------------------------------------------------------------ 1. Tipos */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-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';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-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;
}

/* ----------------------------------------------------------------- 2. Tokens */

:root {
  /* ---- Superficies ---- */
  --blanco:      #FFFFFF;
  --roto:        #F8F9FA;
  --cabecera-fondo: #F7F8F6;   /* neutro muy suave, solo para la barra */

  /* ---- Identidad ---- */
  --verde:       #0B2A28;   /* el del logotipo, medido */
  --verde-medio: #16413D;

  /* ---- Tintas, con su contraste medido sobre blanco ---- */
  --tinta:       #1D1D1F;   /* 16,83:1 */
  --tinta-media: #6E6E73;   /*  5,07:1 sobre blanco · 4,81:1 sobre gris roto */
  --tinta-clara: #C9D3D1;   /*  sobre verde, para el pie */
  --dorado-pie:  #C9A96B;   /*  filete del descriptivo del pie */

  /* ---- Acción ----
     El relleno amarillo da 1,51:1 contra el blanco: por luminancia no se
     distingue del fondo, aunque el ojo lo vea amarillo. Por eso el botón lleva
     SIEMPRE filete de ámbar (--amarillo-borde, 3,23:1 contra blanco): es lo
     que delimita el control y lo que cumple el 3:1 de WCAG 1.4.11.
     El texto va en --tinta sobre el amarillo: 11,13:1. */
  --amarillo:        #FFCC00;
  --amarillo-hover:  #F2C200;
  --amarillo-activo: #E6B800;
  --amarillo-borde:  #B88700;

  /* ---- WhatsApp: colores oficiales de la marca ---- */
  --wa-verde:       #25D366;
  --wa-verde-hover: #1EBE5A;
  --wa-filete:      #0F7A36;   /* 5,44:1 contra blanco: delimita el círculo */

  /* ---- Líneas ----
     --borde es decorativo. --borde-control es el límite visible de un campo o
     de un botón secundario y por eso es mucho más oscuro: 3,62:1 sobre blanco
     y 3,44:1 sobre gris roto. No se intercambian. */
  --borde:         rgba(0, 0, 0, .08);
  --borde-fuerte:  rgba(0, 0, 0, .14);
  --borde-control: #86868B;
  --borde-claro:   rgba(255, 255, 255, .16);

  /* ---- Estados de formulario ---- */
  --ok-fondo:    #EAF2E4;   --ok-tinta:    #27451F;   --ok-linea:    #BBD3AC;
  --error-fondo: #FBEBE8;   --error-tinta: #8E3024;   --error-linea: #E7BFB7;
  --error-borde: #A6392C;

  /* ---- Tipografía ---- */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --t-display: clamp(2.75rem, 5.4vw, 4.75rem);
  --t-h1:      clamp(2.25rem, 4vw, 3.25rem);
  --t-h2:      clamp(1.875rem, 3.2vw, 2.75rem);
  --t-h3:      1.375rem;
  --t-lead:    clamp(1.125rem, 1.35vw, 1.3125rem);
  --t-base:    1.0625rem;      /* 17 px */
  --t-nota:    .9375rem;       /* 15 px */
  --t-etiq:    .8125rem;       /* 13 px */

  /* ---- Espaciado: múltiplos de 8 ---- */
  --e-1: .5rem;    /*  8 */
  --e-2: 1rem;     /* 16 */
  --e-3: 1.5rem;   /* 24 */
  --e-4: 2rem;     /* 32 */
  --e-5: 3rem;     /* 48 */
  --e-6: 4rem;     /* 64 */
  --ritmo: clamp(4rem, 6.2vw, 6.5rem);   /* 64–104, entre secciones */

  /* ---- Retícula ---- */
  --contenedor: 1320px;
  --estrecho:   860px;
  --margen:     clamp(1.5rem, 4vw, 3rem);
  --cabecera:   64px;

  /* ---- Formas ---- */
  --radio:    28px;
  --radio-sm: 18px;
  --radio-xs: 12px;

  /* Sombras difusas y bajas: profundidad, no tarjetas flotando. */
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 20px rgba(0, 0, 0, .05);
  --sombra-2: 0 2px 6px rgba(0, 0, 0, .05), 0 18px 44px rgba(0, 0, 0, .07);

  --rapida: 180ms cubic-bezier(.25, .6, .35, 1);
  --media:  320ms cubic-bezier(.25, .6, .35, 1);
}

@media (max-width: 64rem) { :root { --cabecera: 58px; } }

/* ------------------------------------------------------------------- 3. Base */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--cabecera) + 1.5rem);
}

body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.6;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, svg { max-width: 100%; display: block; }
figure, dl, dd { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-underline-offset: 3px; }

/* ---- Foco de teclado ----
   El anillo oscuro se ve sobre blanco (16,83:1), sobre gris roto (15,97) y
   sobre el propio amarillo (11,13). Sobre el verde del pie da 1,10, así que
   allí pasa a blanco (15,26). */
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; border-radius: 6px; }
.en-verde :focus-visible, .pie :focus-visible { outline-color: var(--blanco); }
.en-verde .formulario :focus-visible { outline-color: var(--tinta); }
.via:focus-visible { outline-offset: -3px; }   /* su contenedor recorta */

::selection { background: var(--amarillo); color: var(--tinta); }

/* -------------------------------------------------------------- 4. Tipografía

   Una sola familia. El tracking se aprieta a medida que crece el cuerpo: a
   76 px el interletrado por defecto abre demasiado y el titular pierde fuerza.
   Es lo que hace que un titular grande se lea limpio y no hinchado.        */

h1, h2, h3, h4 { margin: 0 0 .5em; color: var(--tinta); text-wrap: balance; }

.display {
  font-size: var(--t-display); font-weight: 700;
  line-height: 1.04; letter-spacing: -.035em;
}
h1 { font-size: var(--t-h1); font-weight: 700; line-height: 1.07; letter-spacing: -.032em; }
h2 { font-size: var(--t-h2); font-weight: 700; line-height: 1.09; letter-spacing: -.028em; }
h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.25; letter-spacing: -.018em; }
h4 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.012em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* La longitud de línea hace tanto por la sensación de espacio como el margen. */
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--tinta-media); max-width: 40ch; letter-spacing: -.014em; }
.nota { font-size: var(--t-nota); line-height: 1.55; color: var(--tinta-media); max-width: 60ch; }

.etiqueta {
  display: block;
  margin: 0 0 var(--e-2);
  font-size: var(--t-etiq);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-media);
}
.en-verde .etiqueta { color: var(--tinta-clara); }

/* ---------------------------------------------------------------- 5. Retícula */

.contenedor {
  width: 100%;
  max-width: var(--contenedor);
  margin-inline: auto;
  padding-inline: var(--margen);
}
.estrecho { max-width: var(--estrecho); }

.seccion { padding-block: var(--ritmo); }
.seccion--roto { background: var(--roto); }

.encabezado { max-width: 38ch; margin-bottom: var(--e-5); }
.encabezado .lead { margin-top: var(--e-2); }
.encabezado--centrado { max-width: 34ch; margin-inline: auto; text-align: center; }
.encabezado--centrado .lead { margin-inline: auto; }

/* --------------------------------------------------------------- 6. Acciones */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3rem;
  padding: .8rem 1.75rem;
  border: 1px solid transparent;
  border-radius: 980px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.012em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;          /* el botón no necesita relieve: lo da el color */
  transition: background var(--rapida), border-color var(--rapida),
              color var(--rapida), transform var(--rapida);
}
.boton:active { transform: scale(.985); }
/* Versión pequeña de la cabecera: mismo radio y mismo filete, menor cuerpo. */
.boton--pequeno { min-height: 2.375rem; padding: .4rem 1.15rem; font-size: .875rem; }

/* Acción principal. El filete de ámbar es obligatorio: ver el bloque de
   tokens. Sin él, el botón y el fondo blanco dan 1,51:1. */
.boton--accion {
  background: var(--amarillo);
  color: var(--tinta);
  border-color: var(--amarillo-borde);
}
.boton--accion:hover { background: var(--amarillo-hover); }
.boton--accion:active { background: var(--amarillo-activo); }

.boton--linea { background: transparent; color: var(--tinta); border-color: var(--borde-control); }
.boton--linea:hover { border-color: var(--tinta); background: rgba(0, 0, 0, .03); }
.en-verde .boton--linea { color: var(--blanco); border-color: var(--borde-control); }
.en-verde .boton--linea:hover { border-color: var(--blanco); background: rgba(255, 255, 255, .08); }

.boton--solido { background: var(--verde); color: var(--blanco); }
.boton--solido:hover { background: var(--verde-medio); }

.boton:disabled, .boton[aria-busy="true"], .boton[aria-disabled="true"] {
  cursor: not-allowed; pointer-events: none;
  background: var(--roto); color: var(--tinta-media); border-color: var(--borde-control);
}

.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin-top: var(--e-4); }
.acciones--centradas { justify-content: center; }
@media (max-width: 30rem) {
  .acciones { flex-direction: column; align-items: stretch; }
  .acciones .boton { width: 100%; }
  .acciones .enlace { align-self: center; }
}

/* Enlace de ampliación, en azul no: en el color de la marca y con flecha. */
.enlace {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: 1.0625rem; font-weight: 600; color: var(--verde);
  text-decoration: none; padding-block: .25rem; letter-spacing: -.012em;
}
.enlace .f { transition: transform var(--rapida); }
.enlace:hover .f { transform: translateX(4px); }
.en-verde .enlace { color: var(--blanco); }

.enlace-discreto {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: 1.0625rem; color: var(--tinta-media); text-decoration: none;
  padding-block: .4rem;
}
.enlace-discreto strong { color: var(--tinta); font-weight: 600; }
.enlace-discreto:hover { color: var(--tinta); }

/* -------------------------------------------------------------- 7. Cabecera */

.cabecera {
  position: sticky; top: 0; z-index: 60;
  height: var(--cabecera);
  /* Fondo neutro sólido: sin degradado, sin sombra y sin desenfoque. La única
     diferencia al desplazar es el filete inferior, que separa la barra del
     contenido cuando deja de estar al principio de la página. */
  background: var(--cabecera-fondo);
  border-bottom: 1px solid transparent;
  transition: border-color var(--media);
}
.cabecera.esta-desplazada { border-bottom-color: var(--borde); }

.cabecera__interior {
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--e-3);
}
.cabecera__logo img { width: clamp(118px, 9.5vw, 136px); height: auto; }

.nav { display: none; }
@media (min-width: 64rem) {
  .nav { display: flex; justify-content: center; }
  .nav ul { display: flex; align-items: center; gap: clamp(1.25rem, 2.2vw, 2.25rem); margin: 0; padding: 0; list-style: none; }
}
.nav__enlace {
  position: relative; display: block; padding: .5rem 0;
  font-size: .875rem; font-weight: 500; color: var(--tinta);
  text-decoration: none; white-space: nowrap; letter-spacing: -.008em;
  transition: color var(--rapida);
}
.nav__enlace::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .15rem;
  height: 2px; background: var(--amarillo); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--media);
}
.nav__enlace:hover { color: var(--tinta-media); }
.nav__enlace:hover::after, .nav__enlace:focus-visible::after { transform: scaleX(1); }
.nav__enlace.es-activo::after { transform: scaleX(1); }

.cabecera__accion { display: flex; align-items: center; gap: .5rem; justify-self: end; }
.cabecera__cta { display: none; }
@media (min-width: 64rem) {
  .cabecera__cta { display: inline-flex; }
}

.hamburguesa {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 2.75rem; height: 2.75rem; padding: 0 .65rem;
  background: none; border: 1px solid var(--borde-fuerte); border-radius: 980px; cursor: pointer;
}
@media (min-width: 64rem) { .hamburguesa { display: none; } }
.hamburguesa span { display: block; height: 1.5px; background: var(--tinta); transition: transform var(--media), opacity var(--media); }
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mnav {
  position: fixed; inset: var(--cabecera) 0 0; z-index: 55;
  background: var(--cabecera-fondo);
  padding: var(--e-4) var(--margen) var(--e-6);
  overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--media), transform var(--media), visibility var(--media);
}
.mnav.esta-abierto { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 64rem) { .mnav { display: none; } }
.mnav ul { list-style: none; margin: 0 0 var(--e-4); padding: 0; }
.mnav li + li { border-top: 1px solid var(--borde); }
.mnav__enlace {
  display: block; padding: 1.15rem 0;
  font-size: 1.5rem; font-weight: 600; letter-spacing: -.026em;
  color: var(--tinta); text-decoration: none;
}
.mnav__enlace.es-activo { color: var(--verde); }
.mnav__pie { display: grid; gap: var(--e-2); padding-top: var(--e-3); border-top: 1px solid var(--borde); }
.mnav__dato { font-size: .9375rem; color: var(--tinta-media); text-decoration: none; padding-block: .25rem; }
.mnav__dato strong { display: block; font-weight: 600; color: var(--tinta); font-size: 1.125rem; }
body.menu-abierto { overflow: hidden; }

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--tinta); color: var(--blanco); padding: .9rem 1.3rem; text-decoration: none;
}
.saltar:focus { left: 0; }

/* ------------------------------------------------------------------- 8. Héroe

   Dos columnas: el texto directamente sobre el blanco, sin caja, y la
   fotografía dentro de su propia tarjeta. 48/52 como punto de partida.
   La imagen llena su caja con object-fit:cover; sin degradados, sin máscaras
   de transición al blanco y sin texto encima.                             */

.hero { padding-block: clamp(2.5rem, 4vw, 4rem) var(--ritmo); }
/* En las interiores el titular es un <h1> de página, no el display de la
   portada: la caja de la foto se acorta para no quedar desproporcionada. */
.hero--interior { padding-block: clamp(2rem, 3.5vw, 3rem) var(--ritmo); }
@media (min-width: 62rem) { .hero--interior .hero__foto { min-height: 26rem; max-height: 34rem; } }

.hero__rejilla { display: grid; gap: var(--e-5); align-items: center; }
@media (min-width: 62rem) {
  .hero__rejilla {
    grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
    gap: clamp(2.5rem, 4.5vw, 4rem);
    /* La caja de la foto se estira a la altura de la columna de texto en vez
       de imponer una proporción fija. Con 4:5 sobresalía 112 px por abajo y
       el conjunto quedaba descolgado. */
    align-items: stretch;
  }
  /* La caja se estira a la altura del texto, pero con un techo: sin él la
     fotografía dominaba el conjunto en pantallas altas. */
  .hero__foto { aspect-ratio: auto; height: 100%; min-height: 28rem; max-height: 41rem; }
}

.hero__titular {
  font-size: var(--t-display); font-weight: 700;
  line-height: 1.04; letter-spacing: -.035em;
  color: var(--tinta);
  margin: 0 0 var(--e-3);
  max-width: 11em;             /* en em: la medida escala con el titular */
}
.hero__entrada { font-size: var(--t-lead); line-height: 1.5; color: var(--tinta-media); max-width: 42ch; letter-spacing: -.014em; }

.hero__foto {
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-2);
  aspect-ratio: 4 / 5;
  background: var(--roto);
}
.hero__foto img { width: 100%; height: 100%; object-fit: cover; }
/* La foto principal va dentro de un <picture> para servir AVIF o WebP. Sin
   esta regla el <picture> —que es inline— sería el hijo que mide la caja y
   el 100 % de la imagen se calcularía contra él: se quedaría en 0×0. */
.hero__foto picture { display: block; width: 100%; height: 100%; }
@media (max-width: 61.99rem) {
  /* Apilado: la caja se tumba para no empujar el contenido fuera de pantalla. */
  .hero__foto { aspect-ratio: 4 / 3; }
  .hero__foto img { object-position: 62% center; }
}

/* Tres hechos bajo el titular. Ocupan el aire que si no quedaría muerto a la
   izquierda cuando la fotografía es más alta que el texto. */
/* Los argumentos de confianza se acercan al botón: separados 48 px estiraban
   la columna y obligaban a la fotografía a crecer con ella. */
.hero__hechos { display: grid; gap: .75rem; margin-top: var(--e-4); padding-top: var(--e-3); border-top: 1px solid var(--borde); }
.hero__hecho { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--t-nota); color: var(--tinta-media); }
.hero__hecho svg { flex: none; margin-top: .25em; color: var(--verde); }

/* --------------------------------------------------- 9. Sistema de tarjetas */

.tarjeta {
  position: relative;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: clamp(1.75rem, 2.8vw, 2.5rem);
  box-shadow: var(--sombra-1);
}
.tarjeta--plana  { box-shadow: none; }
.tarjeta--roto   { background: var(--roto); border-color: transparent; box-shadow: none; }
.tarjeta--verde, .en-verde { background: var(--verde); border-color: transparent; color: var(--tinta-clara); }
.tarjeta--verde h2, .tarjeta--verde h3, .tarjeta--verde h4, .tarjeta--verde strong,
.en-verde h2, .en-verde h3, .en-verde h4, .en-verde strong { color: var(--blanco); }
.en-verde .lead, .en-verde .nota { color: var(--tinta-clara); }

.rejilla { display: grid; gap: var(--e-3); }
@media (min-width: 46rem) { .rejilla--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 46rem) { .rejilla--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .rejilla--3 { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------- 10. Servicios: cuatro tarjetas

   Cuatro en fila a partir de 1200 px; dos a partir de 640; una debajo. Todas
   con fotografía 4:3 arriba, del mismo juego y con la misma luz, para que la
   cuadrícula se lea como un conjunto y no como cuatro piezas sueltas.     */

.servicios { display: grid; gap: var(--e-3); }
@media (min-width: 40rem) { .servicios { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 75rem) { .servicios { grid-template-columns: repeat(4, 1fr); gap: var(--e-2); } }

.servicio {
  display: flex; flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--sombra-1);
  transition: transform var(--media), box-shadow var(--media);
}
.servicio:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }

.servicio__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--roto); }
.servicio__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(.25,.6,.35,1); }
.servicio:hover .servicio__media img { transform: scale(1.03); }

.servicio__cuerpo { padding: clamp(1.5rem, 2vw, 1.875rem); display: flex; flex-direction: column; flex: 1; }
.servicio__indice { font-size: var(--t-etiq); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-media); margin: 0 0 .65rem; }
.servicio__titulo { margin: 0 0 .5rem; font-size: 1.3125rem; }
.servicio__texto { color: var(--tinta-media); font-size: var(--t-nota); margin: 0; }
.servicio .enlace { margin-top: var(--e-3); font-size: var(--t-nota); }
/* El enlace se ancla abajo solo cuando hay sitio de sobra; así las tarjetas
   quedan a la misma altura sin estirar el texto. */
.servicio .enlace { margin-top: auto; padding-top: var(--e-3); }

/* ------------------------------------------------- 11. Proceso: tres tarjetas

   Sobre gris roto, no sobre una banda verde. Numeral, icono lineal, título y
   una frase. Las tres cajas tienen la misma altura por la propia cuadrícula. */

.pasos { display: grid; gap: var(--e-3); }
@media (min-width: 48rem) { .pasos { grid-template-columns: repeat(3, 1fr); } }

.paso {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: clamp(1.75rem, 2.6vw, 2.25rem);
  box-shadow: var(--sombra-1);
  display: flex; flex-direction: column;
}
.paso__cabeza { display: flex; align-items: center; gap: .85rem; margin-bottom: var(--e-3); }
.paso__num {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem; flex: none;
  border-radius: 50%;
  background: var(--amarillo);
  border: 1px solid var(--amarillo-borde);
  font-size: .9375rem; font-weight: 700; color: var(--tinta);
  letter-spacing: 0;
}
.paso__icono { color: var(--verde); opacity: .65; }
.paso__titulo { margin: 0 0 .5rem; font-size: 1.25rem; }
.paso__texto { margin: 0; color: var(--tinta-media); font-size: var(--t-nota); }

/* ----------------------------------------------------- 12. Alberto, editorial

   Sin retrato inventado y sin la caja verde con iniciales: mientras no exista
   una fotografía real autorizada, la sección se resuelve con tipografía. Una
   cita grande sostiene el bloque y los hechos comprobables van al lado.    */

.alberto { display: grid; gap: var(--e-5); align-items: start; }
@media (min-width: 62rem) { .alberto { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(3rem, 5vw, 4.5rem); align-items: center; } }
/* El retrato de la portada sube de 15rem a 20rem: a 240 px la cara quedaba
   pequeña al lado de un titular de ese cuerpo. 320 px es casi toda la
   columna —384 px— sin llegar a tocar el borde, que es lo que mantiene el
   aire de firma al margen. En móvil sube en la misma proporción. */
@media (min-width: 62rem) { .alberto .credito { max-width: 20rem; } }
@media (max-width: 61.99rem) { .alberto .credito { max-width: 16rem; } }

/* Hueco preparado para la fotografía profesional de Alberto.
   NO simula un retrato: es una placa de marca sobre superficie clara, con la
   proporción 4:5 que tendrá la foto. Cuando exista la imagen autorizada, se
   sustituye el contenido de esta caja y la composición no se mueve. */
/* Crédito editorial: el hueco de la fotografía con su pie, al modo de la
   firma de un reportaje. Compacto y sin sombra, para que se lea como una
   decisión de maqueta y no como un marcador provisional a medio llenar.
   Cuando exista la fotografía autorizada se añade .marco-retrato--foto y la
   imagen ocupa la caja: la composición no se mueve. */
.credito { max-width: 15rem; }
@media (max-width: 61.99rem) { .credito { max-width: 13rem; } }

.marco-retrato {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radio-sm);
  background: var(--roto);
  border: 1px solid var(--borde);
  display: grid; place-items: center;
  padding: 1.25rem;
  overflow: hidden;
}
.marco-retrato img { width: min(86%, 150px); height: auto; opacity: .55; }
.marco-retrato--foto { padding: 0; background: var(--roto); }
.marco-retrato--foto img { width: 100%; height: 100%; object-fit: cover; opacity: 1; }

.credito__nombre { margin: var(--e-2) 0 .15rem; font-size: 1rem; font-weight: 600; color: var(--tinta); }
.credito__rol { margin: 0; font-size: var(--t-nota); color: var(--tinta-media); line-height: 1.45; }
.marco-retrato--foto { padding: 0; }
.marco-retrato--foto img { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
/* La fotografía llegó el 2026-10-19 y el hueco ya la estaba esperando. Va
   dentro de un <picture> para servir AVIF o WebP según el navegador; sin esta
   regla el <picture> —que es inline— sería el elemento de la rejilla y el
   100 % de la imagen se mediría contra él, no contra el marco. */
.marco-retrato--foto picture { display: block; width: 100%; height: 100%; }

.cita {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  font-weight: 600; line-height: 1.26; letter-spacing: -.026em;
  color: var(--tinta);
  max-width: 20ch;
}
/* Dentro de un bloque que ya tiene su propio <h2>, la cita baja un escalón y
   se separa con un filete: si no, compiten dos textos del mismo peso. */
.cita--apoyo {
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  max-width: 34ch;
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--borde);
}
.cita footer { margin-top: var(--e-3); font-size: var(--t-nota); font-weight: 400; color: var(--tinta-media); letter-spacing: -.011em; }
.cita footer strong { color: var(--tinta); font-weight: 600; display: block; }

.hechos { display: grid; gap: 1px; background: var(--borde); border: 1px solid var(--borde); border-radius: var(--radio-sm); overflow: hidden; }
@media (min-width: 46rem) { .hechos--dos { grid-template-columns: 1fr 1fr; } }
.hechos__item { background: var(--blanco); padding: 1.25rem 1.375rem; }
.hechos__titulo { margin: 0 0 .3rem; font-size: var(--t-nota); font-weight: 600; color: var(--tinta); }
.hechos__texto { margin: 0; font-size: var(--t-nota); color: var(--tinta-media); }
.seccion--roto .hechos__item { background: var(--blanco); }
.en-verde .hechos { background: var(--borde-claro); border-color: var(--borde-claro); }
.en-verde .hechos__item { background: var(--verde); }
.en-verde .hechos__titulo { color: var(--blanco); }
.en-verde .hechos__texto { color: var(--tinta-clara); }

.puntos { list-style: none; margin: var(--e-3) 0 0; padding: 0; display: grid; gap: .5rem; }
.puntos li { position: relative; padding-left: 1.4rem; font-size: var(--t-nota); color: var(--tinta-media); }
.puntos li::before {
  content: ''; position: absolute; left: 0; top: .52em;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--amarillo); border: 1px solid var(--amarillo-borde);
}

/* ------------------------------------------------ 13. Preguntas frecuentes */

/* A dos columnas, con las mismas proporciones que «Alberto» y que los casos de
   las páginas interiores: antes el titular y el acordeón se apilaban y dejaban
   media anchura vacía. */
.faq-bloque { display: grid; gap: var(--e-4); }
@media (min-width: 58rem) {
  .faq-bloque { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2.5rem, 4.5vw, 4.5rem); align-items: start; }
  .faq-bloque .encabezado { margin-bottom: 0; }
}
@media (min-width: 58rem) and (min-height: 46rem) {
  .faq-bloque .encabezado { position: sticky; top: calc(var(--cabecera) + 2rem); }
}
/* Acordeón suelto, sin columna de titular: se limita el ancho sin centrarse. */
.faq--sola { max-width: 56rem; }

.faq { border-top: 1px solid var(--borde); }
.faq__item { border-bottom: 1px solid var(--borde); }
.faq__boton {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  width: 100%; padding: 1.375rem 0;
  background: none; border: 0; text-align: left; cursor: pointer;
  font-size: 1.1875rem; font-weight: 600; line-height: 1.35;
  letter-spacing: -.018em; color: var(--tinta);
  transition: color var(--rapida);
}
.faq__boton:hover { color: var(--tinta-media); }
.faq__icono { flex: none; position: relative; width: 1.125rem; height: 1.125rem; color: var(--tinta-media); }
.faq__icono::before, .faq__icono::after {
  content: ''; position: absolute; inset: 50% 0 auto; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform var(--media), opacity var(--media);
}
.faq__icono::after { transform: rotate(90deg); }
.faq__boton[aria-expanded="true"] .faq__icono::after { transform: rotate(0); opacity: 0; }

.faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--media); }
.faq__panel[data-abierto] { grid-template-rows: 1fr; }
.faq__panel > div { overflow: hidden; }
.faq__panel p { max-width: 64ch; padding-bottom: 1.375rem; color: var(--tinta-media); margin: 0; }
.faq__panel p + p { padding-top: 0; margin-top: -.6rem; }

/* ----------------------------------------------- 14. Contacto y formulario */

.contacto { display: grid; gap: var(--e-5); }
@media (min-width: 62rem) {
  .contacto { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(3rem, 5vw, 4.5rem); align-items: start; }
}
/* El formulario mide ~1030 px y la columna de texto ~460: sin esto quedan
   casi 600 px de blanco muerto debajo del texto. Pegada, acompaña al scroll.
   Se exige además ALTURA suficiente: si la ventana es baja, la columna no cabe
   entera y al quedarse fija se le corta la parte de abajo, que es justo donde
   están el teléfono y el aviso de la dirección. En ese caso no se pega. */
@media (min-width: 62rem) and (min-height: 46rem) {
  .contacto > *:first-child { position: sticky; top: calc(var(--cabecera) + 2rem); }
}

.vias { display: grid; gap: 1px; background: var(--borde); border: 1px solid var(--borde); border-radius: var(--radio-sm); overflow: hidden; margin-top: var(--e-4); }
.via { display: flex; align-items: center; gap: 1rem; padding: 1.125rem 1.25rem; background: var(--blanco); text-decoration: none; transition: background var(--rapida); }
.via:hover { background: var(--roto); }
/* El disco se ajusta al glifo: 22 px de icono en 36 px de disco. Antes el
   disco era de 40 y el conjunto pesaba más de lo que pide una fila de
   contacto. El tamaño va aquí y no en el atributo del <svg> para que las
   dos filas no puedan descuadrarse por separado. */
.via__icono { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--roto); color: var(--verde); }
.via__icono svg { width: 22px; height: 22px; display: block; }
.via__eti { display: block; font-size: var(--t-etiq); letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-media); }
.via__dato { display: block; font-size: 1.0625rem; font-weight: 600; color: var(--tinta); }
.seccion--roto .via { background: var(--blanco); }

/* -------------------------------------------------------------------- Mapa
   El marco tiene proporción fija para que no dé un salto al sustituir el aviso
   por el iframe: el hueco ya está reservado antes de cargar nada.
   El aviso de consentimiento va DENTRO del marco, así que mientras no se
   acepte no hay ninguna petición a Google. */

.mapa { display: grid; gap: var(--e-4); align-items: center; }
@media (min-width: 56rem) {
  .mapa { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
          gap: clamp(2.5rem, 4vw, 4rem); }
}

.mapa__ficha h2 { margin-block: .25rem var(--e-2); }
.mapa__dir { margin: 0 0 var(--e-3); font-size: 1.0625rem; font-weight: 600;
             color: var(--tinta); }
.mapa__ficha .hechos { margin-bottom: var(--e-3); }
.mapa__ficha .acciones { margin-top: 0; }

.mapa__marco {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--roto);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-1);
  aspect-ratio: 4 / 3;
}
@media (min-width: 56rem) { .mapa__marco { aspect-ratio: 16 / 11; } }
.mapa__marco iframe { position: absolute; inset: 0; width: 100%; height: 100%;
                      border: 0; display: block; }

/* La imagen propia ocupa todo el marco. `cover` porque la proporción del
   marco cambia entre escritorio y móvil y el marcador está en el centro: así
   se recorta por los bordes y el punto de la oficina nunca se pierde. */
.mapa__estatico {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* Atribución de OpenStreetMap. La licencia ODbL la exige junto al mapa, así
   que va encima de la imagen y solo desaparece cuando el mapa pasa a ser el de
   Google, que trae la suya. */
.mapa__credito {
  position: absolute; right: 0; bottom: 0; z-index: 2; margin: 0;
  padding: .2rem .55rem;
  font-size: .75rem; line-height: 1.4; color: var(--tinta);
  background: rgba(255, 255, 255, .88);
  border-top-left-radius: 8px;
}
.mapa__credito a { color: var(--tinta); }

/* Los dos botones que viven sobre el mapa.

   Van en BLANCO, no en amarillo, por dos razones. Una de diseño: el amarillo
   es la acción principal, y en esta sección la acción principal es «Cómo
   llegar»; dos botones amarillos juntos se estorban. Y una de accesibilidad:
   debajo hay un mapa de cualquier color, así que el límite del control no
   puede depender de lo que haya detrás. El relleno blanco con filete
   --borde-control da 3,62:1 entre sí, que es lo que exige el 1.4.11 con
   independencia de la imagen. */
.mapa__accion {
  position: absolute; z-index: 3;
  left: .75rem; bottom: .75rem;
  min-height: 2.25rem; padding: .4rem 1rem;
  font: inherit; font-size: .875rem; font-weight: 600;
  color: var(--tinta); background: var(--blanco);
  border: 1px solid var(--borde-control); border-radius: 999px;
  cursor: pointer; box-shadow: var(--sombra-1);
  transition: background var(--rapida);
}
.mapa__accion:hover  { background: var(--roto); }
.mapa__accion:active { background: #EFEFF1; }

/* El de salir va arriba a la derecha: abajo están los controles de Google. */
.mapa__accion--salir { left: auto; bottom: auto; right: .75rem; top: .75rem; }

.mapa__aviso { margin: var(--e-4) 0 0; max-width: 78ch; }

@media (max-width: 55.999rem) { .mapa__marco { aspect-ratio: 1 / 1; } }

/* ---- Aislamiento de superficies claras dentro de una pieza oscura ----
   El formulario es blanco y puede colocarse dentro de un bloque verde. Sin
   esta barrera hereda las tintas claras del contexto y queda blanco sobre
   blanco. Se repara una sola vez, aquí. */
.en-verde .formulario { color: var(--tinta-media); }
.en-verde .formulario h2, .en-verde .formulario h3, .en-verde .formulario h4,
.en-verde .formulario strong, .en-verde .formulario label { color: var(--tinta); }
.en-verde .formulario .lead, .en-verde .formulario .nota, .en-verde .formulario .etiqueta { color: var(--tinta-media); }

.formulario {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: clamp(1.75rem, 2.8vw, 2.5rem);
  box-shadow: var(--sombra-2);
}
.formulario h3 { margin-bottom: .5rem; }
.campos { display: grid; gap: var(--e-3); }
@media (min-width: 34rem) { .campos--dos { grid-template-columns: 1fr 1fr; } }
.campo { display: grid; gap: .4rem; }
.campo--ancho { grid-column: 1 / -1; }
.campo label { font-size: var(--t-nota); font-weight: 600; color: var(--tinta); }

.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: .875rem 1rem;
  background: var(--blanco);
  border: 1px solid var(--borde-control);   /* 3,62:1 real, no un gris decorativo */
  border-radius: var(--radio-xs);
  font-size: 1.0625rem; color: var(--tinta);
  transition: border-color var(--rapida), box-shadow var(--rapida);
}
.campo textarea { min-height: 7.5rem; resize: vertical; }
.campo select { appearance: none; padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%231D1D1F' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--tinta);
  box-shadow: 0 0 0 3px rgba(29, 29, 31, .1);
}
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: var(--error-borde); }
.campo__error { font-size: .875rem; color: var(--error-tinta); }

.consentimiento { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--t-nota); color: var(--tinta-media); line-height: 1.5; }
.consentimiento input { flex: none; width: 1.125rem; height: 1.125rem; margin-top: .18rem; accent-color: var(--tinta); }
.consentimiento a { color: var(--tinta); font-weight: 600; }

.formulario__pie { margin-top: var(--e-4); display: grid; gap: var(--e-2); }
.formulario__pie .boton { justify-self: start; }
@media (max-width: 30rem) { .formulario__pie .boton { justify-self: stretch; } }
.opcional { font-weight: 400; color: var(--tinta-media); }

/* Señuelo antispam: fuera de la vista y del orden de tabulación. No se usa
   display:none porque algunos rellenadores automáticos lo detectan. */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.mensaje { margin-top: var(--e-3); padding: .875rem 1.0625rem; border-radius: var(--radio-xs); font-size: var(--t-nota); }
.mensaje[hidden] { display: none; }
.mensaje--ok    { background: var(--ok-fondo);    color: var(--ok-tinta);    border: 1px solid var(--ok-linea); }
.mensaje--error { background: var(--error-fondo); color: var(--error-tinta); border: 1px solid var(--error-linea); }

/* Aviso que inyecta build.py --previa al desarmar el formulario. No existe en
   src/: es la señal de que el envío está desactivado. */
.demo-aviso {
  margin-top: var(--e-3);
  padding: .8rem 1rem;
  background: var(--roto);
  border: 1px dashed var(--borde-control);
  border-radius: var(--radio-xs);
  font-size: .875rem;
  color: var(--tinta-media);
}

/* ------------------------------------------------------------- 15. Cierre */

.llamada { text-align: center; }
.llamada h2 { max-width: 18ch; margin-inline: auto; }
.llamada .lead { margin-inline: auto; max-width: 46ch; }

/* ----------------------------------------------------------------- 16. Pie

   Verde corporativo, pero compacto: tres columnas y una barra fina. Antes
   ocupaba casi una pantalla entera.                                       */

/* El hueco inferior deja respirar al botón flotante de WhatsApp, que si no
   se sienta encima de la última línea del pie. */
.pie { background: var(--verde); color: var(--tinta-clara); padding-block: var(--e-5) calc(var(--e-3) + 3.25rem); }
.pie__rejilla { display: grid; gap: var(--e-4); }
@media (min-width: 48rem) { .pie__rejilla { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--e-4); } }
/* El pie usa la variante con SOLO el nombre. El descriptivo va debajo en
   Inter, separado por el filete dorado de la marca: dentro del PNG iba a un
   cuerpo diminuto y habría hecho falta mostrar el logotipo a más de 400 px
   para que se leyera. Así el nombre gana presencia y el pie no crece. */
.pie__logo img { width: 196px; height: auto; }
.pie__descriptivo {
  margin: .75rem 0 0;
  padding-top: .75rem;
  max-width: 196px;
  border-top: 1px solid var(--dorado-pie);
  font-size: .6875rem;              /* 11 px, pero en Inter y espaciado: se lee */
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--tinta-clara);
}
.pie__desc { margin-top: var(--e-3); font-size: var(--t-nota); max-width: 30ch; color: var(--tinta-clara); }
.pie__titulo { font-size: var(--t-etiq); letter-spacing: .09em; text-transform: uppercase; color: var(--blanco); margin: 0 0 .75rem; font-weight: 600; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .125rem; }
.pie li { color: var(--tinta-clara); font-size: var(--t-nota); padding-block: .25rem; }
/* inline-block con relleno vertical para llegar a los 24 px de alto mínimo
   que WCAG 2.5.8 pide a un destino táctil. */
.pie a { display: inline-block; padding-block: .25rem; color: var(--tinta-clara); text-decoration: none; font-size: var(--t-nota); transition: color var(--rapida); }
.pie a:hover { color: var(--blanco); text-decoration: underline; }
.pie__barra { margin-top: var(--e-4); padding-top: var(--e-3); border-top: 1px solid var(--borde-claro); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; font-size: .8125rem; }

/* ------------------------------------------------------------ 17. WhatsApp */

/* Botón flotante discreto: círculo de 48 px, solo icono. Con la píldora de
   texto llegaba a solaparse con la fotografía del héroe y, a 1280, con el
   desplegable del formulario de contacto. */
/* Botón flotante de WhatsApp: verde oficial de la marca y su propio icono.
   48×48, por encima de los 44 que pide el destino táctil mínimo.

   El relleno #25D366 contra la página blanca solo da 1,98:1, así que el
   círculo lleva filete de #0F7A36 (5,44:1 contra blanco): es lo que delimita
   el control. El icono va en blanco porque es la presentación oficial de la
   marca; su contraste contra el verde es 1,98 y por eso el significado no
   depende de él, sino del aria-label. */
.wa {
  position: fixed; right: clamp(.875rem, 2vw, 1.5rem); bottom: clamp(.875rem, 2vw, 1.5rem); z-index: 50;
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  background: var(--wa-verde); color: var(--blanco);
  border: 1.5px solid var(--wa-filete); border-radius: 50%;
  text-decoration: none;
  box-shadow: var(--sombra-1);
  transition: transform var(--rapida), background var(--rapida);
}
.wa:hover { transform: translateY(-2px); background: var(--wa-verde-hover); }
.wa:active { transform: translateY(0); }
.wa:focus-visible { outline-color: var(--tinta); }
.wa svg { width: 26px; height: 26px; fill: currentColor; }
.wa__texto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
             overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* =========================================================== 18. Interiores */

.migas { padding-top: var(--e-3); font-size: var(--t-nota); color: var(--tinta-media); }
.migas ol { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.migas li + li::before { content: '/'; margin-right: .5rem; color: var(--borde-fuerte); }
.migas a { display: inline-block; padding-block: .25rem; color: var(--tinta-media); text-decoration: none; }
.migas a:hover { color: var(--tinta); text-decoration: underline; }
.migas [aria-current] { color: var(--tinta); font-weight: 600; }

.portada-pagina { padding-block: var(--e-5) var(--e-6); }
/* Cuando el contenido principal arranca justo debajo, el hueco de 64 px rompe
   la continuidad entre la entradilla y el cuerpo. */
.portada-pagina--pegada { padding-bottom: var(--e-4); }
.portada-pagina h1 { max-width: 16ch; margin-bottom: var(--e-3); }
.portada-pagina .lead { max-width: 48ch; }
.portada-pagina__media { margin-top: var(--e-5); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-1); }
.portada-pagina__media img { width: 100%; height: auto; }

.tarjeta__titulo { margin: 0 0 .5rem; }
.tarjeta__texto  { color: var(--tinta-media); margin: 0; }
.tarjeta--enlazada { transition: transform var(--media), box-shadow var(--media); }
.tarjeta--enlazada:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); }
.tarjeta__enlace { text-decoration: none; color: inherit; }
.tarjeta__enlace::after { content: ''; position: absolute; inset: 0; }

/* Caso: bloque largo de las páginas interiores. */
.caso { display: grid; gap: var(--e-3); align-items: start; padding-block: var(--e-5); border-top: 1px solid var(--borde); }
.caso:first-of-type { border-top: 0; padding-top: 0; }
@media (min-width: 58rem) { .caso { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 4.5vw, 4.5rem); } }
.caso__indice { font-size: var(--t-etiq); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-media); margin-bottom: .6rem; display: block; }
.caso__titulo { margin: 0; }
.caso p { max-width: 58ch; }

.perfil { display: grid; gap: var(--e-5); align-items: start; }
@media (min-width: 62rem) { .perfil { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(3rem, 5vw, 4.5rem); align-items: center; } }
/* La página de Alberto es la única que habla de él, así que ahí el retrato
   pesa más que en la portada: en vez de quedarse en 15rem llena su columna
   de la rejilla —unos 480 px—, con lo que el borde derecho queda a plomo con
   el del contenedor en lugar de dejar 128 px muertos. En móvil sube por
   delante del texto: si no, la cara queda a tres pantallas del titular que
   lleva su nombre. La portada no se toca: allí sigue siendo una firma al
   margen, que es como se diseñó. */
@media (min-width: 62rem) { .perfil .credito { max-width: none; } }
@media (max-width: 61.99rem) { .perfil .credito { order: -1; max-width: 18rem; } }

/* ---- Texto legal ---- */
.legal { max-width: 70ch; }
.legal h2 { font-size: clamp(1.375rem, 2.1vw, 1.75rem); margin-top: var(--e-5); }
.legal h2:first-of-type { margin-top: var(--e-4); }
.legal h3 { font-size: 1.125rem; margin-top: var(--e-4); }
.legal p, .legal li { color: var(--tinta); }
.legal ul, .legal ol { padding-left: 1.25rem; display: grid; gap: .5rem; margin: 0 0 1em; }
.legal dl { display: grid; gap: .75rem; margin: 0 0 1em; }
.legal dt { font-weight: 600; }
.legal dd { margin: 0; color: var(--tinta-media); }
.legal a { color: var(--verde); font-weight: 500; }
.legal table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; font-size: var(--t-nota); }
.legal th, .legal td { text-align: left; vertical-align: top; padding: .8rem 1rem; border-bottom: 1px solid var(--borde); }
.legal th { width: 34%; font-weight: 600; color: var(--tinta); background: var(--roto); }
.legal td { color: var(--tinta-media); }
@media (max-width: 34rem) {
  .legal th, .legal td { display: block; width: auto; border-bottom: 0; }
  .legal th { padding-bottom: .2rem; }
  .legal td { padding-top: 0; border-bottom: 1px solid var(--borde); }
}

/* Aviso de borrador: un dato pendiente no se disimula, se señala. */
.borrador {
  display: block;   /* lleva texto corrido con un <strong>: en flex cada nodo
                       sería un ítem y rompería la línea */
  padding: 1.125rem 1.375rem; margin-bottom: var(--e-4);
  background: var(--roto);
  border-left: 3px solid var(--amarillo-borde);
  border-radius: var(--radio-xs);
  font-size: var(--t-nota); color: var(--tinta-media);
}
.borrador strong { color: var(--tinta); }

/* --------------------------------------------------------- 19. Utilidades */

.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.centrado { text-align: center; }

/* Dato aún no confirmado. Se marca con contorno, NO con fondo: un fondo
   competiría con el de la tarjeta que lo contiene y ganaría por orden. */
[data-pendiente] {
  outline: 1px dashed var(--amarillo-borde);
  outline-offset: 2px;
  border-radius: 3px;
  padding: 0 .2em;
  font-style: italic;
}

/* --------------------------------------------------------- 20. Animaciones */

@media (prefers-reduced-motion: no-preference) {
  .revelar { opacity: 0; transform: translateY(14px); }
  .revelar.es-visible {
    opacity: 1; transform: none;
    transition: opacity 620ms cubic-bezier(.22,.7,.3,1), transform 620ms cubic-bezier(.22,.7,.3,1);
  }
  .revelar.es-visible:nth-child(2) { transition-delay: 70ms; }
  .revelar.es-visible:nth-child(3) { transition-delay: 140ms; }
  .revelar.es-visible:nth-child(4) { transition-delay: 210ms; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .revelar { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ 21. Impresión */

@media print {
  /* El plano SÍ se imprime: ahora es una imagen nuestra, y un papel con la
     dirección y el mapa es justo lo que alguien se llevaría. Lo que sobra son
     los botones, que sobre papel no hacen nada. */
  .cabecera, .mnav, .wa, .hamburguesa, .acciones, .formulario,
  .mapa__accion, .mapa__aviso { display: none !important; }
  .mapa__marco { break-inside: avoid; box-shadow: none; }
  body { background: #fff; color: #000; }
  .tarjeta, .servicio, .paso { box-shadow: none; border-color: #ccc; }
  .tarjeta--verde, .en-verde, .pie { background: #fff !important; color: #000 !important; }
  .seccion { padding-block: 1.5rem; }
}

/* --------------------------------------------- 22. Pie: datos de contacto

   El bloque de contacto del pie lleva teléfono, WhatsApp y correo como enlaces
   y, debajo, los datos que no son accionables. La dirección va rotulada como
   «Oficina»: el cliente confirmó el 18-10-2026 que esa misma dirección es a la
   vez domicilio fiscal y oficina con atención al público.                    */

.pie__dato { margin: var(--e-3) 0 0; font-size: var(--t-nota); color: var(--tinta-clara); max-width: 30ch; line-height: 1.5; }
.pie__etiqueta {
  display: block;
  font-size: var(--t-etiq); font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--blanco);
  margin-bottom: .15rem;
}

/* Acceso al CRM: deliberadamente discreto, al final de la barra inferior. */
.pie__crm {
  display: inline-block; padding-block: .25rem;
  font-size: .8125rem; color: var(--tinta-clara);
  text-decoration: none; opacity: .75;
  transition: opacity var(--rapida), color var(--rapida);
}
.pie__crm::before { content: '·'; margin-right: .5rem; opacity: .6; }
.pie__crm:hover { opacity: 1; color: var(--blanco); text-decoration: underline; }