/* ==========================================================================
   TP ATELIER — HOJA DE ESTILOS
   Depende de tokens.css. Ningún color ni tamaño se escribe a mano acá:
   todo sale de una ficha del sistema.
   ========================================================================== */

*{ box-sizing:border-box }

html{ scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--tpa-papel);
  color:var(--tpa-tinta);
  font-family:var(--tpa-texto);
  font-size:var(--tpa-t2);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100% }

.contenedor{
  max-width:var(--tpa-ancho);
  margin:0 auto;
  padding-left:var(--tpa-pad);
  padding-right:var(--tpa-pad);
}

.seccion{ padding-top:var(--tpa-sec); padding-bottom:var(--tpa-sec) }

/* --- rótulo grabado: la voz pequeña de todo el sistema --- */
.rotulo{
  font-family:var(--tpa-texto);
  font-size:var(--tpa-rotulo);
  font-weight:600;
  letter-spacing:var(--tpa-track-caps);
  text-transform:uppercase;
  font-variant-numeric:tabular-nums;
  margin:0;
}
.rotulo--laton{ color:var(--tpa-laton) }
.rotulo--alto{ color:var(--tpa-laton-alto) }

/* rótulo con filete que se estira hacia la derecha */
.rotulo-filete{ display:flex; align-items:center; gap:11px }
.rotulo-filete::after{
  content:""; height:1px; flex:1; max-width:180px;
  background:var(--tpa-laton-tenue);
}

/* --- botones --- */
.boton{
  appearance:none; border:0; cursor:pointer; display:inline-block;
  font-family:var(--tpa-texto);
  font-size:11.5px; font-weight:600;
  letter-spacing:0.15em; text-transform:uppercase;
  padding:16px 30px;
  background:var(--tpa-laton-alto); color:var(--tpa-campo);
  transition:transform var(--tpa-rapido) var(--tpa-salida),
             background-color 200ms var(--tpa-salida);
}
.boton:hover{ background:#E2C68E }
.boton:active{ transform:scale(0.97) }   /* el botón tiene que acusar el toque */

.boton--tinta{ background:var(--tpa-campo); color:var(--tpa-papel-alto) }
.boton--tinta:hover{ background:#2F415C }

.enlace-boton{
  appearance:none; background:none; border:0; cursor:pointer;
  font-family:var(--tpa-texto);
  font-size:11.5px; font-weight:600; letter-spacing:0.13em; text-transform:uppercase;
  color:var(--tpa-tinta-3); padding:8px 0;
  transition:color 200ms var(--tpa-salida);
}
.enlace-boton:hover{ color:var(--tpa-tinta) }

/* ==========================================================================
   CABECERA
   Capa translúcida que se materializa al despegar del hero, no una franja
   opaca que come una tira fija de pantalla.
   ========================================================================== */
.top{
  position:sticky; top:0; z-index:60;
  background:rgba(36,50,71,0);
  border-bottom:1px solid transparent;
  transition:background-color var(--tpa-medio) var(--tpa-salida),
             border-color var(--tpa-medio) var(--tpa-salida);
}
.top.fijada{
  background:rgba(31,43,62,.85);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom-color:var(--tpa-laton-tenue);
}
.top-interior{
  max-width:var(--tpa-ancho); margin:0 auto;
  padding:0 var(--tpa-pad); height:76px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}

/* El lockup (monograma TPA + wordmark) vive en logo.css, que es el kit de
   marca y se comparte entre modelos. No redefinir esas clases acá. */

.idiomas{ display:flex; gap:2px }
/* En WordPress el conmutador son enlaces (una URL por idioma); en el
   prototipo son botones. Mismo aspecto. */
.idiomas button, .idiomas a{
  appearance:none; background:none; border:0; cursor:pointer;
  display:inline-block; text-decoration:none;
  font-family:var(--tpa-texto); font-size:10px; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--tpa-sobre-2); padding:7px 11px;
  transition:color 180ms var(--tpa-salida), background-color 180ms var(--tpa-salida),
             transform 150ms var(--tpa-salida);
}
.idiomas button:hover, .idiomas a:hover{ color:var(--tpa-sobre) }
.idiomas button:active, .idiomas a:active{ transform:scale(0.97) }
.idiomas button[aria-current="true"], .idiomas a[aria-current="true"]{ color:var(--tpa-campo); background:var(--tpa-laton-alto) }

/* ==========================================================================
   HERO — el campo de sarga sobre la fotografía, separados por una diagonal

   Cuatro planos, del fondo hacia adelante:
     0  .hero-foto     Buenos Aires en duotono azul. Es el fondo.
     1  .hero-sombra   la sombra que el campo proyecta, más el filete de latón
     3  .hero-campo    el telar (lienzo 2D), recortado en diagonal
    10  el texto

   Todo el corte sale de tres medidas. --corte-arriba y --corte-abajo son las
   dos puntas de la diagonal, en porcentaje del ancho; --corte-y es dónde
   muere, que es el filete horizontal del pie: la diagonal aterriza sobre esa
   línea y forman una esquina. Debajo del filete el azul vuelve a ser de
   lado a lado, así el texto del pie nunca cae sobre la foto.
   El script mide el pie y ajusta --corte-y; el valor de acá es el que vale
   si el script no corre.
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  background:#212D40;
  margin-top:-76px; padding-top:76px;
  /* el aire de abajo es el que se come la ficha de etapas al montarse */
  padding-bottom:var(--tpa-monta);
  min-height:min(720px,92vh);
  display:flex; flex-direction:column;

  --corte-arriba: 78%;
  --corte-abajo:  51%;
  --corte-y:      calc(100% - 88px);

  --corte: polygon(
    0 0, var(--corte-arriba) 0,
    var(--corte-abajo) var(--corte-y),
    100% var(--corte-y), 100% 100%, 0 100%);

  /* el mismo recorte 1,3 px a la derecha: lo que asoma es el filete */
  --corte-filete: polygon(
    0 0, calc(var(--corte-arriba) + 1.3px) 0,
    calc(var(--corte-abajo) + 1.3px) var(--corte-y),
    100% var(--corte-y), 100% 100%, 0 100%);
}

