/* =============================================================
   ARCA DATA · hoja de estilos única
   Tokens y sistema visual según MARCA-Y-WEB.md § 3 (marca v1.2)
   HTML + CSS estático. Sin framework, sin build, sin rastreadores.
   ============================================================= */

:root{
  /* --- color de marca (§ 3) --- */
  --blanco:#FFFFFF;
  --niebla:#F3F5F6;
  --grafito:#33393E;   /* nunca #000000 */
  --texto:#40474D;
  --acero:#79828A;
  --linea:#E2E5E8;
  --bruma:#AECBDE;     /* nunca texto sobre blanco */
  --sereno:#4E7A99;
  --verde:#55806B;     /* solo semántico */
  --rojo:#A65B4B;      /* solo semántico */

  /* --- variantes derivadas por accesibilidad (regla 6.7, contraste AA) ---
     --acero (#79828A) da 3.9:1 sobre blanco y --sereno (#4E7A99) da 4.2:1
     sobre niebla: ambos quedan bajo el umbral AA de 4.5:1 para texto normal.
     Estas dos variantes conservan el matiz y sí cumplen; los tokens de marca
     se reservan para superficies, bordes, filetes y texto de gran tamaño. */
  --acero-texto:#626B72;   /* 5.3:1 sobre blanco · 4.9:1 sobre niebla */
  --sereno-texto:#446A83;  /* 5.8:1 sobre blanco · 5.3:1 sobre niebla */
  --sereno-hover:#3F6480;

  /* --- claros sobre grafito --- */
  --sobre-oscuro:#E8ECEF;      /* 9.8:1 sobre grafito */
  --sobre-oscuro-2:#D3DAE0;    /* 8.3:1 */
  --sobre-oscuro-3:#B9C3CB;    /* 6.5:1 */
  --borde-oscuro:rgba(255,255,255,.16);

  /* --- tipografía (§ 3) --- */
  --display:"Besley",Georgia,"Times New Roman",serif;
  --sans:"Public Sans",Arial,Helvetica,sans-serif;
  --mono:"IBM Plex Mono","Courier New",monospace;

  /* --- métrica --- */
  --ancho:1120px;
  --texto-ancho:64ch;   /* columnas de hasta 68 caracteres */
  --radio:6px;
  --alto-cabecera:72px;

  /* --- curvas de aceleración ---
     Las de CSS son demasiado blandas. Estas dos dan el arranque inmediato que
     hace que la interfaz se sienta atenta. Nunca ease-in: retrasa el primer
     movimiento, justo el instante que el ojo está mirando. */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);

  /* --- la retícula de puntos: cada punto es un dato --- */
  --trama:radial-gradient(rgba(174,203,222,.14) 1px, transparent 1.4px);
}

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

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

body{
  margin:0;
  background:var(--blanco);
  color:var(--texto);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3{font-family:var(--display);color:var(--grafito);text-wrap:balance;margin:0}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}
a{color:var(--sereno-texto)}
img,svg{max-width:100%}
[hidden]{display:none !important}

/* foco visible en todo elemento interactivo (regla 6.7) */
:focus-visible{
  outline:2.5px solid var(--sereno);
  outline-offset:3px;
  border-radius:3px;
}
.oscuro :focus-visible{outline-color:var(--bruma)}

.wrap{max-width:var(--ancho);margin:0 auto;padding:0 28px}

