/* ═══════════════════════════════════════════════════════════════════════
   NotarIA — International Premium Version
   Sistema de diseño único para las cinco páginas.

   Todo el color, la tipografía, el espacio y el movimiento del sitio se
   deciden en el bloque :root de abajo. Cambiar una variable aquí cambia
   las cinco páginas a la vez. Antes esto vivía repetido en cada archivo
   y ya había divergido en nueve puntos distintos.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Color ────────────────────────────────────────────────────────────
     El turquesa es el del logotipo, medido del archivo original: #00AFBA.
     --tea-cl se usa sobre superficies oscuras; --tea-os sobre claras.
     Contrastes verificados: 7,1:1 · 9,9:1 · 5,7:1 sobre blanco. */
  --tinta:#06111F;      /* fondo más profundo, apertura y cierre */
  --marino:#0A1B33;     /* superficie oscura de trabajo */
  --azul:#0F2540;       /* elevación sobre marino */
  --tea:#00AFBA;        /* marca */
  --tea-cl:#22CEDB;     /* acento sobre oscuro */
  --tea-os:#06727A;     /* acento sobre claro */
  --marfil:#F5F4F0;     /* claro cálido */
  --blanco:#FFFFFF;     /* claro puro */
  --bruma:#ECF1F0;      /* claro frío con matiz de marca */

  --tx:#EAF1F8;                        /* texto sobre oscuro */
  --tx-2:rgba(234,241,248,.74);
  --tx-3:rgba(234,241,248,.56);
  --gris:#5B6675;                      /* texto secundario sobre claro */
  --linea:rgba(255,255,255,.09);       /* filete sobre oscuro */
  --linea-f:rgba(255,255,255,.2);
  --linea-c:rgba(10,27,51,.14);        /* filete sobre claro */
  --err:#C0392B;

  /* ── Tipografía ───────────────────────────────────────────────────────
     Dos familias con trabajos distintos. Newsreader, serif de transición,
     para titulares: aporta la autoridad editorial que corresponde al
     notariado y rompe la firma visual del software. Sora, geométrica,
     para interfaz, datos y texto corrido, donde la neutralidad ayuda. */
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Escala de ocho pasos con razón 1,25. Antes había 45 tamaños sueltos. */
  --t-1:11.5px;                         /* versalitas, etiquetas */
  --t-2:13px;                           /* apoyo, pies */
  --t-3:15px;                           /* texto de tarjeta */
  --t-4:clamp(15.5px,.35vw + 14px,17px);/* cuerpo */
  --t-5:clamp(17px,.6vw + 15px,20px);   /* entradilla */
  --t-6:clamp(20px,1.5vw,25px);         /* titular menor */
  --t-7:clamp(26px,3vw,40px);           /* titular de sección */
  --t-8:clamp(34px,4.6vw,60px);         /* titular de portada */

  /* ── Espacio ──────────────────────────────────────────────────────────
     Base 4. El ritmo vertical de sección tiene tres alturas: la normal,
     una comprimida para bloques de apoyo y una amplia para las pausas. */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px;
  --e6:32px; --e7:48px; --e8:64px; --e9:96px;

  --pad:clamp(20px,4vw,40px);
  --ancho:1320px;   /* un solo ancho para TODA la página: si el hero usara
                       uno distinto, su titular no alinearía con los de las
                       secciones siguientes y se notaría en cada scroll */
  --medianil:clamp(20px,2.4vw,32px);  /* UNA sola separación entre columnas
                       en todo el sitio. Antes convivían siete valores —0, 16,
                       32, 45, 48, 53, 64 y 72 px— y por eso ninguna frontera
                       de columna coincidía con la de la sección de al lado */
  /* Ritmo vertical. Recortado un 15 % respecto a la versión anterior:
     nueve secciones a 92 px por lado sumaban 1.650 px de colchón, más
     de dos pantallas de puro aire. Sigue habiendo tres alturas, que es
     lo que da jerarquía; solo son más ajustadas. */
  --sec:clamp(48px,5.6vw,78px);       /* ritmo normal */
  --sec-b:clamp(36px,3.8vw,52px);     /* bloque de apoyo */
  --sec-a:clamp(60px,7vw,104px);      /* pausa */

  /* ── Forma ────────────────────────────────────────────────────────── */
  --r-1:8px; --r-2:12px; --r-3:18px; --r-4:999px;

  /* ── Sombra ───────────────────────────────────────────────────────────
     Cuatro, con nombre. Antes había veinticuatro recetas usadas una vez. */
  --s-1:0 1px 2px rgba(10,27,51,.05);
  --s-2:0 1px 2px rgba(10,27,51,.05),0 14px 30px -14px rgba(10,27,51,.18);
  --s-3:0 24px 54px -30px rgba(10,27,51,.42);
  --s-osc:0 26px 60px -34px rgba(0,0,0,.9);

  /* ── Movimiento ───────────────────────────────────────────────────────
     Tres duraciones y una curva. Nada se anima fuera de este sistema. */
  --v-1:180ms;  /* respuesta táctil, cambios de color */
  --v-2:280ms;  /* estados de componente */
  --v-3:520ms;  /* entradas y transiciones de sección */
  --curva:cubic-bezier(.16,1,.3,1);
}

