/* ============================================================
   JVD WEB 2026 · CSS principal · V2
   Base visual heredada de la maqueta Fase 1 (Territorio D):
   escala tipográfica, contraste condensada/serif, bloques coral,
   alternancia tesis/obra/proceso, formulario editorial.
   TIPOGRAFÍAS:
   - Condensada: Archivo (wdth 62) — pendiente condensada definitiva [FAL-002]
   - Serif editorial: PP Editorial Old (licencia de Jesús; colocar
     woff2 en public/assets/fonts/, ver README de esa carpeta).
     Fallback mientras llegan los archivos: Newsreader (OFL).
     Fraunces DESCARTADA por decisión de Jesús (2026-07-15).
   ============================================================ */
@font-face{
  font-family:'PP Editorial Old';
  src:url('/assets/fonts/PPEditorialOld-Regular.woff2') format('woff2');
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'PP Editorial Old';
  src:url('/assets/fonts/PPEditorialOld-Italic.woff2') format('woff2');
  font-weight:300 700;
  font-style:italic;
  font-display:swap;
}
:root{
  --blanco:#FAF7F2;
  --negro:#1A1A1A;
  --coral:#F75C46;
  --papel:#EBEBEB;
  --tinta2:#4A4A4A;
  --metal:#B8BCBE;
  --celeste:#2D9CDB;
  --max:1440px;
  --gut:clamp(20px,4vw,64px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  background:var(--blanco);
  color:var(--negro);
  font-family:'Source Sans 3',sans-serif;
  font-size:18px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.cond{
  font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 62;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  line-height:.95;
}
.cond-light{
  font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 62;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.14em;
}
/* serif editorial: romana de alto contraste (titulares) */
.serif{
  font-family:'PP Editorial Old','Newsreader',Georgia,serif;
  font-optical-sizing:auto;
  font-weight:560;
  font-style:normal;
  line-height:1.05;
  letter-spacing:-.01em;
}
/* itálica expresiva (frases de autor, transiciones, CTA) */
.serifit{
  font-family:'PP Editorial Old','Newsreader',Georgia,serif;
  font-optical-sizing:auto;
  font-style:italic;
  font-weight:520;
  line-height:1.08;
  letter-spacing:-.005em;
}
a{color:inherit}
/* Corrección (2026-08-03): sin height:auto, un <img> con atributos HTML
   width/height (usados en todo el sitio como hint de tamaño intrínseco)
   usa el atributo height como píxeles literales en vez de proporcional
   en cuanto max-width:100% entra a tallar el ancho — estira cualquier
   imagen sin clase propia que fije su propia relación de aspecto. Las
   reglas más específicas (.cgrid2 img, .hero-caso img, .fila-caso img,
   etc.) ya declaraban su propio height:auto o height:100%+object-fit y
   no se ven afectadas por este default. */
img{max-width:100%;height:auto;display:block}
video{display:block;width:100%}
button{font:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;border-radius:0}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
.skip{
  position:absolute;left:-9999px;top:0;background:var(--negro);color:var(--blanco);
  padding:10px 18px;z-index:200;font-size:14px;
}
.skip:focus{left:0}

/* --- navegación --- */
header.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--blanco) 92%, transparent);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--metal);
}
.navin{
  max-width:var(--max);margin:0 auto;padding:0 var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:clamp(14px,1.6vw,24px);height:104px;
}
.logo{display:flex;align-items:center;text-decoration:none;padding:10px 0;flex-shrink:0;overflow:visible}
.logo img{height:74px;width:auto;object-fit:contain}
.logo .logo-m{display:none;width:112px;height:46px;object-fit:contain}
/* evitar corte del CTA en 1021–1440px: los ítems no se encogen, así que
   el texto de nav cede tamaño antes de que el header desborde */
@media (max-width:1360px) and (min-width:1021px){
  nav.main a{font-size:13px;letter-spacing:.09em}
  .logo img{height:64px}
}
nav.main{display:flex;gap:clamp(16px,2.4vw,38px);align-items:center}
nav.main a{
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 62;
  font-weight:600;font-size:15px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;position:relative;padding:6px 0;
}
nav.main a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--coral);
  transition:width .25s ease;
}
nav.main a:hover::after,nav.main a[aria-current="page"]::after{width:100%}
nav.main a[aria-current="page"]{color:var(--negro)}
.langs{display:flex;gap:2px;border:1px solid var(--metal)}
.langs .lng{
  background:none;border:0;padding:6px 9px;font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 62;font-size:11px;letter-spacing:.1em;font-weight:600;
  color:var(--tinta2);text-decoration:none;
}
.langs .lng[aria-current="true"]{background:var(--negro);color:var(--blanco)}
.langs .lng[aria-disabled="true"]{opacity:.45;cursor:default}
.cta{
  background:var(--coral);color:var(--negro);text-decoration:none;
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 62;font-weight:700;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding:13px 22px;
  display:inline-block;transition:background .2s ease,color .2s ease;border:0;
  white-space:nowrap;flex-shrink:0;
}
/* Único coral del sistema: el fondo del CTA se mantiene exactamente
   #F75C46 también en hover/pressed (filter, no un segundo hex) — el
   texto sigue siendo --negro (5.45:1, sobre AA) en los dos estados. */
.cta:hover,.cta:active{filter:brightness(.93)}
.burger{display:none;background:none;border:0;width:44px;height:44px;position:relative}
.burger span{position:absolute;left:8px;right:8px;height:2px;background:var(--negro)}
.burger span:nth-child(1){top:14px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:28px}