/* --- salto al contenido --- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--grafito);color:#fff;
  padding:12px 20px;border-radius:0 0 var(--radio) 0;
  font-weight:600;text-decoration:none;
}
.skip:focus{left:0;top:0}

/* solo para lectores de pantalla: presente en el árbol, ausente en la pantalla */
.skip-visual{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ================= lockup compuesto en HTML =================
   Isotipo SVG + texto: nítido en cualquier pantalla y con el
   tracking exacto (ARCA .05em · DATA .5em). § 3, «Logo». */
.lockup{display:inline-flex;align-items:center;gap:12px;text-decoration:none;line-height:1}
.lockup img{flex:none;display:block}
.lockup .n1{
  font-family:var(--display);font-weight:700;letter-spacing:.05em;
  color:var(--grafito);display:block;
}
.lockup .n2{
  font-family:var(--sans);font-weight:600;letter-spacing:.5em;text-indent:.5em;
  color:var(--sereno-texto);display:block;margin-top:5px;
}
.lockup--claro .n1{color:#fff}
.lockup--claro .n2{color:var(--bruma)}

/* ================= cabecera ================= */
.head{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid var(--linea);
}
@supports (backdrop-filter:blur(8px)){
  .head{backdrop-filter:blur(8px)}
}
.head .wrap{display:flex;align-items:center;gap:28px;height:var(--alto-cabecera)}
.head .n1{font-size:21px}
.head .n2{font-size:8.5px}

.nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{
  font-size:14px;font-weight:600;color:var(--texto);text-decoration:none;
  padding:6px 0;border-bottom:2px solid transparent;
  transition:color 180ms ease,border-color 180ms ease;
}
@media (hover:hover) and (pointer:fine){
  .nav-links a:hover{color:var(--sereno-texto);border-bottom-color:var(--bruma)}
}

/* menú compacto: <details> nativo, funciona sin JavaScript */
.menu{display:none;position:relative}
.menu>summary{
  list-style:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border:1px solid var(--linea);border-radius:var(--radio);
  color:var(--grafito);background:var(--blanco);
}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary{transition:border-color 180ms ease,transform 160ms var(--ease-out)}
.menu>summary:active{transform:scale(.97)}
.menu-panel{
  position:absolute;right:0;top:calc(100% + 10px);min-width:224px;
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);
  box-shadow:0 12px 32px rgba(51,57,62,.12);
  padding:8px;display:flex;flex-direction:column;
  /* nace desde el botón que lo abrió, no desde su propio centro */
  transform-origin:top right;
}
.menu[open] .menu-panel{animation:menu-entra 160ms var(--ease-out)}
@keyframes menu-entra{
  from{opacity:0;transform:scale(.97) translateY(-4px)}
  to{opacity:1;transform:none}
}
.menu-panel a{
  font-size:15px;font-weight:600;color:var(--texto);text-decoration:none;
  padding:11px 14px;border-radius:4px;
  transition:background 140ms ease,color 140ms ease;
}
@media (hover:hover) and (pointer:fine){
  .menu>summary:hover{border-color:var(--bruma)}
  .menu-panel a:hover{background:var(--niebla);color:var(--sereno-texto)}
}

@media (max-width:940px){
  .nav-links{display:none}
  .menu{display:block}
}
@media (max-width:520px){
  /* solo donde hay menú compacto que ya contiene el CTA */
  .menu ~ .btn{display:none}
  .head .wrap{gap:16px}
}

/* ================= botones ================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-size:15px;font-weight:600;line-height:1.2;
  padding:13px 24px;border-radius:var(--radio);
  text-decoration:none;cursor:pointer;border:1.5px solid transparent;
  transition:background 180ms ease,color 180ms ease,border-color 180ms ease,
             transform 160ms var(--ease-out);
}
.btn--primario{background:var(--sereno);color:#fff}
.btn--claro{background:var(--bruma);color:var(--grafito)}
.btn--fantasma{border-color:rgba(255,255,255,.45);color:#fff;background:transparent}
.btn--linea{border-color:var(--linea);color:var(--sereno-texto);background:var(--blanco)}
.btn--compacto{padding:10px 18px;font-size:14px}
.btn svg{flex:none}

/* el hover solo donde hay puntero real: en táctil se dispara al tocar */
@media (hover:hover) and (pointer:fine){
  .btn--primario:hover{background:var(--sereno-hover);transform:translateY(-1px)}
  .btn--claro:hover{background:#C4DCEC;transform:translateY(-1px)}
  .btn--fantasma:hover{border-color:var(--bruma);color:var(--bruma)}
  .btn--linea:hover{border-color:var(--bruma);background:var(--niebla)}
}
/* al final, para ganarle al hover: el botón debe acusar recibo de la pulsación */
.btn:active{transform:scale(.97)}

/* ================= secciones ================= */
section{padding:clamp(64px,9vw,100px) 0}
.oscuro{
  background:var(--grafito);
  background-image:var(--trama);
  background-size:20px 20px;
  color:var(--sobre-oscuro);
}
.oscuro h1,.oscuro h2,.oscuro h3{color:#fff}
.suave{background:var(--niebla)}

/* el filete: gruesa y azul, luego fina y neutra */
.filete{display:flex;align-items:center;margin-bottom:22px}
.filete::before{content:"";height:2.5px;width:56px;background:var(--sereno);flex:none}
.filete::after{content:"";height:1px;flex:1;background:var(--linea);max-width:120px}
.oscuro .filete::before{background:var(--bruma)}
.oscuro .filete::after{background:var(--borde-oscuro)}

/* El filete se dibuja al abrir cada sección: es el gesto que ya significa
   «aquí empieza algo», ahora dicho en el tiempo. Mismo movimiento que el riel
   de las fases, para que la página tenga un solo vocabulario. */
.js .filete::before,
.js .filete::after{transform:scaleX(0);transform-origin:left}
.js .filete::before{transition:transform 520ms var(--ease-out)}
.js .filete::after{transition:transform 520ms var(--ease-out) 110ms}
.js .filete[data-visible="true"]::before,
.js .filete[data-visible="true"]::after{transform:none}

.eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sereno-texto);margin:0 0 14px;
}
.oscuro .eyebrow{color:var(--bruma)}

h2{font-size:clamp(28px,4vw,40px);font-weight:600;line-height:1.15;margin-bottom:18px}
h3{font-size:20px;font-weight:600;margin-bottom:8px}
.bajada{font-size:19px;line-height:1.6;max-width:var(--texto-ancho)}
.oscuro .bajada{color:var(--sobre-oscuro-2)}


/* ================= 1 · portada ================= */
/* La retícula deja de ser textura: un <canvas> dibuja los puntos y los asienta
   al cargar. El radial-gradient de .oscuro queda como respaldo y el script solo
   lo apaga cuando el canvas ya está pintando. */
.hero{padding:clamp(84px,12vw,124px) 0 clamp(72px,10vw,104px);position:relative;overflow:hidden}
.hero>.wrap{position:relative;z-index:1}
#trama{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero .eyebrow{
  font-family:var(--mono);font-weight:500;letter-spacing:.14em;font-size:12.5px;
  color:var(--bruma);
}
.hero h1{
  font-size:clamp(36px,6.2vw,68px);font-weight:600;line-height:1.08;
  letter-spacing:-.01em;max-width:16ch;
}
.hero .bajada{max-width:58ch;margin:24px 0 36px}
.hero-acciones{display:flex;flex-wrap:wrap;gap:14px}
.hero-pie{
  margin-top:clamp(48px,7vw,72px);padding-top:24px;
  border-top:1px solid var(--borde-oscuro);
  font-family:var(--mono);font-size:13px;letter-spacing:.02em;
  color:var(--sobre-oscuro-3);
  font-variant-numeric:tabular-nums;
}

/* La portada entra en orden, no toda de golpe: primero quiénes somos, luego el
   titular, la explicación y recién ahí los botones. Un momento orquestado pesa
   más que cinco efectos sueltos. Termina a la vez que la retícula se asienta.
   Van en keyframes de CSS a propósito: corren fuera del hilo principal, que en
   ese instante está ocupado dibujando el canvas. */
