/* ============================================================
   Santiago Ricci — sistema de diseño
   Navy dominante (manual de marca B.3) · serifa editorial
   Contrastes medidos con WCAG 2.1, no estimados.
   ============================================================ */

/* ---------- Tipografías autoalojadas ---------- */
@font-face{font-family:'Hamlin';src:url('../fonts/Hamlin-Light.a7296a6394.woff2') format('woff2');font-weight:300;font-style:normal;font-display:optional}
@font-face{font-family:'Hamlin';src:url('../fonts/Hamlin-Regular.a8bb31ef46.woff2') format('woff2');font-weight:400;font-style:normal;font-display:optional}
@font-face{font-family:'Hamlin';src:url('../fonts/Hamlin-Bold.51761c582e.woff2') format('woff2');font-weight:700;font-style:normal;font-display:optional}
@font-face{font-family:'Cormorant';src:url('../fonts/Cormorant-600.ae062b6d5a.woff2') format('woff2');font-weight:600;font-style:normal;font-display:optional}
@font-face{font-family:'Cormorant';src:url('../fonts/Cormorant-400i.e48e580270.woff2') format('woff2');font-weight:400;font-style:italic;font-display:optional}

/* Respaldos con métricas MEDIDAS, no estimadas.
   Cormorant es un 90,9 % del ancho de Georgia; Hamlin, un 109,9 % del de Arial.
   Con estos factores el texto ocupa las mismas líneas antes y después de que
   cargue la tipografía real, y el intercambio deja de mover la página. */
@font-face{
  font-family:'Cormorant-resp';src:local('Georgia');
  size-adjust:90.9%;ascent-override:90%;descent-override:22%;line-gap-override:0%;
}
@font-face{
  font-family:'Hamlin-resp';src:local('Arial');
  size-adjust:109.9%;ascent-override:88%;descent-override:22%;line-gap-override:0%;
}

/* ---------- Tokens ---------- */
:root{
  /* Color — manual de marca: el navy debe predominar */
  --navy:#050533;
  --navy-2:#0A0A40;
  --navy-3:#13134D;
  --linea-navy:rgba(255,255,255,.19);

  --crema:#F7F4ED;
  --hueso:#EAE4D6;
  --blanco:#FFFFFF;

  --verde:#96ED39;          /* 13.45:1 sobre navy — solo acento en oscuro */
  --verde-txt:#3A6B08;      /*  5.82:1 sobre crema · 6.39:1 sobre blanco — AA holgado */

  --tinta:#050533;          /* 19.5:1 sobre crema */
  --gris:#464C5E;           /*  7.78:1 sobre crema · 8.55:1 sobre blanco — AAA */
  --gris-claro:#C4C7D6;     /* 11.6:1 sobre navy — AAA */
  --linea:rgba(5,5,51,.19);

  /* Tipografía */
  --display:'Cormorant','Cormorant-resp',Georgia,serif;
  --sans:'Hamlin','Hamlin-resp',Arial,ui-sans-serif,system-ui,sans-serif;

  /* Ritmo */
  --r-s:14px; --r-m:26px; --r-l:44px; --r-pill:100px;
  --arco:clamp(2.5rem,7vw,6rem);
  --ancho:78rem;
  --ancho-txt:38rem;
  --gutter:clamp(1.25rem,5vw,4rem);
  --seccion:clamp(4.5rem,11vw,9rem);
  --t:.55s cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--blanco);color:var(--tinta);
  font-family:var(--sans);font-weight:300;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);line-height:1.72;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.08;margin:0;letter-spacing:-.012em;text-wrap:balance}
p{margin:0 0 1.15em;text-wrap:pretty}
p:last-child{margin-bottom:0}
::selection{background:var(--verde);color:var(--navy)}

/* Foco visible y consistente */
:focus-visible{outline:2px solid var(--verde-txt);outline-offset:3px;border-radius:2px}
.en-oscuro :focus-visible{outline-color:var(--verde)}

/* ---------- Utilidades ---------- */
.env{width:min(100% - var(--gutter)*2,var(--ancho));margin-inline:auto}
.medida{max-width:var(--ancho-txt)}
.seccion{padding-block:var(--seccion)}
.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}
.saltar{border-radius:var(--r-pill);position:absolute;left:var(--gutter);top:-4rem;z-index:100;background:var(--verde);color:var(--navy);padding:.7rem 1.2rem;font-family:var(--sans);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:top .2s}
.saltar:focus{top:1rem}

.en-oscuro{background:var(--navy);color:var(--crema)}
.en-oscuro h1,.en-oscuro h2,.en-oscuro h3,.en-oscuro h4{color:var(--blanco)}
.en-oscuro .apunte{color:var(--gris-claro)}
.en-oscuro .cintillo{color:var(--verde)}
.en-oscuro .filete{background:var(--linea-navy)}

/* Cintillo: versalitas espaciadas Hamlin (voz de marca) */
.cintillo{
  display:block;font-family:var(--sans);font-weight:400;
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--verde-txt);margin:0 0 1.4rem;
}
.cintillo--num{display:flex;align-items:baseline;gap:.9rem}
.cintillo--num::before{content:attr(data-n);font-family:var(--display);font-size:1.5rem;font-weight:600;letter-spacing:0;opacity:.55}

.apunte{color:var(--gris);font-size:.95rem;line-height:1.65}
.filete{height:1px;background:var(--linea);border:0;margin:0}

/* Escala tipográfica fluida */
.t-xxl{font-size:clamp(2.9rem,1.6rem + 5.8vw,6.4rem);line-height:.98}
.t-xl {font-size:clamp(2.3rem,1.5rem + 3.4vw,4.1rem)}
.t-l  {font-size:clamp(1.75rem,1.3rem + 1.9vw,2.7rem)}
.t-m  {font-size:clamp(1.3rem,1.15rem + .7vw,1.65rem)}
.entradilla{font-family:var(--display);font-size:clamp(1.25rem,1.05rem + .85vw,1.75rem);line-height:1.45;font-weight:600}

/* ---------- Cabecera ---------- */
.cab{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--blanco) 82%,transparent);
  backdrop-filter:saturate(150%) blur(16px);
  -webkit-backdrop-filter:saturate(150%) blur(16px);
  border-bottom:1px solid transparent;transition:border-color var(--t),background var(--t);
}
.cab.desplazada{border-bottom-color:var(--linea);background:color-mix(in srgb,var(--blanco) 96%,transparent)}
.cab__int{display:flex;align-items:center;gap:1.5rem;min-height:4.6rem}
.marca{display:flex;align-items:center;gap:.85rem;text-decoration:none;color:var(--navy);margin-right:auto;padding:.4rem 0}
.marca svg{width:2.35rem;height:2.35rem;flex:none}
.marca__txt{font-family:var(--sans);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;line-height:1.25}
.marca__txt b{display:block;font-weight:400}
.marca__txt span{display:block;color:var(--verde-txt);font-size:.62rem;letter-spacing:.22em}

.nav{display:flex;align-items:center;gap:.35rem}
.nav a{
  position:relative;text-decoration:none;color:var(--gris);
  font-size:.82rem;letter-spacing:.09em;padding:.55rem .8rem;border-radius:2px;
  transition:color .25s;
}
.nav a::after{content:'';position:absolute;left:.8rem;right:.8rem;bottom:.28rem;height:1px;background:var(--verde-txt);transform:scaleX(0);transform-origin:left;transition:transform var(--t)}
.nav a:hover{color:var(--navy)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--navy)}

/* Selector de idioma */
.idiomas{position:relative}
.idiomas__btn{
  border-radius:var(--r-pill);
  display:flex;align-items:center;gap:.45rem;background:none;border:1px solid var(--linea);
  color:var(--gris);font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.5rem .9rem;cursor:pointer;transition:border-color var(--t),color var(--t);
}
.idiomas__btn:hover{border-color:var(--verde-txt);color:var(--navy)}
.idiomas__btn svg{width:.6rem;height:.6rem;transition:transform var(--t)}
.idiomas[data-abierto="true"] .idiomas__btn svg{transform:rotate(180deg)}
.idiomas__lista{
  position:absolute;right:0;top:calc(100% + .5rem);min-width:11rem;margin:0;padding:.35rem;list-style:none;
  background:var(--navy-3);border:1px solid var(--linea-navy);border-radius:var(--r-m);
  opacity:0;visibility:hidden;transform:translateY(-.4rem);transition:all var(--t);
  box-shadow:0 18px 40px rgba(0,0,0,.4);
}
.idiomas[data-abierto="true"] .idiomas__lista{opacity:1;visibility:visible;transform:none}
.idiomas__lista a{display:block;padding:.55rem .9rem;text-decoration:none;color:var(--crema);font-size:.8rem;letter-spacing:.06em;border-radius:var(--r-pill)}
.idiomas__lista a:hover{background:rgba(255,255,255,.07);color:var(--blanco)}
.idiomas__lista a[aria-current="true"]{color:var(--verde)}