/* --- 0 · la fotografía --------------------------------------------------- */
.hero-foto{ position:absolute; inset:0; z-index:0; overflow:hidden; background:#131B28 }
/* Dos planos a propósito: el de afuera hace el paralaje, el de adentro lleva
   el filtro y la entrada. Si fueran el mismo elemento, la transición de la
   entrada se comería cada paso del scroll y el paralaje se arrastraría. */
.hero-foto-plano{
  position:absolute; inset:0;
  transform:translate3d(0, var(--foto-y, 0px), 0);
  will-change:transform;
}
.hero-foto img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:66% 32%;
  /* el duotono la mete en la paleta; el resto la manda hacia atrás */
  filter:url(#duotono) contrast(1.05) brightness(.94);
  /* escalada de más para que el paralaje no descubra los bordes */
  transform:scale(1.1); transform-origin:70% 38%;
  opacity:0;
  transition:opacity 1400ms var(--tpa-salida),
             transform 1600ms var(--tpa-suave);
}
[data-anim="pending"] .hero-foto img{ transform:scale(1.17) }
[data-anim="in"] .hero-foto img{ opacity:1; transition-delay:80ms }
.sin-js .hero-foto img{ opacity:1 }

/* Perspectiva aérea: lo que está lejos pierde contraste y se apaga contra el
   aire. Además protege dos cosas concretas — ES/PT/EN arriba y el filete del
   pie abajo — que caen sobre la foto en pantallas anchas. */
.hero-foto-aire{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(16,22,31,0.666) 0%, rgba(16,22,31,0.108) 17%, rgba(16,22,31,0) 33%),
    linear-gradient(to top,    rgba(16,22,31,0.486) 0%, rgba(16,22,31,0) 30%),
    linear-gradient(255deg,    rgba(16,22,31,0.45) 0%, rgba(16,22,31,0.036) 44%, rgba(16,22,31,0.342) 100%);
}
/* La misma costilla diagonal que teje el shader, apenas insinuada sobre la
   foto: es lo que hace que los dos planos parezcan el mismo material y no
   una foto pegada encima de un fondo. */
.hero-foto-trama{
  position:absolute; inset:0; pointer-events:none;
  opacity:.5; mix-blend-mode:soft-light;
  background:repeating-linear-gradient(45deg,
    rgba(255,255,255,.14) 0 1px,
    rgba(0,0,0,.16) 1px 2px,
    rgba(0,0,0,0) 2px 3px);
}

/* --- 1 · sombra proyectada + filete de la costura ------------------------ */
.hero-sombra{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  clip-path:var(--corte-filete);
  /* opaco de punta a punta para que la sombra tenga silueta llena; lo único
     que se ve de este fondo es la tira de 1,3 px del borde */
  /* Dos fondos: el latón encima, un azul opaco debajo. El opaco es el que
     le da silueta llena a la sombra; el latón sólo decide cuánto filete se
     ve a cada altura. Fuerte abajo, apagado arriba: una línea que termina
     de golpe contra el borde de la pantalla se lee como un error. */
  background:
    linear-gradient(to top,
      #B8944F 0%, #C9A968 26%, rgba(196,166,102,.85) 56%,
      rgba(150,126,78,.34) 80%, rgba(150,126,78,0) 100%),
    #212E42;
  filter:drop-shadow(18px 9px 34px rgba(8,13,20,0.8))
         drop-shadow(3px 1px 6px rgba(8,13,20,0.66));
}

