/* ============================================================
   CAMPO ESTUDIO — 2026
   Sistema de diseño · minimal editorial
   ============================================================ */

/* ---------- Fuentes ---------- */
@font-face{
  font-family:"Sans Contrasted Ahva";
  src:url("../fonts/SansContrastedAhva17.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  /* Marca */
  --green:#687A54;
  --orange:#D8612B;
  --brown:#5F4021;
  --slate:#75869A;
  --olive:#918F3A;
  --sage:#91A984;
  --grey-mid:#8F8F8F;
  --grey-dark:#646464;
  --grey-light:#D4D4D4;

  /* Base */
  --paper:#F7F5EF;
  --paper-2:#EFEBE1;

  /* Tintes de la paleta (para dar color sin peso) */
  --tint-sage:#E9EEE4;
  --tint-slate:#E7ECF0;
  --tint-clay:#F6E9E0;
  --tint-olive:#F0F0E0;

  /* Plenos medios (intros de interna, formulario, acento de banda) */
  --form:#E2E2E2;
  --clay-mid:#EDC6B7;
  --slate-mid:#D6DBE1;
  --em-accent:#E08155;
  --footer:#E2E2E2;

  --ink:#2A251F;
  --ink-soft:#6B6459;

  /* Tipografías */
  --font-display:"Sans Contrasted Ahva","Times New Roman",serif;
  --font-head:"Manrope",system-ui,sans-serif;
  --font-body:"Open Sans",system-ui,sans-serif;

  /* Ritmo */
  --gutter:clamp(1.25rem,4vw,4rem);
  --section:clamp(5rem,12vw,11rem);
  --maxw:1680px;
  --radius:14px;

  /* Navegador lateral de "Casos de estudio" (.proj-nav): mismas variables
     en su propia regla y en el padding que le reserva `.projs` — así nunca
     pueden desincronizarse (ver esa sección). */
  --proj-nav-w:min(300px,22vw);
  --proj-nav-gap:clamp(1rem,2.4vw,2.2rem);

  /* Movimiento */
  --ease:cubic-bezier(.22,.61,.36,1);
  --slow:1.1s;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%;height:auto}
img{border-radius:var(--radius)}
.studio__fig,.card3 figure,.nav__figure,.hpanel figure,.slide,.slide img{border-radius:var(--radius)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
::selection{background:var(--orange);color:var(--paper)}

/* ---------- Tipografía base ---------- */
h1,h2,h3,h4{font-weight:400;line-height:1.02;letter-spacing:-.01em}
.display{font-family:var(--font-display);text-transform:uppercase}
.eyebrow{
  font-family:var(--font-head);
  font-size:.72rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--green);
}
.lead{font-size:clamp(1.05rem,1.6vw,1.35rem);color:var(--ink-soft);max-width:42ch}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.hairline{height:1px;background:var(--grey-light);border:0}

/* ============================================================
   LOADER
   ============================================================ */
.loader{
  position:fixed;inset:0;z-index:200;
  background:var(--paper);
  display:grid;place-items:center;
  transition:opacity 1s var(--ease),visibility 1s var(--ease);
}
.loader__mark{width:min(40vw,360px);opacity:0;transform:scale(.96);
  animation:loaderIn 1.2s var(--ease) forwards}
.loader.is-done{opacity:0;visibility:hidden}
@keyframes loaderIn{to{opacity:1;transform:none}}

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  display:flex;align-items:center;justify-content:flex-end;
  padding:clamp(1rem,2.2vw,1.7rem) var(--gutter);
  transition:transform .5s var(--ease);
}
.header.is-hidden{transform:translateY(-110%)}
.menu-btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-head);color:#000;
  font-size:.8rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  padding:.5rem .9rem;border-radius:999px;
  background:rgba(255,255,255,.28);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .4s var(--ease);
}
.menu-btn__word{position:relative}
.menu-btn__mark{width:7px;height:7px;border-radius:50%;background:currentColor;
  transition:transform .5s var(--ease)}
.menu-btn:hover .menu-btn__mark{transform:scale(1.6)}

/* ============================================================
   MENÚ OVERLAY
   ============================================================ */
.nav{
  position:fixed;inset:0;z-index:110;
  background:var(--green);color:var(--paper);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .9s var(--ease);
  pointer-events:none;
}
.nav.is-open{clip-path:inset(0 0 0 0);pointer-events:auto}
.nav__close{position:absolute;top:clamp(1rem,2.2vw,1.7rem);right:var(--gutter);
  font-family:var(--font-head);font-size:.76rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--paper);z-index:3;opacity:.85;transition:opacity .3s}
.nav__close:hover{opacity:1}
.nav__list{position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(.55rem,1.5vw,1.15rem);padding-left:var(--gutter);max-width:62%}
.nav__item{overflow:hidden}
.nav__item a{
  display:inline-flex;align-items:baseline;gap:1rem;
  font-family:var(--font-display);
  font-size:clamp(1.7rem,3.6vw,3rem);line-height:1.1;
  color:var(--paper);
  transform:translateY(115%);
  transition:transform .8s var(--ease),opacity .45s var(--ease);
}
.nav.is-open .nav__item a{transform:none}
.nav__list:hover .nav__item a{opacity:.4}
.nav__list .nav__item a:hover{opacity:1}
.nav__item:nth-child(1) a{transition-delay:.08s}
.nav__item:nth-child(2) a{transition-delay:.13s}
.nav__item:nth-child(3) a{transition-delay:.18s}
.nav__item:nth-child(4) a{transition-delay:.23s}
.nav__item:nth-child(5) a{transition-delay:.28s}
.nav__item:nth-child(6) a{transition-delay:.33s}
.nav__item:nth-child(7) a{transition-delay:.38s}
.nav__item .idx{font-family:var(--font-head);font-size:.7rem;font-weight:600;
  opacity:.5;letter-spacing:.1em}
.nav__figure{position:absolute;top:50%;right:clamp(2rem,6vw,6rem);transform:translateY(-50%);
  width:min(32vw,400px);aspect-ratio:3/4;overflow:hidden;pointer-events:none;z-index:1;
  opacity:0;transition:opacity .6s var(--ease);background:rgba(0,0,0,.12)}
.nav__figure.is-show{opacity:1}
.nav__figure img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);transition:transform .9s var(--ease)}
.nav__figure.is-show img{transform:scale(1)}
.nav__foot{position:absolute;left:var(--gutter);bottom:clamp(1.4rem,3.5vw,2.6rem);z-index:2;
  display:flex;align-items:center;gap:clamp(1.1rem,2.5vw,1.8rem)}
.nav__foot a{display:inline-flex;color:var(--paper);opacity:.82;
  transition:opacity .3s,transform .35s var(--ease)}
