/* =========================================================================
   Rodrigo Torres — hoja de estilos única
   Mobile-first. Todo escala con clamp(): no hay anchos fijos en píxeles.
   ========================================================================= */

/* --------------------------------------------------------------- Tokens */
:root{
  --negro:#0b0b0d;
  --carbon:#131317;
  --carbon-2:#1b1b20;
  --hueso:#f2efea;
  --gris:#96918a;
  --gris-2:#5e5a55;
  --cobre:#c2632b;
  --cobre-claro:#e08b4e;
  --camel:#c9a87c;
  --linea:rgba(255,255,255,.10);
  --linea-fuerte:rgba(255,255,255,.22);

  --wa:#25d366;

  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Instrument Serif',Georgia,serif;

  /* Escala fluida: de móvil (360px) a escritorio (1440px) */
  --t-xs:clamp(.72rem,.68rem + .18vw,.8rem);
  --t-sm:clamp(.82rem,.78rem + .2vw,.92rem);
  --t-base:clamp(.95rem,.9rem + .3vw,1.06rem);
  --t-lg:clamp(1.1rem,1rem + .5vw,1.35rem);
  --t-xl:clamp(1.5rem,1.2rem + 1.5vw,2.25rem);
  --t-2xl:clamp(2rem,1.4rem + 3vw,3.75rem);
  --t-hero:clamp(2.9rem,1.2rem + 11vw,8rem);

  --gutter:clamp(1.15rem,4vw,2.5rem);
  --bloque:clamp(4rem,10vw,9rem);
  --radio:clamp(10px,1.4vw,18px);
  --ancho:1280px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ----------------------------------------------------------------- Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--negro);
  color:var(--hueso);
  font-family:var(--sans);
  font-size:var(--t-base);
  line-height:1.65;
  font-weight:400;
  overflow-x:hidden;          /* ningún elemento puede romper el ancho */
  -webkit-font-smoothing:antialiased;
}

img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,p,figure,blockquote,dl,dd{margin:0}
ul{margin:0;padding:0;list-style:none}

:focus-visible{outline:2px solid var(--cobre-claro);outline-offset:3px;border-radius:3px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--hueso);color:var(--negro);padding:.7rem 1.1rem;border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}

.ico{width:1.1em;height:1.1em;fill:none;stroke:none;flex:none}
.ico--flip{transform:scaleX(-1)}

/* ------------------------------------------------------------ Tipografía */
.kicker{
  font-size:var(--t-xs);letter-spacing:.22em;text-transform:uppercase;
  color:var(--gris);font-weight:500;margin-bottom:1rem;
}
.kicker--sm{margin-bottom:.5rem;color:var(--cobre-claro)}

.titulo{
  font-size:var(--t-2xl);line-height:1.02;font-weight:700;letter-spacing:-.03em;
  text-transform:uppercase;
}
.serif{
  font-family:var(--serif);font-style:italic;font-weight:400;
  text-transform:none;letter-spacing:-.01em;color:var(--camel);
}