/* ═══ Base ══════════════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
*,*::before,*::after{min-width:0}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--h-tope,72px) + var(--e5));
  /* La barra fija inferior mide 78 px: sin esto, al tabular hacia abajo
     el elemento enfocado quedaba debajo de ella. */
  scroll-padding-bottom:calc(78px + var(--e5));
}
body{
  font-family:var(--sans);
  font-size:var(--t-4);
  line-height:1.65;
  color:var(--tx);
  background:var(--tinta);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.012em;
  color:#fff;
  text-wrap:balance;
}
h4{font-weight:500;font-size:var(--t-3);letter-spacing:-.008em;line-height:1.35}
p{text-wrap:pretty}
/* Alineación natural a la izquierda en todo el texto corrido. Nunca
   justificado: el texto justificado abre ríos de espacio entre palabras
   y en pantallas estrechas se lee peor. Los pocos elementos centrados
   —botones, indicadores de carrusel, la página 404— lo declaran ellos
   mismos después de esta regla. */
h1,h2,h3,h4,p,li,dd,dt,blockquote,figcaption{text-align:left;text-align:start}
/* Los cuatro bloques que sí son composiciones centradas por diseño
   recuperan aquí el centrado para todo su contenido. */
.centro :is(h1,h2,h3,h4,p,li),
#gracias :is(h1,h2,h3,h4,p,li),
.cierre :is(h1,h2,h3,h4,p,li),
.temp :is(h1,h2,h3,h4,p,li){text-align:center}
a{color:inherit;text-decoration:none}
img,video,svg{max-width:100%;display:block}
input,select,textarea,button{max-width:100%;font-family:inherit}
::selection{background:var(--tea);color:var(--tinta)}

:focus-visible{outline:2px solid var(--tea-cl);outline-offset:3px;border-radius:var(--r-1)}
.claro :focus-visible,.blanco :focus-visible,.bruma :focus-visible,
.tarj-c :focus-visible{outline-color:var(--tea-os)}

.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saltar{position:absolute;left:var(--pad);top:-100px;z-index:200;background:var(--tea);
  color:var(--tinta);padding:var(--e3) var(--e5);border-radius:0 0 var(--r-2) var(--r-2);
  font-size:var(--t-3);font-weight:500;transition:top var(--v-1)}
.saltar:focus{top:0}
.dt{font-variant-numeric:tabular-nums}

/* ═══ Retícula ══════════════════════════════════════════════════════
   UNA malla de doce columnas para todo el sitio. Todas las rejillas de
   esta hoja son la misma malla vista de distintas formas, así que sus
   fronteras caen siempre sobre las mismas líneas verticales:

       │1  2  3  4  5  6 │7  8  9  10 11 12│
       │      dupla       │      dupla      │   6 y 6   → línea 7
       │   rej-3   │   rej-3   │   rej-3   │  4, 4 y 4 → líneas 5 y 9
       │ cuatro │ cuatro │ cuatro │ cuatro │  3×4      → líneas 4, 7, 10

   La regla que evita el defecto que se veía: dentro de una sección, la
   cabecera usa el MISMO reparto que la rejilla que lleva debajo. Antes
   la cabecera de «El problema» era 7/5 y su cuerpo 5/6, con medianiles
   de 64 y 72 px: la columna derecha de arriba caía 220 px lejos de la
   de abajo. */
.w{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--pad)}
.s{padding-block:var(--sec)}
.s-b{padding-block:var(--sec-b)}
.s-a{padding-block:var(--sec-a)}

/* Filas de tarjetas. Todas comparten medianil, así que sus bordes caen
   en las líneas 5 y 9 (tres) o 4, 7 y 10 (cuatro). */
.rej-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--medianil)}
.rej-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--medianil)}

/* Cabecera de sección: mitad y mitad. Su frontera cae en la línea 7,
   que es donde arranca la segunda tarjeta de una fila de dos y la
   tercera de una fila de cuatro. Antes era 6fr/5fr con medianil de
   hasta 64 px: no coincidía con nada. */
.dupla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--medianil)}

/* Variante para las secciones que llevan debajo una fila de TRES: la
   entradilla arranca exactamente donde arranca la tercera tarjeta.
   Se declara en doceavos reales —no con `8fr 4fr`— porque con medianil
   los `fr` se desvían un tercio de la medianil, unos 10 px, y se nota. */
.dupla-t{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--medianil);row-gap:var(--medianil)}
.dupla-t>*:first-child{grid-column:span 8}
.dupla-t>*:last-child{grid-column:span 4}