.nav__foot svg{width:23px;height:23px}
.nav__foot a:hover{opacity:1;transform:translateY(-3px)}
@media(max-width:820px){
  .nav__figure{display:none}
  .nav__list{max-width:100%}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#0e0c0a}
.hero__media{position:absolute;inset:0}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__video--loop{opacity:0;transition:opacity 1.2s ease}
.hero.is-loop .hero__video--intro{opacity:0;transition:opacity 1.2s ease}
.hero.is-loop .hero__video--loop{opacity:1}
.hero__inner{position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;
  padding:var(--gutter);padding-bottom:clamp(2.5rem,6vw,5rem);color:var(--paper)}
.hero__scroll{font-family:var(--font-head);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;display:flex;align-items:center;gap:.7rem;
  text-shadow:0 1px 14px rgba(0,0,0,.45);transition:opacity 1s .3s var(--ease)}
html.js .hero__scroll{opacity:0}
html.js .hero.is-revealed .hero__scroll{opacity:1}
.hero__scroll::after{content:"";width:34px;height:1px;background:var(--paper);
  transform-origin:right;animation:scrollLine 1.8s var(--ease) infinite}
@keyframes fadeIn{to{opacity:1}}
@keyframes scrollLine{0%,100%{transform:scaleX(.3)}50%{transform:scaleX(1)}}

/* ============================================================
   REVEALS (scroll)
   ============================================================ */
/* Sin JS todo queda visible; las animaciones sólo existen bajo html.js */
html.js .reveal{opacity:0;transform:translateY(38px);
  transition:opacity 1s var(--ease),transform 1.1s var(--ease);
  transition-delay:calc(var(--i,0) * .085s)}
html.js .reveal.is-in{opacity:1;transform:none}
/* variante suave para stagger de títulos/párrafos */
html.js .reveal--soft{transform:translateY(18px);transition-duration:.9s,1s}
html.js .reveal--fade{transform:none}
html.js .reveal[data-delay="1"]{transition-delay:.12s}
html.js .reveal[data-delay="2"]{transition-delay:.24s}
html.js .reveal[data-delay="3"]{transition-delay:.36s}
html.js .clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ease)}
html.js .clip.is-in{clip-path:inset(0 0 0 0)}

/* ============================================================
   INTRO / MANIFIESTO
   ============================================================ */
.intro{border-top:1px solid var(--grey-light)}
.intro__statement{
  font-family:var(--font-head);font-weight:300;
  font-size:clamp(1.35rem,2.9vw,2.5rem);line-height:1.18;letter-spacing:-.02em;
  max-width:none;
}
@media(min-width:900px){.intro__statement{white-space:nowrap}}
.intro__statement em{font-family:var(--font-display);font-style:normal;color:var(--green);text-transform:uppercase}
/* Recurso lineal (hairline animada, eco de las líneas del video) */
.intro__rule{display:block;height:1px;width:100%;background:var(--grey-light);
  transform-origin:left;transition:transform 1.3s var(--ease);
  margin-top:clamp(1.6rem,3vw,2.4rem)}
html.js .intro__rule{transform:scaleX(0)}
html.js .intro__rule.is-in{transform:scaleX(1)}
/* Composición editorial: párrafo izq + galería der, alineados.
   `.intro__cards{min-width:0}`: sin esto, un grid item cuyo contenido no
   puede achicarse (el carrusel Swiper, con todas sus tarjetas clonadas para
   el loop) fuerza el ancho mínimo del renglón "1fr" al ancho de ESE
   contenido en vez del disponible — desborde horizontal en mobile/tablet. */
.intro__editorial{margin-top:clamp(2.5rem,6vw,4.5rem);display:grid;grid-template-columns:1fr;
  gap:clamp(2rem,5vw,3rem)}
.intro__cards{min-width:0}
.intro__lead{font-size:1.05rem;line-height:1.6;color:var(--ink-soft);max-width:38ch}
@media(min-width:900px){
  .intro__editorial{grid-template-columns:4fr 8fr;column-gap:clamp(2rem,4vw,3.5rem);align-items:center}
  .intro__lead{align-self:center}
}
/* Variante "ancho completo" (Membresías): sin párrafo al lado, un solo
   hijo de borde a borde — la usa Widget_Index_06_Estudio_Carousel con
   `full_width`. A propósito NO se resuelve pisando `grid-template-columns`
   sobre el mismo `display:grid`: ese es justo el problema que rompía esto
   — un grid de una sola columna todavía depende de esa propiedad, y
   cualquier otra regla que la vuelva a tocar más adelante en la cascada
   puede encajar la galería en la columna angosta de 4fr (chica, pegada a
   la izquierda) en vez de ocupar todo el ancho. Se saca el grid de en
   medio directamente: flex en columna, que por defecto estira a su único
   hijo (acá no hay nada más) al 100% del ancho disponible, sin tracks que
   calcular. Selector compuesto + `!important` para que gane pase lo que
   pase con el resto de la cascada. */
.intro__editorial.intro__editorial--full{display:flex!important;flex-direction:column!important}

/* El carrusel de tarjetas ("El Estudio") ahora es el widget Swiper de
   swiper-widgets.css/.js (`.campo-estudio-swiper` + `.swiper-slide`).
   Las reglas viejas de `.cards__stage`/`.cards__track`/`.card3` se quitaron
   de acá: `.card3` seguía existiendo dentro de cada `.swiper-slide`, así que
   `html.js .card3{opacity:.4}` (línea de abajo, ya borrada) se aplicaba
   siempre — su única salida (`.card3.is-active`) dependía de una clase que
   agregaba el JS del carrusel manual, borrado al pasar esto a Swiper — y
   se sumaba a la atenuación nueva del `.swiper-slide`, dejando todo el
   carrusel lavado/blancuzco. */

/* Marco rectangular que se traza al entrar en viewport — reutilizable */
.frame{position:absolute;inset:clamp(10px,1.4vw,18px);z-index:3;pointer-events:none}
.frame svg{width:100%;height:100%;overflow:visible;mix-blend-mode:difference}
.frame rect{fill:none;stroke:var(--paper);stroke-width:1.2px;vector-effect:non-scaling-stroke;
  transition:stroke-dashoffset 1.8s .2s var(--ease)}
html.js .frame rect{stroke-dasharray:1;stroke-dashoffset:1}
html.js .is-in .frame rect{stroke-dashoffset:0}

/* ============================================================
   LÍNEAS DE FONDO (guías verticales tipo grilla del video)
   ============================================================ */
.has-lines{position:relative}

/* ============================================================
   FRASE (separador editorial)
   ============================================================ */
.statement{padding-block:clamp(6rem,16vw,13rem);text-align:center;overflow:hidden}
.statement__text{font-family:var(--font-display);
  font-size:clamp(1.6rem,4vw,3.2rem);line-height:1.25;letter-spacing:.01em;
  color:var(--ink-soft);font-weight:400}
.statement__text em{font-style:normal;color:var(--green)}

/* ============================================================
   STACK — slides full-screen que suben como tarjetas (tipo Mondine)
   ============================================================ */
.stack{position:relative;background:var(--paper)}
.slide{position:sticky;top:0;height:100svh;overflow:hidden;
  box-shadow:0 -24px 70px rgba(20,17,13,.28)}
.slide img{width:100%;height:100%;object-fit:cover}
.slide__head{position:absolute;top:clamp(1.4rem,5vw,3.4rem);left:clamp(1.25rem,4vw,3rem);
  z-index:2;color:var(--paper)}