@keyframes hero-entra{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
.js .hero .eyebrow,
.js .hero h1,
.js .hero .bajada,
.js .hero-acciones,
.js .hero-pie{opacity:0;animation:hero-entra 520ms var(--ease-out) forwards}
.js .hero .eyebrow{animation-delay:80ms}
.js .hero h1{animation-delay:150ms}
.js .hero .bajada{animation-delay:230ms}
.js .hero-acciones{animation-delay:310ms}
.js .hero-pie{animation-delay:390ms}

/* ================= 2 · la regulación ================= */
.cifras{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:20px;margin:38px 0 34px;
  list-style:none;padding:0;
}
.cifra{
  background:var(--blanco);border:1px solid var(--linea);
  border-top:3px solid var(--sereno);border-radius:var(--radio);padding:24px;
}
.cifra b{
  display:block;font-family:var(--display);font-weight:700;font-size:34px;
  color:var(--grafito);font-variant-numeric:tabular-nums;line-height:1.1;
}
.cifra span{display:block;font-size:14.5px;color:var(--acero-texto);margin-top:6px}

/* nota serena: el borde verde es semántico (riesgo gestionable) */
.aviso{
  border-left:3px solid var(--verde);background:var(--blanco);
  padding:24px 28px;border-radius:0 var(--radio) var(--radio) 0;max-width:72ch;
}

/* ================= 3 · el método ================= */
/* La escalera: un riel del que cuelgan las tres fases. Se dibuja una vez, al
   entrar en pantalla, para que se lean como un proceso y no como tres tarjetas.
   Sin JavaScript nace dibujado. */
.escalera{
  position:relative;height:2px;margin-top:40px;border-radius:2px;
  background:var(--linea);overflow:hidden;
}
.escalera::after{
  content:"";position:absolute;inset:0;background:var(--sereno);
  transform-origin:left;
  transition:transform 800ms var(--ease-out);
}
.js .escalera::after{transform:scaleX(0)}
.js .escalera[data-visible="true"]::after{transform:none}

.fases{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:22px;margin-top:22px;
  list-style:none;padding:0;
}
.fase{
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);
  padding:30px 28px;display:flex;flex-direction:column;
}
.fase .num{
  font-family:var(--mono);font-size:13px;color:var(--sereno-texto);letter-spacing:.06em;
}
.fase h3{margin:12px 0 10px}
.fase p{font-size:15.5px}
/* Se eliminaron .plazo y .esfuerzo (2-sep-2026): las fases ya no publican
   duración ni dedicación estimada del cliente, porque dependen de cada caso.
   Ver el comentario en la sección del método en index.html. */
.cierre{
  margin-top:36px;padding-top:24px;border-top:1px solid var(--linea);
  max-width:var(--texto-ancho);font-size:16px;color:var(--acero-texto);
}

/* ================= 4 · por qué ARCA ================= */
.comparacion{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:22px;margin-top:40px;
}
.parcial{
  border:1px solid var(--linea);border-radius:var(--radio);
  padding:28px;background:var(--blanco);
}
.parcial h3{
  font-family:var(--sans);font-size:16px;font-weight:700;
  color:var(--acero-texto);letter-spacing:.01em;margin-bottom:12px;
}
.parcial p{font-size:15px;color:var(--acero-texto)}
.nuestro{
  background:var(--grafito);background-image:var(--trama);background-size:18px 18px;
  border-color:var(--grafito);color:var(--sobre-oscuro);
}
.nuestro h3{color:#fff;font-family:var(--display);font-size:21px;font-weight:600}
.nuestro p{color:var(--sobre-oscuro-2);font-size:15.5px}

.compromisos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:28px;margin-top:56px;padding-top:44px;border-top:1px solid var(--linea);
}
.compromiso{display:flex;gap:16px;align-items:flex-start}
.compromiso>svg{flex:none;margin-top:2px;color:var(--grafito)}
.compromiso h3{font-family:var(--sans);font-size:16px;font-weight:700;margin-bottom:6px}
.compromiso p{font-size:15px}

/* ================= 5 · el equipo ================= */
.equipo{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:26px;margin-top:44px;
}
.socio{
  background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--radio);padding:30px;
}
.socio-cab{display:flex;align-items:center;gap:18px;margin-bottom:18px}
/* Marcador mientras no hay fotos (§ 7, pendiente). Al reemplazarlo por un
   <img>, mantener el mismo tamaño y añadir texto alternativo. */
/* Retrato de cada socio. Ya no es un <span> con iniciales sino un <img>: se
   quitaron las propiedades de tipografía y centrado que servían para las
   iniciales y no hacen nada sobre una imagen.
   El borde no es adorno: los dos retratos terminan en un fondo muy claro, y sin
   él el círculo se disolvería contra el blanco de la sección. */
.retrato{
  width:76px;height:76px;border-radius:50%;flex:none;
  object-fit:cover;
  background:var(--niebla);border:1px solid var(--linea);
}
.socio h3{margin-bottom:4px;font-size:21px}
.socio .rol{font-size:14px;color:var(--acero-texto);line-height:1.45}
.socio p{font-size:15.5px}
.socio .marca{
  display:inline-block;margin-top:18px;
  font-family:var(--display);font-style:italic;font-size:15px;color:var(--sereno-texto);
}

/* ================= 6 · publicaciones ================= */
.posts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:20px;margin-top:40px;
}
.post{
  display:block;background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--radio);padding:26px;text-decoration:none;color:inherit;
  transition:border-color 180ms ease,transform 160ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .post:hover{border-color:var(--bruma);transform:translateY(-2px)}
}
.post:active{transform:scale(.99)}
.post .fecha{font-family:var(--mono);font-size:12.5px;color:var(--acero-texto)}
.post h3{font-size:18px;margin:10px 0 8px}
.post .mas{font-size:14px;font-weight:600;color:var(--sereno-texto)}

/* estado vacío mientras no hay artículos publicados (§ 7) */
.vacio{
  margin-top:36px;padding:30px 32px;
  border:1px dashed var(--linea);border-radius:var(--radio);
  background:var(--blanco);max-width:var(--texto-ancho);
}
.vacio p{font-size:15.5px;color:var(--acero-texto)}
.vacio .btn{margin-top:18px}

/* ================= 7 · contacto ================= */
.contacto-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media (max-width:860px){.contacto-grid{grid-template-columns:1fr;gap:40px}}