/* UNA medida para todos los titulares del sitio, en vez de diecisiete
   escritas a mano entre 13ch y 22ch. Se declara sobre el elemento, así
   que cualquier titular nuevo la hereda sin que haya que acordarse.

   Con la cabecera a dos columnas manda la columna, que es más ancha que
   24ch, y este valor no llega a actuar; cuando colapsa a una sola es el
   que impide que un titular se estire a sesenta caracteres por línea.
   Las medidas cortas eran la causa de los huérfanos: «sí.» y «sola
   operación.» solos en su renglón mientras media columna quedaba vacía. */
h1,h2{max-width:24ch}
h3{max-width:32ch}

/* ═══ Superficies ═══════════════════════════════════════════════════
   Cinco planos, agrupados en movimientos. El sitio no alterna claro y
   oscuro sección por sección: cambia de superficie cinco veces en once
   secciones, y cada cambio marca un acto distinto del recorrido. */
.osc{background:var(--marino);position:relative}
.honda{background:var(--tinta);position:relative}
.claro{background:var(--marfil);color:var(--marino)}
.blanco{background:var(--blanco);color:var(--marino)}
.bruma{background:var(--bruma);color:var(--marino)}
.claro h1,.claro h2,.claro h3,.blanco h1,.blanco h2,.blanco h3,
.bruma h1,.bruma h2,.bruma h3{color:var(--marino)}
.claro .mut,.blanco .mut,.bruma .mut{color:var(--gris)}
.mut{color:var(--tx-2)}
.mut2{color:var(--tx-3)}

/* Filete de transición entre movimientos: separa sin cortar. */
.fil-sup{border-top:1px solid var(--linea)}
.fil-sup-c{border-top:1px solid var(--linea-c)}
/* Fundido al pie: la página cierra en desvanecido, no en corte. */
.fundido{background:linear-gradient(180deg,var(--marino),var(--tinta))}

/* Textura de grano: un 3 % de ruido evita que los planos oscuros se vean
   como plástico. Es lo que separa un fondo pintado de uno con materia. */
.grano::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)'/%3E%3C/svg%3E")}
.orbe{position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(0,175,186,.16),transparent 68%)}

/* ═══ Cintillo de sección ═══════════════════════════════════════════
   La marca es una miniatura del símbolo del logotipo. Se repite en cada
   sección y es el elemento de identidad más constante del sitio. */
.et{display:flex;align-items:center;gap:var(--e3);margin-bottom:var(--e4);
  font-size:var(--t-1);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tx-3)}
.claro .et,.blanco .et,.bruma .et{color:var(--gris)}
.et i{font-style:normal;display:block;flex:none;width:13px;height:13px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%2300AFBA' d='M0 0h33l67 67v33z'/%3E%3Cpath fill='%2300AFBA' d='M0 29v71h71z'/%3E%3Crect x='79' width='21' height='21' fill='%2322CEDB'/%3E%3C/svg%3E") center/contain no-repeat}
.claro .et i,.blanco .et i,.bruma .et i{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%2306727A' d='M0 0h33l67 67v33z'/%3E%3Cpath fill='%2306727A' d='M0 29v71h71z'/%3E%3Crect x='79' width='21' height='21' fill='%2300AFBA'/%3E%3C/svg%3E")}
.et i + i{display:none}
.js .et.rv i{opacity:0;transform:scale(.62) rotate(-10deg);
  transition:opacity var(--v-2) var(--curva) 120ms,transform var(--v-3) var(--curva) 120ms}
.js .et.rv.in i{opacity:1;transform:none}

/* ═══ Titulares ═════════════════════════════════════════════════════
   El acento turquesa se usa en dos titulares de la página, no en todos:
   si cada titular lleva acento, ninguno destaca. */
.h-1{font-size:var(--t-8)}
.h-2{font-size:var(--t-7)}
.h-3{font-size:var(--t-6)}
.ac{color:var(--tea-cl)}
.claro .ac,.blanco .ac,.bruma .ac{color:var(--tea-os)}
/* Cursiva del serif para un énfasis más editorial que el color. */
.it{font-style:italic}
.entra{font-size:var(--t-5);color:var(--tx-2);max-width:56ch;line-height:1.6}
.claro .entra,.blanco .entra,.bruma .entra{color:var(--gris)}

/* ═══ Botones ═══════════════════════════════════════════════════════ */
.b{display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
  min-height:48px;padding:0 var(--e5);border-radius:var(--r-2);
  font:inherit;font-size:var(--t-3);font-weight:500;border:1px solid transparent;
  cursor:pointer;text-align:center;white-space:nowrap;
  transition:transform var(--v-1) var(--curva),background var(--v-1),
             border-color var(--v-1),box-shadow var(--v-2),color var(--v-1)}
.b svg{flex:none;transition:transform var(--v-2) var(--curva)}
.b:active{transform:translateY(0) scale(.985)}
.b:disabled,.b[aria-disabled="true"]{opacity:.45;pointer-events:none;box-shadow:none}
.b-sm{min-height:44px;padding:0 var(--e4);font-size:var(--t-2)}
.b-lg{min-height:56px;padding:0 var(--e6);font-size:var(--t-4)}

.b-pri{background:var(--tea);color:var(--tinta)}
.b-osc{background:var(--marino);color:#fff}
.b-lin{background:transparent;color:var(--tx);border-color:var(--linea-f)}
.b-lin-c{background:transparent;color:var(--marino);border-color:var(--linea-c)}

@media (hover:hover) and (pointer:fine){
  .b:hover{transform:translateY(-1px)}
  .b:hover svg{transform:translateX(2px)}
  .b-pri:hover{background:#12BFC9;box-shadow:0 10px 30px -12px rgba(0,175,186,.5)}
  .b-osc:hover{background:var(--azul);box-shadow:0 10px 30px -14px rgba(10,27,51,.6)}
  .b-lin:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.34)}
  .b-lin-c:hover{background:rgba(10,27,51,.05);border-color:rgba(10,27,51,.28)}
}

/* Enlace de acción con flecha. */
.enl{display:inline-flex;align-items:center;gap:var(--e2);color:var(--tea-cl);
  font-size:var(--t-3);font-weight:500;border-bottom:1px solid transparent;
  padding-block:2px;transition:border-color var(--v-1),gap var(--v-1)}
.claro .enl,.blanco .enl,.bruma .enl{color:var(--tea-os)}
@media (hover:hover){.enl:hover{border-color:currentColor;gap:14px}}
.micro{font-size:var(--t-2);color:var(--tx-3)}
.claro .micro,.blanco .micro,.bruma .micro{color:var(--gris)}

/* ═══ Tarjetas ══════════════════════════════════════════════════════
   Tres componentes, no diez. Antes había siete clases indistinguibles
   entre sí que solo diferían en dos píxeles de radio. */
.tarj{border-radius:var(--r-3);padding:clamp(20px,2.2vw,28px);position:relative;
  transition:border-color var(--v-2) var(--curva),transform var(--v-2) var(--curva),
             box-shadow var(--v-2) var(--curva)}
/* Oscura */
.tarj-o{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.014));
  border:1px solid var(--linea)}