.slide__line{display:block;width:calc(100vw - 2 * var(--gutter));height:1px;background:var(--paper);
  transform-origin:left;transition:transform 1.3s var(--ease);
  margin-bottom:clamp(.9rem,1.8vw,1.5rem)}
html.js .slide__line{transform:scaleX(0)}
html.js .slide.is-active .slide__line{transform:scaleX(1)}
.slide__title{font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(2rem,6.5vw,5rem);line-height:1;text-shadow:0 1px 20px rgba(0,0,0,.4);
  transition:opacity .9s var(--ease),transform 1s var(--ease)}
html.js .slide__title{opacity:0;transform:translateY(18px)}
html.js .slide.is-active .slide__title{opacity:1;transform:none}
/* toda la diapositiva linkea a su interna */
.slide__link{position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;justify-content:flex-end;
  padding:clamp(1.4rem,4vw,3rem)}
.slide__cta{font-family:var(--font-head);font-size:.74rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--paper);padding-bottom:5px;border-bottom:1px solid currentColor;
  opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
html.js .slide.is-active .slide__cta{opacity:.9;transform:none}
.slide__link:hover .slide__cta{opacity:1}

/* ============================================================
   SHOWCASE HORIZONTAL (scroll vertical → desplazamiento horizontal)
   ============================================================ */
.showcase{position:relative;height:340vh;background:var(--paper)}
.showcase__sticky{position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;grid-template-rows:auto 1fr;align-items:center}
.showcase__head{position:relative;z-index:5;background:var(--paper);
  padding:clamp(4.5rem,8vw,6.5rem) var(--gutter) clamp(1rem,2vw,1.6rem)}
.showcase__title{font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(1.6rem,3.4vw,2.8rem);line-height:1;color:var(--ink)}
.showcase__track{display:flex;align-items:center;gap:clamp(1.2rem,3.5vw,3.5rem);
  padding-inline:var(--gutter);will-change:transform}
.hpanel{position:relative;flex:0 0 auto;color:var(--ink);
  width:clamp(300px,calc((100svh - 265px)*.8),620px);
  display:block;text-align:left;background:none;border:0;cursor:pointer;font:inherit}
.hpanel__cta{position:absolute;left:1rem;bottom:1rem;z-index:2;
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font-head);font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper);padding:.5rem .85rem;border-radius:100px;
  background:rgba(20,17,13,.32);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease);pointer-events:none}
.hpanel:hover .hpanel__cta{opacity:1;transform:none}
.hpanel figure{overflow:hidden;aspect-ratio:4/5;background:var(--paper-2);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);border-radius:var(--radius)}
.hpanel img{width:100%;height:100%;object-fit:cover}
.hpanel:hover figure{transform:translateY(-10px);box-shadow:0 26px 60px rgba(20,17,13,.16)}
.hpanel__cap{display:flex;flex-direction:column;gap:.25rem;margin-top:1.1rem;
  font-family:var(--font-head);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey-dark)}
.hpanel__cap em{font-family:var(--font-display);font-style:normal;text-transform:none;
  font-size:clamp(1.2rem,1.9vw,1.8rem);letter-spacing:0;color:var(--ink);line-height:1}
.hpanel--ph{cursor:default}
.hpanel--ph figure{display:grid;place-items:center;border:1px dashed var(--grey-light);background:transparent}
.hpanel--ph figure span{font-family:var(--font-head);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey-mid)}
.hpanel--ph:hover figure{transform:none;box-shadow:none}
@media(max-width:820px){
  /* `!important` en el alto: el JS de desktop deja un `height` inline en la
     sección (recorrido vertical) que, al pasar a mobile, la dejaba altísima. */
  .showcase{height:auto!important;width:100%;max-width:100%;min-width:0}
  .showcase__sticky{position:static;height:auto;overflow:visible;display:block;width:100%;max-width:100%;min-width:0}
  /* Sin `min-width:0` en toda la cadena (widget de Elementor incluido), un
     contenedor flex/grid crece al ancho de las tarjetas y el recorrido nunca
     desborda → no había nada que deslizar. */
  .elementor-widget-campo-index-07-showcase,
  .elementor-widget-campo-index-07-showcase>.elementor-widget-container{min-width:0;max-width:100%}
  .showcase__track{overflow-x:auto;overflow-y:hidden;width:100%;max-width:100%;min-width:0;box-sizing:border-box;
    padding-block:2rem var(--section);
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
  .showcase__track{transform:none!important}
  .hpanel{width:78vw;scroll-snap-align:center}
}
/* 3 tarjetas o menos en desktop: sin recorrido, quedan quietas (lo marca el JS). */
@media(min-width:821px){
  .showcase.is-static{height:auto}
  .showcase.is-static .showcase__sticky{position:static;height:auto;overflow:visible;display:block}
  .showcase.is-static .showcase__track{flex-wrap:wrap;transform:none!important;padding-block:2rem var(--section)}
}
/* El recorrido es horizontal (scroll vertical en desktop, swipe en mobile)
   pero la barra de scroll estándar no se muestra en ningún caso. */
.showcase__sticky,.showcase__track{scrollbar-width:none;-ms-overflow-style:none}
.showcase__sticky::-webkit-scrollbar,.showcase__track::-webkit-scrollbar{display:none;width:0;height:0}

/* Lightbox de cliente */
.lb{position:fixed;inset:0;z-index:130;background:rgba(20,17,13,.92);
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s var(--ease);
  overflow-y:auto;padding:clamp(3.5rem,8vw,6rem) var(--gutter)}
.lb.is-open{opacity:1;visibility:visible}
.lb__close{position:fixed;top:clamp(1rem,2.2vw,1.7rem);right:var(--gutter);z-index:2;
  font-family:var(--font-head);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--paper)}
.lb__inner{max-width:1100px;margin-inline:auto;color:var(--paper)}
.lb__sub{font-family:var(--font-head);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sage)}
.lb__title{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.8rem,4.5vw,3.2rem);margin:.6rem 0 .8rem}
.lb__desc{max-width:56ch;color:rgba(247,245,239,.8);margin-bottom:clamp(2rem,4vw,3rem)}
.lb__imgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:clamp(.8rem,1.6vw,1.4rem)}
.lb__imgs img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}

/* ============================================================
   DISCIPLINAS
   ============================================================ */
.disc{background:var(--green);color:var(--paper)}
.disc .eyebrow{color:var(--sage)}
.disc__head{max-width:40ch;margin-bottom:clamp(2.5rem,6vw,4rem)}
.disc__head h2{font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(2rem,6vw,4rem);margin-top:.8rem}
.disc__grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,2.4rem)}
@media(min-width:820px){.disc__grid{grid-template-columns:repeat(3,1fr)}}
.card{display:block;color:var(--paper)}
.card__media{overflow:hidden;aspect-ratio:3/4;background:rgba(0,0,0,.15)}
.card__media img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease);will-change:transform}
.card:hover .card__media img{transform:scale(1.05)}
.card__num{font-family:var(--font-head);font-size:.76rem;letter-spacing:.15em;
  opacity:.6;margin-top:1rem}