/* Botón hamburguesa */
.hamb{display:none;width:2.75rem;height:2.75rem;background:none;border:1px solid var(--linea);border-radius:50%;cursor:pointer;padding:0;position:relative}
.hamb span{position:absolute;left:50%;width:1.1rem;height:1px;background:var(--navy);transform:translateX(-50%);transition:all var(--t)}
.hamb span:nth-child(1){top:1.05rem}
.hamb span:nth-child(2){top:1.35rem}
.hamb span:nth-child(3){top:1.65rem}
.hamb[aria-expanded="true"] span:nth-child(1){top:1.35rem;transform:translateX(-50%) rotate(45deg)}
.hamb[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamb[aria-expanded="true"] span:nth-child(3){top:1.35rem;transform:translateX(-50%) rotate(-45deg)}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.75rem;
  font-family:var(--sans);font-size:.78rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;padding:1.05rem 2.1rem;border:1px solid currentColor;border-radius:var(--r-pill);
  background:none;cursor:pointer;position:relative;overflow:hidden;
  transition:color var(--t),border-color var(--t);
  min-height:48px;
}
.btn::before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--relleno,var(--tinta));transform:scale(.2);opacity:0;transition:transform var(--t),opacity .35s;z-index:0}
.btn:hover::before{transform:scale(1);opacity:1}
.btn{transition:color var(--t),border-color var(--t),transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn > *{position:relative;z-index:1}
.btn__f{width:1.4rem;height:1px;background:currentColor;transition:width var(--t)}
.btn:hover .btn__f{width:2.2rem}

/* El verde lima solo es legible sobre oscuro. Sobre blanco daba 1,45:1 — y era
   el boton principal de la portada, medido en portada, consultoria, libros y
   verificacion, en los cuatro idiomas. Por defecto va el verde de texto
   (#3A6B08: 6,39:1 sobre blanco, 5,82:1 sobre crema); el lima se reserva a los
   fondos navy, donde rinde 13,45:1. El relleno del hover sigue siendo lima con
   el texto en navy encima, que da 13,45:1 en ambos casos. */
.btn--verde{--relleno:var(--verde);color:var(--verde-txt);border-color:var(--verde-txt)}

/* Accion principal: solida, no de contorno. Antes el primario y el secundario
   eran la misma pieza con distinto color de texto y el ojo no distinguia cual
   era cual. Un boton lleno lee como «esto es lo que hay que pulsar», y de paso
   sube el contraste a 18,2:1. */
.btn--primario{
  background:var(--tinta);color:var(--crema);border-color:var(--tinta);
  --relleno:var(--verde);
}
.btn--primario:hover,.btn--primario:focus-visible{color:var(--navy);border-color:var(--verde)}
.en-oscuro .btn--verde,.pie .btn--verde,.cookies .btn--verde,.carta .btn--verde{
  color:var(--verde);border-color:var(--verde)
}
.btn--verde:hover{color:var(--navy)}
.btn--tinta{--relleno:var(--tinta);color:var(--tinta);border-color:rgba(5,5,51,.35)}
.btn--tinta:hover{color:var(--crema);border-color:var(--tinta)}
.btn--claro{--relleno:var(--crema);color:var(--crema);border-color:rgba(255,255,255,.35)}
.btn--claro:hover{color:var(--navy);border-color:var(--crema)}

/* Enlace de texto con filete */
.enlace{
  text-decoration:none;color:var(--verde-txt);font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;
  border-bottom:1px solid currentColor;padding-bottom:.2rem;transition:opacity var(--t);
  display:inline-block;
}
.en-oscuro .enlace{color:var(--verde)}
.enlace:hover{opacity:.62}

/* ---------- Portada ---------- */
.portada{position:relative;background:var(--blanco);color:var(--tinta);overflow:hidden;isolation:isolate}
.portada::before{
  content:'';position:absolute;inset:0;z-index:-2;
  background:radial-gradient(120% 95% at 74% 0%,#FFFFFF 0%,#FFFFFF 34%,var(--crema) 100%);
}
/* Trama diagonal sutil: rompe la cuadratura sin peso */
.portada::after{
  content:'';position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:repeating-linear-gradient(118deg,rgba(5,5,51,.055) 0 1px,transparent 1px 92px);
  mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 72%,transparent);
}
.portada__int{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  align-items:center;gap:clamp(2rem,5vw,5rem);
  padding-block:clamp(3rem,6.5vw,5.5rem) clamp(2rem,4vw,3.2rem);
}
.portada__txt{max-width:36rem}
.portada h1{margin-bottom:1.6rem}
.portada h1 em{font-style:italic;font-weight:400;color:var(--verde-txt);display:block}
.portada__pie{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;margin-top:2.6rem}

/* Retrato: recorte orgánico, no rectángulo */
.retrato{position:relative;justify-self:end;width:min(100%,33rem)}
.retrato img{
  width:100%;display:block;
  /* Arco arriba y esquinas vivas abajo: una forma decidida en lugar de la
     mezcla anterior, que no acababa de ser ni un arco ni un rectangulo. */
  border-radius:50% 50% var(--r-l) var(--r-l)/38% 38% var(--r-l) var(--r-l);
  filter:saturate(.98) contrast(1.04);
  box-shadow:0 30px 70px -30px rgba(5,5,51,.35);
}
/* Se retiran el marco fantasma que respiraba detras y la mascara en degradado
   que desvanecia la foto por abajo. Los dos se leian como fallos: un contorno
   suelto sin funcion y una imagen mal recortada. En su lugar, un halo suave
   que la asienta sobre el fondo claro. */
.retrato::before{
  content:'';position:absolute;inset:6% -4% -3% -4%;z-index:-1;
  background:radial-gradient(60% 50% at 50% 60%,color-mix(in srgb,var(--verde-txt) 9%,transparent),transparent 70%);
  border-radius:50%;
}

/* Marcador de credenciales */
.credenciales{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--linea);margin-top:clamp(2rem,5vw,3.5rem)}
.credencial{flex:1 1 13rem;padding:1.6rem 1.6rem 1.6rem 0;border-right:1px solid var(--linea)}
.credencial:last-child{border-right:0}
.credencial dt{font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--verde-txt);margin-bottom:.5rem}
.credencial dd{margin:0;font-family:var(--display);font-variant-numeric:lining-nums tabular-nums;font-size:clamp(1.4rem,1.2rem + .8vw,2rem);font-weight:600;line-height:1.15;color:var(--tinta)}
.credencial dd small{display:block;font-family:var(--sans);font-size:.78rem;font-weight:300;letter-spacing:.02em;color:var(--gris);margin-top:.35rem;text-transform:none}

/* Alternancia de lienzo: blanco y crema. El navy queda para el pie y el bloque de conversión. */
.seccion--crema{background:var(--crema);position:relative}
/* Arco: la sección crema entra con una curva ancha, no con una línea recta */
.seccion--filete{border-top:0;border-radius:var(--arco) var(--arco) 0 0;margin-top:calc(var(--arco) * -.5);padding-top:calc(var(--seccion) + var(--arco) * .5)}
.portada + .seccion,.seccion--filete + .seccion{border-radius:var(--arco) var(--arco) 0 0;background:var(--blanco);margin-top:calc(var(--arco) * -1);padding-top:calc(var(--seccion) + var(--arco) * .4);position:relative;z-index:1}

/* ---------- Rejilla editorial asimétrica ---------- */
.duo{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,5.5rem);align-items:start}
.duo--inv{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.duo__lat{position:sticky;top:7rem}

/* Listado de líneas de trabajo — filas, no tarjetas */
.lineas{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.en-oscuro .lineas{border-top-color:var(--linea-navy)}
.linea{border-bottom:1px solid var(--linea)}
.en-oscuro .linea{border-bottom-color:var(--linea-navy)}
.linea__a{
  display:grid;grid-template-columns:3.5rem minmax(0,1fr) auto;gap:clamp(1rem,3vw,2.5rem);align-items:baseline;
  padding:clamp(1.6rem,3.5vw,2.4rem) 0;text-decoration:none;transition:padding-left var(--t)
}
.linea__a{border-radius:var(--r-m);transition:padding-left var(--t),background var(--t)}
.linea__a:hover{padding-left:1.4rem;background:color-mix(in srgb,var(--navy) 4%,transparent)}
.linea__n{font-family:var(--display);font-variant-numeric:lining-nums;font-size:1.2rem;color:var(--verde-txt);letter-spacing:.05em}
.en-oscuro .linea__n{color:var(--verde)}
.linea__t{margin:0 0 .5rem}
.linea__d{margin:0;color:var(--gris);font-size:.95rem;max-width:44ch}
.en-oscuro .linea__d{color:var(--gris-claro)}
.linea__f{align-self:center;width:1.6rem;height:1px;background:currentColor;opacity:.4;transition:width var(--t),opacity var(--t)}
.linea__a:hover .linea__f{width:2.8rem;opacity:1}

/* Cita editorial */
.cita{margin:0;padding-left:clamp(1.2rem,3vw,2.5rem);border-left:2px solid var(--verde)}
.cita p{font-family:var(--display);font-style:italic;font-size:clamp(1.4rem,1.15rem + 1.1vw,2.1rem);line-height:1.35;font-weight:400}
.cita footer{font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);margin-top:1rem}
.en-oscuro .cita footer{color:var(--gris-claro)}

/* ---------- Libros ---------- */
.libros{display:grid;gap:clamp(.5rem,1.5vw,1rem)}
.libro + .libro{border-top:1px solid var(--linea)}
.en-oscuro .libro + .libro{border-top-color:var(--linea-navy)}
.libro{
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);
  align-items:center;padding:clamp(1.8rem,4vw,2.6rem) clamp(1rem,2vw,1.6rem);border-radius:var(--r-m);
  transition:background var(--t),transform .45s cubic-bezier(.22,.61,.36,1)
}
.libro:hover{background:color-mix(in srgb,var(--navy) 3.5%,transparent);transform:translateY(-3px)}
.en-oscuro .libro:hover{background:rgba(255,255,255,.05)}

