/* ==========================================================================
   Cavas Hub — prototipo
   Estructura: fiel a la propuesta web de OeFe Studio (referencia_web.jpeg).
   Tokens: derivados de estetica_marca_cavas.pdf.
   ========================================================================== */

:root{
  /* HEX oficiales del manual de marca de OeFe, pág. 29 (verificado 2026-09-11).
     Antes estaban deducidos del PDF y cuatro venían corridos por 1-2 puntos. */
  --hueso:#EDE9E2;
  --bordo:#3D1812;
  --chocolate:#532815;
  --siena:#8C522D;
  --terracota:#DE6337;
  --arena:#C6B9A8;
  --carbon:#272727;

  --tinta:#3D1812;
  --tinta-suave:#7A5A4B;
  --linea:rgba(61,24,18,.13);
  --linea-clara:rgba(237,233,226,.18);

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Uncut Sans","Switzer",-apple-system,sans-serif;
  --mono:"Roboto Mono",ui-monospace,monospace;

  /* Margen lateral medido sobre el mockup de OeFe: el contenido arranca en x=161 de 8000,
     o sea 2,01% del ancho. El nuestro venía en 4,6% y estrechaba todo el sitio. */
  --pad:clamp(22px,2.05vw,46px);
  /* en pantallas anchas el contenido se topa en 1600px y queda centrado;
     los fondos siguen a sangre, como en la referencia */
  --lienzo:1600px;
  --gutter:max(var(--pad), calc((100% - var(--lienzo)) / 2));
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-inout:cubic-bezier(.76,0,.24,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--hueso);color:var(--tinta);
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit;background:none;border:none;border-radius:0}
::selection{background:var(--terracota);color:var(--hueso)}

/* ── primitivas ────────────────────────────────────────────────────────── */
.eyebrow{font-size:clamp(9px,.7vw,10.5px);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;line-height:1.4}
.meta{font-family:var(--mono);font-size:clamp(8.5px,.66vw,10px);letter-spacing:.14em;
  text-transform:uppercase;line-height:1.9}
/* el manual titula en versalitas de Cormorant: alto contraste, peso 300 */
.caps{font-family:var(--serif);font-weight:300;text-transform:uppercase;letter-spacing:.012em}
/* escala medida contra referencia_web.jpeg: el display ocupa ~68% del ancho de pagina.
   el vw es lineal a proposito, para que la proporcion se mantenga en todo el rango */
.d1{font-size:clamp(2.2rem,5.12vw,6.1rem);line-height:1.1}
.d3{font-size:clamp(1.2rem,2.05vw,2.05rem);line-height:1.32}
.prosa{font-size:clamp(12.5px,.94vw,14px);line-height:1.95;color:var(--tinta-suave);font-weight:300}

.link{position:relative;display:inline-flex;align-items:center;gap:8px;color:var(--terracota);
  padding-bottom:5px;width:fit-content;cursor:pointer}
.link::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;
  transform-origin:right;transition:transform .55s var(--e-out)}
.link:hover::after{transform:scaleX(0)}
.link .arw{transition:transform .55s var(--e-out)}
.link:hover .arw{transform:translate(4px,-4px)}
.link--light{color:var(--hueso)}
.link__mark{display:inline-block;width:clamp(46px,4.4vw,66px);vertical-align:middle;margin:0 2px}

:focus-visible{outline:1px solid var(--terracota);outline-offset:4px}

.grain::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  opacity:.4;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

/* el padding compensa el overflow:hidden para que no corte la base de las versalitas */
.mask{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.mask > span{display:block;will-change:transform}
.frame{position:relative;overflow:hidden;background:var(--carbon)}
.frame img{width:100%;height:100%;object-fit:cover;will-change:transform}
.section{padding:clamp(72px,11vh,140px) var(--gutter)}

/* ══ PRELOADER ═════════════════════════════════════════════════════════ */
#loader{position:fixed;inset:0;z-index:200;background:var(--bordo);display:flex;
  align-items:center;justify-content:center}
/* mismo tamaño que el logo del hero (.hero__lockup img) para que la transición se mimetice.
   La posición exacta la fija el JS midiendo el hero mark. */
#loader img{width:min(34vw,454px);opacity:0}

/* ══ NAV ═══════════════════════════════════════════════════════════════ */
/* Como en la referencia: solo los 4 enlaces repartidos. El logo aparece al hacer scroll. */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:24px;
  padding:24px var(--gutter);color:var(--hueso);border-bottom:1px solid transparent;
  transition:background .6s var(--e-out),color .6s var(--e-out),padding .6s var(--e-out),
             border-color .6s var(--e-out)}