/* menú móvil */
.mmenu{
  position:fixed;inset:0;background:var(--blanco);z-index:100;display:none;
  flex-direction:column;padding:24px var(--gut);overflow:auto;
}
.mmenu.open{display:flex}
.mmenu .mtop{display:flex;justify-content:space-between;align-items:center;margin-bottom:8vh}
.mmenu .logo img{height:44px}
.mmenu nav{display:flex;flex-direction:column;gap:4px}
.mmenu nav a{
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 62;font-weight:700;
  text-transform:uppercase;text-decoration:none;font-size:clamp(34px,9vw,52px);
  line-height:1.15;letter-spacing:.02em;border-bottom:1px solid var(--papel);padding:10px 0;
}
.mmenu nav a:active,.mmenu nav a[aria-current="page"]{color:var(--coral)}
.mmenu .mfoot{margin-top:auto;padding-top:32px;display:flex;flex-direction:column;gap:20px}
.close{background:none;border:0;font-size:32px;line-height:1;width:44px;height:44px}

/* --- estructura --- */
main{display:block}
section{max-width:var(--max);margin:0 auto;padding:clamp(48px,7vw,104px) var(--gut)}
section.full{max-width:none;padding-left:0;padding-right:0}
.eyebrow{font-size:13px;color:var(--tinta2);margin-bottom:20px;display:block}
.eyebrow em{color:var(--negro);font-style:normal}
@media (max-width:700px){
  section{padding-top:36px;padding-bottom:36px}
  .hero{padding-top:40px;padding-bottom:22px}
  .hero .bajada{margin-top:22px}
  .hero .principio{margin-top:16px;font-size:11px}
  .eyebrow{font-size:11px;margin-bottom:14px}
  .mosaico{padding-top:28px;padding-bottom:28px}
  .decide h2{margin-bottom:4px}
  .dlist{margin-top:22px}
  .dbtn{padding:15px 0}
  .dbtn .dn{display:none}
  .destacado h2{margin-bottom:24px}
  .dstk{gap:22px}
  .dstk .cat{font-size:10px;margin-top:9px;letter-spacing:.14em}
  .recorrido .lema{margin-bottom:32px;font-size:clamp(22px,7.2vw,30px)}
  .recorrido .lema i{display:block}
  .puerta{padding-top:32px;padding-bottom:32px}
  .teaser h2{font-size:clamp(26px,7vw,34px)}
  .ver{margin-top:12px}
  footer .in{padding:32px var(--gut) 28px}
}

/* --- hero --- */
.hero{padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(28px,3.4vw,52px)}
.hero-grid{display:grid;grid-template-columns:60% 1fr;gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:1100px){.hero-grid{grid-template-columns:58% 1fr}}
.hero h1{font-size:clamp(40px,6.6vw,92px);margin-bottom:.12em}
.hero h1 .serifit{display:inline-block;margin-top:.14em}
.hero .conseq{
  display:inline-block;background:var(--coral);color:var(--blanco);
  font-size:clamp(28px,4.8vw,66px);padding:.06em .24em .14em;
}
.hero .bajada{max-width:52ch;font-size:clamp(18px,1.6vw,22px);margin-top:32px;color:var(--tinta2)}
.hero .principio{margin-top:22px;font-size:13px;letter-spacing:.18em;color:var(--tinta2)}
.hero .principio em{color:var(--negro);font-style:normal}

/* video vertical del estudio, columna derecha del hero: altura acotada
   (nunca "gigante", el hero no se vuelve interminable), 9:16 intacto,
   sin recorte forzado — object-fit:cover a la misma proporción del
   archivo no recorta nada porque coinciden exactamente. */
.hero-video{display:flex;justify-content:center;width:100%}
.hero-video video{
  width:auto;height:min(50vh,460px);max-width:100%;max-height:100%;
  aspect-ratio:9/16;object-fit:cover;display:block;background:var(--negro);
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-video{order:2;margin-top:32px}
  .hero-txt{order:1}
  .hero-video video{height:min(48vh,420px)}
}

/* --- franja video --- */
.franja{width:100%;overflow:hidden}
.franja video{width:100%;height:auto;aspect-ratio:1920/638;object-fit:cover;background:var(--negro)}
.pie{
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 62;font-weight:600;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta2);
  padding:12px var(--gut);display:flex;gap:18px;flex-wrap:wrap;max-width:var(--max);margin:0 auto;
}
@media (max-width:700px){
  .pie{font-size:10px;gap:10px;padding-top:8px;padding-bottom:8px;letter-spacing:.12em}
}
.pie em{color:var(--negro);font-style:normal}
.pie a{color:var(--negro)}

/* --- mosaico editorial de obra --- */
.mosaico{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(40px,5vw,72px)}
.mosaico .mgrid{
  display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:auto auto;gap:14px;
}
.mosaico .mgrid figure{min-width:0}
.mosaico .mgrid img{width:100%;height:100%;object-fit:cover}
.mosaico .m1{grid-row:1 / span 2;aspect-ratio:4/5}
.mosaico .m2,.mosaico .m3{aspect-ratio:3/2}
.mosaico figcaption{
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 62;font-weight:600;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta2);
  margin-top:10px;
}
@media (max-width:700px){
  .mosaico figcaption{font-size:10px;margin-top:7px;letter-spacing:.12em}
}
@media (max-width:820px){
  .mosaico .mgrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:10px}
  .mosaico .mgrid figure{min-width:72vw;scroll-snap-align:start}
  .mosaico .m1,.mosaico .m2,.mosaico .m3{aspect-ratio:4/5;grid-row:auto}
  /* Home móvil (2026-08-05): "Cuaderno y muestras" no comunica en este
     formato y se oculta sólo en móvil (el activo y el markup siguen en
     el repo, disponibles en desktop). "Relieve y materia" mostraba el
     estuche antiguo de La Fête (obra-caja-relieve.jpg) — se oculta
     también en móvil hasta contar con el activo de reemplazo aprobado
     (buscado en el repo como jvd-supremo-hero-FINAL / supremo / 0892,
     no encontrado); no se reemplaza por criterio propio ni se reutiliza
     la caja de La Fête. */
  .mosaico .m2,.mosaico .m3{display:none}
}

