:root{
  color-scheme:light;
  --azul:#1C50BB; --profundo:#0F2757; --bruma:#E4EBFA; --papel:#F7F6F3;
  --tinta:#16171A; --gris:#5A6472; --blanco:#fff;
  --linea:rgba(28,80,187,.30); --linea-suave:rgba(28,80,187,.14);
  --sans:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --lectura:'Poppins','Helvetica Neue',Arial,sans-serif;
  --gutter:clamp(20px,5vw,72px); --ancho:1280px; --radio:10px;
}
*,*::before,*::after{box-sizing:border-box;hyphens:none;-webkit-hyphens:none;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{margin:0;background:var(--blanco);color:var(--tinta);font-family:var(--lectura);
  font-weight:300;font-size:clamp(1.02rem,.98rem + .2vw,1.12rem);line-height:1.58;
  -webkit-font-smoothing:antialiased;}
svg{display:block;max-width:100%;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--azul);outline-offset:3px;}
[hidden]{display:none !important;}

h1,h2,h3{font-family:var(--sans);font-weight:800;margin:0;text-wrap:balance;}
.display{font-size:clamp(2.9rem,1.1rem + 7vw,6.1rem);line-height:.98;letter-spacing:-.042em;}
.titulo{font-size:clamp(1.9rem,1rem + 3.4vw,3.35rem);line-height:1.06;letter-spacing:-.034em;}
.rotulo{font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;margin:0;color:var(--azul);}
.rotulo--claro{color:rgba(255,255,255,.74);}
.bajada{font-size:clamp(1.1rem,1rem + .6vw,1.42rem);line-height:1.45;color:var(--gris);
  margin:0;max-width:40ch;font-weight:300;}

/* El resaltado: la palabra en azul, sin caja. Es la forma que el manual
   reserva para titulares largos, donde un campo sólido ensuciaría. */
.az{color:var(--azul);}