/* Clara */
.tarj-c{background:var(--blanco);border:1px solid var(--linea-c);box-shadow:var(--s-2)}
/* Sin caja: solo un filete a la izquierda. Para listas editoriales. */
.tarj-f{border-left:1px solid var(--linea);padding-left:clamp(16px,1.8vw,24px)}
.claro .tarj-f,.blanco .tarj-f,.bruma .tarj-f{border-left-color:var(--linea-c)}

@media (hover:hover) and (pointer:fine){
  .tarj-o:hover{border-color:rgba(0,175,186,.42);transform:translateY(-3px);box-shadow:var(--s-osc)}
  .tarj-c:hover{border-color:rgba(6,114,122,.42);transform:translateY(-3px);box-shadow:var(--s-3)}
}
.tarj:active{transform:translateY(-1px)}

.tarj h4,.tarj .tit{display:block;margin-bottom:var(--e2);font-family:var(--serif);
  font-weight:400;font-size:var(--t-6);line-height:1.2;letter-spacing:-.012em;color:#fff}
.claro .tarj .tit,.blanco .tarj .tit,.bruma .tarj .tit,
.tarj-c .tit,.tarj-c h4{color:var(--marino)}
.tarj p{font-size:var(--t-3);line-height:1.6;color:var(--tx-2)}
.tarj-c p,.claro .tarj-f p,.blanco .tarj-f p,.bruma .tarj-f p{color:var(--gris)}

/* Etiqueta de categoría dentro de tarjeta. */
.cat{display:block;font-size:var(--t-1);letter-spacing:.16em;text-transform:uppercase;
  color:var(--tx-3);margin-bottom:var(--e2)}
.tarj-c .cat,.claro .cat,.blanco .cat,.bruma .cat{color:var(--tea-os)}

/* ═══ Iconografía ═══════════════════════════════════════════════════
   Un solo grosor y tres tamaños. Antes convivían siete grosores. */
.ic{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;
  stroke-linejoin:round;flex:none}
.ic-s{width:16px;height:16px}
.ic-m{width:20px;height:20px}
.ic-l{width:24px;height:24px}
.ic-tea{color:var(--tea-cl)}
.claro .ic-tea,.blanco .ic-tea,.bruma .ic-tea{color:var(--tea-os)}
.ic-mut{color:var(--tx-3)}
.claro .ic-mut,.blanco .ic-mut,.bruma .ic-mut{color:var(--gris)}

/* ═══ Encabezado ════════════════════════════════════════════════════
   Altura idéntica en las cinco páginas: 72 px, 62 al hacer scroll.
   El desenfoque es fijo; animarlo obliga a rehacerlo en cada frame. */
.tope{position:fixed;inset:0 0 auto 0;z-index:100;
  transition:box-shadow var(--v-3) var(--curva)}
.tope.on{box-shadow:0 10px 34px -22px rgba(0,0,0,.95)}
.sp{height:72px}
header{background:rgba(6,17,31,.62);backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:background var(--v-3) var(--curva),border-color var(--v-3)}
.tope.on header{background:rgba(6,17,31,.95);border-bottom-color:var(--linea)}
@supports not (backdrop-filter:blur(2px)){
  header{background:rgba(6,17,31,.94)}.tope.on header{background:#08131F}}
header .in{display:flex;align-items:center;justify-content:space-between;
  gap:var(--e5);height:72px;transition:height var(--v-3) var(--curva)}
.tope.on header .in{height:62px}
header nav{display:flex;gap:clamp(16px,1.9vw,28px);font-size:var(--t-2)}
.nl{color:var(--tx-2);padding:var(--e2) 0;position:relative;transition:color var(--v-1)}
.nl:hover{color:#fff}
.nl::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--tea);transform:scaleX(0);transform-origin:left;
  transition:transform var(--v-2) var(--curva)}
.nl:hover::after,.nl[aria-current="page"]::after,.nl[aria-current="location"]::after{transform:scaleX(1)}
.nl[aria-current="page"],.nl[aria-current="location"]{color:#fff}

.mk{display:flex;align-items:center;gap:var(--e3);color:#fff}
.mk b{font-family:var(--sans);font-size:19px;font-weight:500;letter-spacing:-.03em;line-height:1}
.mk b i{font-style:normal;color:var(--tea)}
.mk .sub{display:flex;align-items:center;gap:7px;font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;opacity:.62;margin-top:3px}
.mk .sub::before{content:"";width:14px;height:1px;background:currentColor;opacity:.6;flex:none}
.burger{display:none;background:none;border:0;color:#fff;padding:10px;
  min-width:44px;min-height:44px;cursor:pointer}
/* Bloque de acción del encabezado: CTA y hamburguesa. Vive aquí, no en la
   hoja de interiores, porque el encabezado es idéntico en las cinco. */
.acc-tope{display:flex;align-items:center;gap:var(--e2)}

/* Barra de progreso de lectura. */
#pg{position:fixed;inset:0 auto auto 0;height:2px;width:0;background:var(--tea);
  z-index:140;transition:width 100ms linear}

/* ═══ Menú lateral ══════════════════════════════════════════════════ */
.menu{display:none}
@media (max-width:1180px){
  header nav{display:none}
  .burger{display:block}
  .menu{position:fixed;inset:0;z-index:130;background:var(--tinta);display:flex;
    flex-direction:column;overflow-y:auto;visibility:hidden;transform:translateX(100%);
    padding:calc(18px + env(safe-area-inset-top)) var(--pad) calc(28px + env(safe-area-inset-bottom));
    transition:transform var(--v-3) var(--curva),visibility var(--v-3)}
  .menu.on{transform:none;visibility:visible}
}
.menu-cab{display:flex;justify-content:space-between;align-items:center}
.menu nav{display:flex;flex-direction:column;margin-top:var(--e6);
  border-top:1px solid var(--linea)}
.ml{padding:var(--e4) 0;border-bottom:1px solid var(--linea);
  font-size:17px;font-weight:300;min-height:44px;display:flex;align-items:center}
.ml[aria-current="page"]{color:var(--tea-cl)}
.menu-pie{margin-top:auto;display:flex;flex-direction:column;gap:var(--e3);padding-top:var(--e5)}
#cerrar{background:none;border:0;color:#fff;padding:10px;min-width:44px;min-height:44px;cursor:pointer}
/* En pantallas bajas el bloque de acción se ancla abajo. */
@media (max-width:1180px) and (max-height:720px){
  .ml{padding-block:12px;font-size:16px}
  .menu nav{margin-top:var(--e5)}
  .menu-pie{position:sticky;bottom:0;background:var(--tinta);
    box-shadow:0 -12px 18px -12px var(--tinta)}
}

/* ═══ Barra fija de móvil ═══════════════════════════════════════════ */
.movil{position:fixed;inset:auto 0 0 0;z-index:80;display:none;gap:var(--e3);
  padding:10px var(--e4) calc(10px + env(safe-area-inset-bottom));
  background:rgba(6,17,31,.95);backdrop-filter:blur(14px);
  border-top:1px solid var(--linea);transform:translateY(110%);visibility:hidden;
  transition:transform var(--v-3) var(--curva),visibility var(--v-3)}
.movil.on{transform:none;visibility:visible}
.movil-ic{flex:none;padding-inline:var(--e4)}
.movil-b{flex:1;padding-inline:var(--e4)}

/* ═══ Pie ═══════════════════════════════════════════════════════════
   Idéntico en las cinco páginas: mismo ritmo, mismas columnas y el mismo
   descriptor. Por eso vive en la hoja compartida y no en la de interiores. */
.pie-sec{padding-block:var(--sec-b) var(--e5)}
.pie{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2fr));gap:var(--medianil)}
.pie-txt{margin-top:var(--e4);font-size:var(--t-2);max-width:34ch}
.pie .enl{margin-top:var(--e4)}
.pie-col p{font-size:var(--t-1);letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3)}
.pie-col div{display:flex;flex-direction:column;gap:10px;margin-top:var(--e4);font-size:var(--t-2)}
.pie-col a{color:var(--tx-2);transition:color var(--v-1)}
.pie-col a:hover{color:#fff}
.pie-legal{display:flex;justify-content:space-between;gap:var(--e4);flex-wrap:wrap;
  border-top:1px solid var(--linea);margin-top:var(--e7);padding-top:var(--e5);
  font-size:var(--t-2);color:var(--tx-3)}

/* ═══ Formulario ════════════════════════════════════════════════════ */
.campo{display:flex;flex-direction:column;gap:7px}
.campo label{font-size:var(--t-2);font-weight:500;color:var(--marino)}
.campo label span{color:var(--tea-os)}
.opc{font-size:11px;font-weight:400;color:var(--gris);background:rgba(10,27,51,.05);
  border-radius:var(--r-4);padding:2px 9px;margin-left:6px}
.campo input,.campo select,.campo textarea{
  font:inherit;font-size:16px;min-height:52px;padding:14px 15px;
  border:1px solid rgba(10,27,51,.55);border-radius:var(--r-2);
  background:#fff;color:var(--marino);width:100%;
  transition:border-color var(--v-1),box-shadow var(--v-1)}
.campo textarea{min-height:104px;resize:vertical;line-height:1.55}
.campo select{appearance:none;padding-right:42px;background-repeat:no-repeat;
  background-position:right 15px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6675' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{
  border-color:var(--tea-os);outline:2px solid var(--tea-os);outline-offset:2px}
.campo input::placeholder,.campo textarea::placeholder{color:#6C7581}
.campo.bien input,.campo.bien select{border-color:rgba(6,114,122,.5)}
.campo.mal input,.campo.mal select,.campo.mal textarea{
  border-color:var(--err);box-shadow:0 0 0 3px rgba(192,57,43,.1)}
.error{display:none;font-size:12.5px;color:var(--err)}
/* El color no es el único indicador: el mensaje lleva su propio símbolo. */
.campo.mal .error{display:flex;align-items:center;gap:6px}
.campo.mal .error::before{content:"!";flex:none;display:grid;place-items:center;
  width:15px;height:15px;border-radius:50%;background:var(--err);color:#fff;
  font-size:10px;font-weight:600;line-height:1}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#errEnvio[hidden]{display:none!important}
#enviar{position:relative}
#enviar .spin{display:none;width:17px;height:17px;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:gira .7s linear infinite}
#enviar.cargando .spin{display:block}
#enviar.cargando{pointer-events:none;opacity:.85}
@keyframes gira{to{transform:rotate(360deg)}}
#gracias{display:none;text-align:center;padding:clamp(30px,4vw,48px) clamp(20px,3vw,36px)}
#gracias.on{display:block;animation:entra var(--v-3) var(--curva)}
.chk{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:50%;
  background:rgba(6,114,122,.1)}
.chk svg{width:26px;height:26px;fill:none;stroke:var(--tea-os);stroke-width:2;
  stroke-dasharray:30;stroke-dashoffset:30;animation:trazo 500ms var(--curva) 100ms forwards}
@keyframes trazo{to{stroke-dashoffset:0}}
.doscol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e4)}