.nav__logo{position:relative;width:0;overflow:hidden;opacity:0;
  transition:width .6s var(--e-out),opacity .5s var(--e-out)}
.nav__logo img{display:block;width:100%}
.nav__logo--oscuro{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--e-out)}
.nav.is-solid .nav__logo--claro{opacity:0}
.nav.is-solid .nav__logo--oscuro{opacity:1}
.nav__logo--claro{transition:opacity .5s var(--e-out)}
/* fino como en la referencia — mucho más chico que los eyebrows grandes del hero */
.nav__links{flex:1;display:flex;justify-content:space-between;gap:clamp(16px,2vw,40px);
  font-size:clamp(10.4px,.8vw,12px)}
.nav__links a{position:relative;opacity:.82;transition:opacity .4s var(--e-out)}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e-out)}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after{transform:scaleX(1)}

.nav.is-solid{background:rgba(237,233,226,.95);backdrop-filter:blur(14px);color:var(--bordo);
  padding-top:16px;padding-bottom:16px;border-bottom-color:var(--linea)}
.nav.is-solid .nav__logo{width:clamp(96px,8.4vw,128px);opacity:1}
.nav.is-solid .nav__links{flex:0 1 auto;margin-left:auto;justify-content:flex-end;
  gap:clamp(20px,2.6vw,44px)}

.nav__burger{display:none;width:26px;height:16px;position:relative;cursor:pointer}
.nav__burger span{position:absolute;left:0;width:100%;height:1px;background:currentColor;
  transition:transform .5s var(--e-out)}
.nav__burger span:first-child{top:3px}
.nav__burger span:last-child{bottom:3px}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-5px) rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:90;background:var(--bordo);color:var(--hueso);
  display:flex;flex-direction:column;padding:104px var(--gutter) 40px;
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--e-inout)}
.menu[hidden]{display:none}
.menu.is-open{clip-path:inset(0 0 0 0)}
.menu__links{display:flex;flex-direction:column;gap:clamp(12px,2.4vh,22px)}
.menu__links a{font-family:var(--serif);font-weight:300;font-size:clamp(1.9rem,8.5vw,2.8rem);
  line-height:1.05;opacity:.92}
.menu__links a.is-cta{font-style:italic;color:var(--terracota)}
.menu__foot{display:flex;flex-direction:column;gap:4px;opacity:.5;margin-top:auto;
  border-top:1px solid var(--linea-clara);padding-top:22px}

/* ══ HERO ══════════════════════════════════════════════════════════════ */
/* mas baja que la ventana: el manifiesto asoma. +10% de alto vs antes → menos horizontal */
/* Alto medido sobre el mockup de OeFe: el hero ocupa 0,570 del ancho de página
   (4557 px de alto sobre 8000 de ancho). El tope en svh evita que en pantallas
   muy anchas quede más alto que el viewport, que sería peor de usar. */