.libro__año{font-family:var(--display);font-variant-numeric:lining-nums;font-size:clamp(2.6rem,2rem + 2.4vw,4.2rem);font-weight:600;line-height:1;color:var(--verde-txt);opacity:.75}
.en-oscuro .libro__año{color:var(--verde)}
.libro h3{margin-bottom:.7rem}
.libro__meta{font-size:.8rem;letter-spacing:.08em;color:var(--gris);margin-bottom:.9rem}
.en-oscuro .libro__meta{color:var(--gris-claro)}

/* ---------- Verificación: tabla registral ---------- */
.tabla{width:100%;border-collapse:collapse;font-size:.9rem}
.tabla caption{text-align:left;font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--verde-txt);padding-bottom:1.1rem}
.en-oscuro .tabla caption{color:var(--verde)}
.tabla th,.tabla td{text-align:left;padding:.95rem 1rem .95rem 0;border-bottom:1px solid var(--linea);vertical-align:top}
.en-oscuro .tabla th,.en-oscuro .tabla td{border-bottom-color:var(--linea-navy)}
.tabla thead th{font-family:var(--sans);font-weight:400;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gris)}
.en-oscuro .tabla thead th{color:var(--gris-claro)}
.tabla tbody th{font-family:var(--display);font-size:1.12rem;font-weight:600}
.tabla td small{display:block;color:var(--gris);font-size:.78rem}
.en-oscuro .tabla td small{color:var(--gris-claro)}
.tabla__envoltura{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-m)}

/* ---------- Formularios ---------- */
.form{display:grid;gap:1.35rem}
.campo{display:grid;gap:.5rem}
.campo label{font-family:var(--sans);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gris-claro)}
.campo input,.campo select,.campo textarea{
  width:100%;background:rgba(255,255,255,.05);border:1px solid var(--linea-navy);border-radius:var(--r-s);
  color:var(--crema);font-family:var(--sans);font-weight:300;font-size:1rem;padding:.95rem 1rem;
  min-height:48px;transition:border-color var(--t),background var(--t);
}
.campo textarea{min-height:8rem;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--verde);background:rgba(255,255,255,.08);outline:none}
.campo input::placeholder,.campo textarea::placeholder{color:rgba(255,255,255,.32)}
.campo select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='%23B8BBCE'%3E%3Cpath d='M0 0h10L5 6z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:.6rem;padding-right:2.5rem}
.consentimiento{display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start;font-size:.84rem;color:var(--gris-claro);line-height:1.55}
/* WCAG 2.2 pide 24x24 minimo. La casilla media 1,15rem (18px) y su fila 21px
   de alto: justo en el paso donde el visitante decide si te escribe. Se agranda
   la casilla y se le da area de pulsacion a la etiqueta entera, que es lo que
   la gente toca de verdad. */
.consentimiento{cursor:pointer;padding-block:.35rem;min-height:44px;align-items:center}
.consentimiento input{
  width:24px;height:24px;min-width:24px;min-height:24px;margin-top:0;
  accent-color:var(--verde);cursor:pointer;flex:none;
}
.form__aviso{font-size:.78rem;color:var(--gris-claro);line-height:1.6;max-width:68ch}
/* El enlace a privacidad medía 142x17. Se le da altura de pulsacion sin
   romper el flujo del parrafo. */
.form__aviso a{color:var(--verde);display:inline-block;padding-block:.5rem;line-height:1.4;min-height:24px}
/* El enlace a privacidad vive dentro del <span> de la etiqueta de
   consentimiento, no en .form__aviso: media 142x17. WCAG 2.2 pide 24x24. */
.consentimiento a,.form a:not(.btn){
  display:inline-block;padding-block:.45rem;line-height:1.35;min-height:24px;
}

/* Carta privada: bloque destacado */
.carta{position:relative;background:var(--navy-2);color:var(--crema);border-radius:var(--r-l);padding:clamp(2rem,5vw,3.5rem);overflow:hidden}
.carta::after{content:'';position:absolute;right:-8%;top:-30%;width:22rem;height:22rem;border:1px solid var(--linea-navy);border-radius:50%}

/* ---------- Pie ---------- */
.pie{background:var(--navy-2);color:var(--gris-claro);padding-block:clamp(3.5rem,7vw,5.5rem) 2rem;font-size:.9rem;border-radius:var(--arco) var(--arco) 0 0;margin-top:calc(var(--arco) * -.5);position:relative;z-index:1}
.pie h2,.pie h3{color:var(--blanco)}
.pie__rejilla{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:clamp(2rem,4vw,3rem)}
.pie__tit{font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--verde);margin:0 0 1.1rem}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.pie a{text-decoration:none;transition:color .25s}
.pie a:hover{color:var(--blanco)}
.pie__base{display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;align-items:center;margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.6rem;border-top:1px solid var(--linea-navy);font-size:.78rem}
.pie__marca svg{width:2.6rem;height:2.6rem;color:var(--blanco);margin-bottom:1.1rem}

/* ---------- Aviso de cookies ---------- */
.cookies{
  position:fixed;left:var(--gutter);right:var(--gutter);bottom:1.25rem;z-index:80;
  max-width:34rem;background:var(--navy-3);color:var(--crema);border:1px solid var(--linea-navy);
  border-radius:var(--r-m);padding:1.6rem;box-shadow:0 24px 60px rgba(0,0,0,.45);
  transform:translateY(140%);transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.cookies[data-visible="true"]{transform:none}
.cookies p{font-size:.86rem;line-height:1.6;color:var(--gris-claro);margin:0}
.cookies a{color:var(--verde)}
.cookies__btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.2rem;flex:none}
.cookies .btn{padding:.75rem 1.3rem;font-size:.7rem}

/* El aviso nunca puede pasar del 70 % de la pantalla: por encima de eso tapa la
   cabecera y deja de poderse abrir el menú. Si el texto crece, crece el bloque
   de texto —que se desplaza solo— y los botones siguen donde estaban. */
.cookies{display:flex;flex-direction:column;max-height:70vh}
.cookies__txt{overflow-y:auto;min-height:0;display:grid;gap:.9rem}
.cookies__det > summary{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--verde);cursor:pointer;list-style:none;padding:.6rem 0;min-height:44px;
  display:flex;align-items:center;gap:.5rem;
}
.cookies__det > summary::-webkit-details-marker{display:none}
.cookies__det > summary::after{content:'';width:.45rem;height:.45rem;border:1px solid currentColor;border-width:0 1px 1px 0;transform:rotate(45deg) translateY(-.15rem);transition:transform var(--t)}
.cookies__det[open] > summary::after{transform:rotate(-135deg) translateY(-.05rem)}
.cookies__det > p{margin-top:.2rem}

/* ---------- Movimiento ---------- */
@keyframes respira{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.028) rotate(.6deg)}}
@keyframes orbita{to{transform:rotate(360deg)}}
@keyframes surge{from{opacity:0;transform:translateY(2.2rem) scale(.985)}to{opacity:1;transform:none}}

/* Anillo decorativo de la portada */
.orbe{position:absolute;border:1px solid var(--linea);border-radius:50%;pointer-events:none;z-index:-1}
.orbe--1{width:34rem;height:34rem;right:-12rem;top:-10rem;animation:orbita 90s linear infinite}
.orbe--2{width:19rem;height:19rem;left:-8rem;bottom:8%;border-style:dashed;opacity:.55;animation:orbita 130s linear infinite reverse}