/* ═══ Pestañas ══════════════════════════════════════════════════════ */
.tabs{display:flex;gap:var(--e2);overflow-x:auto;scrollbar-width:none;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.tabs::-webkit-scrollbar{display:none}
.tb{scroll-snap-align:start;flex:none;background:transparent;
  border:1px solid rgba(255,255,255,.44);color:var(--tx-2);border-radius:var(--r-4);
  padding:12px 18px;min-height:44px;font:inherit;font-size:var(--t-2);cursor:pointer;
  transition:background var(--v-2) var(--curva),color var(--v-1),border-color var(--v-1)}
.tb:hover{border-color:var(--linea-f);color:#fff}
.tb[aria-selected="true"]{background:var(--tea);border-color:transparent;
  color:var(--tinta);font-weight:500}
/* El estado activo no depende solo del color: también gana un punto. */
.tb[aria-selected="true"]::before{content:"";display:inline-block;width:5px;height:5px;
  border-radius:50%;background:currentColor;margin-right:8px;vertical-align:1px}
.pane{animation:entra var(--v-3) var(--curva)}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pane .rej-2>*{animation:entra 480ms var(--curva) backwards}
.pane .rej-2>*:nth-child(1){animation-delay:40ms}
.pane .rej-2>*:nth-child(2){animation-delay:100ms}
.pane .rej-2>*:nth-child(3){animation-delay:160ms}
.pane .rej-2>*:nth-child(4){animation-delay:220ms}
.pane>div:last-child{animation:entra 560ms var(--curva) 140ms backwards}

/* ═══ Acordeón ══════════════════════════════════════════════════════ */
details{border-bottom:1px solid var(--linea)}
summary{list-style:none;cursor:pointer;padding:var(--e4) 0;min-height:52px;
  font-family:var(--serif);font-size:var(--t-5);font-weight:400;line-height:1.3;
  display:flex;justify-content:space-between;gap:var(--e5);align-items:center;
  transition:color var(--v-1)}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--tea-cl)}
