/* ═══════════════════════════════════════════
   MITO — hoja base
   Dirección: mandan las referencias
   (Lassie / Superpower / Biograph).
   Del brief se conservan paleta y logo.
   Receta glass medida en lassie.ai:
   pill blur(13px) bg translúcido r16 ·
   H1 serif 350 centrado · CTA blur(8px)
   ═══════════════════════════════════════════ */

:root{
  /* Paleta */
  --coffee:    #0E060B;   /* tinta y fondos de alto contraste */
  --charcoal:  #58595F;   /* texto secundario y rótulos */
  --porcelain: #F0F4EF;   /* fondo por defecto */
  --yellow:    #FAC30F;   /* énfasis y dato clave — máx. 1 por vista */
  --sky:       #2AAAF4;   /* acción, links y estados */

  /* Tipografía: sans de marca para UI/cuerpo, serif para titulares */
  --font: 'Archivo', system-ui, sans-serif;
  --title-family: 'Fraunces', Georgia, serif;
  --title-weight: 350;
  --title-width: 100;
  --title-track: -0.02em;

  /* Glass (medido en lassie.ai) */
  --glass-bg: rgba(240,244,239,.35);
  --glass-blur: blur(13px);
  --glass-border: rgba(255,255,255,.35);

  /* Ritmo */
  --rule: 1px;
  --gut: clamp(20px, 4vw, 56px);
  --nav-h: 76px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:var(--porcelain);
  color:var(--coffee);
  font-family:var(--font);
  font-weight:400;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body.is-locked{ overflow:hidden; }

a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }

/* Todo video/imagen que se monte en un contenedor de media
   llena la caja y recorta el excedente, sin deformarse. */
.hero__media video, .hero__media img,
.smedia video, .smedia img,
.case__media video, .case__media img,
.mpanel__media video, .mpanel__media img,
.swcard__shot video, .swcard__shot img,
.outro__panel video, .outro__panel img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.label{
  display:block;
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--charcoal);
}

/* ═══ LOGO ══════════════════════════════════
   Wordmark con fondo transparente, usado como
   máscara: así el color se controla por CSS y
   se le puede dar un contorno finito para que
   se lea sobre cualquier imagen de fondo.
   Cuando llegue el SVG original, solo cambia
   la URL de la máscara.
   ═════════════════════════════════════════ */
.logo{
  --logo-ink: var(--coffee);
  --logo-halo: transparent;
  display:block;
  aspect-ratio:1227/315;
  background-color:var(--logo-ink);
  -webkit-mask:url('../assets/logo-mito-mark.png') no-repeat center/contain;
  mask:url('../assets/logo-mito-mark.png') no-repeat center/contain;
  filter:
    drop-shadow(0 0 .6px var(--logo-halo))
    drop-shadow(0 0 .6px var(--logo-halo))
    drop-shadow(0 0 1.4px var(--logo-halo));
}
.logo--light{ --logo-ink: var(--coffee); }     /* sobre fondo claro */
.logo--dark { --logo-ink: var(--porcelain); }  /* sobre fondo oscuro */

/* ═══ 0 · NAV ═══════════════════════════════
   Pastilla flotante centrada arriba.
   Glass: bg translúcido + backdrop blur,
   radio 16. Al scrollear se compacta
   (los links colapsan, la pastilla queda).
   ═════════════════════════════════════════ */

.nav{
  position:fixed;
  top:16px;
  left:16px;
  right:16px;
  z-index:60;
  display:flex;
  align-items:center;
  color:var(--coffee);
  pointer-events:none;
}
.nav > *{ pointer-events:auto; }

/* Velo difuminado detrás de la nav: gradiente que se desvanece
   hacia abajo + desenfoque del contenido que pasa por debajo.
   Evita que el logo se superponga al texto de la página.
   Aparece solo cuando la nav está sobre fondo claro. */
.nav::before{
  content:'';
  position:fixed;
  top:0; left:0; right:0;
  height:124px;
  pointer-events:none;
  opacity:0;
  transition:opacity .4s ease;
  background:linear-gradient(to bottom,
    var(--porcelain) 0%,
    rgba(240,244,239,.82) 42%,
    rgba(240,244,239,0) 100%);
  -webkit-backdrop-filter:blur(9px);
  backdrop-filter:blur(9px);
  /* el desenfoque también se desvanece, para que no haya un corte duro */
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
}
.nav[data-state="scrolled"]::before,
.nav--dark-on-light::before{ opacity:1; }

/* espaciadores: al bajar, los de afuera colapsan y los de
   adentro crecen → MITO vuela a la izquierda, grilla a la derecha */
.nav__sp{
  flex-grow:0;
  flex-basis:2px;
  pointer-events:none !important;
  transition:flex-grow .5s cubic-bezier(.2,.7,.2,1);
}
.nav__sp--out{ flex-grow:1; }
.nav[data-state="scrolled"] .nav__sp--out{ flex-grow:0; }
.nav[data-state="scrolled"] .nav__sp--in{ flex-grow:1; }

/* la marca va suelta, sin pastilla: el logo se colorea
   según el fondo y lleva un halo finito para leerse
   sobre cualquier video o imagen */
.nav__mark{
  display:flex;
  align-items:center;
  padding:10px 4px;
}
.nav__mark .logo{
  height:24px;
  --logo-ink:#fff;
  --logo-halo:rgba(14,6,11,.55);
  transition:background-color .4s ease;
}
/* al scrollear queda sobre fondo claro → tinta oscura, halo blanco */
.nav[data-state="scrolled"] .nav__mark .logo,
.nav--dark-on-light .nav__mark .logo{
  --logo-ink:var(--coffee);
  --logo-halo:rgba(255,255,255,.85);
}

.nav__center{
  display:flex;
  align-items:center;
  gap:2px;
  padding:4px;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:16px;
  overflow:hidden;
  max-width:520px;
  opacity:1;
  transition:max-width .5s cubic-bezier(.2,.7,.2,1), opacity .3s ease,
             padding .5s ease, border-color .3s ease;
}
.nav[data-state="scrolled"] .nav__center{
  max-width:0;
  opacity:0;
  padding:4px 0;
  border-color:transparent;
}

.nav__links{
  display:flex;
  gap:2px;
  font-size:14px;
  font-weight:500;
  white-space:nowrap;
}
.nav__links a{
  padding:12px 16px;
  border-radius:12px;
  transition:background .25s ease;
}
.nav__links a:hover{ background:rgba(255,255,255,.65); }