.card__title{font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(1.5rem,2.4vw,2.1rem);margin-top:.3rem;line-height:1;
  display:flex;align-items:center;gap:.6rem}
.card:hover .card__title{color:var(--paper)}
.card__title .arrow{transition:transform .45s var(--ease);color:var(--sage)}
.card:hover .card__title .arrow{transform:translateX(8px)}
.card__desc{color:rgba(247,245,239,.8);font-size:.98rem;margin-top:.7rem;max-width:34ch}

/* ============================================================
   ESTUDIO / CONOCENOS
   ============================================================ */
.studio__top{display:flex;justify-content:space-between;align-items:baseline;
  flex-wrap:wrap;gap:1rem;margin-bottom:clamp(2.5rem,6vw,5rem)}
.studio__top h2{font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(2rem,6vw,4.4rem);line-height:.95}
.studio__editorial{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,3rem)}
.studio__lead,.studio__foot{font-size:1.05rem;line-height:1.6;color:var(--ink-soft);max-width:38ch}
.studio__fig{position:relative;overflow:hidden;background:var(--paper-2);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.studio__fig--a{aspect-ratio:3/4}
.studio__fig--b{aspect-ratio:4/5}
.studio__fig img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.16);transition:transform 1.6s var(--ease)}
.studio__fig.is-in img{transform:scale(1)}
.studio__fig:hover{transform:translateY(-10px);box-shadow:0 26px 60px rgba(20,17,13,.18)}
@media(min-width:900px){
  .studio__editorial{grid-template-columns:repeat(12,1fr);
    column-gap:clamp(2rem,4vw,3.5rem);row-gap:0;align-items:center}
  .studio__fig--a{grid-column:1 / span 6;grid-row:1}
  .studio__lead{grid-column:8 / span 5;grid-row:1;align-self:center}
  .studio__fig--b{grid-column:7 / span 5;grid-row:2;margin-top:clamp(-4rem,-6vw,-2rem)}
  .studio__foot{grid-column:1 / span 5;grid-row:2;align-self:center}
}
.link-underline{font-family:var(--font-head);font-weight:600;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid var(--ink);padding-bottom:3px;transition:.4s var(--ease)}
.link-underline:hover{color:var(--orange);border-color:var(--orange)}

/* ============================================================
   CLIENTES (carrusel infinito de logos en gris)
   ============================================================ */
.clients{border-top:1px solid var(--grey-light);border-bottom:1px solid var(--grey-light);
  padding-block:calc(clamp(3rem,6vw,5rem) + 100px);overflow:hidden}
.clients__title{text-align:center;font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(1.3rem,2.4vw,2rem);color:var(--ink);margin-bottom:clamp(2rem,4vw,3.2rem)}
.clients .marquee{display:flex;width:100%}
.clients .marquee + .marquee{margin-top:clamp(2.6rem,5vw,4.2rem)}
.clients .marquee__track{display:flex;align-items:center;flex-shrink:0;
  gap:clamp(2.6rem,5vw,5rem);padding-right:clamp(2.6rem,5vw,5rem)}
.clients .marquee__track--l{animation:marquee 38s linear infinite}
.clients .marquee__track--r{animation:marqueeR 44s linear infinite}
.clients .marquee:hover .marquee__track{animation-play-state:paused}
.clients .marquee__track img{height:clamp(17px,1.9vw,25px);width:auto;border-radius:0;flex-shrink:0;
  filter:brightness(0) invert(.62);opacity:.8;transition:filter .4s,opacity .4s}
.clients .marquee__track img:hover{filter:brightness(0) invert(.4);opacity:1}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes marqueeR{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ============================================================
   FORMULARIO (aire, líneas finas)
   ============================================================ */
/* el cierre sigue en el mismo color: menos aire abajo para que la imagen entre antes */
.cform{background:var(--form);padding-bottom:clamp(3rem,7vw,6rem)}
.cform__wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2.5rem,6vw,7rem);align-items:start;max-width:min(1180px,92vw)}
.cform__eyebrow{font-family:var(--font-head);font-size:.72rem;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--grey-dark);margin-bottom:clamp(.9rem,2vw,1.4rem)}
.cform__title{font-family:var(--font-display);text-transform:uppercase;font-weight:400;
  font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.04}
.cform__title em{font-style:normal;color:var(--green)}
.cform__form{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3rem) clamp(1.6rem,3vw,2.6rem)}
.field{position:relative;margin:0}
.field--full{grid-column:1/-1}
.field input,.field textarea{width:100%;font-family:var(--font-body);font-size:1rem;color:var(--ink);
  background:none;border:0;border-bottom:1px solid var(--grey-light);padding:.45rem 0;
  border-radius:0;resize:none;transition:border-color .5s var(--ease)}
.field textarea{min-height:4.5rem;line-height:1.7}
.field label{position:absolute;left:0;top:.45rem;pointer-events:none;font-family:var(--font-head);
  font-size:.95rem;color:var(--grey-dark);transition:.45s var(--ease)}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--green)}
.field input:focus+label,.field textarea:focus+label,
.field input:not(:placeholder-shown)+label,.field textarea:not(:placeholder-shown)+label{
  top:-1.05rem;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-mid)}
.cform__send{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;gap:1rem;margin-top:clamp(.5rem,2vw,1.5rem)}
.cform__btn{display:inline-flex;align-items:center;gap:.7rem;background:none;border:0;cursor:pointer;
  font-family:var(--font-head);font-size:.78rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);padding-bottom:5px;border-bottom:1px solid var(--ink);transition:.45s var(--ease)}
.cform__btn span{transition:transform .45s var(--ease)}
.cform__btn:hover{color:var(--green);border-color:var(--green)}
.cform__btn:hover span{transform:translateX(6px)}
.cform__btn[disabled]{opacity:.45;pointer-events:none}
.cform__note{font-family:var(--font-head);font-size:.74rem;letter-spacing:.06em;color:var(--green)}
@media(max-width:860px){.cform__wrap,.cform__form{grid-template-columns:1fr}}

/* ============================================================
   CIERRE — contacto + footer (editorial, delicado)
   ============================================================ */
.close{position:relative;height:190vh;background:var(--footer)}
.close *{border-radius:0!important}
.close__sticky{position:sticky;top:0;height:100svh;overflow:hidden;color:var(--paper);
  background:var(--footer);display:flex;flex-direction:column;justify-content:center}
.close__media{position:absolute;inset:0;z-index:0;margin:0}
.close__media img{width:100%;height:100%;object-fit:cover;will-change:clip-path,transform}
html.js .close__media img{clip-path:inset(30% 32% round var(--radius) var(--radius) 0 0);transform:scale(1.06)}
.close__grad{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.45;will-change:opacity;
  background:linear-gradient(180deg,rgba(20,17,13,.2),rgba(20,17,13,.4) 45%,rgba(20,17,13,.88))}