summary em{font-style:normal;color:var(--tea-cl);font-size:20px;line-height:1;flex:none;
  transition:transform var(--v-2) var(--curva)}
details[open] summary em{transform:rotate(45deg)}
details p{color:var(--tx-2);padding-bottom:var(--e5);max-width:72ch;font-size:var(--t-3)}
.js .plegado{display:none}
.js .plegado.on{display:block;animation:entra var(--v-3) var(--curva)}
html:not(.js) .mas-btn{display:none}
.mas-btn{background:none;border:0;cursor:pointer;font-family:inherit;
  margin-top:var(--e4);padding:var(--e2) 0;min-height:44px}
.mas-btn .fl{transition:transform var(--v-2) var(--curva)}
.mas-btn[aria-expanded="true"] .fl{transform:rotate(180deg)}

/* ═══ Controles de carrusel ═════════════════════════════════════════
   Se generan por JavaScript solo cuando el carril se desplaza de verdad,
   así que en escritorio no aparecen. */
.ctrl{display:none;align-items:center;justify-content:center;gap:var(--e4);margin-top:var(--e4)}
.ctrl.on{display:flex}
/* El borde ES el botón: sin 3:1 la flecha no se distingue del fondo. */
.ctrl .fl{width:44px;height:44px;flex:none;border-radius:50%;
  border:1px solid rgba(255,255,255,.46);background:transparent;color:var(--tx);
  display:grid;place-items:center;cursor:pointer;
  transition:border-color var(--v-1),background var(--v-1),color var(--v-1),
             opacity var(--v-1),transform var(--v-1) var(--curva)}