/* Cifras que cuentan */
.credencial dd{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.credencial:hover dd{transform:translateY(-3px)}

/* Imagen del perfil, también en arco */
.arco-img{border-radius:var(--r-l) var(--r-l) var(--r-m) var(--r-m)/var(--r-l) var(--r-l) var(--r-m) var(--r-m);overflow:hidden}

/* ---------- Revelado al hacer scroll ---------- */
.rev{opacity:0;transform:translateY(2rem) scale(.99);transition:opacity .9s ease,transform .9s cubic-bezier(.22,.61,.36,1)}
.rev.visible{opacity:1;transform:none}
.rev--izq{transform:translateX(-1.6rem)}
.rev--der{transform:translateX(1.6rem)}
@media (prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none;transition:none}
  .orbe,.retrato::before{animation:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- Adaptativo ---------- */
@media (max-width:62rem){
  .portada__int{grid-template-columns:1fr;padding-block:3rem 3.5rem}
  .retrato{justify-self:center;width:min(100%,24rem);order:-1}
  .duo,.duo--inv{grid-template-columns:1fr;gap:2.25rem}
  .duo__lat{position:static}
  .pie__rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}
  .credencial{border-right:0;border-bottom:1px solid var(--linea-navy);padding-right:0;flex:1 1 100%}
  .credencial:last-child{border-bottom:0}
}
@media (max-width:66rem){
  .hamb{display:block;order:3}
  .nav{
    position:fixed;inset:4.6rem 0 auto;background:var(--navy);flex-direction:column;align-items:stretch;
    gap:0;padding:1rem var(--gutter) 2rem;border-bottom:1px solid var(--linea-navy);
    transform:translateY(-102%);max-height:calc(100dvh - 4.6rem);overflow-y:auto;
    visibility:hidden;opacity:0;pointer-events:none;
    transition:transform var(--t),opacity .3s,visibility 0s linear .55s;
  }
  .nav[data-abierto="true"]{transform:none;visibility:visible;opacity:1;pointer-events:auto;transition:transform var(--t),opacity .3s,visibility 0s}
  .nav a{padding:1.05rem 0;font-size:1rem;border-bottom:1px solid var(--linea-navy);letter-spacing:.05em}
  .nav a::after{display:none}

  .nav__cta{margin:.6rem 0 0;justify-content:center;width:100%}
  .idiomas{order:2}
  .idiomas__btn{padding:.6rem .7rem}
  .linea__a{grid-template-columns:2.4rem minmax(0,1fr);gap:1rem}
  .linea__f{display:none}
  .libro{grid-template-columns:1fr;gap:.9rem}
  .libro__año{font-size:2.4rem}
  .tabla{font-size:.85rem;min-width:34rem}
}
@media (max-width:34rem){
  .pie__rejilla{grid-template-columns:1fr}
  .marca__txt{font-size:.68rem}
  .btn{width:100%;justify-content:space-between}
  .portada__pie .btn{width:100%}
}

/* ---------- Impresión ---------- */
@media print{
  .cab,.pie,.cookies,.saltar,.btn{display:none}
  body{background:#fff;color:#000}
}

/* ============================================================
   Iconografía propia · pie reorganizado · portadas de libro
   ============================================================ */

/* ---------- Iconos ---------- */
.ico{width:1.25rem;height:1.25rem;flex:none;display:block;color:inherit}
.ico--linea{width:1.85rem;height:1.85rem;color:var(--verde-txt);opacity:.85}
.en-oscuro .ico--linea{color:var(--verde)}
.ico--red{width:1.3rem;height:1.3rem}

/* ---------- Filas con icono ---------- */
.linea__a{grid-template-columns:2.6rem minmax(0,1fr) auto}
.linea__n{display:flex;align-items:center;transition:transform var(--t)}
.linea__a:hover .linea__n{transform:translateY(-2px) scale(1.06)}

/* ---------- Portadas de libro ---------- */
.libro{grid-template-columns:minmax(0,13rem) minmax(0,1fr);align-items:center}
.portada-libro{position:relative;margin:0;width:100%;max-width:13rem}
.portada-libro img{
  width:100%;border-radius:3px var(--r-s) var(--r-s) 3px;
  box-shadow:0 1px 2px rgba(5,5,51,.10),0 14px 34px -8px rgba(5,5,51,.34);
  transition:transform .55s cubic-bezier(.22,.61,.36,1),box-shadow .55s;
  transform-origin:left center;
}
/* Lomo: da volumen sin imagen extra */
.portada-libro::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:6px;z-index:1;
  border-radius:3px 0 0 3px;
  background:linear-gradient(90deg,rgba(0,0,0,.30),rgba(255,255,255,.16) 55%,rgba(0,0,0,.12));
  pointer-events:none;
}
.libro:hover .portada-libro img{transform:perspective(1200px) rotateY(-7deg) translateZ(10px);box-shadow:0 2px 3px rgba(5,5,51,.12),0 26px 50px -10px rgba(5,5,51,.42)}
.portada-libro__anio{
  position:absolute;right:-1.1rem;bottom:-1rem;z-index:2;box-shadow:0 6px 18px -6px rgba(5,5,51,.35);
  font-family:var(--display);font-variant-numeric:lining-nums;font-size:.95rem;
  background:var(--crema);color:var(--verde-txt);border:1px solid var(--linea);
  border-radius:var(--r-pill);padding:.3rem .8rem;letter-spacing:.04em;
}
.en-oscuro .portada-libro__anio{background:var(--navy-3);color:var(--verde);border-color:var(--linea-navy)}
.portada-libro--s{max-width:8.5rem}

/* ---------- Pie ---------- */
.pie__cta{
  display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;align-items:center;justify-content:space-between;
  padding-bottom:clamp(2.2rem,5vw,3.4rem);margin-bottom:clamp(2.2rem,5vw,3.4rem);
  border-bottom:1px solid var(--linea-navy);
}
.pie__cta__acc{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem}
.pie__correo{
  display:inline-flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--crema);
  font-size:.95rem;letter-spacing:.02em;padding:.5rem 0;border-bottom:1px solid transparent;transition:border-color var(--t),color var(--t);
}
.pie__correo:hover{color:var(--blanco);border-bottom-color:var(--verde)}
.pie__correo .ico{color:var(--verde)}

.pie__rejilla{grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr))}
.pie__col ul{gap:.55rem}
.pie__marca p{max-width:34ch;line-height:1.65}

.redes{display:flex!important;flex-wrap:wrap;gap:.55rem;margin-top:1.4rem}
.red{
  display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;
  border:1px solid var(--linea-navy);color:var(--gris-claro);
  transition:color var(--t),border-color var(--t),transform var(--t),background var(--t);
}
.red:hover{color:var(--navy);background:var(--verde);border-color:var(--verde);transform:translateY(-3px)}

/* ---------- Adaptativo de lo nuevo ---------- */
@media (max-width:62rem){
  .pie__rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pie__marca{grid-column:1 / -1}
}
@media (max-width:66rem){
  .libro{grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);gap:1.25rem;align-items:start}
  .portada-libro{max-width:9.5rem}
  .portada-libro__anio{right:-.5rem;bottom:-.5rem;font-size:.82rem;padding:.25rem .65rem}
  .pie__cta{flex-direction:column;align-items:flex-start}
  .pie__cta__acc{width:100%;flex-direction:column;align-items:stretch}
  .pie__cta__acc .btn{width:100%;justify-content:space-between}
  .linea__a{grid-template-columns:2.4rem minmax(0,1fr)}
}
@media (max-width:34rem){
  .pie__rejilla{grid-template-columns:1fr}
  .libro{grid-template-columns:1fr;gap:1.5rem}
  .portada-libro{max-width:11rem}
}

/* ============================================================
   404 · informe de consultoría
   ============================================================ */
.e404{display:grid;align-items:center;min-height:74vh}
.e404__rejilla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2.5rem,6vw,5rem);align-items:center}
.e404__cifra{
  font-family:var(--display);font-weight:300;line-height:.82;margin:.2rem 0 .6rem;
  font-size:clamp(7rem,17vw,13rem);letter-spacing:-.03em;
  background:linear-gradient(160deg,var(--tinta) 28%,var(--verde-txt) 130%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.e404 h1 em{font-style:italic;font-weight:400;color:var(--verde-txt);display:block;font-size:.62em;line-height:1.2;margin-top:.35rem}
.e404__acc{display:flex;flex-wrap:wrap;gap:.9rem}

.informe{
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-m);
  box-shadow:0 1px 2px rgba(5,5,51,.04),0 30px 60px -30px rgba(5,5,51,.22);
  overflow:hidden;
}
.informe__cab{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem clamp(1.2rem,3vw,1.9rem);border-bottom:1px solid var(--linea);
  background:var(--crema);
}
.informe__cab .cintillo{margin:0}
.informe__sello{width:1.5rem;height:1.5rem;color:var(--verde-txt);opacity:.9}
.informe__cuerpo{margin:0;padding:.4rem clamp(1.2rem,3vw,1.9rem)}
.informe__fila{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);gap:.5rem 1.4rem;padding-block:.95rem;border-bottom:1px solid var(--linea)}
.informe__fila:last-child{border-bottom:0}
.informe__fila dt{
  font-family:var(--sans);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--verde-txt);padding-top:.22rem;
}
.informe__fila dd{margin:0;font-size:.95rem;line-height:1.6;color:var(--tinta)}
.informe__fila:last-child dd{font-family:var(--display);font-size:1.1rem}
.informe__pie{
  padding:.9rem clamp(1.2rem,3vw,1.9rem);border-top:1px solid var(--linea);background:var(--crema);
  font-size:.72rem;letter-spacing:.05em;color:var(--gris);font-style:italic;
}
@media (max-width:62rem){
  .e404__rejilla{grid-template-columns:1fr;gap:2.5rem}
  .e404{min-height:auto}
}
@media (max-width:40rem){
  .informe__fila{grid-template-columns:1fr;gap:.3rem}
  .e404__acc .btn{width:100%;justify-content:space-between}
}