.contacto-lista{list-style:none;margin:30px 0 0;padding:0}
.contacto-lista li{
  padding:14px 0;border-bottom:1px solid var(--borde-oscuro);font-size:15px;
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;
}
.contacto-lista li:last-child{border-bottom:none}
.contacto-lista .etq{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bruma);min-width:88px;
}
.contacto-lista a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.contacto-lista a:hover{color:var(--bruma)}

.form{
  background:rgba(255,255,255,.04);border:1px solid var(--borde-oscuro);
  border-radius:var(--radio);padding:30px 28px;
}
.form-campo{margin-bottom:18px}
.form label{display:block;font-size:14px;font-weight:600;color:var(--sobre-oscuro);margin-bottom:7px}
.form label .opcional{font-weight:400;color:var(--sobre-oscuro-3)}
.form input,.form textarea{
  width:100%;font-family:var(--sans);font-size:16px;color:var(--texto);
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);
  padding:12px 14px;
}
/* el trazo va sobre el grafito, no sobre el blanco del campo: 6.9:1 */
.form input:focus-visible,.form textarea:focus-visible{
  outline:2.5px solid var(--bruma);outline-offset:2px;border-color:var(--bruma);
}
.form textarea{min-height:112px;resize:vertical}
.form .btn{width:100%;margin-top:4px}
.form-nota{font-size:13.5px;color:var(--sobre-oscuro-3);margin:18px 0 0;max-width:52ch}
.form-nota a{color:var(--bruma);text-underline-offset:3px}

.form-estado{margin:0;font-size:15.5px}
.form-estado:empty{display:none}
.form-estado[data-estado="ok"]{
  border-left:3px solid var(--verde);background:rgba(255,255,255,.05);
  padding:22px 24px;border-radius:0 var(--radio) var(--radio) 0;color:#fff;
}
.form-estado[data-estado="error"]{
  border-left:3px solid var(--rojo);background:rgba(255,255,255,.05);
  padding:18px 22px;margin-top:18px;border-radius:0 var(--radio) var(--radio) 0;
  color:var(--sobre-oscuro);font-size:14.5px;
}
/* Trampa antispam del formulario (el campo bot-field que declara
   data-netlify-honeypot). display:none la saca del árbol de accesibilidad además
   de ocultarla, así que ni se ve, ni recibe foco, ni la anuncia un lector de
   pantalla: existe solo para los robots que rellenan todos los campos.
   Es la única defensa antispam que tiene el formulario, y a propósito — un
   captcha de terceros cargaría rastreadores y rompería la regla 6.5. */
.gotcha{display:none}

/* ================= gracias =================
   Confirmación del formulario para quien navega sin JavaScript. Con JS nadie
   llega aquí: la confirmación se muestra en la misma página. Es una página de
   cierre, así que respira más que el resto y no ofrece nada que leer. */
.gracias{padding:clamp(64px,12vw,132px) 0 clamp(72px,10vw,120px);background:var(--niebla)}
.gracias .wrap{max-width:620px}
.gracias h1{
  font-family:var(--display);font-weight:600;
  font-size:clamp(30px,5vw,44px);line-height:1.14;letter-spacing:-.015em;
  color:var(--grafito);margin:0 0 14px;
}
.gracias .bajada{font-size:clamp(17px,2vw,19px);color:var(--acero-texto);margin:0 0 28px;max-width:44ch}
.gracias-marca{color:var(--sereno);margin:0 0 28px}
.gracias-marca svg{width:56px;height:56px}
.gracias-nota{color:var(--acero-texto);margin:0 0 32px}
.gracias-acciones{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 40px}
.gracias-privacidad{
  font-size:14px;color:var(--acero-texto);
  border-top:1px solid var(--linea);padding-top:20px;margin:0;max-width:52ch;
}

/* El visto bueno se dibuja: mismo gesto que la llave y el candado del bloque 04.
   El largo lo afina el script de la página, porque un círculo y una marca de
   verificación miden muy distinto.

   A diferencia de los emblemas de la portada, aquí NO se cuelga de la clase .js:
   esa clase la pone un script y, hasta que corre, el trazo se pinta completo —
   se veía el final antes del principio. Los emblemas de la portada no sufren eso
   porque solo animan al entrar en pantalla, mucho después. Este anima al cargar,
   así que el estado inicial tiene que venir del CSS y estar puesto en el primer
   cuadro. El script queda como mejora: ajusta el largo exacto, no habilita nada. */