.ctrl .fl:hover:not(:disabled){border-color:var(--tea);color:var(--tea-cl);
  background:rgba(0,175,186,.12)}
.ctrl .fl:active:not(:disabled){transform:scale(.94)}
.ctrl .fl:disabled{opacity:.3;cursor:default}
.ctrl .fl svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}
.ctrl .dots{display:flex;gap:1px;align-items:center}
.ctrl .pt{width:24px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center}
.ctrl .pt::before{content:"";display:block;width:7px;height:7px;border-radius:var(--r-4);
  background:rgba(255,255,255,.42);transition:background var(--v-2),width var(--v-2) var(--curva)}
.ctrl .pt[aria-current="true"]::before{width:20px;background:var(--tea)}
.ctrl .pos{font-size:var(--t-2);color:var(--tx-3);min-width:88px;text-align:center;
  font-variant-numeric:tabular-nums}
.claro .ctrl .fl,.blanco .ctrl .fl,.bruma .ctrl .fl{border-color:rgba(10,27,51,.52);color:var(--marino)}
.claro .ctrl .fl:hover:not(:disabled),.blanco .ctrl .fl:hover:not(:disabled),
.bruma .ctrl .fl:hover:not(:disabled){border-color:var(--tea-os);color:var(--tea-os);
  background:rgba(6,114,122,.08)}
.claro .ctrl .pt::before,.blanco .ctrl .pt::before,.bruma .ctrl .pt::before{background:rgba(10,27,51,.55)}
.claro .ctrl .pt[aria-current="true"]::before,.blanco .ctrl .pt[aria-current="true"]::before,
.bruma .ctrl .pt[aria-current="true"]::before{background:var(--tea-os)}
.claro .ctrl .pos,.blanco .ctrl .pos,.bruma .ctrl .pos{color:var(--gris)}
.carr:focus-visible{outline:2px solid var(--tea-cl);outline-offset:6px;border-radius:var(--r-2)}
/* Sin JavaScript el contenedor de controles queda vacío: no ocupa sitio.
   El script le cambia la clase a `.ctrl` cuando el carril se desplaza. */
.puntos{display:none}

/* ═══ Movimiento ════════════════════════════════════════════════════
   Reglas: entra lo que aporta significado, no lo decorativo. El
   escalonado nunca pasa de tres elementos ni de 60 ms. Nada se anima
   dos veces. En móvil solo entrada y respuesta táctil. */
.js .rv{opacity:0;transform:translateY(18px);
  transition:opacity var(--v-3) var(--curva),transform var(--v-3) var(--curva)}