.contenedor{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--gutter);}
.seccion{padding-block:clamp(84px,10vw,150px);}
/* Sólo dos fondos claros y un único momento oscuro, al final. */
.seccion--papel{background:var(--papel);}
.seccion--profundo{background:var(--profundo);color:#fff;}
.seccion--profundo h2,.seccion--profundo h3{color:#fff;}

.boton{display:inline-flex;align-items:center;gap:.65rem;font-family:var(--sans);
  font-weight:700;font-size:.95rem;padding:1.05rem 1.7rem;border-radius:var(--radio);
  border:1px solid transparent;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .18s ease,background .18s ease,color .18s ease;}
/* La etiqueta va en un solo ítem flex: si no, el gap se mete entre palabras. */
.boton .txt{white-space:nowrap;}
.boton .f{transition:transform .18s ease;}
.boton:hover .f{transform:translateX(5px);}
.boton--solido{background:var(--azul);color:#fff;}
.boton--solido:hover{background:var(--profundo);}
.boton--claro{background:#fff;color:var(--profundo);}
.boton--claro:hover{background:var(--bruma);}

/* ------------------------------------------------------------------ nav -- */
.navbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.72);
  backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
  border-bottom:1px solid transparent;transition:border-color .25s ease,background .25s ease;}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .navbar{background:rgba(255,255,255,.97);}}
.navbar.pegada{background:rgba(255,255,255,.86);border-bottom-color:var(--linea-suave);}
.navbar .contenedor{display:flex;align-items:center;gap:1rem;min-height:74px;}
.lockup{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:none;}
.lockup svg{width:22px;}
.lockup b{font-family:var(--sans);font-weight:700;font-size:.88rem;letter-spacing:.2em;}
.lockup i{font-family:var(--sans);font-weight:700;font-size:.88rem;letter-spacing:.2em;
  color:var(--azul);font-style:normal;}
.enlaces{display:none;margin-left:auto;gap:1.8rem;}
.enlaces a{font-family:var(--sans);font-weight:600;font-size:.84rem;color:var(--gris);
  text-decoration:none;transition:color .16s ease;}
.enlaces a:hover{color:var(--azul);}
.navbar .boton{margin-left:auto;padding:.72rem 1.15rem;font-size:.85rem;}
@media (min-width:900px){.enlaces{display:flex;} .navbar .boton{margin-left:1.8rem;}}
@media (max-width:560px){.lockup i{display:none;} .corto{display:none;}}

/* ----------------------------------------------------------------- hero -- */
/* Sin ilustración al lado: el hero es una sola frase, centrada, y todo el
   ancho de la página trabaja para ella. */
.hero{padding-block:clamp(60px,8.5vw,118px) clamp(48px,6vw,86px);position:relative;}
.hero .centro{text-align:center;max-width:64rem;margin-inline:auto;}
/* A este cuerpo el interlineado de .display (.98) empasta las colas de la 
   «q» y la «g» con el renglón de abajo. */
.hero .display{font-size:clamp(2.5rem,1rem + 5.3vw,5rem);margin:1.5rem 0 0;line-height:1.08;}
.hero .bajada{margin:1.9rem auto 0;max-width:46ch;}
.hero .bajada b{font-weight:600;color:var(--tinta);}
/* Los cortes de línea son para la pantalla ancha: en el teléfono dejan
   renglones sueltos, así que ahí el texto acomoda solo. */
@media (max-width:720px){.hero .display .salto{display:none;}}
.hero .acciones{margin-top:2.6rem;display:flex;flex-wrap:wrap;gap:1rem 1.6rem;
  align-items:center;justify-content:center;}

/* La ilustración del hero está fuera por ahora; estas reglas quedan para
   poder reponerla. */
.esquema{width:100%;height:auto;}
.esquema .t{fill:none;stroke:var(--azul);stroke-width:2.6;stroke-linejoin:miter;stroke-miterlimit:2.4;}
.esquema .n{fill:var(--profundo);}
.esquema .term{fill:var(--azul);}
.esquema .marco{fill:none;stroke:var(--linea);stroke-width:1;}
.esquema .et{font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.06em;fill:var(--gris);}
.esquema .et-az{font-family:var(--sans);font-weight:800;font-size:13px;letter-spacing:.06em;fill:var(--azul);}
.esquema .guia{fill:none;stroke:var(--linea);stroke-width:1;stroke-dasharray:4 5;}
.esquema .base{fill:none;stroke:var(--linea);stroke-width:1.5;}
.js .esquema .t{stroke-dasharray:var(--l,1000);stroke-dashoffset:var(--l,1000);}
.js .esquema.viva .t{animation:dib 1.25s cubic-bezier(.65,.02,.25,1) forwards;}
@keyframes dib{to{stroke-dashoffset:0;}}

/* ------------------------------------------------- banda de rubros ------- */
.rubros{background:var(--papel);border-top:1px solid var(--linea-suave);
  border-bottom:1px solid var(--linea-suave);}
.rubros .contenedor{padding-block:clamp(1.5rem,3vw,2rem);display:grid;gap:.9rem;}
@media (min-width:900px){
  .rubros .contenedor{grid-template-columns:auto 1fr;align-items:center;gap:2.5rem;}
}
.rubros ul{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin:0;padding:0;list-style:none;}
.rubros li{font-family:var(--sans);font-weight:600;font-size:.92rem;color:var(--tinta);}
.rubros li::before{content:"";display:inline-block;width:6px;height:6px;
  background:var(--azul);margin-right:.55rem;vertical-align:.08em;}

/* ------------------------------------------------------------- problema -- */
.sintomas{display:grid;gap:0;margin-top:clamp(2.2rem,4vw,3rem);
  border-top:1px solid var(--linea-suave);}
.sintoma{padding-block:clamp(1.15rem,2.2vw,1.5rem);
  border-bottom:1px solid var(--linea-suave);display:grid;gap:.4rem;}
.sintoma .dice{margin:0;font-family:var(--sans);font-weight:700;
  font-size:clamp(1rem,.95rem + .45vw,1.2rem);letter-spacing:-.016em;line-height:1.32;}
.sintoma .real{margin:0;color:var(--gris);max-width:62ch;
  font-size:clamp(.92rem,.9rem + .18vw,1rem);line-height:1.55;}
.sintoma .real b{color:var(--tinta);font-weight:600;}
@media (min-width:900px){
  .sintoma{grid-template-columns:.8fr 1.2fr;gap:2.5rem;align-items:start;}
}
.remate{margin:clamp(2rem,3.4vw,2.8rem) 0 0;padding-top:clamp(1.5rem,2.6vw,2rem);
  border-top:2px solid var(--linea);font-family:var(--sans);font-weight:800;
  font-size:clamp(1.15rem,1rem + 1.1vw,1.6rem);letter-spacing:-.028em;max-width:36ch;line-height:1.18;}
/* En el problema el remate sigue a la lista de síntomas, que ya cierra con su
   propio hairline: la regla quedaba duplicada. Se saca y el aire lo da el
   margen. */
#problema .remate{border-top:none;padding-top:0;margin-top:clamp(2.6rem,4.4vw,4rem);}
/* El problema arranca más cerca de la banda de rubros: es la continuación
   del hero, no una sección que empieza de nuevo. */
#problema{padding-top:clamp(48px,6vw,80px);}

/* -------------------------------------------------------------- pilares -- */
/* Los cuatro pilares son un rompecabezas: cada borde interior lleva su
   lengüeta y el hueco que la recibe, así que ninguna pieza cierra sola. Todas
   con el mismo relleno: en damero las lengüetas se empastaban con el vecino. */
.rompecabezas{position:relative;width:100%;max-width:560px;margin-left:auto;aspect-ratio:1;}
.tablero{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.tablero path{fill:var(--blanco);stroke:var(--azul);stroke-width:2;stroke-linejoin:round;
  transform-box:view-box;transform-origin:center;}
.piezas{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;}
.pieza{display:grid;align-content:center;gap:.3rem;min-width:0;padding:7%;}
/* los lados interiores despejan la lengüeta del vecino */
.pieza:nth-child(odd){padding-right:16%;}
.pieza:nth-child(even){padding-left:16%;}
.pieza .num{font-family:var(--sans);font-weight:800;font-size:.76rem;
  letter-spacing:.14em;color:var(--azul);}
.pieza h3{font-size:clamp(1.05rem,2.4vw,1.55rem);letter-spacing:-.03em;}
.pieza p{margin:0;color:var(--gris);font-size:clamp(.8rem,1.85vw,.98rem);line-height:1.4;}

/* --- las piezas encastran a medida que la sección sube por la pantalla ---
   --p lo escribe main.js con el avance del scroll (0 = sueltas, 1 = armadas).
   Sin JS queda en 1 por el valor por defecto, así que se ve armado. */
.js .rompecabezas.rev{opacity:1;transform:none;}
.tablero .pieza-1,.piezas .pieza:nth-child(1){--dx:-1;--dy:-1;--o:0;}
.tablero .pieza-2,.piezas .pieza:nth-child(2){--dx: 1;--dy:-1;--o:.10;}
.tablero .pieza-3,.piezas .pieza:nth-child(3){--dx:-1;--dy: 1;--o:.20;}
.tablero .pieza-4,.piezas .pieza:nth-child(4){--dx: 1;--dy: 1;--o:.30;}
.tablero path{--d:70px;}
.piezas .pieza{--d:38%;}
.tablero path,.piezas .pieza{
  --pp:clamp(0,calc((var(--p,1) - var(--o,0)) / .62),1);
  opacity:var(--pp);
  transform:translate(calc(var(--dx,0) * var(--d) * (1 - var(--pp))),
                      calc(var(--dy,0) * var(--d) * (1 - var(--pp))));
}
@media (prefers-reduced-motion:reduce){
  .tablero path,.piezas .pieza{opacity:1;transform:none;}
}
.pilares-txt .remate{margin-top:clamp(1.8rem,3vw,2.4rem);}
.grilla-pilares{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center;}
@media (min-width:980px){.grilla-pilares{grid-template-columns:1fr .9fr;}}

/* --------------------------------------------------------------- método -- */
/* La sección más extensa del sitio: es lo que se compra. */
.entrada{margin-top:1.3rem;max-width:58ch;font-size:clamp(1rem,.96rem + .35vw,1.14rem);line-height:1.55;}
.metodo{margin-top:clamp(3rem,5vw,4.5rem);position:relative;}
.etapa{display:grid;gap:clamp(1.6rem,3vw,2.75rem);align-items:center;
  padding-block:clamp(2.2rem,4vw,3.2rem);border-top:1px solid var(--linea-suave);}
.etapa:first-child{border-top:none;padding-top:0;}
.etapa-txt .cab{display:flex;align-items:baseline;gap:.9rem;}
.etapa .num{font-family:var(--sans);font-weight:800;font-size:clamp(1.6rem,3vw,2.4rem);
  color:var(--azul);font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1;}
.etapa h3{font-size:clamp(1.45rem,2.6vw,2.1rem);letter-spacing:-.032em;}
.etapa .que{margin:.9rem 0 0;color:var(--gris);max-width:56ch;}

/* Las placas: cuadros conceptuales de trazo fino, conectores en azul.
   Las cifras son de ejemplo y van rotuladas como tales. */
.placa{width:100%;height:auto;display:block;background:var(--blanco);
  border:1px solid var(--linea-suave);}
/* En pantalla angosta el dibujo no se achica hasta volverse ilegible:
   conserva su tamaño y scrollea dentro de su propia caja. El cuerpo de la
   página nunca se mueve en horizontal. */
.etapa-placa{overflow-x:auto;-webkit-overflow-scrolling:touch;}
@media (max-width:700px){
  .placa{min-width:470px;}
}
.placa .caja{fill:#fff;stroke:var(--tinta);stroke-width:2;}
.placa .caja-az{fill:#fff;stroke:var(--azul);stroke-width:3;}
.placa .tit{font-family:var(--sans);font-weight:700;font-size:13.5px;fill:var(--tinta);}
.placa .sub{font-family:var(--lectura);font-weight:300;font-size:11.5px;fill:var(--gris);}
.placa .rot{font-family:var(--sans);font-weight:700;font-size:9px;letter-spacing:.13em;fill:var(--gris);}
.placa .rot-az{font-family:var(--sans);font-weight:700;font-size:9.5px;letter-spacing:.13em;fill:var(--azul);}
.placa .cifra{font-family:var(--sans);font-weight:800;font-size:24px;fill:var(--azul);}
.placa .con{fill:none;stroke:var(--azul);stroke-width:2;}
.placa .con-g{fill:none;stroke:var(--gris);stroke-width:1.5;}
.placa .guia{fill:none;stroke:var(--azul);stroke-width:1.5;stroke-dasharray:5 5;}
.placa .az{fill:var(--azul);}
.placa .banda{fill:rgba(28,80,187,.10);stroke:var(--azul);stroke-width:2;}

@media (min-width:980px){
  .etapa{grid-template-columns:1fr 1fr;align-items:center;gap:clamp(2.5rem,4vw,4rem);}
  /* alternan de lado: rompe la columna única y da ritmo */
  .etapa:nth-child(even) .etapa-placa{order:-1;}
}
.cierre-metodo{margin:clamp(2.5rem,4vw,3.5rem) 0 0;padding-top:clamp(1.8rem,3vw,2.4rem);
  border-top:2px solid var(--linea);font-family:var(--sans);font-weight:800;
  font-size:clamp(1.2rem,2.2vw,1.75rem);letter-spacing:-.028em;max-width:34ch;line-height:1.14;}

/* ------------------------------------------------------------ contraste -- */
.contrastes{display:grid;gap:0;margin-top:clamp(2.4rem,4vw,3.2rem);
  border-top:1px solid var(--linea);}
.contraste{padding-block:clamp(1.35rem,2.5vw,1.85rem);
  border-bottom:1px solid var(--linea-suave);display:grid;gap:.55rem;}
/* El criterio es lo que convierte la comparación en análisis: sin él son
   cinco afirmaciones sueltas sobre por qué somos mejores. */
.criterio{margin:0;font-family:var(--sans);font-weight:700;font-size:.66rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--azul);}
.contraste .ellos{margin:0;font-family:var(--lectura);font-weight:300;
  font-size:clamp(.95rem,.92rem + .22vw,1.05rem);color:var(--gris);line-height:1.45;}
.contraste .nosotros{margin:0;font-family:var(--sans);font-weight:800;
  font-size:clamp(1.05rem,.95rem + .72vw,1.42rem);color:var(--profundo);
  letter-spacing:-.028em;line-height:1.24;}
/* En pantalla angosta no hay dos columnas que encabezar: cada frase dice
   de quién es. */
.cab-contraste{display:none;}
.contraste .ellos::before,.contraste .nosotros::before{
  display:block;font-family:var(--sans);font-weight:700;font-size:.6rem;
  letter-spacing:.15em;text-transform:uppercase;margin-bottom:.25rem;}
.contraste .ellos::before{content:"Una agencia";color:var(--gris);}
.contraste .nosotros::before{content:"Magnitude";color:var(--azul);}
@media (min-width:860px){
  .contraste,.cab-contraste{display:grid;
    grid-template-columns:minmax(8rem,.78fr) 1fr 1.25fr;
    gap:clamp(1.4rem,3vw,3rem);align-items:baseline;}
  /* El encabezado es la fila que explica las otras cinco: va pegado a ellas,
     con su propia regla, y no flotando arriba del bloque. */
  .cab-contraste{padding-block:.85rem .7rem;border-bottom:1px solid var(--linea);}
  .cab-contraste p{margin:0;font-family:var(--sans);font-weight:800;font-size:.74rem;
    letter-spacing:.16em;text-transform:uppercase;}
  .cab-contraste .quien-ellos{color:var(--gris);}
  .cab-contraste .quien-nosotros{color:var(--azul);}
  .cab-contraste .quien-ellos::before,.cab-contraste .quien-nosotros::before{
    content:"";display:inline-block;width:7px;height:7px;margin-right:.55rem;
    vertical-align:.06em;}
  .cab-contraste .quien-ellos::before{background:var(--gris);opacity:.5;}
  .cab-contraste .quien-nosotros::before{background:var(--azul);}
  .contrastes .contraste:first-of-type{padding-top:clamp(1.05rem,2vw,1.4rem);}
  .contraste .ellos::before,.contraste .nosotros::before{display:none;}
}

/* ------------------------------------------------------------ formulario -- */
.cierre .grilla{display:grid;gap:clamp(2.5rem,5vw,4.5rem);align-items:start;}
@media (min-width:980px){.cierre .grilla{grid-template-columns:.92fr 1.08fr;}}

.formulario{display:grid;gap:1.05rem;}
@media (min-width:620px){
  .formulario{grid-template-columns:1fr 1fr;}
  .formulario .ancho{grid-column:1 / -1;}
}
.campo{display:grid;gap:.4rem;min-width:0;align-content:start;}
.campo label,.grupo legend{font-family:var(--sans);font-weight:700;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.78);padding:0;}
.campo input{width:100%;padding:.82rem .9rem;border:1.5px solid rgba(28,80,187,.60);
  background:var(--blanco);color:var(--tinta);border-radius:8px;
  font-family:var(--lectura);font-weight:300;font-size:1rem;
  transition:border-color .16s ease,box-shadow .16s ease;}
.campo input::placeholder{color:var(--gris);opacity:.75;}
.campo input:hover{border-color:rgba(28,80,187,.9);}
.campo input:focus{outline:none;border-color:var(--azul);
  box-shadow:0 0 0 3px rgba(28,80,187,.30);}
.campo input[aria-invalid="true"]{border-color:var(--ambar);}

/* Las dos últimas son preguntas abiertas, no rótulos de campo: van en caja
   baja y a cuerpo de lectura, porque en versalitas no se leen. */
.campo--pregunta label{text-transform:none;letter-spacing:0;font-size:.96rem;
  font-family:var(--lectura);font-weight:400;color:#fff;line-height:1.42;}
.campo textarea{width:100%;padding:.82rem .9rem;border:1.5px solid rgba(28,80,187,.60);
  background:var(--blanco);color:var(--tinta);border-radius:8px;
  font-family:var(--lectura);font-weight:300;font-size:1rem;line-height:1.5;
  min-height:5.4rem;resize:vertical;
  transition:border-color .16s ease,box-shadow .16s ease;}
.campo textarea::placeholder{color:var(--gris);opacity:.75;}
.campo textarea:hover{border-color:rgba(28,80,187,.9);}
.campo textarea:focus{outline:none;border-color:var(--azul);
  box-shadow:0 0 0 3px rgba(28,80,187,.30);}
.campo textarea[aria-invalid="true"]{border-color:var(--ambar);}

.campo select{width:100%;padding:.82rem 2.5rem .82rem .9rem;
  border:1.5px solid rgba(28,80,187,.60);background-color:var(--blanco);color:var(--tinta);
  border-radius:8px;font-family:var(--lectura);font-weight:300;font-size:1rem;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%231C50BB' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;
  transition:border-color .16s ease,box-shadow .16s ease;}
.campo select:hover{border-color:rgba(28,80,187,.9);}
.campo select:focus{outline:none;border-color:var(--azul);
  box-shadow:0 0 0 3px rgba(28,80,187,.30);}
.campo select[aria-invalid="true"]{border-color:var(--ambar);}
.campo select:invalid{color:var(--gris);}
.campo select option{background:var(--blanco);color:var(--tinta);}
.campo select option[value=""]{color:var(--gris);}

/* Teléfono: prefijo de país y número nacional en una sola fila. El prefijo es
   angosto y fijo; el número se queda con todo lo que sobra. El select lleva
   menos aire que el resto porque acá el contenido es siempre corto ("AR +54")
   y con el padding normal el número quedaba sin lugar. */
.campo .tel{display:flex;gap:.45rem;min-width:0;}
.campo .tel select{flex:0 0 5.9rem;width:auto;
  padding-left:.6rem;padding-right:1.6rem;background-position:right .55rem center;}
.campo .tel input{flex:1 1 auto;min-width:0;}

/* Pie de campo: el formato que esperamos, sin gritarlo. */
.campo .ayuda{margin:.1rem 0 0 0;font-family:var(--lectura);font-weight:300;
  font-size:.78rem;line-height:1.35;color:rgba(255,255,255,.58);}
.campo .ayuda[data-tipo="error"]{color:#F0C069;}

.formulario .enviar{grid-column:1 / -1;margin-top:.35rem;justify-self:start;}
.estado{grid-column:1 / -1;margin:0;font-size:.9rem;color:rgba(255,255,255,.8);min-height:1.2em;}
.estado[data-tipo="error"]{color:#F0C069;}

.pasos-lista{display:grid;gap:0;margin:clamp(1.6rem,3vw,2.2rem) 0 0;padding:0;list-style:none;
  border-top:1px solid rgba(255,255,255,.20);max-width:46ch;}
.pasos-lista li{display:grid;grid-template-columns:2.1rem 1fr;gap:.6rem;align-items:baseline;
  padding-block:.85rem;border-bottom:1px solid rgba(255,255,255,.20);
  color:rgba(255,255,255,.84);font-size:.97rem;line-height:1.5;}
.pasos-lista b{font-family:var(--sans);font-weight:800;font-size:.74rem;letter-spacing:.1em;
  color:var(--bruma);font-variant-numeric:tabular-nums;}

.gracias{border:1px solid rgba(255,255,255,.3);border-radius:10px;
  padding:clamp(1.5rem,3vw,2.2rem);background:rgba(255,255,255,.08);}
.gracias h3{font-size:clamp(1.3rem,2.4vw,1.7rem);letter-spacing:-.028em;color:#fff;}
.gracias p{margin:.7rem 0 0;color:rgba(255,255,255,.82);font-size:.98rem;}

/* --------------------------------------------------------------- cierre -- */
.cierre .display{font-size:clamp(2.6rem,1rem + 5vw,4.6rem);margin:1.4rem 0 0;max-width:16ch;
  line-height:1.06;}
.cierre .lista{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin:1.8rem 0 0;padding:0;list-style:none;}
.cierre .lista li{font-family:var(--sans);font-weight:700;font-size:clamp(1.05rem,2vw,1.35rem);
  color:var(--bruma);}
.cierre .bajada{color:rgba(255,255,255,.84);max-width:42ch;margin-top:1.8rem;}
.cierre .acciones{margin-top:2.4rem;}
.cierre .nota{margin:1.6rem 0 0;font-size:.94rem;color:rgba(255,255,255,.76);max-width:48ch;
  padding-left:1rem;border-left:2px solid var(--bruma);line-height:1.5;}
.cierre .nota b{color:#fff;font-weight:600;}

/* ------------------------------------------------------------------ pie -- */
.pie{background:var(--profundo);color:#fff;padding-block:clamp(36px,4vw,54px);
  border-top:1px solid rgba(255,255,255,.14);}
.pie .contenedor{display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:center;}
.pie .lockup b{color:#fff;} .pie .lockup i{color:var(--bruma);}
.pie .frase{margin:0;font-size:.92rem;color:rgba(255,255,255,.74);}
.pie .der{margin-left:auto;font-size:.82rem;color:rgba(255,255,255,.66);}
.pie .redes{display:flex;align-items:center;gap:.9rem;}
.pie .redes a{display:inline-flex;color:rgba(255,255,255,.78);
  transition:color .16s ease,transform .16s ease;}
.pie .redes a:hover{color:#fff;transform:translateY(-2px);}
.pie .redes svg{width:21px;height:21px;display:block;}

/* --------------------------------------------------------------- revelar - */
.js .rev{opacity:0;transform:translateY(18px);
  transition:opacity .65s cubic-bezier(.2,.6,.2,1),transform .65s cubic-bezier(.2,.6,.2,1);}
.js .rev.viva{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .js .rev{opacity:1 !important;transform:none !important;transition:none;}
  .js .esquema .t{stroke-dashoffset:0 !important;animation:none !important;}
}