html.js .close__grad{opacity:0}
.close__content{position:relative;z-index:2;width:100%;text-align:center;will-change:opacity,transform}
html.js .close__content{opacity:0;transform:translateY(52px)}
.close__eyebrow{font-family:var(--font-head);font-size:.72rem;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--sage);margin-bottom:clamp(1rem,2vw,1.6rem);text-shadow:0 1px 14px rgba(0,0,0,.4)}
.close__title{font-family:var(--font-display);text-transform:uppercase;font-weight:400;
  font-size:clamp(2.2rem,6vw,5rem);line-height:1.02;text-shadow:0 2px 26px rgba(0,0,0,.5)}
.close__links{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1.4rem,3vw,2.6rem);
  margin-top:clamp(2rem,4vw,3rem);font-family:var(--font-head);font-size:1rem}
.close__links a,.close__links button{position:relative;display:inline-flex;align-items:center;gap:.5rem;
  color:var(--paper);padding-bottom:4px;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.close__links a::after,.close__links button::after{content:"";position:absolute;left:0;bottom:0;width:100%;
  height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.close__links a:hover::after,.close__links button:hover::after{transform-origin:left;transform:scaleX(1)}
.close__links span{color:var(--sage)}
.copied{color:var(--sage)!important}
.close__foot{will-change:opacity,transform;
  margin-top:clamp(2.5rem,6vw,4.5rem);padding-top:clamp(1.4rem,3vw,2rem);
  border-top:1px solid rgba(247,245,239,.2);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.2rem 2rem}
html.js .close__foot{opacity:0;transform:translateY(20px)}
.close__logo{width:clamp(120px,12vw,160px)}
.close__logo img{width:100%;opacity:.9}
.close__nav{justify-self:center;display:flex;gap:clamp(1rem,2.5vw,2rem);flex-wrap:wrap;justify-content:center;
  font-family:var(--font-head);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(247,245,239,.75)}
.close__nav a:hover{color:var(--paper)}
.close__legal{justify-self:end;font-family:var(--font-head);font-size:.72rem;letter-spacing:.04em;color:rgba(247,245,239,.55)}
.close__credit{position:absolute;z-index:2;left:0;right:0;bottom:clamp(.9rem,2vw,1.3rem);
  text-align:center;font-family:var(--font-head);font-size:.66rem;letter-spacing:.04em;color:rgba(247,245,239,.45)}
.close__credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.close__credit a:hover{color:var(--paper)}
@media(max-width:860px){.close{height:170vh}}
@media(max-width:640px){.close__foot{grid-template-columns:1fr;justify-items:center;gap:1.2rem;text-align:center}
  .close__nav,.close__legal{justify-self:center}}

/* ============================================================
   COLOR — fondos tintados y bandas plenas (paleta Campo)
   ============================================================ */
.bg-sage{background:var(--tint-sage)}
.bg-slate{background:var(--tint-slate)}
.bg-clay{background:var(--tint-clay)}
.bg-olive{background:var(--tint-olive)}
.bg-full-green{background:var(--green);color:var(--paper)}
.bg-full-slate{background:var(--slate);color:var(--paper)}
.bg-full-brown{background:var(--brown);color:var(--paper)}
.bg-full-green .statement__text,.bg-full-slate .statement__text,.bg-full-brown .statement__text{color:var(--paper)}
.bg-full-green .statement__text em,.bg-full-slate .statement__text em,.bg-full-brown .statement__text em{color:var(--sage)}

/* Banda plena con cita editorial */
.band{position:relative;overflow:hidden;padding-block:clamp(4rem,11vw,9rem)}
.band__eyebrow{font-family:var(--font-head);font-size:.72rem;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(247,245,239,.7);margin-bottom:clamp(1rem,2.4vw,1.8rem)}
.band__text{font-family:var(--font-display);text-transform:uppercase;font-weight:400;
  font-size:clamp(1.5rem,4.2vw,3.4rem);line-height:1.06;max-width:22ch}
.band__text em{font-style:normal;color:var(--sage)}
/* banda clara: el texto pasa a tinta para no perderse */
.band.bg-full-slate{background:var(--slate-mid);color:var(--ink)}
.band.bg-full-slate .band__eyebrow{color:var(--grey-dark)}
.band.bg-full-slate .band__note{color:var(--ink-soft)}
.bg-full-slate .band__text em{color:var(--em-accent)}
.band__note{margin-top:clamp(1.2rem,2.6vw,2rem);max-width:44ch;font-size:1rem;line-height:1.75;
  color:rgba(247,245,239,.8)}
@media(min-width:900px){
  .band__grid{display:grid;grid-template-columns:7fr 5fr;column-gap:clamp(3rem,7vw,7rem);align-items:start}
}

/* Animaciones livianas de entrada (imagen) */
.imgrev{overflow:hidden}
html.js .imgrev{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s var(--ease);
  transition-delay:calc(var(--i,0) * .085s)}
html.js .imgrev.is-in{clip-path:inset(0 0 0 0)}
html.js .imgrev img{transform:scale(1.14);transition:transform 1.5s var(--ease);
  transition-delay:calc(var(--i,0) * .085s)}
html.js .imgrev.is-in img{transform:scale(1)}
html.js .imgrev--r{clip-path:inset(0 100% 0 0)}
html.js .imgrev--r.is-in{clip-path:inset(0 0 0 0)}
[data-par]{will-change:transform}

/* ============================================================
   PÁGINAS INTERNAS — hero propio + composición editorial
   ============================================================ */
.phero{position:relative;height:min(92svh,900px);min-height:520px;overflow:hidden;background:#0e0c0a}
/* `.phero .phero__img` (+ max-width/min-height) para ganarle a `.elementor img{height:auto;max-width:100%}` y al reset del tema: la imagen siempre llena el hero en todos los dispositivos */
.phero .phero__img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;min-height:100%;object-fit:cover;object-position:center;border-radius:0}
html.js .phero__img{transform:scale(1.09);transition:transform 2.4s var(--ease)}
html.js .phero.is-in .phero__img{transform:scale(1)}
.phero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,17,13,.42),rgba(20,17,13,.06) 38%,rgba(20,17,13,.72))}
.phero__inner{position:relative;z-index:2;height:100%;color:var(--paper);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--gutter);padding-bottom:clamp(2.4rem,6vw,4.8rem)}
/* entrada por transición (no keyframes): si la animación no corre, el texto igual se ve */
html.js .phero__inner>*{opacity:0;transform:translateY(26px);
  transition:opacity 1s var(--ease),transform 1.1s var(--ease);
  transition-delay:calc(var(--i,0) * .12s)}
html.js .phero.is-in .phero__inner>*{opacity:1;transform:none}
.phero__eyebrow{font-family:var(--font-head);font-size:.72rem;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--sage)}
.phero__line{display:block;width:min(100%,520px);height:1px;background:rgba(247,245,239,.45);
  margin-block:clamp(.9rem,2vw,1.4rem);transform-origin:left}
html.js .phero__line{transform:scaleX(0)}
html.js .phero.is-in .phero__line{transform:scaleX(1)}
/* Editor de Elementor: siempre visible, sin depender de la animación de entrada */
.elementor-editor-active .phero__inner>*{opacity:1!important;transform:none!important;transition:none!important}
.elementor-editor-active .phero__line{transform:scaleX(1)!important}
.elementor-editor-active .phero__img{transform:none!important}
.phero__title{font-family:var(--font-display);text-transform:uppercase;font-weight:400;
  font-size:clamp(2.3rem,7.6vw,6.6rem);line-height:.98;text-shadow:0 2px 30px rgba(0,0,0,.4)}