.js .rv.in{opacity:1;transform:none}
.js .rv-1{transition-delay:60ms}
.js .rv-2{transition-delay:120ms}
.js .rv-3{transition-delay:180ms}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .chk svg{stroke-dashoffset:0}
}
/* En pantallas táctiles el hover se queda pegado tras cada toque. */
@media (hover:none){
  .tarj:hover{transform:none;box-shadow:none}
  .tarj-c:hover{box-shadow:var(--s-2)}
  .b:hover{transform:none}
}

/* ═══ Guardas responsivas ═══════════════════════════════════════════
   Ningún elemento puede exceder el ancho del viewport. `clip` en lugar
   de `hidden` para no romper el posicionamiento fijo del encabezado. */
html,body{max-width:100%;overflow-x:hidden;overflow-x:clip}
h1,h2,h3,h4,p,li,a,span,summary,label,button,td,th,b,em,figcaption,blockquote{overflow-wrap:break-word}

/* ═══ Puntos de corte ═══════════════════════════════════════════════ */
/* La tableta se reorganiza ANTES de que las columnas se compriman. A
   1080 px las dos columnas ya estaban demasiado estrechas para leerse:
   el corte sube a 1180, que es donde empiezan a apretarse. */
@media (max-width:1180px){
  /* Todas las cabeceras de sección pasan a una columna en el MISMO
     punto. Antes unas rompían a 1180 y otras a 1080, y en esos cien
     píxeles la página tenía dos criterios a la vez. */
  .dupla,.dupla-t{grid-template-columns:1fr}
  .dupla-t>*:first-child,.dupla-t>*:last-child{grid-column:auto}
}
@media (max-width:1080px){
  .rej-3{grid-template-columns:1fr}
  .pie{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e7) var(--medianil)}
}
@media (max-width:820px){
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  .movil{display:flex}
  .rej-2,.doscol{grid-template-columns:1fr}
  .w{padding-inline:max(18px,var(--pad))}

  /* ── Pie compacto ────────────────────────────────────────────────
     Apilado en una columna medía 860 px en un teléfono de 360: más que
     la pantalla entera. Tres cambios lo dejan por debajo de 470.

     1 · Los grupos de enlaces van en DOS columnas, no en una. Los
         enlaces más largos —«Protección de datos», 19 caracteres— caben
         de sobra en media columna.
     2 · Se retira el grupo «Contacto». No se pierde nada: sus dos
         enlaces ya están en esta misma pantalla —el correo, en el
         bloque de marca de arriba; la demostración, en la barra fija de
         abajo—. El correo llegaba a verse TRES veces sin desplazarse.
     3 · Los renglones dejan de sumar hueco al alto mínimo táctil. Los
         44 px del área de toque ya separan un enlace del siguiente;
         los 10 px de más solo alargaban la lista. */
  .pie{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--medianil)}
  .pie>div:first-child{grid-column:1 / -1;padding-bottom:var(--e6);
    margin-bottom:var(--e6);border-bottom:1px solid var(--linea)}
  .pie-col:last-child{display:none}
  .pie-col p{margin-bottom:var(--e2)}
  .pie-col div{gap:0;margin-top:0}
  /* Carriles táctiles: una tarjeta completa por vista, sin sangrado
     negativo, que era lo que cortaba el contenido en los bordes. */
  .carr{display:flex;gap:var(--e3);overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-block:2px 6px;scrollbar-width:none}
  .carr::-webkit-scrollbar{display:none}
  .carr>*{flex:0 0 88%;scroll-snap-align:start}
  .enl{min-height:44px}
  /* `flex` y no `inline-flex`: el área de toque ocupa el ancho de la
     columna, no solo el de las letras. Con `padding-block` un enlace que
     necesite dos renglones sigue respirando en vez de apretarse. */
  .pie-col a{min-height:44px;display:flex;align-items:center;
    padding-block:6px;line-height:1.3}
  /* El CTA del encabezado no cabe junto al logotipo y la hamburguesa; la
     barra fija inferior ofrece exactamente la misma acción. Estaba escrito
     dos veces, en portada.css y en interiores.css: el encabezado es uno
     solo y su punto de corte también. */
  header .in .b-sm{display:none}
  /* Los botones largos envuelven en vez de desbordar. `.b` es nowrap por
     diseño, pero a 320 px un CTA de 35 caracteres se sale del viewport. */
  .menu-pie .b,.acciones .b{white-space:normal;line-height:1.35;
    text-wrap:balance;padding-block:12px}
}
@media (max-width:430px){
  :root{--pad:18px}
  /* Por debajo de 430 px ningún botón puede seguir en una sola línea: el
     CTA más largo del sitio mide 37 caracteres y a 320 px se salía del
     viewport. Aquí `.b` deja de ser nowrap para todos, sin excepciones. */
  .b{padding-inline:18px;white-space:normal;line-height:1.35;
     text-wrap:balance;padding-block:11px}
  .carr>*{flex:0 0 90%}
}