.hero{position:relative;height:clamp(540px,min(57vw,92svh),1000px);overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.hero__media{position:absolute;inset:0;overflow:hidden}
/* Encuadre calcado de la referencia de OeFe (CavasHub_Web.ai): usa el render completo a
   todo el ancho y lo ancla ABAJO, de modo que la toma queda sobre el acceso y la marquesina.
   El logotipo del hero cae justo encima de la puerta — ahí es donde en la referencia se lee
   "cavas hub". OJO: el cartel NO está en el render; es el logotipo de la página. */
.hero__media img{position:absolute;top:-6%;left:0;width:100%;height:112%;
  object-fit:cover;object-position:50% 100%;will-change:transform}
/* Velo aligerado para igualar la referencia de OeFe, donde el render se ve limpio y el
   texto blanco apoya directo sobre la fachada. Sólo queda el degradado mínimo arriba (para
   que el nav se lea sobre las ventanas encendidas) y abajo (para el CTA sobre el pavimento). */
.hero__veil{position:absolute;inset:0;z-index:2;background:
  linear-gradient(180deg,rgba(39,39,39,.34) 0%,rgba(61,24,18,0) 26%,
                        rgba(61,24,18,0) 72%,rgba(39,39,39,.42) 100%),
  radial-gradient(120% 70% at 50% 55%,rgba(222,99,55,.06),transparent 62%)}

/* eyebrow · logotipo · eyebrow en una sola línea, como en la referencia */
/* grid 1fr auto 1fr: el logotipo queda en el centro exacto pase lo que pase con
   el ancho de los eyebrows (con flex, el mas largo lo corria de lugar) */
.hero__lockup{position:relative;z-index:4;width:100%;padding:0 var(--gutter);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(18px,3.4vw,58px);color:var(--hueso)}
.hero__lockup .eyebrow:first-child{justify-self:center;text-align:center}
.hero__lockup .eyebrow:last-child{justify-self:center;text-align:center}
/* visible por defecto: si el JS no corre, el logotipo igual se ve */
.hero__lockup img{width:min(34vw,454px)}
.hero__lockup .eyebrow{white-space:nowrap}

/* ── tamaño de marca "ESPACIO QUE IMPULSA": en la referencia mide ~25% del ancho
   y es consistente en hero, manifiesto, identidad y footer (no es un eyebrow fino) ── */
.hero__lockup .eyebrow:first-child,
.identidad__meta .eyebrow,
.footer .eyebrow:first-child{font-size:clamp(14px,1.8vw,34px);letter-spacing:.1em}
/* "EDIFICIO PARA PROFESIONALES": un escalón más chico, como su par en la referencia */
.hero__lockup .eyebrow:last-child,
.footer .eyebrow:last-child{font-size:clamp(11px,1.12vw,21px);letter-spacing:.1em}

.hero__foot{position:absolute;left:0;right:0;bottom:clamp(56px,11vh,116px);z-index:4;
  display:flex;justify-content:center}
/* "CONTACTANOS": mediano — más que un eyebrow fino, menos que "ESPACIO QUE IMPULSA" */
#heroCta{font-size:clamp(11px,.98vw,15px);letter-spacing:.16em}
.hero__cue{position:absolute;left:50%;bottom:0;z-index:4;width:1px;height:clamp(34px,6vh,54px);
  background:linear-gradient(180deg,transparent,rgba(237,233,226,.75));transform:translateX(-50%)}
.hero__cue::after{content:"";position:absolute;inset:0;background:var(--terracota);
  animation:cue 2.6s var(--e-inout) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}}

/* ══ MANIFIESTO ════════════════════════════════════════════════════════ */
.manifiesto{position:relative;overflow:hidden;text-align:center}
/* el halo va primero en el orden pero se declara despues: con igual especificidad
   gana la ultima regla, y si no queda absolute ocupa lugar en el flujo */
.manifiesto > *{position:relative}
.manifiesto__halo{position:absolute;left:50%;top:-8%;width:min(1150px,92vw);height:86%;
  transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(198,185,168,.5),transparent 62%);
  pointer-events:none}
/* el bloque de texto ocupa ~44% del ancho, como en la referencia: mas aire por linea */
.manifiesto__texto{max-width:min(44.5vw,880px);margin:0 auto;display:flex;flex-direction:column;gap:14px}
/* Calibrado contra el mockup de OeFe (CavasHub_Web.ai, 2026-09-11): con el mismo ancho de
   bloque (44,2% de la página, medido), el primer párrafo entra en 6 líneas en el mockup y
   entraba en 8 en el nuestro ⇒ factor 0,75 sobre el tamaño anterior (era 1.42vw).
   Es lo que hacía que nuestro manifiesto midiera 1,005 anchos contra los 0,664 del mockup. */
.manifiesto__texto .prosa{font-size:clamp(12.5px,1.065vw,20.4px);line-height:1.34}
/* El interlineado del mockup es apretado a propósito (1,3 aprox, medido por autocorrelación
   sobre el bloque de prosa). El nuestro venía en 1,89 y por eso el manifiesto medía de más. */
.manifiesto__izq{color:var(--terracota);text-align:left;margin-top:clamp(52px,9vh,96px);
  font-size:clamp(14px,1.8vw,34px);letter-spacing:.13em}
.manifiesto__der{color:var(--terracota);text-align:right;margin-top:clamp(30px,5vh,52px);
  font-size:clamp(11px,1.12vw,21px);letter-spacing:.13em}
.manifiesto .d1{margin-top:clamp(26px,4.6vh,48px)}
/* +10% y más ancho: entra en menos líneas, sigue centrado */
.manifiesto__sub{margin:clamp(22px,3.6vh,38px) auto 0;font-family:var(--serif);
  font-size:clamp(17.6px,1.5vw,28.6px);color:var(--tinta-suave);max-width:min(82vw,1000px)}

/* ══ TIPOLOGÍAS ════════════════════════════════════════════════════════ */
.tipos{padding-bottom:clamp(56px,8.5vh,100px)}
.tipos__title{text-align:center;font-size:clamp(1.05rem,1.58vw,1.95rem);
  padding:0 var(--gutter) clamp(34px,6vh,64px)}