.gracias-marca .trazo{
  stroke-dasharray:var(--largo,200);stroke-dashoffset:var(--largo,200);
  animation:trazar 760ms var(--ease-out) forwards;
}
.gracias-marca .trazo:last-child{animation-delay:340ms}
@media (prefers-reduced-motion: reduce){
  .gracias-marca .trazo{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
}

/* ================= pie ================= */
footer{background:var(--blanco);border-top:1px solid var(--linea);padding:44px 0}
.pie{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between}
.pie .n1{font-size:18px}
.pie .n2{font-size:7.5px}
.pie-links{display:flex;flex-wrap:wrap;gap:12px 24px;font-size:14px;list-style:none;margin:0;padding:0}
.pie-links a{color:var(--texto);text-decoration:none}
.pie-links a:hover{color:var(--sereno-texto);text-decoration:underline;text-underline-offset:3px}
.pie-legal{
  width:100%;font-size:13.5px;color:var(--acero-texto);
  border-top:1px solid var(--linea);padding-top:22px;margin-top:6px;
}

/* ================= aparición suave =================
   Solo se activa si hay JavaScript: sin él, todo queda visible.
   450ms y no 600: el bloque tiene que estar ahí cuando el ojo llega, no
   terminando de llegar. El escalonado corto da cascada sin hacerse esperar. */
.js .reveal{
  opacity:0;transform:translateY(14px);
  transition:opacity 450ms var(--ease-out),transform 450ms var(--ease-out);
}
.js .reveal.visible{opacity:1;transform:none}
.js .reveal:nth-child(2){transition-delay:70ms}
.js .reveal:nth-child(3){transition-delay:140ms}

/* regla 6.7 · prefers-reduced-motion respetado.
   Movimiento reducido no es cero animación: se conservan opacidad y color,
   que ayudan a entender qué cambió; se elimina todo desplazamiento. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-property:opacity,color,background-color,border-color,outline-color !important;
    transition-duration:160ms !important;transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }
  .btn:hover,.btn:active,.post:hover,.post:active,.menu>summary:active{transform:none}
  .js .reveal{opacity:1;transform:none}
}

/* ================= sistema editorial · solo la portada =================
   Todo va bajo .portada para no tocar /glosario ni /privacidad, que comparten
   esta hoja. La idea: dejar de encajonar. Cuando todo tiene borde, el borde no
   significa nada; cuando lo tiene una sola cosa, significa «esta». */

/* --- apertura de sección: número + filete --- */
.apertura{display:flex;align-items:center;gap:18px;margin-bottom:26px}
.apertura .filete{margin-bottom:0;flex:1}
.num-sec{
  flex:none;font-family:var(--mono);font-size:12.5px;font-weight:500;
  letter-spacing:.14em;color:var(--acero-texto);
  font-variant-numeric:tabular-nums;
}
.oscuro .num-sec{color:var(--sobre-oscuro-3)}

/* --- la escala sube: los títulos dejan de medir todos lo mismo --- */
.portada h2{font-size:clamp(32px,4.6vw,50px);letter-spacing:-.015em}
.portada .bajada{max-width:62ch}

/* --- las cifras dejan de ser tarjetas y pasan a ser el dato que son --- */
.portada .cifras{gap:clamp(24px,4vw,44px);margin:44px 0 0}
.portada .cifra{
  background:none;border:none;border-radius:0;padding:18px 0 0;
  border-top:1px solid var(--grafito);
}
.portada .cifra b{
  font-size:clamp(40px,5.2vw,64px);line-height:1;letter-spacing:-.025em;
}
.portada .cifra span{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--acero-texto);margin-top:12px;
}

/* El peso va DEBAJO de la UTM, no en su lugar: la cifra legal manda y el
   equivalente ayuda a dimensionarla. Con su fecha, porque el SII reajusta
   la UTM cada mes y una cifra sin fecha envejece mal. */
.portada .cifra .pesos{
  display:block;font-family:var(--sans);font-size:14.5px;
  letter-spacing:0;text-transform:none;color:var(--acero-texto);
  margin-top:7px;font-variant-numeric:tabular-nums;
}
.nota-utm{
  margin:18px 0 0;font-family:var(--mono);font-size:12px;line-height:1.6;
  color:var(--acero-texto);max-width:56ch;
}

/* --- las tres situaciones concretas ---
   Cada una es una tarjeta con su número, y las tres alinean título y texto
   entre sí gracias a las filas de la grilla: antes se desalineaban porque un
   título de dos líneas empujaba solo a su columna. */
.escenarios{margin-top:clamp(44px,6vw,64px);padding-top:clamp(30px,4vw,40px);border-top:1px solid var(--linea)}
.escenarios-titulo{
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sereno-texto);margin:0 0 26px;
}
.escenarios-lista{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(18px,2.5vw,26px);
}
.escenario{
  display:grid;grid-template-rows:auto auto 1fr;   /* las tres filas se alinean */
  background:var(--niebla);border-radius:var(--radio);
  padding:26px 24px 28px;position:relative;overflow:hidden;
  transition:transform 260ms var(--ease-out),box-shadow 260ms var(--ease-out);
}
/* una barra de color que crece desde la izquierda al entrar en pantalla */
.escenario::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--sereno);transform:scaleY(0);transform-origin:top;
  transition:transform 520ms var(--ease-out);
}
.js .escenario.visible::before{transform:none}
.escenario-num{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;
  color:var(--sereno-texto);display:block;margin-bottom:14px;
  font-variant-numeric:tabular-nums;
}
.escenario h4{
  font-family:var(--display);font-size:19px;font-weight:600;color:var(--grafito);
  margin:0 0 10px;line-height:1.25;text-wrap:balance;
}
.escenario p{font-size:15px;line-height:1.62;margin:0}
@media (hover:hover) and (pointer:fine){
  .escenario:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(51,57,62,.09)}
}

/* --- el emblema: la llave y el candado se dibujan solos ---
   El trazo entra como si lo estuvieran dibujando. Se ve una vez al entrar en
   pantalla; después queda quieto. Es la metáfora de la marca, por fin dibujada. */
.emblema{display:flex;align-items:center;gap:14px;margin-top:20px;color:var(--sereno)}
/* cada emblema ocupa lo que su dibujo mide: la llave es ancha, el candado
   es compacto. Con width:auto el viewBox manda y la etiqueta queda pegada. */
.emblema svg{height:46px;width:auto;flex:none;overflow:visible}
.emblema .marca{margin-top:0}
.js .emblema .trazo{
  stroke-dasharray:var(--largo,120);stroke-dashoffset:var(--largo,120);
}
.js .socio.visible .emblema .trazo{
  animation:trazar 900ms var(--ease-out) forwards;
}
.js .socio.visible .emblema .trazo:nth-child(2){animation-delay:120ms}
.js .socio.visible .emblema .trazo:nth-child(3){animation-delay:200ms}
.js .socio.visible .emblema .trazo:nth-child(4){animation-delay:340ms}
.js .socio.visible .emblema .trazo:nth-child(5){animation-delay:420ms}
@keyframes trazar{to{stroke-dashoffset:0}}
.emblema .relleno{stroke:var(--grafito)}
.escenarios-cierre{
  margin:clamp(26px,3.5vw,36px) 0 0;font-size:16px;color:var(--acero-texto);
}

/* --- la banda del glosario: la prueba que sí se puede mostrar --- */
.prueba{padding:clamp(44px,6vw,64px) 0;background:var(--grafito);
  background-image:var(--trama);background-size:20px 20px;color:var(--sobre-oscuro)}
