/* elsilencio — estilos compartidos. Tokens tomados tal cual de la identidad visual v1 (§12). */

@font-face{font-family:"Source Serif 4";src:url("/fonts/SourceSerif4-latin-wght.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("/fonts/SourceSans3-latin-wght.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}

:root{
  /* color */
  --tinta:#15181B; --tinta-suave:#3A4045; --gris:#6E7479;
  --linea:#E2E6E4; --fondo:#F4F6F5; --papel:#FFFFFF;
  --verde:#4F7A6A; --verde-texto:#3D6154; --verde-claro:#8CA99C;
  --ladrillo:#9E4F3F; --sobre-oscuro:#AFC0B7;

  /* tipografía */
  --serif:"Source Serif 4", Cambria, Georgia, serif;
  --sans:"Source Sans 3", "Segoe UI", system-ui, Arial, sans-serif;
  --t-display:34px; --t-titulo:26px; --t-subtitulo:19px;
  --t-cuerpo-g:16px; --t-cuerpo:14px; --t-menor:12px;
  --lh-titular:1.2; --lh-cuerpo:1.6;
  --peso-normal:400; --peso-enfasis:600;

  /* espaciado */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px;
  --e6:32px; --e7:48px; --e8:64px; --e9:96px;
  --ancho-lectura:680px;

  /* forma */
  --r1:4px; --r2:8px; --rp:999px;
  --borde:1px solid var(--linea);

  /* movimiento */
  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms;
  --ease:cubic-bezier(.2,0,.2,1);

  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta-suave);font:var(--peso-normal) var(--t-cuerpo-g)/var(--lh-cuerpo) var(--sans);-webkit-font-smoothing:antialiased}
::selection{background:var(--verde-claro);color:var(--tinta)}

h1,h2,h3{font-family:var(--serif);font-weight:var(--peso-enfasis);color:var(--tinta);margin:0;text-wrap:balance}
h1{font-size:var(--t-display);line-height:1.15}
h2{font-size:var(--t-titulo);line-height:var(--lh-titular)}
h3{font-size:var(--t-subtitulo);line-height:1.3}
p{margin:0}
p+p{margin-top:var(--e4)}

a,button{-webkit-tap-highlight-color:transparent}
a{color:var(--verde-texto);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;touch-action:manipulation}
@media (hover:hover) and (pointer:fine){a:hover{text-decoration-thickness:2px}}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--verde);outline-offset:2px}

.saltar{position:absolute;left:var(--e4);top:calc(-1 * var(--e9));z-index:10;background:var(--tinta);color:var(--papel);padding:var(--e3) var(--e4);border-radius:var(--r1);text-decoration:none}
.saltar:focus{top:var(--e3)}
main:focus{outline:none}

.contenedor{max-width:1040px;margin-inline:auto;padding-inline:var(--e5)}
.columna{max-width:var(--ancho-lectura)}

/* Logotipo: serif minúscula con el punto verde apoyado en la línea de base */
.marca{display:inline-flex;align-items:baseline;min-height:44px;font:var(--peso-enfasis) var(--t-titulo)/1 var(--serif);color:var(--tinta);text-decoration:none}
.marca .punto{display:inline-block;width:.24em;height:.24em;margin-left:.05em;border-radius:var(--rp);background:var(--verde)}

/* Selector de idioma, como en b3acon.tech: solo el código del otro idioma, discreto.
   En la portada se superpone arriba a la derecha y no ocupa alto; en las páginas interiores va al final de la cabecera. */
.idioma{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 var(--e2);font-size:var(--t-cuerpo);font-weight:var(--peso-enfasis);letter-spacing:.04em;color:var(--gris);text-decoration:none;touch-action:manipulation;transition:color var(--dur-1) var(--ease)}
@media (hover:hover) and (pointer:fine){.idioma:hover{color:var(--tinta)}}
.idioma-barra{position:relative;height:0;z-index:1}
.idioma-barra .idioma{position:absolute;top:var(--e3);right:calc(var(--e5) - var(--e2))}
.idioma-cabecera{margin-left:auto;margin-right:calc(-1 * var(--e2))}

/* Cabecera */
.cabecera{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--e5);row-gap:0;padding-block:var(--e5)}
.descriptor{font-size:var(--t-cuerpo);color:var(--gris)}

/* Portada: el lockup con bajada es la pieza grande de la página.
   La bajada va en gris y mide lo mismo que el logotipo: tamaño y espaciado son proporciones fijas del logotipo, sin JavaScript. */
.portada{padding-block:var(--e9) var(--e8)}