/* --- 3 · el campo de sarga ----------------------------------------------- */
/* El azul y la trama también en CSS, debajo del lienzo: cuando el telar
   dibuja, este fondo no se ve; cuando el navegador se queda sin contexto de
   WebGL —pasa con varias pestañas pesadas abiertas, o dentro de visores que
   embeben la página— el campo sigue siendo azul y con textura en vez de
   quedar hueco. */
.campo-tejido{
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.035) 0 1px,
      rgba(0,0,0,.05) 1px 2px,
      rgba(0,0,0,0) 2px 3px),
    linear-gradient(118deg, #2F405A 0%, #243247 46%, #1D283A 100%);
}
.hero-campo{ position:absolute; inset:0; z-index:3; clip-path:var(--corte) }
.telar{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1 }
.velo{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(100deg,
    rgba(20,28,39,0.672) 0%, rgba(20,28,39,0.384) 44%, rgba(20,28,39,0.096) 80%);
}
/* El campo se oscurece otra vez contra la costura: es la cara del panel que
   se va de la luz. Sin eso el corte se lee como un recorte y no como un
   plano que está adelante. */
.hero .velo{
  background:linear-gradient(100deg,
    rgba(20,28,39,0.688) 0%, rgba(20,28,39,0.4) 38%,
    rgba(20,28,39,0.128) 64%, rgba(20,28,39,0.4) 100%);
}

.hero-cuerpo{
  position:relative; z-index:10; flex:1; width:100%;
  max-width:var(--tpa-ancho); margin:0 auto;
  padding:clamp(30px,5vw,60px) var(--tpa-pad) clamp(28px,4vw,44px);
  display:flex; flex-direction:column; justify-content:center;
}
.hero-rotulo{ color:var(--tpa-laton-alto); margin-bottom:clamp(20px,3vw,32px) }
/* En escritorio el rótulo del hero es la mitad del H1 que lleva las palabras
   buscadas: sube un punto sobre el resto de los rótulos. Sólo desde 1241 px,
   que es donde la diagonal está en su lugar original; más angosto, el filete
   del rótulo empezaría a rozar el corte. */
@media (min-width:1241px){ .hero-rotulo{ font-size:12px } }

/* --- título revelado por máscara, letra por letra --- */
/* El H1 envuelve al rótulo y al nombre: se le quita todo lo que el navegador
   le pone a un encabezado, porque cada parte trae su propio tamaño. */
.hero-titulo{ margin:0; font-size:inherit; font-weight:inherit; line-height:inherit }
/* 0.44rem = los 7 px que medía antes, cuando el nombre era el H1 y el em salía
   de su tamaño por defecto. Fijo en rem para no depender del encabezado. */
.cinetico{ display:flex; flex-wrap:wrap; gap:0 0.44rem; margin:0 }
.cinetico .palabra{ display:flex }
.cinetico .mascara{ overflow:hidden; display:inline-block; vertical-align:bottom }
.cinetico .letra{
  display:inline-block;
  font-family:var(--tpa-display); font-weight:400;
  font-size:var(--tpa-d1); line-height:0.92;
  letter-spacing:var(--tpa-track-display); text-transform:uppercase;
  color:var(--tpa-papel-alto);
  transform:translateY(105%);
  transition:transform 900ms var(--tpa-suave);
}
[data-anim="in"] .cinetico .letra{ transform:translateY(0) }

.hero-bajada{
  margin:clamp(24px,3vw,34px) 0 0; max-width:54ch;
  font-size:var(--tpa-t1); line-height:1.68; color:#B1BFD5;
}
.hero-bajada b{ color:var(--tpa-papel-alto); font-weight:500 }

/* La nota va debajo del botón y no al lado: al lado terminaba justo encima
   de la diagonal en casi todos los anchos de escritorio (medido del 15/9/2026:
   entre 1 y 41 px de superposición de 960 a 1440 px). */
.hero-acciones{
  margin-top:clamp(26px,3.4vw,38px);
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
}
.hero-acciones .nota{ font-size:13px; color:var(--tpa-sobre-2) }