/* ============================================================
   Ilustración vectorial propia · jerarquía tipográfica
   ============================================================ */

/* ---------- Diagrama de proceso en anillos ---------- */
.anillos{
  list-style:none;margin:clamp(2rem,5vw,3.5rem) 0 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;
}
.anillo{display:grid;justify-items:center;gap:.85rem;flex:0 0 auto;width:clamp(8rem,15vw,11.5rem);text-align:center}
.anillo + .anillo{margin-left:clamp(-3.2rem,-4vw,-1.6rem)}
.anillo__fig{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1}
.anillo__fig svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.anillo__pista{fill:none;stroke:var(--linea);stroke-width:5}
.anillo__arco{
  fill:none;stroke:var(--verde-txt);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:var(--dash) var(--gap);
  stroke-dashoffset:var(--total);
  transition:stroke-dashoffset 1.3s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i) * .13s);
}
.anillo.visible .anillo__arco{stroke-dashoffset:0}
.anillo:nth-child(even) .anillo__arco{stroke:var(--tinta)}
.anillo__n{
  position:absolute;font-family:var(--display);font-size:clamp(1.5rem,3vw,2.1rem);
  color:var(--tinta);font-variant-numeric:lining-nums;
}
.anillo__t{
  font-family:var(--sans);font-size:.8rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gris);max-width:11ch;line-height:1.45;
}
.en-oscuro .anillo__pista{stroke:var(--linea-navy)}
.en-oscuro .anillo__arco{stroke:var(--verde)}
.en-oscuro .anillo:nth-child(even) .anillo__arco{stroke:var(--crema)}
.en-oscuro .anillo__n{color:var(--blanco)}
.en-oscuro .anillo__t{color:var(--gris-claro)}

/* ---------- Tarjetas de icono ---------- */
.tarjetas{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.4rem,1.4vw,1rem);margin-top:clamp(1.6rem,4vw,2.6rem);
}
.tarjeta{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.15rem;
  align-items:start;padding:clamp(1.3rem,2.6vw,1.75rem);border-radius:var(--r-m);
  text-decoration:none;color:inherit;border:1px solid transparent;
  transition:background var(--t),border-color var(--t),transform .45s cubic-bezier(.22,.61,.36,1);
}
a.tarjeta:hover{background:var(--blanco);border-color:var(--linea);transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(5,5,51,.3)}
.tarjeta__ico{
  display:grid;place-items:center;width:2.9rem;height:2.9rem;border-radius:50%;
  border:1px solid var(--linea);color:var(--verde-txt);
  transition:background var(--t),color var(--t),border-color var(--t);
}
.tarjeta__ico .ico{width:1.45rem;height:1.45rem}
a.tarjeta:hover .tarjeta__ico{background:var(--verde-txt);color:var(--blanco);border-color:var(--verde-txt)}
.tarjeta__t{display:block;font-family:var(--display);font-size:1.32rem;line-height:1.25;color:var(--tinta);margin-bottom:.4rem}
.tarjeta__d{display:block;font-size:.93rem;line-height:1.62;color:var(--gris)}
.tarjeta__f{position:absolute;right:1.4rem;top:1.6rem;width:1.1rem;height:1px;background:var(--linea);transition:width var(--t),background var(--t)}
a.tarjeta:hover .tarjeta__f{width:2rem;background:var(--verde-txt)}
.en-oscuro .tarjeta__t{color:var(--blanco)}
.en-oscuro .tarjeta__d{color:var(--gris-claro)}
.en-oscuro .tarjeta__ico{border-color:var(--linea-navy);color:var(--verde)}

/* ---------- Cifras grandes ---------- */
.cifras{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));
  gap:clamp(1.5rem,3vw,2.5rem);margin-block:clamp(2rem,5vw,3.2rem);
}
.cifra{padding-top:1.4rem;border-top:2px solid var(--tinta)}
.cifra__n{
  display:block;font-family:var(--display);font-weight:300;line-height:.9;
  font-size:clamp(3.4rem,7vw,5.2rem);letter-spacing:-.02em;color:var(--tinta);
  font-variant-numeric:lining-nums;margin-bottom:.5rem;
}
.cifra__t{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;color:var(--verde-txt);margin-bottom:.5rem}
.cifra__d{display:block;font-size:.88rem;line-height:1.6;color:var(--gris);max-width:26ch}
.en-oscuro .cifra{border-top-color:var(--verde)}
.en-oscuro .cifra__n{color:var(--blanco)}
.en-oscuro .cifra__t{color:var(--verde)}
.en-oscuro .cifra__d{color:var(--gris-claro)}

/* ---------- Comparativa ---------- */
.comparativa{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));
  gap:1px;background:var(--linea);border:1px solid var(--linea);
  border-radius:var(--r-m);overflow:hidden;margin-top:clamp(1.6rem,4vw,2.4rem);
}
.comparativa__col{background:var(--blanco);padding:clamp(1.5rem,3vw,2.2rem)}
.comparativa__col--no{background:var(--crema)}
.comparativa__t{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;
  margin:0 0 1.2rem;padding-bottom:.9rem;border-bottom:1px solid var(--linea);
}
.comparativa__col--si .comparativa__t{color:var(--verde-txt)}
.comparativa__col--no .comparativa__t{color:var(--gris)}
.comparativa ul{list-style:none;margin:0;padding:0;display:grid;gap:.95rem}
.comparativa li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75rem;align-items:start;font-size:.95rem;line-height:1.58}
.comparativa li .ico{width:1.1rem;height:1.1rem;margin-top:.28rem}
.comparativa__col--si li .ico{color:var(--verde-txt)}
.comparativa__col--no li .ico{color:var(--gris);opacity:.55;transform:rotate(180deg)}
.comparativa__col--no li{color:var(--gris)}

@media (max-width:56rem){ .tarjetas{grid-template-columns:1fr} }
@media (max-width:66rem){
  .anillo + .anillo{margin-left:0}
  .anillos{gap:1.5rem 1rem;justify-content:space-between}
  .anillo{width:calc(50% - .75rem)}
}

/* ============================================================
   Submenú de servicios · destacado · nota legal
   ============================================================ */
.tiene-submenu{position:relative;display:inline-flex}
.tiene-submenu > a{display:inline-flex;align-items:center;gap:.4rem}
.submenu__v{width:.6rem;height:.4rem;flex:none;transition:transform var(--t);opacity:.7}
.tiene-submenu:hover .submenu__v,.tiene-submenu:focus-within .submenu__v{transform:rotate(180deg)}

.submenu{
  position:absolute;top:calc(100% + .7rem);left:50%;transform:translateX(-50%) translateY(-.4rem);
  width:min(25rem,86vw);padding:.6rem;
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-m);
  box-shadow:0 2px 4px rgba(5,5,51,.05),0 26px 60px -20px rgba(5,5,51,.3);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--t),transform var(--t),visibility var(--t);
  z-index:60;
}
.submenu__int{display:grid;gap:.15rem}
.submenu__tog{display:none}
.submenu::before{
  content:'';position:absolute;bottom:100%;left:0;right:0;height:.8rem;
}
.tiene-submenu:hover .submenu,.tiene-submenu:focus-within .submenu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.submenu a{
  display:grid!important;grid-template-columns:auto minmax(0,1fr);gap:.85rem;align-items:start;
  padding:.75rem .85rem;border-radius:var(--r-s);text-decoration:none;
  letter-spacing:normal;text-transform:none;font-size:inherit;
  transition:background var(--t);
}
.submenu a::after{display:none}
.submenu a:hover{background:var(--crema)}
.submenu a[aria-current="page"]{background:var(--crema)}
.submenu__ico{
  display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;
  border:1px solid var(--linea);color:var(--verde-txt);margin-top:.1rem;
}
.submenu__ico .ico{width:1.05rem;height:1.05rem}
.submenu__t{display:block;font-family:var(--display);font-size:1.05rem;line-height:1.25;color:var(--tinta);margin-bottom:.15rem}
.submenu__d{display:block;font-size:.8rem;line-height:1.5;color:var(--gris)}