.nav__cta{
  font-size:14px;
  font-weight:600;
  padding:12px 18px;
  background:var(--coffee);
  color:var(--porcelain);
  border-radius:12px;
  white-space:nowrap;
  transition:background .25s ease, color .25s ease;
}
.nav__cta:hover{ background:#fff; color:var(--coffee); }

.nav__grid{
  display:grid;
  grid-template-columns:repeat(3,4px);
  gap:4px;
  padding:16px;
  border:1px solid var(--glass-border);
  border-radius:14px;
  cursor:pointer;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  transition:background .25s ease;
}
.nav__grid span{ width:4px; height:4px; border-radius:50%; background:var(--coffee); }
.nav__grid:hover{ background:rgba(255,255,255,.75); }

/* ═══ MENÚ DESPLEGADO ═══════════════════════ */

.menu{
  position:fixed;
  inset:0;
  z-index:80;
  background:var(--coffee);
  color:var(--porcelain);
  display:flex;
  flex-direction:column;
  opacity:0;
  transition:opacity .3s ease;
}
.menu.is-open{ opacity:1; }
.menu[hidden]{ display:none; }

.menu__bar{
  height:56px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px 0 var(--gut);
  border-bottom:var(--rule) solid rgba(240,244,239,.2);
}
.menu__mark{ display:flex; align-items:center; }
.menu__mark .logo{ height:17px; }
.menu__close{
  background:transparent; border:0; color:var(--porcelain); cursor:pointer;
  font-family:inherit; font-size:12px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; padding:14px;
}
.menu__close:hover{ color:var(--yellow); }

.menu__body{
  flex:1;
  display:grid;
  grid-template-columns:1.6fr 1fr;
  align-items:start;
}

.menu__nav{
  display:flex;
  flex-direction:column;
  padding:clamp(24px,5vh,64px) var(--gut);
}
.menu__nav a{
  position:relative;
  display:flex;
  align-items:baseline;
  gap:20px;
  padding:clamp(10px,1.6vh,18px) 0;
  font-family:var(--font);
  font-weight:700;
  font-size:clamp(34px,6.4vw,76px);
  line-height:1.02;
  letter-spacing:var(--title-track);
  border-bottom:var(--rule) solid rgba(240,244,239,.16);
  transition:color .2s ease, padding-left .35s cubic-bezier(.2,.7,.2,1);
}
.menu__nav a i{
  font-style:normal;
  font-size:12px;
  font-weight:600;
  letter-spacing:.18em;
  color:var(--charcoal);
  transition:color .2s ease;
}
.menu__nav a:hover{ color:var(--yellow); padding-left:16px; }
.menu__nav a:hover i{ color:var(--yellow); }

.menu__aside{
  padding:clamp(24px,5vh,64px) var(--gut);
  display:flex;
  flex-direction:column;
  gap:40px;
  border-left:var(--rule) solid rgba(240,244,239,.16);
  align-self:stretch;
}
.menu__block .label{ color:#8a8b91; margin-bottom:14px; }
.menu__block ul li{ font-size:15px; padding:7px 0; border-bottom:1px solid rgba(240,244,239,.1); }
.menu__wa{
  display:inline-block;
  font-size:clamp(20px,2.4vw,28px);
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--sky);
  border-bottom:var(--rule) solid var(--sky);
  padding-bottom:4px;
}
.menu__wa:hover{ color:var(--yellow); border-color:var(--yellow); }

/* ═══ 1 · HERO ══════════════════════════════ */

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:calc(var(--nav-h) + 24px) var(--gut) 24px;
  color:#fff;
  overflow:hidden;
  text-align:center;
}

.hero__media{ position:absolute; inset:0; z-index:0; }