.hero-pie{
  position:relative; z-index:10; width:100%;
  max-width:var(--tpa-ancho); margin:0 auto;
  padding:20px var(--tpa-pad) clamp(30px,4vw,44px);
  border-top:1px solid var(--tpa-laton-tenue);
  display:flex; gap:10px 40px; flex-wrap:wrap; align-items:baseline;
}
.hero-pie .celda{ display:flex; align-items:baseline; gap:10px }
.hero-pie .valor{ font-size:13px; color:var(--tpa-sobre-2) }

/* --- el corte según el ancho ---------------------------------------------
   La columna de texto mide 1180 px y no se mueve; la diagonal sí. A medida
   que la pantalla se angosta hay que correrla a la derecha o el titular la
   choca. Por debajo de 950 px no hay lugar para una cuña: ahí la foto pasa
   a ser el fondo de todo el hero, muy hundida, y el campo azul se apoya
   encima como un velo. Sin diagonal, pero con foto. */
@media (max-width:1240px){
  .hero{ --corte-arriba:84%; --corte-abajo:60% }
}
@media (max-width:950px){
  /* Sin cuña. El campo vuelve a ser de lado a lado y la foto se pasa
     ADELANTE, fundida en modo overlay: en vez de taparse, se graban una en
     la otra y el edificio queda dentro del tejido. Tapar la foto con el
     azul a media opacidad no funcionaba — el telar es opaco y no dejaba
     pasar nada. */
  .hero-campo{ clip-path:none }
  .hero-sombra{ display:none }
  .hero-foto{ z-index:5; mix-blend-mode:overlay; opacity:.72 }
  .hero-foto img{
    object-position:62% 30%;
    /* más contraste y más luz: en overlay lo que trabaja es la diferencia
       de tono, no el brillo absoluto */
    filter:url(#duotono) contrast(1.12) brightness(1.2);
  }
  .hero-foto-aire{
    background:
      linear-gradient(to bottom, rgba(16,22,31,0.522) 0%, rgba(16,22,31,0) 26%),
      linear-gradient(to top,    rgba(16,22,31,0.495) 0%, rgba(16,22,31,0) 30%);
  }
}

/* ==========================================================================
   ETAPAS — la ficha de papel que se superpone al campo y lo rompe
   ========================================================================== */
/* z-index:20 para que la ficha quede ARRIBA del hero. Sube 90 px con un
   margen negativo, pero las capas del hero llegan a z-index 10: sin esto la
   ficha se montaba por debajo y el hero le comía la cabecera. */
/* display:flow-root corta el colapso de márgenes. Sin eso, el margen
   negativo de la ficha se propaga hacia afuera y sube TODA la sección de
   papel con ella: la ficha deja de montarse sobre el azul y sólo mueve el
   borde entre secciones, que es justo lo contrario del efecto buscado. */
.etapas{ background:var(--tpa-papel); position:relative; z-index:20; display:flow-root }
.etapas-interior{
  max-width:var(--tpa-ancho); margin:0 auto;
  padding:0 var(--tpa-pad) var(--tpa-sec);
}
.ficha{
  position:relative;
  margin-top:calc(var(--tpa-monta) * -1);   /* sube y monta sobre el hero */
  background:var(--tpa-papel-alto);
  padding:clamp(26px,3.6vw,44px) clamp(22px,3vw,40px) clamp(28px,3.6vw,44px);
  box-shadow:0 44px 80px -34px rgba(0,0,0,.55),
             0 2px 0 rgba(255,255,255,.3) inset;
}
.grano{
  position:absolute; inset:0; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
}
.ficha > *:not(.grano){ position:relative; z-index:2 }
/* El :not() no es adorno: `.ficha > *` tiene la misma especificidad que
   `.grano` y viene después, así que le pisaba el position:absolute y el
   lienzo del grano caía adentro del flujo. La ficha crecía casi 1000 px de
   papel vacío arriba del contenido. */

.ficha-cabeza{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; flex-wrap:wrap;
  padding-bottom:15px; border-bottom:1px solid var(--tpa-papel-bajo);
  margin-bottom:clamp(20px,2.6vw,30px);
}
.ficha-cabeza .ref{
  font-size:11px; color:var(--tpa-tinta-3);
  font-variant-numeric:tabular-nums; letter-spacing:0.06em;
}

.etapa-grilla{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) }
.etapa{
  position:relative; padding:22px 20px 24px 0;
  border-right:1px solid var(--tpa-papel-bajo);
  transition:background-color 260ms var(--tpa-salida);
}
.etapa:last-child{ border-right:0 }
.etapa + .etapa{ padding-left:20px }
/* marca de registro que baja al filete superior */
.etapa::before{
  content:""; position:absolute; left:0; top:-15px;
  width:1px; height:9px; background:var(--tpa-laton);
  transition:height 260ms var(--tpa-salida);
}
.etapa + .etapa::before{ left:20px }
.etapa:hover::before, .etapa:focus-within::before{ height:16px }
.etapa:hover, .etapa:focus-within{ background:rgba(168,133,74,.055) }
.etapa .numero{ display:block; color:var(--tpa-laton); margin-bottom:12px }
.etapa h3{
  margin:0 0 9px;
  font-family:var(--tpa-titular); font-weight:400; font-size:var(--tpa-d4);
  line-height:1.22; color:var(--tpa-tinta); letter-spacing:0;
}
.etapa p{ margin:0; font-size:var(--tpa-t3); line-height:1.58; color:var(--tpa-tinta-2) }