.prueba-caja{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,4vw,48px)}
.prueba-cifra{
  font-family:var(--display);font-weight:700;font-size:clamp(64px,9vw,110px);
  line-height:.9;letter-spacing:-.03em;color:#fff;margin:0;flex:none;
  font-variant-numeric:tabular-nums;
}
.prueba-texto{flex:1 1 300px;display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.prueba-texto p{margin:0;flex:1 1 260px;font-size:18px;line-height:1.5;color:var(--sobre-oscuro-2);max-width:40ch}
.prueba .btn--linea{background:transparent;border-color:rgba(255,255,255,.45);color:#fff;flex:none}
@media (hover:hover) and (pointer:fine){
  .prueba .btn--linea:hover{border-color:var(--bruma);background:transparent;color:var(--bruma)}
}

/* --- preguntas frecuentes: <details> nativo, funciona sin JavaScript --- */
.faq{margin-top:36px;border-top:1px solid var(--linea)}
.faq-item{border-bottom:1px solid var(--linea)}
.faq-item>summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;gap:16px;
  padding:20px 0;
  font-family:var(--display);font-size:19px;font-weight:600;color:var(--grafito);
  line-height:1.3;
}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-item>summary::after{
  content:"";flex:none;margin:6px 0 0 auto;
  width:11px;height:11px;
  border-right:1.75px solid var(--sereno);border-bottom:1.75px solid var(--sereno);
  transform:rotate(45deg);
  transition:transform 240ms var(--ease-out);
}
.faq-item[open]>summary::after{transform:rotate(-135deg)}
.faq-item>p{margin:0;padding:0 40px 24px 0;font-size:15.5px;line-height:1.65;max-width:70ch}
@media (hover:hover) and (pointer:fine){
  .faq-item>summary:hover{color:var(--sereno-texto)}
}

/* --- la nota serena sale del recuadro y se vuelve el respiro de la página.
       Besley itálica estaba cargada y no se usaba en ninguna parte. --- */
.portada .aviso{
  border:none;background:none;padding:0;max-width:none;border-radius:0;
  margin-top:clamp(48px,6vw,72px);padding-top:clamp(32px,4vw,44px);
  border-top:1px solid var(--linea);
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(24px,4vw,56px);align-items:start;
}
.aviso-cita{
  font-family:var(--display);font-style:italic;font-weight:500;
  font-size:clamp(27px,3.4vw,40px);line-height:1.14;letter-spacing:-.01em;
  color:var(--grafito);margin:0;text-wrap:balance;
}
.portada .aviso p:not(.aviso-cita){font-size:16px;line-height:1.65;margin:0}
@media (max-width:820px){
  .portada .aviso{grid-template-columns:1fr;gap:20px}
}

/* --- las fases: columnas, no tarjetas. El riel de arriba ya las une --- */
.portada .fase{
  background:none;border:none;border-radius:0;padding:24px 0 0;
}
.portada .fase .num{letter-spacing:.12em;text-transform:uppercase;font-size:12px}
.portada .fase h3{font-size:22px;margin:10px 0 8px}

/* --- El método sobre grafito: es la sección que más pesa y ahora lo parece.
   Cada color se recalcula contra el fondo oscuro; --sereno-texto está pensado
   para blanco y sobre grafito no cumple AA, así que aquí manda --bruma. --- */
.portada #metodo .fase .num{color:var(--bruma)}
.portada #metodo .fase p{color:var(--sobre-oscuro-2)}
.portada #metodo .cierre{color:var(--sobre-oscuro-3);border-top-color:var(--borde-oscuro)}
.portada #metodo .escalera{background:rgba(255,255,255,.18)}
.portada #metodo .escalera::after{background:var(--bruma)}
/* el número de fase entra como marca de agua a escala: da jerarquía sin ruido */
.portada #metodo .fase{position:relative}
.portada #metodo .fase h3{font-size:26px}

/* --- la comparación: los dos enfoques parciales son texto; la caja se
       reserva para la única que debe destacar --- */
.portada .parcial{
  background:none;border:none;border-radius:0;padding:24px 0 0;
  border-top:1px solid var(--grafito);
}
.portada .nuestro{
  border-top:1px solid var(--grafito);
  background:var(--grafito);background-image:var(--trama);background-size:18px 18px;
  padding:28px;border-radius:var(--radio);
}

/* --- la banda: el único respiro de la página ---
   La foto es cálida y la paleta de la marca es fría, así que se desatura y se
   enfría con una capa de grafito en multiply. Queda como textura y atmósfera,
   no como fotografía literal — y de paso lo que hay en la pantalla se vuelve
   ilegible, que en un sitio de privacidad no es un detalle menor. */
.banda{
  position:relative;margin:0;background:var(--grafito);overflow:hidden;
  border-top:1px solid var(--grafito);
}
/* La foto es cálida y algo oscura; la paleta de la marca es fría. Se desatura
   para que converse con ella y se sube el brillo, sin apagarla: el error de la
   versión anterior fue cargar tanto el tratamiento (saturación .3, brillo .86 y
   un velo al 62 % en multiply) que la imagen quedaba en barro. El archivo ya
   viene recortado a 2.25:1, así que aquí se recorta poco. */
.banda img{
  display:block;width:100%;
  height:clamp(250px,32vw,420px);
  object-fit:cover;object-position:center 48%;
  filter:saturate(.5) contrast(1.02) brightness(1.16);
}
.banda::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(51,57,62,.10),rgba(51,57,62,.34));
  mix-blend-mode:multiply;
}
/* El crédito va sobre una fotografía, no sobre un color plano: su contraste
   depende de qué haya detrás. El velo anterior era diagonal y solo cubría la
   esquina —servía con una foto de esquina casi negra— y al cambiar la imagen la
   mitad izquierda del texto quedó sobre papel claro, ilegible. Este es un velo
   de borde inferior a todo el ancho: el texto se apoya abajo, donde el velo
   siempre está en su punto más opaco, así que el contraste ya no depende de la
   foto ni del recorte. Si se cambia la imagen otra vez, esto no se rompe. */