/* ---------- Bloque destacado ---------- */
.destacado{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.15rem;align-items:start;
  padding:clamp(1.4rem,3vw,1.9rem);border-radius:var(--r-m);
  background:var(--blanco);border:1px solid var(--linea);
  box-shadow:0 1px 2px rgba(5,5,51,.04),0 24px 50px -30px rgba(5,5,51,.22);
}
.destacado__ico{
  display:grid;place-items:center;width:2.7rem;height:2.7rem;border-radius:50%;
  background:var(--verde-txt);color:var(--blanco);
}
.destacado__ico .ico{width:1.35rem;height:1.35rem}
.destacado p{margin:0;font-family:var(--display);font-size:1.18rem;line-height:1.55;color:var(--tinta)}

/* ---------- Nota legal en el índice de servicios ---------- */
.aviso-legal-bloque{
  margin-top:clamp(2.5rem,6vw,4rem);padding:clamp(1.5rem,3.5vw,2.2rem);
  border-radius:var(--r-m);border:1px dashed var(--linea);background:var(--crema);
}
.aviso-legal-bloque p{color:var(--gris);font-size:.92rem;line-height:1.65}

@media (max-width:62rem){
  .destacado{margin-top:2rem}
}

/* Cifras del informe 404: numeración de caja alta, si no el 0 parece una o */
.informe dd,.informe dt{font-variant-numeric:lining-nums tabular-nums}
.informe__fila:last-child dd{font-family:var(--sans);font-size:.95rem}

/* ============================================================
   Ilustración vectorial propia
   ============================================================ */
.ilustracion{margin:0;width:100%}
.ilustracion svg{width:100%;height:auto;display:block;overflow:visible}

/* ---------- Estructura: antes y después ---------- */
.il-arista{stroke:var(--linea);stroke-width:1;fill:none}
.il-arista--caos{stroke:color-mix(in srgb,var(--tinta) 26%,transparent)}
.il-nodo{fill:var(--blanco);stroke:var(--tinta);stroke-width:1.2}
.il-lado--caos .il-nodo{stroke:color-mix(in srgb,var(--tinta) 45%,transparent)}
.il-nodo--raiz{fill:var(--tinta);stroke:var(--tinta)}
.il-nodo--hoja{fill:var(--crema)}
.il-lado--orden .il-nodo{stroke:var(--verde-txt)}
.il-lado--orden .il-arista{stroke:color-mix(in srgb,var(--verde-txt) 42%,transparent)}
.il-flecha line,.il-flecha path{stroke:var(--verde-txt);stroke-width:1.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ilustracion__pie{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;margin-top:1.1rem;
  font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);
  text-align:center;
}
.ilustracion__pie span{position:relative;padding-top:.9rem}
/* Un filete corto sobre cada etiqueta la ata a su mitad del dibujo. Antes
   flotaban en los extremos del marco sin señalar nada. */
.ilustracion__pie span::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:2.5rem;height:1px;background:currentColor;opacity:.45;
}
.ilustracion__pie span:last-child{color:var(--verde-txt)}

/* El diagrama se ve siempre. Antes el lado ordenado nacía con opacity:0 a la
   espera de una clase .visible que el observador pone sobre la <figure> de
   fuera, no sobre este elemento: nunca llegaba y media ilustración no existía.
   El desvanecido de entrada ya lo hace el contenedor .rev. */

/* ---------- Globo ---------- */
.il-esfera{fill:var(--blanco);stroke:var(--linea);stroke-width:1}
.en-oscuro .il-esfera{fill:transparent;stroke:var(--linea-navy)}
.il-malla{fill:none;stroke:var(--linea);stroke-width:.7}
.en-oscuro .il-malla{stroke:var(--linea-navy)}
.il-plaza{fill:var(--verde-txt)}
.en-oscuro .il-plaza{fill:var(--verde)}
.il-plaza__halo{
  fill:none;stroke:var(--verde-txt);stroke-width:1;transform-origin:center;transform-box:fill-box;
  animation:pulso 3.4s ease-out infinite;animation-delay:calc(var(--i) * .45s);
}
.en-oscuro .il-plaza__halo{stroke:var(--verde)}
@keyframes pulso{
  0%{transform:scale(1);opacity:.85}
  70%,100%{transform:scale(3.4);opacity:0}
}
.ilustracion__plazas{
  list-style:none;padding:0;
  display:flex!important;flex-wrap:wrap;gap:.5rem .55rem;margin-top:1.4rem;justify-content:center;
}
.ilustracion__plazas li{
  font-family:var(--sans);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gris);border:1px solid var(--linea);border-radius:var(--r-pill);padding:.32rem .8rem;
}
.en-oscuro .ilustracion__plazas li{color:var(--gris-claro);border-color:var(--linea-navy)}

@media (prefers-reduced-motion:reduce){
  .il-plaza__halo{animation:none;opacity:0}

}


/* ============================================================
   Zonas táctiles conformes · WCAG 2.2 AA exige 24x24, el
   estándar táctil son 44x44. Los enlaces del pie median 17 px.
   ============================================================ */
.pie__col a,.pie__marca a:not(.red){
  display:inline-flex;align-items:center;min-height:44px;padding-block:.25rem;
}
.pie__col ul{gap:0}
.red{width:44px;height:44px}
.idiomas__lista a{min-height:44px;display:flex;align-items:center}
.idiomas__btn{min-height:44px}
.nav a{min-height:44px;display:inline-flex;align-items:center}
.submenu a{min-height:44px}
.enlace,.cookies a{padding-block:.2rem}

/* En el pie, al compactar la lista hay que devolver aire entre columnas */
@media (max-width:62rem){ .pie__col{margin-bottom:.5rem} }

/* ============================================================
   La ilustración de estructura, como pieza y no como adorno
   ============================================================ */
.seccion--ilus{padding-block:clamp(3rem,7vw,5.5rem) clamp(1rem,3vw,2rem)}
.ilus-marco{
  margin:0;padding:clamp(1.6rem,4vw,3rem) clamp(1.2rem,4vw,3.5rem);
  border-radius:var(--r-l);background:var(--crema);border:1px solid var(--linea);
}
.ilus-marco__nota{
  margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--linea);
  font-family:var(--display);font-size:clamp(1.05rem,2.2vw,1.3rem);line-height:1.5;
  color:var(--tinta);max-width:52ch;
}

/* El diagrama es de 460x250: estirado a 1123px solo crecia el aire — el dibujo
   real ocupaba el 75% del lienzo y la nota medía 511px dentro de un marco de
   1236px, o sea un 59% de franja muerta a su derecha. Se limita el ancho y se
   centra el conjunto: misma pieza, sin hueco. */
.ilus-marco{display:grid;justify-items:center}
.ilus-marco > .ilustracion{max-width:52rem;width:100%}
.ilus-marco__nota{width:100%;max-width:52rem}

/* En móvil el diagrama horizontal es ilegible: 186 px de alto y nodos de 5 px.
   Se reordena en vertical, mismo dibujo, mismo mensaje, legible. */
@media (max-width:66rem){
  .ilustracion--estructura svg{overflow:visible}
  .ilustracion--estructura .il-lado--caos{transform:translate(58px,0)}
  .ilustracion--estructura .il-lado--orden{transform:translate(120px,286px) scale(1.06)}
  .ilustracion--estructura .il-flecha{transform:translate(196px,262px) rotate(90deg)}
  .ilustracion--estructura svg{height:auto}
  /* Apilados en vertical, los dos rótulos juntos al final no dicen nada.
     Se reparten: uno arriba del todo y otro a media altura, junto a su mitad. */
  .ilustracion--estructura{position:relative}
  .ilustracion__pie{display:block;margin:0;pointer-events:none}
  .ilustracion__pie span{position:absolute;left:0}
  .ilustracion__pie span:first-child{top:0}
  .ilustracion__pie span:last-child{top:52%}
}

/* ============================================================
   Notas
   ============================================================ */
.notas-lista{display:grid;gap:0}
.nota-item{
  display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr) auto;
  gap:1.5rem;align-items:start;padding-block:clamp(1.6rem,3.5vw,2.4rem);
  border-top:1px solid var(--linea);text-decoration:none;color:inherit;
  transition:padding-left var(--t),background var(--t);border-radius:var(--r-m);
}
.nota-item:last-child{border-bottom:1px solid var(--linea)}
.nota-item:hover{padding-left:1.2rem;background:color-mix(in srgb,var(--navy) 3.5%,transparent)}
.nota-item__meta{display:flex;flex-direction:column;gap:.4rem;padding-top:.3rem}
.nota-item__meta time{font-family:var(--sans);font-size:.75rem;letter-spacing:.1em;color:var(--gris)}
.nota-item__cuerpo{display:block}
.nota-item__t{display:block;font-family:var(--display);line-height:1.15;margin-bottom:.6rem}
.nota-item__d{display:block;color:var(--gris);max-width:58ch;line-height:1.65}
.nota-item__l{display:block;margin-top:.7rem;font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--verde-txt)}