/* tira de 4 imágenes a sangre, pegadas — como la referencia */
/* TRES fotos, no cuatro: así está en la referencia de OeFe (CavasHub_Web.ai, 2026-09-11).
   Medido sobre el diseño de 8000px: imágenes a x=164, 2740 y 5552, con el gap mayor
   antes de la tercera. Las cuatro columnas de texto van en grilla propia debajo y NO
   se alinean con las fotos — eso también es de la referencia. */
.tipos__strip{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  padding:0 var(--gutter)}
/* proporción medida sobre el diseño de OeFe: 2516 x 1808 px ⇒ 1.39 */
.tipos__strip .frame{aspect-ratio:1.39}
/* ajuste de encuadre por foto: descortar personas dentro de cada recuadro */
.tipos__strip .frame:nth-child(3) img{object-position:38% 50%}  /* terraza: descorta a la persona del borde */
/* Cuatro columnas de texto en grilla propia. Ya NO se alinean con las fotos: la tira
   tiene tres y el texto cuatro, tal como en la referencia de OeFe.
   "Descubrí más" sale del grid (position:absolute) para no robarle ancho a las columnas —
   con una 5ª columna "auto" cada track se achicaba y la 4ª quedaba corrida a la izquierda */
.tipos__cols{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
  padding:clamp(26px,4vh,44px) var(--gutter) 0;align-items:stretch}
.tipos__cols article{display:flex;flex-direction:column;padding-right:clamp(14px,2vw,28px)}
.tipos__cols h3{font-size:clamp(13px,1.12vw,17px);line-height:1.24;margin-bottom:14px}
.tipos__cols p{font-size:11.5px;line-height:1.8;color:var(--tinta-suave);max-width:30ch}
/* margin-top auto alinea los m² de las cuatro columnas en una misma línea */
.tipos__m{display:block;margin-top:auto;padding-top:16px;font-family:var(--mono);font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;opacity:.5}
/* alineado con la fila de h3: mismo valor que el padding-top del grid, para que quede a la misma altura */
.tipos__mas{position:absolute;top:clamp(26px,4vh,44px);right:var(--gutter)}

/* ══ SPLIT ═════════════════════════════════════════════════════════════ */
/* proporción medida sobre el mockup: la foto ocupa 60,8% y el bloque siena 39,2% */
.split{display:grid;grid-template-columns:1.551fr 1fr;min-height:min(72vh,620px)}
.split__media{min-height:46vh}
/* la foto muestra la fachada frontal entera; 32% descorta los pies de la pareja sin perder el remate */
.split__media img{object-position:50% 32%}
.split__tx{background:var(--siena);color:var(--hueso);position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;padding:clamp(34px,4.6vw,72px)}
.split__tx .d3{position:relative;z-index:2}
.split__tx .link{margin-top:clamp(20px,3.4vh,34px);position:relative;z-index:2}

/* ══ LLAMADO CENTRAL ═══════════════════════════════════════════════════ */
.cta-centro{display:flex;justify-content:center;padding:clamp(40px,7vh,84px) var(--gutter)}

/* ══ IDENTIDAD ═════════════════════════════════════════════════════════ */
.identidad{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:center;
  gap:clamp(24px,4vw,64px);padding:clamp(20px,4vh,44px) var(--gutter) clamp(56px,9vh,100px)}
.identidad__logo{width:min(26vw,300px)}
/* 4 fotos, como en la referencia — una domina (izquierda alta) y tres acompañan */
/* TRES imágenes, como la referencia de OeFe: café vertical ocupando toda la altura a la
   izquierda, consultorio arriba a la derecha, terraza abajo a la derecha.
   Proporción medida sobre el diseño: mitad y mitad, con aspecto ~1.4. */
.identidad__collage{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  gap:4px;aspect-ratio:1.4}
.identidad__collage .frame{aspect-ratio:auto;height:100%}
.identidad__c1{grid-row:1/3}              /* café, vertical, dos filas a la izquierda */
.identidad__c2{grid-column:2;grid-row:1}  /* consultorio, arriba a la derecha */
.identidad__c3{grid-column:2;grid-row:2}  /* terraza, abajo a la derecha */
.identidad__meta{justify-self:end;text-align:right;display:flex;flex-direction:column;gap:12px}
.identidad__desc{font-size:clamp(11px,1.12vw,21px);letter-spacing:.1em;line-height:1.3}
.identidad__loc{display:flex;justify-content:space-between;gap:clamp(28px,5vw,80px);opacity:.6}