/* --- selector de decisión: lista editorial --- */
.decide h2{font-size:clamp(30px,4.6vw,58px);margin-bottom:8px;max-width:16ch}
.dlist{border-top:1px solid var(--metal);margin-top:32px}
.dbtn{
  display:flex;width:100%;justify-content:space-between;align-items:baseline;gap:16px;
  background:var(--blanco);color:var(--celeste);border:0;border-bottom:1px solid var(--metal);text-align:left;
  padding:20px 0;transition:padding-left .22s ease,color .18s ease,background-color .18s ease;
}
.dbtn .dl{
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 62;font-weight:700;
  font-size:clamp(19px,2.2vw,28px);letter-spacing:.08em;text-transform:uppercase;
}
.dbtn .dn{
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 62;font-weight:600;
  font-size:12px;letter-spacing:.2em;color:inherit;
}
.dbtn:hover,.dbtn:focus-visible{padding-left:16px;color:var(--celeste);
  background-color:color-mix(in srgb, var(--celeste) 10%, var(--blanco))}
.dbtn:focus-visible{outline:3px solid var(--celeste);outline-offset:-3px}
.dbtn[aria-pressed="true"]{color:var(--blanco);background-color:var(--celeste);border-bottom-color:var(--celeste)}
.dout{margin-top:28px;border-left:4px solid var(--coral);padding:6px 0 6px 24px;display:none}
.dout.on{display:block}
.dout p{max-width:60ch;font-size:18px}
.dout .serifit{font-size:clamp(22px,2.4vw,30px);display:block;margin-bottom:8px}
.dout a,.dout a:visited{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 62;font-weight:700;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  color:var(--negro);display:inline-block;margin-top:12px;transition:color .18s ease}
.dout a:hover,.dout a:focus-visible,.dout a:active{color:var(--coral)}

/* --- trabajo destacado --- */
.destacado h2{font-size:clamp(30px,4.6vw,58px);margin-bottom:36px}
.dstk{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:820px){.dstk{grid-template-columns:1fr}}
.dstk a{display:block;text-decoration:none}
.dstk img{width:100%;aspect-ratio:4/5;object-fit:cover}
.dstk .cat{
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 62;font-weight:600;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta2);
  display:block;margin-top:12px;
}
.dstk .tit{
  font-family:'PP Editorial Old','Newsreader',Georgia,serif;font-optical-sizing:auto;font-weight:560;
  font-size:clamp(20px,2vw,26px);line-height:1.15;display:block;margin-top:4px;
}
.dstk a:hover .tit{color:var(--coral)}
@media (max-width:820px){
  .dstk img{aspect-ratio:3/2}
}

/* --- casos destacados en home: grilla editorial (Batch 01, 2026-08-04) --- */
.casodx{border-top:1px solid var(--metal)}

/* --- grilla de Casos destacados (Home): 4 columnas desde 1080px,
   2 desde 640px, 1 antes. Mismo lenguaje sin sombras/bordes
   redondeados que el resto del sitio; gap fijo (12-16px) para
   tarjetas visualmente cercanas, sin bloques gigantes. --- */
.casos-home{display:grid;grid-template-columns:1fr;gap:14px;margin-top:36px}
@media (min-width:640px){.casos-home{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.casos-home{grid-template-columns:repeat(4,1fr)}}
.caso-home{display:block;text-decoration:none;color:inherit}
.caso-home .ch-img{display:block;overflow:hidden;aspect-ratio:3/2;background:var(--papel)}
.caso-home .ch-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.caso-home .ch-img.contain img{object-fit:contain}
.caso-home:hover .ch-img img{transform:scale(1.035)}
.caso-home .ch-body{display:block;padding-top:14px}
.caso-home .ch-meta{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 62;font-weight:600;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta2);display:block;margin-bottom:8px}
.caso-home .ch-title{font-family:'PP Editorial Old','Newsreader',Georgia,serif;font-optical-sizing:auto;font-weight:560;
  font-style:normal;font-size:clamp(19px,1.6vw,23px);line-height:1.14;display:block;transition:color .18s ease}
.caso-home:hover .ch-title{color:var(--coral)}
.caso-home .ch-award{display:block;font-size:11px;letter-spacing:.06em;color:var(--tinta2);margin-top:8px}
.caso-home .ch-cta{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 62;font-weight:700;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;border-bottom:2px solid var(--coral);
  padding-bottom:2px;display:inline-block;margin-top:12px}
@media (prefers-reduced-motion: reduce){.caso-home .ch-img img{transition:none}}

/* ============================================================
   TRATAMIENTO DE IMÁGENES EN PÁGINAS DE CASO
   Reglas (decisión Jesús, 2026-07-16):
   - HORIZONTAL: ancho del contenedor, height auto, sin estirar.
   - VERTICAL: nunca width:100% en bloque horizontal; max-height
     ~82vh, ancho contenido, composición de dos columnas o bloque
     centrado; object-fit contain; no cortar botella/etiqueta/tapa/base.
   - CUADRADA: ancho controlado, proporción intacta.
   ============================================================ */