/* ---------- El artículo ---------- */
.nota__cab{max-width:44rem;margin-bottom:clamp(2.5rem,6vw,4rem)}
.nota__meta{
  display:flex;gap:.7rem;align-items:center;margin-top:1.6rem;padding-top:1.2rem;
  border-top:1px solid var(--linea);font-family:var(--sans);font-size:.75rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gris);
}
.nota__txt{max-width:40rem}
.nota__txt p{margin-bottom:1.4rem}
.nota__txt h2{margin:clamp(2.4rem,5vw,3.4rem) 0 1.1rem;max-width:22ch}
.nota__lista{list-style:none;padding:0;margin:0 0 1.6rem;display:grid;gap:.2rem}
.nota__lista li{
  position:relative;padding:.85rem 0 .85rem 1.6rem;border-bottom:1px solid var(--linea);
  line-height:1.7;
}
.nota__lista li::before{
  content:'';position:absolute;left:0;top:1.55rem;width:.55rem;height:1px;background:var(--verde-txt);
}
.cita--nota{margin:clamp(2rem,4vw,3rem) 0}
.nota__pie{max-width:44rem}
.notas-rel{display:grid;gap:0;margin-top:clamp(2rem,5vw,3rem)}
.nota-rel{
  display:grid;gap:.35rem;padding-block:1.2rem;border-top:1px solid var(--linea);
  text-decoration:none;color:inherit;transition:padding-left var(--t);
}
.nota-rel:hover{padding-left:.8rem}
.nota-rel__c{font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--verde-txt)}
.nota-rel__t{font-family:var(--display);font-size:1.2rem;line-height:1.25}

@media (max-width:66rem){
  .nota-item{grid-template-columns:1fr;gap:.8rem}
  .nota-item__meta{flex-direction:row;align-items:center;gap:.8rem;padding-top:0}
}

/* ============================================================
   Honorarios. Si se publica un precio alto, se publica grande.
   ============================================================ */
.honorarios{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.6rem;align-items:center;
  padding:clamp(1.4rem,3vw,2rem);border-radius:var(--r-m);
  border:1px solid var(--linea);background:var(--blanco);
}
.honorarios__cifra span{
  display:block;font-family:var(--display);font-variant-numeric:lining-nums;
  font-size:clamp(2.2rem,1.6rem + 2.4vw,3.4rem);line-height:1;color:var(--tinta);white-space:nowrap;
}
.honorarios__txt p{margin:0;color:var(--gris);line-height:1.6;max-width:46ch}
.honorarios__av{margin-top:.7rem!important;font-size:.85rem;color:var(--verde-txt)!important}
.en-oscuro .honorarios{background:var(--navy-3);border-color:var(--linea-navy)}
.en-oscuro .honorarios__cifra span{color:var(--blanco)}
@media (max-width:44rem){ .honorarios{grid-template-columns:1fr;gap:1rem} }

/* El revelado desplaza elementos en horizontal antes de asentarse. El
   desbordamiento es momentáneo, pero en un móvil basta para que la página se
   mueva de lado durante el arranque. */
html{overflow-x:clip}
body{overflow-x:clip}

/* ============================================================
   Casos. La prueba que le faltaba al sitio.
   ============================================================ */
.casos{display:grid;gap:0}
.caso{padding-block:clamp(2.5rem,6vw,4rem);border-top:1px solid var(--linea)}
.caso:first-child{border-top:0;padding-top:0}
.caso__cab{margin-bottom:clamp(1.6rem,4vw,2.4rem);max-width:34rem}
.caso__sector{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris);margin:.2rem 0 .9rem;
}
.caso__cuerpo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.2rem,3vw,2rem)}
.caso__bloque h3{
  font-family:var(--sans);font-size:.7rem;font-weight:400;letter-spacing:.18em;
  text-transform:uppercase;color:var(--verde-txt);margin:0 0 .6rem;
}
.caso__bloque p{margin:0;line-height:1.7;max-width:52ch}
.caso__bloque--res{
  grid-column:1 / -1;padding:clamp(1.4rem,3vw,2rem);border-radius:var(--r-m);
  background:var(--crema);border:1px solid var(--linea);
}
.seccion--crema .caso__bloque--res{background:var(--blanco)}
.caso__cifras{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;margin:.4rem 0 1.1rem}
.caso__n{
  display:block;font-family:var(--display);font-variant-numeric:lining-nums;
  font-size:clamp(1.9rem,1.4rem + 1.9vw,2.9rem);line-height:1.05;color:var(--tinta);
}
.caso__d{display:block;font-size:.88rem;color:var(--gris);max-width:24ch;margin-top:.25rem;line-height:1.5}
.caso__extra{margin:0!important;font-size:.92rem;color:var(--gris)}
.caso__cita{
  grid-column:1 / -1;margin:0;padding-left:1.4rem;border-left:2px solid var(--verde-txt);
}
.caso__cita p{
  margin:0 0 .6rem;font-family:var(--display);font-style:italic;
  font-size:clamp(1.15rem,1rem + .7vw,1.5rem);line-height:1.45;color:var(--tinta);max-width:48ch;
}
.caso__cita footer{
  font-family:var(--sans);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);
}
@media (max-width:66rem){
  .caso__cuerpo{grid-template-columns:1fr;gap:1.4rem}
  .caso__cifras{gap:1.2rem 2rem}
}

/* ============================================================
   Agenda
   ============================================================ */
.agenda{max-width:52rem}
.agenda__tit{
  display:flex;align-items:center;gap:.9rem;font-family:var(--display);
  font-size:clamp(1.3rem,1.1rem + .9vw,1.8rem);line-height:1.2;margin:0 0 1.6rem;
}
.agenda__tit span{
  display:grid;place-items:center;width:2rem;height:2rem;flex:none;border-radius:50%;
  border:1px solid var(--verde-txt);color:var(--verde-txt);
  font-family:var(--sans);font-size:.8rem;
}
.agenda__estado{
  padding:1.6rem;border-radius:var(--r-m);border:1px dashed var(--linea);
  color:var(--gris);text-align:center;
}
.agenda__estado[data-estado="error"],.agenda__estado[data-estado="vacio"]{
  border-style:solid;border-color:var(--verde-txt);color:var(--tinta);
}
.agenda__dias{display:grid;gap:.2rem}
.agenda__dia{padding-block:1.1rem;border-top:1px solid var(--linea)}
.agenda__dia:last-child{border-bottom:1px solid var(--linea)}
.agenda__fecha{
  margin:0 0 .8rem;font-family:var(--sans);font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris);
}
.agenda__horas{display:flex;flex-wrap:wrap;gap:.6rem}
.agenda__hueco{
  min-height:44px;padding:.6rem 1.4rem;border-radius:var(--r-pill);
  border:1px solid var(--linea);background:var(--blanco);cursor:pointer;
  font-family:var(--sans);font-size:.9rem;letter-spacing:.06em;color:var(--tinta);
  font-variant-numeric:lining-nums tabular-nums;
  transition:background var(--t),border-color var(--t),color var(--t),transform .3s;
}
.agenda__hueco:hover{background:var(--tinta);border-color:var(--tinta);color:var(--crema);transform:translateY(-2px)}
.agenda__nota{margin-top:1.4rem;font-size:.85rem;color:var(--gris)}
.agenda__elegido{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:0 0 1.8rem;
  padding:1rem 1.2rem;border-radius:var(--r-m);background:var(--crema);border:1px solid var(--linea);
}
.agenda__elegido__et{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.agenda__elegido strong{font-family:var(--display);font-size:1.15rem;font-weight:600}
.agenda__cambiar{
  margin-left:auto;min-height:44px;padding:.4rem 1rem;border-radius:var(--r-pill);
  border:1px solid var(--linea);background:none;cursor:pointer;
  font-family:var(--sans);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);
}
.agenda__cambiar:hover{border-color:var(--tinta);color:var(--tinta)}
.btn[aria-busy="true"]{opacity:.6;pointer-events:none}
@media (max-width:44rem){
  .agenda__elegido{flex-direction:column;align-items:flex-start}
  .agenda__cambiar{margin-left:0}
}

/* La reserva es la acción principal: se distingue del resto de la barra */
.nav__cta{
  margin-left:.6rem;padding:.55rem 1.15rem!important;border-radius:var(--r-pill);
  border:1px solid var(--verde-txt);color:var(--verde-txt)!important;
  transition:background var(--t),color var(--t);
}
.nav__cta::after{display:none!important}
.nav__cta:hover{background:var(--verde-txt);color:var(--blanco)!important}

/* ============================================================
   Preguntas frecuentes
   ============================================================ */
.faq{display:grid;gap:0}
.faq__i{border-top:1px solid var(--linea)}
.faq__i:last-child{border-bottom:1px solid var(--linea)}
.faq__i summary{
  display:flex;align-items:flex-start;gap:1rem;justify-content:space-between;
  padding-block:1.15rem;cursor:pointer;list-style:none;min-height:44px;
  font-family:var(--display);font-size:clamp(1.05rem,1rem + .4vw,1.28rem);
  line-height:1.35;color:var(--tinta);transition:color var(--t);
}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary:hover{color:var(--verde-txt)}
.faq__mas{
  position:relative;flex:none;width:1rem;height:1rem;margin-top:.35rem;
}
.faq__mas::before,.faq__mas::after{
  content:'';position:absolute;top:50%;left:0;width:100%;height:1px;
  background:var(--verde-txt);transition:transform var(--t);
}
.faq__mas::after{transform:rotate(90deg)}
.faq__i[open] .faq__mas::after{transform:rotate(0)}
.faq__r{padding-bottom:1.3rem}
.faq__r p{margin:0;max-width:60ch;line-height:1.75;color:var(--gris)}