/* -------------------------------------------------------------- Botones */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:.85rem 1.6rem;
  font-size:var(--t-sm);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  border-radius:999px;transition:transform .25s var(--ease),background-color .25s,color .25s,border-color .25s;
  text-align:center;
}
.btn:active{transform:scale(.97)}
.btn--wa{background:var(--hueso);color:var(--negro)}
.btn--wa:hover{background:var(--cobre);color:#fff}
.btn--ghost{border:1px solid var(--linea-fuerte);color:var(--hueso)}
.btn--ghost:hover{border-color:var(--hueso);background:rgba(255,255,255,.06)}
.btn--lg{min-height:60px;padding:1rem 2.2rem;font-size:var(--t-base)}

/* ------------------------------------------------------------------ Nav */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding-top:env(safe-area-inset-top);
  transition:background-color .3s,backdrop-filter .3s,border-color .3s;
  border-bottom:1px solid transparent;
}
.nav.is-scroll{
  background:rgba(11,11,13,.82);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom-color:var(--linea);
}
.nav__inner{
  width:min(100% - var(--gutter)*2,var(--ancho));margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:clamp(64px,8vw,86px);
}
.nav__logo{display:flex;align-items:center;gap:.7rem;min-height:44px}
.nav__logo-mark{
  display:grid;place-items:center;width:2.2em;height:2.2em;flex:none;
  border:1px solid var(--linea-fuerte);border-radius:50%;
  font-size:var(--t-sm);font-weight:700;letter-spacing:.06em;
}
.nav__logo-text{
  font-size:var(--t-sm);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.nav__links{display:none}
.nav__toggle{
  width:44px;height:44px;display:grid;place-content:center;gap:5px;
}
.nav__toggle span{display:block;width:22px;height:1.5px;background:var(--hueso);transition:transform .3s var(--ease),opacity .2s}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ------------------------------------------------- Menú móvil desplegado
   Panel anclado a la derecha, 3/5 del ancho. Antes esto era una capa a
   pantalla completa con z-index:-1, y por eso el contenido de la página se
   veía a través: el fondo se pintaba por detrás. Ahora va sobre todo. */
body.menu-abierto{overflow:hidden}

/* Cortina: oscurece la página sin taparla del todo */
body.menu-abierto::after{
  content:"";position:fixed;inset:0;z-index:99;
  background:rgba(11,11,13,.65);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}

.nav__links.is-abierto{
  display:flex;flex-direction:column;
  position:fixed;
  top:calc(env(safe-area-inset-top) + clamp(64px,8vw,86px));
  right:0;
  width:min(60%,320px);
  max-height:calc(100dvh - clamp(64px,8vw,86px) - 1.5rem);
  overflow-y:auto;
  padding:.4rem clamp(1rem,4vw,1.3rem) 1.1rem;
  background:var(--carbon);
  border:1px solid var(--linea-fuerte);border-right:0;
  border-radius:var(--radio) 0 0 var(--radio);
  box-shadow:0 24px 60px rgba(0,0,0,.65);
}
.nav__links.is-abierto a{
  display:flex;align-items:center;justify-content:flex-end;gap:.6rem;
  text-align:right;
  font-size:clamp(.92rem,3.5vw,1.05rem);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:.85rem 0;border-bottom:1px solid var(--linea);
}
/* El ícono deja de ser un cuadrado suelto y pasa a ser una fila más */
.nav__links.is-abierto .nav__ig{
  width:auto;height:auto;display:flex;justify-content:flex-end;color:var(--hueso);
}
.nav__ig-txt{display:none}
.nav__links.is-abierto .nav__ig-txt{display:inline}
.nav__links.is-abierto .nav__cta{
  justify-content:center;margin-top:1rem;
  border:1px solid var(--cobre);border-radius:999px;
  padding:.8rem 1.2rem;color:var(--cobre-claro);
}

@media (min-width:900px){
  .nav__toggle{display:none}
  .nav__links{
    display:flex;align-items:center;gap:clamp(1.2rem,2.5vw,2.4rem);
    font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  }
  .nav__links a{position:relative;padding:.4rem 0;color:var(--gris);transition:color .25s}
  .nav__links a:hover{color:var(--hueso)}
  .nav__links a::after{
    content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--cobre);
    transition:width .3s var(--ease);
  }
  .nav__links a:hover::after{width:100%}
  .nav__cta{
    border:1px solid var(--linea-fuerte);border-radius:999px;padding:.6rem 1.3rem!important;
    color:var(--hueso)!important;
  }
  .nav__cta::after{display:none}
  .nav__cta:hover{background:var(--hueso);color:var(--negro)!important}
}

/* ----------------------------------------------------------------- Hero */
.hero{
  position:relative;isolation:isolate;
  min-height:100svh;min-height:100dvh;
  display:flex;align-items:flex-end;
  padding:clamp(6rem,18vh,9rem) var(--gutter) clamp(3.5rem,10vh,5rem);
}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:38% 42%}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,
      rgba(11,11,13,.70) 0%,
      rgba(11,11,13,.28) 22%,
      rgba(11,11,13,.62) 45%,
      rgba(11,11,13,.90) 68%,
      var(--negro) 92%);
}
.hero__body{
  width:min(100%,var(--ancho));margin-inline:auto;
  text-shadow:0 1px 24px rgba(0,0,0,.45);
}
.hero .kicker{color:rgba(242,239,234,.82)}
.hero__title{
  font-size:var(--t-hero);line-height:.88;font-weight:800;letter-spacing:-.045em;
  text-transform:uppercase;margin-bottom:clamp(.8rem,2vw,1.2rem);
}
.hero__line{display:block}
.hero__line--serif{
  font-family:var(--serif);font-style:italic;font-weight:400;
  letter-spacing:-.02em;text-transform:none;color:var(--camel);
  margin-left:.08em;
}
.hero__rol{
  font-size:var(--t-sm);letter-spacing:.18em;text-transform:uppercase;
  color:var(--hueso);font-weight:500;margin-bottom:1rem;
}
.hero__texto{max-width:46ch;color:rgba(242,239,234,.82);margin-bottom:clamp(1.8rem,4vw,2.4rem)}
.hero__acciones{display:flex;flex-wrap:wrap;gap:.8rem}
.hero__acciones .btn{flex:1 1 auto;min-width:min(100%,15rem)}
.hero__scroll{display:none}