/* rejilla de a dos: solo pares de la MISMA orientación; sin recorte */
.cgrid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:36px 0;align-items:start}
@media (max-width:700px){.cgrid2{grid-template-columns:1fr}}
.cgrid2 img{width:100%;height:auto}

/* hero editorial de caso: caja contenida, recorte desde la izquierda
   (foco en botella/etiqueta); nunca se estira el archivo */
.hero-caso{padding-top:0;padding-bottom:0;max-width:1120px}
.hero-caso img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:100% center;display:block}
.hero-caso .pie{padding-left:0;padding-right:0}
@media (max-width:700px){
  .hero-caso img{aspect-ratio:auto;object-fit:unset;object-position:unset}
}
/* variante 16:9 (ej. VIK): la fotografía de origen ya es panorámica y
   simétrica, así que el recorte 4:3 por defecto cortaría contenido de
   las solapas laterales. object-fit:cover a 16:9 sobre un archivo 16:9
   no recorta nada porque las proporciones coinciden. */
.hero-caso .hc-169{aspect-ratio:16/9;object-position:center}
@media (max-width:700px){
  .hero-caso .hc-169{aspect-ratio:auto;object-fit:unset;object-position:unset}
}
/* variante 3:2 (La Fête): fotografía original sin recorte ni expansión IA,
   proporción nativa 1536x1024 = 3:2 exacto → cover no recorta nada. */
.hero-caso .hc-32{aspect-ratio:3/2;object-position:center}
@media (max-width:700px){
  .hero-caso .hc-32{aspect-ratio:auto;object-fit:unset;object-position:unset}
}
/* variante 3:4 (BOGO): packaging fotografiado en vertical, proporción
   nativa 1086x1448 = 3:4 exacto → cover no recorta nada. */
.hero-caso .hc-34{aspect-ratio:3/4;object-position:center}
@media (max-width:700px){
  .hero-caso .hc-34{aspect-ratio:auto;object-fit:unset;object-position:unset}
}
/* variante DOX final: reemplazo (2026-08-03) por jvd-dox-hero-FINAL.webp,
   horizontal nativa 2400x1865. Misma convención que hc-169/hc-32: ancho
   del contenedor, height:auto, sin cover ni recorte. */
.hero-caso .hc-dox-final{aspect-ratio:2400/1865;width:100%;height:auto;object-fit:contain}
/* variante Emaresa: desktop 2400x1350 = 16:9 exacto (cover no recorta).
   Mobile: key visual dedicado 1200x1500 (4:5) exacto, mostrado completo,
   fondo negro por consistencia con el resto de heroes de caso. */
.hero-caso .hc-emaresa{aspect-ratio:16/9;object-position:center;background:var(--negro)}
@media (max-width:700px){
  .hero-caso .hc-emaresa{aspect-ratio:4/5;object-fit:contain;object-position:center}
}

/* intro de caso en dos columnas: texto izquierda, vertical derecha.
   Uso exclusivo de DIVERSA. Corrección (2026-08-02): columna de imagen
   46%→54% y align-items center→start — con center, una imagen alta junto
   a un bloque de texto corto quedaba centrada verticalmente y flotando
   lejos del texto, con exceso de blanco alrededor (efecto "aislada").
   Con start, ambas columnas arrancan a la misma altura. */
.caso-dos-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,54%);gap:clamp(28px,5vw,80px);align-items:start}
.caso-dos-col .cdc-img{margin:0}
.caso-dos-col .cdc-img img{display:block;width:auto;max-width:100%;max-height:82vh;margin:0 auto;object-fit:contain}
.caso-dos-col .cdc-img figcaption{
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 62;font-weight:600;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta2);margin-top:12px;text-align:center;
}
@media (max-width:820px){
  .caso-dos-col{grid-template-columns:1fr}
  .caso-dos-col .cdc-img img{width:100%;height:auto;max-height:none}
}

/* imagen vertical suelta, contenida y centrada. object-fit:contain es la
   red de seguridad: si max-width y max-height compiten, se ve letterboxed
   en vez de estirarse (bug detectado 2026-07-16: sin esto, el height
   heredado del atributo HTML quedaba fijo por max-height mientras el
   ancho se recalculaba aparte, deformando también la imagen de DIVERSA). */
.img-v{display:block;width:auto;height:auto;max-width:min(62%,560px);max-height:84vh;margin:36px auto;object-fit:contain}
@media (max-width:700px){.img-v{max-width:100%;width:100%;height:auto;max-height:none}}

/* --- teaser editorial --- */
.teaser{border-top:1px solid var(--metal)}
.teaser .cat{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 62;font-weight:600;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta2)}
.teaser h2,.teaser h3{
  font-family:'PP Editorial Old','Newsreader',Georgia,serif;font-optical-sizing:auto;font-weight:560;
  font-style:normal;font-size:clamp(28px,4vw,52px);line-height:1.05;letter-spacing:-.01em;
  margin:10px 0 14px;max-width:24ch;
}
.teaser h2 .it,.teaser h3 .it{font-style:italic;font-weight:520;color:var(--coral)}
.teaser p{max-width:56ch;color:var(--tinta2)}
.ver{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 62;font-weight:700;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  border-bottom:2px solid var(--coral);padding-bottom:3px;display:inline-block;margin-top:18px}
.ver:hover{color:var(--negro)}

/* --- banda fotográfica horizontal (estudio en home) --- */
.banda-foto{position:relative}
.banda-foto img{width:100%;aspect-ratio:1920/640;object-fit:cover}
@media (max-width:700px){.banda-foto img{aspect-ratio:3/2}}