.phero__lead{max-width:46ch;margin-top:clamp(1.1rem,2.4vw,1.8rem);font-size:clamp(.98rem,1.3vw,1.12rem);
  line-height:1.65;color:rgba(247,245,239,.86)}

/* Intro asimétrica — pleno medio, no el tinte */
.pintro{padding-block:clamp(4rem,9vw,8rem)}
.pintro.bg-clay{background:var(--brown);color:var(--paper)}
.pintro.bg-clay .pintro__statement em{color:var(--sage)}
.pintro.bg-clay .pintro__txt{color:rgba(247,245,239,.8)}
.pintro.bg-slate{background:var(--slate-mid)}
.pintro.bg-slate .pintro__statement em{color:var(--em-accent)}
.pintro__grid{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,4vw,3rem)}
@media(min-width:900px){
  .pintro__grid{grid-template-columns:6fr 5fr;column-gap:clamp(2.5rem,6vw,6rem);align-items:start}
  .pintro__txt{margin-top:.35rem}
}
.pintro__statement{font-family:var(--font-head);font-weight:300;letter-spacing:-.02em;
  font-size:clamp(1.3rem,2.9vw,2.3rem);line-height:1.2;max-width:24ch;text-wrap:balance}
.pintro__statement em{font-family:var(--font-display);font-style:normal;color:var(--green);text-transform:uppercase}
.pintro__txt{color:var(--ink-soft);max-width:52ch;font-size:1.02rem;line-height:1.75;text-wrap:pretty}

/* Figuras editoriales sueltas (asimétricas) */
.pfig{margin:0;padding-inline:var(--gutter);max-width:var(--maxw);margin-inline:auto}
.pfig img{width:100%;object-fit:cover}
.pfig figcaption{margin-top:.9rem;font-family:var(--font-head);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey-dark)}
.pfig--wide img{aspect-ratio:16/9}
.pfig--off{display:grid;grid-template-columns:1fr}
@media(min-width:900px){
  .pfig--off{grid-template-columns:repeat(12,1fr);column-gap:clamp(1.2rem,2.4vw,2.4rem);align-items:end}
  .pfig--off img{grid-column:2/9}
  .pfig--off figcaption{grid-column:10/13;margin:0}
  .pfig--off.pfig--r img{grid-column:5/12}
  .pfig--off.pfig--r figcaption{grid-column:2/5}
}

/* Portfolio: cada proyecto como caso independiente */
.projs{padding-block:clamp(1rem,3vw,2.5rem)}
.proj{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,3.4vw,2.6rem);
  padding-block:clamp(3.5rem,8vw,7rem);border-top:1px solid var(--grey-light)}
.proj:first-of-type{border-top:0;padding-top:0}
.proj__head{display:flex;flex-direction:column;gap:clamp(.7rem,1.4vw,1.1rem)}
/* acentos rotativos de la paleta: volanta y nombre de marca comparten color */
.proj{--accent:var(--green)}
.proj:nth-of-type(4n+1){--accent:var(--orange)}
.proj:nth-of-type(4n+2){--accent:var(--slate)}
.proj:nth-of-type(4n+3){--accent:var(--olive)}
.proj:nth-of-type(4n+4){--accent:var(--green)}
.proj__meta{font-family:var(--font-head);font-size:.72rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent)}
.proj__title{font-family:var(--font-display);text-transform:uppercase;font-weight:400;
  font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1;color:var(--accent)}
.proj__date{font-family:var(--font-head);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-mid)}
.proj__txt{color:var(--ink-soft);font-size:1rem;line-height:1.75;max-width:46ch}
.proj__lead{margin:0}
.proj__lead img{width:100%;aspect-ratio:4/5;object-fit:cover}
.proj__rest{display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(1rem,2.2vw,2.2rem);align-items:start}
.proj__rest figure{margin:0}
.proj__rest img{width:100%;height:100%;object-fit:cover}
.proj__rest figure:nth-child(6n+1){grid-column:span 4;aspect-ratio:4/5}
.proj__rest figure:nth-child(6n+2){grid-column:span 2;aspect-ratio:3/4;margin-top:clamp(2rem,6vw,5rem)}
.proj__rest figure:nth-child(6n+3){grid-column:span 3;aspect-ratio:1/1}
.proj__rest figure:nth-child(6n+4){grid-column:span 3;aspect-ratio:1/1;margin-top:clamp(1.5rem,4vw,3.5rem)}
.proj__rest figure:nth-child(6n+5){grid-column:span 2;aspect-ratio:3/4}
.proj__rest figure:nth-child(6n+6){grid-column:span 4;aspect-ratio:4/5;margin-top:clamp(2rem,6vw,5rem)}
@media(max-width:640px){
  .proj__rest{grid-template-columns:repeat(2,1fr)}
  .proj__rest figure:nth-child(n){grid-column:span 1;aspect-ratio:3/4;margin-top:0}
  .proj__rest figure:nth-child(3n+1){grid-column:span 2;aspect-ratio:4/5}
}
@media(min-width:960px){
  .proj{grid-template-columns:repeat(12,1fr);column-gap:clamp(1.4rem,3vw,3rem);
    row-gap:clamp(2rem,4.5vw,4rem);align-items:start}
  /* Texto siempre a la izquierda, imágenes siempre a la derecha — antes
     alternaba por proyecto (`.proj--r`), pero el texto de los proyectos
     "invertidos" quedaba tapado por el navegador lateral, que está fijo a
     la derecha de la pantalla (ver `.proj-nav` más abajo). */
  .proj__head{grid-column:1/5;position:sticky;top:clamp(6rem,18vh,11rem)}
  .proj__lead,.proj__rest{grid-column:5/13}
  /* Le reserva al mosaico el mismo ancho que ocupa `.proj-nav` (más un
     gutter de respiro) para que las imágenes nunca terminen debajo suyo —
     hace falta sobre todo con la sección en "Ancho completo" de Elementor:
     ahí el mosaico llega hasta el borde real de la pantalla (sin el margen
     extra que deja un contenedor "Boxed" más angosto que este `.wrap`), que
     es justo donde vive el navegador. Sólo en este quiebre: es el mismo en
     el que aparece `.proj-nav` (ver `@media(max-width:959px)` más abajo). */
  .projs{padding-right:calc(var(--proj-nav-gap) + var(--proj-nav-w) + var(--gutter))}
}

/* Navegador lateral de "Casos de estudio": lista de nombres fija a la
   derecha, centrada verticalmente en la pantalla — no hay lugar para esto
   en mobile (ni falta: ahí cada título ya se lee arriba de sus imágenes al
   scrollear), por eso arranca en el mismo quiebre que el grid de 12
   columnas de acá arriba. Oculta por defecto: swiper-widgets.js le agrega
   `is-visible` sólo mientras el `.projs` al que pertenece está en pantalla
   (si la página tiene 2 de estos widgets — Ambientaciones — no se pisan). */