/* placeholder animado en escala de grises — reemplazar por <video> */
.ph{ position:absolute; inset:0; background:#2b2b2e; filter:grayscale(1) contrast(1.1); }
.ph span{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:.85;
  animation:drift 22s ease-in-out infinite;
}
.ph span:nth-child(1){ width:52vw; height:52vw; left:-6vw;  top:-8vw;  background:#8e8e93; }
.ph span:nth-child(2){ width:44vw; height:44vw; right:2vw;  top:14vh;  background:#525257; animation-delay:-7s; }
.ph span:nth-child(3){ width:60vw; height:60vw; left:22vw;  bottom:-24vw; background:#6f6f75; animation-delay:-14s; }

@keyframes drift{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  33%    { transform:translate3d(6vw,-4vh,0) scale(1.12); }
  66%    { transform:translate3d(-5vw,5vh,0) scale(.94); }
}

.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(14,6,11,.88) 0%, rgba(14,6,11,.42) 50%, rgba(14,6,11,.20) 100%);
}
.hero__grain{
  position:absolute; inset:0; opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ph__label{
  position:absolute; top:calc(var(--nav-h) + 16px); right:var(--gut);
  font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(240,244,239,.5); border:1px solid rgba(240,244,239,.3); padding:6px 10px;
}

.hero__content{
  position:relative; z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Receta Lassie: serif 64px w350 lh.95 ls -0.02em, centrado, span itálico */
.hero__title{
  font-family:var(--title-family);
  font-weight:var(--title-weight);
  font-size:clamp(34px,4.6vw,64px);
  line-height:.98;
  letter-spacing:var(--title-track);
  text-wrap:balance;
}
.hero__title em{ font-style:italic; }

.hero__sub{
  margin-top:clamp(14px,2vh,22px);
  max-width:46ch;
  font-size:clamp(14px,1.1vw,16px);
  line-height:1.6;
  color:rgba(255,255,255,.85);
}

/* ═══ WIDGET DE MÉTRICAS (receta Lassie) ════
   Línea fija arriba + línea que rota mostrando
   logros reales con clientes.
   ═════════════════════════════════════════ */
.ticker{
  margin-top:clamp(20px,3vh,32px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.ticker__lead{
  font-size:14px;
  color:rgba(255,255,255,.72);
}
.ticker__row{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:34px;
}
.ticker__icon{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  flex:0 0 28px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.34);
  background:rgba(240,244,239,.14);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:#fff;
  opacity:1;
  transition:opacity .35s ease, transform .35s ease;
}
.ticker__icon svg{ width:15px; height:15px; }
.ticker__icon.is-out{ opacity:0; transform:translateY(-6px); }
.ticker__text{
  font-size:clamp(15px,1.3vw,18px);
  color:#fff;
  opacity:1;
  transition:opacity .35s ease, transform .35s ease;
}
.ticker__text.is-out{ opacity:0; transform:translateY(-6px); }

/* ═══ WHATSAPP FLOTANTE ═════════════════════
   Fijo en pantalla, siempre visible.
   ═════════════════════════════════════════ */
.wafab{
  position:fixed;
  right:clamp(14px,2vw,24px);
  bottom:clamp(14px,2vw,24px);
  z-index:70;
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 20px 13px 16px;
  border-radius:999px;
  background:#25D366;
  color:#0b3d1f;
  font-size:14.5px;
  font-weight:600;
  box-shadow:0 6px 24px rgba(14,6,11,.22);
  transition:transform .25s ease, box-shadow .25s ease;
}
.wafab:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(14,6,11,.3); }
.wafab svg{ width:21px; height:21px; flex:0 0 21px; }

/* CTA glass anclado abajo al centro (receta Lassie:
   contenedor r16 bg translúcido blur(8px) borde fino, pill blanca adentro) */
.hero__cta{
  position:absolute;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  z-index:1;
}
.btn-glass{
  display:flex;
  align-items:center;
  gap:14px;
  padding:6px 6px 6px 18px;
  background:rgba(240,244,239,.18);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.3);
  border-radius:16px;
}
.btn-glass__hint{
  font-size:14px;
  color:rgba(255,255,255,.9);
  white-space:nowrap;
}
.btn-glass__pill{
  display:inline-block;
  background:#fff;
  color:var(--coffee);
  font-size:14px;
  font-weight:600;
  padding:12px 20px;
  border-radius:12px;
  white-space:nowrap;
  transition:background .25s ease, color .25s ease;
}
.btn-glass:hover .btn-glass__pill{ background:var(--coffee); color:#fff; }

/* ═══ 1b · PROBLEMA ═════════════════════════
   Identificación del dolor, antes de vender nada.
   ═════════════════════════════════════════ */

.pain{ padding:clamp(64px,12vh,140px) var(--gut); }

.pain__head{ margin-bottom:clamp(26px,4.5vh,48px); }
.pain__title{
  font-family:var(--title-family);
  font-weight:var(--title-weight);
  font-size:clamp(30px,3.4vw,46px);
  line-height:1.08;
  letter-spacing:var(--title-track);
  margin-top:10px;
}
.pain__title em{ font-style:italic; }

.pain__list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2px;
  border-top:1px solid rgba(14,6,11,.12);
}
.pain__list li{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:20px 4px;
  border-bottom:1px solid rgba(14,6,11,.12);
  font-size:clamp(15px,1.35vw,17.5px);
  line-height:1.5;
  max-width:46ch;
}
.pain__x{
  position:relative;
  flex:0 0 22px;
  width:22px;
  height:22px;
  margin-top:2px;
  border-radius:50%;
  border:1px solid rgba(176,42,26,.4);
}
.pain__x::before,.pain__x::after{
  content:'';
  position:absolute;
  left:50%; top:50%;
  width:9px; height:1.5px;
  background:#b02a1a;
}
.pain__x::before{ transform:translate(-50%,-50%) rotate(45deg); }
.pain__x::after{ transform:translate(-50%,-50%) rotate(-45deg); }

.pain__close{
  margin-top:clamp(24px,4vh,40px);
  max-width:58ch;
  font-size:clamp(16px,1.5vw,19px);
  line-height:1.6;
  font-weight:500;
}

/* ═══ 3b · POR QUÉ NOSOTROS ═════════════════
   Comparación a dos columnas: cómo trabaja la
   mayoría vs. cómo trabajamos nosotros.
   ═════════════════════════════════════════ */

.diff{
  padding:clamp(64px,12vh,140px) var(--gut);
  background:var(--coffee);
  color:var(--porcelain);
}

.diff__head{ margin-bottom:clamp(28px,5vh,52px); }
.diff__head .label{ color:#8a8b91; }
.diff__title{
  font-family:var(--title-family);
  font-weight:var(--title-weight);
  font-size:clamp(30px,3.6vw,50px);
  line-height:1.06;
  letter-spacing:var(--title-track);
  margin-top:10px;
}
.diff__title em{ font-style:italic; }
.diff__lead{
  margin-top:16px;
  max-width:58ch;
  font-size:15.5px;
  line-height:1.65;
  color:rgba(240,244,239,.72);
}

.diff__cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(14px,1.8vw,26px);
}
.diff__col{
  padding:clamp(22px,2.6vw,36px);
  border-radius:20px;
  border:1px solid rgba(240,244,239,.14);
}
.diff__col--good{
  background:rgba(240,244,239,.05);
  border-color:rgba(250,195,15,.35);
}

.diff__col h3{
  display:flex;
  align-items:center;
  gap:11px;
  font-size:clamp(16px,1.5vw,19px);
  font-weight:600;
  letter-spacing:-.005em;
  padding-bottom:16px;
  margin-bottom:6px;
  border-bottom:1px solid rgba(240,244,239,.14);
}

.diff__mark{
  position:relative;
  flex:0 0 22px;
  width:22px; height:22px;
  border-radius:50%;
  border:1px solid currentColor;
  opacity:.75;
}
.diff__col--bad h3{ color:rgba(240,244,239,.62); }
.diff__col--bad .diff__mark::before,
.diff__col--bad .diff__mark::after{
  content:''; position:absolute; left:50%; top:50%;
  width:9px; height:1.5px; background:currentColor;
}
.diff__col--bad .diff__mark::before{ transform:translate(-50%,-50%) rotate(45deg); }
.diff__col--bad .diff__mark::after{ transform:translate(-50%,-50%) rotate(-45deg); }

.diff__col--good h3{ color:var(--yellow); }
.diff__col--good .diff__mark::before{
  content:''; position:absolute;
  left:6px; top:10px;
  width:5px; height:1.5px; background:currentColor;
  transform:rotate(45deg); transform-origin:left center;
}
.diff__col--good .diff__mark::after{
  content:''; position:absolute;
  left:9px; top:13px;
  width:9px; height:1.5px; background:currentColor;
  transform:rotate(-52deg); transform-origin:left center;
}

.diff__col ul li{
  padding:14px 0;
  font-size:15px;
  line-height:1.55;
  border-bottom:1px solid rgba(240,244,239,.08);
}
.diff__col ul li:last-child{ border-bottom:0; }
.diff__col--bad ul li{ color:rgba(240,244,239,.6); }

.diff__close{
  margin-top:clamp(26px,4vh,42px);
  max-width:60ch;
  font-size:clamp(16px,1.5vw,19px);
  line-height:1.6;
  font-weight:500;
}
.diff__cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:clamp(20px,3vh,30px);
  background:var(--yellow);
  color:var(--coffee);
  font-size:15px;
  font-weight:600;
  padding:15px 26px;
  border-radius:999px;
  transition:gap .25s ease, background .25s ease;
}
.diff__cta:hover{ gap:16px; background:#fff; }

/* ═══ 5b · FAQ ══════════════════════════════ */

.faq{ padding:clamp(56px,10vh,120px) var(--gut) clamp(64px,12vh,140px); }

.faq__head{ margin-bottom:clamp(24px,4vh,42px); }
.faq__title{
  font-family:var(--title-family);
  font-weight:var(--title-weight);
  font-size:clamp(30px,3.4vw,46px);
  line-height:1.08;
  letter-spacing:var(--title-track);
  margin-top:10px;
}
.faq__title em{ font-style:italic; }

.faq__list{ max-width:860px; border-top:1px solid rgba(14,6,11,.12); }

.faq__item{ border-bottom:1px solid rgba(14,6,11,.12); }
.faq__item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px 4px;
  cursor:pointer;
  list-style:none;
  font-size:clamp(16px,1.5vw,19px);
  font-weight:600;
  letter-spacing:-.005em;
  transition:color .2s ease;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:var(--sky); }

/* signo + que gira a × al abrir */
.faq__item summary::after{
  content:'';
  flex:0 0 20px;
  width:20px; height:20px;
  background:
    linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.faq__item[open] summary::after{ transform:rotate(135deg); }
.faq__item[open] summary{ color:var(--coffee); }

.faq__body{ padding:0 4px 24px; max-width:64ch; }
.faq__body p{
  font-size:15.5px;
  line-height:1.65;
  color:var(--charcoal);
}
.faq__body p + p{ margin-top:12px; }

/* ═══ 2 · SERVICIOS — pinned scroll ══════════
   La sección mide (pasos × 62vh) + 100svh.
   El interior queda sticky mientras el scroll
   avanza los pasos. 62vh por paso = recorrido
   corto (la queja con Superpower era el largo).
   ═════════════════════════════════════════ */

.services{
  --steps:4;
  --step-len:62vh;
  height:calc(var(--steps) * var(--step-len) + 100svh);
  position:relative;
}

.services__pin{
  position:sticky;
  top:0;
  height:100svh;
  display:grid;
  grid-template-columns:0.9fr 1fr;
  gap:clamp(24px,4vw,72px);
  align-items:center;
  padding:calc(var(--nav-h) + 12px) var(--gut) 32px;
  overflow:hidden;
}

/* visual izquierda: tarjeta redondeada, un medio por paso.
   Proporción FIJA 4:5 para poder producir los videos con
   medida exacta; la altura manda y el ancho se deriva. */
.services__media{
  position:relative;
  height:min(72vh,640px);
  aspect-ratio:4/5;
  width:auto;
  justify-self:center;
  border-radius:24px;
  overflow:hidden;
}
.smedia{
  position:absolute;
  inset:0;
  opacity:0;
  transform:scale(1.04);
  transition:opacity .55s ease, transform .8s ease;
}
.smedia.is-active{ opacity:1; transform:scale(1); }
.smedia .ph{ position:absolute; inset:0; }
.ph--a{ background:#232326; }
.ph--b{ background:#2e2a24; }
.ph--c{ background:#20262a; }
.ph--d{ background:#26222a; }
.smedia .ph__label{ top:auto; bottom:16px; right:16px; }

/* lista derecha */
.services__list .label{ margin-bottom:10px; }

.services__title{
  font-family:var(--title-family);
  font-weight:var(--title-weight);
  font-size:clamp(30px,3.4vw,46px);
  line-height:1.05;
  letter-spacing:var(--title-track);
  margin-bottom:clamp(20px,3.5vh,40px);
}
.services__title em{ font-style:italic; }
.services__lead{
  margin-top:-14px;
  margin-bottom:clamp(18px,3vh,32px);
  max-width:44ch;
  font-size:15px;
  line-height:1.6;
  color:var(--charcoal);
}

.steps{ counter-reset:none; }
.step{ border-top:1px solid rgba(14,6,11,.14); }
.step:last-child{ border-bottom:1px solid rgba(14,6,11,.14); }

.step button{
  display:grid;
  grid-template-columns:44px 1fr;
  column-gap:8px;
  width:100%;
  text-align:left;
  background:none;
  border:0;
  cursor:pointer;
  font-family:inherit;
  color:inherit;
  padding:16px 4px;
}

.step__num{
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--charcoal);
  padding-top:5px;
  transition:color .3s ease;
}
.step__name{
  font-size:clamp(19px,1.8vw,26px);
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--charcoal);
  transition:color .3s ease;
}
.step__desc{
  grid-column:2;
  font-size:14.5px;
  line-height:1.6;
  color:var(--charcoal);
  max-width:44ch;
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition:max-height .5s cubic-bezier(.2,.7,.2,1), opacity .4s ease, margin .4s ease;
}

.step__more{
  display:inline-block;
  margin-top:10px;
  font-size:13.5px;
  font-weight:600;
  color:var(--coffee);
  border-bottom:1px solid var(--yellow);
  padding-bottom:2px;
}
.step__more:hover{ color:var(--sky); border-color:var(--sky); }

.step.is-active .step__num{ color:var(--yellow); }
.step.is-active .step__name{ color:var(--coffee); }
.step.is-active .step__desc{ max-height:190px; opacity:1; margin-top:8px; }

/* ═══ 3 · CASOS — grilla con hover de blur ══
   Receta Biograph: 3 columnas, texto debajo.
   Hover: la imagen se desenfoca y aparece la
   métrica del caso.
   ═════════════════════════════════════════ */

.cases{
  padding:clamp(64px,12vh,140px) var(--gut);
}

.cases__head{ margin-bottom:clamp(28px,5vh,56px); }

.cases__title{
  font-family:var(--title-family);
  font-weight:var(--title-weight);
  font-size:clamp(30px,3.4vw,46px);
  line-height:1.08;
  letter-spacing:var(--title-track);
  max-width:24ch;
  margin-top:10px;
}
.cases__title em{ font-style:italic; }

.cases__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.8vw,28px);
}

.case__media{
  position:relative;
  aspect-ratio:3/3.6;
  border-radius:20px;
  overflow:hidden;
  cursor:pointer;
}
.case__media .ph{
  position:absolute; inset:0;
  transition:filter .55s ease, transform .7s ease;
}
.case__media .ph__label{ top:16px; right:16px; }

/* velo con la métrica */
.case__veil{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:24px;
  background:rgba(14,6,11,.34);
  opacity:0;
  transition:opacity .45s ease;
}
.case__tag{
  position:absolute;
  top:16px;
  left:16px;
  font-size:12px;
  font-weight:600;
  color:#fff;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(240,244,239,.16);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.3);
}
.case__metric{
  font-family:var(--title-family);
  font-weight:var(--title-weight);
  font-size:clamp(44px,4.6vw,72px);
  line-height:1;
  color:var(--yellow);
  transform:translateY(14px);
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.case__metricLabel{
  margin-top:8px;
  font-size:14px;
  color:rgba(255,255,255,.92);
  transform:translateY(14px);
  transition:transform .5s cubic-bezier(.2,.7,.2,1) .05s;
}

/* estado hover / activo (tap en móvil) */
.case__media:hover .ph,
.case.is-open .ph{
  filter:blur(14px) brightness(.85);
  transform:scale(1.06);
}
.case__media:hover .case__veil,
.case.is-open .case__veil{ opacity:1; }
.case__media:hover .case__metric,
.case__media:hover .case__metricLabel,
.case.is-open .case__metric,
.case.is-open .case__metricLabel{ transform:translateY(0); }

.case{ cursor:pointer; }
.case:focus-visible{ outline:2px solid var(--sky); outline-offset:6px; border-radius:22px; }

.case__info{ padding:16px 4px 0; }
.case__open{
  display:inline-block;
  margin-top:10px;
  font-size:13.5px;
  font-weight:600;
  color:var(--coffee);
  border-bottom:1px solid var(--yellow);
  padding-bottom:2px;
  transition:color .2s ease, border-color .2s ease;
}
.case:hover .case__open{ color:var(--sky); border-color:var(--sky); }

/* ═══ MODAL DE CASO ═════════════════════════ */

.cmodal{
  position:fixed;
  inset:0;
  z-index:90;
  display:grid;
  place-items:center;
  padding:clamp(12px,3vw,40px);
}
.cmodal[hidden]{ display:none; }

.cmodal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(14,6,11,.62);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity .3s ease;
}
.cmodal.is-open .cmodal__backdrop{ opacity:1; }

.cmodal__panel{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,0.85fr) minmax(0,1fr);
  width:min(1040px,100%);
  max-height:min(88vh,820px);
  background:var(--porcelain);
  border-radius:24px;
  overflow:hidden;
  opacity:0;
  transform:translateY(14px) scale(.985);
  transition:opacity .32s ease, transform .38s cubic-bezier(.2,.7,.2,1);
}
.cmodal.is-open .cmodal__panel{ opacity:1; transform:none; }

.cmodal__close{
  position:absolute;
  top:14px; right:14px;
  z-index:2;
  display:grid;
  place-items:center;
  width:38px; height:38px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:50%;
  background:rgba(240,244,239,.18);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:#fff;
  cursor:pointer;
  transition:background .25s ease, color .25s ease;
}
.cmodal__close svg{ width:17px; height:17px; }
.cmodal__close:hover{ background:#fff; color:var(--coffee); }

.cmodal__media{ position:relative; min-height:260px; overflow:hidden; }
.cmodal__media .ph{ position:absolute; inset:0; }
.cmodal__media .ph__label{ top:auto; bottom:14px; left:14px; right:auto; }

.cmodal__content{
  padding:clamp(24px,3vw,44px);
  overflow-y:auto;
}
.cmodal__tag{
  display:inline-block;
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--charcoal);
  border:1px solid rgba(14,6,11,.16);
  border-radius:999px;
  padding:7px 14px;
}
.cmodal__title{
  margin-top:16px;
  font-family:var(--title-family);
  font-weight:var(--title-weight);
  font-size:clamp(24px,2.6vw,36px);
  line-height:1.08;
  letter-spacing:var(--title-track);
}

.cmodal__metric{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin-top:18px;
  padding:16px 0;
  border-top:1px solid rgba(14,6,11,.12);
  border-bottom:1px solid rgba(14,6,11,.12);
}
.cmodal__metric b{
  font-family:var(--title-family);
  font-weight:var(--title-weight);
  font-size:clamp(30px,3.2vw,44px);
  line-height:1;
  letter-spacing:var(--title-track);
}
.cmodal__metric span{ font-size:14px; color:var(--charcoal); max-width:26ch; }

.cmodal__body{ margin-top:22px; }
.cmodal__body h4{
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--yellow);
  margin-bottom:8px;
}
.cmodal__body h4 + p{ margin-bottom:20px; }
.cmodal__body p{
  font-size:15px;
  line-height:1.65;
  color:var(--charcoal);
}

.cmodal__body p:last-child{ margin-bottom:0; }
.case__info h3{
  font-size:15.5px;
  font-weight:600;
  letter-spacing:-.005em;
}
.case__info p{
  margin-top:5px;
  font-size:14px;
  line-height:1.55;
  color:var(--charcoal);
  max-width:38ch;
}

/* ═══ 4 · MÉTODO — paneles apilados ═════════
   Receta Lassie: al scrollear, cada panel se
   despliega y cubre al anterior. Sticky puro,
   sin JS: cada tarjeta queda clavada y la
   siguiente le pasa por encima.
   ═════════════════════════════════════════ */

.method{
  padding:clamp(64px,12vh,140px) var(--gut) clamp(48px,8vh,96px);
}

.method__head{ margin-bottom:clamp(28px,5vh,56px); }

.method__title{
  font-family:var(--title-family);
  font-weight:var(--title-weight);
  font-size:clamp(30px,3.4vw,46px);
  line-height:1.08;
  letter-spacing:var(--title-track);
  margin-top:10px;
}
.method__title em{ font-style:italic; }

.method__stack{ display:flex; flex-direction:column; gap:clamp(18px,3vh,32px); }

.mpanel{
  position:sticky;
  /* cada panel queda un poco más abajo que el anterior:
     al apilarse se ve el borde de los previos asomando */
  top:calc(84px + var(--i) * 14px);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(20px,3vw,56px);
  align-items:center;
  min-height:min(72vh,620px);
  border-radius:24px;
  padding:clamp(24px,4vw,64px);
  overflow:hidden;
}

.mpanel--light{ background:#fff; border:1px solid rgba(14,6,11,.08); }
.mpanel--dark{ background:var(--coffee); color:var(--porcelain); }
.mpanel--accent{ background:var(--yellow); color:var(--coffee); }

.mpanel__num{
  display:inline-block;
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid currentColor;
  opacity:.75;
  margin-bottom:clamp(16px,2.5vh,28px);
}

.mpanel__text h3{
  font-family:var(--title-family);
  font-weight:var(--title-weight);
  font-size:clamp(28px,3vw,44px);
  line-height:1.06;
  letter-spacing:var(--title-track);
}
.mpanel__text h3 em{ font-style:italic; }

.mpanel__text p{
  margin-top:clamp(14px,2vh,22px);
  font-size:15px;
  line-height:1.65;
  max-width:46ch;
  opacity:.85;
}

/* proporción fija 4:3 — pensado para grabaciones de pantalla */
.mpanel__media{
  position:relative;
  height:min(52vh,460px);
  aspect-ratio:4/3;
  width:auto;
  justify-self:center;
  border-radius:16px;
  overflow:hidden;
}
.mpanel__media .ph{ position:absolute; inset:0; }
.mpanel__media .ph__label{ top:auto; bottom:14px; right:14px; }

/* ═══ 5 · TESTIMONIOS — carrusel (Klarna) ═══
   Scroll-snap horizontal; la tarjeta centrada
   se destaca, el resto queda atenuado.
   ═════════════════════════════════════════ */

.quotes{
  padding:clamp(64px,12vh,140px) 0;
  overflow:hidden;
}

.quotes__head{
  text-align:center;
  margin-bottom:clamp(28px,5vh,52px);
  padding:0 var(--gut);
}
.quotes__head .label{ margin-bottom:10px; }

.quotes__title{
  font-family:var(--title-family);
  font-weight:var(--title-weight);
  font-size:clamp(30px,3.4vw,46px);
  line-height:1.08;
  letter-spacing:var(--title-track);
}
.quotes__title em{ font-style:italic; }

.quotes__track{
  display:flex;
  gap:clamp(14px,1.6vw,24px);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  /* deja que la primera y la última puedan centrarse */
  padding:14px calc(50vw - min(44vw,210px));
  scrollbar-width:none;
}
.quotes__track::-webkit-scrollbar{ display:none; }

.quote{
  flex:0 0 min(88vw,420px);
  scroll-snap-align:center;
  background:#fff;
  border:1px solid rgba(14,6,11,.08);
  border-radius:20px;
  padding:clamp(22px,2.6vw,34px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:22px;
  opacity:.45;
  transform:scale(.96);
  transition:opacity .4s ease, transform .4s ease, border-color .4s ease;
}
.quote.is-center{
  opacity:1;
  transform:scale(1);
  border-color:rgba(14,6,11,.22);
}

.quote blockquote{
  font-family:var(--title-family);
  font-weight:var(--title-weight);
  font-size:clamp(18px,1.6vw,22px);
  line-height:1.35;
  letter-spacing:-.01em;
}
.quote figcaption{ display:flex; flex-direction:column; gap:2px; }
.quote figcaption strong{ font-size:14px; font-weight:600; }
.quote figcaption span{ font-size:13px; color:var(--charcoal); }

.quotes__dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:clamp(20px,3.5vh,32px);
}
.quotes__dots button{
  width:8px;
  height:8px;
  border-radius:999px;
  border:0;
  padding:0;
  cursor:pointer;
  background:rgba(14,6,11,.18);
  transition:background .3s ease, width .3s ease;
}
.quotes__dots button.is-active{ background:var(--coffee); width:22px; }

/* ═══ 6 · CIERRE — CTA final ════════════════ */

.outro{ padding:0 var(--gut) clamp(48px,8vh,96px); }

.outro__panel{
  position:relative;
  min-height:min(78vh,660px);
  border-radius:24px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  padding:clamp(40px,7vh,80px) var(--gut);
}
.outro__panel .ph{ position:absolute; inset:0; }
.outro__panel .ph__label{ top:16px; right:16px; }
.outro__scrim{
  position:absolute; inset:0;
  background:rgba(14,6,11,.55);
}

.outro__content{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.outro__title{
  font-family:var(--title-family);
  font-weight:var(--title-weight);
  font-size:clamp(32px,4.2vw,58px);
  line-height:1.05;
  letter-spacing:var(--title-track);
  text-wrap:balance;
}
.outro__title em{ font-style:italic; }
.outro__sub{
  margin-top:clamp(14px,2vh,20px);
  max-width:48ch;
  font-size:clamp(14px,1.1vw,16px);
  line-height:1.6;
  color:rgba(255,255,255,.85);
}
.outro__content .btn-glass{ margin-top:clamp(24px,4vh,36px); }

/* ═══ 7 · FOOTER ════════════════════════════ */

.footer{
  padding:clamp(32px,5vh,56px) var(--gut) 28px;
  border-top:1px solid rgba(14,6,11,.1);
}

.footer__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  padding-bottom:24px;
}
.footer__mark{ display:flex; align-items:center; }
.footer__mark .logo{ height:20px; }
.footer__nav{ display:flex; gap:6px; flex-wrap:wrap; }
.footer__nav a{
  font-size:14px;
  font-weight:500;
  padding:10px 14px;
  border-radius:12px;
  transition:background .25s ease;
}
.footer__nav a:hover{ background:rgba(14,6,11,.06); }
.footer__wa{
  font-size:14px;
  font-weight:600;
  padding:11px 18px;
  border-radius:12px;
  background:var(--coffee);
  color:var(--porcelain);
  transition:background .25s ease;
}
.footer__wa:hover{ background:var(--sky); }

.footer__bottom{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding-top:20px;
  border-top:1px solid rgba(14,6,11,.08);
  font-size:12.5px;
  color:var(--charcoal);
}

/* ═══ PÁGINA · SOFTWARE A MEDIDA ════════════
   Sección "why": receta Mixpanel enterprise —
   texto anclado (sticky) a la izquierda,
   tarjetas de producto desfilando a la derecha,
   cada una con número, texto y captura que
   sangra fuera de la tarjeta.
   ═════════════════════════════════════════ */

.phero{
  padding:clamp(140px,22vh,220px) var(--gut) clamp(56px,10vh,110px);
  max-width:1100px;
}
.phero .label{ margin-bottom:14px; }
.phero__title{
  font-family:var(--title-family);
  font-weight:var(--title-weight);
  font-size:clamp(36px,4.8vw,68px);
  line-height:1.04;
  letter-spacing:var(--title-track);
}
.phero__title em{ font-style:italic; }
.phero__sub{
  margin-top:clamp(16px,2.4vh,24px);
  max-width:56ch;
  font-size:clamp(15px,1.2vw,17px);
  line-height:1.65;
  color:var(--charcoal);
}

.why{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:clamp(28px,5vw,96px);
  padding:0 var(--gut) clamp(64px,12vh,140px);
  align-items:start;
}

.why__left{
  position:sticky;
  top:calc(84px + 6vh);
}
.why__title{
  font-family:var(--title-family);
  font-weight:var(--title-weight);
  font-size:clamp(30px,3.4vw,48px);
  line-height:1.06;
  letter-spacing:var(--title-track);
}
.why__title em{ font-style:italic; }
.why__text{
  margin-top:clamp(14px,2vh,22px);
  font-size:15.5px;
  line-height:1.65;
  color:var(--charcoal);
  max-width:44ch;
}
.why__cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:clamp(20px,3vh,30px);
  background:var(--coffee);
  color:var(--porcelain);
  font-size:15px;
  font-weight:600;
  padding:14px 24px;
  border-radius:999px;
  transition:background .25s ease, gap .25s ease;
}
.why__cta:hover{ background:var(--sky); gap:16px; }

.why__right{
  display:flex;
  flex-direction:column;
  gap:clamp(18px,3vh,32px);
}

.swcard{
  position:relative;
  background:#fff;
  border:1px solid rgba(14,6,11,.08);
  border-radius:24px;
  padding:clamp(24px,3vw,44px) clamp(24px,3vw,44px) 0;
  overflow:hidden;
}
.swcard__num{
  display:inline-block;
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  padding:6px 12px;
  border-radius:8px;
  border:1px solid rgba(14,6,11,.18);
  color:var(--charcoal);
  margin-bottom:18px;
}
.swcard h3{
  font-size:clamp(22px,2vw,28px);
  font-weight:600;
  letter-spacing:-.015em;
}
.swcard p{
  margin-top:10px;
  font-size:15px;
  line-height:1.6;
  color:var(--charcoal);
  max-width:52ch;
}

/* la captura sangra hacia abajo y a la derecha, como Mixpanel */
.swcard__shot{
  position:relative;
  margin-top:clamp(20px,3vh,32px);
  margin-left:clamp(20px,4vw,64px);
  margin-right:calc(clamp(24px,3vw,44px) * -1);
  height:clamp(220px,30vw,380px);
  border-radius:16px 0 0 0;
  overflow:hidden;
  border:1px solid rgba(14,6,11,.08);
  border-right:0;
  border-bottom:0;
}
.swcard__shot .ph{ position:absolute; inset:0; }
.swcard__shot .ph__label{ top:14px; right:14px; }

/* nav sobre fondo claro: chips con borde más presente */
.nav--dark-on-light .nav__mark,
.nav--dark-on-light .nav__grid,
.nav--dark-on-light .nav__center{ border-color:rgba(14,6,11,.12); }

.menu__block ul a{ border-bottom:1px solid transparent; }
.menu__block ul a:hover{ color:var(--yellow); }

/* ═══ MOLDE COMPARTIDO · PÁGINAS DE SERVICIO ═
   Estructura tomada de trompoagencia.com:
   secciones numeradas, proceso con semanas,
   entregables en grilla y enlaces cruzados
   entre las cuatro líneas de trabajo.
   ═════════════════════════════════════════ */

/* rótulo numerado que encabeza cada sección */
.secnum{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--charcoal);
  margin-bottom:14px;
}
.secnum::after{
  content:'';
  flex:1;
  height:1px;
  background:rgba(14,6,11,.14);
}