@media (min-width:900px){
  .hero{align-items:center}
  .hero__media{left:auto;width:52%}
  .hero__media::after{
    background:linear-gradient(90deg,var(--negro) 0%,rgba(11,11,13,.85) 18%,rgba(11,11,13,.15) 60%,rgba(11,11,13,.5) 100%);
  }
  .hero__media img{object-position:45% 40%}
  .hero__body{max-width:60ch}
  .hero__acciones .btn{flex:0 0 auto;min-width:0}
  .hero__scroll{
    display:block;position:absolute;left:var(--gutter);bottom:clamp(2rem,5vh,3rem);
    width:1px;height:clamp(48px,8vh,80px);overflow:hidden;
  }
  .hero__scroll-line{position:absolute;inset:0;background:var(--linea-fuerte)}
  .hero__scroll-line::after{
    content:"";position:absolute;top:0;left:0;width:100%;height:40%;background:var(--cobre);
    animation:bajar 2.4s var(--ease) infinite;
  }
}
@keyframes bajar{0%{transform:translateY(-100%)}60%,100%{transform:translateY(250%)}}

/* Móvil apaisado: el hero no debe obligar a scrollear para ver el botón */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding-top:7rem;padding-bottom:3rem}
  .hero__title{font-size:clamp(2.4rem,9vw,4rem)}
  .hero__texto{display:none}
}

/* --------------------------------------------------------------- Marcas */
.marcas{
  padding:clamp(2.5rem,6vw,4rem) 0;
  border-block:1px solid var(--linea);background:var(--carbon);
}
.marcas__label{
  width:min(100% - var(--gutter)*2,var(--ancho));margin:0 auto clamp(1.4rem,3vw,2rem);
  font-size:var(--t-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--gris-2);
  text-align:center;
}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;width:max-content;animation:desfile 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marca{
  flex:none;display:grid;place-items:center;
  padding-inline:clamp(1.5rem,5vw,3.5rem);min-width:clamp(120px,22vw,190px);
}
.marca img{max-height:clamp(26px,4.5vw,42px);width:auto;filter:grayscale(1) brightness(1.6);opacity:.55;transition:opacity .3s,filter .3s}
.marca:hover img{opacity:1;filter:grayscale(0) brightness(1)}
.marca__word{
  font-size:clamp(.95rem,2.6vw,1.35rem);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gris-2);white-space:nowrap;transition:color .3s;
}
.marca:hover .marca__word{color:var(--gris)}
@keyframes desfile{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto}
  .marquee__track{animation:none}
}

/* -------------------------------------------------------------- Secciones */
.seccion{
  width:min(100% - var(--gutter)*2,var(--ancho));margin-inline:auto;
  padding-block:var(--bloque);
}
.seccion__head{margin-bottom:clamp(2.2rem,5vw,3.5rem)}
.seccion__lead{color:var(--gris);max-width:44ch;margin-top:1.2rem}

@media (min-width:900px){
  .seccion__head{
    display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:end;
  }
  .seccion__lead{margin-top:0;padding-bottom:.6rem}
}

/* Placeholder visual para material pendiente */
.ph{
  width:100%;height:100%;min-height:180px;display:grid;place-items:center;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 10px,transparent 10px 20px),
    var(--carbon-2);
  border:1px dashed var(--linea-fuerte);border-radius:inherit;
}
.ph span{
  font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--gris-2);
}
.item .ph{position:relative}
/* En las tarjetas de video la etiqueta se va arriba para no chocar con el play */
.item--video .ph span{
  position:absolute;top:clamp(.8rem,2.5vw,1.2rem);left:clamp(.8rem,2.5vw,1.2rem);
}
.ph--retrato{aspect-ratio:4/5}
.ph--caso{aspect-ratio:16/10}