.proj-nav{
  position:fixed;right:var(--proj-nav-gap);top:50%;
  transform:translateY(-50%);z-index:20;max-width:var(--proj-nav-w);
  opacity:0;pointer-events:none;transition:opacity .5s var(--ease);
}
.proj-nav.is-visible{opacity:1;pointer-events:auto}
.proj-nav__list{
  display:flex;flex-direction:column;gap:.75rem;list-style:none;
  text-align:right;border-right:1px solid var(--grey-light);padding-right:1rem;
}
.proj-nav__link{
  display:block;font-family:var(--font-display);text-transform:uppercase;
  font-weight:400;font-size:clamp(1rem,1.6vw,1.4rem);line-height:1.15;
  color:var(--grey-mid);transition:color .35s var(--ease);
}
.proj-nav__link:hover{color:var(--ink-soft)}
.proj-nav__link.is-active{color:var(--ink)}
@media(max-width:959px){.proj-nav{display:none}}

/* Mosaico editorial compacto (dos piezas por fila, con desfases) */
.pgal{display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(.9rem,2vw,1.8rem) clamp(1rem,2.4vw,2.2rem);align-items:start}
.pgal figure{margin:0}
.pgal img{width:100%;height:100%;object-fit:cover}
@media(min-width:900px){
  .pgal figure{aspect-ratio:3/4}
  .pgal figure:nth-child(4n+1){grid-column:1/6}
  .pgal figure:nth-child(4n+2){grid-column:6/13;aspect-ratio:16/11;margin-top:clamp(1.5rem,4vw,4rem)}
  .pgal figure:nth-child(4n+3){grid-column:1/8;aspect-ratio:16/11}
  .pgal figure:nth-child(4n+4){grid-column:8/13;margin-top:clamp(1.5rem,4vw,4rem)}
}
@media(max-width:899px){
  .pgal figure{grid-column:1/13;aspect-ratio:4/5}
  .pgal figure:nth-child(even){grid-column:3/13;aspect-ratio:3/4}
}

/* Dúo y trío de imágenes (composición asimétrica) */
.pduo__grid,.ptrio__grid{display:grid;grid-template-columns:1fr;gap:clamp(1.2rem,3vw,2.4rem)}
.pduo__grid figure,.ptrio__grid figure{margin:0}
.pduo__grid img,.ptrio__grid img{width:100%;height:100%;object-fit:cover}
.pduo__txt{color:var(--ink-soft);font-size:1.02rem;line-height:1.75;max-width:40ch}
@media(min-width:900px){
  .pduo__grid{grid-template-columns:repeat(12,1fr);column-gap:clamp(1.4rem,3vw,3rem);align-items:end}
  .pduo__grid figure:nth-child(1){grid-column:1/7;aspect-ratio:4/5}
  .pduo__grid figure:nth-child(2){grid-column:7/11;aspect-ratio:3/4;margin-bottom:clamp(2rem,6vw,6rem)}
  .pduo__txt{grid-column:11/13;align-self:end;margin-bottom:clamp(2rem,6vw,6rem)}
  .ptrio__grid{grid-template-columns:repeat(12,1fr);column-gap:clamp(1.4rem,3vw,3rem);align-items:start}
  .ptrio__grid figure:nth-child(1){grid-column:1/5;aspect-ratio:3/4;margin-top:clamp(2rem,7vw,7rem)}
  .ptrio__grid figure:nth-child(2){grid-column:5/10;aspect-ratio:4/5}
  .ptrio__grid figure:nth-child(3){grid-column:10/13;aspect-ratio:3/4;margin-top:clamp(3rem,10vw,10rem)}
}

/* Columnas de texto con hairline (sin cards) */
.pcols{display:grid;grid-template-columns:1fr;gap:clamp(1.8rem,4vw,3rem)}
@media(min-width:820px){.pcols{grid-template-columns:repeat(3,1fr);column-gap:clamp(2rem,5vw,5rem)}}
.pcols>div{border-top:1px solid var(--grey-light);padding-top:clamp(1rem,2vw,1.6rem)}
.pcols em{display:block;font-family:var(--font-head);font-style:normal;font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin-bottom:.7rem}
.pcols>div{border-top-color:rgba(42,37,31,.16)}
.pcols h3{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.1rem,2vw,1.55rem)}
.pcols p{margin-top:.8rem;color:var(--ink-soft);font-size:.98rem;line-height:1.75}

/* Índice editorial de enfoques */
.plist{border-top:1px solid var(--grey-light)}
.plist a{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(1rem,3vw,2.5rem);padding-block:clamp(1.6rem,4vw,2.9rem);
  border-bottom:1px solid var(--grey-light);transition:color .5s var(--ease)}
.plist a:hover{color:var(--green)}
.plist__fig{position:absolute;right:clamp(3rem,10vw,9rem);top:50%;z-index:2;margin:0;
  width:min(26vw,270px);aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius);
  pointer-events:none;opacity:0;transform:translateY(-50%) scale(.94) rotate(-1.5deg);
  transition:opacity .5s var(--ease),transform .6s var(--ease)}
.plist__fig img{width:100%;height:100%;object-fit:cover}
.plist a:hover .plist__fig{opacity:1;transform:translateY(-50%) scale(1) rotate(0)}
@media(max-width:900px){.plist__fig{display:none}}
.plist__idx{font-family:var(--font-head);font-size:.7rem;font-weight:500;letter-spacing:.2em;color:var(--grey-mid)}
.plist__t{font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(1.4rem,3.4vw,2.6rem);line-height:1}
.plist__go{font-family:var(--font-head);font-size:.9rem;transition:transform .5s var(--ease)}
.plist a:hover .plist__go{transform:translateX(10px)}

/* Paso a la siguiente interna: banda con imagen */
.pnext{position:relative;overflow:hidden;background:var(--ink);color:var(--paper);isolation:isolate}
.pnext__media{position:absolute;inset:0;z-index:0;margin:0}
.pnext__media img{width:100%;height:100%;object-fit:cover;border-radius:0;opacity:.42;
  transform:scale(1.08);transition:transform 1.4s var(--ease),opacity .9s var(--ease)}
.pnext:hover .pnext__media img{transform:scale(1.01);opacity:.58}
.pnext::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(20,17,13,.72),rgba(20,17,13,.18))}
/* sin imagen de fondo: marrón sólido igual a Banda Plena, sin el degradado pensado para atenuar fotos */
.pnext.bg-full-brown{background:var(--brown)}
.pnext.bg-full-brown::after{content:none}
.pnext__inner{position:relative;z-index:2;padding-block:clamp(4.5rem,13vw,10rem)}
.pnext__label{font-family:var(--font-head);font-size:.72rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--sage);margin-bottom:clamp(.8rem,2vw,1.3rem)}
.pnext__link{display:inline-flex;align-items:baseline;gap:clamp(.8rem,2vw,1.4rem);color:var(--paper);
  font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.9rem,5.4vw,4.4rem);line-height:1;
  text-shadow:0 2px 24px rgba(0,0,0,.35);transition:color .5s var(--ease)}