.banda figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  text-align:right;
  padding:52px 22px 13px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--sobre-oscuro-2);
  background:linear-gradient(180deg,
    rgba(16,19,22,0) 0%,
    rgba(16,19,22,.46) 52%,
    rgba(16,19,22,.84) 100%);
}
/* Una sola regla para móvil. Antes eran dos bloques que se pisaban, y el segundo
   despegaba el crédito de la esquina, con lo que el velo dejaba de fundirse con
   el borde y se veía como una caja gris con filos. */
@media (max-width:560px){
  .banda figcaption{padding:40px 16px 11px;font-size:10px}
}

/* --- socios y publicaciones: reglas en vez de cajas --- */
.portada .socio{
  background:none;border:none;border-radius:0;padding:26px 0 0;
  border-top:1px solid var(--grafito);
}
.portada .retrato{width:92px;height:92px}
.portada .socio h3{font-size:23px}
/* Publicaciones no tiene artículos todavía. En vez de reservar el alto de una
   sección completa para una frase, el estado vacío se compacta en una línea:
   la nota y el botón conviven. Cuando existan los artículos, la grilla .posts
   ocupa este lugar y la sección recupera su peso. */
.portada #publicaciones{padding-top:clamp(52px,6.5vw,72px);padding-bottom:clamp(52px,6.5vw,72px)}
.portada .vacio{
  background:none;border:none;border-top:1px solid var(--linea);border-radius:0;
  padding:22px 0 0;margin-top:30px;max-width:none;
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;
}
.portada .vacio p{margin:0;flex:1 1 260px}
.portada .vacio .btn{margin-top:0;flex:none}

/* ================= glosario =================
   Reutiliza los tokens, el filete, .oscuro, .btn y la cabecera del sitio.
   Solo añade lo que la página necesita de más. */

.g-hero{padding:clamp(60px,8vw,88px) 0 clamp(48px,6vw,68px)}
.g-hero h1{font-size:clamp(31px,5vw,52px);font-weight:600;line-height:1.1;max-width:17ch}
.g-hero .bajada{max-width:60ch;margin-top:20px}

/* --- barra de control: se queda pegada bajo la cabecera --- */
.g-controles{
  position:sticky;top:var(--alto-cabecera);z-index:40;
  background:var(--blanco);border-bottom:1px solid var(--linea);
  padding:18px 0 15px;
}
.g-busca{position:relative;display:flex;align-items:center}
.g-busca .lupa{
  position:absolute;left:18px;color:var(--acero-texto);pointer-events:none;flex:none;
}
.g-busca input{
  width:100%;font-family:var(--sans);font-size:17px;color:var(--texto);
  background:var(--blanco);border:1px solid var(--acero);border-radius:var(--radio);
  padding:15px 52px;
  transition:border-color 180ms ease;
}
.g-busca input::placeholder{color:var(--acero-texto);opacity:1}
.g-busca input::-webkit-search-cancel-button{display:none}
.g-busca input:focus-visible{outline:2.5px solid var(--sereno);outline-offset:2px;border-color:var(--sereno)}
.g-limpiar{
  position:absolute;right:10px;display:none;
  width:34px;height:34px;align-items:center;justify-content:center;
  border:none;background:none;cursor:pointer;color:var(--acero-texto);border-radius:4px;
}
.g-limpiar[data-visible="true"]{display:inline-flex}
.g-limpiar:hover{color:var(--grafito);background:var(--niebla)}

/* --- chips de categoría --- */
.g-chips{
  display:flex;gap:8px;margin:15px 0 0;padding:0 0 2px;list-style:none;
  overflow-x:auto;scrollbar-width:thin;
}
@media (min-width:760px){.g-chips{flex-wrap:wrap;overflow:visible}}
/* position:relative es obligatorio: el <span class="skip-visual"> de dentro es
   absoluto y, sin esto, su bloque contenedor pasa a ser .g-controles (sticky).
   Escaparía del overflow-x del carrusel y estiraría el ancho del documento. */
.g-chip{
  position:relative;
  flex:none;display:inline-flex;align-items:baseline;gap:7px;
  font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--texto);
  background:var(--blanco);border:1px solid var(--acero);border-radius:999px;
  padding:7px 14px;cursor:pointer;white-space:nowrap;
  transition:background 160ms ease,color 160ms ease,border-color 160ms ease,transform 160ms var(--ease-out);
}
.g-chip .num{font-family:var(--mono);font-size:11.5px;color:var(--acero-texto);font-variant-numeric:tabular-nums}
/* El chip activo va sobre --sereno-texto y no sobre --sereno. Con --sereno, el
   blanco daba 4.60:1: pasa AA, pero sin margen, y el contador en --bruma daba
   2.71:1, o sea no pasaba. Aquí la etiqueta queda en 5.78:1 y el contador —que
   también tiene que ser blanco, porque a 11,5 px ningún azul claro llega a
   4.5:1 sobre este fondo— se distingue por el tamaño y por la mono, no por el
   color. De paso, un estado pulsado más oscuro es lo que uno espera. */
.g-chip[aria-pressed="true"]{background:var(--sereno-texto);border-color:var(--sereno-texto);color:#fff}
.g-chip[aria-pressed="true"] .num{color:#fff}
.g-chip:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .g-chip:hover{border-color:var(--sereno);background:var(--niebla)}
  .g-chip[aria-pressed="true"]:hover{background:var(--sereno-hover);border-color:var(--sereno-hover)}
}

.g-conteo{
  margin:14px 0 0;font-size:13.5px;color:var(--acero-texto);
  font-variant-numeric:tabular-nums;
}

/* --- grilla de tarjetas --- */
.g-lista{padding:clamp(36px,5vw,52px) 0 clamp(48px,7vw,72px)}
.g-grilla{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));
  gap:18px;align-items:start;list-style:none;padding:0;margin:0;
}
.g-tarjeta{
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);
  scroll-margin-top:var(--g-offset,180px);
  overflow-wrap:break-word;min-width:0;
  transition:border-color 200ms ease,box-shadow 200ms ease;
}
.g-tarjeta[data-abierta="true"]{border-color:var(--bruma);box-shadow:0 6px 24px rgba(51,57,62,.07)}
.g-tarjeta[data-destacada="true"]{border-color:var(--sereno)}