/* ------------------------------------------------------------- Carrusel */
.carrusel{position:relative}
.carrusel__pista{
  display:flex;gap:clamp(.9rem,2.5vw,1.6rem);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-padding-inline:0;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:.5rem;
}
.carrusel__pista::-webkit-scrollbar{display:none}

.faceta{
  flex:0 0 min(84%,380px);scroll-snap-align:start;
  background:var(--carbon);border:1px solid var(--linea);border-radius:var(--radio);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .3s,transform .3s var(--ease);
}
.faceta:hover{border-color:var(--linea-fuerte)}
.faceta__media{aspect-ratio:4/5;overflow:hidden;background:var(--carbon-2)}
.faceta__media img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;
  filter:grayscale(.35);transition:transform .7s var(--ease),filter .5s}
.faceta:hover .faceta__media img{transform:scale(1.05);filter:grayscale(0)}
.faceta__body{padding:clamp(1.2rem,3.5vw,1.8rem);display:flex;flex-direction:column;gap:.75rem;flex:1}
.faceta__titulo{font-size:var(--t-lg);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.faceta__texto{font-size:var(--t-sm);color:var(--gris);line-height:1.6}
.faceta__lista{margin-top:auto;padding-top:.6rem;display:flex;flex-wrap:wrap;gap:.4rem}
.faceta__lista li{
  font-size:var(--t-xs);letter-spacing:.06em;color:rgba(242,239,234,.75);
  border:1px solid var(--linea);border-radius:999px;padding:.35rem .75rem;
}

.carrusel__nav{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:clamp(1.2rem,3vw,2rem);
}
.carrusel__dots{display:flex;gap:.5rem}
.dot{
  width:28px;height:3px;border-radius:2px;background:var(--linea-fuerte);
  transition:background-color .3s,width .3s var(--ease);
}
.dot.is-activo{background:var(--cobre);width:46px}
.carrusel__flechas{display:none;gap:.6rem}
.flecha{
  width:48px;height:48px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--linea-fuerte);color:var(--hueso);
  transition:background-color .25s,color .25s,border-color .25s;
}
.flecha:hover{background:var(--hueso);color:var(--negro)}
.flecha[disabled]{opacity:.3;cursor:not-allowed}
.flecha .ico{width:1.4em;height:1.4em}

@media (min-width:640px){.faceta{flex-basis:min(48%,380px)}}
@media (min-width:1024px){
  .faceta{flex-basis:calc((100% - clamp(.9rem,2.5vw,1.6rem)*2)/3)}
  .carrusel__flechas{display:flex}
}

/* -------------------------------------------------------------- Galería */
.filtros{
  display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;
  margin-bottom:clamp(1.4rem,3vw,2rem);padding-bottom:.3rem;
}
.filtros::-webkit-scrollbar{display:none}
.filtro{
  flex:none;min-height:44px;padding:.55rem 1.1rem;border-radius:999px;
  border:1px solid var(--linea);color:var(--gris);
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  transition:background-color .25s,color .25s,border-color .25s;
}
.filtro:hover{color:var(--hueso);border-color:var(--linea-fuerte)}
.filtro.is-activo{background:var(--hueso);color:var(--negro);border-color:var(--hueso)}