.pnext__link span{font-family:var(--font-head);font-size:.9rem;transition:transform .5s var(--ease)}
.pnext__link:hover{color:var(--sage)}
.pnext__link:hover span{transform:translateX(12px)}

/* ============================================================
   UTIL
   ============================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Todo este bloque se apaga con `html.campo-motion` (Campo Estudio → Ajustes → "Animaciones": siempre animar). */
@media (prefers-reduced-motion:reduce){
  /* Swiper mueve el track con `transition-duration` inline (JS): forzarlo a
     .001s hacía que los carruseles saltaran sin animar y que el marquee de
     clientes (freeMode + autoplay continuo) no se moviera nunca. Con
     "reducir movimiento" activo en el sistema (Windows → Efectos de
     animación apagados) el sitio parecía roto. Los carruseles se quedan
     como son; el resto de las animaciones sí se apaga. */
  html:not(.campo-motion) *:not(.swiper-wrapper):not(.swiper-slide){animation:none!important;transition-duration:.001s!important}
  html:not(.campo-motion) .reveal, html:not(.campo-motion) .clip{opacity:1!important;transform:none!important;clip-path:none!important}
  html:not(.campo-motion) .hero__media{clip-path:none!important;transform:none!important}
  html:not(.campo-motion) .showcase{height:auto}
  html:not(.campo-motion) .showcase__sticky{position:static;height:auto;overflow-x:auto}
  html:not(.campo-motion) .close{height:auto}
  /* Sin el recorrido con el scroll, el footer tiene que quedar en su estado
     FINAL: la imagen a pantalla completa con el contenido encima, igual que
     la plantilla de mantenimiento. Antes `height:auto` + `position:static`
     dejaba la imagen del alto del contenido (una franja) en vez de llenar
     la pantalla. */
  html:not(.campo-motion) .close__sticky{position:relative;height:auto;min-height:100svh}
  html:not(.campo-motion) .close__content{margin-block:auto;padding-block:clamp(4rem,10vh,7rem) 2rem}
  /* Con .close__sticky en `static`, el crédito (absolute, bottom) quedaba
     anclado a .close y se montaba sobre el menú del pie: pasa a fluir
     debajo del contenido. */
  html:not(.campo-motion) .close__credit{position:relative;left:auto;right:auto;bottom:auto;margin-top:auto;padding:1.4rem 1rem 1.2rem}
  html:not(.campo-motion) .close__media img{clip-path:inset(0)!important;transform:none!important}
  html:not(.campo-motion) .close__content{opacity:1!important;transform:none!important}
  html:not(.campo-motion) .close__grad{opacity:.5!important}
  html:not(.campo-motion) .close__foot{opacity:1!important;transform:none!important}
}

/* ============================================================
   BLINDAJE WORDPRESS — Elementor tiene un "Theme Style > Botones"
   global (Configuración del sitio) que se aplica a CUALQUIER <button>
   de la página con un selector del tipo `body.elementor-kit-N button`.
   Esa combinación (una clase + la etiqueta) es MÁS específica que una
   sola clase nuestra (`.hpanel`, `.menu-btn`…), así que sin !important
   ese estilo global (fondo/borde/color del kit, a veces fucsia u otro
   acento de marca) pisa a los botones que usamos como contenedores
   propios, no como "botón" visual. Se reafirma acá exactamente el
   mismo valor que ya tenían en el resto de esta hoja.
   ============================================================ */
.menu-btn{background:rgba(255,255,255,.28)!important;border:0!important;border-radius:999px!important;color:#000!important}
.nav__close{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:var(--paper)!important}
.hpanel{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:var(--ink)!important}
.cform__btn{background:none!important;border:0!important;border-bottom:1px solid var(--ink)!important;border-radius:0!important;box-shadow:none!important;color:var(--ink)!important}
.lb__close{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:var(--paper)!important}

/* Lo mismo, pero para reglas que sólo se activan en :hover/:focus (ej. un
   plugin/tema con `button:hover,[type=button]:focus{background:#c36}`).
   Sin esto, aunque el estado normal ya esté blindado arriba, el estado
   hover puede seguir mostrando el color ajeno mientras se interactúa. */
.menu-btn:hover,.menu-btn:focus{background:rgba(255,255,255,.28)!important;color:#000!important;text-decoration:none!important}
.nav__close:hover,.nav__close:focus{background:transparent!important;color:var(--paper)!important;text-decoration:none!important}
.hpanel:hover,.hpanel:focus{background:none!important;color:var(--ink)!important;text-decoration:none!important}
.cform__btn:hover,.cform__btn:focus{background:none!important;border-bottom-color:var(--green)!important;color:var(--green)!important;text-decoration:none!important}
.lb__close:hover,.lb__close:focus{background:none!important;color:var(--paper)!important;text-decoration:none!important}

/* ============================================================
   El widget "Header + Menú" renderiza .header y .nav, y ambos son
   position:fixed (viven fuera del flujo normal a propósito: son un
   overlay). El contenedor de Elementor que lo envuelve (siempre el
   primero de la página) queda entonces sin contenido real en flujo, y
   el line-height heredado de sus contenedores le deja un resto de 1-2px
   de alto — se ve como una franja blanca arriba de todo el sitio, antes
   del hero. Se fuerza ese contenedor a altura real cero. Cubre tanto el
   Contenedor (Elementor 3.6+, `.e-con`) como Sección/Columna (páginas
   viejas sin "Actualizar contenido" todavía). */
.elementor-column:has(>.elementor-widget-wrap>.elementor-widget-campo-header),
.elementor-top-section:has(.elementor-widget-campo-header),
.e-con:has(>.elementor-widget-campo-header){
  min-height:0!important;
}

/* ============================================================
   MANTENIMIENTO — plantilla para Elementor → Modo mantenimiento
   Mismo look que el footer (.close), pero sin sticky ni scroll-driven:
   una columna con min-height de pantalla. El crédito va en el flujo
   (no absolute), así nunca se monta sobre el pie.
   ============================================================ */
.maint{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:100vh;min-height:100svh;
  background:var(--footer);color:var(--paper);overflow:hidden}
.maint *{border-radius:0!important}
.maint__media{position:absolute;inset:0;z-index:-2;margin:0}
.maint__media img{width:100%;height:100%;object-fit:cover}
.maint__grad{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.35) 55%,rgba(0,0,0,.5) 100%)}
.maint__content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:clamp(4rem,10vh,7rem) var(--gutter) 2rem}
.maint__msg{max-width:34rem;margin:1.3rem auto 2.2rem;font-family:var(--font-body);font-size:1rem;line-height:1.6;
  color:rgba(247,245,239,.82)}
.maint__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;
  padding:1.5rem var(--gutter) .4rem}
.maint__credit{margin:0;padding:.6rem 1rem 1.3rem;text-align:center;font-family:var(--font-head);font-size:.66rem;
  letter-spacing:.04em;color:rgba(247,245,239,.45)}
.maint__credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.maint__credit a:hover{color:var(--paper)}
@media(max-width:640px){.maint__foot{flex-direction:column;justify-content:center;text-align:center}}