/* --- recorrido (banda negra) --- */
.recorrido{background:var(--negro);color:var(--blanco)}
.recorrido .lema{font-size:clamp(26px,3.6vw,48px);margin-bottom:56px}
.recorrido .lema i{font-family:'PP Editorial Old','Newsreader',Georgia,serif;font-optical-sizing:auto;
  font-weight:520;font-style:italic;color:var(--coral)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr;gap:22px}}
.step .n{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 62;font-weight:800;
  font-size:13px;letter-spacing:.2em;color:var(--coral);display:block;margin-bottom:10px}
.step .t{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 62;font-weight:700;
  font-size:20px;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:8px}
.step .s{font-family:'PP Editorial Old','Newsreader',Georgia,serif;font-optical-sizing:auto;font-style:normal;
  font-weight:500;font-size:17px;color:var(--blanco);display:block;margin-bottom:8px}
.step p{color:var(--metal);font-size:16px;max-width:32ch}
/* variante con fotografía por momento (Cómo pensamos) */
.steps.con-foto .simg{margin:0 0 18px;overflow:hidden;aspect-ratio:4/3;background:#111}
.steps.con-foto .simg img{width:100%;height:100%;object-fit:cover}

/* --- bloque afirmación coral --- */
.afirma{background:var(--coral);color:var(--blanco)}
.afirma .in{max-width:var(--max);margin:0 auto;padding:clamp(56px,7vw,100px) var(--gut)}
.afirma h2{font-size:clamp(30px,4vw,52px);letter-spacing:.04em}
.afirma p.def{font-family:'PP Editorial Old','Newsreader',Georgia,serif;font-optical-sizing:auto;font-style:normal;
  font-weight:520;font-size:clamp(22px,2.6vw,34px);line-height:1.22;max-width:30ch;margin:20px 0 28px}
.afirma a{color:var(--blanco);font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 62;
  font-weight:700;font-size:14px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  border-bottom:2px solid var(--blanco);padding-bottom:3px}

/* --- dos puertas (Sprint MJ / PrePiensa con logos) --- */
.puertas{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--metal);
  max-width:var(--max);margin:0 auto}
@media (max-width:900px){.puertas{grid-template-columns:1fr}}
.puerta{background:var(--blanco);padding:clamp(36px,4vw,64px) var(--gut)}
.puerta .plogo{display:block;margin-bottom:22px}
/* calibrados por ancho óptico: Sprint (trazo fino, horizontal) necesita más
   ancho para leerse; PrePiensa (isotipo denso, vertical) menos. Subordinados a JVD.
   PrePiensa: no existe variante horizontal/wordmark oficial en los assets;
   se reduce la presencia del símbolo bajando el ancho total.
   MARCADO PARA REVISIÓN: pedir wordmark o versión horizontal oficial. */
.puerta .plogo.sprint{width:clamp(170px,15vw,212px);height:auto}
.puerta .plogo.prepiensa{width:clamp(84px,7.6vw,104px);height:auto}
.puerta .de{
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 62;font-weight:600;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta2);
  display:block;margin-bottom:14px;
}
.puerta .cuando{font-family:'PP Editorial Old','Newsreader',Georgia,serif;font-optical-sizing:auto;font-style:italic;
  font-weight:500;font-size:21px;color:var(--tinta2);margin-bottom:18px;max-width:30ch}
.puerta p{max-width:44ch;margin-bottom:22px}

/* --- páginas interiores --- */
.ptitle{font-size:clamp(48px,9vw,130px);padding-top:clamp(40px,6vw,84px)}
.psub{font-family:'PP Editorial Old','Newsreader',Georgia,serif;font-optical-sizing:auto;font-style:normal;
  font-weight:560;font-size:clamp(26px,3.6vw,52px);line-height:1.08;letter-spacing:-.01em;
  margin-top:18px;max-width:26ch}
.pbajada{max-width:56ch;color:var(--tinta2);margin-top:24px;font-size:clamp(18px,1.5vw,21px)}
.subhead{font-size:clamp(24px,3vw,38px);margin-top:clamp(60px,8vw,110px)}

/* índice editorial (trabajo) */
.indice{border-top:2px solid var(--negro);margin-top:44px}
.fila{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:baseline;
  padding:26px 0;border-bottom:1px solid var(--metal)}
@media (max-width:760px){.fila{grid-template-columns:1fr;gap:6px}}
.fila .fc{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 62;font-weight:600;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta2)}
.fila .ft{font-family:'PP Editorial Old','Newsreader',Georgia,serif;font-optical-sizing:auto;font-weight:560;
  font-style:normal;font-size:clamp(24px,3vw,38px);line-height:1.08}
a.ft{text-decoration:none}
a.ft:hover{color:var(--coral)}
/* logos de iniciativas en el índice (calibrados por peso óptico:
   WIT wordmark expresivo vs OMG isotipo + baseline) */
.fila .ilogo{width:auto;height:clamp(64px,7vw,92px)}
.fila .ilogo.omg{height:clamp(58px,6.4vw,84px)}
@media (max-width:760px){.fila .ilogo{height:56px}.fila .ilogo.omg{height:52px}}
.fila .fd{grid-column:2;font-size:15px;color:var(--tinta2);max-width:52ch}
@media (max-width:760px){.fila .fd{grid-column:1}}

/* fila de caso publicado con teaser visual: recorte editorial fijo
   (aspect-ratio + object-fit:cover), nunca estirado; la proporción
   original del archivo se preserva porque solo se recorta, no se deforma */