/* hero de página de servicio: dos estadísticas al pie */
.phero__stats{
  display:flex;
  gap:clamp(28px,5vw,72px);
  margin-top:clamp(26px,4vh,42px);
  padding-top:clamp(20px,3vh,28px);
  border-top:1px solid rgba(14,6,11,.14);
}
.phero__stat b{
  display:block;
  font-family:var(--title-family);
  font-weight:var(--title-weight);
  font-size:clamp(34px,4vw,54px);
  line-height:1;
  letter-spacing:var(--title-track);
}
.phero__stat span{
  display:block;
  margin-top:8px;
  font-size:13.5px;
  line-height:1.45;
  color:var(--charcoal);
  max-width:22ch;
}

/* 01 · lo que sostenemos */
.stance{
  padding:clamp(56px,10vh,120px) var(--gut);
  border-top:1px solid rgba(14,6,11,.1);
}
.stance__claim{
  font-family:var(--title-family);
  font-weight:var(--title-weight);
  font-size:clamp(28px,3.6vw,50px);
  line-height:1.08;
  letter-spacing:var(--title-track);
  max-width:20ch;
}
.stance__claim em{ font-style:italic; }
.stance__text{
  margin-top:clamp(18px,2.6vh,28px);
  max-width:62ch;
  font-size:15.5px;
  line-height:1.7;
  color:var(--charcoal);
}