@media (max-width:900px){
  .etapa-grilla{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .etapa:nth-child(2){ border-right:0 }
  .etapa:nth-child(-n+2){ border-bottom:1px solid var(--tpa-papel-bajo); padding-bottom:22px }
  .etapa:nth-child(n+3){ padding-top:22px }
  .etapa:nth-child(3){ padding-left:0 }
  .etapa:nth-child(3)::before{ left:0 }
}
@media (max-width:560px){
  .etapa-grilla{ grid-template-columns:1fr }
  .etapa{ border-right:0; border-bottom:1px solid var(--tpa-papel-bajo); padding-left:0 !important }
  .etapa::before{ left:0 !important }
  .etapa:last-child{ border-bottom:0 }
}

.ficha-pie{
  margin-top:clamp(20px,2.6vw,28px); padding-top:18px;
  border-top:1px solid var(--tpa-papel-bajo);
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.ficha-pie p{ margin:0; font-size:12.5px; line-height:1.5; color:var(--tpa-tinta-3); max-width:44ch }

/* ==========================================================================
   CRITERIO
   ========================================================================== */
.criterio-grilla{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(26px,5vw,72px);
}
@media (max-width:880px){ .criterio-grilla{ grid-template-columns:1fr } }
.criterio h2{
  margin:0;
  font-family:var(--tpa-titular); font-weight:400;
  font-size:var(--tpa-d2); line-height:1.12; color:var(--tpa-tinta);
  letter-spacing:-0.01em; text-wrap:balance;
}
.criterio h2 em{ font-style:italic; color:var(--tpa-verde) }
.criterio-texto p{ margin:0 0 18px; line-height:1.72; color:var(--tpa-tinta-2); max-width:60ch }
.criterio-texto p:last-child{ margin-bottom:0 }
/* Realce: una franja de latón, como un subrayado de marcador, que se traza
   de izquierda a derecha cuando el bloque entra en pantalla. Va apoyada en la
   parte baja de la letra para no tapar el texto, y si la frase se parte en
   dos líneas la franja sigue de una a la otra. */
.realce{
  color:var(--tpa-tinta); font-weight:500;
  background-image:linear-gradient(var(--tpa-laton-tenue), var(--tpa-laton-tenue));
  background-repeat:no-repeat; background-position:0 90%;
  background-size:0% 0.45em;
  transition:background-size 1100ms var(--tpa-salida) 500ms;
}
.dentro .realce, .sin-js .realce{ background-size:100% 0.45em }

/* ==========================================================================
   SERVICIOS — el filete se traza al pasar por encima
   ========================================================================== */
.servicios{ margin-top:clamp(38px,5vw,64px); border-top:1px solid var(--tpa-papel-bajo) }
.servicio{
  position:relative; display:grid;
  grid-template-columns:64px minmax(0,1fr) auto;
  gap:22px; align-items:baseline;
  padding:26px 4px 27px; border-bottom:1px solid var(--tpa-papel-bajo);
  transition:padding-left 320ms var(--tpa-salida);
}
.servicio::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--tpa-laton);
  transform:scaleX(0); transform-origin:left center;
  transition:transform 480ms var(--tpa-salida);
}
.servicio:hover{ padding-left:14px }
.servicio:hover::after{ transform:scaleX(1) }
.servicio .numero{ color:var(--tpa-laton); padding-top:6px }
.servicio h3{
  margin:0;
  font-family:var(--tpa-titular); font-weight:400;
  font-size:clamp(18px,2vw,24px); line-height:1.26;
  color:var(--tpa-tinta); letter-spacing:-0.005em;
}
.servicio .entregables{
  display:block; margin-top:8px;
  font-family:var(--tpa-texto); font-size:12px; font-weight:500;
  letter-spacing:0.09em; text-transform:uppercase; color:var(--tpa-tinta-3);
}
.servicio .flecha{
  color:var(--tpa-laton); font-size:18px;
  opacity:0; transform:translateX(-6px);
  transition:opacity 300ms var(--tpa-salida), transform 300ms var(--tpa-salida);
}
.servicio:hover .flecha{ opacity:1; transform:translateX(0) }
@media (max-width:640px){
  .servicio{ grid-template-columns:44px minmax(0,1fr); gap:14px }
  .servicio .flecha{ display:none }
}