a.fila-caso{
  display:grid;grid-template-columns:168px 1fr;gap:24px;align-items:center;
  padding:26px 0;border-bottom:1px solid var(--metal);text-decoration:none;color:inherit;
}
.fila-caso .fcimg{display:block;overflow:hidden;aspect-ratio:4/5;background:var(--papel)}
.fila-caso .fcimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.fila-caso:hover .fcimg img{transform:scale(1.045)}
.fila-caso .fc{display:block}
.fila-caso .ft{display:block;margin:6px 0 8px;color:var(--coral);transition:opacity .18s ease}
.fila-caso:hover .ft{opacity:.75}
.fila-caso .fd{grid-column:auto;margin:0}
@media (max-width:760px){
  a.fila-caso{grid-template-columns:96px 1fr;gap:16px}
  .fila-caso .ft{font-size:clamp(22px,6vw,28px)}
}
@media (prefers-reduced-motion: reduce){.fila-caso .fcimg img{transition:none}}

/* --- hero de Trabajo: texto + fotografía documental de proceso ---
   Mismo lenguaje que .hero-grid de Home (Estudio en movimiento), pero
   propio de esta página: no se reutilizó la clase de Home a propósito,
   para no acoplar ambas páginas ante cambios futuros. */
.trabajo-hero{display:grid;grid-template-columns:58% 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.trabajo-hero .th-img{display:block;overflow:hidden;background:var(--papel)}
.trabajo-hero .th-img img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block}
@media (max-width:820px){
  .trabajo-hero{grid-template-columns:1fr}
  .trabajo-hero .th-img{order:2;margin-top:32px}
  .trabajo-hero .th-txt{order:1}
}

/* --- grilla editorial de Casos (Trabajo): mismo lenguaje que .svcs/
   .puertas (hairline de 2px en --metal, sin sombras ni bordes
   redondeados) — no una grilla de tarjetas genérica. 2 columnas desde
   768px; 1 columna antes. Preparada para más casos: cada .caso-card es
   independiente, no hay conteo fijo en el grid. --- */
.casos-grid{display:grid;grid-template-columns:1fr;margin-top:44px;border-top:1px solid var(--metal)}
@media (min-width:768px){.casos-grid{grid-template-columns:1fr 1fr}}
.caso-card{display:block;background:var(--blanco);text-decoration:none;color:inherit;
  border-bottom:1px solid var(--metal)}
@media (min-width:768px){
  .caso-card{border-right:1px solid var(--metal)}
  .caso-card:nth-child(2n){border-right:0}
  .caso-card:last-child{border-right:0}
}
.caso-card .cc-img{display:block;overflow:hidden;aspect-ratio:4/5;background:var(--papel)}
.caso-card .cc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.caso-card:hover .cc-img img{transform:scale(1.035)}
.caso-card .cc-body{display:block;padding:22px clamp(20px,3vw,32px) clamp(28px,3.6vw,40px)}
.caso-card .cc-cat{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 62;font-weight:600;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta2);display:block;margin-bottom:10px}
.caso-card .cc-title{font-family:'PP Editorial Old','Newsreader',Georgia,serif;font-optical-sizing:auto;font-weight:560;
  font-style:normal;font-size:clamp(26px,2.4vw,34px);line-height:1.1;color:var(--coral);display:block;
  margin-bottom:10px;transition:opacity .18s ease}
.caso-card:hover .cc-title{opacity:.75}
.caso-card .cc-desc{font-size:15px;color:var(--tinta2);max-width:48ch;margin:0}
@media (prefers-reduced-motion: reduce){.caso-card .cc-img img{transition:none}}

.nota-editorial{
  border-left:4px solid var(--coral);padding:6px 0 6px 24px;margin-top:44px;max-width:60ch;
}
.nota-editorial .serifit{font-size:clamp(20px,2.2vw,28px);display:block;margin-bottom:8px}
.nota-editorial p{color:var(--tinta2);font-size:16px}

/* --- Testimonios: galería de Home Y de /es/experiencia/ (2026-08-05:
   misma fuente TESTIMONIALS_PUBLISHED, mismo componente .tg-* en las
   dos páginas — se retiró el sistema antiguo .testimonio-*/.exp-*) ---
   Grilla de 2 columnas (1 en móvil), tarjetas horizontales: foto pequeña
   (64-80px desktop, 52-64px móvil) junto a un bloque de texto que ocupa
   la mayor parte de la tarjeta, con la cita como elemento principal —
   nombre, cargo/empresa y CTA siempre visibles, sin depender de hover.
   Mismo patrón de separadores que .svcs (tarjetas var(--blanco) sobre
   fondo var(--metal), gap de 2px). Clic en cualquier tarjeta abre el
   modal con el video completo (ver .tg-modal más abajo). */
.tg-intro{max-width:640px;margin-bottom:40px}
.tg-intro .psub{margin-top:8px}
.exp-tg{padding-top:0}
@media (max-width:700px){.exp-tg{padding-top:8px}}
/* sin align-items:start a propósito: dos tarjetas vecinas con distinta
   cantidad de contenido (con/sin cita) deben quedar de igual altura —
   la tarjeta más corta estira su propio fondo var(--blanco), que se
   funde con el fondo de página en vez de dejar ver un bloque gris
   var(--metal) suelto (el gris solo debe verse como línea de 2px entre
   tarjetas, nunca como área rectangular). */
.tg-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--metal)}
/* con un número impar de testimonios publicados, la última tarjeta ocupa
   el ancho completo en vez de dejar una celda vacía (mismo patrón que
   .svcs.odd-last, ver comentario junto a esa regla). */
.tg-grid > :nth-child(odd):last-child{grid-column:1/-1}