.grid-galeria{
  display:grid;gap:clamp(.6rem,1.6vw,1rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));
  grid-auto-flow:dense;
}
.item{
  position:relative;overflow:hidden;border-radius:var(--radio);
  background:var(--carbon-2);aspect-ratio:4/5;cursor:pointer;
  border:1px solid var(--linea);
}
.item.is-oculto{display:none}
.item img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.04);transition:transform .7s var(--ease),filter .5s}
.item:hover img,.item:focus-visible img{transform:scale(1.06);filter:grayscale(0)}
.item::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(11,11,13,.85) 100%);
  opacity:.85;transition:opacity .35s;
}
.item:hover::after{opacity:1}
.item__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(.8rem,2.5vw,1.2rem);
  display:flex;flex-direction:column;gap:.15rem;
  transform:translateY(.35rem);opacity:0;transition:transform .35s var(--ease),opacity .35s;
}
.item__meta{font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--cobre-claro)}
.item__titulo{font-size:var(--t-sm);font-weight:600;line-height:1.3}
.item__play{
  position:absolute;inset:0;z-index:2;display:grid;place-items:center;pointer-events:none;
}
.item__play .ico{
  width:clamp(44px,9vw,58px);height:clamp(44px,9vw,58px);padding:clamp(12px,2.4vw,16px);
  border:1px solid rgba(242,239,234,.7);border-radius:50%;color:var(--hueso);
  background:rgba(11,11,13,.35);backdrop-filter:blur(4px);
  transition:transform .35s var(--ease),background-color .3s;
}
.item:hover .item__play .ico{transform:scale(1.08);background:var(--cobre)}

/* En pantallas táctiles el texto siempre visible: no hay hover */
@media (hover:none){
  .item__cap{opacity:1;transform:none}
  .item img{filter:grayscale(.2)}
}
@media (hover:hover){
  .item:hover .item__cap,.item:focus-visible .item__cap{opacity:1;transform:none}
}

@media (min-width:900px){
  .grid-galeria{grid-auto-rows:clamp(210px,20vw,280px)}
  .item{aspect-ratio:auto;height:100%}
  .item--alto{grid-row:span 2}
}

.galeria__vacio{color:var(--gris);text-align:center;padding:3rem 0}

/* ---------------------------------------------------------- Trayectoria */
.trayectoria{border-top:1px solid var(--linea)}
.trayectoria__grid{display:grid;gap:clamp(2rem,5vw,4rem)}
.trayectoria__media{border-radius:var(--radio);overflow:hidden;background:var(--carbon-2)}
.trayectoria__media img{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 15%;
  filter:grayscale(1) contrast(1.05);
}
.trayectoria__body p{color:var(--gris);margin-top:1.2rem;max-width:56ch}
.trayectoria__body .titulo{margin-bottom:.5rem}

.metricas{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  margin-top:clamp(2rem,5vw,3rem);background:var(--linea);
  border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;
}
.metrica{background:var(--negro);padding:clamp(1.1rem,3vw,1.6rem)}
.metrica__valor{
  font-size:clamp(1.8rem,5.5vw,2.6rem);font-weight:700;letter-spacing:-.03em;
  line-height:1;color:var(--hueso);
}
.metrica__label{
  margin-top:.45rem;font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris-2);line-height:1.4;
}

@media (min-width:900px){
  .trayectoria__grid{grid-template-columns:.85fr 1fr;align-items:center}
  .metricas{grid-template-columns:repeat(4,1fr)}
}

/* ---------------------------------------------------------------- Casos */
.casos{border-top:1px solid var(--linea)}
.casos__grid{
  display:grid;gap:clamp(1rem,2.5vw,1.6rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
}
.caso{
  display:flex;flex-direction:column;
  background:var(--carbon);border:1px solid var(--linea);border-radius:var(--radio);
  overflow:hidden;transition:border-color .3s,transform .35s var(--ease);
}
.caso:hover{border-color:var(--linea-fuerte);transform:translateY(-4px)}
.caso__media{aspect-ratio:16/10;background:var(--carbon-2);overflow:hidden}
.caso__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .5s,transform .7s var(--ease)}
.caso:hover .caso__media img{filter:grayscale(0);transform:scale(1.04)}
.caso__media .ph{border:0;border-bottom:1px dashed var(--linea-fuerte);border-radius:0}
.caso__body{padding:clamp(1.2rem,3.5vw,1.8rem);display:flex;flex-direction:column;gap:.7rem;flex:1}
.caso__marca{
  font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--cobre-claro);
}
.caso__titulo{font-size:var(--t-lg);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.caso__texto{font-size:var(--t-sm);color:var(--gris);line-height:1.6}
.caso__metricas{
  display:flex;gap:clamp(1.2rem,4vw,2rem);margin-top:auto;padding-top:1.1rem;
  border-top:1px solid var(--linea);
}
.caso__metricas div{display:flex;flex-direction:column}
.caso__metricas strong{font-size:var(--t-lg);font-weight:700;letter-spacing:-.02em}
.caso__metricas span{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--gris-2)}