/* ==========================================================================
   JURISDICCIONES — la fila de placas técnicas
   ========================================================================== */
.juris{
  background:var(--tpa-papel-alto);
  border-top:1px solid var(--tpa-papel-bajo);
  border-bottom:1px solid var(--tpa-papel-bajo);
}
.placas{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(216px,1fr));
  margin-top:clamp(26px,3.4vw,38px);
}
.placa{
  padding:28px 26px 30px; border-right:1px solid var(--tpa-papel-bajo);
  transition:background-color 260ms var(--tpa-salida);
}
.placa:last-child{ border-right:0 }
.placa:hover{ background:var(--tpa-papel) }
.placa .pais{
  display:block; margin:0 0 16px;
  font-family:var(--tpa-display); font-weight:500; font-size:15px;
  letter-spacing:0.19em; text-transform:uppercase; color:var(--tpa-tinta);
}
.placa .barra{
  display:block; width:26px; height:1px; background:var(--tpa-laton); margin-bottom:16px;
  transition:width 340ms var(--tpa-salida);
}
.placa:hover .barra{ width:52px }
.placa ul{ margin:0; padding:0; list-style:none; display:grid; gap:8px }
.placa li{ font-size:13px; line-height:1.45; color:var(--tpa-tinta-2); display:flex; gap:9px }
.placa li::before{
  content:""; width:3px; height:3px; flex:none; margin-top:8px;
  background:var(--tpa-laton); transform:rotate(45deg);
}
@media (max-width:900px){
  .placa{ border-right:0; border-bottom:1px solid var(--tpa-papel-bajo) }
  .placa:last-child{ border-bottom:0 }
}

/* ==========================================================================
   CITA — segundo campo de sarga, con el sello al margen
   ========================================================================== */
/* el azul y la trama los pone .campo-tejido, en el bloque del hero */
.cita{ position:relative; overflow:hidden; color:var(--tpa-sobre) }
.cita .velo{
  background:linear-gradient(80deg,
    rgba(20,28,39,0.72) 0%, rgba(20,28,39,0.496) 50%, rgba(20,28,39,0.192) 100%);
}
.cita-interior{ position:relative; z-index:10 }
.cita .sello{
  position:absolute; right:-30px; top:50%; transform:translateY(-50%);
  width:min(230px,34vw); aspect-ratio:1; z-index:5; opacity:.16;
  border:1px solid var(--tpa-laton);
  display:flex; align-items:center; justify-content:center;
}
/* filete interior al 6.25 % del lado, como manda la especificación del logo */
.cita .sello::after{ content:""; position:absolute; inset:6.25%; border:1px solid var(--tpa-laton) }
.cita .sello b{
  font-family:var(--tpa-display); font-weight:500;
  font-size:clamp(38px,13.35vw,90px);   /* 39.28 % del lado del bastidor */
  letter-spacing:0.04em;
  text-indent:0.04em;                   /* centrado óptico: compensa el tracking final */
  color:var(--tpa-laton-alto);
}
.cita blockquote{
  margin:0; max-width:32ch;
  font-family:var(--tpa-titular); font-weight:400; font-style:italic;
  font-size:clamp(20px,2.8vw,33px); line-height:1.34; color:var(--tpa-papel-alto);
}
.cita .filete{
  display:block; width:56px; height:1px;
  background:var(--tpa-laton); margin-bottom:clamp(24px,3vw,32px);
}

/* ==========================================================================
   FORMULARIO — dos pasos
   ========================================================================== */
.contacto{ background:var(--tpa-papel) }
.contacto-cabeza{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(22px,4vw,60px); align-items:end;
}
@media (max-width:820px){ .contacto-cabeza{ grid-template-columns:1fr } }
.contacto-cabeza h2{
  margin:0; font-family:var(--tpa-titular); font-weight:400; letter-spacing:-0.01em;
  font-size:var(--tpa-d2); line-height:1.12; color:var(--tpa-tinta); text-wrap:balance;
}
.contacto-cabeza p{ margin:0; font-size:14.5px; line-height:1.65; color:var(--tpa-tinta-2); max-width:46ch }