.tg-card{
  display:flex;align-items:flex-start;gap:16px;width:100%;
  padding:clamp(22px,2.6vw,30px);margin:0;border:0;background:var(--blanco);
  cursor:pointer;text-align:left;font:inherit;color:inherit;transition:background-color .2s ease;
}
@media (hover:hover){.tg-card:hover{background:var(--papel)}}
.tg-card:focus-visible{background:var(--papel)}
.tg-photo{flex:0 0 auto;width:76px;height:76px;border-radius:50%;overflow:hidden;background:var(--papel)}
.tg-photo img{width:100%;height:100%;object-fit:cover;display:block}
.tg-body{flex:1 1 auto;min-width:0}
.tg-quote{font-family:'PP Editorial Old','Newsreader',Georgia,serif;font-optical-sizing:auto;font-style:italic;
  font-weight:520;font-size:clamp(16px,1.6vw,19px);line-height:1.32;margin-bottom:10px}
.tg-noquote{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 62;font-weight:600;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta2);display:block;margin-bottom:10px}
.tg-name{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 62;font-weight:700;font-size:14px;display:block}
.tg-role{font-size:13px;color:var(--tinta2);display:block;margin-top:2px;max-width:42ch}
.tg-cta{display:inline-flex;align-items:center;gap:7px;margin-top:10px;font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 62;
  font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--coral)}
.tg-cta-play{flex:0 0 auto}

/* Home móvil (2026-08-05): reconstrucción del layout móvil de
   Testimonios — una columna en flujo simple (no grid), divisores finos
   de 1px (sistema editorial JVD, igual criterio que .dlist/.svcs) en
   vez del truco de gap+background, separación vertical 20-28px real
   entre tarjetas, sin fondo gris de bloque y sin bordes redondeados
   (button ya resetea appearance nativa arriba). Foto circular 56-64px,
   extracto como elemento principal, CTA con ▶ siempre visible. */
@media (max-width:700px){
  .tg-grid{display:block;background:none}
  .tg-grid > :nth-child(odd):last-child{grid-column:auto}
  .tg-card{
    display:flex;gap:14px;width:100%;
    padding:0;margin-top:24px;
    border:0;border-top:1px solid var(--metal);
    background:none;
  }
  .tg-card:first-child{border-top:0;margin-top:0}
  .tg-photo{width:58px;height:58px}
}

.tg-modal{position:fixed;inset:0;z-index:200;display:none}
.tg-modal.on{display:block}
.tg-modal-backdrop{position:absolute;inset:0;background:rgba(26,26,26,.86)}
.tg-modal-panel{
  position:relative;z-index:1;max-width:820px;margin:5vh auto;max-height:90vh;overflow:auto;
  background:var(--blanco);padding:clamp(20px,3vw,36px);display:grid;gap:clamp(20px,3vw,32px);
}
@media (min-width:760px){.tg-modal-panel{grid-template-columns:280px 1fr;align-items:start}}
.tg-modal-close{
  position:absolute;top:12px;right:12px;width:36px;height:36px;background:var(--blanco);
  border:1px solid var(--metal);font-size:16px;cursor:pointer;z-index:2;
}
.tg-modal-video{width:100%;height:auto;aspect-ratio:9/16;background:var(--negro);display:block}
.tg-modal-info h3{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 62;font-weight:700;font-size:20px;margin-bottom:6px}
.tg-modal-role{color:var(--tinta2);font-size:14px;margin-bottom:18px}
.tg-modal-quote{font-family:'PP Editorial Old','Newsreader',Georgia,serif;font-optical-sizing:auto;font-style:italic;
  font-weight:520;font-size:clamp(18px,2vw,22px);line-height:1.4;margin-bottom:18px}
.tg-modal-quote:empty{display:none}


/* servicios */
.svcs{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--metal);margin-top:44px}
@media (max-width:820px){.svcs{grid-template-columns:1fr}}
/* grillas de 2 columnas con número impar de tarjetas (Home ¿Qué necesitas
   resolver?, Servicios, Estudio Equipo): si la última tarjeta cae en
   posición impar (o sea, el total de tarjetas es impar y quedaría sola en
   la fila final) ocupa el ancho completo en vez de dejar una celda vacía.
   Con un total par no aplica: :nth-child(odd) no coincide con la última. */
.svcs.odd-last > :nth-child(odd):last-child{grid-column:1/-1}
@media (max-width:820px){.svcs.odd-last > :nth-child(odd):last-child{grid-column:auto}}
.svc{background:var(--blanco);padding:clamp(28px,3.4vw,48px) clamp(22px,2.6vw,40px)}
.svc h3{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 62;font-weight:700;
  font-size:19px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.svc p{color:var(--tinta2);font-size:17px;max-width:44ch}
/* enlaces con ancla (Home ¿Qué necesitas resolver? -> tarjetas de Servicios):
   compensa el header sticky (104px / 72px en móvil) para que el título de la
   tarjeta no quede tapado al llegar por ancla. */
.svc[id]{scroll-margin-top:128px}
@media (max-width:1020px){.svc[id]{scroll-margin-top:96px}}

/* estudio video */
.videofull video{width:100%;height:auto;aspect-ratio:1920/638;object-fit:cover;background:var(--negro)}
.vmeta{font-size:14px;color:var(--tinta2);margin-top:14px;max-width:60ch}

/* ideas */
.pilares{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:44px}
@media (max-width:900px){.pilares{grid-template-columns:1fr;gap:26px}}
.pilar .linea{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 62;font-weight:700;
  font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--negro);
  border-top:2px solid var(--negro);padding-top:14px;display:block;margin-bottom:12px}