/* ---------------------------------------------------------- Testimonios */
.testimonios{padding-block:0 var(--bloque)}
.testimonios__grid{
  display:grid;gap:clamp(1rem,2.5vw,1.6rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
}
.testimonio{
  padding:clamp(1.5rem,4vw,2.4rem);
  border:1px solid var(--linea);border-radius:var(--radio);background:var(--carbon);
}
.testimonio blockquote{
  font-family:var(--serif);font-size:var(--t-lg);line-height:1.45;color:var(--hueso);
}
.testimonio figcaption{margin-top:1.4rem;display:flex;flex-direction:column;gap:.15rem}
.testimonio strong{font-size:var(--t-sm);font-weight:600}
.testimonio span{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--gris-2)}

/* ------------------------------------------------------------------ CTA */
.cta{
  width:min(100% - var(--gutter)*2,var(--ancho));margin-inline:auto;
  padding-block:var(--bloque);text-align:center;
  border-top:1px solid var(--linea);
}
.cta__titulo{
  font-size:var(--t-2xl);line-height:1.02;font-weight:700;letter-spacing:-.03em;
  text-transform:uppercase;margin-bottom:1.2rem;
}
.cta__texto{color:var(--gris);max-width:46ch;margin:0 auto clamp(2rem,4vw,2.6rem)}
.cta .btn{width:min(100%,22rem)}
.cta__mail{margin-top:1.6rem;font-size:var(--t-sm);color:var(--gris)}
.cta__mail a{border-bottom:1px solid var(--linea-fuerte);padding-bottom:2px;transition:color .25s,border-color .25s}
.cta__mail a:hover{color:var(--hueso);border-color:var(--hueso)}

/* --------------------------------------------------------------- Footer */
.footer{border-top:1px solid var(--linea);background:var(--carbon)}
.footer__inner{
  width:min(100% - var(--gutter)*2,var(--ancho));margin-inline:auto;
  padding-block:clamp(2.5rem,6vw,4rem);
  display:grid;gap:clamp(1.8rem,4vw,2.5rem);
}
.footer__brand{display:flex;align-items:center;gap:.9rem}
.footer__nombre{font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:var(--t-sm)}
.footer__rol{font-size:var(--t-xs);color:var(--gris-2);margin-top:.15rem}
.footer__redes{display:flex;flex-wrap:wrap;gap:.6rem}
.footer__redes a{
  display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  padding:.5rem 1rem;border:1px solid var(--linea);border-radius:999px;
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--gris);
  transition:color .25s,border-color .25s;
}
.footer__redes a:hover{color:var(--hueso);border-color:var(--linea-fuerte)}
.footer__redes .ico{color:currentColor}
.footer__datos{display:flex;flex-direction:column;gap:.4rem;font-size:var(--t-sm);color:var(--gris)}
.footer__datos a:hover{color:var(--hueso)}
.footer__legal{
  width:min(100% - var(--gutter)*2,var(--ancho));margin-inline:auto;
  padding-block:1.4rem;border-top:1px solid var(--linea);
  font-size:var(--t-xs);letter-spacing:.1em;color:var(--gris-2);text-transform:uppercase;
  padding-bottom:calc(1.4rem + env(safe-area-inset-bottom));
}
@media (min-width:900px){
  .footer__inner{grid-template-columns:1fr auto auto;align-items:center}
  .footer__datos{text-align:right}
}

/* ------------------------------------------------------------------ FAB */
.fab{
  position:fixed;z-index:90;
  right:calc(var(--gutter) * .8);
  bottom:calc(var(--gutter) * .8 + env(safe-area-inset-bottom));
  width:58px;height:58px;display:grid;place-items:center;border-radius:50%;
  background:var(--wa);color:#08310f;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:transform .3s var(--ease),opacity .3s;
  transform:translateY(120%);opacity:0;
}
.fab.is-visible{transform:none;opacity:1}
.fab .ico{width:30px;height:30px}
@media (min-width:900px){.fab{display:none}}