.tarjeta{
  margin-top:clamp(28px,4vw,44px); position:relative;
  background:var(--tpa-papel-alto); border:1px solid var(--tpa-papel-bajo);
  padding:clamp(24px,3.4vw,44px);
}
.tarjeta > *{ position:relative; z-index:2 }

.pasos{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-bottom:clamp(24px,3vw,32px); padding-bottom:20px;
  border-bottom:1px solid var(--tpa-papel-bajo);
}
.paso-marca{ display:flex; align-items:center; gap:9px; color:var(--tpa-tinta-3) }
.paso-marca .bolita{
  width:23px; height:23px; flex:none;
  border:1px solid var(--tpa-papel-bajo);
  display:flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:600;
  transition:background-color 260ms var(--tpa-salida),
             border-color 260ms var(--tpa-salida), color 260ms var(--tpa-salida);
}
.paso-marca.activo{ color:var(--tpa-tinta) }
.paso-marca.activo .bolita{ background:var(--tpa-campo); border-color:var(--tpa-campo); color:var(--tpa-papel-alto) }
.paso-marca.hecho .bolita{ background:var(--tpa-laton-alto); border-color:var(--tpa-laton); color:var(--tpa-campo) }
.paso-linea{ flex:1; height:1px; background:var(--tpa-papel-bajo); max-width:64px }

/* los paneles se cruzan con transiciones, no con keyframes: una transición
   se puede interrumpir y redirigir a mitad de camino, un keyframe reinicia */
.panel{
  display:none; opacity:0; transform:translateY(8px);
  transition:opacity var(--tpa-medio) var(--tpa-salida),
             transform var(--tpa-medio) var(--tpa-salida);
}
.panel.visible{ display:block }
.panel.dentro{ opacity:1; transform:none }

.campo{ border:0; padding:0; margin:0 0 28px }
.campo:last-of-type{ margin-bottom:0 }
.campo > legend, .campo > label.pregunta{
  display:block; padding:0; margin:0 0 14px;
  font-size:15px; font-weight:500; color:var(--tpa-tinta);
}
.opciones{ display:flex; flex-wrap:wrap; gap:8px }
.opcion{ position:relative }
.opcion input{ position:absolute; opacity:0; width:0; height:0 }
.opcion span{
  display:block; cursor:pointer;
  padding:10px 15px; font-size:13.5px; line-height:1.3; color:var(--tpa-tinta-2);
  border:1px solid var(--tpa-papel-bajo); background:var(--tpa-papel-alto);
  transition:border-color 200ms var(--tpa-salida), background-color 200ms var(--tpa-salida),
             color 200ms var(--tpa-salida), transform var(--tpa-rapido) var(--tpa-salida);
}
.opcion span:hover{ border-color:var(--tpa-laton-tenue); background:var(--tpa-papel) }
.opcion span:active{ transform:scale(0.985) }
.opcion input:checked + span{
  border-color:var(--tpa-laton); background:rgba(168,133,74,.13);
  color:var(--tpa-tinta); font-weight:500;
}
.opcion input:focus-visible + span{ outline:2px solid var(--tpa-laton); outline-offset:2px }