.g-cab{margin:0;font-family:var(--sans)}
.g-toggle{
  width:100%;display:flex;align-items:flex-start;gap:14px;
  background:none;border:none;cursor:pointer;text-align:left;
  padding:22px 24px 0;font-family:var(--display);
}
.g-nombre{
  flex:1;font-family:var(--display);font-size:20px;font-weight:600;
  color:var(--grafito);line-height:1.25;text-wrap:balance;
}
.g-flecha{
  flex:none;margin-top:5px;color:var(--sereno);
  transition:transform 260ms var(--ease-out);
}
.g-tarjeta[data-abierta="true"] .g-flecha{transform:rotate(180deg)}

.g-simple{
  margin:8px 0 0;padding:0 24px 22px;font-size:15.5px;line-height:1.6;cursor:pointer;
}

/* --- el panel que se despliega: sin saltos --- */
.g-panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows 280ms var(--ease-out);
}
.g-tarjeta[data-abierta="true"] .g-panel{grid-template-rows:1fr}
.g-panel-int{overflow:hidden;min-height:0}
.g-panel-caja{border-top:1px solid var(--linea);padding:22px 24px 24px}

.g-etiqueta{
  margin:0 0 8px;font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sereno-texto);
}
.g-bloque p{margin:0;font-size:15px;line-height:1.62}
/* la referencia normativa, en la tipografía de los datos.
   Sin nowrap: «(Arts. 34 ter letra g y 34 quáter letra e)» no cabe en una
   pantalla de 320px y desbordaría la tarjeta. Que parta de línea. */
.g-art{
  font-family:var(--mono);font-size:.87em;color:var(--sereno-texto);
  letter-spacing:-.01em;
}

.g-pie-tarjeta{
  display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center;justify-content:space-between;
  margin-top:20px;padding-top:16px;border-top:1px solid var(--linea);
}
.g-ver{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:baseline}
.g-ver-etq{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--acero-texto);
}
.g-ver a{
  font-size:14px;font-weight:600;color:var(--sereno-texto);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
}
.g-ver a:hover{color:var(--grafito)}
.g-copiar{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  font-family:var(--sans);font-size:13px;font-weight:600;color:var(--acero-texto);
  background:none;border:1px solid var(--linea);border-radius:var(--radio);
  padding:7px 12px;cursor:pointer;
  transition:color 160ms ease,border-color 160ms ease,transform 160ms var(--ease-out);
}
.g-copiar:hover{color:var(--sereno-texto);border-color:var(--bruma)}
.g-copiar:active{transform:scale(.97)}
.g-copiar[data-copiado="true"]{color:var(--verde);border-color:var(--verde)}

mark{background:#D9E7F0;color:inherit;border-radius:2px;padding:0 1px}

/* --- estados --- */
.g-aviso{
  max-width:60ch;margin:0 auto;padding:44px 32px;text-align:center;
  border:1px dashed var(--linea);border-radius:var(--radio);background:var(--blanco);
}
.g-aviso h2{font-size:22px;margin-bottom:10px}
.g-aviso p{font-size:15.5px;color:var(--acero-texto)}
.g-aviso .btn{margin-top:18px}
.g-aviso--error{border-style:solid;border-left:3px solid var(--rojo);text-align:left}

/* --- cierre y nota legal --- */
.g-cierre{padding:clamp(56px,7vw,76px) 0}
.g-cierre h2{max-width:20ch}
.g-cierre .btn{margin-top:26px}
.g-legal{
  padding:36px 0 44px;font-size:13.5px;line-height:1.6;color:var(--acero-texto);
  max-width:78ch;
}
.g-legal strong{color:var(--texto);font-weight:600}

@media (max-width:640px){
  .g-toggle{padding:20px 18px 0}
  .g-simple{padding:0 18px 20px}
  .g-panel-caja{padding:20px 18px 22px}
  .g-nombre{font-size:18.5px}
  .g-pie-tarjeta{align-items:flex-start}
}

/* ================= página interior · privacidad ================= */
.legal{padding:clamp(56px,8vw,76px) 0 clamp(72px,10vw,96px)}
.legal h1{font-size:clamp(30px,4.5vw,42px);font-weight:600;margin-bottom:10px}
.legal .sub{color:var(--acero-texto);font-size:15.5px;margin-bottom:14px;max-width:var(--texto-ancho)}
.legal .entradilla{font-size:18px;line-height:1.62;max-width:var(--texto-ancho);margin-top:32px}
.legal h2{font-size:22px;margin:48px 0 14px;font-weight:600}
.legal h2::before{
  content:"";display:block;height:2.5px;width:44px;background:var(--sereno);margin-bottom:14px;
}
.legal h3{font-size:16px;font-family:var(--sans);font-weight:700;margin:26px 0 6px}
.legal p,.legal li{max-width:var(--texto-ancho)}
.legal ul{padding-left:22px;margin:0 0 1rem}
.legal li{margin-bottom:10px}
.legal strong{color:var(--grafito)}
.legal .marca-tiempo{
  font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--acero-texto);
  border:1px solid var(--linea);border-radius:var(--radio);padding:16px 20px;
  background:var(--niebla);max-width:var(--texto-ancho);margin:28px 0 0;
}
.legal .volver{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:26px;
  font-size:14px;font-weight:600;color:var(--sereno-texto);text-decoration:none;
}
.legal .volver:hover{text-decoration:underline;text-underline-offset:3px}
/* marcadores por completar antes de publicar (§ política, encabezado) */
.pendiente{
  font-family:var(--mono);font-size:.86em;font-style:normal;
  background:#FBF3F1;color:#7E4437;border:1px solid #EBD6D0;
  padding:1px 6px;border-radius:3px;white-space:nowrap;
}

@media print{
  .head,.skip,.legal .volver,footer .pie-links{display:none}
  body{font-size:11.5pt;color:#000}
  .legal{padding:0}
  .legal p,.legal li{max-width:none}
  .pendiente{background:none;border:1px solid #999;color:#000}
}