/* ══ CONTACTO ══════════════════════════════════════════════════════════ */
.contacto{padding:0 var(--gutter) clamp(56px,9vh,104px)}
.form{display:grid;grid-template-columns:.85fr 1.15fr .9fr;gap:clamp(26px,4vw,64px);align-items:start}
.form__col{display:flex;flex-direction:column}
.field{border-bottom:1px solid var(--linea);padding:16px 0;transition:border-color .5s var(--e-out)}
.field:focus-within,.field:hover{border-color:var(--siena)}
.field label{display:block;font-family:var(--sans);font-size:clamp(11px,.88vw,13.2px);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.field input,.field textarea,.field select{width:100%;font-size:12.5px;color:var(--tinta)}
.field textarea{resize:none;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:rgba(59,24,18,.34)}
.field select{appearance:none;cursor:pointer;color:rgba(59,24,18,.34)}
.field select:valid{color:var(--tinta)}
.field.is-select{position:relative}
.field.is-select::after{content:"";position:absolute;right:2px;bottom:24px;width:6px;height:6px;
  border-right:1px solid var(--tinta);border-bottom:1px solid var(--tinta);transform:rotate(45deg);opacity:.45}
.form__send{margin-top:clamp(26px,4.5vh,44px)}
.form__ok{margin-top:16px;color:var(--siena);font-family:var(--serif);font-style:italic;
  font-size:15px;opacity:0;transition:opacity .6s var(--e-out)}
.form__ok.show{opacity:1}

/* Mapa real de la referencia de OeFe. El rótulo "cavas hub" ya viene dentro de la
   imagen, así que no lleva pin propio. */
.form__map{position:relative;background:#E5E0D7;overflow:hidden;aspect-ratio:4/3;
  border:1px solid var(--linea)}
.form__map img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ══ FOOTER ════════════════════════════════════════════════════════════ */
.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:clamp(28px,5vh,52px) var(--gutter) clamp(20px,3vh,32px);border-top:1px solid var(--linea)}
.footer img{width:min(30vw,360px)}
.nota-proto{padding:0 var(--gutter) 26px;font-size:10px;opacity:.3;letter-spacing:.03em}

/* ══ RESPONSIVE ════════════════════════════════════════════════════════ */
@media(max-width:1100px){
  /* debajo de 1100px la tira de fotos sigue en 4 columnas pero el texto pasa a 2:
     ya no hace falta alinear pixel a pixel, así que el botón vuelve al flujo normal */
  .tipos__cols{grid-template-columns:repeat(2,1fr);gap:clamp(18px,3vw,32px);row-gap:clamp(24px,4vh,40px)}
  .tipos__mas{position:static;top:auto;right:auto;grid-column:1/-1;justify-self:end;margin-top:8px}
  .form{grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px)}
  .form__map{grid-column:1/-1;aspect-ratio:16/7}
}
@media(max-width:960px){
  .manifiesto__texto{max-width:min(72vw,620px)}
}
@media(max-width:860px){
  .nav__links{display:none}
  .nav__burger{display:block;margin-left:auto}
  .nav__logo{width:clamp(96px,14vw,120px);opacity:1}
  .split{grid-template-columns:1fr}
  .identidad{grid-template-columns:1fr;gap:clamp(28px,5vh,48px);text-align:center}
  .identidad__logo{margin:0 auto}
  .identidad__meta{justify-self:center;text-align:center;align-items:center}
  .identidad__loc{gap:24px}
}
@media(max-width:640px){
  /* En el móvil mandan la lectura y el aire, no la fidelidad al artboard: OeFe entregó
     un mockup de escritorio y nunca dibujó esta versión. El interlineado apretado de 1,34
     funciona a 20px pero asfixia a 12,5px. */
  .manifiesto__texto .prosa{line-height:1.62}
  .manifiesto__texto{gap:18px}
  /* los eyebrows largos entraban justos y quedaban pegados a los bordes */
  .eyebrow{letter-spacing:.09em}
  .hero__lockup{grid-template-columns:1fr;justify-items:center;gap:20px}
  .hero__lockup img{width:72vw}
  .manifiesto__texto{max-width:100%}
  /* una sola columna: con tres fotos, dos columnas dejan la tercera coja */
  .tipos__strip{grid-template-columns:1fr;gap:4px}
  .tipos__strip .frame{aspect-ratio:1.5}
  .tipos__cols{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .footer{flex-direction:column;gap:20px;text-align:center}
  .footer img{width:64vw}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .hero__lockup img{opacity:1 !important}
}