/* ------------------------------------------------------------- Lightbox */
.lightbox{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  padding:var(--gutter);background:rgba(6,6,8,.94);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.lightbox[hidden]{display:none}
.lightbox__fig{max-width:min(100%,1000px);text-align:center}
.lightbox__fig img{
  max-height:80svh;width:auto;margin-inline:auto;border-radius:var(--radio);
}
.lightbox__fig figcaption{
  margin-top:1rem;font-size:var(--t-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris);
}
.lightbox__cerrar{
  position:absolute;top:calc(var(--gutter) + env(safe-area-inset-top));right:var(--gutter);
  width:48px;height:48px;font-size:2rem;line-height:1;color:var(--hueso);
  border:1px solid var(--linea);border-radius:50%;
}
.lightbox__cerrar:hover{background:var(--hueso);color:var(--negro)}

/* ------------------------------------------------------------- Reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ------------------------------------------------------------ Impresión */
@media print{
  .nav,.fab,.hero__scroll,.lightbox,.marquee{display:none!important}
  body{background:#fff;color:#000}
}

/* =========================================================================
   V2 — bloques nuevos: características y agenda
   ========================================================================= */

/* ------------------------------------------------------- Características */
.caracteristicas{padding-block:0 var(--bloque)}
.caract__grid{
  display:grid;gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;
}
.caract{background:var(--negro);padding:clamp(1.4rem,4vw,2.2rem);display:flex;flex-direction:column;gap:.6rem}
.caract__titulo{font-size:var(--t-lg);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.caract__texto{font-size:var(--t-sm);color:var(--gris);line-height:1.6}
@media (min-width:768px){.caract__grid{grid-template-columns:repeat(3,1fr)}}

/* ---------------------------------------------------------------- Agenda */
.agenda{border-top:1px solid var(--linea)}
.agenda__grid{display:grid;gap:clamp(2rem,5vw,4rem)}
.agenda__lead{color:var(--gris);margin-top:1.2rem;max-width:44ch}
.agenda__directo{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(1.6rem,4vw,2.2rem)}
.agenda__directo .btn{flex:1 1 auto;min-width:min(100%,13rem)}

.agenda__form{
  display:flex;flex-direction:column;gap:1rem;
  background:var(--carbon);border:1px solid var(--linea);
  border-radius:var(--radio);padding:clamp(1.3rem,4vw,2rem);
}
.campo{display:flex;flex-direction:column;gap:.45rem}
.campo > span{
  font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--gris);
}
.campo > span em{font-style:normal;text-transform:none;letter-spacing:0;color:var(--gris-2)}
.campo input,.campo select,.campo textarea{
  width:100%;min-height:52px;padding:.8rem 1rem;
  font-family:inherit;font-size:var(--t-base);color:var(--hueso);
  background:var(--negro);border:1px solid var(--linea-fuerte);border-radius:10px;
  transition:border-color .25s,background-color .25s;
  -webkit-appearance:none;appearance:none;
}
.campo textarea{min-height:auto;resize:vertical;line-height:1.5}
.campo select{
  background-image:linear-gradient(45deg,transparent 50%,var(--gris) 50%),linear-gradient(135deg,var(--gris) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:2.6rem;
}
.campo input::placeholder,.campo textarea::placeholder{color:var(--gris-2)}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--cobre-claro);background:var(--carbon-2);
}
.campo-fila{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.agenda__enviar{width:100%;margin-top:.4rem}
.agenda__nota{font-size:var(--t-xs);color:var(--gris-2);text-align:center;line-height:1.5}

@media (min-width:900px){
  .agenda__grid{grid-template-columns:1fr 1fr;align-items:start}
  .agenda__directo .btn{flex:0 0 auto;min-width:0}
}

/* Instagram en la barra superior */
.nav__ig{display:grid;place-items:center;width:44px;height:44px;color:var(--hueso)}
.nav__ig .ico{width:1.35em;height:1.35em}
.nav__ig::after{display:none!important}

.agenda__enviar{font-size:var(--t-sm);padding-inline:1.2rem}

.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* <picture> no debe romper los layouts flex/grid */
picture{display:contents}

/* -------------------------------------------------- Contención de grillas
   Los <img> llevan width/height explícitos para reservar su espacio y evitar
   saltos de layout. El efecto secundario es que, como ítem de grilla, su
   min-width:auto deja que la columna crezca hasta el tamaño intrínseco de la
   imagen y desborde el ancho de la pantalla. min-width:0 permite encogerlos. */
.trayectoria__grid > *,
.caract__grid > *,
.agenda__grid > *,
.casos__grid > *,
.seccion__head > *,
.grid-galeria > *{min-width:0}

/* ============================================== Hero con varios retratos
   El fundido lo controla main.js agregando .is-activa, para que funcione
   con cualquier cantidad de fotos. Sin JavaScript se ve la primera, fija. */
.hero__slide{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1.4s var(--ease);
}
.hero__slide.is-activa{opacity:1}
.hero__slide img{
  width:100%;height:100%;object-fit:cover;
  object-position:var(--pos,50% 25%);
}
@media (prefers-reduced-motion:reduce){
  .hero__slide{transition:none}
}

/* ================================================================ Instagram */
.instagram{border-top:1px solid var(--linea);padding-block:var(--bloque)}
.ig__head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1.2rem;margin-bottom:clamp(1.6rem,4vw,2.5rem);
}
.ig__perfil{
  display:inline-flex;align-items:center;gap:.55rem;min-height:44px;
  padding:.6rem 1.2rem;border:1px solid var(--linea-fuerte);border-radius:999px;
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--gris);
  transition:color .25s,border-color .25s,background-color .25s;
}
.ig__perfil:hover{color:var(--negro);background:var(--hueso);border-color:var(--hueso)}