.lockup{display:inline-flex;flex-direction:column;margin:0 0 var(--e7);font-size:clamp(58px, 4px + 12vw, 144px);font-weight:var(--peso-enfasis)}
.lockup-marca{display:block;font-size:1em;line-height:1;color:var(--tinta)}
.lockup-marca .punto{display:inline-block;width:.24em;height:.24em;margin-left:.05em;border-radius:var(--rp);background:var(--verde)}
.lockup-bajada{display:block;align-self:flex-start;margin:.5em -.51em 0 0;font-size:.229em;letter-spacing:.51em;line-height:1.2;font-weight:var(--peso-normal);color:var(--gris);white-space:nowrap}
/* "Everything else is noise" tiene otro largo: su espaciado propio para medir lo mismo que el logotipo */
.lockup-bajada:lang(en){margin-right:-.45em;letter-spacing:.45em}
.bajada{font-size:var(--t-subtitulo);line-height:1.5;color:var(--tinta)}
.portada .bajada+p{margin-top:var(--e5)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Secciones */
.seccion{padding-block:var(--e8)}
.seccion h2{margin-bottom:var(--e5)}
.pie-seccion{margin-top:var(--e5);font-size:var(--t-cuerpo);color:var(--gris)}

/* Título a la izquierda y texto a la derecha en pantallas anchas */
@media (min-width:860px){
  .dividida{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:var(--e7);align-items:start}
  .dividida h2{margin-bottom:0}
}

/* Afirmación central con perfil de ejemplo */
.afirmacion{background:var(--fondo);padding-block:var(--e9)}
.afirmacion h2{margin-bottom:var(--e5)}
.afirmacion-rejilla{display:grid;gap:var(--e7);align-items:center}
@media (min-width:860px){.afirmacion-rejilla{grid-template-columns:minmax(0,1fr) minmax(0,27rem)}}

.ejemplo{margin:0;max-width:27rem}
.vista{position:relative;display:grid;grid-template-columns:1fr 1fr;margin:0 0 var(--e4);padding:3px;border:var(--borde);border-radius:var(--r1);background:var(--papel)}
.vista input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.vista label{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 var(--e3);font-size:var(--t-cuerpo);text-align:center;color:var(--tinta-suave);cursor:pointer;touch-action:manipulation;transition:color var(--dur-2) var(--ease)}
.vista input:checked+label{color:var(--papel);font-weight:var(--peso-enfasis)}
.vista input:focus-visible+label{outline:2px solid var(--verde);outline-offset:2px;border-radius:var(--r1)}
@media (hover:hover) and (pointer:fine){.vista input:not(:checked)+label:hover{color:var(--tinta)}}
.vista-marca{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:2px;background:var(--tinta);transition:transform var(--dur-2) var(--ease)}
.vista:has(#vista-despues:checked) .vista-marca{transform:translateX(100%)}

.tarjeta{display:grid;grid-template-columns:112px minmax(0,1fr);gap:var(--e4);padding:var(--e4);background:var(--papel);border:var(--borde);border-radius:var(--r2)}
.retrato{width:112px;height:112px;border-radius:var(--r2);overflow:hidden}
.retrato svg{display:block;width:100%;height:100%}
.cabeza{transition:opacity var(--dur-3) var(--ease)}
.cabeza-nitida{opacity:0}
.ejemplo:has(#vista-despues:checked) .cabeza-nitida{opacity:1}
.ejemplo:has(#vista-despues:checked) .cabeza-difusa{opacity:0}
.tarjeta-nombre{font:var(--peso-enfasis) var(--t-subtitulo)/1.3 var(--serif);color:var(--tinta)}
.tarjeta-meta{margin-top:0;font-size:var(--t-cuerpo);color:var(--gris)}
.tarjeta-intencion{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--e1) var(--e3);margin:var(--e3) 0 0;font-size:var(--t-cuerpo);line-height:1.45}
.tarjeta-intencion div{display:contents}
.tarjeta-intencion dt{color:var(--gris)}
.tarjeta-intencion dd{margin:0;color:var(--tinta-suave)}
.tarjeta-cita{margin-top:var(--e3);font-size:var(--t-cuerpo);line-height:1.45;color:var(--tinta-suave)}
.tarjeta-cita span{display:block;font-size:var(--t-menor);color:var(--gris)}
.tarjeta-sello{margin-top:var(--e3);padding-top:var(--e2);border-top:var(--borde);font-size:var(--t-menor);color:var(--gris)}
.ejemplo figcaption{margin-top:var(--e3);font-size:var(--t-cuerpo);color:var(--gris)}

/* Verificar no es exponer: lista de garantías en la columna de texto */
.entrada-seccion{margin-top:var(--e3);color:var(--gris)}
.puntos{margin:var(--e5) 0 0;display:grid;gap:var(--e5);max-width:var(--ancho-lectura)}
.puntos dt{font-weight:var(--peso-enfasis);color:var(--tinta)}
.puntos dd{margin:var(--e1) 0 0}
@media (min-width:860px){.puntos{margin-top:0}}

/* Lo que vas a encontrar: filas de argumento */
.filas-argumento{list-style:none;margin:var(--e6) 0 0;padding:0}
.filas-argumento li{padding-block:var(--e5);border-top:var(--borde)}
.filas-argumento li:last-child{border-bottom:var(--borde)}
.filas-argumento h3{margin-bottom:var(--e2)}
.filas-argumento p{max-width:var(--ancho-lectura)}
@media (min-width:860px){
  .filas-argumento li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:var(--e7)}
  .filas-argumento h3{margin-bottom:0}
}

/* Lo que no vas a encontrar: superficie oscura */
.oscura{background:var(--tinta);color:var(--sobre-oscuro)}
.oscura h2,.oscura dt{color:var(--papel)}
.oscura .pie-seccion{color:var(--sobre-oscuro)}
.oscura ::selection{background:var(--sobre-oscuro);color:var(--tinta)}
.sin{margin:var(--e6) 0 0;display:grid;gap:var(--e5) var(--e6)}
@media (min-width:600px){.sin{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.sin{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sin>div{padding-top:var(--e4);border-top:1px solid var(--tinta-suave)}
.sin dt{font-weight:var(--peso-enfasis)}
.sin dd{margin:var(--e1) 0 0}

/* Si esto funciona, te vas */
.declaracion{padding-block:var(--e9)}
.declaracion h2{font-size:var(--t-display);line-height:1.15}

.cierre{border-top:var(--borde)}

/* Lista de espera */
.lista{margin-top:var(--e6)}
.celda{display:grid}
.campo,.listo{grid-area:1/1}
.campo label{display:block;margin-bottom:var(--e2);font-weight:var(--peso-enfasis);color:var(--tinta)}
.fila{display:flex;gap:var(--e3)}
.fila input{flex:1;min-width:0;height:48px;padding:0 var(--e4);font:var(--peso-normal) var(--t-cuerpo-g)/1 var(--sans);color:var(--tinta);background:var(--papel);border:var(--borde);border-radius:var(--r1);transition:border-color var(--dur-1) var(--ease)}
.fila input::placeholder{color:var(--gris);opacity:1}
@media (hover:hover) and (pointer:fine){.fila input:hover{border-color:var(--gris)}}
.fila input[aria-invalid="true"]{border-color:var(--ladrillo)}

.fila button{display:grid;flex:none;height:48px;padding:0 var(--e5);font:var(--peso-enfasis) var(--t-cuerpo-g)/1 var(--sans);color:var(--papel);background:var(--tinta);border:0;border-radius:var(--r1);cursor:pointer;touch-action:manipulation;transition:background-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
/* Hover más visible que el reposo: un anillo de 1 px en tinta, sin aclarar el botón (el foco usa el anillo verde de 2 px) */
@media (hover:hover) and (pointer:fine){.fila button:hover{outline:1px solid var(--tinta);outline-offset:2px}}
.fila button:active{transform:scale(.97)}
/* Las dos etiquetas ocupan la misma celda: el botón no cambia de ancho al pasar a "Guardando…" */
.boton-capa{grid-area:1/1;place-self:center;transition:opacity var(--dur-2) var(--ease)}
.boton-ocupado{opacity:0}
.enviando .boton-normal{opacity:0}
.enviando .boton-ocupado{opacity:1}
.enviando .fila button{cursor:progress}

.mensaje{min-height:calc(var(--t-cuerpo) * var(--lh-cuerpo));margin-top:var(--e2);font-size:var(--t-cuerpo);color:var(--ladrillo)}
.mensaje:not(:empty){animation:aparecer var(--dur-2) var(--ease)}
.nota{margin-top:var(--e1);font-size:var(--t-cuerpo);color:var(--gris)}

/* Confirmación: reemplaza al campo en la misma celda, sin mover lo que está debajo */
.campo{transition:opacity var(--dur-2) var(--ease),visibility 0s linear 0s}
.lista.listo-activo .campo{opacity:0;visibility:hidden;transition:opacity var(--dur-2) var(--ease),visibility 0s linear var(--dur-2)}
.listo{align-self:center;opacity:0;transform:translateY(4px);transition:opacity var(--dur-3) var(--ease) 80ms,transform var(--dur-3) var(--ease) 80ms}
.lista.listo-activo .listo{opacity:1;transform:none}
.listo:focus{outline:none}
.listo-titulo{font:var(--peso-enfasis) var(--t-subtitulo)/1.3 var(--serif);color:var(--tinta)}
.listo-detalle{margin-top:var(--e1);font-size:var(--t-cuerpo);color:var(--gris);overflow-wrap:anywhere}

.trampa{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Pie */
.pie{border-top:var(--borde);padding-block:var(--e7)}
.pie .contenedor{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--e4) var(--e6)}
.pie .marca{font-size:var(--t-subtitulo)}
.pie-marca{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--e4)}
.pie-datos{font-size:var(--t-cuerpo);color:var(--gris)}
/* Enlaces dentro de texto corto: área táctil de 44 px sin cambiar el alto de línea */
.nota a,.pie-datos a{padding-block:var(--e3);margin-block:calc(-1 * var(--e3))}

/* Documento legal */
.legal{padding-block:var(--e8) var(--e9)}
.legal h1{margin-bottom:var(--e3)}
.legal .vigencia{color:var(--gris);font-size:var(--t-cuerpo);margin-bottom:var(--e7)}
.legal h2{font-size:var(--t-subtitulo);line-height:1.3;margin:var(--e7) 0 var(--e3)}
.legal h3{font-family:var(--sans);font-size:var(--t-cuerpo-g);margin:var(--e5) 0 var(--e2)}
.legal ul{margin:var(--e4) 0 0;padding-left:1.2em}
.legal ul+p,.legal .tabla+p{margin-top:var(--e4)}
.legal li+li{margin-top:var(--e2)}
.legal li::marker{color:var(--gris)}
.legal dl{display:grid;grid-template-columns:max-content 1fr;gap:var(--e2) var(--e5);margin:0}
.legal dt{color:var(--gris)}
.legal dd{margin:0}
.tabla{overflow-x:auto;margin-top:var(--e4)}
.legal table{border-collapse:collapse;width:100%;font-size:var(--t-cuerpo)}
.legal th,.legal td{text-align:left;vertical-align:top;padding:var(--e3) var(--e4) var(--e3) 0;border-bottom:var(--borde)}
.legal thead th{color:var(--tinta);font-weight:var(--peso-enfasis)}

/* Entrada de la portada: un solo momento orquestado. El punto del logotipo llega al final. */
@keyframes entrar{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes llegar{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
@keyframes aparecer{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}
.entrada{animation:entrar var(--dur-3) var(--ease) var(--retraso,0ms) both}
.lockup-marca .punto{animation:llegar var(--dur-3) var(--ease) 360ms both}

@media (max-width:600px){
  /* Cabecera de páginas interiores: logotipo y selector en la misma línea, descriptor debajo */
  .idioma-cabecera{order:1}
  .idioma-barra .idioma{top:var(--e1);right:calc(var(--e4) - var(--e2))}
  .cabecera .descriptor{order:2;flex-basis:100%}
  .contenedor{padding-inline:var(--e4)}
  .portada{padding-block:var(--e7) var(--e6)}
  .seccion{padding-block:var(--e6)}
  .afirmacion,.declaracion{padding-block:var(--e7)}
  .tarjeta{grid-template-columns:88px minmax(0,1fr);gap:var(--e3);padding:var(--e3)}
  .retrato{width:88px;height:88px}
  .fila{flex-direction:column}
  .fila input{flex:none;width:100%}
  .fila button{width:100%}
  .legal dl{grid-template-columns:1fr;gap:0}
  .legal dd{margin-bottom:var(--e3)}
  .legal thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .legal table,.legal tbody,.legal tr,.legal td{display:block}
  .legal tr{padding-block:var(--e3);border-bottom:var(--borde)}
  .legal td{border:0;padding:2px 0}
  .legal td::before{content:attr(data-label);display:block;font-size:var(--t-menor);color:var(--gris)}
}

/* Pantallas muy angostas: las dos opciones del selector caben en una línea */
@media (max-width:380px){
  .vista label{padding:0 var(--e1);font-size:var(--t-menor);white-space:nowrap}
}

@media (prefers-reduced-motion:reduce){
  .entrada,.lockup-marca .punto{animation-name:aparecer-quieto}
  .mensaje:not(:empty){animation:none}
  .fila button:active{transform:none}
  .listo{transform:none}
  .vista-marca{transition:none}
}
@keyframes aparecer-quieto{from{opacity:0}to{opacity:1}}