/* proceso con duración en semanas */
.proc{ padding:clamp(56px,10vh,120px) var(--gut); border-top:1px solid rgba(14,6,11,.1); }
.proc__title,
.deliv__title,
.units__title{
  font-family:var(--title-family);
  font-weight:var(--title-weight);
  font-size:clamp(28px,3.4vw,46px);
  line-height:1.06;
  letter-spacing:var(--title-track);
  margin-bottom:clamp(24px,4vh,44px);
}
.proc__title em,.deliv__title em,.units__title em{ font-style:italic; }

.proc__steps{ border-top:1px solid rgba(14,6,11,.14); }
.proc__step{
  display:grid;
  grid-template-columns:64px 1fr 200px;
  gap:clamp(16px,2.5vw,40px);
  align-items:start;
  padding:clamp(20px,3vh,30px) 0;
  border-bottom:1px solid rgba(14,6,11,.14);
  transition:background .25s ease;
}
.proc__step:hover{ background:rgba(14,6,11,.02); }
.proc__n{
  font-size:13px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--yellow);
  padding-top:4px;
}
.proc__body h3{
  font-size:clamp(18px,1.8vw,23px);
  font-weight:600;
  letter-spacing:-.01em;
}
.proc__body p{
  margin-top:8px;
  font-size:14.5px;
  line-height:1.6;
  color:var(--charcoal);
  max-width:52ch;
}
.proc__when{
  justify-self:start;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--charcoal);
  border:1px solid rgba(14,6,11,.16);
  border-radius:999px;
  padding:8px 15px;
  white-space:nowrap;
}