.ig__grid{
  display:grid;gap:clamp(.6rem,1.6vw,1rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
}
.ig__grid > *{min-width:0}
.ig__card{
  position:relative;display:block;overflow:hidden;
  border:1px solid var(--linea);border-radius:var(--radio);
  background:var(--carbon-2);aspect-ratio:1/1;
}
.ig__card img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;
  filter:grayscale(.15);transition:transform .7s var(--ease),filter .5s}
.ig__card:hover img{transform:scale(1.05);filter:grayscale(0)}
.ig__card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(11,11,13,.85) 100%);
}
.ig__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:.5rem;
  padding:clamp(.8rem,2.5vw,1.1rem);
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--hueso);
}
.ig__cap .ico{color:var(--cobre-claro);flex:none}

/* ============================================================ En movimiento */
.movimiento{border-top:1px solid var(--linea)}
.mov__grid{
  display:grid;gap:clamp(.6rem,1.6vw,1rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
}
.mov__grid > *{min-width:0}
.mov__item{
  position:relative;overflow:hidden;border-radius:var(--radio);
  border:1px solid var(--linea);background:var(--carbon-2);
  aspect-ratio:9/16;
}
.mov__item video{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.15);transition:filter .5s;
}
.mov__item:hover video{filter:grayscale(0)}
.mov__item::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 60%,rgba(11,11,13,.88) 100%);
}
.mov__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;gap:.15rem;
  padding:clamp(.8rem,2.5vw,1.2rem);
}
.mov__meta{font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--cobre-claro)}
.mov__titulo{font-size:var(--t-sm);font-weight:600;line-height:1.3}

/* Con cinco videos, tres por fila se leen mejor que cinco apretados */
@media (min-width:900px){
  .mov__grid{grid-template-columns:repeat(3,1fr)}
}

/* ============================================================== Calendario
   Fechas comprometidas, agrupadas por mes. Es una lista, no una grilla de
   días: lo que importa es qué está tomado, no la forma del almanaque. */
.calendario{border-top:1px solid var(--linea)}
.cal__grid{
  display:grid;gap:clamp(1.2rem,3vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
}
.cal__grid > *{min-width:0}
.cal__titulo{
  font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;
  color:var(--cobre-claro);padding-bottom:.7rem;margin-bottom:.3rem;
  border-bottom:1px solid var(--linea-fuerte);
}
.cal__dias{display:flex;flex-direction:column}
.cal__dia{
  display:flex;align-items:baseline;gap:clamp(.8rem,2vw,1.1rem);
  padding:.85rem 0;border-bottom:1px solid var(--linea);
}
.cal__num{
  font-family:var(--serif);font-size:clamp(1.5rem,4vw,1.9rem);line-height:1;
  color:var(--hueso);min-width:1.8em;flex:none;
}
.cal__detalle{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.cal__semana{
  font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--gris-2);
}
.cal__evento{font-size:var(--t-sm);color:var(--gris);line-height:1.4}
.cal__pie{margin-top:clamp(2rem,5vw,3rem);text-align:center}
.cal__pie .btn{width:min(100%,22rem)}