.pilar h3{font-family:'PP Editorial Old','Newsreader',Georgia,serif;font-optical-sizing:auto;font-weight:560;
  font-style:normal;font-size:26px;line-height:1.12;margin-bottom:10px}
.pilar p{font-size:15px;color:var(--tinta2)}

/* artículo / plantillas */
.articulo{max-width:760px;margin:0 auto}

/* WHO IS THIS — ancho editorial ampliado en desktop, solo esta página
   (build.mjs, casoWhoIsThis). No afecta a .articulo base ni a otros casos. */
.wit-ancho{max-width:760px}
@media (min-width:900px){.wit-ancho{max-width:1040px}}
.articulo .meta{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 62;font-weight:600;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta2);margin-bottom:18px}
.articulo h1{font-size:clamp(34px,5vw,64px);margin-bottom:20px}
.articulo .lead{font-family:'PP Editorial Old','Newsreader',Georgia,serif;font-optical-sizing:auto;font-style:normal;
  font-weight:500;font-size:clamp(21px,2.4vw,28px);line-height:1.3;color:var(--tinta2);margin-bottom:36px}
.articulo h2{font-size:clamp(22px,2.6vw,32px);margin:44px 0 14px}
.articulo p{margin-bottom:18px}
.ficha{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--metal);margin:44px 0}
@media (max-width:700px){.ficha{grid-template-columns:1fr}}
.ficha div{background:var(--papel);padding:18px 20px}
.ficha dt{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 62;font-weight:700;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta2);margin-bottom:4px}
.ficha dd{margin:0;font-size:16px}

/* --- cierre y footer --- */
.cierre{text-align:left}
.cierre .frase{display:inline-block;background:var(--coral);color:var(--blanco);
  font-family:'PP Editorial Old','Newsreader',Georgia,serif;font-optical-sizing:auto;font-style:italic;font-weight:520;
  font-size:clamp(34px,6vw,76px);padding:.06em .22em .14em;margin-bottom:36px}
footer{border-top:1px solid var(--metal)}
footer .in{max-width:var(--max);margin:0 auto;padding:48px var(--gut) 40px;
  display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:start;
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 62;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinta2)}
@media (max-width:760px){footer .in{grid-template-columns:1fr;gap:28px}}
footer .flogo img{height:30px;width:auto}
footer nav{display:flex;flex-wrap:wrap;gap:8px 22px}
@media (max-width:760px){footer nav{flex-direction:column;gap:14px;padding-top:24px;border-top:1px solid var(--metal)}}
footer a{text-decoration:none}
footer a:hover{color:var(--negro)}
footer .fdatos{display:flex;flex-direction:column;gap:8px;text-align:right}
@media (max-width:760px){
  footer .fdatos{text-align:left;gap:18px;padding-top:24px;border-top:1px solid var(--metal)}
  footer .fdatos span{display:block}
}
footer .fdatos em{color:var(--negro);font-style:normal}

/* --- conversemos / formulario --- */
.conv{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px)}
@media (max-width:920px){.conv{grid-template-columns:1fr}}
.conv h1{font-size:clamp(44px,7vw,96px);margin-bottom:24px}
.conv .lead{font-family:'PP Editorial Old','Newsreader',Georgia,serif;font-optical-sizing:auto;font-style:italic;
  font-weight:520;font-size:clamp(22px,2.4vw,30px);line-height:1.25;max-width:26ch;margin-bottom:28px}
.conv .alt{font-size:15px;color:var(--tinta2);max-width:40ch}
.conv-datos{border-top:1px solid var(--metal);margin-top:32px;padding-top:26px;
  display:flex;flex-direction:column;gap:16px}
.conv-datos dt{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 62;font-weight:700;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta2);margin-bottom:4px}
.conv-datos dd{margin:0;font-size:15px}
.conv-datos a{text-decoration:none;border-bottom:1px solid var(--metal);padding-bottom:1px}
.conv-datos a:hover{color:var(--negro);border-bottom-color:var(--negro)}
form .campo{margin-bottom:26px}
label{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 62;font-weight:700;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;display:block;margin-bottom:8px}
input[type=text],input[type=email],select,textarea{
  width:100%;border:0;border-bottom:2px solid var(--negro);background:transparent;
  padding:10px 2px;font:inherit;font-size:18px;border-radius:0;
}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:var(--coral)}
.err{display:none;color:var(--negro);font-size:14px;margin-top:6px}
.campo.invalid input,.campo.invalid select,.campo.invalid textarea{border-bottom-color:var(--coral)}
.campo.invalid .err{display:block}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--tinta2);max-width:52ch}
.consent input{width:20px;height:20px;margin-top:2px;accent-color:var(--coral)}
.consent label{text-transform:none;letter-spacing:0;font-family:'Source Sans 3',sans-serif;
  font-weight:400;font-size:14px;margin:0}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.fmsg{display:none;border-left:4px solid var(--coral);padding:8px 0 8px 24px;margin-top:24px}
.fmsg.on{display:block}
.fmsg .serifit{font-size:28px;display:block;margin-bottom:8px}
.fmsg.error{border-left-color:var(--negro)}
.fmsg p{max-width:52ch}
button[type=submit]:disabled{opacity:.6;cursor:progress}

/* --- reveal --- */
.rev{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.rev.vis{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.rev{opacity:1;transform:none}}

@media (max-width:1020px){
  nav.main,.navin .langs,.navin .cta{display:none}
  .burger{display:block}
  .logo .logo-h{display:none}
  .logo .logo-m{display:block}
  .navin{height:72px}
}