/* entregables A–D */
.deliv{ padding:clamp(56px,10vh,120px) var(--gut); border-top:1px solid rgba(14,6,11,.1); }
.deliv__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.5vw,20px);
}
.deliv__card{
  padding:clamp(20px,2.2vw,30px);
  border:1px solid rgba(14,6,11,.12);
  border-radius:18px;
  transition:border-color .25s ease, transform .25s ease;
}
.deliv__card:hover{ border-color:var(--coffee); transform:translateY(-3px); }
.deliv__letter{
  display:grid;
  place-items:center;
  width:30px; height:30px;
  border-radius:9px;
  background:var(--coffee);
  color:var(--porcelain);
  font-size:12.5px;
  font-weight:700;
  margin-bottom:16px;
}
.deliv__card h3{ font-size:16.5px; font-weight:600; letter-spacing:-.005em; }
.deliv__card p{ margin-top:8px; font-size:14px; line-height:1.55; color:var(--charcoal); }

/* enlaces cruzados a las otras líneas */
.units{
  padding:clamp(56px,10vh,120px) var(--gut);
  background:var(--coffee);
  color:var(--porcelain);
}
.units .secnum{ color:#8a8b91; }
.units .secnum::after{ background:rgba(240,244,239,.16); }

.units__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.6vw,22px);
}
.units__card{
  display:block;
  padding:clamp(22px,2.4vw,32px);
  border:1px solid rgba(240,244,239,.16);
  border-radius:18px;
  transition:border-color .25s ease, background .25s ease;
}
.units__card:hover{ border-color:var(--yellow); background:rgba(240,244,239,.04); }
.units__card i{
  font-style:normal;
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--charcoal);
}
.units__card h3{
  margin-top:14px;
  font-family:var(--title-family);
  font-weight:var(--title-weight);
  font-size:clamp(21px,2.2vw,28px);
  line-height:1.1;
  letter-spacing:var(--title-track);
}
.units__card p{
  margin-top:10px;
  font-size:14.5px;
  line-height:1.55;
  color:rgba(240,244,239,.68);
}
.units__card span{
  display:inline-block;
  margin-top:16px;
  font-size:14px;
  font-weight:600;
  color:var(--yellow);
}