.entradas{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px }
@media (max-width:620px){ .entradas{ grid-template-columns:1fr } }
.entrada label{
  display:block; margin-bottom:7px;
  font-size:12px; font-weight:600; letter-spacing:0.11em;
  text-transform:uppercase; color:var(--tpa-tinta-3);
}
.entrada label .suave{ text-transform:none; letter-spacing:0; font-weight:400 }
.entrada input, .entrada textarea{
  width:100%; font-family:var(--tpa-texto); font-size:15px; color:var(--tpa-tinta);
  background:var(--tpa-papel-alto); border:0;
  border-bottom:1px solid var(--tpa-papel-bajo); padding:11px 2px;
  transition:border-color 220ms var(--tpa-salida);
}
.entrada input::placeholder, .entrada textarea::placeholder{ color:#A9A493 }
.entrada input:hover, .entrada textarea:hover{ border-bottom-color:var(--tpa-laton-tenue) }
.entrada input:focus, .entrada textarea:focus{ outline:0; border-bottom-color:var(--tpa-laton) }
.entrada textarea{ resize:vertical; min-height:84px; line-height:1.6 }
/* Lista desplegable con el mismo aspecto que los campos de texto: se le quita
   la flecha del sistema y se dibuja una en latón. Mientras no se elige nada,
   el texto va en el gris de los ejemplos de los otros campos. */
.entrada select{
  width:100%; font-family:var(--tpa-texto); font-size:15px; color:var(--tpa-tinta);
  background-color:var(--tpa-papel-alto); border:0; border-radius:0;
  border-bottom:1px solid var(--tpa-papel-bajo); padding:11px 30px 11px 2px;
  -webkit-appearance:none; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23A8854A' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 6px center;
  transition:border-color 220ms var(--tpa-salida);
}
.entrada select:has(option[value=""]:checked){ color:#A9A493 }
.entrada select option{ color:var(--tpa-tinta) }
.entrada select:hover{ border-bottom-color:var(--tpa-laton-tenue) }
.entrada select:focus{ outline:0; border-bottom-color:var(--tpa-laton) }
.entrada.ancha{ grid-column:1 / -1 }
.aviso{ margin:8px 0 0; font-size:12.5px; color:var(--tpa-error) }
.aviso-envio{ margin-top:14px }
.aviso-envio:empty{ display:none }

/* campo trampa para bots: fuera de la vista y del foco */
.trampa{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden }

.acciones{
  margin-top:32px; padding-top:22px; border-top:1px solid var(--tpa-papel-bajo);
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.acciones .nota{ font-size:12.5px; color:var(--tpa-tinta-3); margin-left:auto }

.confirmado .marca-ok{
  width:36px; height:36px; margin-bottom:20px;
  border:1px solid var(--tpa-laton); color:var(--tpa-laton);
  display:flex; align-items:center; justify-content:center;
}
.confirmado h3{
  margin:0 0 12px; font-family:var(--tpa-titular); font-weight:400;
  font-size:24px; color:var(--tpa-tinta);
}
.confirmado p{ margin:0; font-size:15px; line-height:1.65; color:var(--tpa-tinta-2); max-width:52ch }

/* ==========================================================================
   PIE
   ========================================================================== */
.pie{ background:var(--tpa-campo); color:var(--tpa-sobre-2); padding:clamp(44px,5vw,68px) 0 clamp(28px,3.5vw,40px) }
.pie-alto{
  display:flex; justify-content:space-between; gap:26px; flex-wrap:wrap;
  padding-bottom:26px; border-bottom:1px solid var(--tpa-laton-tenue);
}
.pie-alto p{ margin:0 }
.pie-alto .desc{ font-size:13.5px; max-width:34ch; line-height:1.6; margin-top:12px }
.pie a{
  color:var(--tpa-sobre); text-decoration:none;
  border-bottom:1px solid var(--tpa-laton-tenue);
  transition:border-color 200ms var(--tpa-salida);
}
.pie a:hover{ border-bottom-color:var(--tpa-laton-alto) }
.pie-bajo{
  margin-top:22px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:12px; color:#778496;
}

/* ==========================================================================
   ENTRADAS
   Sin JavaScript no se esconde nada: el estado por defecto es visible y
   sólo el script marca el arranque en "pendiente".
   ========================================================================== */
[data-anim="pending"] .sube{ opacity:0; transform:translateY(14px) }
.sube{
  transition:opacity var(--tpa-lento) var(--tpa-salida),
             transform var(--tpa-lento) var(--tpa-salida);
}
[data-anim="in"] .sube{ opacity:1; transform:none }
[data-anim="in"] .sube[data-d="1"]{ transition-delay:120ms }
[data-anim="in"] .sube[data-d="2"]{ transition-delay:640ms }
[data-anim="in"] .sube[data-d="3"]{ transition-delay:760ms }
[data-anim="in"] .sube[data-d="4"]{ transition-delay:880ms }

/* revelado al entrar en pantalla, sólo para lo que está bajo el pliegue */
.revela{ opacity:0; transform:translateY(18px);
  transition:opacity 700ms var(--tpa-salida), transform 700ms var(--tpa-salida) }
.revela.dentro{ opacity:1; transform:none }
.sin-js .revela{ opacity:1; transform:none }

:focus-visible{ outline:2px solid var(--tpa-laton); outline-offset:3px }

@media (prefers-reduced-motion:reduce){
  *{ transition-duration:1ms !important; transition-delay:0ms !important }
  [data-anim="pending"] .sube{ opacity:1; transform:none }
  .cinetico .letra{ transform:none !important }
  .revela{ opacity:1; transform:none }
  /* la foto queda quieta y en su sitio: ni entrada ni paralaje */
  .hero-foto img{ opacity:1; transform:scale(1.03) !important }
  .hero-foto-plano{ transform:none !important }
}