/* ============================================================
   Panel de navegación móvil — repintado
   ------------------------------------------------------------
   El panel móvil tiene background:var(--navy), pero todo lo de dentro seguía
   pintado para la cabecera BLANCA. Medido con el menú abierto a 375px antes
   de este bloque:

     enlace de la página actual  #050533 sobre #050533 ....  1.00:1
     .submenu__t (los servicios) #050533 sobre #050533 ....  1.00:1
     .submenu a  (el enlace)     #464C5E sobre #050533 ....  1.68:1
     .submenu__d (descripción)   #464C5E sobre #050533 ....  2.28:1
     .nav__cta   («Reservar»)    #3A6B08 sobre #050533 ....  3.05:1

   Los dos primeros no eran «poco contraste»: eran texto del mismo color que
   su fondo. Ausencia de texto.

   VA AL FINAL DEL ARCHIVO A PROPÓSITO. Un media query no añade especificidad:
   .submenu__t dentro de @media pesa lo mismo que .submenu__t fuera, así que
   gana la última en orden de aparición. El primer intento de arreglo se puso
   junto al resto de reglas móviles, quedó ANTES de las definiciones de la
   línea 719 y no cambió absolutamente nada. Si se mueve de sitio, vuelve a
   romperse en silencio.
   ============================================================ */
@media (max-width:66rem){
  /* Layout: el submenú se despliega dentro del panel, sin hover.
     También va aquí abajo. Estuvo arriba y perdía contra la definición base
     de .submenu, que trae background:var(--blanco): el panel se quedaba
     blanco por dentro y el texto claro encima daba 1.10:1. */
  /* Acordeón. Seis servicios abiertos de serie empujaban Casos, Libros, Notas,
     Verificación, Contacto y Reservar fuera de la primera pantalla: en un móvil
     de 812px de alto no se veía ni uno. Ahora el panel entero cabe sin
     desplazarse y los servicios se abren si se piden.
     El plegado es grid-template-rows 0fr→1fr, que anima hasta la altura real
     del contenido sin inventarse un max-height. Exige que el hijo tenga
     overflow:hidden, min-height:0 y CERO relleno ni margen verticales: si se
     los pones, el acordeón no cierra del todo. El sangrado va en padding-left,
     que es horizontal y no estorba. */
  .tiene-submenu{display:grid;grid-template-columns:minmax(0,1fr) 2.75rem;align-items:stretch;width:100%}
  .tiene-submenu > a{grid-column:1}
  .submenu__v{display:none}

  .submenu__tog{
    grid-column:2;display:grid;place-items:center;min-height:2.75rem;
    background:none;border:0;border-bottom:1px solid var(--linea-navy);
    color:var(--gris-claro);cursor:pointer;padding:0;
  }
  .submenu__tog svg{width:.8rem;height:.5rem;transition:transform var(--t)}
  .submenu__tog:hover,.submenu__tog:focus-visible{color:var(--verde)}
  .tiene-submenu[data-abierto="true"] .submenu__tog svg{transform:rotate(180deg)}

  .submenu{
    grid-column:1/-1;
    position:static;transform:none;width:100%;opacity:1;visibility:visible;pointer-events:auto;
    box-shadow:none;border:0;background:transparent;padding:0;margin:0;
    display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .3s ease;
  }
  .tiene-submenu[data-abierto="true"] > .submenu{grid-template-rows:1fr}
  .submenu__int{
    overflow:hidden;min-height:0;display:grid;gap:.15rem;
    padding-left:.9rem;border-left:1px solid var(--linea-navy);
  }
  .submenu a{padding:.6rem .4rem}
  /* Cerrado no debe recibir el foco del tabulador */
  .tiene-submenu[data-abierto="false"] .submenu__int{visibility:hidden}
  .tiene-submenu[data-abierto="true"]  .submenu__int{visibility:visible;transition:visibility 0s}

  .nav a{color:var(--gris-claro)}                                   /* 11.61:1 AAA */
  .nav a:hover,.nav a:focus-visible{color:var(--blanco)}            /* 19.62:1 AAA */
  .nav a[aria-current="page"]{color:var(--blanco);border-left:2px solid var(--verde);padding-left:.7rem}

  .submenu a{color:var(--gris-claro)}
  .submenu__t{color:var(--crema)}                                   /* 18.24:1 AAA */
  .submenu__d{color:var(--gris-claro)}                              /* 11.61:1 AAA */
  .submenu__ico{border-color:rgba(255,255,255,.28);color:var(--verde)}  /* 13.45:1 */
  .submenu a:hover,.submenu a:focus-visible,
  .submenu a[aria-current="page"]{background:rgba(255,255,255,.07)}
  .submenu a[aria-current="page"] .submenu__t{color:var(--verde)}

  .nav__cta{border-color:var(--verde);color:var(--verde)!important}  /* 13.45:1 */
  .nav__cta:hover,.nav__cta:focus-visible{background:var(--verde);color:var(--navy)!important}
}


/* Quien pide menos movimiento no ve desplegarse el acordeón: abre y cierra. */
@media (prefers-reduced-motion:reduce){
  .submenu,.submenu__tog svg{transition:none}
}

/* Con el menú desplegado, el aviso de cookies se retira: comparte pantalla con
   el panel y gana por z-index (80 contra 50). Reutiliza el mismo transform con
   el que entra, así que sale y vuelve deslizándose, sin salto. */
body[data-menu="abierto"] .cookies{transform:translateY(140%)}

/* Los dos botones del aviso comparten fila también en móvil: apilados sumaban
   108 px a un bloque que ya no cabía. */
@media (max-width:34rem){
  .cookies .btn{width:auto;flex:1 1 0;justify-content:center;text-align:center;padding:.75rem .7rem}
}


/* ============================================================
   Huecos muertos en pantallas anchas
   ------------------------------------------------------------
   Corregido tras mirar las capturas, no la metrica. Mi primer detector medía
   «ancho del ultimo hijo / ancho de la caja» y marcaba como hueco cualquier
   maquetacion de dos columnas: `comparativa` salia al 50% y estaba
   perfectamente resuelta. Se revirtio esa regla.

   Los dos que si lo eran, vistos en captura a 1440px:
     · `caso__bloque--res`: las cifras apiladas en una columna estrecha y la
       nota al lado, con el 40% derecho de la caja en blanco.
     · `aviso-legal-bloque`: texto a media caja dentro de un marco de 1248px.
   ============================================================ */
@media (min-width:75rem){
  /* Cifras a dos columnas ocupando el ancho util, y la nota de cierre en la
     columna de la derecha, a la altura de la ultima cifra. */
  .caso__bloque--res{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,24rem);
    gap:1.2rem 3rem;align-items:start;
  }
  .caso__bloque--res > h3{grid-column:1/-1}
  .caso__bloque--res .caso__cifras{
    grid-column:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.5rem 3rem;margin:.4rem 0 0;
  }
  .caso__bloque--res .caso__extra{grid-column:2;align-self:end;max-width:none}

  /* La nota de exclusion es corta por naturaleza: estirar el texto daria
     lineas de 110 caracteres. Se estrecha la caja para que abrace su
     contenido en lugar de dejar medio marco vacio. */
  .aviso-legal-bloque{max-width:64rem}
}


/* ---- Longitud de linea, segunda pasada ----
   La primera vez toque `max-width` y no cambio nada: lo que estrangulaba el
   texto no era el max-width sino la columna del `.duo`, que a 1024px deja
   ~470px por lado y hunde el texto a 35-37 caracteres. El optimo de lectura
   son 45-75. Entre 62 y 75rem el duo se apila y el texto recupera medida. */
@media (min-width:62rem) and (max-width:75rem){
  .duo,.duo--inv{grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
  .duo__lat{position:static}
  /* Al apilar el duo el texto pasa a todo el ancho y se va al otro extremo:
     midio 107 caracteres. Se le pone techo. El rango bueno es 45-75. */
  .duo > *,.duo--inv > *{max-width:74ch}
  .entradilla,.apunte{max-width:68ch}
}

/* Techo de medida para el texto corrido. El rango de lectura comodo es 45-75
   caracteres; por encima de 90 el ojo pierde el renglon al volver. Se aplica
   solo al cuerpo: los titulares, entradillas y citas son texto de display y
   una medida corta ahi es una decision editorial, no un defecto.
   (Un `min-width:34rem` en .honorarios__txt provoco desborde a 1440px. Fuera.) */
.apunte,.caso__bloque p,.nota__txt p,.aviso-legal-bloque p{max-width:72ch}