/* ═══ PÁGINA · AGENDA ═══════════════════════ */

.agenda{ padding:clamp(120px,18vh,180px) var(--gut) clamp(56px,9vh,110px); max-width:900px; }

.agenda__intro{ margin-bottom:clamp(28px,4vh,44px); }
.agenda__intro .label{ margin-bottom:12px; }
.agenda__title{
  font-family:var(--title-family);
  font-weight:var(--title-weight);
  font-size:clamp(32px,4.2vw,56px);
  line-height:1.05;
  letter-spacing:var(--title-track);
}
.agenda__title em{ font-style:italic; }
.agenda__sub{
  margin-top:16px;
  max-width:60ch;
  font-size:15.5px;
  line-height:1.65;
  color:var(--charcoal);
}

.agenda__card{
  background:#fff;
  border:1px solid rgba(14,6,11,.1);
  border-radius:24px;
  padding:clamp(24px,3.4vw,44px);
}
.agenda__stepnum{
  display:inline-block;
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--charcoal);
  border:1px solid rgba(14,6,11,.16);
  border-radius:999px;
  padding:7px 14px;
  margin-bottom:clamp(20px,3vh,30px);
}

.q{ border:0; margin-bottom:clamp(24px,3.4vh,36px); }
.q legend{
  font-size:clamp(17px,1.6vw,20px);
  font-weight:600;
  letter-spacing:-.01em;
  margin-bottom:14px;
}
.q label{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 16px;
  margin-bottom:8px;
  border:1px solid rgba(14,6,11,.12);
  border-radius:12px;
  font-size:15px;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.q label:hover{ border-color:rgba(14,6,11,.3); background:rgba(14,6,11,.02); }
.q input[type="radio"]{ accent-color:var(--coffee); width:17px; height:17px; flex:0 0 17px; }
.q label:has(input:checked){ border-color:var(--coffee); background:rgba(250,195,15,.1); }

.q--fields{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field{ display:flex; flex-direction:column; gap:6px; padding:0; border:0; margin:0; cursor:default; }
.field:hover{ background:none; }
.field span{ font-size:12.5px; font-weight:600; color:var(--charcoal); }
.field input{
  font-family:inherit;
  font-size:15px;
  padding:13px 15px;
  border:1px solid rgba(14,6,11,.14);
  border-radius:12px;
  background:var(--porcelain);
  color:var(--coffee);
}
.field input:focus{ outline:2px solid var(--sky); outline-offset:1px; border-color:transparent; }

.agenda__err{
  margin-bottom:14px;
  font-size:14px;
  font-weight:600;
  color:#b02a1a;
}
.agenda__submit{
  width:100%;
  font-family:inherit;
  font-size:16px;
  font-weight:600;
  padding:18px 26px;
  border:0;
  border-radius:14px;
  background:var(--coffee);
  color:var(--porcelain);
  cursor:pointer;
  transition:background .25s ease;
}
.agenda__submit:hover{ background:var(--sky); }
.agenda__fine{ margin-top:14px; font-size:13px; color:var(--charcoal); }

.agenda__h2{
  font-family:var(--title-family);
  font-weight:var(--title-weight);
  font-size:clamp(26px,3vw,38px);
  letter-spacing:var(--title-track);
  line-height:1.08;
}
.agenda__resume{ margin-top:12px; font-size:15px; line-height:1.6; color:var(--charcoal); max-width:56ch; }
.agenda__cal{
  margin-top:24px;
  border:1px solid rgba(14,6,11,.1);
  border-radius:16px;
  overflow:hidden;
  background:var(--porcelain);
}
.agenda__cal iframe{
  display:block;
  width:100%;
  height:clamp(620px,78vh,780px);
  border:0;
}
.agenda__wa{
  display:inline-block;
  margin-top:16px;
  font-size:15px;
  font-weight:600;
  color:var(--sky);
  border-bottom:1px solid var(--sky);
  padding-bottom:2px;
}


/* ═══ MÓVIL ═══ */
@media (max-width:860px){
  :root{ --nav-h:64px; }
  .nav__links{ display:none; }
  .nav__cta{ display:none; }

  /* En celular la pantalla es chica: la nav se va al bajar y
     vuelve al subir, con su velo difuminado. */
  .nav{
    transition:transform .38s cubic-bezier(.2,.7,.2,1), opacity .28s ease;
  }
  .nav[data-hide="true"]{
    transform:translateY(-150%);
    opacity:0;
    pointer-events:none;
  }
  .nav[data-hide="true"]::before{ opacity:0; }
  /* al reaparecer siempre lleva velo, aunque esté sobre el video */
  .nav[data-revealed="true"]::before{ opacity:1; }
  /* en celular el velo es más corto pero más sólido arriba,
     porque el logo queda a menos distancia del contenido */
  .nav::before{
    height:104px;
    background:linear-gradient(to bottom,
      var(--porcelain) 0%,
      var(--porcelain) 44%,
      rgba(240,244,239,0) 100%);
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
    mask-image:linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
  }

  /* servicios: sin pin — bloques apilados */
  .services{ height:auto; }
  .services__pin{
    position:static;
    height:auto;
    grid-template-columns:1fr;
    padding-top:56px;
  }
  .services__media{ height:38vh; order:2; }
  .smedia{ transition:opacity .4s ease; }
  .step__desc{ max-width:none; }

  /* problema y por qué nosotros: una columna */
  .pain__list{ grid-template-columns:1fr; }
  .pain__list li{ max-width:none; }
  .diff__cols{ grid-template-columns:1fr; }

  /* casos: una columna, tap despliega la métrica */
  .cases__grid{ grid-template-columns:1fr; }
  .case__media{ aspect-ratio:3/3.2; }

  /* modal: una columna, imagen arriba */
  .cmodal__panel{ grid-template-columns:1fr; max-height:92vh; overflow-y:auto; }
  .cmodal__media{ min-height:0; height:34vh; }
  .cmodal__content{ overflow:visible; }

  /* agenda + whatsapp flotante */
  .q--fields{ grid-template-columns:1fr; }
  .wafab{ padding:14px; }
  .wafab span{ display:none; }

  /* el CTA del hero sube para no quedar debajo del botón flotante */
  .hero__cta{ bottom:84px; }
  /* ticker: el ícono se alinea con la primera línea del texto */
  .ticker__row{ align-items:flex-start; }
  .ticker__icon{ margin-top:3px; }
  .ticker__text{ text-align:center; }

  /* software a medida: una columna, texto arriba */
  .why{ grid-template-columns:1fr; }
  .why__left{ position:static; }
  .swcard__shot{ margin-left:0; height:34vh; }

  /* molde de páginas de servicio */
  .phero__stats{ flex-direction:column; gap:24px; }
  .proc__step{ grid-template-columns:44px 1fr; }
  .proc__when{ grid-column:2; margin-top:12px; }
  .deliv__grid{ grid-template-columns:1fr 1fr; }
  .units__grid{ grid-template-columns:1fr; }

  /* método: los paneles se apilan igual, en una columna */
  .mpanel{
    grid-template-columns:1fr;
    top:calc(76px + var(--i) * 10px);
    min-height:0;
    gap:20px;
  }
  .mpanel__media{ height:30vh; }
  .menu__body{ grid-template-columns:1fr; }
  .menu__aside{ border-left:0; border-top:var(--rule) solid rgba(240,244,239,.16); }
  .hero__title{ font-size:clamp(32px,9vw,44px); }
  .btn-glass{ flex-direction:column; gap:10px; padding:14px; width:calc(100vw - 48px); }
  .btn-glass__pill{ width:100%; text-align:center; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .ph span{ animation:none; }
  *{ transition-duration:.01ms !important; }
}