/* ==================================================================
   MKT4U V3.0 — BRUTALISMO EDITORIAL EXPERIENCIAL
   Solo desktop. Movil pendiente.
   ================================================================== */

:root {
  --c-white: #FEFEFC;
  --c-vino: #4A0E2C;
  --c-vino-claro: #6B1A40;
  --c-vino-deep: #2D0819;
  /* Fondo nocturno UNICO de todas las secciones oscuras (el de la seccion
     de la chica). No introducir otros tonos: rompen la continuidad. */
  --c-noche: #0A0608;
  --c-halo-vino: rgba(74, 14, 44, 0.65);
  --c-beige: #EFE6D6;
  --c-beige-claro: #F5EEE0;
  --c-neon: #E8FF00;
  --c-onice: #0A0A0A;
  --c-grey-soft: #6f6f6f;

  --ff-display: 'Playfair Display', 'Times New Roman', serif;
  --ff-sans: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;

  --max-w: 1440px;
  --gutter: clamp(32px, 5vw, 80px);
  --ease-brut: cubic-bezier(.77,0,.18,1);
}

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

html, body {
  background: var(--c-white);
  color: var(--c-vino);
  font-family: var(--ff-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* NO aplicar overflow-x: hidden aqui — rompe el position:sticky
     de las secciones Autoridad y Arsenal. Los desbordes horizontales
     se controlan con overflow:hidden en contenedores concretos. */
}
/* Scroll suave para anchors de navegacion. El snap al CTA final se maneja por JS. */
html {
  scroll-behavior: smooth;
  /* Reserva espacio para la scrollbar de Windows antes de que aparezca.
     Evita el layout shift de 17px que rompe elementos fixed/sticky en Windows. */
  scrollbar-gutter: stable;
}

/* Ancho minimo razonable para preservar el layout editorial. Por debajo de esto
   aparece scroll horizontal controlado (mejor que un layout roto). */
body { min-width: 960px; }

img, video { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--c-neon); color: var(--c-vino); }

/* ==================================================================
   UTILIDADES
   ================================================================== */

.caps {
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-vino);
}

.mark-editorial {
  background: var(--c-vino);
  color: var(--c-beige);
  font-weight: 700;
  padding: 0 6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.hidden { display: none !important; }

/* ==================================================================
   PRELOADER
   ================================================================== */

.preloader {
  position: fixed;
  inset: 0;
  background: var(--c-white);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .8s var(--ease-brut), visibility .8s var(--ease-brut);
}
.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
}
.preloader__mark { width: 360px; height: auto; }
.preloader__text {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: drawMark 1.6s var(--ease-brut) forwards;
}
@keyframes drawMark {
  to { stroke-dashoffset: 0; fill: var(--c-vino); }
}

/* ==================================================================
   NAV
   ================================================================== */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(254, 254, 252, 0.65);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(74, 14, 44, 0.06);
}
.nav__inner {
  width: 100%;
  padding: 18px 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__brand {
  display: flex;
  align-items: center;
  line-height: 0;
  height: 38px;
}
/* Logo MKT4U en su color original (negro sobre transparente) */
.nav__brand-logo {
  display: block;
  width: auto;
  height: 38px;
  object-fit: contain;
  object-position: left center;
  transition: opacity .25s ease;
}
.nav__brand:hover .nav__brand-logo {
  opacity: 0.7;
}

/* Nav links (solo contiene el CTA principal) */
.nav__links {
  display: flex;
  align-items: center;
}
.nav__cta {
  background: var(--c-vino);
  color: var(--c-neon) !important;
  font-family: var(--ff-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 12px 26px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .3s var(--ease-brut), background .3s ease;
}
.nav__cta:hover {
  transform: translateY(-2px);
  background: var(--c-vino-deep);
}

/* Hamburger button + drawer + CTA secundario movil + etiqueta vertical hero
   ocultos por defecto en desktop. Se muestran en tablet (iPad) y mobile. */
.nav__hamburger { display: none; }
.nav-drawer { display: none; }
.demo__cta--mobile { display: none; }
.hero__vertical-label { display: none; }
/* Drawer disponible en:
   - Mobile (max-width 1024)
   - iPad/tablets (touch primary) — captura iPad en landscape tambien */
@media (max-width: 1024px),
       (hover: none) and (pointer: coarse) {
  .nav-drawer { display: block; }
}

/* ==================================================================
   SIDE NAV — Navegacion lateral por puntos
   ================================================================== */

.side-nav {
  position: fixed;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 150;
  padding: 12px 0;
}
.side-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.side-nav__item {
  position: relative;
}
.side-nav__link {
  display: flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  padding: 6px 0;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.side-nav__link:focus {
  outline: none;
}
.side-nav__link:focus-visible {
  outline: 2px solid var(--c-neon);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Punto vino por default — pequeño y sutil */
.side-nav__dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-vino);
  opacity: 0.4;
  flex-shrink: 0;
  transform-origin: center center;
  transition: width 0.4s var(--ease-brut),
              height 0.4s var(--ease-brut),
              opacity 0.4s ease,
              background 0.4s ease,
              transform 0.4s var(--ease-brut);
}

/* Seccion activa: punto iluminado y ligeramente mas grande */
.side-nav__item.is-active .side-nav__dot {
  width: 10px;
  height: 10px;
  opacity: 1;
}

/* Hover sobre el side-nav: TODOS los puntos crecen 25% en proporcion */
.side-nav:hover .side-nav__dot {
  transform: scale(1.25);
}

/* Label: texto vino minimalista, sin recuadros */
.side-nav__label {
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-vino);
  margin-left: 0;
  opacity: 0;
  transform: translateX(-8px);
  pointer-events: none;
  white-space: nowrap;
  position: relative;
  padding: 4px 0;
  transition: opacity 0.35s var(--ease-brut),
              transform 0.35s var(--ease-brut),
              margin-left 0.35s var(--ease-brut),
              color 0.35s ease;
}

/* Hover en el side-nav: se despliegan todos los labels */
.side-nav:hover .side-nav__label {
  opacity: 1;
  transform: translateX(0);
  margin-left: 18px;
  pointer-events: auto;
}

/* Hover sobre un link especifico: punto mas iluminado + scale extra
   (el scale base 1.25 del side-nav:hover ya aplica, aqui lo subimos mas) */
.side-nav__link:hover .side-nav__dot {
  opacity: 1;
  transform: scale(1.5);
}
.side-nav__link:hover .side-nav__label {
  color: var(--c-vino-deep);
}

/* SOMBREADO BEIGE difuminado SOLO del lado izquierdo.
   Se extiende del top al bottom del viewport. Como tiene z-index menor al
   navbar superior, visualmente queda "debajo" del navbar y llega hasta el. */
.side-nav__shadow {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 230px; /* solo cubre dots + labels — no se extiende sobre el contenido */
  background: linear-gradient(to right,
              rgba(239, 230, 214, 0.7) 0%,
              rgba(239, 230, 214, 0.55) 40%,
              rgba(239, 230, 214, 0.25) 75%,
              rgba(239, 230, 214, 0) 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 95; /* debajo del navbar (100) y del side-nav (150) */
  transition: opacity 0.45s ease;
}
.side-nav:hover ~ .side-nav__shadow {
  opacity: 1;
}

/* ==================================================================
   WHATSAPP FLOTANTE
   ================================================================== */

.wa-floating {
  position: fixed;
  right: 32px;
  bottom: 32px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--c-vino);
  /* Verde-amarillo neon del proyecto */
  color: #E7FF33;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  box-shadow: 0 4px 18px rgba(74, 14, 44, 0.25);
  transition: transform .35s var(--ease-brut), box-shadow .4s ease;
}
/* Logo SVG mas grande y centrado */
.wa-floating__icon {
  width: 32px;
  height: 32px;
  display: block;
}
.wa-floating:hover {
  transform: scale(1.15);
  animation-play-state: paused;
}

/* Highlight: 3 pulsos de sombra vino, el 3ro acompañado de salto.
   Ciclo total de 5s con loop infinito. Se pausa via JS (hover/zoom/demo). */
.wa-floating.is-highlighted {
  animation: waSequence 5s ease-in-out infinite;
}

@keyframes waSequence {
  /* === PULSO 1 (0 → 16%, ~0.8s) — sombra suave === */
  0% {
    transform: translateY(0) scale(1);
    box-shadow:
      0 4px 18px rgba(74, 14, 44, 0.25),
      0 0 0 0 rgba(74, 14, 44, 0.5);
  }
  8% {
    box-shadow:
      0 4px 22px rgba(74, 14, 44, 0.4),
      0 0 0 10px rgba(74, 14, 44, 0.18);
  }
  16% {
    box-shadow:
      0 4px 18px rgba(74, 14, 44, 0.25),
      0 0 0 18px rgba(74, 14, 44, 0);
  }

  /* === PULSO 2 (16 → 32%, ~0.8s) — sombra suave === */
  24% {
    box-shadow:
      0 4px 22px rgba(74, 14, 44, 0.4),
      0 0 0 10px rgba(74, 14, 44, 0.18);
  }
  32% {
    box-shadow:
      0 4px 18px rgba(74, 14, 44, 0.25),
      0 0 0 18px rgba(74, 14, 44, 0);
  }

  /* === PULSO 3 + SALTO (32 → 56%, ~1.2s) — clima del ciclo === */
  40% {
    transform: translateY(-12px) scale(1.12);
    box-shadow:
      0 14px 30px rgba(74, 14, 44, 0.55),
      0 0 0 14px rgba(74, 14, 44, 0.25);
  }
  48% {
    transform: translateY(-12px) scale(1.12);
    box-shadow:
      0 14px 30px rgba(74, 14, 44, 0.55),
      0 0 0 22px rgba(74, 14, 44, 0.05);
  }
  56% {
    transform: translateY(0) scale(1);
    box-shadow:
      0 4px 18px rgba(74, 14, 44, 0.25),
      0 0 0 28px rgba(74, 14, 44, 0);
  }

  /* === REPOSO (56 → 100%, ~2.2s) — descanso antes de repetir === */
  100% {
    transform: translateY(0) scale(1);
    box-shadow:
      0 4px 18px rgba(74, 14, 44, 0.25),
      0 0 0 0 rgba(74, 14, 44, 0);
  }
}

/* ==================================================================
   BOTONES
   ================================================================== */

.btn {
  display: inline-block;
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 18px 32px;
  border: 1.5px solid var(--c-vino);
  cursor: pointer;
  transition: all .3s var(--ease-brut);
}
.btn--neon {
  background: var(--c-neon);
  color: var(--c-vino);
  box-shadow: 6px 6px 0 var(--c-vino);
}
.btn--neon:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--c-vino);
}

.btn-massive {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--c-neon);
  color: var(--c-vino);
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(56px, 7vw, 110px);
  letter-spacing: -0.01em;
  padding: 60px 40px;
  border: 3px solid var(--c-neon);
  margin: 80px 0;
  line-height: 0.95;
  transition: all .4s var(--ease-brut);
}
.btn-massive:hover {
  background: var(--c-vino);
  color: var(--c-neon);
  border-color: var(--c-neon);
  letter-spacing: 0;
}

/* ==================================================================
   PLACEHOLDERS (negro + logo MKT4U)
   ================================================================== */

.placeholder {
  background: var(--c-onice);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--c-vino);
}
.placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(74,14,44,0.4), transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(232,255,0,0.06), transparent 60%);
  pointer-events: none;
}
.placeholder__logo {
  width: 100px;
  filter: brightness(0) invert(1);
  opacity: 0.92;
  position: relative;
  z-index: 2;
}
.placeholder__logo--lg { width: 200px; }
.placeholder__caption {
  margin-top: 18px;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  position: relative;
  z-index: 2;
}
.placeholder__pulse {
  position: absolute;
  bottom: 24px; right: 24px;
  width: 10px; height: 10px;
  background: var(--c-neon);
  border-radius: 50%;
  z-index: 2;
  animation: pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.6); opacity: 0.5; }
}

.placeholder--team {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-width: 320px;
}
.placeholder--institucional {
  width: 100%;
  height: 100%;
  min-height: 480px;
}
.placeholder--clip {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: 32px;
}

/* ==================================================================
   SECCION 1 — HERO (2/3 izquierda + 1/3 derecha, todo blanco)
   ================================================================== */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 620px;
  background: var(--c-white);
  overflow: hidden;
  display: grid;
  /* 56.67% / 43.33% — la seccion del equipo se desplaza 10% a la izquierda
     dandole 10% mas de espacio a la influencer */
  grid-template-columns: 56.67% 43.33%;
  align-items: stretch;
  padding-top: 90px;
}

/* Lado izquierdo (2/3): equipo de fondo + titulos centrados encima */
.hero__left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 4vw 0 0;
}

/* Wrapper del equipo — recibe la animacion de entrada (scale + fade) */
.hero__team-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transform: scale(0.4);
  opacity: 0;
  transform-origin: center center;
  animation: teamEnter 1.5s cubic-bezier(0.22, 1, 0.36, 1) 1.8s forwards;
}

/* Imagen del equipo: cubre el 2/3 izquierdo, con breathing loop sutil */
.hero__team-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% bottom;
  pointer-events: none;
  transform-origin: center center;
  animation: teamBreathing 6s ease-in-out 3.3s infinite;
}

@keyframes teamEnter {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes teamBreathing {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.018); }
}

/* Contenedor de textos overlay encima del equipo */
.hero__messages {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 880px;
  min-height: 280px;
  text-align: center;
}
.hero__message {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translate(-8px, -50px) rotate(-0.6deg);
  pointer-events: none;
}
.hero__message.is-active {
  animation: heroIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  pointer-events: auto;
}
.hero__message.is-leaving {
  animation: heroOut 0.95s cubic-bezier(0.64, 0, 0.78, 0) forwards;
}

@keyframes heroIn {
  0%   { opacity: 0; transform: translate(-10px, -55px) rotate(-0.7deg); }
  60%  { opacity: 1; transform: translate(-2px, 3px) rotate(0.15deg); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0); }
}
@keyframes heroOut {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0); }
  100% { opacity: 0; transform: translate(8px, 55px) rotate(0.7deg); }
}

.hero__title {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(52px, 5.6vw, 112px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--c-beige);
  margin: 0 0 24px;
  text-transform: uppercase;
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.85),
    0 4px 35px rgba(0, 0, 0, 0.65);
}
/* Mensajes 2 y 3 con texto mas pequeno para que no se encimen con el boton */
.hero__message[data-message="2"] .hero__title,
.hero__message[data-message="3"] .hero__title {
  font-size: clamp(42px, 4.6vw, 92px);
}

.hero__block {
  display: inline-block;
  background: var(--c-beige);
  color: var(--c-vino);
  padding: 0.04em 0.22em 0.10em;
  line-height: 1;
  font-style: italic;
  letter-spacing: -0.015em;
  text-shadow: none;
}

.hero__subtitle {
  display: none;
}

.hero__ctas {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 56px;
  margin-top: 32px;
}

/* Boton CTA — pill amarillo refinado */
.hero__cta {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: 0 auto;
  width: fit-content;
  background: var(--c-neon);
  color: var(--c-vino);
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 16px 34px;
  border-radius: 999px;
  opacity: 0;
  transform: translate(16px, 80px) rotate(1.5deg);
  pointer-events: none;
}
/* Boton: entra desde ABAJO con delay de 0.5s para llegar despues del titulo */
.hero__cta.is-active {
  animation: heroInButton 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
  pointer-events: auto;
}
.hero__cta.is-leaving {
  animation: heroOutButton 0.95s cubic-bezier(0.64, 0, 0.78, 0) 0.5s both;
}
.hero__cta:hover {
  background: var(--c-vino);
  color: var(--c-neon);
}

@keyframes heroInButton {
  0%   { opacity: 0; transform: translate(10px, 55px) rotate(0.7deg); }
  60%  { opacity: 1; transform: translate(2px, -3px) rotate(-0.15deg); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0); }
}
@keyframes heroOutButton {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0); }
  100% { opacity: 0; transform: translate(-8px, -55px) rotate(-0.7deg); }
}

/* Lado derecho (1/3): influencer sobre blanco, sin caja, sin halo, sin grayscale */
.hero__right {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 0;
  overflow: hidden;
}
.hero__influencer {
  /* Video horizontal 1924x1076 centrado en su 1/3 derecho */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 88%;
  margin: 0 auto;
  object-fit: cover;
  object-position: center center;
  display: block;
  opacity: 1;
  transition: opacity 0.5s ease;
}
/* Video de respiracion (idle): oculto por defecto, visible con is-active */
.hero__influencer--idle {
  opacity: 0;
  pointer-events: none;
}
.hero__influencer--idle.is-active {
  opacity: 1;
}
/* Video de despedida: oculto por defecto, visible con is-visible (scroll).
   object-position: center top para que la cara quede anclada arriba y no se
   corte cuando el hero scrollea fuera del viewport.
   transition corta para que la opacidad siga el scroll sin lag. */
.hero__influencer--despedida {
  opacity: 0;
  pointer-events: none;
  height: 100%;
  object-position: center top;
  transition: opacity 0.15s linear;
}
.hero__influencer--despedida.is-visible {
  opacity: 1;
}
/* Cuando un video se esta ocultando (fade out) */
.hero__influencer.is-fading {
  opacity: 0;
}

/* ==================================================================
   SECCION 2 — AUTORIDAD / MANIFIESTO INSTITUCIONAL (sticky scroll)
   ================================================================== */

.autoridad {
  background: var(--c-white);
  width: 100%;
}
/* Track largo que habilita el sticky scroll */
.autoridad__track {
  position: relative;
  height: 320vh;
}
.autoridad__pinned {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 620px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  padding-top: 90px;
}

/* Lado izquierdo (1/3): textos de diferenciales */
.autoridad__left {
  position: relative;
  padding: 0 4vw 0 5vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.autoridad__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 48px;
}
.autoridad__index {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 28px;
  color: var(--c-vino);
  padding-right: 16px;
  border-right: 1.5px solid var(--c-vino);
}
.autoridad__label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-vino);
}

.autoridad__messages {
  position: relative;
  min-height: 340px;
  overflow: visible;
}
.autoridad__message {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translate(-90px, 0) rotate(-0.8deg);
  pointer-events: none;
}
.autoridad__message.is-active {
  animation: autoridadIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  pointer-events: auto;
}
.autoridad__message.is-leaving {
  animation: autoridadOut 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Entrada por la IZQUIERDA con ligera curva vertical */
@keyframes autoridadIn {
  0% {
    opacity: 0;
    transform: translate(-80px, 8px) rotate(-0.8deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0);
  }
}

/* Salida hacia la DERECHA con ligera curva vertical */
@keyframes autoridadOut {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0);
  }
  100% {
    opacity: 0;
    transform: translate(80px, 8px) rotate(0.8deg);
  }
}

.autoridad__title {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(44px, 4.4vw, 88px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--c-vino);
  margin: 0 0 28px;
  text-transform: uppercase;
}
/* La palabra enfatizada en italica vino, sin bloque beige */
.autoridad__title em {
  font-style: italic;
  font-weight: 900;
  color: var(--c-vino);
}
.autoridad__text {
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  color: var(--c-vino);
  max-width: 440px;
  margin: 0;
}

.autoridad__progress {
  display: flex;
  gap: 10px;
  margin-top: 56px;
}
.autoridad__progress-bar {
  width: 52px;
  height: 2px;
  background: rgba(74, 14, 44, 0.15);
  transition: background .5s ease;
}
.autoridad__progress-bar.is-active {
  background: var(--c-vino);
}

/* Lado derecho (2/3): video institucional sobre blanco, sin caja */
.autoridad__right {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-right: 3vw;
}
.autoridad__video-wrap {
  position: relative;
  width: 100%;
  height: 82%;
  cursor: pointer;
}
.autoridad__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Overlay beige traslucido que aparece en hover + cuando esta pausado */
.autoridad__overlay {
  position: absolute;
  inset: 0;
  background: rgba(239, 230, 214, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
  z-index: 3;
}
.autoridad__video-wrap:hover .autoridad__overlay,
.autoridad__video-wrap.is-paused .autoridad__overlay {
  opacity: 1;
  pointer-events: auto;
}

/* Boton central de play/pause */
.autoridad__play-btn {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 2px solid var(--c-vino);
  background: rgba(254, 254, 252, 0.9);
  color: var(--c-vino);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transform: scale(0.85);
  transition: background .3s ease, color .3s ease, transform .3s var(--ease-brut);
}
.autoridad__video-wrap:hover .autoridad__play-btn,
.autoridad__video-wrap.is-paused .autoridad__play-btn {
  transform: scale(1);
}
.autoridad__play-btn:hover {
  background: var(--c-vino);
  color: var(--c-beige);
  transform: scale(1.08);
}
.autoridad__play-btn svg {
  fill: currentColor;
}
.autoridad__play-icon { display: none; }
/* Cuando esta reproduciendo, el overlay muestra el boton de pausa */
.autoridad__video-wrap.is-playing .autoridad__play-icon--pause { display: block; }
/* Cuando esta pausado, muestra el de play */
.autoridad__video-wrap.is-paused .autoridad__play-icon--play { display: block; }

/* Boton de mute en esquina inferior derecha */
.autoridad__mute-btn {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid var(--c-vino);
  background: rgba(254, 254, 252, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--c-vino);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 4;
  opacity: 0;
  transition: background .25s ease, color .25s ease, transform .25s ease, opacity .35s ease;
}
.autoridad__video-wrap:hover .autoridad__mute-btn,
.autoridad__video-wrap.is-paused .autoridad__mute-btn {
  opacity: 1;
}
.autoridad__mute-btn:hover {
  background: var(--c-vino);
  color: var(--c-beige);
  transform: translateY(-2px);
}
.autoridad__mute-icon { display: none; }
/* Muted → mostrar icono "activar sonido" (speaker con ondas) */
.autoridad__mute-btn.is-muted .autoridad__mute-icon--activate { display: block; }
/* Unmuted → mostrar icono "silenciar" (speaker con X) */
.autoridad__mute-btn:not(.is-muted) .autoridad__mute-icon--silence { display: block; }

/* Boton de pantalla completa (a la izquierda del mute) */
.autoridad__fs-btn {
  position: absolute;
  right: 76px;
  bottom: 20px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid var(--c-vino);
  background: rgba(254, 254, 252, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--c-vino);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 4;
  opacity: 0;
  transition: background .25s ease, color .25s ease, transform .25s ease, opacity .35s ease;
}
.autoridad__video-wrap:hover .autoridad__fs-btn,
.autoridad__video-wrap.is-paused .autoridad__fs-btn {
  opacity: 1;
}
.autoridad__fs-btn:hover {
  background: var(--c-vino);
  color: var(--c-beige);
  transform: translateY(-2px);
}
.autoridad__fs-icon { display: none; }
/* Default → mostrar icono "enter fullscreen" */
.autoridad__fs-btn:not(.is-fullscreen) .autoridad__fs-icon--enter { display: block; }
/* En fullscreen → mostrar icono "exit" */
.autoridad__fs-btn.is-fullscreen .autoridad__fs-icon--exit { display: block; }

/* ==================================================================
   SECCION 3 — VALIDACION OPERATIVA (metricas de poder)
   ================================================================== */

.proof {
  position: relative;
  width: 100%;
  background: var(--c-beige);
  padding: 140px 5vw 160px;
}
.proof__inner {
  max-width: 1440px;
  margin: 0 auto;
}
.proof__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
}
.proof__index {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 28px;
  color: var(--c-vino);
  padding-right: 16px;
  border-right: 1.5px solid var(--c-vino);
}
.proof__label-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-vino);
}

.proof__statement {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(48px, 5.8vw, 104px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--c-vino);
  margin: 0 0 110px;
  max-width: 1180px;
  text-transform: none;
}
.proof__statement em {
  font-style: italic;
  font-weight: 900;
}

.proof__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  align-items: start;
}
.proof__metric {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.proof__num {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(72px, 8.6vw, 152px);
  line-height: 0.88;
  letter-spacing: -0.03em;
  color: var(--c-vino);
  display: inline-block;
  margin: 0;
}
/* Metrica destacada con highlight amarillo neon */
.proof__metric--accent .proof__num {
  position: relative;
  display: inline-block;
  align-self: flex-start;
}
.proof__metric--accent .proof__num::after {
  content: "";
  position: absolute;
  left: -0.06em;
  right: -0.06em;
  bottom: 0.12em;
  height: 0.26em;
  background: var(--c-neon);
  z-index: -1;
}
.proof__label {
  font-family: var(--ff-sans);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--c-vino);
  max-width: 320px;
  margin: 0;
}

/* ==================================================================
   SECCION 4 — ARSENAL DE SERVICIOS (4 columnas, full viewport)
   Inicia seccionada en 4 columnas iguales. Al scrollear, se expande
   un pilar a la vez (8fr vs 1fr) con animacion custom via setInterval.
   ================================================================== */

.arsenal {
  background: var(--c-white);
  width: 100%;
}
.arsenal__track {
  position: relative;
  height: 520vh;
}
.arsenal__pinned {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 620px;
  padding: 0;
  overflow: hidden;
}

/* Eyebrow flotante (absolute, no consume altura) */
.arsenal__eyebrow {
  position: absolute;
  top: 40px;
  left: 5vw;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 16px;
  pointer-events: none;
}
.arsenal__index {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 26px;
  color: var(--c-vino);
  padding-right: 16px;
  border-right: 1.5px solid var(--c-vino);
}
.arsenal__label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-vino);
}

/* Contenedor de las 4 columnas: full viewport.
   --pilar-tracks es escrito por JS con valores tipo "1fr 1fr 1fr 1fr" o
   "7fr 1fr 1fr 1fr" segun el pilar activo. En desktop lo usamos como
   columnas; en movil como filas (ver media query al final del archivo). */
.arsenal__columns {
  display: grid;
  grid-template-columns: var(--pilar-tracks, 1fr 1fr 1fr 1fr);
  width: 100%;
  height: 100%;
}

/* ---- Cada pilar = columna ---- */
.pilar {
  position: relative;
  overflow: hidden;
  background: var(--c-white);
  cursor: pointer;
  min-width: 0;
  transition: background 1s var(--ease-brut);
}
.pilar + .pilar {
  box-shadow: inset 1px 0 0 rgba(74, 14, 44, 0.08);
}
.pilar.is-active {
  background: rgba(239, 230, 214, 0.3);
}

/* ================================================================
   HEAD: numeral + titulo
   Estrategia: el head SIEMPRE esta en position absolute.
   Usamos top/left con transition para el movimiento suave.
   El titulo usa transform: rotate() para la rotacion animable.
   ================================================================ */
.pilar__head {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  /* Estado base: centrado en la columna */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: top 1s var(--ease-brut),
              left 1s var(--ease-brut),
              transform 1s var(--ease-brut),
              gap 1s var(--ease-brut);
}

.pilar__roman {
  font-family: var(--ff-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(72px, 6.4vw, 128px);
  line-height: 0.9;
  color: var(--c-vino);
  display: block;
  flex-shrink: 0;
  transition: font-size 1s var(--ease-brut),
              opacity 0.6s ease;
}

.pilar__title {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(18px, 1.7vw, 28px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--c-vino);
  text-transform: uppercase;
  margin: 0;
  /* Base (4 columnas): el titulo esta estructurado en 2 spans .pilar__title-line
     separados por .pilar__break, asi cada linea queda en nowrap y el titulo
     total en 2 filas alineadas verticalmente con los demas pilares. */
  white-space: normal;
  max-width: 100%;
  text-align: center;
  transition: font-size 1s var(--ease-brut),
              transform 1s var(--ease-brut),
              opacity 0.6s ease,
              letter-spacing 1s ease;
  transform-origin: center center;
  /* Estado base: sin rotacion (horizontal) */
  transform: rotate(0deg);
}

/* Salto de linea semantico del titulo: en estado base rompe linea
   (2 filas), en estado activo y contraido se convierte en espacio
   inline (1 fila) via las reglas de abajo. */
.pilar__break {
  display: block;
  height: 0;
  font-size: 0;
  line-height: 0;
}

/* Cada segmento de linea del titulo NUNCA se parte — asi "Ecosistemas de"
   queda en una fila y "Conversion" en otra, nunca en 3 filas. */
.pilar__title-line {
  display: inline-block;
  white-space: nowrap;
}

/* ================================================================
   PILAR ACTIVO (expandido):
   Numero + titulo se mantienen HORIZONTAL.
   Se desplazan al top-left del pilar expandido.
   ================================================================ */
.pilar.is-active .pilar__head {
  top: 120px;
  left: 5vw;
  transform: translate(0, 0);
  flex-direction: row;
  align-items: baseline;
  gap: 24px;
  text-align: left;
}
.pilar.is-active .pilar__roman {
  font-size: clamp(48px, 4.5vw, 80px);
}
.pilar.is-active .pilar__title {
  font-size: clamp(22px, 2.4vw, 42px);
  letter-spacing: -0.02em;
  white-space: nowrap;
  max-width: none;
  text-align: left;
  /* Sigue horizontal, una sola linea */
  transform: rotate(0deg);
}
/* En estados activo y contraido, el separador de linea se convierte en
   un espacio inline para que el titulo quede en una sola fila limpia. */
.pilar.is-active .pilar__title .pilar__break,
.arsenal__columns.has-active .pilar:not(.is-active) .pilar__title .pilar__break {
  display: inline;
}
.pilar.is-active .pilar__title .pilar__break::before,
.arsenal__columns.has-active .pilar:not(.is-active) .pilar__title .pilar__break::before {
  content: " ";
}

/* ================================================================
   PILARES CONTRAIDOS (cuando hay uno activo):
   Numero arriba centrado.
   Titulo rota -90° (lectura bottom-to-top) con transicion suave.
   ================================================================ */
.arsenal__columns.has-active .pilar:not(.is-active) .pilar__head {
  /* Numero y titulo se separan: el head ocupa toda la altura */
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  flex-direction: column;
  align-items: center;
  gap: 0;
  height: 100%;
}
.arsenal__columns.has-active .pilar:not(.is-active) .pilar__roman {
  font-size: clamp(38px, 3.4vw, 60px);
  opacity: 0.75;
  /* Misma altura que el titulo del pilar activo (120px desde top) */
  margin-top: 120px;
  flex-shrink: 0;
}
.arsenal__columns.has-active .pilar:not(.is-active) .pilar__title {
  font-size: clamp(12px, 1vw, 16px);
  letter-spacing: 0.12em;
  white-space: nowrap;
  max-width: none;
  opacity: 0.55;
  /* Centrado vertical en el espacio restante */
  flex: 1;
  display: flex;
  align-items: center;
  transform: rotate(-90deg);
}

/* ============================================================
   HOVER INVITADOR en pilar cerrado — el pilar se abre levemente a
   los lados (preview de la apertura completa al dar click)
   ============================================================ */

.pilar:not(.is-active) {
  cursor: pointer;
}
.pilar {
  transform-origin: center center;
  transition: background 1s var(--ease-brut),
              transform 0.5s var(--ease-brut);
  z-index: 1;
}

/* Tinte vino + leve expansion horizontal — sugiere apertura */
.arsenal__columns:not(.has-active) .pilar:hover {
  background: rgba(74, 14, 44, 0.06);
  transform: scaleX(1.08);
  z-index: 2;
}

/* Estado contraido (hay otro pilar activo): expansion un poco mayor porque
   parten de un ancho mucho mas angosto */
.arsenal__columns.has-active .pilar:not(.is-active):hover {
  background: rgba(74, 14, 44, 0.06);
  transform: scaleX(1.15);
  z-index: 2;
}
/* En contraido: subir opacidad de roman + title al hover (sin mover) */
.arsenal__columns.has-active .pilar:not(.is-active):hover .pilar__roman {
  opacity: 1;
}
.arsenal__columns.has-active .pilar:not(.is-active):hover .pilar__title {
  opacity: 1;
}

/* ================================================================
   DETALLE del pilar (contenido expandido)
   Entra con slide-up + fade despues de que el head se posicione.
   ================================================================ */
.pilar__detail {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 230px 2vw 40px 5vw;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(24px);
  transition: opacity 0.5s ease,
              transform 0.6s var(--ease-brut);
}
.pilar.is-active .pilar__detail {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0.5s;
}

.pilar__lead {
  font-family: var(--ff-display);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(20px, 2vw, 32px);
  line-height: 1.25;
  color: var(--c-vino);
  max-width: 720px;
  margin: 0 0 10px;
  flex-shrink: 0;
}
.pilar__lead em {
  font-style: italic;
  font-weight: 700;
}

.pilar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* Ocupar toda la altura restante del detalle */
  flex: 1;
  max-width: 100%;
}
.pilar__list li {
  font-family: var(--ff-sans);
  font-size: 17px;
  font-weight: 400;
  color: var(--c-vino);
  /* Cada item ocupa el mismo espacio vertical */
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 3vw 0 0;
  border-bottom: 1px solid rgba(74, 14, 44, 0.10);
}
.pilar__list li:first-child {
  border-top: 1px solid rgba(74, 14, 44, 0.10);
}
.pilar__list li::before {
  content: none; /* Removido — ahora usamos service-name con flecha propia */
}

/* ---- Layout servicio: nombre izquierda + video derecha ---- */
.pilar__service-name {
  flex: 1;
  font-family: var(--ff-sans);
  font-size: 17px;
  font-weight: 400;
  color: var(--c-vino);
  display: flex;
  align-items: center;
  gap: 14px;
}
.pilar__service-name::before {
  content: "→";
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 18px;
  color: var(--c-vino);
  opacity: 0.45;
  flex-shrink: 0;
}

.pilar__service-video {
  width: 250px;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.6s ease,
              transform 0.6s var(--ease-brut),
              box-shadow 0.35s ease;
  cursor: zoom-in;
}
.pilar__service-video:hover {
  box-shadow: 0 0 0 2px var(--c-neon);
}
/* Videos aparecen cuando el pilar esta activo, con stagger via transition-delay */
.pilar.is-active .pilar__service-video {
  opacity: 1;
  transform: translateX(0);
}
.pilar.is-active li:nth-child(1) .pilar__service-video { transition-delay: 0.6s; }
.pilar.is-active li:nth-child(2) .pilar__service-video { transition-delay: 0.75s; }
.pilar.is-active li:nth-child(3) .pilar__service-video { transition-delay: 0.9s; }
.pilar.is-active li:nth-child(4) .pilar__service-video { transition-delay: 1.05s; }

/* ---- Video zoom overlay (hover para ampliar x3 centrado) ---- */
.video-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(10, 10, 10, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.video-zoom-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}
/* WRAPPER: posicion FIJA al centro del viewport con dimensiones ABSOLUTAS.
   No se recalcula, no depende de flex, siempre al mismo lugar y tamaño.
   Uso aspect-ratio 1924/1076 para PRECISION exacta con el ratio del video. */
.video-zoom-overlay__frame {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 900px;
  aspect-ratio: 1924 / 1076;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--c-vino); /* vino en vez de onice — si hubiera alguna franja microscopica, se nota menos */
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -50%) scale(0.85);
  transition: transform 0.5s var(--ease-brut);
  cursor: zoom-out;
}
.video-zoom-overlay.is-visible .video-zoom-overlay__frame {
  transform: translate(-50%, -50%) scale(1);
}

/* Video dentro del wrapper: object-fit: fill fuerza que llene el 100%
   exacto del wrapper sin importar las dimensiones intrinsecas.
   Como wrapper (900×503) y video (1924×1076) tienen el mismo aspect ratio,
   no hay distorsion perceptible — GARANTIZA sin franjas nunca. */
.video-zoom-overlay__video {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  min-width: 100%;
  min-height: 100%;
  object-fit: fill; /* estira a llenar — sin franjas garantizado */
  background: transparent;
  display: block;
  border: none;
  outline: none;
}
.video-zoom-overlay__title {
  position: fixed;
  top: calc(50% + 270px); /* 251.5px mitad altura wrapper + 18px gap */
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.4s ease 0.15s,
              transform 0.4s ease 0.15s;
}
.video-zoom-overlay.is-visible .video-zoom-overlay__title {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ==================================================================
   SECCION 5 — DEMO
   ================================================================== */

/* ==================================================================
   SECCION 5 — DEMOSTRACION AUTONOMA
   Layout 3 tercios: textos | iPhone | influencer
   ================================================================== */
.demo {
  background: var(--c-white);
  position: relative;
  height: 100vh;
  min-height: 680px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Eyebrow flotante (mismo estilo que arsenal) */
.demo__eyebrow {
  position: absolute;
  top: 40px;
  left: 5vw;
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 2;
}
.demo__index {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 26px;
  color: var(--c-vino);
  padding-right: 16px;
  border-right: 1.5px solid var(--c-vino);
}
.demo__label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-vino);
}

/* Stage: 3 tercios iguales, llena el viewport restante */
.demo__stage {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: stretch;
  gap: 0;
  min-height: 0;
}

/* ---- TERCIO 1: textos + CTA ---- */
.demo__texts {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 100px 3vw 60px 5vw;
  gap: 52px;
  height: 100%;
}
.demo__texts .demo__title,
.demo__texts .demo__lead {
  margin: 0;
}
.demo__title {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(30px, 3.1vw, 52px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-vino);
  margin: 0;
}
.demo__title em {
  font-style: italic;
  font-weight: 900;
  position: relative;
}
.demo__title em::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0.06em;
  height: 0.18em;
  background: var(--c-beige);
  z-index: -1;
}
.demo__lead {
  font-size: 17px;
  line-height: 1.6;
  font-weight: 300;
  color: var(--c-vino);
  margin: 0;
  max-width: 420px;
}

/* ---- TERCIO 2: iPhone centrado ---- */
.demo__phone-col {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 10px;
  height: 100%;
}

/* ---- IPHONE 17 PRO MOCKUP ---- */
.iphone-17 {
  width: 360px;
  max-width: 100%;
  position: relative;
  filter: drop-shadow(0 40px 80px rgba(74, 14, 44, 0.25));
}
.iphone-17__frame {
  background: #0A0A0A;
  border-radius: 54px;
  padding: 12px;
  position: relative;
  /* Reflejo metalico sutil en el borde */
  box-shadow:
    inset 0 0 0 1.5px #2a2a2a,
    inset 0 0 0 3px #0A0A0A,
    inset 0 0 0 4px #1a1a1a;
}
/* Dynamic Island del iPhone 17 Pro */
.iphone-17__island {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 30px;
  background: #000;
  border-radius: 20px;
  z-index: 10;
}
.iphone-17__screen {
  background: var(--c-white);
  border-radius: 44px;
  overflow: hidden;
  aspect-ratio: 9 / 19.5;
  position: relative;
}

/* ---- CHAT DENTRO DEL IPHONE ---- */
.chat-phone {
  width: 100%;
  height: 100%;
  background: var(--c-white);
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Status bar iOS (hora + iconos) */
.chat-phone__statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 28px 8px;
  height: 54px;
  color: var(--c-vino);
  font-size: 14px;
  font-weight: 600;
}
.chat-phone__time {
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: 14px;
}
.chat-phone__icons {
  display: flex;
  align-items: center;
  gap: 5px;
}
.chat-phone__battery {
  width: 24px;
  height: 11px;
  border: 1px solid currentColor;
  border-radius: 3px;
  position: relative;
  margin-left: 2px;
}
.chat-phone__battery::before {
  content: "";
  position: absolute;
  inset: 1px;
  width: 70%;
  background: currentColor;
  border-radius: 1px;
}
.chat-phone__battery::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 3px;
  width: 2px;
  height: 5px;
  background: currentColor;
  border-radius: 0 1px 1px 0;
}

/* Barra superior del chat */
.chat-phone__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 12px;
  border-bottom: 1px solid rgba(74, 14, 44, 0.08);
}
.chat-phone__back {
  font-size: 22px;
  font-weight: 300;
  color: var(--c-vino);
  opacity: 0.5;
  line-height: 1;
}
.chat-phone__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-vino);
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-phone__avatar-letter {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 14px;
  color: var(--c-neon);
}
.chat-phone__online-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 8px;
  height: 8px;
  background: var(--c-neon);
  border-radius: 50%;
  border: 2px solid var(--c-white);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.3); }
}
.chat-phone__meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.chat-phone__meta strong {
  font-family: var(--ff-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--c-vino);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-phone__status {
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-vino);
  opacity: 0.5;
}

/* Cuerpo del chat */
.chat-phone__body {
  flex: 1;
  padding: 14px 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--c-beige-claro);
}

/* Barra de input iOS */
.chat-phone__input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 6px;
  border-top: 1px solid rgba(74, 14, 44, 0.08);
  background: var(--c-white);
}
.chat-phone__input-text {
  flex: 1;
  font-size: 11px;
  color: var(--c-vino);
  opacity: 0.35;
  padding: 6px 10px;
  border: 1px solid rgba(74, 14, 44, 0.15);
  border-radius: 14px;
}
.chat-phone__send {
  width: 26px;
  height: 26px;
  background: var(--c-vino);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-neon);
  flex-shrink: 0;
}

/* Home indicator iOS */
.chat-phone__homebar {
  height: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6px;
}
.chat-phone__homebar::after {
  content: "";
  width: 120px;
  height: 4px;
  background: var(--c-vino);
  border-radius: 4px;
  opacity: 0.5;
}

/* ---- Burbujas del chat ---- */
.chat-bubble {
  max-width: 80%;
  padding: 8px 12px;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 400;
  border-radius: 14px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s var(--ease-brut), transform .35s var(--ease-brut);
}
.chat-bubble.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.chat-bubble--client {
  align-self: flex-end;
  background: var(--c-vino);
  color: var(--c-white);
  border-bottom-right-radius: 4px;
}
.chat-bubble--bot {
  align-self: flex-start;
  background: var(--c-white);
  color: var(--c-vino);
  border: 1px solid rgba(74, 14, 44, 0.1);
  border-bottom-left-radius: 4px;
}
.chat-bubble--bot.is-typing {
  padding: 10px 14px;
  min-width: 40px;
}
.chat-bubble--bot.is-typing::after {
  content: "•••";
  letter-spacing: 0.15em;
  color: var(--c-neon);
  animation: typing-neon 1.2s steps(3, end) infinite;
}
@keyframes typing-neon {
  0%  { content: "•  "; text-shadow: 0 0 8px var(--c-neon); }
  33% { content: "•• "; text-shadow: 0 0 12px var(--c-neon); }
  66% { content: "•••"; text-shadow: 0 0 16px var(--c-neon); }
}
.chat-bubble--final {
  background: var(--c-neon);
  color: var(--c-vino);
  border: none;
  font-weight: 600;
  box-shadow: 0 0 20px rgba(232, 255, 0, 0.4);
}

/* ---- CTA Demo (pill redondo como hero) ---- */
.demo__cta {
  align-self: flex-start;
  background: var(--c-neon);
  color: var(--c-vino);
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 18px 38px;
  border-radius: 999px;
  margin-top: 12px;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.demo__cta:hover {
  background: var(--c-vino);
  color: var(--c-neon);
  transform: translateY(-2px);
}

/* ---- TERCIO 3: Influencer sin caja, color real, estilo hero ---- */
.demo__right {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  overflow: hidden;
}
.demo__influencer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  object-fit: cover;
  object-position: center bottom;
  display: block;
}

/* iPhone en el tercio central, balanceado con el influencer */
.demo__phone-col .iphone-17 {
  width: 340px;
}

/* ==================================================================
   SECCION 6 — ARQUITECTURA DE INVERSION (Planes)
   3 monolitos editoriales, central destacado
   ================================================================== */

.planes {
  background: var(--c-white);
  padding: 140px 5vw 160px;
  position: relative;
  overflow: hidden;
}

/* Eyebrow editorial */
.planes__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 56px;
}
.planes__index {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 26px;
  color: var(--c-vino);
  padding-right: 16px;
  border-right: 1.5px solid var(--c-vino);
}
.planes__label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-vino);
}

/* Header: titulo + subtitulo ocupan todo el ancho, centrados */
.planes__header {
  width: 100%;
  max-width: none;
  text-align: center;
  margin-bottom: 100px;
}
.planes__title {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(42px, 4.4vw, 78px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-vino);
  margin: 0 0 20px;
}
.planes__title em {
  font-style: italic;
  font-weight: 900;
  position: relative;
  display: inline-block;
}
.planes__title em::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0.08em;
  height: 0.18em;
  background: var(--c-beige);
  z-index: -1;
}
.planes__lead {
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.5;
  color: var(--c-vino);
  opacity: 0.7;
  margin: 0 auto;
}

/* Grid 3 monolitos, central ligeramente mas ancho — reducido 15% */
.planes__grid {
  display: grid;
  grid-template-columns: 1fr 1.12fr 1fr;
  gap: 20px;
  align-items: stretch;
  max-width: 1100px;
  margin: 0 auto;
}

/* ---- MONOLITO: tarjeta editorial dark rounded ---- */
.plan {
  position: relative;
  /* v3r244: estado inicial de la entrada de V2 (opacity 0 + translateX 140%).
     Hoy el armado de la seccion define el punto de partida; dejarlo aqui
     mantenia las tarjetas invisibles cuando se retiro su neutralizador. */
  transition: opacity 0.3s ease, filter 0.5s ease;
  will-change: transform, opacity;
}

/* ENTRADA: disparo rapido desde la derecha, overshoot marcado a la izquierda,
   regreso suave a la posicion final a la derecha. Sin rebotes multiples. */
.plan.is-entered {
  animation: planEnter 1.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Stagger: entran secuencialmente de derecha a izquierda */
.plan[data-plan="3"].is-entered { animation-delay: 0s; }
.plan[data-plan="2"].is-entered { animation-delay: 0.2s; }
.plan[data-plan="1"].is-entered { animation-delay: 0.4s; }

@keyframes planEnter {
  0%   { opacity: 0; transform: translateX(200%); }
  30%  { opacity: 1; }
  /* Overshoot marcado: se pasa bastante a la izquierda */
  65%  { opacity: 1; transform: translateX(-12%); }
  /* Regresa suavemente a la derecha hasta su posicion final */
  100% { opacity: 1; transform: translateX(0); }
}

/* IDLE: flotacion continua con sombra dinamica una vez ancladas */
.plan.is-entered .plan__inner {
  animation: planIdleSide 5s ease-in-out infinite;
  animation-delay: 1.5s;
}
.plan--featured.is-entered .plan__inner {
  animation: planIdleCenter 4.5s ease-in-out infinite;
  animation-delay: 2s;
}

/* Laterales: flotan sutil translateY -5px con sombra que acompaña */
@keyframes planIdleSide {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 14px 36px rgba(74, 14, 44, 0.3);
  }
  50% {
    transform: translateY(-5px);
    box-shadow: 0 20px 46px rgba(74, 14, 44, 0.35);
  }
}

/* Central: salto mas marcado translateY -14px con sombra mas dramatica */
@keyframes planIdleCenter {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 24px 60px rgba(74, 14, 44, 0.4),
                0 6px 18px rgba(74, 14, 44, 0.2);
  }
  50% {
    transform: translateY(-14px);
    box-shadow: 0 38px 80px rgba(74, 14, 44, 0.48),
                0 12px 26px rgba(74, 14, 44, 0.25);
  }
}

/* Card base: mismo gradient vino que la central, unificando el lenguaje cromatico */
.plan__inner {
  background: linear-gradient(160deg, var(--c-vino) 0%, var(--c-vino-deep) 100%);
  border-radius: 20px;
  padding: 40px 30px 34px;
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  box-shadow: 0 14px 36px rgba(74, 14, 44, 0.3);
  transition: transform 0.5s var(--ease-brut),
              box-shadow 0.5s ease,
              filter 0.5s ease;
  position: relative;
  overflow: visible;
}

/* Card destacada (central): mismo gradient vino original, vibrante */
.plan--featured {
  margin-top: -20px;
  margin-bottom: -20px;
}
.plan--featured .plan__inner {
  background: linear-gradient(160deg, var(--c-vino) 0%, var(--c-vino-deep) 100%);
  padding: 48px 34px 40px;
  box-shadow: 0 24px 60px rgba(74, 14, 44, 0.4),
              0 6px 18px rgba(74, 14, 44, 0.2);
}

/* HOVER en un plan: crece 15% + sombra dramatica, los otros 2 se ponen grises */
/* Al entrar hover al grid: detener la animacion idle para que el transform de hover aplique */
.planes__grid:hover .plan.is-entered .plan__inner {
  animation: none;
  transform: translateY(0);
}

/* Los otros planes no-hovered: grises */
.planes__grid:hover .plan:not(:hover) .plan__inner {
  filter: grayscale(1) brightness(0.7);
  opacity: 0.6;
}

/* Plan hovered: crece 15% + sombra dramatica */
.plan:hover .plan__inner {
  transform: scale(1.15) !important;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.45);
  z-index: 5;
}
.plan--featured:hover .plan__inner {
  box-shadow: 0 50px 110px rgba(74, 14, 44, 0.5),
              0 15px 35px rgba(74, 14, 44, 0.25) !important;
}
.plan:hover {
  z-index: 5;
}

/* Badge MÁS POPULAR */
.plan__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-neon);
  color: var(--c-vino);
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  z-index: 3;
  white-space: nowrap;
}

/* Head del plan: tag + nombre + precio + descripcion */
.plan__head {
  margin-bottom: 28px;
}
.plan__tag {
  display: block;
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-neon);
  margin-bottom: 14px;
  opacity: 0.85;
}
.plan__name {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(34px, 3.2vw, 54px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--c-white);
  margin: 0 0 18px;
  text-transform: uppercase;
}
/* Central: nombre mas compacto para que "CON TODO" quepa en una linea */
.plan--featured .plan__name {
  font-size: clamp(32px, 3vw, 50px);
  white-space: nowrap;
}
.plan__price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-bottom: 8px;
}
.plan__price-num {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(24px, 2vw, 34px);
  color: var(--c-white);
  line-height: 1;
}
.plan--featured .plan__price-num {
  color: var(--c-neon);
}
.plan__price-meta {
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.plan__subtitle {
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 4px;
}

/* Divisor sutil entre header y lista */
.plan__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 0 0 22px;
}
.plan--featured .plan__divider {
  background: rgba(255, 255, 255, 0.18);
}

/* Lista de servicios con marker (dot → arrow en hover) */
.plan__list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  text-align: left;
}
.plan__list li {
  font-family: var(--ff-sans);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.88);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.6s ease;
}

/* Marker: contenedor con dot y arrow superpuestos */
.plan__marker {
  position: relative;
  width: 14px;
  height: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.plan__marker-dot,
.plan__marker-arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  color: var(--c-neon);
  line-height: 1;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.plan__marker-dot {
  font-size: 22px;
  opacity: 0.85;
  transform: translate(-50%, -50%) scale(1);
}
.plan__marker-arrow {
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: 13px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
}

/* HOVER: micro-salto hacia arriba + dot transforma a arrow (staggered) */
.plan:hover .plan__list li {
  transform: translateY(-6px);
  color: var(--c-white);
}
.plan:hover .plan__marker-dot {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
}
.plan:hover .plan__marker-arrow {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Stagger mas lento, mas separacion entre items */
.plan:hover .plan__list li:nth-child(1),
.plan:hover .plan__list li:nth-child(1) .plan__marker-dot,
.plan:hover .plan__list li:nth-child(1) .plan__marker-arrow { transition-delay: 0.00s; }
.plan:hover .plan__list li:nth-child(2),
.plan:hover .plan__list li:nth-child(2) .plan__marker-dot,
.plan:hover .plan__list li:nth-child(2) .plan__marker-arrow { transition-delay: 0.18s; }
.plan:hover .plan__list li:nth-child(3),
.plan:hover .plan__list li:nth-child(3) .plan__marker-dot,
.plan:hover .plan__list li:nth-child(3) .plan__marker-arrow { transition-delay: 0.36s; }
.plan:hover .plan__list li:nth-child(4),
.plan:hover .plan__list li:nth-child(4) .plan__marker-dot,
.plan:hover .plan__list li:nth-child(4) .plan__marker-arrow { transition-delay: 0.54s; }
.plan:hover .plan__list li:nth-child(5),
.plan:hover .plan__list li:nth-child(5) .plan__marker-dot,
.plan:hover .plan__list li:nth-child(5) .plan__marker-arrow { transition-delay: 0.72s; }
.plan:hover .plan__list li:nth-child(6),
.plan:hover .plan__list li:nth-child(6) .plan__marker-dot,
.plan:hover .plan__list li:nth-child(6) .plan__marker-arrow { transition-delay: 0.90s; }

/* CTA del plan: pill redondo con efecto magnetico, fondo blanco solido */
.plan__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: var(--c-white);
  color: var(--c-vino);
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 13px 18px;
  border: 1.5px solid var(--c-white);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.35s var(--ease-brut),
              color 0.35s var(--ease-brut),
              border-color 0.35s var(--ease-brut),
              transform 0.25s ease-out;
  margin-top: auto;
  position: relative;
}
.plan__cta:hover {
  background: var(--c-neon);
  color: var(--c-vino);
  border-color: var(--c-neon);
}
.plan__cta-text {
  display: inline-block;
  transition: transform 0.25s ease-out;
  will-change: transform;
}

/* CTA destacado (plan featured): amarillo neon pill */
.plan__cta--neon {
  background: var(--c-neon);
  color: var(--c-vino);
  border-color: var(--c-neon);
}
.plan__cta--neon:hover {
  background: var(--c-white);
  color: var(--c-vino);
  border-color: var(--c-white);
}

/* ==================================================================
   SECCION 7 — FAQ (Desactivacion de Objeciones)
   Acordeon limpio, tipografia grande, linea divisoria fina.
   ================================================================== */

.faq {
  background: var(--c-white);
  padding: 100px 5vw 120px;
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Eyebrow editorial */
.faq__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 36px;
}
.faq__index {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 26px;
  color: var(--c-vino);
  padding-right: 16px;
  border-right: 1.5px solid var(--c-vino);
}
.faq__label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-vino);
}

/* Header: ocupa todo el ancho, centrado */
.faq__header {
  width: 100%;
  max-width: none;
  text-align: center;
  margin-bottom: 70px;
}
.faq__title {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(40px, 4.2vw, 76px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-vino);
  margin: 0 0 18px;
}
.faq__title em {
  font-style: italic;
  font-weight: 900;
  position: relative;
  display: inline-block;
}
.faq__title em::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0.08em;
  height: 0.18em;
  background: var(--c-beige);
  z-index: -1;
}
.faq__lead {
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.5;
  color: var(--c-vino);
  opacity: 0.7;
  margin: 0 auto;
}

/* Lista de preguntas */
.faq__list {
  max-width: 1100px;
  margin: 0 auto;
  border-top: 1px solid rgba(74, 14, 44, 0.14);
}

/* Cada item */
.faq-item {
  border-bottom: 1px solid rgba(74, 14, 44, 0.14);
  position: relative;
}

/* Boton de la pregunta (sin estilos nativos) */
.faq-item__question {
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  text-align: left;
  font-family: inherit;
  color: var(--c-vino);
  transition: color 0.35s ease;
}
.faq-item__question:hover {
  color: var(--c-vino-claro);
}
.faq-item__text {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(17px, 1.5vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: inherit;
  flex: 1;
  transition: transform 0.4s var(--ease-brut);
  transform-origin: left center;
}
.faq-item__question:hover .faq-item__text {
  transform: translateX(8px);
}
.faq-item.is-open .faq-item__text {
  color: var(--c-vino);
}

/* Icono + (que rota 45° para convertirse en ×) */
.faq-item__icon {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: inline-block;
  transition: transform 0.5s var(--ease-brut);
}
.faq-item__icon-line {
  position: absolute;
  background: var(--c-vino);
  border-radius: 2px;
  transition: transform 0.5s var(--ease-brut);
}
.faq-item__icon-line--h {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}
.faq-item__icon-line--v {
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}

/* Cuando abierto: el + se convierte en × (rotacion 45°) */
.faq-item.is-open .faq-item__icon {
  transform: rotate(135deg);
}

/* Respuesta: acordeon suave via grid-template-rows */
.faq-item__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s var(--ease-brut);
}
.faq-item__answer-inner {
  overflow: hidden;
  min-height: 0;
}
.faq-item.is-open .faq-item__answer {
  grid-template-rows: 1fr;
}
.faq-item__answer-inner p {
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.6;
  color: var(--c-vino);
  max-width: 820px;
  padding: 0 0 28px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.5s ease 0.15s, transform 0.5s var(--ease-brut) 0.15s;
}
.faq-item.is-open .faq-item__answer-inner p {
  opacity: 0.85;
  transform: translateY(0);
}
/* Palabras resaltadas: fondo vino, texto beige bold (unificado con mark-editorial) */
.faq-item__answer-inner p em {
  font-style: normal;
  font-weight: 700;
  color: var(--c-beige);
  background: var(--c-vino);
  padding: 0 6px;
  text-decoration: none;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ==================================================================
   SECCION 8 — CIERRE DEFINITIVO (Último CTA)
   Full-screen onice, climax high-ticket.
   ================================================================== */

.cta-final {
  background: var(--c-onice);
  color: var(--c-white);
  min-height: 100vh;
  padding: 60px 3vw;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Eyebrow editorial */
.cta-final__eyebrow {
  position: absolute;
  top: 48px;
  left: 5vw;
  display: flex;
  align-items: center;
  gap: 16px;
}
.cta-final__index {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 26px;
  color: var(--c-neon);
  padding-right: 16px;
  border-right: 1.5px solid rgba(232, 255, 0, 0.4);
}
.cta-final__label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* Content centrado absoluto */
.cta-final__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 1600px;
  width: 100%;
  gap: 56px;
}

/* Headline — reducido un poco, ocupando mas ancho */
.cta-final__headline {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(44px, 6vw, 108px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--c-white);
  margin: 0;
  max-width: 100%;
  width: 100%;
}
.cta-final__headline em {
  font-style: italic;
  font-weight: 900;
  color: var(--c-neon);
  position: relative;
  display: inline-block;
}

/* BOTON CLIMACTICO MASIVO */
.cta-final__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: var(--c-neon);
  color: var(--c-vino);
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(28px, 3.4vw, 56px);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  padding: 32px 80px;
  border-radius: 999px;
  text-decoration: none;
  overflow: visible;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.4s var(--ease-brut),
              background 0.4s ease,
              color 0.4s ease,
              box-shadow 0.4s ease;
  box-shadow: 0 12px 40px rgba(232, 255, 0, 0.2);
}

/* Pulso expansivo detras del boton */
.cta-final__pulse {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--c-neon);
  z-index: -1;
  opacity: 0.5;
  animation: ctaPulse 2.8s ease-out infinite;
}
.cta-final__pulse--2 {
  animation-delay: 1.4s;
}
@keyframes ctaPulse {
  0%   { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* Inner para el swap de textos */
.cta-final__button-inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  height: 1.3em;
  line-height: 1.3;
  padding-bottom: 0.08em;
}
.cta-final__text {
  display: inline-block;
  white-space: nowrap;
  transition: transform 0.5s var(--ease-brut),
              opacity 0.4s ease;
}
.cta-final__text--default {
  transform: translateY(0);
  opacity: 1;
}
.cta-final__text--hover {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(100%);
  opacity: 0;
}

/* Arrow */
.cta-final__arrow {
  font-size: 0.7em;
  font-weight: 300;
  font-family: var(--ff-sans);
  transition: transform 0.4s var(--ease-brut);
}

/* HOVER: swap texto + crecimiento + sombra mas dramatica */
.cta-final__button:hover {
  transform: scale(1.04);
  background: var(--c-white);
  color: var(--c-vino);
  box-shadow: 0 24px 70px rgba(232, 255, 0, 0.4);
}
.cta-final__button:hover .cta-final__text--default {
  transform: translateY(-100%);
  opacity: 0;
}
.cta-final__button:hover .cta-final__text--hover {
  transform: translateY(0);
  opacity: 1;
}
.cta-final__button:hover .cta-final__arrow {
  transform: translateX(10px);
}
.cta-final__button:hover .cta-final__pulse {
  animation-play-state: paused;
  opacity: 0;
}

/* Microcopy de seguridad */
.cta-final__microcopy {
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: clamp(13px, 1.1vw, 16px);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  max-width: 680px;
}
.cta-final__micro-sep {
  color: var(--c-neon);
  margin: 0 10px;
  opacity: 0.7;
}

/* ==================================================================
   DARK FOOTER (info y legal)
   ================================================================== */

.dark-footer {
  background: var(--c-onice);
  color: var(--c-white);
  padding: 120px var(--gutter) 60px;
}
.dark-footer__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.dark-footer__top {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.dark-footer__brand { display: flex; flex-direction: column; gap: 24px; }
.dark-footer__logo {
  width: 180px;
  filter: brightness(0) invert(1);
}
.dark-footer__tagline {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.dark-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.dark-footer__cols div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dark-footer__cols .caps {
  color: rgba(255,255,255,0.5);
  margin-bottom: 12px;
}
.dark-footer__cols p {
  font-size: 14px;
  font-weight: 300;
  color: rgba(255,255,255,0.85);
}
.dark-footer__legal {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  padding-top: 40px;
  margin-top: 60px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* ==================================================================
   RESPONSIVE DESKTOP — Escalado fluido para cualquier pantalla
   ==================================================================
   Estrategia: el diseno esta calibrado para 1440px. Abajo de eso se
   comprime progresivamente manteniendo proporciones y jerarquia.
   Breakpoints:
     - 1440px: laptops estandar (MacBook Air/Pro 14)
     - 1280px: laptops compactos (MacBook Pro 13, Windows estandar)
     - 1100px: laptops pequenos / ventanas a medio ancho
   Tambien ajustes por ALTURA (laptops cortos tipo 13" con 800px de viewport).
   ================================================================== */

/* ---- BREAKPOINT 1440px: compresion ligera ---- */
@media (max-width: 1440px) {
  .nav__inner { padding: 16px 4vw; }
  .nav__brand-logo { height: 34px; }
  .nav__cta { font-size: 11px; padding: 11px 22px; }

  .side-nav { left: 22px; }
  .side-nav__list { gap: 20px; }
  .side-nav__shadow { width: 200px; }

  .wa-floating { width: 56px; height: 56px; right: 26px; bottom: 26px; }
  .wa-floating__icon { width: 28px; height: 28px; }

  .preloader__mark { width: 320px; }

  .hero { padding-top: 76px; }
  .hero__messages { min-height: 260px; }
  .hero__ctas { margin-top: 24px; }

  .autoridad__pinned { padding-top: 76px; }
  .autoridad__left { padding: 0 3vw 0 4vw; }
  .autoridad__messages { min-height: 300px; }
  .autoridad__progress { margin-top: 42px; }
  .autoridad__text { font-size: 15px; }
  .autoridad__index, .proof__index, .arsenal__index,
  .demo__index, .planes__index, .faq__index, .cta-final__index { font-size: 24px; }

  .proof { padding: 110px 4vw 130px; }
  .proof__statement { margin: 0 0 88px; }
  .proof__grid { gap: 48px; }

  .arsenal__eyebrow { top: 32px; }
  .pilar.is-active .pilar__head { top: 100px; left: 4vw; }
  .arsenal__columns.has-active .pilar:not(.is-active) .pilar__roman { margin-top: 100px; }
  .pilar__detail { padding: 200px 2vw 36px 4vw; }
  .pilar__service-video { width: 220px; }

  .demo__texts { padding: 88px 2.5vw 52px 4vw; gap: 40px; }
  .demo__phone-col { padding: 48px 8px; }
  .iphone-17 { width: 320px; }
  .demo__phone-col .iphone-17 { width: 320px; }

  .planes { padding: 110px 4vw 130px; }
  .planes__grid { max-width: 1040px; gap: 18px; }
  .plan__inner { padding: 36px 26px 30px; }
  .plan--featured .plan__inner { padding: 44px 28px 36px; }
  .plan__list li { font-size: 12px; }

  .faq { padding: 84px 4vw 100px; }
  .faq__list { max-width: 1040px; }

  .cta-final { padding: 52px 2.5vw; }
  .cta-final__content { gap: 48px; }
  .cta-final__button { padding: 28px 68px; }

  .dark-footer { padding: 100px 6vw 52px; }
  .dark-footer__top { gap: 64px; padding-bottom: 52px; }
  .dark-footer__logo { width: 160px; }
}

/* ---- BREAKPOINT 1280px: compresion moderada ---- */
@media (max-width: 1280px) {
  .nav__brand-logo { height: 30px; }
  .nav__cta { font-size: 10.5px; padding: 10px 20px; letter-spacing: 0.15em; }

  .side-nav { left: 18px; }
  .side-nav__list { gap: 18px; }
  .side-nav__label { font-size: 11px; }
  .side-nav__shadow { width: 180px; }

  .wa-floating { width: 54px; height: 54px; right: 22px; bottom: 22px; }
  .wa-floating__icon { width: 26px; height: 26px; }

  .preloader__mark { width: 280px; }

  .hero { padding-top: 68px; }
  .hero__left { padding: 0 3vw 0 0; }
  .hero__messages { min-height: 240px; max-width: 760px; }
  .hero__cta { padding: 14px 28px; font-size: 11px; }

  .autoridad__pinned { padding-top: 68px; }
  .autoridad__messages { min-height: 280px; }
  .autoridad__eyebrow { margin-bottom: 36px; }
  .autoridad__text { font-size: 14px; max-width: 400px; }
  .autoridad__progress-bar { width: 42px; }

  .proof { padding: 92px 4vw 112px; }
  .proof__statement { margin: 0 0 72px; max-width: 980px; }
  .proof__grid { gap: 36px; }
  .proof__label { font-size: 13px; }

  .arsenal__eyebrow { top: 28px; left: 4vw; }
  .pilar.is-active .pilar__head { top: 88px; }
  .arsenal__columns.has-active .pilar:not(.is-active) .pilar__roman { margin-top: 88px; }
  .pilar__detail { padding: 180px 2vw 32px 4vw; gap: 12px; }
  .pilar__lead { margin-bottom: 6px; }
  .pilar__service-video { width: 190px; }
  .pilar__list li { font-size: 15px; gap: 18px; padding-right: 2vw; }
  .pilar__service-name { font-size: 15px; }

  .demo__eyebrow { top: 32px; left: 4vw; }
  .demo__texts { padding: 72px 2vw 44px 4vw; gap: 32px; }
  .demo__lead { font-size: 15px; max-width: 360px; }
  .demo__phone-col { padding: 40px 6px; }
  .iphone-17 { width: 280px; }
  .demo__phone-col .iphone-17 { width: 280px; }
  .iphone-17__frame { padding: 10px; border-radius: 46px; }
  .iphone-17__screen { border-radius: 38px; }
  .iphone-17__island { top: 18px; width: 92px; height: 26px; }
  .demo__cta { padding: 15px 32px; font-size: 11px; }

  .planes { padding: 90px 4vw 110px; }
  .planes__eyebrow { margin-bottom: 44px; }
  .planes__header { margin-bottom: 72px; }
  .planes__grid { max-width: 960px; gap: 16px; }
  .plan__inner { padding: 32px 22px 26px; border-radius: 16px; }
  .plan--featured .plan__inner { padding: 38px 24px 30px; }
  .plan--featured { margin-top: -14px; margin-bottom: -14px; }
  .plan__head { margin-bottom: 22px; }
  .plan__name { margin: 0 0 14px; }
  .plan__list { margin: 0 0 22px; gap: 10px; }
  .plan__list li { font-size: 11.5px; gap: 8px; }
  .plan__cta { padding: 12px 14px; font-size: 10.5px; }
  .plan__badge { font-size: 8.5px; padding: 6px 14px; top: -10px; }

  .faq { padding: 72px 4vw 88px; }
  .faq__eyebrow { margin-bottom: 28px; }
  .faq__header { margin-bottom: 56px; }
  .faq__list { max-width: 960px; }
  .faq-item__question { padding: 20px 0; gap: 32px; }
  .faq-item__icon { width: 24px; height: 24px; }

  .cta-final { padding: 44px 2vw; }
  .cta-final__eyebrow { top: 36px; left: 4vw; }
  .cta-final__content { gap: 40px; }
  .cta-final__button { padding: 24px 56px; gap: 18px; }
  .cta-final__microcopy { font-size: 13px; }

  .dark-footer { padding: 80px 5vw 44px; }
  .dark-footer__top { grid-template-columns: 1fr 1.8fr; gap: 48px; padding-bottom: 44px; }
  .dark-footer__cols { gap: 28px; }
  .dark-footer__logo { width: 140px; }
  .dark-footer__tagline { font-size: 12px; }
  .dark-footer__legal { margin-top: 44px; padding-top: 32px; }
}

/* ---- BREAKPOINT 1100px: compresion agresiva ---- */
@media (max-width: 1100px) {
  .nav__brand-logo { height: 26px; }
  .nav__cta { font-size: 10px; padding: 9px 16px; }

  .side-nav { left: 14px; }
  .side-nav__list { gap: 16px; }
  .side-nav__shadow { width: 160px; }

  .wa-floating { width: 50px; height: 50px; right: 18px; bottom: 18px; }
  .wa-floating__icon { width: 24px; height: 24px; }

  .preloader__mark { width: 240px; }

  .hero { padding-top: 60px; grid-template-columns: 60% 40%; }
  .hero__messages { min-height: 220px; }

  .autoridad__pinned { padding-top: 60px; }
  .autoridad__left { padding: 0 2.5vw 0 3.5vw; }
  .autoridad__eyebrow { margin-bottom: 28px; }
  .autoridad__messages { min-height: 260px; }
  .autoridad__text { font-size: 13.5px; max-width: 360px; }

  .proof { padding: 72px 4vw 92px; }
  .proof__statement { margin: 0 0 56px; }
  .proof__grid { gap: 24px; grid-template-columns: repeat(3, 1fr); }

  .arsenal__eyebrow { top: 22px; }
  .pilar.is-active .pilar__head { top: 72px; }
  .arsenal__columns.has-active .pilar:not(.is-active) .pilar__roman { margin-top: 72px; }
  .pilar__detail { padding: 150px 2vw 28px 3.5vw; }
  .pilar__service-video { width: 160px; }
  .pilar__list li { font-size: 14px; }
  .pilar__service-name { font-size: 14px; }

  .demo__eyebrow { top: 26px; left: 3.5vw; }
  .demo__texts { padding: 60px 2vw 36px 3.5vw; gap: 28px; }
  .demo__lead { font-size: 14px; max-width: 320px; }
  .demo__phone-col { padding: 28px 4px; }
  .iphone-17 { width: 240px; }
  .demo__phone-col .iphone-17 { width: 240px; }
  .iphone-17__frame { padding: 8px; border-radius: 40px; }
  .iphone-17__screen { border-radius: 32px; }
  .iphone-17__island { top: 14px; width: 78px; height: 22px; }
  .chat-phone__statusbar { padding: 14px 20px 6px; height: 44px; font-size: 12px; }
  .chat-phone__time { font-size: 12px; }
  .chat-bubble { font-size: 10px; padding: 7px 10px; }
  .demo__cta { padding: 13px 26px; font-size: 10px; letter-spacing: 0.16em; }

  .planes { padding: 72px 4vw 92px; }
  .planes__header { margin-bottom: 56px; }
  .planes__grid { max-width: 880px; gap: 14px; }
  .plan__inner { padding: 28px 18px 22px; border-radius: 14px; }
  .plan--featured .plan__inner { padding: 32px 20px 26px; }
  .plan--featured { margin-top: -10px; margin-bottom: -10px; }
  .plan__head { margin-bottom: 18px; }
  .plan__tag { font-size: 8px; margin-bottom: 10px; }
  .plan__name { margin: 0 0 10px; }
  .plan__price-num { font-size: clamp(20px, 1.8vw, 28px); }
  .plan__price-meta { font-size: 9px; }
  .plan__subtitle { font-size: 11px; }
  .plan__divider { margin: 0 0 16px; }
  .plan__list { margin: 0 0 18px; gap: 8px; }
  .plan__list li { font-size: 11px; gap: 7px; }
  .plan__cta { padding: 11px 12px; font-size: 10px; letter-spacing: 0.12em; }
  .plan__badge { font-size: 8px; padding: 5px 12px; }

  .faq { padding: 60px 4vw 76px; }
  .faq__list { max-width: 880px; }
  .faq-item__question { padding: 18px 0; gap: 24px; }
  .faq-item__icon { width: 22px; height: 22px; }
  .faq-item__answer-inner p { padding-bottom: 22px; }

  .cta-final { padding: 40px 2vw; }
  .cta-final__eyebrow { top: 28px; left: 3.5vw; }
  .cta-final__content { gap: 32px; }
  .cta-final__button { padding: 20px 44px; gap: 14px; }
  .cta-final__microcopy { font-size: 12px; }

  .dark-footer { padding: 64px 5vw 36px; }
  .dark-footer__top { grid-template-columns: 1fr; gap: 40px; padding-bottom: 36px; }
  .dark-footer__logo { width: 120px; }
  .dark-footer__cols { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .dark-footer__cols p { font-size: 13px; }
  .dark-footer__legal { flex-direction: column; gap: 8px; align-items: flex-start; margin-top: 32px; padding-top: 24px; }
}

/* ==================================================================
   RESPONSIVE POR ALTURA — laptops cortos (MacBook Air 13" ~800px alto)
   ================================================================== */

/* ---- Altura <= 820px: compresion ligera ---- */
@media (max-height: 820px) {
  .hero { padding-top: 68px; }
  .hero__messages { min-height: 220px; }
  .hero__ctas { margin-top: 20px; }
  .hero__title { font-size: clamp(44px, 4.6vw, 88px); }
  .hero__message[data-message="2"] .hero__title,
  .hero__message[data-message="3"] .hero__title { font-size: clamp(36px, 3.8vw, 72px); }

  .autoridad__pinned { padding-top: 68px; }
  .autoridad__messages { min-height: 260px; }
  .autoridad__title { font-size: clamp(36px, 3.6vw, 72px); }
  .autoridad__progress { margin-top: 36px; }

  .demo__texts { padding-top: 60px; gap: 28px; }
  .iphone-17 { width: 280px; }
  .demo__phone-col .iphone-17 { width: 280px; }

  .cta-final__content { gap: 36px; }
  .cta-final__headline { font-size: clamp(38px, 5vw, 88px); }
}

/* ---- Altura <= 720px: compresion agresiva (laptops muy bajos) ---- */
@media (max-height: 720px) {
  .hero { padding-top: 58px; }
  .hero__messages { min-height: 200px; }
  .hero__ctas { height: 48px; margin-top: 16px; }
  .hero__cta { padding: 12px 26px; font-size: 10.5px; }
  .hero__title { font-size: clamp(38px, 4vw, 76px); }
  .hero__message[data-message="2"] .hero__title,
  .hero__message[data-message="3"] .hero__title { font-size: clamp(30px, 3.2vw, 60px); }

  .autoridad__pinned { padding-top: 58px; }
  .autoridad__messages { min-height: 220px; }
  .autoridad__title { font-size: clamp(30px, 3.2vw, 64px); line-height: 1.02; margin-bottom: 20px; }
  .autoridad__text { font-size: 13px; }
  .autoridad__progress { margin-top: 28px; }

  .arsenal__pinned { min-height: 560px; }
  .pilar__roman { font-size: clamp(56px, 5vw, 100px); }
  .pilar__title { font-size: clamp(16px, 1.5vw, 24px); }
  .pilar.is-active .pilar__head { top: 64px; }
  .arsenal__columns.has-active .pilar:not(.is-active) .pilar__roman { margin-top: 64px; }
  .pilar__detail { padding-top: 130px; }
  .pilar__lead { font-size: clamp(16px, 1.6vw, 24px); }

  .demo { min-height: 600px; }
  .demo__texts { padding-top: 52px; gap: 22px; }
  .demo__title { font-size: clamp(24px, 2.6vw, 42px); }
  .demo__lead { font-size: 13px; line-height: 1.5; }
  .iphone-17 { width: 240px; }
  .demo__phone-col .iphone-17 { width: 240px; }
  .demo__phone-col { padding: 20px 4px; }

  .cta-final__content { gap: 28px; }
  .cta-final__headline { font-size: clamp(32px, 4.4vw, 72px); }
  .cta-final__button { padding: 20px 48px; font-size: clamp(22px, 2.8vw, 40px); }
}

/* ==================================================================
   MOBILE — Adaptacion a celulares (<= 768px)
   ================================================================== */

@media (max-width: 768px) {

  /* ---- BASE MOBILE ---- */
  body {
    min-width: 0;
    overflow-x: hidden;
  }
  body.no-scroll {
    overflow: hidden;
    touch-action: none;
  }

  /* Nav: logo a la izq, hamburger a la der. CTA escondido en movil. */
  .nav__inner { padding: 12px 16px; }
  .nav__brand-logo { height: 24px; }
  .nav__links { display: none; }

  /* Hamburger button (3 lineas) — solo visible en movil */
  .nav__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav__hamburger-line {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--c-vino);
    border-radius: 2px;
    transition: transform 0.35s var(--ease-brut),
                opacity 0.25s ease;
  }
  /* Hamburger animado: cuando esta abierto, las 3 lineas forman una X */
  .nav__hamburger.is-open .nav__hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav__hamburger.is-open .nav__hamburger-line:nth-child(2) {
    opacity: 0;
  }
  .nav__hamburger.is-open .nav__hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Drawer translucido con fondo BEIGE — alineado a la derecha, links pequenos */
  .nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(239, 230, 214, 0.78);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
  }
  .nav-drawer.is-open {
    opacity: 1;
    visibility: visible;
  }
  .nav-drawer__panel {
    width: 100%;
    height: 100%;
    padding: 80px 22px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
  }
  .nav-drawer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: auto;
    max-width: 100%;
    text-align: right;
    align-items: flex-end;
  }
  .nav-drawer__link {
    display: block;
    font-family: var(--ff-sans);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: 0.06em;
    color: var(--c-vino);
    text-decoration: none;
    padding: 8px 0;
    text-transform: uppercase;
    text-align: right;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.4s var(--ease-brut),
                transform 0.4s var(--ease-brut),
                color 0.25s ease;
  }
  .nav-drawer.is-open .nav-drawer__link {
    opacity: 1;
    transform: translateX(0);
  }
  .nav-drawer.is-open .nav-drawer__link:nth-child(1) { transition-delay: 0.06s; }
  .nav-drawer.is-open .nav-drawer__link:nth-child(2) { transition-delay: 0.10s; }
  .nav-drawer.is-open .nav-drawer__link:nth-child(3) { transition-delay: 0.14s; }
  .nav-drawer.is-open .nav-drawer__link:nth-child(4) { transition-delay: 0.18s; }
  .nav-drawer.is-open .nav-drawer__link:nth-child(5) { transition-delay: 0.22s; }
  .nav-drawer.is-open .nav-drawer__link:nth-child(6) { transition-delay: 0.26s; }
  .nav-drawer.is-open .nav-drawer__link:nth-child(7) { transition-delay: 0.30s; }
  .nav-drawer.is-open .nav-drawer__link:nth-child(8) { transition-delay: 0.34s; }
  .nav-drawer__link:active { color: var(--c-vino-claro); }
  .nav-drawer__link--cta {
    margin-top: 14px;
    background: var(--c-vino);
    color: var(--c-neon);
    padding: 10px 18px;
    border-radius: 999px;
    font-family: var(--ff-sans);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
  }
  .nav-drawer__link--cta:active { color: var(--c-neon); }

  /* Side-nav: ocultar en movil — no cabe y la nav principal basta */
  .side-nav,
  .side-nav__shadow { display: none !important; }

  /* WhatsApp flotante: esquina INFERIOR DERECHA, +20% mas grande */
  .wa-floating {
    left: auto;
    right: 14px;
    bottom: 16px;
    width: 58px;
    height: 58px;
  }
  .wa-floating__icon { width: 29px; height: 29px; }

  /* Preloader: logo mas chico */
  .preloader__mark { width: 200px; }

  /* ==========================================================
     SECCION 1 — HERO: 2 pantallas stacked vertical
     Pantalla 1: equipo + textos + boton (100vh)
     Pantalla 2: influencer + despedida scroll-driven (100vh)
     ========================================================== */
  .hero {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 200vh;
    padding-top: 52px;
    grid-template-columns: none;
  }
  .hero__left {
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    padding: 0 20px;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .hero__right {
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    position: relative;
  }

  /* Imagen de equipo: cubre la pantalla 1 completa */
  .hero__team-wrap { position: absolute; }
  .hero__team-bg { object-position: 50% center; }

  /* Mensajes y CTAs escalados, todo CENTRADO en movil */
  .hero__messages {
    max-width: 100%;
    min-height: 220px;
    padding: 0 10px;
    text-align: center;
  }
  .hero__title { font-size: clamp(40px, 11vw, 62px); text-align: center; }
  .hero__message[data-message="2"] .hero__title,
  .hero__message[data-message="3"] .hero__title {
    font-size: clamp(32px, 8.6vw, 52px);
  }
  .hero__ctas { margin-top: 22px; height: 50px; text-align: center; }
  .hero__cta { padding: 13px 24px; font-size: 11px; }

  /* Influencer fills pantalla 2 */
  .hero__influencer {
    width: 100%;
    height: 100%;
    object-position: center center;
  }

  /* Etiqueta vertical "INFLUENCER IA" en el lado izquierdo de la chica */
  .hero__vertical-label {
    display: block;
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: left center;
    font-family: var(--ff-sans);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--c-vino);
    white-space: nowrap;
    z-index: 4;
    pointer-events: none;
    /* Entrada suave al aparecer la pantalla 2 */
    opacity: 0.85;
  }
  /* Linea corta arriba y abajo del texto para acento editorial */
  .hero__vertical-label::before,
  .hero__vertical-label::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 1px;
    background: var(--c-vino);
    vertical-align: middle;
    margin: 0 10px;
    opacity: 0.6;
  }

  /* =============================================================
     SCROLL SNAP en el HERO — "iman" suave al llegar a la chica
     ============================================================= */
  html {
    scroll-snap-type: y proximity;
  }
  /* Snap solo en la pantalla 2 del hero (donde esta la chica).
     proximity = sugerencia (no forzado), asi el usuario puede
     seguir scrolleando pero el scroll se "detiene" un momento
     permitiendo ver las animaciones de la chica. */
  .hero__right {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    scroll-margin-top: 0;
  }

  /* ==========================================================
     SECCION 2 — AUTORIDAD: sin sticky, titulo arriba + video abajo
     Todo CENTRADO en movil
     ========================================================== */
  .autoridad__track {
    height: auto;
    min-height: 100vh;
  }
  .autoridad__pinned {
    position: relative;
    height: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    padding: 70px 20px 32px;
    gap: 24px;
    align-items: stretch;
    justify-content: center;
  }
  /* IMPORTANTE: NO usar align-items: center en .autoridad__left — colapsa el
     ancho de los hijos (incluido .autoridad__messages) y el texto se rompe
     una palabra por linea. En su lugar: dejar stretch (default) + text-align. */
  .autoridad__left {
    padding: 0;
    width: 100%;
    text-align: center;
    align-items: stretch;
  }
  .autoridad__eyebrow {
    margin-bottom: 18px;
    justify-content: center;
    width: 100%;
  }
  .autoridad__messages {
    min-height: 200px;
    text-align: center;
    width: 100%;
  }
  .autoridad__title {
    font-size: clamp(28px, 8vw, 42px);
    margin: 0 auto 14px;
    text-align: center;
    width: 100%;
  }
  .autoridad__text {
    font-size: 14px;
    max-width: 100%;
    line-height: 1.55;
    margin: 0 auto;
    text-align: center;
    width: 100%;
  }
  .autoridad__message {
    text-align: center;
    width: 100%;
  }
  .autoridad__progress {
    margin: 20px auto 0;
    justify-content: center;
    width: 100%;
  }
  .autoridad__progress-bar { width: 32px; }
  /* Animaciones de entrada/salida sin desplazamiento horizontal en movil
     (en horizontal angosto se ven raras y rompen el centrado) */
  @keyframes autoridadIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  @keyframes autoridadOut {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-20px); }
  }

  .autoridad__right {
    width: 100%;
    height: auto;
    padding: 0;
    display: block;
  }
  .autoridad__video-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
  }
  .autoridad__video {
    width: 100%;
    height: 100%;
  }

  /* Botones del video: mas pequenos */
  .autoridad__play-btn { width: 64px; height: 64px; }
  .autoridad__mute-btn,
  .autoridad__fs-btn { width: 38px; height: 38px; }
  .autoridad__fs-btn { right: 60px; }

  /* ==========================================================
     SECCION 3 — SOCIAL PROOF: una pantalla, metricas compactas, CENTRADAS
     ========================================================== */
  .proof {
    padding: 60px 20px 60px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .proof__inner { width: 100%; }
  .proof__eyebrow { margin-bottom: 20px; justify-content: center; }
  .proof__statement {
    font-size: clamp(28px, 8.5vw, 44px);
    margin: 0 auto 40px;
    text-align: center;
  }
  .proof__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .proof__metric { gap: 10px; align-items: center; text-align: center; }
  .proof__num { font-size: clamp(56px, 16vw, 88px); align-self: center !important; }
  .proof__metric--accent .proof__num { align-self: center !important; }
  .proof__label { font-size: 13px; max-width: 100%; margin: 0 auto; }

  /* ==========================================================
     SECCION 4 — ARSENAL: 4 FILAS horizontales (en lugar de columnas)
     CENTRADO en movil: numero arriba, titulo abajo, todo al centro.
     Al activar: numero+titulo siguen centrados pero pegados arriba.
     OPTIMIZADO: track mas corto + transitions mas rapidas para que los
     pilares abran inmediato al scrollear.
     ========================================================== */
  /* Track: desktop 520vh → mobile 320vh (80vh por pilar).
     Cada pilar abre despues de 80vh de scroll en lugar de 130vh. */
  .arsenal__track {
    height: 320vh;
  }
  .arsenal__pinned {
    min-height: 100vh;
  }

  /* NO transiciones en top/left/font-size/letter-spacing (causan layout
     reflow cada frame). Solo transiciona opacity (compositor GPU). */
  .pilar__head {
    transition: opacity 0.25s ease;
  }
  .pilar__roman {
    transition: opacity 0.25s ease;
  }
  .pilar__title {
    transition: opacity 0.25s ease;
  }
  /* El detalle aparece con opacity (GPU-accelerated) */
  .pilar__detail {
    transition: opacity 0.35s ease;
    transform: none !important; /* elimina translateY que causa reflow */
  }
  .pilar.is-active .pilar__detail {
    transition-delay: 0.15s;
    transform: none !important;
  }
  /* Videos de servicios: sin transform stagger (costoso). Solo opacity. */
  .pilar__service-video {
    transition: opacity 0.3s ease !important;
    transform: none !important;
  }
  .pilar.is-active li:nth-child(1) .pilar__service-video { transition-delay: 0.2s; }
  .pilar.is-active li:nth-child(2) .pilar__service-video { transition-delay: 0.25s; }
  .pilar.is-active li:nth-child(3) .pilar__service-video { transition-delay: 0.3s; }
  .pilar.is-active li:nth-child(4) .pilar__service-video { transition-delay: 0.35s; }

  /* Quitar hover scale X/Y (force layout cada frame) — solo cambiar opacity */
  .arsenal__columns:not(.has-active) .pilar:hover,
  .arsenal__columns:not(.has-active) .pilar:active {
    transform: none !important;
  }
  .arsenal__columns.has-active .pilar:not(.is-active):hover,
  .arsenal__columns.has-active .pilar:not(.is-active):active {
    transform: none !important;
  }
  .arsenal__eyebrow {
    top: 14px;
    left: 0;
    right: 0;
    justify-content: center;
  }
  .arsenal__index { font-size: 20px; padding-right: 10px; }
  .arsenal__label { font-size: 9px; }

  /* FLEX COLUMN en lugar de grid. Mucho mas barato de animar:
     - Grid con fr units causa reflow completo cada frame (muy pesado en iOS)
     - Flex basis/grow transiciona limpio via GPU-friendly layout
     CSS controla toda la animacion; JS solo toggle .is-active/.has-active. */
  .arsenal__columns {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    padding-top: 54px;
  }

  /* Cada pilar: flex item, todos iguales por defecto. */
  .pilar {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    transition: flex-grow 0.4s var(--ease-brut),
                background 0.4s var(--ease-brut);
  }

  /* Cuando hay uno activo: el activo crece (flex:7), los otros se comprimen */
  .arsenal__columns.has-active .pilar { flex: 1 1 0; }
  .arsenal__columns.has-active .pilar.is-active { flex: 7 1 0; }
  .pilar + .pilar {
    box-shadow: inset 0 1px 0 rgba(74, 14, 44, 0.08);
  }

  /* PILAR CERRADO (base 4 filas): NUMERO ARRIBA + TITULO ABAJO, centrados */
  .pilar__head {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    width: auto;
  }
  .pilar__roman {
    font-size: clamp(28px, 8vw, 40px);
    text-align: center;
    line-height: 1;
  }
  .pilar__title {
    font-size: clamp(13px, 3.6vw, 18px);
    text-align: center;
    white-space: normal;
    max-width: none;
    line-height: 1.05;
  }
  /* En movil el titulo siempre en una linea — el break se convierte en espacio */
  .pilar__break { display: inline; }
  .pilar__break::before { content: " "; }
  .pilar__title-line { white-space: normal; }

  /* PILAR ACTIVO EN MOVIL: numero+titulo CENTRADOS arriba (no a la izquierda) */
  .pilar.is-active .pilar__head {
    top: 18px;
    left: 50%;
    right: auto;
    transform: translate(-50%, 0);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    width: auto;
  }
  .pilar.is-active .pilar__roman {
    font-size: clamp(26px, 7vw, 36px);
    text-align: center;
  }
  .pilar.is-active .pilar__title {
    font-size: clamp(15px, 4vw, 20px);
    text-align: center;
  }

  /* PILARES CONTRAIDOS en movil (cuando hay uno activo):
     numero+titulo CENTRADOS en su fila (mismo lenguaje visual base) */
  .arsenal__columns.has-active .pilar:not(.is-active) .pilar__head {
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
    height: auto;
    width: auto;
  }
  .arsenal__columns.has-active .pilar:not(.is-active) .pilar__roman {
    font-size: clamp(20px, 5.5vw, 28px);
    margin-top: 0;
    text-align: center;
  }
  .arsenal__columns.has-active .pilar:not(.is-active) .pilar__title {
    font-size: clamp(10px, 2.8vw, 12px);
    transform: rotate(0deg);
    flex: 0 1 auto;
    display: block;
    align-items: initial;
    text-align: center;
  }

  /* Hover/active visual cue: leve expansion vertical */
  .arsenal__columns:not(.has-active) .pilar:hover,
  .arsenal__columns:not(.has-active) .pilar:active {
    transform: scaleY(1.06);
  }
  .arsenal__columns.has-active .pilar:not(.is-active):hover,
  .arsenal__columns.has-active .pilar:not(.is-active):active {
    transform: scaleY(1.10);
  }

  /* DETALLE del pilar activo: titulo arriba (centrado), 4 servicios en 2x2 */
  .pilar__detail {
    padding: 78px 14px 14px;
    gap: 10px;
    text-align: center;
  }
  .pilar__lead {
    font-size: 13px;
    line-height: 1.3;
    margin: 0 auto 6px;
    max-width: 100%;
    text-align: center;
  }
  .pilar__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    max-width: 100%;
  }
  .pilar__list li {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 0;
    border: none;
    flex: 0 0 auto;
    text-align: center;
  }
  .pilar__list li:first-child { border-top: none; }

  /* Servicio en movil: titulo arriba CENTRADO, video abajo */
  .pilar__service-name {
    font-size: 11px;
    line-height: 1.2;
    gap: 4px;
    order: 1;
    text-align: center;
    justify-content: center;
  }
  .pilar__service-name::before {
    font-size: 13px;
  }
  .pilar__service-video {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    border-radius: 4px;
    order: 2;
  }

  /* Zoom overlay del video: ancho adaptado al viewport */
  .video-zoom-overlay__frame {
    width: 90vw;
    max-width: 90vw;
  }
  .video-zoom-overlay__title {
    font-size: 12px;
    top: auto;
    bottom: 10vh;
  }

  /* ==========================================================
     SECCION 5 — DEMO: todo en 1 pantalla (compacto, sin espacios en blanco)
     Layout grid: textos+CTA arriba en su fila, iPhone+chica juntos debajo.
     Fondo BLANCO PURO para que la chica (fondo blanco puro) se difumine.
     ========================================================== */
  .demo {
    background: #FFFFFF;
    height: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 60px 16px 22px;
  }
  .demo__eyebrow {
    position: absolute;
    top: 16px;
    left: 0;
    right: 0;
    justify-content: center;
  }
  .demo__index { font-size: 20px; padding-right: 10px; }
  .demo__label { font-size: 9px; }

  /* Stage: grid 2 filas. Fila 1 = textos full-width. Fila 2 = iPhone | chica */
  .demo__stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "texts texts"
      "phone girl";
    gap: 32px 0; /* separacion entre bloque textos y la fila iPhone+chica */
    flex: none;
    width: 100%;
  }

  /* TEXTOS: full width, compacto, separaciones naturales por margin */
  .demo__texts {
    grid-area: texts;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0 6px;
    gap: 0;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    display: flex;
    flex-direction: column;
  }
  /* Centrado horizontal de los 3 bloques (solo eje X). NO resetea margin
     vertical para que los margin-top de abajo apliquen. */
  .demo__texts > .demo__title,
  .demo__texts > .demo__lead,
  .demo__texts > .demo__cta {
    margin-left: auto;
    margin-right: auto;
  }
  /* Titulo ligeramente mas pequeno para que entre en 3 lineas.
     "Deja de perder clientes / por no responder / a las 3:00 AM." */
  .demo__texts > .demo__title {
    font-size: clamp(26px, 7.2vw, 36px);
    line-height: 1.08;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
  }
  /* IMPORTANTE: el selector .demo__texts > .demo__lead tiene especificidad
     (0,2,0,0) — supera la del base .demo__texts .demo__lead { margin:0 }. */
  .demo__texts > .demo__lead {
    font-size: clamp(14px, 3.8vw, 16px);
    line-height: 1.45;
    max-width: 100%;
    text-align: center;
    /* Separacion equivalente a la del eyebrow → titulo (~40px) */
    margin-top: 40px;
    margin-bottom: 0;
  }
  .demo__texts > .demo__cta {
    padding: 14px 28px;
    font-size: 11px;
    align-self: center;
    /* Separacion equivalente para respirar entre bloques */
    margin-top: 40px;
    margin-bottom: 0;
  }

  /* iPhone: grid area "phone", mitad izquierda, posicion natural (no absolute) */
  .demo__phone-col {
    grid-area: phone;
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    padding: 12px 6px 4px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .iphone-17 { width: 160px; }
  .demo__phone-col .iphone-17 { width: 160px; }
  .iphone-17__frame { padding: 5px; border-radius: 26px; }
  .iphone-17__screen { border-radius: 21px; }
  .iphone-17__island { top: 7px; width: 42px; height: 11px; }

  /* Iconos y textos del iPhone — MUY pequenos, proporcionales al marco 160px.
     Las SVGs llevan width/height inline en HTML; aqui las fuerzo via CSS. */
  .chat-phone__statusbar {
    padding: 4px 8px 2px;
    height: 20px;
    font-size: 6.5px;
  }
  .chat-phone__time { font-size: 6.5px; }
  .chat-phone__statusbar svg { width: 8px !important; height: 5px !important; }
  .chat-phone__icons { gap: 2px; }
  .chat-phone__battery { width: 12px; height: 5px; border-radius: 1.5px; }
  .chat-phone__battery::before { inset: 0.5px; border-radius: 0.5px; }
  .chat-phone__battery::after { width: 1px; height: 2px; top: 1.5px; right: -1.5px; }

  .chat-phone__bar { padding: 4px 7px 5px; gap: 5px; }
  .chat-phone__back { font-size: 13px; }
  .chat-phone__avatar { width: 16px; height: 16px; }
  .chat-phone__avatar-letter { font-size: 7px; }
  .chat-phone__online-dot { width: 4px; height: 4px; border-width: 1px; }
  .chat-phone__meta { gap: 0; }
  .chat-phone__meta strong { font-size: 7px; }
  .chat-phone__status { font-size: 5px; letter-spacing: 0.08em; }

  .chat-phone__body { padding: 5px 4px; gap: 3px; }
  .chat-bubble { font-size: 6.5px; padding: 3px 5px; border-radius: 7px; line-height: 1.3; }
  .chat-bubble--bot.is-typing { padding: 4px 6px; min-width: 22px; }

  .chat-phone__input { padding: 3px 5px 3px; gap: 4px; }
  .chat-phone__input-text { font-size: 6px; padding: 2px 4px; border-radius: 8px; }
  .chat-phone__send { width: 12px; height: 12px; }
  .chat-phone__send svg { width: 7px !important; height: 7px !important; }
  .chat-phone__homebar { height: 9px; padding-bottom: 2px; }
  .chat-phone__homebar::after { width: 50px; height: 2px; }

  /* Chica: grid area "girl", mitad derecha, posicion natural.
     Misma altura que el iPhone (~370px) con object-fit cover para llenar. */
  .demo__right {
    grid-area: girl;
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 6px 4px;
    overflow: hidden;
  }
  .demo__influencer {
    position: relative;
    width: 100%;
    /* Altura fija para coincidir con iPhone — aspect del video controlado
       por object-fit: cover que recorta laterales del fondo blanco puro */
    height: auto;
    aspect-ratio: 9 / 19.5; /* mismo aspect que el iPhone screen */
    max-height: 370px;
    min-height: 300px;
    object-fit: cover;
    object-position: center center;
    left: auto;
    right: auto;
    bottom: auto;
  }

  /* CTA mobile extra: OCULTO — ya no se usa en movil, el CTA principal
     queda arriba con los textos. */
  .demo__cta--mobile {
    display: none !important;
  }

  /* ==========================================================
     SECCION 6 — PLANES: titulo arriba, tarjetas stackeadas, CENTRADO
     - Mantiene animacion de entrada inicial
     - SIN hover scale en la tarjeta seleccionada
     - Animacion de items + dot→check disparada via .is-revealed (JS observer)
     - Bidireccional: revierte cuando la tarjeta sale del viewport
     ========================================================== */
  .planes {
    padding: 60px 20px 70px;
    text-align: center;
  }
  .planes__eyebrow { margin-bottom: 20px; justify-content: center; }
  .planes__header { margin-bottom: 40px; text-align: center; }
  .planes__title { font-size: clamp(28px, 8.5vw, 42px); margin: 0 auto 14px; text-align: center; }
  .planes__lead { font-size: 13px; max-width: 100%; margin: 0 auto; text-align: center; }

  /* CAROUSEL HORIZONTAL: scroll lateral con snap, vista de peek en ambos lados.
     Desktop grid 3cols → mobile flex row con scroll-snap centrado. */
  .planes__grid {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    gap: 14px;
    max-width: 100%;
    padding: 8px 12vw 20px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-padding-inline: 12vw;
  }
  .planes__grid::-webkit-scrollbar { display: none; }
  .plan {
    flex: 0 0 76vw;
    max-width: 320px;
    scroll-snap-align: center;
  }
  /* Reset de margin vertical del featured (solo aplica en grid vertical) */
  .plan--featured {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .plan__inner {
    padding: 28px 22px 24px;
    border-radius: 14px;
  }
  .plan--featured {
    margin-top: 6px;
    margin-bottom: 0;
  }
  .plan--featured .plan__inner {
    padding: 32px 22px 28px;
  }
  .plan__head { margin-bottom: 20px; }
  .plan__name { font-size: clamp(32px, 9vw, 42px); margin: 0 0 12px; }
  .plan--featured .plan__name { font-size: clamp(30px, 8.5vw, 38px); }
  .plan__price-num { font-size: clamp(22px, 6vw, 28px); }
  .plan__subtitle { font-size: 11px; }
  .plan__list { margin: 0 0 22px; gap: 9px; text-align: left; }
  .plan__list li { font-size: 12px; gap: 8px; }
  .plan__cta { padding: 12px 16px; font-size: 10.5px; }

  /* CAROUSEL: cards entran de IZQUIERDA a DERECHA con stagger (plan 1, luego
     2, luego 3). Despues el JS corre el scrollTo Plan 1 → Plan 3 → Plan 2.
     Total de la coreografia: ~2.3s. */
  /* v3r367: entran DESDE LA DERECHA, se pasan de largo y regresan a su
     sitio (el sobrepaso es lo que da el peso); despues el JS recorre las
     tres y vuelve a centrar la de en medio. */
  @keyframes planEnter {
    0%   { opacity: 0; transform: translateX(62vw); }
    62%  { opacity: 1; transform: translateX(-7vw); }
    82%  { transform: translateX(2.5vw); }
    100% { opacity: 1; transform: translateX(0); }
  }
  .plan.is-entered {
    animation-duration: 0.72s !important;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
  }
  /* Stagger derecha→izquierda: primero la que queda mas a la derecha */
  .plan[data-plan="3"].is-entered { animation-delay: 0s !important; }
  .plan[data-plan="2"].is-entered { animation-delay: 0.12s !important; }
  .plan[data-plan="1"].is-entered { animation-delay: 0.24s !important; }
  /* Quitar idle float para no saltar en movil */
  .plan.is-entered .plan__inner,
  .plan--featured.is-entered .plan__inner {
    animation: none;
  }

  /* DESHABILITAR hover scale + grayscale en movil */
  .planes__grid:hover .plan:not(:hover) .plan__inner {
    filter: none;
    opacity: 1;
  }
  .plan:hover .plan__inner,
  .plan--featured:hover .plan__inner {
    transform: none !important;
    box-shadow: 0 14px 36px rgba(74, 14, 44, 0.3) !important;
  }
  .plan:hover { z-index: auto; }
  .plan:hover .plan__list li {
    transform: none;
    color: rgba(255, 255, 255, 0.88);
  }
  .plan:hover .plan__marker-dot {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(1);
  }
  .plan:hover .plan__marker-arrow {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }

  /* ANIMACION via .is-revealed (escrita por JS al entrar viewport) */
  .plan.is-revealed .plan__list li {
    transform: translateY(-4px);
    color: var(--c-white);
  }
  .plan.is-revealed .plan__marker-dot {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
  .plan.is-revealed .plan__marker-arrow {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    /* Convertir el contenido de "→" a check via pseudo-elemento */
    font-size: 0;
    line-height: 0;
  }
  .plan.is-revealed .plan__marker-arrow::after {
    content: "✓";
    font-family: var(--ff-sans);
    font-weight: 800;
    font-size: 14px;
    line-height: 1;
    display: inline-block;
  }
  /* Stagger en movil tambien */
  .plan.is-revealed .plan__list li:nth-child(1),
  .plan.is-revealed .plan__list li:nth-child(1) .plan__marker-dot,
  .plan.is-revealed .plan__list li:nth-child(1) .plan__marker-arrow { transition-delay: 0.05s; }
  .plan.is-revealed .plan__list li:nth-child(2),
  .plan.is-revealed .plan__list li:nth-child(2) .plan__marker-dot,
  .plan.is-revealed .plan__list li:nth-child(2) .plan__marker-arrow { transition-delay: 0.15s; }
  .plan.is-revealed .plan__list li:nth-child(3),
  .plan.is-revealed .plan__list li:nth-child(3) .plan__marker-dot,
  .plan.is-revealed .plan__list li:nth-child(3) .plan__marker-arrow { transition-delay: 0.25s; }
  .plan.is-revealed .plan__list li:nth-child(4),
  .plan.is-revealed .plan__list li:nth-child(4) .plan__marker-dot,
  .plan.is-revealed .plan__list li:nth-child(4) .plan__marker-arrow { transition-delay: 0.35s; }
  .plan.is-revealed .plan__list li:nth-child(5),
  .plan.is-revealed .plan__list li:nth-child(5) .plan__marker-dot,
  .plan.is-revealed .plan__list li:nth-child(5) .plan__marker-arrow { transition-delay: 0.45s; }
  .plan.is-revealed .plan__list li:nth-child(6),
  .plan.is-revealed .plan__list li:nth-child(6) .plan__marker-dot,
  .plan.is-revealed .plan__list li:nth-child(6) .plan__marker-arrow { transition-delay: 0.55s; }

  /* ==========================================================
     SECCION 7 — FAQ: adaptado, full height, todo CENTRADO
     ========================================================== */
  .faq {
    padding: 60px 20px 70px;
    min-height: 100vh;
    text-align: center;
  }
  .faq__eyebrow { margin-bottom: 18px; justify-content: center; }
  .faq__header { margin-bottom: 36px; text-align: center; }
  .faq__title { font-size: clamp(28px, 8.5vw, 42px); text-align: center; }
  .faq__lead { font-size: 13px; margin: 0 auto; text-align: center; }
  .faq__list { max-width: 100%; text-align: left; }
  .faq-item__question { padding: 16px 0; gap: 16px; }
  .faq-item__text { font-size: 14px; }
  .faq-item__question:hover .faq-item__text {
    transform: none;
  }
  .faq-item__icon { width: 20px; height: 20px; }
  .faq-item__answer-inner p {
    font-size: 12px;
    padding: 0 0 18px;
    max-width: 100%;
  }

  /* ==========================================================
     SECCION 8 — CTA FINAL: full height, boton grande pero compacto
     ========================================================== */
  .cta-final {
    padding: 80px 18px 40px;
    min-height: 100vh;
  }
  .cta-final__eyebrow {
    top: 16px;
    left: 0;
    right: 0;
    justify-content: center;
  }
  .cta-final__index { font-size: 20px; padding-right: 10px; }
  .cta-final__label { font-size: 9px; }

  .cta-final__content { gap: 30px; }
  .cta-final__headline { font-size: clamp(30px, 9vw, 48px); }
  .cta-final__button {
    padding: 18px 32px;
    font-size: clamp(18px, 5.5vw, 24px);
    gap: 12px;
  }
  .cta-final__arrow { font-size: 0.6em; }
  .cta-final__microcopy { font-size: 11px; max-width: 100%; }
  .cta-final__micro-sep { display: block; margin: 4px 0; }

  /* DARK FOOTER mobile: 1 columna, compacto */
  .dark-footer {
    padding: 48px 20px 28px;
  }
  .dark-footer__top {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-bottom: 28px;
  }
  .dark-footer__logo { width: 100px; }
  .dark-footer__tagline { font-size: 11px; }
  .dark-footer__cols {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .dark-footer__cols p { font-size: 12px; }
  .dark-footer__legal {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    margin-top: 24px;
    padding-top: 18px;
    font-size: 10px;
  }
}

/* Breakpoint mas pequeno para telefonos chicos (<=380px) */
@media (max-width: 380px) {
  .hero__title { font-size: clamp(34px, 10vw, 52px); }
  .iphone-17 { width: 140px; }
  .demo__phone-col .iphone-17 { width: 140px; }
  .pilar__list {
    gap: 8px;
  }
  .pilar__service-name { font-size: 10px; }
}

/* ==================================================================
   DEFENSIVO CROSS-PLATFORM — Garantiza compatibilidad en Windows/Edge
   y conexiones lentas.
   ================================================================== */

/* 1. Reducir animaciones para usuarios que lo prefieren o en dispositivos
      con bajo rendimiento. Mejora rendimiento y evita glitches visuales. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .preloader__text {
    stroke-dashoffset: 0;
    animation: none;
  }
}

/* 2. Contenedor raiz sin overflow horizontal. overflow:clip (a diferencia de
      overflow:hidden) NO crea scroll container, por lo que NO rompe
      position:sticky — es seguro aplicarlo al html. */
html {
  overflow-x: clip;
}

/* 3. Fondo negro en videos mientras cargan — evita el flash blanco/gris
      tipico en Windows Chrome cuando el decoder aun no tiene el primer frame.
      Se excluyen los videos del hero porque tienen height:88% y el 12% restante
      queda sobre fondo blanco — el negro causaria una linea visible en ese gap. */
video:not(.hero__influencer) {
  background-color: #0A0A0A;
}
/* Los videos del hero usan fondo transparente para que el gap superior
   se vea igual que el fondo blanco del contenedor. */
.hero__influencer {
  background-color: transparent;
}

/* 4. Evitar que el ancho de la scrollbar de Windows afecte elementos de
      ancho 100vw. Con scrollbar-gutter:stable (ya aplicado arriba) y este
      max-width, los elementos llenos no se desbordan 17px. */
.nav, .preloader, .side-nav, .pilar__zoom-overlay {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ==================================================================
   MOBILE PERFORMANCE OVERRIDES (<=768px) — al final del archivo para
   maxima especificidad por source order. Quita todos los efectos caros
   que hacen trabar iPhones de gama media.
   ================================================================== */
@media (max-width: 768px) {

  /* 1. QUITAR backdrop-filter (uno de los efectos mas caros del browser).
        Reemplazar por fondo solido semi-translucido. */
  .nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(254, 254, 252, 0.96);
  }
  .nav-drawer {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(239, 230, 214, 0.97);
  }
  .autoridad__overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .autoridad__mute-btn,
  .autoridad__fs-btn {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .video-zoom-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(10, 10, 10, 0.85);
  }

  /* 2. DESACTIVAR animaciones infinitas (GPU constante) */
  /* Breathing del equipo */
  .hero__team-bg { animation: none !important; }
  /* Pulso recurrente de WhatsApp: reemplazar por un pulso simple de scale.
     El keyframe original tiene 10+ cambios de box-shadow por ciclo → caro. */
  .wa-floating.is-highlighted {
    animation: waPulseMobile 1.8s ease-in-out infinite !important;
  }
  @keyframes waPulseMobile {
    0%, 100% { transform: scale(1); box-shadow: 0 4px 18px rgba(74,14,44,0.25); }
    50%      { transform: scale(1.08); box-shadow: 0 6px 22px rgba(74,14,44,0.45); }
  }
  /* v3r386: el pulso del CTA final VUELVE en movil. La regla anterior lo
     apagaba con `opacity: 0 !important`, y una declaracion !important gana
     SIEMPRE sobre una animacion: por eso reactivar el keyframe no bastaba,
     los anillos seguian invisibles. Solo anima transform y opacity, que son
     baratos para el compositor. */
  /* Pulso verde del avatar del chat (tambien infinito) */
  .chat-phone__online-dot { animation: none !important; }
  /* Pulso del placeholder dot */
  .placeholder__pulse { animation: none !important; }

  /* 3. REDUCIR box-shadows pesados a sombras simples */
  .plan__inner {
    box-shadow: 0 6px 20px rgba(74, 14, 44, 0.18) !important;
  }
  .plan--featured .plan__inner {
    box-shadow: 0 10px 28px rgba(74, 14, 44, 0.24) !important;
  }
  .iphone-17 {
    filter: drop-shadow(0 12px 24px rgba(74, 14, 44, 0.18));
  }
  .cta-final__button {
    box-shadow: 0 6px 18px rgba(232, 255, 0, 0.15) !important;
  }
  .video-zoom-overlay__frame {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35) !important;
  }

  /* 4. SCROLL: que iOS maneje el scroll nativo (sin smooth CSS) */
  html {
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 5. DESACTIVAR hover-effects caros en touch (no se usan ademas) */
  .plan:hover .plan__inner,
  .plan--featured:hover .plan__inner,
  .planes__grid:hover .plan:not(:hover) .plan__inner,
  .autoridad__video-wrap:hover .autoridad__overlay,
  .pilar:hover {
    /* reset a valores por defecto — se maneja via .is-active/.is-revealed */
  }

  /* 6. Simplificar transiciones largas (>1s) a 0.35-0.5s */
  .faq-item__answer {
    transition: grid-template-rows 0.4s var(--ease-brut) !important;
  }
  .nav-drawer {
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
  }
  .nav-drawer__link {
    transition: opacity 0.3s var(--ease-brut),
                transform 0.3s var(--ease-brut) !important;
  }

  /* 7. Video zoom overlay: reducir blur y scale transitions */
  .video-zoom-overlay__frame {
    transition: transform 0.3s var(--ease-brut) !important;
  }

  /* 8. Hint al compositor: usar el GPU layer para elementos que animan.
     Lo aplicamos solo cuando estan en movimiento (via clases). */
  .plan.is-entered { will-change: transform, opacity; }
  .pilar.is-active { will-change: auto; } /* quita despues del cambio */
}

/* ==================================================================
   TABLET / iPad — 2 condiciones para capturar iPad en cualquier orientacion:
   1. Ancho 769-1024 (iPads en portrait, algunos laptops pequenos)
   2. Touch primary + >=769px (iPads en LANDSCAPE 1180-1366px tambien)
   Base: layout desktop intacto. Solo cambia nav + optimizaciones de perf.
   ================================================================== */
@media (min-width: 769px) and (max-width: 1024px),
       (min-width: 769px) and (hover: none) and (pointer: coarse) {

  /* ---- Ocultar side-nav lateral (como en mobile) ---- */
  .side-nav,
  .side-nav__shadow { display: none !important; }

  /* ---- Navbar superior: ocultar CTA, mostrar hamburger ---- */
  .nav__links { display: none; }
  .nav__inner { padding: 16px 32px; }
  .nav__brand-logo { height: 32px; }

  /* Hamburger button de 3 lineas — proporciones iPad */
  .nav__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav__hamburger-line {
    display: block;
    width: 28px;
    height: 2px;
    background: var(--c-vino);
    border-radius: 2px;
    transition: transform 0.35s var(--ease-brut),
                opacity 0.25s ease;
  }
  .nav__hamburger.is-open .nav__hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .nav__hamburger.is-open .nav__hamburger-line:nth-child(2) {
    opacity: 0;
  }
  .nav__hamburger.is-open .nav__hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* Drawer translucido beige, alineado a la derecha (misma estetica que mobile) */
  .nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(239, 230, 214, 0.82);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
  }
  .nav-drawer.is-open {
    opacity: 1;
    visibility: visible;
  }
  .nav-drawer__panel {
    width: 100%;
    height: 100%;
    padding: 100px 40px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
  }
  .nav-drawer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: auto;
    max-width: 100%;
    text-align: right;
    align-items: flex-end;
  }
  .nav-drawer__link {
    display: block;
    font-family: var(--ff-sans);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: 0.08em;
    color: var(--c-vino);
    text-decoration: none;
    padding: 10px 0;
    text-transform: uppercase;
    text-align: right;
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.4s var(--ease-brut),
                transform 0.4s var(--ease-brut),
                color 0.25s ease;
  }
  .nav-drawer.is-open .nav-drawer__link {
    opacity: 1;
    transform: translateX(0);
  }
  .nav-drawer.is-open .nav-drawer__link:nth-child(1) { transition-delay: 0.06s; }
  .nav-drawer.is-open .nav-drawer__link:nth-child(2) { transition-delay: 0.10s; }
  .nav-drawer.is-open .nav-drawer__link:nth-child(3) { transition-delay: 0.14s; }
  .nav-drawer.is-open .nav-drawer__link:nth-child(4) { transition-delay: 0.18s; }
  .nav-drawer.is-open .nav-drawer__link:nth-child(5) { transition-delay: 0.22s; }
  .nav-drawer.is-open .nav-drawer__link:nth-child(6) { transition-delay: 0.26s; }
  .nav-drawer.is-open .nav-drawer__link:nth-child(7) { transition-delay: 0.30s; }
  .nav-drawer.is-open .nav-drawer__link:nth-child(8) { transition-delay: 0.34s; }
  .nav-drawer__link:hover,
  .nav-drawer__link:active { color: var(--c-vino-claro); }
  .nav-drawer__link--cta {
    margin-top: 20px;
    background: var(--c-vino);
    color: var(--c-neon);
    padding: 14px 28px;
    border-radius: 999px;
    font-family: var(--ff-sans);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
  }
  .nav-drawer__link--cta:hover,
  .nav-drawer__link--cta:active { color: var(--c-neon); }

  /* ============================================================
     PERFORMANCE OVERRIDES iPad — misma logica que mobile perf.
     Evita trabado en iPads mid-range (Air/10a gen).
     ============================================================ */

  /* 1. QUITAR backdrop-filter (muy caro en iPadOS) */
  .nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(254, 254, 252, 0.96);
  }
  .nav-drawer {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .autoridad__overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .autoridad__mute-btn,
  .autoridad__fs-btn {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .video-zoom-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(10, 10, 10, 0.85);
  }

  /* 2. DESACTIVAR animaciones infinitas que consumen GPU constantemente */
  .hero__team-bg { animation: none !important; }
  .wa-floating.is-highlighted {
    animation: waPulseMobile 1.8s ease-in-out infinite !important;
  }
  .cta-final__pulse,
  .cta-final__pulse--2 {
    animation: none !important;
    opacity: 0 !important;
  }
  .chat-phone__online-dot { animation: none !important; }
  .placeholder__pulse { animation: none !important; }

  /* 3. REDUCIR box-shadows pesados */
  .plan__inner {
    box-shadow: 0 8px 24px rgba(74, 14, 44, 0.2) !important;
  }
  .plan--featured .plan__inner {
    box-shadow: 0 14px 34px rgba(74, 14, 44, 0.28) !important;
  }
  .iphone-17 {
    filter: drop-shadow(0 18px 30px rgba(74, 14, 44, 0.22));
  }
  .cta-final__button {
    box-shadow: 0 8px 24px rgba(232, 255, 0, 0.18) !important;
  }
  .video-zoom-overlay__frame {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
  }

  /* 4. ARSENAL: flex en lugar de grid fr (elimina reflow cada frame).
     Mantiene layout HORIZONTAL (4 columnas) igual que desktop pero la
     animacion se hace via CSS transition sobre flex-grow — no JS rAF. */
  .arsenal__columns {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }
  .pilar {
    flex: 1 1 0;
    min-width: 0;
    transition: flex-grow 0.55s var(--ease-brut),
                background 0.55s var(--ease-brut);
  }
  .arsenal__columns.has-active .pilar { flex: 1 1 0; }
  .arsenal__columns.has-active .pilar.is-active { flex: 7 1 0; }

  /* 5. SCROLL nativo (sin smooth CSS) para mejor performance en iPadOS */
  html {
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 6. ARSENAL: track MAS corto (240vh = 60vh por pilar) + transiciones
     TOTALMENTE eliminadas en head/roman/title. Solo opacity en el detalle
     y service videos. La "animacion" visual del pilar abriendose viene
     del flex-grow del contenedor. Todo lo demas snappea. */
  .arsenal__track {
    height: 240vh;
  }
  .pilar__head {
    transition: none !important;
  }
  .pilar__roman {
    transition: none !important;
  }
  .pilar__title {
    transition: none !important;
  }
  .pilar__detail {
    transition: opacity 0.3s ease !important;
    transform: none !important;
  }
  .pilar.is-active .pilar__detail {
    transition-delay: 0.15s !important;
    transform: none !important;
  }
  /* Service videos en iPad: transicion rapida, sin transform.
     La opacidad es controlada 100% por JS (inline style) segun el evento
     'playing' del video. NO usar transition-delay ni reglas que forcen
     opacity 1 desde CSS — eso causaba el flicker mientras el video cargaba. */
  .pilar__service-video {
    transition: opacity 0.25s ease !important;
    transform: none !important;
    transition-delay: 0s !important;
  }
  .pilar.is-active li:nth-child(1) .pilar__service-video,
  .pilar.is-active li:nth-child(2) .pilar__service-video,
  .pilar.is-active li:nth-child(3) .pilar__service-video,
  .pilar.is-active li:nth-child(4) .pilar__service-video {
    transition-delay: 0s !important;
  }
  /* Contain las layers de cada pilar para que sus cambios no causen
     reflow de sus hermanos. Optimizacion importante en iPad. */
  .pilar {
    contain: layout paint;
  }

  /* 8. CONTENT-VISIBILITY auto en secciones POST-arsenal (bottom half).
     El browser SKIPS layout/paint/composite para elementos offscreen.
     Solo aplicado a secciones simples sin sticky scroll ni animaciones
     continuas, para evitar side-effects. */
  .faq,
  .cta-final,
  .dark-footer {
    content-visibility: auto;
    contain-intrinsic-size: 100vh;
  }

  /* 7. NEUTRALIZAR HOVER EFFECTS (iPad no tiene cursor, solo touch).
     Los :hover quedan "pegados" en dispositivos touch al tocar, generando
     animaciones no deseadas. Forzamos que no cambien visualmente. */

  /* Arsenal pilares: sin scaleX en hover */
  .arsenal__columns:not(.has-active) .pilar:hover,
  .arsenal__columns:not(.has-active) .pilar:active,
  .arsenal__columns.has-active .pilar:not(.is-active):hover,
  .arsenal__columns.has-active .pilar:not(.is-active):active {
    transform: none !important;
    background: transparent !important;
  }
  .arsenal__columns.has-active .pilar:not(.is-active):hover .pilar__roman {
    opacity: 0.75 !important;
  }
  .arsenal__columns.has-active .pilar:not(.is-active):hover .pilar__title {
    opacity: 0.55 !important;
  }

  /* Planes: sin scale 1.15, sin grayscale de hermanas, sin micro-jump de items */
  .plan:hover .plan__inner,
  .plan--featured:hover .plan__inner {
    transform: none !important;
    box-shadow: 0 8px 24px rgba(74, 14, 44, 0.2) !important;
  }
  .plan--featured:hover .plan__inner {
    box-shadow: 0 14px 34px rgba(74, 14, 44, 0.28) !important;
  }
  .plan:hover { z-index: auto; }
  .planes__grid:hover .plan:not(:hover) .plan__inner {
    filter: none !important;
    opacity: 1 !important;
  }
  .plan:hover .plan__list li {
    transform: none !important;
    color: rgba(255, 255, 255, 0.88) !important;
  }
  .plan:hover .plan__marker-dot {
    opacity: 0.85 !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }
  .plan:hover .plan__marker-arrow {
    opacity: 0 !important;
    transform: translate(-50%, -50%) scale(0.4) !important;
  }

  /* Autoridad video: overlay no aparece en hover (solo con pause/click) */
  .autoridad__video-wrap:hover .autoridad__overlay { opacity: 0 !important; pointer-events: none !important; }
  .autoridad__video-wrap.is-paused .autoridad__overlay { opacity: 1 !important; pointer-events: auto !important; }
  .autoridad__video-wrap:hover .autoridad__mute-btn,
  .autoridad__video-wrap:hover .autoridad__fs-btn { opacity: 0 !important; }
  .autoridad__video-wrap.is-paused .autoridad__mute-btn,
  .autoridad__video-wrap.is-paused .autoridad__fs-btn { opacity: 1 !important; }

  /* Hero CTA: sin cambio de color en hover */
  .hero__cta:hover {
    background: var(--c-neon);
    color: var(--c-vino);
  }

  /* WhatsApp flotante: sin scale hover */
  .wa-floating:hover { transform: none !important; }

  /* Nav brand: sin fade hover */
  .nav__brand:hover .nav__brand-logo { opacity: 1 !important; }

  /* FAQ: sin translate del texto al hover */
  .faq-item__question:hover { color: var(--c-vino); }
  .faq-item__question:hover .faq-item__text { transform: none !important; }

  /* CTA final boton: sin scale 1.04 ni cambio de color en hover */
  .cta-final__button:hover {
    transform: none !important;
    background: var(--c-neon) !important;
    color: var(--c-vino) !important;
    box-shadow: 0 8px 24px rgba(232, 255, 0, 0.18) !important;
  }
  .cta-final__button:hover .cta-final__text--default { transform: translateY(0) !important; opacity: 1 !important; }
  .cta-final__button:hover .cta-final__text--hover { transform: translateY(100%) !important; opacity: 0 !important; }
  .cta-final__button:hover .cta-final__arrow { transform: none !important; }

  /* Plan CTA: sin cambio de colores en hover */
  .plan__cta:hover {
    background: var(--c-white);
    color: var(--c-vino);
    border-color: var(--c-white);
  }
  .plan__cta--neon:hover {
    background: var(--c-neon);
    color: var(--c-vino);
    border-color: var(--c-neon);
  }

  /* Service name hover: sin cambio de color */
  .pilar__service-name:hover { color: var(--c-vino) !important; }

  /* Drawer links: sin color change en hover */
  .nav-drawer__link:hover { color: var(--c-vino); }

  /* Side-nav shadow: no muestra hover (ya esta oculto) */
  .side-nav:hover ~ .side-nav__shadow { opacity: 0; }
}

/* ================================================================
   V3 · HERO EDITORIAL (referencia aprobada 2026-07-21)
   Titular serif a todo el ancho + equipo integrado sin contorno.
   Bloque autocontenido: anula el grid 2/3-1/3 del hero anterior.
   ================================================================ */

.hero--editorial {
  --heroed-ink: var(--c-vino-deep); /* vino oscuro #2D0819: relleno Y contorno */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(84px) var(--gutter) 0;
  background: var(--c-beige-claro);
  overflow: clip;
}

/* --- Titular: dos lineas que llenan el ancho, detras del equipo --- */
.heroed__titlewrap { position: relative; margin: 4.5vh 0 0; }
.heroed__title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 700;
  color: var(--heroed-ink);
  text-transform: uppercase;
  line-height: 0.845;
  text-align: center;
}
.heroed__line { display: block; white-space: nowrap; }
.heroed__line--1 { font-size: clamp(3.4rem, 13.3vw, 13.3vw); letter-spacing: -0.015em; }
.heroed__line--2 { font-size: clamp(4.6rem, 20.1vw, 20.1vw); position: relative; letter-spacing: -0.022em; margin-top: 1.2vh; }

/* Subrayado chartreuse bajo DOMINA. (se dibuja en la entrada) */
.heroed__underline {
  position: absolute;
  left: 59%;
  right: 7.5%;
  bottom: -0.035em;
  height: 0.018em;
  background: var(--c-neon);
  transform-origin: left center;
}

/* --- Equipo: misma foto, medio cuerpo, fundida a la crema --- */
.heroed__team {
  /* Recorte real con transparencia (equipo-mkt4u-recorte.webp):
     personas OPACAS por delante del titular, como la referencia.
     El corte a medio muslo lo hace el borde inferior del viewport
     (bottom negativo + overflow:clip de la seccion). */
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: calc(60vh - 86.9vw); /* cabezas al ~40% en cualquier proporcion */
  transform: translateX(-50%);
  width: 74vw;
  aspect-ratio: 1258 / 1478; /* altura = 86.9vw */
  margin: 0;
  pointer-events: none;
}
.heroed__team-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  filter: contrast(1.03);
}

/* --- Metadatos de esquina --- */
.heroed__meta {
  position: absolute;
  z-index: 3;
  bottom: 34px;
  margin: 0;
  font-family: var(--ff-sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1a1512;
  opacity: 0.75;
}
.heroed__meta--left { left: var(--gutter); }
.heroed__meta--right { right: calc(var(--gutter) + 84px); text-align: right; } /* deja aire al FAB de WhatsApp */

/* --- Nav: enlaces editoriales (solo desktop; movil usa el drawer) --- */
.nav__navlink {
  font-family: var(--ff-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1a1512;
  text-decoration: none;
  margin-right: clamp(18px, 2.6vw, 46px);
  position: relative;
  padding: 6px 0;
}
.nav__navlink::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--c-vino);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms cubic-bezier(.77,0,.18,1);
}
.nav__navlink:hover::after { transform: scaleX(1); }
.nav__cta-arrow { color: var(--c-neon); margin-left: 4px; }

/* --- Coreografia de entrada (arranca tras el preloader ~1.8s) --- */
@keyframes heroed-line-in {
  from { opacity: 0; transform: translateY(0.35em); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroed-team-in {
  /* Solo transform: animar opacity crearia un grupo de aislamiento
     que apaga el mix-blend-mode del contenedor. */
  from { transform: translateX(-50%) translateY(60%); }
  to   { transform: translateX(-50%) translateY(0); }
}
@keyframes heroed-underline-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes heroed-meta-in {
  from { opacity: 0; }
  to   { opacity: 0.75; }
}
.heroed__line--1 { opacity: 0; animation: heroed-line-in 900ms cubic-bezier(.22,1,.36,1) 1.9s forwards; }
.heroed__line--2 { opacity: 0; animation: heroed-line-in 900ms cubic-bezier(.22,1,.36,1) 2.05s forwards; }
.heroed__team    { transform: translateX(-50%) translateY(60%); animation: heroed-team-in 1100ms cubic-bezier(.22,1,.36,1) 2.35s forwards; }
.heroed__underline { transform: scaleX(0); animation: heroed-underline-in 700ms cubic-bezier(.77,0,.18,1) 2.9s forwards; }
.heroed__meta    { opacity: 0; animation: heroed-meta-in 800ms ease 3.1s forwards; }

/* --- Responsive --- */
@media (max-width: 768px) {
  .hero--editorial { padding-top: 72px; }
  .heroed__title { margin-top: 4vh; line-height: 0.9; }
  .heroed__line--1 { font-size: 13.5vw; }
  .heroed__line--2 { font-size: 19vw; }
  .heroed__team { width: 94vw; bottom: calc(54vh - 109.95vw); }
  .heroed__meta { display: none; }
  .nav__navlink { display: none; } /* movil: drawer existente */
}

@media (prefers-reduced-motion: reduce) {
  .heroed__line--1, .heroed__line--2, .heroed__team,
  .heroed__underline, .heroed__meta {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .heroed__team { transform: translateX(-50%); }
  .heroed__underline { transform: scaleX(1); }
}


/* V3: la referencia no lleva navegacion lateral por puntos */
.side-nav__shadow { display: none !important; }


/* --- Titular fantasma de contorno (tecnica del poster) --- */
.heroed__title--stroke {
  position: absolute;
  z-index: 3;
  inset: 0; /* calca exactamente al titular base dentro del wrapper */
  pointer-events: none;
}
.heroed__title--stroke .heroed__line {
  /* PRUEBA A/B: overlay translucido (relleno al 26%) en vez de contorno.
     Para volver al contorno: color transparent + text-stroke 1px. */
  color: color-mix(in srgb, var(--heroed-ink) 26%, transparent);
  -webkit-text-stroke: 0;
  text-stroke: 0;
}


/* ================================================================
   V3 · HERO POSTER STAGE (DEFINITIVO) — geometria fija 1658x941
   calcada de la referencia; --s = anchoVentana/1658 (JS).
   Sustituye por cascada a los sizings vw/vh de rondas previas.
   ================================================================ */
.hero--editorial {
  padding: 84px 0 0;
  min-height: 0;
  height: calc(84px + 941px * var(--s, 0.85));
  overflow: clip;
}
.heroed__stage {
  position: relative;
  width: 1658px;
  height: 941px;
  overflow: hidden;
  transform-origin: 0 0;
  transform: scale(var(--s, 0.85));
}
.heroed__titlewrap { position: absolute; inset: 0; margin: 0; }
.heroed__title { position: absolute; inset: 0; margin: 0; }
.heroed__line { position: absolute; left: 0; right: 0; white-space: nowrap; }
.heroed__line--1 { font-size: 210px; letter-spacing: -0.015em; top: 138px; }
.heroed__line--2 { font-size: 338px; letter-spacing: -0.022em; top: 318px; margin: 0; }
.heroed__underline {
  left: 53.2%; right: 6%;
  bottom: -12px; height: 8px;
}
.heroed__team {
  left: 50%;
  top: 300px;
  bottom: auto;
  width: 1164px;
  transform: translateX(-50%);
  aspect-ratio: 1258 / 1478;
}
.heroed__meta { bottom: 44px; font-size: 12px; }
.heroed__meta--left { left: 64px; }
.heroed__meta--right { right: 64px; }

@keyframes heroed-team-in {
  from { transform: translateX(-50%) translateY(60px); }
  to   { transform: translateX(-50%) translateY(0); }
}
.heroed__team { animation: heroed-team-in 1100ms cubic-bezier(.22,1,.36,1) 2.35s backwards; }

/* El stage escala tambien en movil (poster proporcional). Neutraliza
   los overrides moviles de rondas previas. */
@media (max-width: 768px) {
  .heroed__title { margin: 0; line-height: 0.845; }
  .heroed__line--1 { font-size: 210px; }
  .heroed__line--2 { font-size: 338px; }
  .heroed__team { width: 1164px; top: 300px; bottom: auto; }
  .heroed__meta { display: block; }
}


/* ================================================================
   V3 · Detallitos ronda 6: nav beige, hero pantalla completa,
   FAB WhatsApp vino + beige
   ================================================================ */

/* 1) Nav del mismo beige que el fondo del hero: sin costura */
.nav {
  background: var(--c-beige-claro);
  border-bottom: 0;
  box-shadow: none;
}

/* 2) Hero llena la pantalla: el lienzo mantiene su geometria y las
   personas se extienden hacia abajo en pantallas mas altas */
.hero--editorial {
  height: 100vh;
  height: 100svh;
}
.heroed__stage { overflow: visible; }

/* 3) FAB WhatsApp: circulo vino, simbolo beige, diseno limpio */
.wa-floating {
  background: var(--c-vino-deep);
  color: var(--c-beige);
  border: 0;
  box-shadow: 0 10px 28px rgba(45, 8, 25, 0.28);
}
.wa-floating:hover {
  background: var(--c-vino);
  color: var(--c-beige-claro);
}
.wa-floating__icon { color: inherit; fill: currentColor; }


/* V3 ronda 7: metadatos al borde inferior de la pantalla + FAB mas arriba */
.heroed__meta {
  position: absolute;
  bottom: 26px;
  z-index: 4;
  font-size: 11.5px;
  opacity: 0.8;
}
.heroed__meta--left { left: 48px; right: auto; }
.heroed__meta--right { right: 48px; left: auto; text-align: right; }

.wa-floating { bottom: 96px; }


/* ================================================================
   V3 · HERO 3 ESCENAS ROTATIVAS (7s c/u)
   Escena 1: titular central (calibrado). Escena 2: titular izq,
   equipo derecha. Escena 3: titular + copy + CTA planes.
   ================================================================ */
.heroscene {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.heroscene.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: heroscene-in 700ms cubic-bezier(.22,1,.36,1);
}
.heroscene.is-leaving {
  opacity: 0;
  visibility: visible;
  animation: heroscene-out 550ms cubic-bezier(.55,0,.55,.2) forwards;
}
@keyframes heroscene-in {
  from { opacity: 0; transform: translateY(34px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroscene-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-34px); }
}

/* --- Escena 2: bloque de titulo arriba-izquierda --- */
.heroscene--2 .heroed__line { left: 60px; right: auto; text-align: left; }
.heroed__line--s2a { font-size: 186px; letter-spacing: -0.015em; top: 128px; }
.heroed__line--s2b { font-size: 168px; letter-spacing: -0.012em; top: 330px; }
.heroscene__bar {
  position: absolute;
  height: 6px;
  background: var(--c-neon);
  transform-origin: left center;
}
.heroscene__bar--s2 { left: 62px; width: 700px; top: 476px; }  /* era 454: cruzaba las letras */
.heroscene.is-active .heroscene__bar {
  animation: heroed-underline-in 650ms cubic-bezier(.77,0,.18,1) 500ms backwards;
}

/* --- Escena 3: titular izq + copy + CTA --- */
.heroscene--3 .heroed__line { left: 95px; right: auto; text-align: left; }
.heroed__line--s3a { font-size: 158px; letter-spacing: -0.012em; top: 132px; }
.heroed__line--s3b { font-size: 226px; letter-spacing: -0.02em; top: 298px; }
.heroscene__bar--s3 { left: 97px; width: 790px; top: 495px; }
.heroscene__copy {
  position: absolute;
  left: 97px;
  top: 542px;
  width: 360px;
  margin: 0;
  font-family: var(--ff-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.85;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-vino);
}
.heroscene__cta {
  position: absolute;
  left: 97px;
  top: 768px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-vino-deep);
  text-decoration: none;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--c-vino-deep);
  transition: color 160ms ease, border-color 160ms ease, gap 160ms ease;
}
.heroscene__cta:hover { color: var(--c-vino); gap: 16px; }

/* --- Posiciones del equipo por escena (se cambia estando oculto) --- */
.heroed__team { transition: opacity 1100ms ease; }
.heroed__team.is-hidden { opacity: 0; transition-duration: 750ms; }
/* La veladura entra y sale JUNTO con las personas (nada aparece de golpe) */
.heroed__title--stroke { transition: opacity 1100ms ease; }
.hero--editorial.is-teamfade .heroed__title--stroke { opacity: 0; transition-duration: 750ms; }
.hero--editorial[data-scene="2"] .heroed__team {
  left: 555px; top: 300px; width: 1164px; transform: none;
}
.hero--editorial[data-scene="3"] .heroed__team {
  left: 445px; top: 392px; width: 1330px; transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .heroscene.is-active, .heroscene.is-leaving,
  .heroscene.is-active .heroscene__bar { animation: none; }
}


/* ================================================================
   V3 · BOTONES GLASS (vino translucido, redondos, con vida)
   ================================================================ */
.heroed__btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 22px 44px;
  border-radius: 999px;
  font-family: var(--ff-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-beige-claro);
  text-decoration: none;
  background: linear-gradient(135deg, rgba(74,14,44,0.94), rgba(45,8,25,0.88));
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 14px 38px rgba(45,8,25,0.28);
  overflow: hidden;
  isolation: isolate;
  animation: heroed-btn-float 3.2s ease-in-out infinite alternate;
  transition: transform 180ms cubic-bezier(.23,1,.32,1),
              box-shadow 180ms ease, background-color 180ms ease;
}
/* destello glass periodico */
.heroed__btn::before {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -60%;
  width: 45%;
  background: linear-gradient(105deg,
    transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-18deg);
  animation: heroed-btn-sheen 3.8s cubic-bezier(.4,0,.2,1) infinite;
}
.heroed__btn-arrow {
  display: inline-block;
  color: var(--c-neon);
  animation: heroed-btn-arrow 1.6s ease-in-out infinite;
}
.heroed__btn:hover {
  /* animation:none — el float infinito pisaba el transform del hover */
  animation: none;
  transform: translateY(-2px) scale(1.10);
  /* inversion: fondo beige, letras vino */
  background: linear-gradient(135deg, rgba(245,238,224,0.97), rgba(239,230,214,0.92));
  color: var(--c-vino-deep);
  border: 2px solid var(--c-vino);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 20px 48px rgba(45,8,25,0.30);
}
.heroed__btn:hover .heroed__btn-arrow { color: var(--c-vino); }
/* pulso de sombra al hover (anillo que respira detras) */
.heroed__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
}
.heroed__btn:hover::after {
  opacity: 1;
  animation: heroed-btn-pulse 1.3s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes heroed-btn-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74,14,44,0.45); }
  70%  { box-shadow: 0 0 0 22px rgba(74,14,44,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,14,44,0); }
}
@keyframes heroed-btn-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}
@keyframes heroed-btn-sheen {
  0%   { left: -60%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}
@keyframes heroed-btn-arrow {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}

/* Posiciones por escena (stage px) */
.heroed__btn--s1 { left: 64px; top: 712px; padding: 15px 30px; font-size: 13px; gap: 10px; }
.heroed__btn--s2 { left: 62px; top: 596px; }
.heroed__btn--s3 { left: 97px; top: 700px; }

@media (prefers-reduced-motion: reduce) {
  .heroed__btn, .heroed__btn::before, .heroed__btn-arrow { animation: none; }
}


/* FIX CRITICO: la veladura (z3, inset 0) cubria todo el stage y se
   tragaba hover/clicks de los botones. Los titulares no necesitan cursor. */
.heroed__titlewrap,
.heroed__title,
.heroed__title--stroke { pointer-events: none; }
.heroed__btn { z-index: 5; pointer-events: auto; }


/* FIX pulso: el anillo vive en la sombra del boton (no se recorta) */
.heroed__btn:hover::after { animation: none; opacity: 0; }
.heroed__btn:hover {
  animation: heroed-btn-pulse-ring 1.25s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes heroed-btn-pulse-ring {
  0% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.8),
      0 20px 48px rgba(45,8,25,0.30),
      0 0 0 0 rgba(74,14,44,0.45);
  }
  70% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.8),
      0 20px 48px rgba(45,8,25,0.30),
      0 0 0 26px rgba(74,14,44,0);
  }
  100% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.8),
      0 20px 48px rgba(45,8,25,0.30),
      0 0 0 0 rgba(74,14,44,0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .heroed__btn:hover { animation: none; }
}


/* ================================================================
   V3 · SECCION IA HERO NOCTURNO (lienzo 1658x941, escala --s global)
   ================================================================ */
.iahero {
  position: relative;
  height: calc(941px * var(--s, 0.85));
  background: var(--c-noche);
  overflow: clip;
}
.iahero__stage {
  position: relative;
  width: 1658px;
  height: 941px;
  overflow: hidden;
  transform-origin: 0 0;
  transform: scale(var(--s, 0.85));
}
.iahero__glow {
  position: absolute;
  left: -150px; top: -50px;
  width: 1350px; height: 1100px;
  background: radial-gradient(ellipse 700px 560px at 979px 520px,
    var(--c-halo-vino), rgba(45,8,25,0.28) 55%, transparent 75%);
  /* centro del stage (829+150 offset del propio glow) = centro de pagina */
  pointer-events: none;
}
.iahero__title { position: absolute; inset: 0; margin: 0; pointer-events: none; z-index: 2; }
.iahero__line {
  position: absolute;
  left: 158px;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 131px;
  line-height: 1;
  letter-spacing: 0.005em;
  color: #F2EBDD;
  white-space: nowrap;
}
.iahero__l1 { top: 298px; }
.iahero__l2 { top: 448px; }
.iahero__caret {
  display: inline-block;
  width: 5px;
  height: 0.72em;
  margin-left: 20px;
  background: var(--c-neon);
  vertical-align: baseline;
  transform: translateY(0.06em);
}
.iahero__sub {
  position: absolute;
  left: 162px; top: 610px;
  margin: 0;
  font-family: var(--ff-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 2.05;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8B8783;
}
.iahero__link {
  position: absolute;
  left: 162px; top: 716px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 22px 46px;
  border-radius: 999px;
  font-family: var(--ff-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #2D0819;
  text-decoration: none;
  background: var(--c-neon);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 0 34px rgba(232,255,0,0.28),
    0 14px 34px rgba(0,0,0,0.45);
  overflow: hidden;
  animation: heroed-btn-float 3.2s ease-in-out infinite alternate;
  transition: transform 180ms cubic-bezier(.23,1,.32,1),
              background-color 180ms ease, color 180ms ease,
              border-color 180ms ease, box-shadow 180ms ease;
}
.iahero__link::before {
  content: "";
  position: absolute;
  top: -20%; bottom: -20%; left: -60%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-18deg);
  animation: heroed-btn-sheen 3.8s cubic-bezier(.4,0,.2,1) infinite;
}
.iahero__link:hover {
  animation: heroed-btn-pulse-ring 1.25s cubic-bezier(.4,0,.2,1) infinite;
  transform: translateY(-2px) scale(1.10);
  background: linear-gradient(135deg, rgba(245,238,224,0.97), rgba(239,230,214,0.92));
  color: var(--c-vino-deep);
  border: 2px solid var(--c-vino);
}
.iahero__girl {
  position: absolute;
  left: 1080px; top: 90px; /* v3r182: el corte abajo-de-la-rodilla coincide con el FIN de la seccion (y=1000) */
  height: 1180px; /* pies fuera de cuadro: corte a la espinilla como la ref */
  aspect-ratio: 810 / 1440; /* el video no tiene tamano intrinseco en flujo */
  margin: 0;
  pointer-events: none;
}
.iahero__girl img {
  height: 100%;
  width: auto;
  max-width: none;
  filter: brightness(0.92) contrast(1.04) saturate(0.95);
}


/* ================================================================
   V3 · IA HERO — COREOGRAFIA (typewriter + glow + entradas)
   ================================================================ */
.iahero__caret { animation: iahero-caret 1.05s steps(1) infinite; }
@keyframes iahero-caret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

.iahero__glow { animation: iahero-glow 7s ease-in-out infinite alternate; }
@keyframes iahero-glow {
  from { transform: scale(1); opacity: 0.9; }
  to   { transform: scale(1.09); opacity: 1; }
}

/* Estados previos a la entrada (solo cuando JS marcara la seccion) */
.iahero.will-animate .iahero__txt { visibility: hidden; }
.iahero.will-animate .iahero__sub,
.iahero.will-animate .iahero__link {
  opacity: 0;
  transform: translateY(16px);
}
.iahero.will-animate .iahero__girl {
  opacity: 0;
  transform: translateX(70px);
}
.iahero .iahero__sub, .iahero .iahero__link {
  transition: opacity 700ms ease, transform 700ms cubic-bezier(.22,1,.36,1);
}
.iahero .iahero__girl {
  transition: opacity 1200ms ease, transform 1200ms cubic-bezier(.22,1,.36,1);
}
.iahero.is-live .iahero__txt { visibility: visible; }
.iahero.is-live .iahero__sub,
.iahero.is-live .iahero__link {
  opacity: 1;
  transform: none;
}
.iahero.is-live .iahero__girl {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .iahero__caret, .iahero__glow { animation: none; }
  .iahero.will-animate .iahero__txt { visibility: visible; }
  .iahero.will-animate .iahero__sub,
  .iahero.will-animate .iahero__link,
  .iahero.will-animate .iahero__girl { opacity: 1; transform: none; }
}


/* ================================================================
   V3 · IMAN DE SCROLL SUAVE (proximity: solo atrae si quedas cerca
   del inicio de una seccion; scroll rapido o media-seccion = libre)
   ================================================================ */
html {
  /* snap nativo retirado (muy brusco) — el iman ahora es JS suave.
     scroll-padding se conserva para las anclas del nav. */
  scroll-padding-top: 78px;
}
#hero, #ia, #proof, #demo, #planes, #faq, #cta-final {
  scroll-snap-align: start;
}
/* Las secciones LARGAS (manifiesto sticky y arsenal) solo iman su
   inicio; su interior scrollea libre. */
#autoridad, #arsenal { scroll-snap-align: start; }


/* Ciclo IA: fundidos discretos de subtitulo y etiqueta del boton */
.iahero__sub { transition: opacity 420ms ease, transform 700ms cubic-bezier(.22,1,.36,1); }
.iahero__sub.is-fade { opacity: 0 !important; }
.iahero__btnlabel { transition: opacity 260ms ease; }
.iahero__btnlabel.is-fade { opacity: 0; }


/* Caret viajero: solido mientras escribe/borra, parpadeo en reposo */
.iahero__caret.is-typing { animation: none; opacity: 1; }


/* Video de la agente IA con canal alfa (misma geometria que la foto) */
.iahero__girlvid {
  /* Tamano FIJO (no width:auto) para que el elemento nunca haga reflow al
     cambiar de src. La figure tiene el mismo aspect-ratio, asi que
     object-fit:contain lo llena exacto sin deformar. Dos capas apiladas
     (doble buffer) para cambiar de clip sin parpadeo. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
  background: transparent !important;
  background-color: transparent !important;
  opacity: 1;
}
/* corte DURO (sin fade): las poses coinciden en el ancla, el fade solo
   fantasmeaba dos cuadros distintos. La capa oculta desaparece de golpe. */
.iahero__girlvid.is-hidden { opacity: 0; visibility: hidden; }

/* Canvas del barrido de despedida (scroll-driven). Mismo encuadre que el
   video; oculto por defecto, se muestra al empezar a salir de la seccion. */
.iahero__despedida {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.iahero__despedida.is-on { opacity: 1; visibility: visible; }
.iahero__girlvid.is-under { opacity: 0; visibility: hidden; }


/* ================================================================
   V3 · SIDE-NAV modo SOLO PUNTOS (sin nombres ni romanos por ahora).
   Se iluminan segun avanzas. Los nombres/numeros se decidiran al
   terminar la pagina.
   ================================================================ */
.side-nav { display: block !important; }
.side-nav__label { display: none !important; }          /* sin nombres */
.side-nav__dot {
  width: 7px; height: 7px;
  /* color neutro visible sobre beige Y sobre vino oscuro */
  background: rgba(140, 120, 110, 0.55);
  opacity: 1;
}
.side-nav__item.is-active .side-nav__dot {
  width: 11px; height: 11px;
  background: var(--c-neon);          /* punto activo: chartreuse */
  box-shadow: 0 0 10px rgba(232, 255, 0, 0.5);
  opacity: 1;
}
.side-nav__link:hover .side-nav__dot { background: var(--c-neon); }

/* ================================================================
   V3 · MANIFIESTO (rediseno referencia) — lienzo 1658x937, --s global
   ================================================================ */
.manif {
  position: relative;
  height: calc(937px * var(--s, 0.85));
  background:
    radial-gradient(120% 90% at 15% 40%, var(--c-halo-vino), transparent 60%),
    var(--c-noche);
  overflow: clip;
}
.manif__stage {
  position: relative;
  width: 1658px;
  height: 937px;
  transform-origin: 0 0;
  transform: scale(var(--s, 0.85));
}

/* --- Marco de video redondeado --- */
.manif__frame {
  position: absolute;
  left: 145px; top: 96px;
  width: 1478px; height: 760px;
  margin: 0;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 40px 90px rgba(0,0,0,0.45);
}
.manif__video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* leve oscurecido para que la tarjeta y el texto respiren sobre el video */
.manif__frame-shade {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(10,4,8,0.55) 0%, rgba(10,4,8,0.15) 42%, transparent 62%);
  pointer-events: none;
}

/* --- Tarjeta glass (rectangulo limpio, sin muesca) --- */
.manif__card {
  position: absolute;
  left: 178px; top: 475px;      /* ensanchada para el riel de numerales */
  width: 545px; height: 393px;
  border-radius: 20px;
  padding: 39px 41px;
  background: rgba(30, 12, 20, 0.42);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 30px 70px rgba(0,0,0,0.5);
}
.manif__eyebrow {
  display: flex; align-items: center; gap: 17px;
  margin-bottom: 29px;
}
.manif__num {
  font-family: var(--ff-display); font-weight: 700;
  font-size: 29px; line-height: 1; color: #F2EBDD;
}
.manif__eyebrow-div { width: 1px; height: 22px; background: rgba(242,235,221,0.35); }
.manif__eyebrow-label {
  font-family: var(--ff-sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.2em; color: rgba(242,235,221,0.62);
}
.manif__title {
  position: relative;
  font-family: var(--ff-display); font-weight: 700;
  font-size: 51px; line-height: 1.0; letter-spacing: -0.01em;
  color: #F5EEE2; text-transform: uppercase;
  margin: 0 0 22px;
}
.manif__underline {
  position: absolute; left: 0; bottom: -14px;
  width: 255px; height: 4px; background: var(--c-neon);
}
.manif__text {
  margin: 0 0 29px;
  font-family: var(--ff-sans); font-size: 11px; font-weight: 500;
  line-height: 1.95; letter-spacing: 0.13em;
  color: rgba(242,235,221,0.62);
  max-width: 366px;
}
.manif__link {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--ff-sans); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; color: #F2EBDD; text-decoration: none;
  transition: gap 160ms ease, color 160ms ease;
}
.manif__link span { color: var(--c-neon); }
.manif__link:hover { gap: 18px; color: var(--c-neon); }

/* --- Controles del video del manifiesto (sonido + pantalla completa) --- */
.manif__ctrls {
  position: absolute;
  right: 26px; top: 24px;      /* arriba a la derecha del marco */
  display: flex; gap: 12px;
  z-index: 3;
}
.manif__ctrl {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 999px;
  color: #F2EBDD;
  background: rgba(20, 8, 14, 0.5);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.18);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease,
              transform 160ms cubic-bezier(.23,1,.32,1), border-color 160ms ease;
}
.manif__ctrl:hover {
  transform: translateY(-2px) scale(1.06);
  background: var(--c-neon);
  color: var(--c-vino-deep);
  border-color: var(--c-neon);
}
.manif__ctrl:focus-visible { outline: 2px solid var(--c-neon); outline-offset: 3px; }
/* estados de icono: por defecto MUDO y "entrar a pantalla completa" */
.manif__ico { display: none; }
.manif__ctrl--sound .manif__ico--muted { display: block; }
.manif__ctrl--sound.is-on .manif__ico--muted { display: none; }
.manif__ctrl--sound.is-on .manif__ico--sound { display: block; }
.manif__ctrl--fs .manif__ico--enter { display: block; }
.manif__ctrl--fs.is-full .manif__ico--enter { display: none; }
.manif__ctrl--fs.is-full .manif__ico--exit { display: block; }
/* en pantalla completa el marco no recorta */
.manif__frame:fullscreen { border-radius: 0; border: 0; }
.manif__frame:fullscreen .manif__video { object-fit: contain; background: #000; }
.manif__frame:-webkit-full-screen { border-radius: 0; border: 0; }

/* --- WhatsApp: posicion por defecto mas arriba (libra los controles del
   video) y ARRASTRABLE. Si el usuario lo mueve, el JS fija left/top y
   guarda la posicion; por defecto usa right/bottom de aqui. --- */
.wa-floating {
  bottom: 96px; right: 32px;   /* posicion de origen */
  cursor: pointer;
  touch-action: none;          /* necesario para arrastrar en tactil */
  user-select: none;
  -webkit-user-drag: none;     /* mata el arrastre nativo del <a> */
}
.wa-floating.is-dragging {
  cursor: grabbing;
  transition: none !important;
  transform: scale(1.06) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}
/* Al arrastrar solo cambia la ALTURA: conserva el margen derecho */
.wa-floating.is-placed { bottom: auto; }
.wa-floating { cursor: pointer; }               /* manita normal */
.wa-floating.is-dragging { cursor: grabbing; }  /* puno al arrastrar */
@media (max-width: 768px) { .wa-floating { bottom: 96px; } }

/* El punto final del titular NO se dibuja en la capa frontal: sobre una
   cara se veia como mancha. Sigue existiendo en la capa de atras, asi que
   pasa DETRAS de las personas. */
.heroed__title--stroke .heroed__dot { opacity: 0; }

/* v3r318 — En pantalla completa mandan los controles nativos, PERO el
   boton de salir se queda: al ocultar toda la botonera no habia forma de
   volver al tamano original salvo con Escape. Ahora solo se oculta el de
   sonido (el nativo ya trae volumen) y el de pantalla completa sube por
   encima de los controles del navegador. */
.manif__frame:fullscreen .manif__ctrl--sound,
.manif__frame:-webkit-full-screen .manif__ctrl--sound { display: none; }
.manif__frame:fullscreen .manif__ctrls,
.manif__frame:-webkit-full-screen .manif__ctrls {
  display: flex;
  z-index: 2147483647;        /* por encima de la capa nativa */
  top: 22px;
  right: 22px;
}
.manif__frame:fullscreen .manif__ctrl--fs,
.manif__frame:-webkit-full-screen .manif__ctrl--fs {
  pointer-events: auto;
  background: rgba(10, 6, 8, 0.62);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.manif__frame:fullscreen .manif__frame-shade,
.manif__frame:-webkit-full-screen .manif__frame-shade { display: none; }


/* ============ Manifiesto: pestanas de numerales (v3r72) ============ */
.manif__card { display: flex; gap: 24px; }

/* Riel de numerales */
.manif__tabs {
  display: flex; flex-direction: column; justify-content: center;
  gap: 34px; flex: 0 0 46px;   /* centrados en vertical, misma separacion */
}
.manif__tab {
  appearance: none; background: none; border: 0; padding: 0;
  cursor: pointer; text-align: left; line-height: 1;
}
.manif__tabnum {
  display: inline-block;
  font-family: var(--ff-display); font-weight: 700;
  font-size: 29px; line-height: 1; color: #FFFFFF;
  opacity: 0.45; transform: scale(0.78);
  transform-origin: left center;
  transition: opacity 420ms var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)),
              transform 420ms var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1));
}
.manif__tab:hover .manif__tabnum { opacity: 0.75; }
.manif__tab.is-active .manif__tabnum { opacity: 1; transform: scale(1.12); }
.manif__tab:focus-visible { outline: 2px solid var(--c-neon); outline-offset: 4px; border-radius: 4px; }

/* Zona de contenido */
.manif__panels { position: relative; flex: 1; min-width: 0; padding-top: 4px; }
.manif__panels .manif__eyebrow-label { display: block; margin-bottom: 24px; }
.manif__panel {
  position: absolute; left: 0; right: 0; top: 38px;
  opacity: 0; pointer-events: none;
}
.manif__panel.is-active { position: relative; top: 0; opacity: 1; pointer-events: auto; }

/* La tarjeta ya no necesita el eyebrow viejo */
.manif__card .manif__title { font-size: 44px; margin-bottom: 20px; }
.manif__card .manif__text { max-width: 380px; margin-bottom: 24px; }
.manif__underline { width: 220px; }

/* Nacimiento desde el numeral: el bloque sale de la pestana, crece y se coloca.
   --oy = distancia vertical desde el numeral activo hasta el contenido. */
.manif__panel.is-entering { animation: manifPanelIn 680ms cubic-bezier(0.16,1,0.3,1) both; }
@keyframes manifPanelIn {
  from { opacity: 0; transform: translate(-34px, var(--oy, -20px)) scale(0.45); }
  to   { opacity: 1; transform: translate(0, 0) scale(1); }
}
.manif__panel { transform-origin: left top; }
/* escalonado interno: titulo primero, texto y link lo siguen */
.manif__panel.is-entering .manif__title { animation: manifRise 560ms cubic-bezier(0.16,1,0.3,1) 60ms both; }
.manif__panel.is-entering .manif__text  { animation: manifRise 560ms cubic-bezier(0.16,1,0.3,1) 180ms both; }
.manif__panel.is-entering .manif__link  { animation: manifRise 560ms cubic-bezier(0.16,1,0.3,1) 280ms both; }
@keyframes manifRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Salida: se repliega hacia su numeral, rapida y discreta */
.manif__panel.is-leaving {
  position: absolute; top: 38px; pointer-events: none;
  animation: manifPanelOut 340ms cubic-bezier(0.55,0,0.85,0.4) both;
}
@keyframes manifPanelOut {
  from { opacity: 1; transform: translate(0,0) scale(1); }
  to   { opacity: 0; transform: translate(-34px, var(--oy, -20px)) scale(0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .manif__panel.is-entering, .manif__panel.is-leaving,
  .manif__panel.is-entering .manif__title,
  .manif__panel.is-entering .manif__text,
  .manif__panel.is-entering .manif__link { animation: none; }
  .manif__panel.is-leaving { display: none; }
}


/* ============ Seccion III — Validacion operativa (v3r75) ============
   Ajuste a la referencia: titular de una sola linea en italica y cifras
   en grotesk ultraligero con linea fina debajo (la del centro, neon).
   Medidas en vw sobre el lienzo de 1658px para escalar como el poster. */
/* Ocupa la pantalla completa: nada de la seccion siguiente asoma abajo */
.proof {
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 78px 6.76vw;        /* simetrico: centra de verdad, libre de la nav */
}
.proof__inner { max-width: none; margin: 0; width: 100%; }

.proof__eyebrow { margin-bottom: clamp(28px, 3.6vw, 60px); }

.proof__statement {
  font-style: italic;
  font-size: clamp(46px, 6.75vw, 112px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  max-width: none;
  margin: 0 0 clamp(56px, 6.9vw, 115px);
}
.proof__statement em { font-style: italic; }

/* Fila de cifras: anchos naturales, repartidas a lo largo del ancho util */
.proof__grid {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: clamp(32px, 5vw, 90px);
}
.proof__metric { gap: 0; }

.proof__num {
  font-family: var(--ff-sans);
  font-weight: 300;                        /* ultraligero, como la referencia */
  font-size: clamp(64px, 8.45vw, 140px);
  line-height: 1;
  letter-spacing: -0.005em;
  padding-bottom: clamp(14px, 1.5vw, 26px);
  border-bottom: 1.5px solid rgba(74, 14, 44, 0.55);   /* linea fina vino */
  align-self: stretch;
}
/* La del centro va en neon */
.proof__metric--accent .proof__num { border-bottom-color: var(--c-neon); }
/* Fuera el subrayado macizo que tenia antes */
.proof__metric--accent .proof__num::after { content: none; }

.proof__label {
  margin-top: clamp(16px, 1.75vw, 30px);
  font-size: clamp(13px, 1.03vw, 18px);
  line-height: 1.6;
  max-width: 18.2vw;   /* corta las lineas donde la referencia */
}
@media (max-width: 900px) {
  .proof__grid { flex-direction: column; gap: 48px; }
  .proof__label { max-width: none; }
}


/* ============ Arsenal: pilares cerrados como tarjetas vino (v3r81) ============
   Referencia: 4 tarjetas redondeadas flotando sobre beige, cada una con su
   video cinematografico bajo veladura vino; numeral y nombre en crema. */
.arsenal, .arsenal__pinned { background: var(--c-beige); }

.arsenal__columns {
  padding: 84px 62px 96px;
  gap: 26px;
  box-sizing: border-box;
}
.pilar {
  border-radius: 24px;
  background: var(--c-noche);
  border: 0;
}
/* fuera cualquier divisor heredado */
.pilar + .pilar { border-left: 0; }

/* Video de fondo con veladura vino */
.pilar__bg { position: absolute; inset: 0; z-index: 0; }
.pilar__bgvid {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.7) contrast(1.02);
}
/* Veladura doble: multiply tine los blancos a vino; la capa normal unifica */
.pilar__bg::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(74, 14, 44, 0.9);
  mix-blend-mode: multiply;
  z-index: 1;              /* sobre el video: ::before pinta detras sin esto */
}
.pilar__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,6,8,0.46) 0%, rgba(10,6,8,0.34) 50%, rgba(10,6,8,0.52) 100%);
  z-index: 2;
}
/* El pilar abierto esconde su fondo (el detalle sigue siendo claro) */
.pilar.is-active .pilar__bg { opacity: 0; transition: opacity 500ms ease; }
.pilar__bg { transition: opacity 500ms ease; }

/* Numeral y nombre en crema */
.pilar__head { z-index: 2; gap: 44px; }
.pilar__roman {
  font-style: normal;
  color: #F2EBDD;
  font-weight: 700;
  text-shadow: 0 4px 30px rgba(0,0,0,0.35);
}
.pilar__title {
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: clamp(11px, 0.85vw, 14px);
  letter-spacing: 0.22em;
  color: #F2EBDD;
  text-transform: uppercase;
}
/* nombre en una sola linea, como la referencia */
.pilar__title .pilar__break { display: none; }
.pilar__title .pilar__title-line { display: inline; }
.pilar__title .pilar__title-line ~ .pilar__title-line::before { content: "\00a0"; }

/* ============ Arsenal: contenido + hover cinematografico (v3r87) ============ */

/* La seccion es UNA pantalla; manda el cursor, no el scroll */
.arsenal__track { height: 100svh; }
.arsenal__pinned { min-height: 100svh; }
/* perspectiva para que los vecinos se inclinen hacia atras */
.arsenal__columns { perspective: 1800px; }

/* --- Contenido de cada tarjeta --- */
.pilar__head { gap: 26px; width: 84%; }
.pilar__sub {
  font-family: var(--ff-sans);
  font-size: clamp(12px, 0.92vw, 16px);
  line-height: 1.6;
  letter-spacing: 0.005em;
  color: rgba(242, 235, 221, 0.78);
  margin: -8px 0 0;
}
.pilar__cta {
  display: inline-flex; align-items: center; gap: 13px;
  margin-top: 14px;
  font-family: var(--ff-sans);
  font-size: clamp(10px, 0.72vw, 13px);
  font-weight: 600; letter-spacing: 0.2em;
  color: #F2EBDD;
  transition: color 300ms ease, gap 300ms ease;
}
.pilar__cta-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.4px solid rgba(242, 235, 221, 0.55);
  padding-left: 2px;
  transition: border-color 300ms ease, background 300ms ease,
              color 300ms ease, transform 300ms ease;
}

/* --- Badge "+" (solo en la tarjeta bajo el cursor) --- */
.pilar__plus {
  position: absolute; z-index: 4;
  top: 26px; right: 26px;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-neon); color: var(--c-noche);
  font-family: var(--ff-sans); font-size: 20px; font-weight: 400;
  line-height: 0;
  opacity: 0; transform: scale(0.5) rotate(-90deg);
  transition: opacity 420ms cubic-bezier(0.16,1,0.3,1),
              transform 420ms cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
}

/* --- Linea neon al pie de la tarjeta activa --- */
.pilar::after {
  content: "";
  position: absolute; z-index: 4;
  /* 24px = EL RADIO COMPLETO. La fila inferior de la linea (d=0) toca el
     punto donde la curva es mas ancha, asi que el inset debe ser r, no el
     valor calculado a 3px de altura. Con esto la linea vive exactamente
     sobre el tramo RECTO del borde inferior, pase lo que pase con el clip. */
  left: 24px; right: 24px; bottom: 0; height: 3px;
  background: var(--c-neon);
  transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform 520ms cubic-bezier(0.16,1,0.3,1);
}

/* ================= LA COREOGRAFIA DEL CURSOR ================= */
.pilar {
  transition: transform 620ms cubic-bezier(0.16,1,0.3,1),
              filter 620ms cubic-bezier(0.16,1,0.3,1),
              box-shadow 620ms cubic-bezier(0.16,1,0.3,1);
  /* NADA de transform-style: preserve-3d — desactiva el recorte de
     overflow y las esquinas salen cuadradas mientras dura la animacion. */
  will-change: transform;            /* la capa existe ANTES de animar */
  backface-visibility: hidden;
}
.pilar__bgvid { transition: transform 900ms cubic-bezier(0.16,1,0.3,1); }

/* La tarjeta bajo el cursor: crece, se aclara y se acerca */
.arsenal__columns:hover .pilar:hover {
  transform: translateZ(70px) scale(1.045);
  z-index: 5;
  box-shadow: 0 40px 90px rgba(0,0,0,0.55);
}
.arsenal__columns:hover .pilar:hover .pilar__bg::before { opacity: 0.6; }
.arsenal__columns:hover .pilar:hover .pilar__bg::after  { opacity: 0.5; }
.arsenal__columns:hover .pilar:hover .pilar__bgvid { transform: scale(1.06); }
.arsenal__columns:hover .pilar:hover .pilar__plus { opacity: 1; transform: scale(1) rotate(0deg); }
.arsenal__columns:hover .pilar:hover::after { transform: scaleX(1); }
.arsenal__columns:hover .pilar:hover .pilar__cta { gap: 18px; color: var(--c-neon); }
.arsenal__columns:hover .pilar:hover .pilar__cta-ico {
  border-color: var(--c-neon); background: var(--c-neon);
  color: var(--c-noche); transform: scale(1.08);
}

/* Las vecinas: se apartan inclinandose y se oscurecen */
/* Las vecinas quedan INTACTAS: mismo tamano y mismo brillo que en reposo.
   Solo se inclinan un poco. El contraste lo pone la activa al aclararse,
   no las demas al apagarse. */
/* las de la IZQUIERDA giran hacia dentro; las de la DERECHA al reves */
.arsenal__columns:hover .pilar:has(~ .pilar:hover) { transform: rotateY(4deg); }
.arsenal__columns:hover .pilar:hover ~ .pilar { transform: rotateY(-4deg); }
.pilar__bg::before, .pilar__bg::after { transition: opacity 620ms cubic-bezier(0.16,1,0.3,1); }

@media (prefers-reduced-motion: reduce) {
  .pilar, .pilar__bgvid, .pilar__plus, .pilar::after { transition: none; }
  .arsenal__columns:hover .pilar:hover,
  .arsenal__columns:hover .pilar:not(:hover) { transform: none; }
}

/* Legibilidad del bloque de texto sobre el video aclarado */
.pilar__sub, .pilar__cta { text-shadow: 0 2px 16px rgba(0,0,0,0.6); }
/* La referencia no lleva etiqueta de seccion en el arsenal */
.arsenal__eyebrow { display: none; }

/* ====== Arsenal v3r89: reposo = numeral + nombre; el resto lo trae el cursor ====== */

/* Vuelve el titulo de seccion, ya sin encimar las tarjetas */
.arsenal__eyebrow { display: flex !important; top: 104px; left: 62px; }
.arsenal__columns { padding: 156px 62px 92px; }

/* El bloque revelado cuelga del head: no mueve numeral ni nombre */
.pilar__head { width: 86%; gap: 24px; }
.pilar__reveal {
  position: absolute;
  top: 100%; left: 0; right: 0;
  margin-top: 22px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  opacity: 0; transform: translateY(16px);
  pointer-events: none;
  transition: opacity 480ms cubic-bezier(0.16,1,0.3,1),
              transform 480ms cubic-bezier(0.16,1,0.3,1);
}
.pilar__sub { margin: 0; }
.pilar__cta { margin-top: 0; }

.arsenal__columns:hover .pilar:hover .pilar__reveal {
  opacity: 1; transform: translateY(0);
  transition-delay: 90ms;              /* entra despues de que la tarjeta crece */
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .pilar__reveal { transition: none; }
}

/* Redondeo tambien en las capas internas: si el recorte del padre falla
   durante la animacion (capa recien rasterizada), las esquinas aguantan. */
.pilar__bg, .pilar__bgvid,
.pilar__bg::before, .pilar__bg::after { border-radius: 24px; }
.pilar__bg { overflow: hidden; }
/* remate suave en las puntas de la linea */
.pilar::after { border-radius: 3px 3px 0 0; }

/* ==================================================================
   ARSENAL — ESTADO ABIERTO (v3r97)
   Medidas del lienzo de referencia (1658x941):
   marco 57px · tarjeta abierta 1005 · franjas 170 · separacion 14
   ================================================================== */
.arsenal__columns { padding: 156px 57px 92px; gap: 14px; }

/* ---------- La tarjeta abierta conserva su video de fondo ---------- */
.pilar.is-active { background: var(--c-noche); }
.pilar.is-active .pilar__bg { opacity: 1; }              /* NO se esconde */
.pilar.is-active .pilar__bg::before { opacity: 0.88; }   /* veladura mas densa */
.pilar.is-active .pilar__bg::after  { opacity: 0.72; }
.pilar.is-active .pilar__bgvid { transform: none; }
.pilar.is-active .pilar__reveal { display: none; }
.pilar.is-active::after { display: none; }               /* sin linea neon */

/* ---------- Cabecera: numeral · TITULO en una sola linea ---------- */
.pilar.is-active .pilar__head {
  position: absolute;
  top: 46px; left: 53px; right: 53px;
  width: auto;
  transform: none;
  display: block;
  text-align: left;
  z-index: 3;
}
.pilar.is-active .pilar__roman {
  display: inline-block; vertical-align: baseline;
  font-family: var(--ff-display); font-style: italic; font-weight: 700;
  font-size: 105px; line-height: 1; color: #F2EBDD;
}
.pilar.is-active .pilar__roman::after {
  content: "·";
  font-style: normal;
  margin: 0 0.22em 0 0.3em;
  font-size: 0.38em;
  vertical-align: 0.42em;
  opacity: 0.75;
}
.pilar.is-active .pilar__title {
  display: inline; vertical-align: baseline;
  font-family: var(--ff-display); font-weight: 700;
  font-size: 58px; line-height: 1; letter-spacing: 0.005em;
  color: #F2EBDD; text-transform: uppercase;
  text-shadow: none;
}
.pilar.is-active .pilar__title-line { display: inline; }
.pilar.is-active .pilar__title .pilar__break { display: inline; }
.pilar.is-active .pilar__title .pilar__break::before { content: "\00a0"; }

/* ---------- Cuerpo ---------- */
.pilar.is-active .pilar__detail {
  padding: 210px 46px 46px 53px;
  gap: 0;
  z-index: 3;
}
.pilar.is-active .pilar__lead {
  font-family: var(--ff-display); font-weight: 400; font-style: normal;
  font-size: 27px; line-height: 1.32; color: #F2EBDD;
  margin: 0 0 30px; max-width: 640px;
}
.pilar.is-active .pilar__lead em {
  display: block; font-style: italic; font-weight: 700;
}

/* ---------- Las 4 filas de servicio ---------- */
.pilar.is-active .pilar__list { counter-reset: srv; gap: 11px; }
.pilar.is-active .pilar__list li {
  counter-increment: srv;
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 0 0 0 34px;
  gap: 0;
  border: 1px solid rgba(242, 235, 221, 0.13);
  border-radius: 12px;
  background: rgba(242, 235, 221, 0.045);
  overflow: hidden;
  transition: background 300ms ease, border-color 300ms ease;
}
.pilar.is-active .pilar__list li:first-child { border-top: 1px solid rgba(242,235,221,0.13); }
.pilar.is-active .pilar__list li:hover {
  background: rgba(242, 235, 221, 0.085);
  border-color: rgba(242, 235, 221, 0.24);
}
/* indice 01..04 */
.pilar.is-active .pilar__list li::before {
  content: "0" counter(srv);
  font-family: var(--ff-sans); font-size: 16px; font-weight: 400;
  color: rgba(242, 235, 221, 0.5);
  flex-shrink: 0;
  margin-right: 30px;
}
.pilar.is-active .pilar__service-name {
  flex: 1;
  font-family: var(--ff-sans); font-size: 19px; font-weight: 400;
  color: #F2EBDD;
  gap: 26px;
}
/* la flecha va DESPUES del nombre */
.pilar.is-active .pilar__service-name::before { content: none; }
.pilar.is-active .pilar__service-name::after {
  content: "\2192";
  font-family: var(--ff-sans); font-weight: 400; font-size: 20px;
  color: rgba(242, 235, 221, 0.6);
  transition: transform 320ms cubic-bezier(0.16,1,0.3,1), color 320ms ease;
}
.pilar.is-active .pilar__list li:hover .pilar__service-name::after {
  color: var(--c-neon); transform: translateX(7px);
}
/* unico acento neon en reposo: la flecha de la primera fila */
.pilar.is-active .pilar__list li:first-child .pilar__service-name::after { color: var(--c-neon); }

/* miniatura de video pegada al extremo derecho, alto completo de la fila */
.pilar.is-active .pilar__service-video {
  width: 312px; height: 100%;
  aspect-ratio: auto;
  border-radius: 11px;
  align-self: stretch;
  margin-left: auto;
}

/* ---------- Boton de cierre ---------- */
.pilar__close {
  position: absolute; z-index: 6;
  top: 42px; right: 46px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 0; padding: 0;
  background: var(--c-neon); color: var(--c-noche);
  font-family: var(--ff-sans); font-size: 21px; line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center; justify-content: center;
  transition: transform 260ms cubic-bezier(0.16,1,0.3,1);
}
.pilar.is-active .pilar__close { display: flex; }
.pilar__close:hover { transform: rotate(90deg) scale(1.08); }
.pilar__close:focus-visible { outline: 2px solid #F2EBDD; outline-offset: 3px; }
.pilar.is-active .pilar__plus { display: none; }

/* ---------- Los otros tres: mismas tarjetas, comprimidas ---------- */
.arsenal__columns.has-active .pilar:not(.is-active) .pilar__reveal { display: none; }
.arsenal__columns.has-active .pilar:not(.is-active) .pilar__head {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 26px;
}
.arsenal__columns.has-active .pilar:not(.is-active) .pilar__roman {
  font-size: 76px;
}
/* el nombre gira 90 grados y se lee de abajo hacia arriba */
.arsenal__columns.has-active .pilar:not(.is-active) .pilar__title {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--ff-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.3em; white-space: nowrap;
  color: rgba(242, 235, 221, 0.82);
}
.arsenal__columns.has-active .pilar:not(.is-active) .pilar__title-line { display: inline; }
.arsenal__columns.has-active .pilar:not(.is-active) .pilar__title .pilar__break::before { content: "\00a0"; }
/* con un pilar abierto, el hover 3D descansa */
.arsenal__columns.has-active .pilar { transform: none !important; }
.arsenal__columns.has-active .pilar:hover { box-shadow: none; }

/* ---- Correcciones del estado abierto (v3r98) ---- */

/* 1) El cuerpo debe CABER: sin min-height:auto las filas no encogen */
.pilar.is-active .pilar__detail { min-height: 0; overflow: hidden; }
.pilar.is-active .pilar__list { min-height: 0; }
.pilar.is-active .pilar__list li { min-height: 0; overflow: hidden; }

/* 2) Ritmo vertical proporcional a la pantalla (lienzo 941px de alto),
      para que el contenido quepa igual en pantallas bajas */
.pilar.is-active .pilar__head { top: clamp(24px, 4.9svh, 46px); }
.pilar.is-active .pilar__roman { font-size: clamp(58px, 11.2svh, 105px); }
.pilar.is-active .pilar__title { font-size: clamp(32px, 6.2svh, 58px); }
.pilar.is-active .pilar__lead {
  font-size: clamp(17px, 2.9svh, 27px);
  margin-bottom: clamp(14px, 3.2svh, 30px);
}
.pilar.is-active .pilar__detail {
  padding: clamp(120px, 22.3svh, 210px) 46px clamp(24px, 4.9svh, 46px) 53px;
}
.pilar.is-active .pilar__list { gap: clamp(6px, 1.2svh, 11px); }
.pilar.is-active .pilar__service-video { width: clamp(190px, 18.8vw, 312px); }

/* 3) Veladura mas densa: la referencia es casi negro-vino y el texto manda */
.pilar.is-active .pilar__bg::before { opacity: 0.95; }
.pilar.is-active .pilar__bg::after  { opacity: 0.88; }

/* 4) Franjas colapsadas: numeral centrado y nombre girado justo debajo */
.arsenal__columns.has-active .pilar:not(.is-active) .pilar__head {
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}

/* ---- Afinado del estado abierto (v3r100) ---- */

/* El video de la tarjeta abierta se hunde casi a negro: asi las miniaturas
   de las filas se leen como ventanas iluminadas (es lo que hace la referencia) */
.pilar.is-active .pilar__bgvid {
  filter: brightness(0.34) saturate(0.85);
  transition: filter 700ms cubic-bezier(0.16,1,0.3,1);
}
.pilar__bgvid { filter: none; transition: filter 700ms cubic-bezier(0.16,1,0.3,1); }

/* Franjas: se centra EL NUMERAL; el nombre girado cuelga debajo sin
   arrastrar el centro del grupo */
.arsenal__columns.has-active .pilar:not(.is-active) .pilar__head {
  gap: 0;
}
.arsenal__columns.has-active .pilar:not(.is-active) .pilar__title {
  position: absolute;
  top: calc(100% + 30px);
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
}

/* v3r101: anular la regla V2 que estiraba el head de las franjas a toda la
   altura (top:0 + height:100%) y lo empujaba con margin-top desde media
   queries — por eso el numeral no quedaba centrado. */
.arsenal__columns.has-active .pilar:not(.is-active) .pilar__head {
  height: auto !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.arsenal__columns.has-active .pilar:not(.is-active) .pilar__roman {
  margin-top: 0 !important;
}

/* ====== Portada: cabe siempre en una pantalla (v3r102) ====== */
.hero--editorial {
  padding: 0;
  height: 100svh;
  overflow: clip;
}
.heroed__stage {
  /* OJO: nada de margin auto — el lienzo mide 1658px sin escalar y los
     margenes automaticos lo descentraban recortando el titular. El centrado
     (solo cuando hay que achicar) lo hace --sx. */
  margin-top: var(--hero-top, 84px);
  transform: translateX(var(--sx, 0px)) scale(var(--s, 0.85));
}

/* Botones alineados con el titular de SU escena (medido sobre el glifo) */
.heroed__btn--s1 { left: 83px; }
.heroed__btn--s2 { left: 62px; }
.heroed__btn--s3 { left: 97px; }

/* ====== Pilares mas altos: se aprovecha el aire de abajo (v3r104) ====== */
.arsenal__columns { padding-bottom: 28px; }

/* ====== Manifiesto: cabe entero + tarjeta mas discreta (v3r105) ====== */
.manif { height: calc(937px * var(--sm, var(--s, 0.85))); }
.manif__stage { transform: translateX(var(--smx, 0px)) scale(var(--sm, var(--s, 0.85))); }

/* La tarjeta baja de 545x393 a 470x345: pasa de tapar 19% del video a 14% */
.manif__card {
  left: 178px; top: 523px;
  width: 470px; height: 345px;
  padding: 33px 35px;
  border-radius: 18px;
  gap: 20px;
}
.manif__tabs { flex: 0 0 40px; gap: 28px; }
.manif__tabnum { font-size: 25px; }
.manif__panels .manif__eyebrow-label { font-size: 9.5px; margin-bottom: 20px; }
.manif__card .manif__title { font-size: 38px; margin-bottom: 17px; }
.manif__underline { width: 190px; height: 3px; bottom: -11px; }
.manif__card .manif__text {
  max-width: 330px; font-size: 10.5px; line-height: 1.85; margin-bottom: 20px;
}
.manif__link { font-size: 9.5px; }
.manif__panel { top: 32px; }
.manif__panel.is-leaving { top: 32px; }

/* ============ v3r107 — Halo de la chica sin orilla ============
   El halo medía 1350x1100 dentro de un lienzo de 1658x941: donde terminaba
   quedaba el negro plano y se veía un borde vertical que parecía un
   rectángulo detrás de ella. Ahora cubre TODO el lienzo y se desvanece
   fuera de cuadro, así no existe ninguna orilla. */
.iahero__glow {
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: radial-gradient(ellipse 125% 105% at 59% 55%,
    rgba(74, 14, 44, 0.60) 0%,
    rgba(58, 11, 34, 0.34) 38%,
    rgba(45, 8, 25, 0.14) 62%,
    transparent 85%);
}

/* ============ v3r107 — Manifiesto anclado a los márgenes reales ============
   Deja de ser un póster de medidas fijas: el marco se ancla a la derecha y
   la tarjeta a la izquierda, ambos al margen de la barra de navegación.
   El marco toma la proporción EXACTA del video, así no hay franjas ni
   recorte vertical — por eso se leen los subtítulos. */
.manif {
  height: 100svh;
  --pag: 95px;    /* mismo margen que la barra de navegación */
  --aire: 16px;   /* respiro arriba y abajo del marco */
  --nav: var(--nav-h, 78px);   /* v3r282: alto real de la barra */
}
.manif__stage {
  position: absolute; inset: 0;
  width: auto; height: auto;
  transform: none;
}

.manif__frame {
  left: auto;
  right: var(--pag);
  /* centrado en la franja LIBRE, es decir por debajo de la barra */
  top: calc(var(--nav) + (100svh - var(--nav)) / 2);
  transform: translateY(-50%);
  width: calc(min(calc(100vw - var(--pag) - var(--aire)),
                  calc((100svh - var(--nav) - 2 * var(--aire)) * 1272 / 720)) * 0.95);
  height: auto;
  /* OJO: el ARCHIVO trae franjas negras (4/8/12px por lado segun calidad;
     cropdetect da 1278x720, 2556x1440 y 3836x2160). Con la proporcion del
     contenedor (1.786) esas franjas se ven. Usando la del CONTENIDO -un pelo
     mas estrecha- + object-fit cover, se recortan exactamente. */
  aspect-ratio: 1272 / 720;
}
.manif__video { width: 100%; height: 100%; object-fit: cover; }

.manif__card {
  left: var(--pag);
  right: auto;
  top: auto;
  bottom: 12px;
  width: clamp(290px, 26vw, 470px);
  height: auto;
  min-height: clamp(250px, 24vw, 345px);
  padding: clamp(19px, 1.75vw, 33px) clamp(21px, 1.85vw, 35px);
}

/* Tipografía que se encoge con la pantalla para que nunca se encime */
.manif__tabs { flex: 0 0 clamp(26px, 2.1vw, 40px); gap: clamp(17px, 1.5vw, 28px); }
.manif__tabnum { font-size: clamp(17px, 1.35vw, 25px); }
.manif__panels .manif__eyebrow-label {
  font-size: clamp(7.5px, 0.5vw, 9.5px);
  margin-bottom: clamp(11px, 1.1vw, 20px);
}
.manif__card .manif__title {
  font-size: clamp(23px, 2vw, 38px);
  margin-bottom: clamp(10px, 0.9vw, 17px);
}
.manif__underline { width: clamp(105px, 10vw, 190px); bottom: -9px; }
.manif__card .manif__text {
  max-width: 100%;
  font-size: clamp(8.5px, 0.56vw, 10.5px);
  line-height: 1.85;
  margin-bottom: clamp(12px, 1.1vw, 20px);
}
.manif__link { font-size: clamp(8px, 0.5vw, 9.5px); }

/* Pantallas angostas: el marco arriba y la tarjeta debajo, sin encimarse */
@media (max-width: 900px) {
  .manif { height: auto; min-height: 100svh; --pag: 22px; padding: 90px 0 40px; }
  .manif__stage { position: relative; inset: auto; display: flex;
                  flex-direction: column; align-items: center; gap: 20px; }
  .manif__frame {
    position: relative; right: auto; top: auto; transform: none;
    width: calc(100vw - 2 * var(--pag));
  }
  .manif__card {
    position: relative; left: auto; bottom: auto;
    width: calc(100vw - 2 * var(--pag));
    min-height: 0;
  }
}

/* v3r109: el fondo del manifiesto y el de la chica deben ser EL MISMO.
   Antes el manifiesto llevaba su propio halo (120% 90% at 15% 40%) y se
   veia mas oscuro al pasar de una seccion a la otra. */
.manif {
  background:
    radial-gradient(ellipse 125% 105% at 59% 55%,
      rgba(74, 14, 44, 0.60) 0%,
      rgba(58, 11, 34, 0.34) 38%,
      rgba(45, 8, 25, 0.14) 62%,
      transparent 85%),
    var(--c-noche);
}

/* v3r110: marco pegado a la derecha con EL MISMO margen que arriba y abajo.
   Se calcula explicitamente en vez de centrar, para que los tres margenes
   sean identicos en cualquier pantalla. */
.manif {
  --banda: calc(100svh - var(--nav));
  --alto-marco: calc((var(--banda) - 2 * var(--aire)) * 0.95);   /* -5% */
  --margen-v: calc((var(--banda) - var(--alto-marco)) / 2);
}
.manif__frame {
  top: calc(var(--nav) + var(--margen-v));
  right: var(--margen-v);
  left: auto;
  bottom: auto;
  transform: none;
  height: var(--alto-marco);
  width: calc(var(--alto-marco) * 1272 / 720);
}
@media (max-width: 900px) {
  .manif__frame {
    position: relative; top: auto; right: auto; transform: none;
    width: calc(100vw - 2 * var(--pag)); height: auto;
  }
}

/* v3r111: la seccion de la chica tambien cabe en una pantalla.
   Recorta su aire de arriba (298px de lienzo) antes de achicar la escala,
   igual que la portada. Asi el iman la deja clavada sin desfase. */
.iahero {
  height: 100svh;
  overflow: clip;
}
.iahero__stage {
  margin-top: var(--ia-top, 0px);
  transform: translateX(var(--six, 0px)) scale(var(--si, var(--s, 0.85)));
}

/* v3r113: el desplazamiento del lienzo va por TRANSFORM, no por margin.
   `overflow: clip` NO crea contexto de formato, asi que un margin-top
   negativo COLAPSA y mueve la seccion entera en vez de mover el lienzo
   dentro de ella (el contenido quedaba exactamente igual). */
.heroed__stage {
  margin-top: 0;
  transform: translate(var(--sx, 0px), var(--hero-top, 84px)) scale(var(--s, 0.85));
}
.iahero__stage {
  margin-top: 0;
  transform: translate(var(--six, 0px), var(--ia-top, 0px)) scale(var(--si, var(--s, 0.85)));
}

/* ==================================================================
   VISOR DE SERVICIO (v3r115) — vidrio beige tipo Apple
   Recorre los 16 videos (4 pilares x 4) de forma continua.
   ================================================================== */
.visor {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  padding: 3vh 4vw;
  background: rgba(239, 230, 214, 0.72);
  -webkit-backdrop-filter: blur(34px) saturate(1.35);
  backdrop-filter: blur(34px) saturate(1.35);
  opacity: 0; pointer-events: none;
  transition: opacity 420ms cubic-bezier(0.16,1,0.3,1);
}
.visor.is-open { opacity: 1; pointer-events: auto; }

.visor__panel {
  position: relative;
  width: min(1500px, 100%);
  max-height: 94vh;
  padding: clamp(26px, 3vw, 48px) clamp(26px, 3.4vw, 56px);
  border-radius: 26px;
  background: rgba(255, 253, 248, 0.42);
  border: 1px solid rgba(74, 14, 44, 0.10);
  box-shadow: 0 40px 110px rgba(74, 14, 44, 0.16);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  transform: translateY(18px) scale(0.985);
  transition: transform 480ms cubic-bezier(0.16,1,0.3,1);
}
.visor.is-open .visor__panel { transform: none; }

/* --- Cabecera: en qué pilar estás --- */
.visor__pilar {
  display: flex; align-items: baseline; gap: 13px;
  margin: 0 0 clamp(18px, 2vw, 30px);
  color: var(--c-vino);
}
.visor__pilar-num {
  font-family: var(--ff-display); font-weight: 700; font-style: italic;
  font-size: clamp(20px, 1.6vw, 28px); line-height: 1;
}
.visor__pilar-nombre {
  font-family: var(--ff-sans); font-size: clamp(9px, 0.68vw, 11.5px);
  font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  opacity: 0.72;
}

.visor__cerrar {
  position: absolute; top: clamp(18px, 1.8vw, 30px); right: clamp(18px, 1.8vw, 30px);
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(74, 14, 44, 0.18);
  background: rgba(255, 255, 255, 0.5);
  color: var(--c-vino); font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform 300ms cubic-bezier(0.16,1,0.3,1), background 220ms ease;
}
.visor__cerrar:hover { transform: rotate(90deg); background: var(--c-vino); color: var(--c-beige); }
.visor__cerrar:focus-visible { outline: 2px solid var(--c-neon); outline-offset: 3px; }

/* --- Cuerpo: texto izquierda, video derecha --- */
.visor__cuerpo {
  display: grid;
  grid-template-columns: minmax(240px, 0.62fr) 1.38fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
.visor__texto { min-width: 0; }
.visor__titulo {
  font-family: var(--ff-sans); font-weight: 400;
  font-size: clamp(20px, 1.9vw, 34px);
  line-height: 1.2; letter-spacing: -0.005em;
  color: var(--c-vino); margin: 0 0 clamp(14px, 1.4vw, 24px);
}
.visor__regla {
  display: block; height: 1px; width: 100%;
  background: rgba(74, 14, 44, 0.35);
  position: relative; margin-bottom: clamp(16px, 1.6vw, 26px);
}
.visor__regla::after {
  content: "\2192";
  position: absolute; right: -2px; top: 50%; transform: translateY(-50%);
  font-family: var(--ff-sans); font-size: 15px; color: var(--c-neon);
  text-shadow: 0 0 1px rgba(74,14,44,0.5);
}
.visor__desc {
  font-family: var(--ff-sans); font-weight: 400;
  font-size: clamp(12px, 0.86vw, 15.5px);
  line-height: 1.72; color: rgba(74, 14, 44, 0.78);
  margin: 0; max-width: 46ch;
}

.visor__media { min-width: 0; }
.visor__marco {
  margin: 0; border-radius: 18px; overflow: hidden;
  aspect-ratio: 16 / 9; width: 100%;
  background: rgba(74, 14, 44, 0.06);
  box-shadow: 0 34px 80px rgba(74, 14, 44, 0.22);
}
.visor__video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Navegación bajo el video --- */
.visor__nav {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(18px, 2vw, 32px);
  margin-top: clamp(16px, 1.6vw, 26px);
}
.visor__flecha {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(74, 14, 44, 0.22);
  background: rgba(255, 255, 255, 0.42);
  color: var(--c-vino); font-size: 17px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 240ms ease, color 240ms ease,
              transform 300ms cubic-bezier(0.16,1,0.3,1);
}
.visor__flecha:hover { background: var(--c-vino); color: var(--c-beige); }
.visor__flecha--prev:hover { transform: translateX(-3px); }
.visor__flecha--next:hover { transform: translateX(3px); }
.visor__flecha:focus-visible { outline: 2px solid var(--c-neon); outline-offset: 3px; }
.visor__pos {
  font-family: var(--ff-sans); font-size: clamp(9.5px, 0.68vw, 11.5px);
  font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(74, 14, 44, 0.62); min-width: 132px; text-align: center;
}

/* El contenido cambia con un fundido corto al pasar de servicio */
.visor__texto, .visor__marco, .visor__pilar {
  transition: opacity 260ms ease;
}
.visor.is-cambiando .visor__texto,
.visor.is-cambiando .visor__marco,
.visor.is-cambiando .visor__pilar { opacity: 0; }

@media (max-width: 900px) {
  .visor { padding: 2vh 4vw; }
  .visor__cuerpo { grid-template-columns: 1fr; gap: 22px; }
  .visor__panel { max-height: 96vh; overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .visor, .visor__panel, .visor__texto, .visor__marco, .visor__pilar { transition: none; }
}

/* v3r117: MISMO fondo exacto en la sección de la chica y en la del video.
   Antes el halo de la chica era un elemento DENTRO del lienzo (escalado por
   --si y desplazado por --ia-top), así que su geometría no coincidía con la
   del manifiesto aunque el gradiente fuera el mismo. Ahora el gradiente vive
   en la propia sección en ambas, en porcentajes de la sección: al medir las
   dos lo mismo (100svh), el resultado es idéntico. */
.iahero,
.manif {
  background:
    radial-gradient(ellipse 125% 105% at 59% 55%,
      rgba(74, 14, 44, 0.60) 0%,
      rgba(58, 11, 34, 0.34) 38%,
      rgba(45, 8, 25, 0.14) 62%,
      transparent 85%),
    var(--c-noche);
}
/* el halo antiguo ya no pinta: lo hace la sección */
.iahero__glow { display: none; }

/* v3r118: LA COSTURA INVISIBLE.
   El halo estaba centrado al 55% de la altura. Con eso, el borde INFERIOR de
   una seccion queda a 45% del centro y el borde SUPERIOR de la siguiente a
   50%: distancias distintas => colores distintos => se ve la linea al pasar
   de una a otra.
   Centrandolo al 50% las dos orillas quedan a la MISMA distancia del centro,
   así que por simetria el final de una sección y el principio de la otra
   pintan exactamente el mismo color. La costura desaparece por construcción.
   El elipse se alarga (160%) para que la caida vertical sea mas suave. */
.iahero,
.manif {
  background:
    radial-gradient(ellipse 125% 160% at 59% 50%,
      rgba(74, 14, 44, 0.60) 0%,
      rgba(58, 11, 34, 0.34) 30%,
      rgba(45, 8, 25, 0.16) 52%,
      rgba(24, 9, 15, 0.06) 72%,
      transparent 92%),
    var(--c-noche);
}
/* el cierre tambien usaba su propio negro (#0A0A0A) en vez del tono de marca */
.cta-final { background: var(--c-noche); }

/* ==================================================================
   SECCION V — DEMO: escena por capas (v3r119)
   1 cuarto de fondo (nitido en el archivo, desenfocado AQUI)
   2 veladura de marca   3 chica con alfa, difuminada, detras
   4 barra reflejante en primer plano   5 telefono apoyado en ella
   ================================================================== */
.demo {
  height: 100svh;
  min-height: 0;
  overflow: clip;
  background:
    radial-gradient(ellipse 125% 160% at 59% 50%,
      rgba(74, 14, 44, 0.60) 0%,
      rgba(58, 11, 34, 0.34) 30%,
      rgba(45, 8, 25, 0.16) 52%,
      rgba(24, 9, 15, 0.06) 72%,
      transparent 92%),
    var(--c-noche);
}

.demo__escena { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* --- 1. El cuarto. La imagen entra NITIDA: el desenfoque se aplica aqui,
       asi lo calibramos en vivo. La escala evita que el blur deje orillas. --- */
.demo__cuarto {
  position: absolute; inset: -4%;
  background-image: var(--cuarto, none);
  background-size: cover;
  background-position: 50% 42%;
  filter: blur(var(--cuarto-blur, 7px)) saturate(0.92);
  transform: scale(1.06);
  opacity: 0.9;
}
/* mientras no exista la foto, una atmosfera provisional para poder trabajar */
.demo__cuarto::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle 220px at 17% 47%, rgba(255, 196, 120, 0.30), transparent 70%),
    radial-gradient(circle 90px at 52% 55%, rgba(255, 186, 110, 0.26), transparent 70%),
    radial-gradient(circle 70px at 61% 60%, rgba(255, 190, 118, 0.22), transparent 70%),
    radial-gradient(circle 150px at 86% 72%, rgba(255, 198, 128, 0.28), transparent 70%);
  opacity: var(--cuarto-provisional, 1);
}

/* --- 2. Veladura: mete cualquier foto en la paleta --- */
.demo__velo {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,6,8,0.94) 0%, rgba(10,6,8,0.72) 34%, rgba(10,6,8,0.42) 62%, rgba(10,6,8,0.68) 100%),
    linear-gradient(180deg, rgba(10,6,8,0.55) 0%, transparent 32%, rgba(10,6,8,0.78) 100%);
}

/* --- 3. La chica: detras del telefono y desenfocada --- */
.demo__chica {
  position: absolute;
  right: 4vw; bottom: 0;
  height: 88%;
  width: auto;
  object-fit: contain;
  background: transparent !important;
  filter: blur(var(--chica-blur, 5px)) brightness(0.86) saturate(0.95);
  opacity: 0.92;
  z-index: 1;
}

/* --- 4. La barra: cruza el primer plano, translucida y reflejante --- */
.demo__barra {
  position: absolute;
  left: -2%; right: -2%; bottom: 0;
  height: 26%;
  z-index: 2;
  background:
    linear-gradient(180deg,
      rgba(255, 236, 210, 0.11) 0px,
      rgba(255, 236, 210, 0.05) 2px,
      rgba(18, 9, 13, 0.55) 3px,
      rgba(12, 7, 10, 0.86) 40%,
      rgba(10, 6, 8, 0.97) 100%);
  -webkit-backdrop-filter: blur(3px) saturate(1.1);
  backdrop-filter: blur(3px) saturate(1.1);
  box-shadow: 0 -1px 0 rgba(255, 236, 210, 0.16);
}

/* --- 5. El telefono se apoya en la barra y se refleja en ella --- */
.demo__stage { position: relative; z-index: 3; }
.demo__phone-col { position: relative; z-index: 3; }
.iphone-17 {
  /* reflejo retirado (mockup CSS ya no se usa) */
}

/* Textos por encima de la escena */
.demo__texts, .demo__eyebrow { position: relative; z-index: 4; }
.demo__title, .demo__lead { color: var(--c-beige-claro); }
.demo__eyebrow .demo__index, .demo__eyebrow .demo__label { color: var(--c-beige-claro); }

@media (prefers-reduced-motion: reduce) { .demo__chica { filter: blur(5px); } }

/* v3r120: la foto del cuarto ya existe. Viene con desenfoque OPTICO propio
   (se fotografio a f/1.4), asi que el desenfoque de codigo es minimo: solo
   suaviza el grano al escalar. */
.demo {
  --cuarto: image-set(
    url("../images/demo-habitacion-2x.webp") 1x,
    url("../images/demo-habitacion-4k.webp") 2x);
  --cuarto-blur: 2px;
  --cuarto-provisional: 0;   /* fuera la atmosfera de relleno */
}
@media (max-width: 900px) {
  .demo { --cuarto: url("../images/demo-habitacion-1x.webp"); }
}

/* ============ DEMO: composición según la referencia (v3r121) ============
   Medidas leídas del póster de referencia (1672x941):
   textos x=128, titular 265→540 (~66px), lead 590, CTA 700→748
   teléfono centrado en x≈880, alto casi completo
   chica a la derecha, difuminada, señalando hacia el teléfono
   barra reflejante desde y≈830 */
.demo__stage {
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.18fr) minmax(0, 0.8fr);
  align-items: center;
  padding: 0 5.4vw 0 7.6vw;
}

/* --- Textos --- */
.demo__texts { gap: clamp(18px, 2vw, 34px); }
.demo__title {
  font-size: clamp(30px, 3.95vw, 68px);
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: var(--c-beige-claro);
  max-width: 13ch;
}
.demo__title em {
  font-style: italic;
  font-weight: 900;
}
/* "3:00 AM." es el único acento neón de la vista */
.demo__title .demo__hora { color: var(--c-neon); font-style: italic; }

.demo__lead {
  font-size: clamp(13px, 1.02vw, 17.5px);
  line-height: 1.75;
  font-weight: 400;
  color: rgba(242, 235, 221, 0.86);
  max-width: 34ch;
}
.demo__lead .mark-editorial {
  background: var(--c-vino);
  color: var(--c-beige-claro);
  padding: 0.16em 0.5em;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.demo__cta {
  font-size: clamp(10px, 0.74vw, 12.5px);
  padding: clamp(13px, 1.15vw, 19px) clamp(22px, 2vw, 34px);
  border-radius: 999px;
  box-shadow: 0 0 34px rgba(232, 255, 0, 0.28);
}
.demo__cta:hover { box-shadow: 0 0 46px rgba(232, 255, 0, 0.42); }

/* --- Teléfono: apoyado en la barra, ligeramente sobre ella --- */
.demo__phone-col {
  display: flex; align-items: flex-end; justify-content: center;
  height: 100%;
  padding-bottom: 15.5%;   /* la barra empieza en 26%: se apoya encima */
}
.iphone-17 {
  width: clamp(230px, 20.5vw, 355px);
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.62));
}

/* --- La chica: a la derecha, señalando hacia el teléfono --- */
.demo__chica {
  right: 2.5vw;
  bottom: 8%;
  height: 82%;
}

/* El CTA duplicado de móvil no aplica en escritorio */
.demo__cta--mobile { display: none; }
@media (max-width: 900px) {
  .demo__stage { grid-template-columns: 1fr; padding: 0 6vw; }
  .demo__chica { opacity: 0.5; right: -6vw; }
  .demo__cta--mobile { display: inline-flex; }
}

/* ============ DEMO: ajuste fino contra la referencia (v3r122) ============ */

/* El eyebrow caia DEBAJO de la barra de navegacion (top:40 < nav 78) */
.demo__eyebrow { top: 104px; left: 7.6vw; }
.demo__index { font-family: var(--ff-display); font-style: italic; font-weight: 700; }

/* Titular: en la referencia son 4 lineas, no 6 */
.demo__title {
  max-width: 16.5ch;
  font-size: clamp(28px, 3.55vw, 62px);
  line-height: 1.1;
}

/* El lead no debe partir el resaltado en dos lineas */
.demo__lead { max-width: 40ch; }
.demo__lead .mark-editorial { white-space: nowrap; }

/* La barra: en la referencia empieza al 88% del alto, no al 74%, y su
   canto superior es suave, no una linea dura */
.demo__barra {
  height: 15%;
  background:
    linear-gradient(180deg,
      rgba(255, 236, 210, 0.055) 0px,
      rgba(255, 236, 210, 0.02) 1.5px,
      rgba(16, 9, 12, 0.35) 4px,
      rgba(12, 7, 10, 0.78) 34%,
      rgba(10, 6, 8, 0.96) 100%);
  box-shadow: 0 -1px 0 rgba(255, 236, 210, 0.10),
              0 -18px 34px rgba(10, 6, 8, 0.55);
}

/* La chica: mas chica, mas a la derecha y mas abajo, como en la referencia */
.demo__chica {
  right: -1vw;
  bottom: 9%;
  height: 68%;
  filter: blur(var(--chica-blur, 6px)) brightness(0.8) saturate(0.92);
  opacity: 0.88;
}

/* El cuarto: en la referencia apenas se adivina; que no compita con el texto */
.demo__velo {
  background:
    linear-gradient(90deg, rgba(10,6,8,0.97) 0%, rgba(10,6,8,0.88) 30%, rgba(10,6,8,0.62) 58%, rgba(10,6,8,0.80) 100%),
    linear-gradient(180deg, rgba(10,6,8,0.70) 0%, rgba(10,6,8,0.20) 34%, rgba(10,6,8,0.86) 100%);
}
.demo__cuarto { opacity: 0.82; }

/* El telefono se apoya justo sobre el canto de la barra */
.demo__phone-col { padding-bottom: 9%; }

/* v3r124: la chica, medida sobre la referencia (1672x941).
   Ocupa de y=105 a y=830 (77% del alto) con su centro en x=79%.
   El video es 2160x3840, asi que su ancho sale solo del alto. */
.demo__chica {
  height: 77%;
  bottom: 11.8%;
  right: 9%;
  filter: blur(var(--chica-blur, 6.5px)) brightness(0.82) saturate(0.9);
  opacity: 0.9;
}
@media (max-width: 900px) {
  .demo__chica { right: -8%; height: 60%; opacity: 0.42; }
}

/* v3r125: en la referencia la chica esta ILUMINADA (destaca del cuarto), no
   apagada. Subo brillo y bajo un punto el desenfoque para que se le lea la
   cara, que es lo que da vida a la escena. */
.demo__chica {
  filter: blur(5.5px) brightness(1.02) saturate(0.98) contrast(1.02);
  opacity: 0.96;
}

/* ============ DEMO: igualar la referencia píxel a píxel (v3r126) ============
   Medidas sobre el póster (1672x941):
   chica  cabeza y=150 (16%), corte a media pierna y=830 (88%), centro x=81%
   telefono x=700..1060, y=105..835, INCLINADO en 3D
   mesa    de y=835 al borde inferior, con el reflejo del telefono */

/* --- CHICA: mucho mas cerca. Se ve de la cabeza a media pierna, no de
       cuerpo entero: el video mide 120% del alto y se recorta abajo. --- */
.demo__chica {
  top: 10%;
  bottom: auto;
  height: 120%;
  right: 3%;
  filter: blur(5px) brightness(1.05) saturate(1) contrast(1.03);
  opacity: 0.97;
}

/* --- TELEFONO: en la referencia esta girado, no de frente --- */
.demo__phone-col { perspective: 1500px; perspective-origin: 60% 50%; }
.iphone-17 {
  width: clamp(250px, 22.5vw, 390px);
  transform: rotateY(-13deg) rotateZ(-1.6deg);
  transform-origin: 50% 100%;
  filter: drop-shadow(-18px 26px 44px rgba(0, 0, 0, 0.7));
}

/* --- MESA: mas presente, con brillo de canto como en la referencia --- */
.demo__barra {
  height: 13%;
  background:
    linear-gradient(180deg,
      rgba(255, 240, 218, 0.10) 0px,
      rgba(255, 240, 218, 0.035) 2px,
      rgba(22, 13, 17, 0.42) 5px,
      rgba(14, 8, 11, 0.80) 38%,
      rgba(10, 6, 8, 0.97) 100%);
  box-shadow: 0 -1px 0 rgba(255, 240, 218, 0.14),
              0 -22px 40px rgba(10, 6, 8, 0.5);
}

/* --- La hora dentro de cada burbuja, como en la referencia --- */
.chat-bubble__hora {
  display: block;
  margin-top: 3px;
  font-size: 8.5px;
  line-height: 1;
  opacity: 0.55;
  text-align: right;
  letter-spacing: 0.01em;
}
.chat-phone__mas {
  font-size: 15px; line-height: 1;
  opacity: 0.5; margin-right: 6px; flex-shrink: 0;
}

/* ==================================================================
   DEMO — CAPAS INDEPENDIENTES (v3r127)
   Orden de profundidad, del fondo al frente, con su propio control:

     z 0  .demo__cuarto  habitación   -> --cuarto-blur
     z 1  .demo__velo    veladura de marca (sin desenfoque propio)
     z 2  .demo__chica   la chica     -> --chica-blur
     z 3  .demo__barra   línea de mesa
     z 4  .iphone-17     teléfono (nítido, nunca lleva desenfoque)

   PARA CALIBRAR solo se tocan estas dos variables. Cada capa lee la suya,
   así que se pueden mover por separado sin afectar a la otra.
   ================================================================== */
.demo {
  --cuarto-blur: 2px;    /* fondo: la foto ya trae desenfoque óptico propio */
  --chica-blur: 5px;     /* chica: ligero, para que se lea que está detrás */
}

.demo__cuarto {
  z-index: 0;
  filter: blur(var(--cuarto-blur)) saturate(0.92);
}
.demo__velo  { z-index: 1; }
.demo__chica {
  z-index: 2;
  filter: blur(var(--chica-blur)) brightness(1.05) saturate(1) contrast(1.03);
}
.demo__barra { z-index: 3; }
.demo__stage, .demo__phone-col { z-index: 4; }
.iphone-17 { filter: drop-shadow(-18px 26px 44px rgba(0, 0, 0, 0.7)); }

/* v3r128: menos desenfoque en la chica y giro del telefono INVERTIDO
   (estaba girado hacia el lado contrario al de la referencia). */
.demo { --chica-blur: 2.5px; }

.iphone-17 {
  transform: rotateY(13deg) rotateZ(1.6deg);
  filter: drop-shadow(18px 26px 44px rgba(0, 0, 0, 0.7));
}
.demo__phone-col { perspective-origin: 40% 50%; }

/* ==================================================================
   DEMO v3r129 — tres correcciones
   1) TELEFONO: releyendo la referencia, NO esta girado sobre su eje
      vertical. Sus bordes izquierdo y derecho miden lo mismo (683px los
      dos), asi que no hay giro en Y; lo que tiene es una LEVE inclinacion
      antihoraria (el borde superior sube hacia la derecha ~4 grados) y algo
      de perspectiva por estar apoyado en la mesa. Se sustituye el giro de
      13 grados por eso.
   2) BARRA: solida, para que no se le vean las piernas por detras.
   3) Chica a 1.5px de desenfoque.
   ================================================================== */
.demo { --chica-blur: 1.5px; }

.demo__phone-col { perspective: 2200px; perspective-origin: 50% 42%; }
.iphone-17 {
  transform: rotateZ(-4deg) rotateX(4deg);
  transform-origin: 50% 92%;
  filter: drop-shadow(10px 30px 46px rgba(0, 0, 0, 0.72));
}

/* Mesa SOLIDA: nada de translucidez ni backdrop-filter, o se transparentan
   las piernas. El reflejo del telefono se dibuja por encima (z superior). */
.demo__barra {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background:
    linear-gradient(180deg,
      #241a1e 0px,
      #1a1216 2px,
      #150e12 5px,
      #100a0d 40%,
      #0A0608 100%);
  box-shadow: 0 -1px 0 rgba(255, 240, 218, 0.16),
              0 -26px 46px rgba(10, 6, 8, 0.6);
}

/* ==================================================================
   DEMO v3r130 — releyendo la referencia punto por punto
   1) FONDO: la foto ya trae su desenfoque optico -> 0px de blur digital.
   2) CHICA: mas grande y mas al frente (la corta la mesa, no el aire).
   3) TELEFONO: perspectiva real — se ve su bisel izquierdo (rotateY
      positivo), leve inclinacion horaria y visto un poco desde arriba.
   4) MESA: superficie de marmol EN PERSPECTIVA, no una linea recta:
      el canto sube ligeramente hacia la derecha (clip-path), con vetas
      claras diagonales y brillo bajo el telefono.
   ================================================================== */
.demo {
  --cuarto-blur: 0px;
  --chica-blur: 1.5px;
}

/* --- chica: mas cerca y mas presente --- */
.demo__chica {
  top: 5%;
  height: 132%;
  right: 0.5%;
  opacity: 1;
}

/* --- telefono: perspectiva como en la referencia --- */
.demo__phone-col { perspective: 1300px; perspective-origin: 30% 45%; }
.iphone-17 {
  transform: rotateY(14deg) rotateX(3.5deg) rotateZ(2deg);
  transform-origin: 50% 90%;
  filter: drop-shadow(-14px 30px 42px rgba(0, 0, 0, 0.75));
}

/* --- mesa de marmol en perspectiva --- */
.demo__barra {
  height: 17%;
  /* canto en diagonal: arriba-izquierda mas bajo, sube hacia la derecha */
  clip-path: polygon(0 3.2%, 100% 0, 100% 100%, 0 100%);
  background:
    /* brillo especular bajo el telefono */
    radial-gradient(ellipse 42% 60% at 55% 0%, rgba(255, 238, 214, 0.10), transparent 70%),
    /* vetas de marmol, diagonales y suaves */
    linear-gradient(107deg, transparent 22%, rgba(236, 222, 204, 0.045) 23.2%, transparent 24.6%),
    linear-gradient(102deg, transparent 38%, rgba(236, 222, 204, 0.03) 39.4%, transparent 41%),
    linear-gradient(111deg, transparent 58%, rgba(236, 222, 204, 0.05) 59%, transparent 60.8%),
    linear-gradient(99deg,  transparent 76%, rgba(236, 222, 204, 0.028) 77.2%, transparent 79%),
    /* cuerpo de la piedra */
    linear-gradient(180deg, #2b2025 0px, #201619 8%, #171013 34%, #100a0d 68%, #0A0608 100%);
  box-shadow: 0 -1px 0 rgba(255, 240, 218, 0.18);
}

/* v3r131: dos afinados contra la referencia.
   1) El telefono se inclina al reves: en la referencia su parte alta cae
      hacia la IZQUIERDA. rotateZ 2 -> -2.5.
   2) El lado de la chica es mas CALIDO y luminoso: la veladura afloja a la
      derecha para dejar respirar las luces del cuarto. La izquierda se queda
      oscura, que es la que sostiene el texto. */
.iphone-17 { transform: rotateY(14deg) rotateX(3.5deg) rotateZ(-2.5deg); }

.demo__velo {
  background:
    linear-gradient(90deg, rgba(10,6,8,0.97) 0%, rgba(10,6,8,0.86) 30%, rgba(10,6,8,0.44) 58%, rgba(10,6,8,0.30) 78%, rgba(10,6,8,0.52) 100%),
    linear-gradient(180deg, rgba(10,6,8,0.62) 0%, rgba(10,6,8,0.12) 34%, rgba(10,6,8,0.72) 100%);
}

/* v3r132: la chica baja un 10% en la escena (top 5% -> 15%) */
.demo__chica { top: 15%; }

/* v3r133: la chica MAS CERCA, como en la referencia (encuadre a medio
   muslo, hombro rozando el borde derecho). */
.demo__chica {
  height: 158%;
  top: 8%;
  right: -4%;
}

/* ==================================================================
   DEMO v3r134 — LA ESCENA ES LA FOTO (iPhone real + mesa de marmol)
   La foto (2752x1536) trae el cuarto, la mesa y el iPhone con pantalla
   verde. El JS mapea el chat sobre el hueco verde con una homografia y
   recorta a la chica con la linea REAL de la mesa. Medidas de la foto:
     pantalla: TL(1250,211) TR(1585,243) BR(1620,1233) BL(1274,1248)
     mesa:     y = 1304 - 0.0362x   (px de la foto)
   ================================================================== */

/* La foto sustituye al cuarto pintado y a la barra de CSS */
.demo__cuarto {
  background-image: image-set(
    url("../images/demo-escena-2x.webp") 1x,
    url("../images/demo-escena-4k.webp") 2x);
  background-size: cover;
  background-position: 50% 50%;
  filter: none;
  transform: none;
  inset: 0;
  opacity: 1;
}
.demo__cuarto::after { content: none; }
.demo__barra { display: none; }          /* la mesa ya viene en la foto */

/* Veladura minima: solo protege el texto a la izquierda */
.demo__velo {
  background:
    linear-gradient(90deg, rgba(10,6,8,0.88) 0%, rgba(10,6,8,0.55) 26%, rgba(10,6,8,0.10) 46%, transparent 60%);
}

/* La chica: entre el cuarto y la mesa. El JS le pone el clip-path con la
   linea real del marmol para que la mesa la corte. */
.demo__chica { z-index: 1; }

/* La columna del telefono ya no reserva espacio: la foto manda */
.demo__phone-col {
  position: absolute; inset: 0;
  padding: 0; perspective: none;
  pointer-events: none;
  z-index: 2;
}

/* La pantalla: el JS le da left/top/width/height + el chat se transforma */
.demo__pantalla {
  position: absolute;
  /* (el reflejo vive en el .chat-phone; Chrome no acepta 'none' aqui,
     asi que la declaracion vieja se ELIMINA en vez de anularse) */
}
.demo__pantalla .chat-phone {
  position: absolute; left: 0; top: 0;
  width: 352px; height: 760px;           /* lienzo base; la matriz lo deforma */
  transform-origin: 0 0;
  border-radius: 18px;
  overflow: hidden;
  background: #F5EEE2;
}

/* los textos siguen encima de todo */
.demo__texts, .demo__eyebrow { z-index: 4; }

/* v3r140 — esquinas y reflejo del chat
   ESQUINAS: la proyeccion deforma el lienzo base (352x760) de forma
   anisotropa (sx≈1.07, sy≈1.39 hacia px de foto). Para que la esquina se
   vea CIRCULAR como la del iPhone (radio ≈55px de foto), el radio base va
   eliptico compensando: rx = 55/1.07 ≈ 52, ry = 55/1.39 ≈ 40.
   REFLEJO: se muda del wrapper AL PROPIO CHAT. Al espejarse ANTES de la
   proyeccion, el espejo ocurre sobre el borde inferior LOCAL del chat, y la
   homografia lo proyecta con la MISMA perspectiva del telefono: el reflejo
   sale de la base inclinada, no de una linea horizontal ajena. */
.demo__pantalla { -webkit-box-reflect: none; }
.demo__pantalla .chat-phone {
  border-radius: 52px / 40px;
  /* reflejo retirado (vive en la regla final) */
}

/* ==================================================================
   DEMO v3r142 — escena elevada + un solo reflejo + chica nítida
   La foto deja de ser background: es un <img> que coloca EL MISMO JS
   del mapeo (una sola fuente de verdad: foto, hueco del chat y línea
   de la mesa se mueven juntos, siempre en sincronía).
   ================================================================== */
.demo__cuarto { background-image: none !important; }
.demo__foto {
  position: absolute;
  will-change: left, top, width, height;
}

/* Chica: NITIDA (sin desenfoque) y más a la derecha para que su brazo
   extendido no cruce por delante del teléfono */
.demo { --chica-blur: 0px; }
.demo__chica {
  right: -9%;
  filter: brightness(1.05) saturate(1) contrast(1.03);
}

/* Reflejo: UNO solo, el del chat proyectado, y con un hueco inicial que
   salta el mentón del teléfono para nacer en la mesa, no encima del bisel */
.demo__pantalla { -webkit-box-reflect: none !important; }
.demo__pantalla .chat-phone {
  /* reflejo retirado (vive en la regla final) */
}

/* v3r145 — LA CAUSA RAIZ del descuadre del chat: el reset global
   img { max-width:100% } capaba el ANCHO de la foto (a lo ancho de la
   seccion) mientras el alto fijado por JS quedaba intacto => la foto se
   ESTIRABA en vertical y todo el mapeo (hueco del chat, linea de mesa)
   quedaba corto en Y. El verde "fantasma" bajo el chat era eso. */
.demo__foto { max-width: none; max-height: none; }

/* v3r148 — UN solo reflejo, corto y pegado a la base.
   El "segundo reflejo" era el mismo box-reflect: la mascara dejaba pasar un
   12% de opacidad a lo largo de MEDIO reflejo (68%..98%), asi que ademas de
   la franja junto a la base se veia una losa beige fantasma mas abajo.
   Ahora la mascara solo revela el ultimo 15% (la zona pegada al telefono,
   porque en un reflejo "below" el extremo INFERIOR del gradiente es el mas
   cercano al elemento) y muere rapido. */
.demo__pantalla .chat-phone {
  -webkit-box-reflect: below 10px
    linear-gradient(transparent 85%, rgba(255, 255, 255, 0.16) 100%);
}

/* ==================================================================
   SECCION VI — PLANES (v3r152): réplica de la referencia aprobada.
   Noche de marca + resplandor magenta arriba-centro, tres tarjetas de
   vidrio, la central elevada con borde/CTA neón y su insignia.
   Medidas sobre el póster (1672x941): título y=95..160, tarjetas
   laterales y=270..880 (~355 ancho), central y=225..905.
   ================================================================== */
.planes {
  background:
    radial-gradient(ellipse 62% 55% at 50% -8%,
      rgba(212, 61, 126, 0.42) 0%,
      rgba(150, 36, 84, 0.25) 38%,
      rgba(74, 14, 44, 0.10) 65%,
      transparent 82%),
    radial-gradient(ellipse 120% 70% at 50% 118%,
      rgba(74, 14, 44, 0.35), transparent 70%),
    var(--c-noche);
  min-height: 100svh;
  padding: 120px 5vw 64px;
  display: flex; flex-direction: column; justify-content: center;
}

/* la referencia no lleva la etiqueta de sección */
.planes__eyebrow { display: none; }

.planes__title {
  color: var(--c-beige-claro);
  font-size: clamp(38px, 4vw, 68px);
  text-align: center;
}
.planes__title em { font-style: italic; }
.planes__lead {
  color: rgba(242, 235, 221, 0.72);
  text-align: center;
  font-size: clamp(13px, 1.05vw, 18px);
}
.planes__header { margin-bottom: clamp(28px, 3.6vw, 62px); }

/* ---- tarjetas de vidrio ---- */
.planes__grid {
  align-items: center;
  gap: clamp(18px, 2.2vw, 38px);
  max-width: 1180px;
  margin: 0 auto;
}
.plan {
  background: linear-gradient(168deg,
    rgba(122, 62, 87, 0.30) 0%,
    rgba(58, 22, 38, 0.44) 48%,
    rgba(30, 11, 20, 0.55) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  border: 1px solid rgba(255, 226, 238, 0.16);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 244, 0.12),
    0 30px 70px rgba(0, 0, 0, 0.45);
  /* v3r241: eran para neutralizar una entrada del diseño V2; con !important
     bloqueaban TODA animacion posterior de la tarjeta (por eso solo se podia
     animar .plan__inner y el recuadro se quedaba fijo). El armado actual ya
     define opacidad y transform, asi que sobran. */
}
.plan--featured {
  border: 1.5px solid rgba(214, 225, 82, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 244, 0.14),
    0 0 44px rgba(232, 255, 0, 0.10),
    0 34px 80px rgba(0, 0, 0, 0.5);
  /* elevada: sobresale por arriba y por abajo */
  margin: -34px 0;
}

.plan__tag {
  color: var(--c-neon);
  letter-spacing: 0.3em;
  font-size: 11px;
}
.plan__name {
  font-family: var(--ff-display);
  color: var(--c-beige-claro);
  font-size: clamp(30px, 2.6vw, 46px);
  text-transform: uppercase;
}
.plan__price-num {
  font-family: var(--ff-display);
  color: var(--c-beige-claro);
  font-size: clamp(26px, 2.2vw, 38px);
}
.plan__price-meta { color: rgba(242, 235, 221, 0.6); letter-spacing: 0.18em; }
.plan__subtitle { color: rgba(242, 235, 221, 0.78); }
.plan__divider { background: rgba(242, 235, 221, 0.22); }
.plan__list li { color: rgba(242, 235, 221, 0.88); }
.plan__marker-dot, .plan__marker-arrow { color: var(--c-neon); }

/* CTAs: laterales crema, central neón */
.plan__cta {
  background: var(--c-beige-claro);
  color: var(--c-vino);
  border-radius: 999px;
  border: 0;
  transition: transform 240ms cubic-bezier(0.16,1,0.3,1), box-shadow 240ms ease;
}
.plan__cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.4); }
.plan--featured .plan__cta {
  background: var(--c-neon);
  color: var(--c-vino);
  box-shadow: 0 0 30px rgba(232, 255, 0, 0.25);
}
.plan--featured .plan__cta:hover { box-shadow: 0 0 44px rgba(232, 255, 0, 0.4); }

.plan__badge {
  background: var(--c-neon);
  color: var(--c-vino);
  border-radius: 999px;
  letter-spacing: 0.22em;
}

/* v3r153 — Planes: el SUELO y los reflejos de las tarjetas (referencia).
   Las tarjetas se reflejan en un piso pulido: espejo corto que muere rapido
   (en un reflejo "below" el extremo INFERIOR del gradiente es el pegado al
   elemento). El fondo gana un piso con brillo magenta tenue y vineta. */
.plan {
  -webkit-box-reflect: below 8px
    linear-gradient(transparent 72%, rgba(255, 255, 255, 0.085) 100%);
}
.plan--featured {
  -webkit-box-reflect: below 8px
    linear-gradient(transparent 72%, rgba(255, 255, 255, 0.11) 100%);
}

.planes {
  background:
    /* resplandor magenta del cielo */
    radial-gradient(ellipse 62% 55% at 50% -8%,
      rgba(212, 61, 126, 0.42) 0%,
      rgba(150, 36, 84, 0.25) 38%,
      rgba(74, 14, 44, 0.10) 65%,
      transparent 82%),
    /* brillo del piso: la luz magenta rebotando abajo al centro */
    radial-gradient(ellipse 55% 22% at 50% 101%,
      rgba(190, 52, 110, 0.20) 0%,
      rgba(120, 28, 66, 0.10) 55%,
      transparent 80%),
    /* vineta lateral que hunde las esquinas */
    radial-gradient(ellipse 130% 90% at 50% 55%,
      transparent 55%, rgba(0, 0, 0, 0.35) 100%),
    var(--c-noche);
}
/* linea de horizonte del piso, apenas insinuada bajo las tarjetas */
.planes__grid { position: relative; }
.planes__grid::after {
  content: "";
  position: absolute;
  left: -6%; right: -6%;
  bottom: -46px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255, 222, 238, 0.10) 30%,
    rgba(255, 222, 238, 0.14) 50%,
    rgba(255, 222, 238, 0.10) 70%, transparent 100%);
  pointer-events: none;
}

/* v3r154 — Planes: fuera la linea de horizonte + coreografia de entrada.
   El lenguaje de la pagina: las cosas NACEN de su origen. Aqui las tarjetas
   suben desde el piso (donde viven sus reflejos) con la central al frente,
   y las laterales la flanquean despues. El JS arma (.is-armado) y dispara
   (.is-in) por posicion, nunca por IntersectionObserver a solas. */
.planes__grid::after { content: none; }

/* OJO: el estado oculto se aplica SIN transicion (si no, el armado produce
   un desvanecimiento 1->0 visible; y en pestanas de fondo Chrome congela esa
   transicion a medias y el estado inicial queda corrupto). La transicion se
   declara SOLO en el estado .is-in: anima la entrada y nada mas. */
.planes.is-armado .planes__header { opacity: 0; transform: translateY(26px); }
.planes.is-armado .plan__inner { opacity: 0; transform: translateY(52px); }
.planes.is-armado .plan__badge { opacity: 0; transform: translateY(8px) scale(0.7); }
.planes.is-armado.is-in .planes__header {
  transition: opacity 700ms cubic-bezier(0.16,1,0.3,1),
              transform 700ms cubic-bezier(0.16,1,0.3,1);
}
.planes.is-armado.is-in .plan__inner {
  transition: opacity 760ms cubic-bezier(0.16,1,0.3,1),
              transform 760ms cubic-bezier(0.16,1,0.3,1);
}
.planes.is-armado.is-in .plan__badge {
  transition: opacity 420ms cubic-bezier(0.16,1,0.3,1),
              transform 420ms cubic-bezier(0.34,1.56,0.64,1);
}
/* orden: titulo -> central -> izquierda -> derecha -> insignia */
.planes.is-armado.is-in .plan--featured .plan__inner { transition-delay: 140ms; }
.planes.is-armado.is-in .plan[data-plan="1"] .plan__inner { transition-delay: 300ms; }
.planes.is-armado.is-in .plan[data-plan="3"] .plan__inner { transition-delay: 440ms; }
.planes.is-armado.is-in .plan__badge { transition-delay: 780ms; }

.planes.is-armado.is-in .planes__header,
.planes.is-armado.is-in .plan__inner { opacity: 1; transform: translateY(0); }
.planes.is-armado.is-in .plan__badge { opacity: 1; transform: translateY(0) scale(1); }

/* la elegida respira: su halo neon sube y baja MUY sutil */
@keyframes planAliento {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,236,244,0.14),
             0 0 44px rgba(232,255,0,0.10), 0 34px 80px rgba(0,0,0,0.5); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,236,244,0.14),
             0 0 62px rgba(232,255,0,0.17), 0 34px 80px rgba(0,0,0,0.5); }
}


@media (prefers-reduced-motion: reduce) {
  .planes.is-armado .planes__header,
  .planes.is-armado .plan__inner,
  .planes.is-armado .plan__badge { opacity: 1; transform: none; transition: none; }
  .planes.is-in .plan--featured { animation: none; }
}

/* v3r156 — la linea de acento del titulo de planes: era un highlight beige
   de la V2 (texto oscuro sobre claro) que en la seccion nocturna quedaba
   CRUZANDO el texto crema como un tachado. Ahora es el subrayado NEON de la
   casa: fino, POR DEBAJO de la italica, mismo gesto que el hero. */
.planes__title em::after {
  background: var(--c-neon);
  height: 4px;
  bottom: -0.12em;
  z-index: 0;
  border-radius: 2px;
}

/* ==================================================================
   SECCION VII — FAQ (v3r158): réplica de la referencia.
   Fondo crema; cada pregunta es una TARJETA blanca flotante con
   esquinas redondeadas, sombra suave y el "+" en circulo delineado.
   ================================================================== */
.faq { background: var(--c-beige); }

.faq__title { color: var(--c-vino); }
.faq__title em::after { content: none; }   /* la referencia no lleva subrayado */
.faq__lead { color: rgba(74, 14, 44, 0.55); }

.faq__list { border-top: 0; max-width: 1040px; }

.faq-item {
  border-bottom: 0;
  background: #FFFEFB;
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 10px 30px rgba(74, 14, 44, 0.07),
    0 2px 8px rgba(74, 14, 44, 0.05);
  margin-bottom: 22px;
  transition: box-shadow 320ms ease, transform 320ms cubic-bezier(0.16,1,0.3,1);
}
.faq-item:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 16px 40px rgba(74, 14, 44, 0.11),
    0 3px 10px rgba(74, 14, 44, 0.06);
  transform: translateY(-2px);
}

.faq-item__question { padding: 26px 30px; }
.faq-item__text {
  font-weight: 500;   /* la referencia usa serif medio, no bold pesado */
}

/* el "+": circulo delineado fino */
.faq-item__icon {
  width: 40px; height: 40px;
  border: 1.5px solid rgba(20, 12, 16, 0.75);
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 260ms ease, border-color 260ms ease,
              transform 380ms cubic-bezier(0.16,1,0.3,1);
}
.faq-item__question:hover .faq-item__icon {
  background: var(--c-vino);
  border-color: var(--c-vino);
}
.faq-item__question:hover .faq-item__icon-line { background: var(--c-beige-claro); }
.faq-item.is-open .faq-item__icon {
  background: var(--c-vino);
  border-color: var(--c-vino);
  transform: rotate(45deg);
}
.faq-item.is-open .faq-item__icon-line { background: var(--c-beige-claro); }

.faq-item__answer .faq-item__answer-inner { padding: 0 30px 26px; }

/* v3r159 — FAQ: el "+" es un signo CHICO dentro del circulo (las lineas al
   100% lo volvian una mira), y la respuesta plegada no reserva su padding
   (dejaba una banda vacia bajo cada pregunta). */
.faq-item__icon { position: relative; }
.faq-item__icon-line--h {
  left: 50%; top: 50%; width: 14px; height: 1.6px;
  transform: translate(-50%, -50%);
}
.faq-item__icon-line--v {
  left: 50%; top: 50%; width: 1.6px; height: 14px;
  transform: translate(-50%, -50%);
}
.faq-item__answer .faq-item__answer-inner { padding: 0 30px; }
.faq-item.is-open .faq-item__answer .faq-item__answer-inner { padding: 0 30px 26px; }

/* ==================================================================
   SECCION VIII — CIERRE (v3r160): réplica de la referencia.
   Negro de marca, dos líneas serif crema con "un sistema." en itálica
   NEÓN, botón píldora neón, y vacío monumental alrededor.
   ================================================================== */
.cta-final {
  background: var(--c-noche);
  min-height: 100svh;
}
.cta-final__eyebrow { display: none; }      /* la referencia no lo lleva */
.cta-final__microcopy { display: none; }    /* la referencia no lo lleva */

.cta-final__headline {
  font-family: var(--ff-display);
  color: var(--c-beige-claro);
  font-size: clamp(40px, 5.5vw, 92px);
  line-height: 1.12;
  text-align: center;
  letter-spacing: -0.01em;
}
.cta-final__headline em {
  font-style: italic;
  color: var(--c-neon);
}

.cta-final__button {
  background: var(--c-neon);
  color: var(--c-vino);
  border-radius: 999px;
  padding: clamp(18px, 1.8vw, 26px) clamp(38px, 4vw, 64px);
  font-size: clamp(12px, 1vw, 16px);
  letter-spacing: 0.18em;
  margin-top: clamp(30px, 3.4vw, 56px);
}
.cta-final__arrow { color: var(--c-vino); }

/* v3r161 — el boton del cierre es una pildora neon PLANA (la referencia no
   lleva halo ni pulsos; el vacio alrededor es el que habla) */
/* v3r265: los anillos vuelven (antes se ocultaron para replicar la
   referencia estatica) y el boton recupera peso propio. */
.cta-final__button:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); }

/* ==================================================================
   v3r162 — ENTRADAS de FAQ, CIERRE y DEMO (mismo lenguaje de la casa:
   nacer desde abajo con easing editorial, escalonado, armado SIN
   transicion y transicion SOLO en .is-in — leccion de planes).
   ================================================================== */

/* ---- FAQ: titulo primero, tarjetas en cascada ---- */
.faq.is-armado .faq__header { opacity: 0; transform: translateY(24px); }
.faq.is-armado .faq-item { opacity: 0; transform: translateY(34px); }
.faq.is-armado.is-in .faq__header {
  opacity: 1; transform: none;
  transition: opacity 640ms cubic-bezier(0.16,1,0.3,1),
              transform 640ms cubic-bezier(0.16,1,0.3,1);
}
.faq.is-armado.is-in .faq-item {
  opacity: 1; transform: none;
  transition: opacity 620ms cubic-bezier(0.16,1,0.3,1),
              transform 620ms cubic-bezier(0.16,1,0.3,1),
              box-shadow 320ms ease;
}
.faq.is-armado.is-in .faq-item[data-faq="1"] { transition-delay: 120ms; }
.faq.is-armado.is-in .faq-item[data-faq="2"] { transition-delay: 210ms; }
.faq.is-armado.is-in .faq-item[data-faq="3"] { transition-delay: 300ms; }
.faq.is-armado.is-in .faq-item[data-faq="4"] { transition-delay: 390ms; }
.faq.is-armado.is-in .faq-item[data-faq="5"] { transition-delay: 480ms; }

/* ---- CIERRE: el titular sube, el boton llega despues con rebote corto ---- */
.cta-final.is-armado .cta-final__headline { opacity: 0; transform: translateY(30px); }
.cta-final.is-armado .cta-final__button { opacity: 0; transform: translateY(16px) scale(0.92); }
.cta-final.is-armado.is-in .cta-final__headline {
  opacity: 1; transform: none;
  transition: opacity 760ms cubic-bezier(0.16,1,0.3,1),
              transform 760ms cubic-bezier(0.16,1,0.3,1);
}
.cta-final.is-armado.is-in .cta-final__button {
  opacity: 1; transform: none;
  transition: opacity 520ms cubic-bezier(0.16,1,0.3,1) 320ms,
              transform 560ms cubic-bezier(0.34,1.56,0.64,1) 320ms,
              box-shadow 240ms ease;
}

/* ---- DEMO: textos escalonados; telefono y chica emergen ---- */
.demo.is-armado .demo__texts > * { opacity: 0; transform: translateY(26px); }
/* pantalla del demo SIN entrada: el chat debe cubrir el hueco verde desde el primer frame */
.demo.is-armado .demo__chica { opacity: 0; }
.demo.is-armado.is-in .demo__texts > * {
  opacity: 1; transform: none;
  transition: opacity 680ms cubic-bezier(0.16,1,0.3,1),
              transform 680ms cubic-bezier(0.16,1,0.3,1);
}
.demo.is-armado.is-in .demo__texts > *:nth-child(2) { transition-delay: 120ms; }
.demo.is-armado.is-in .demo__texts > *:nth-child(3) { transition-delay: 240ms; }

.demo.is-armado.is-in .demo__chica {
  opacity: 1;
  transition: opacity 900ms ease 320ms;
}

@media (prefers-reduced-motion: reduce) {
  .faq.is-armado .faq__header, .faq.is-armado .faq-item,
  .cta-final.is-armado .cta-final__headline, .cta-final.is-armado .cta-final__button,
  .demo.is-armado .demo__texts > *, .demo.is-armado .demo__pantalla,
  .demo.is-armado .demo__chica { opacity: 1; transform: none; transition: none; }
}


/* v3r164 — precios de planes: nacen suaves despues de su tarjeta */
.planes.is-armado .plan__price { opacity: 0; transform: translateY(16px); }
.planes.is-armado.is-in .plan__price {
  opacity: 1; transform: none;
  transition: opacity 620ms cubic-bezier(0.16,1,0.3,1),
              transform 620ms cubic-bezier(0.16,1,0.3,1);
}
.planes.is-armado.is-in .plan--featured .plan__price { transition-delay: 420ms; }
.planes.is-armado.is-in .plan[data-plan="1"] .plan__price { transition-delay: 580ms; }
.planes.is-armado.is-in .plan[data-plan="3"] .plan__price { transition-delay: 720ms; }

/* v3r164 — pre-capas para que el iman no tartamudee al armar las entradas */
.planes.is-armado .plan__inner,
.planes.is-armado .planes__header,
.faq.is-armado .faq-item,
.cta-final.is-armado .cta-final__headline,
.cta-final.is-armado .cta-final__button { will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  .planes.is-armado .plan__price { opacity: 1; transform: none; transition: none; }
}




/* ==================================================================
   v3r174 — SISTEMA DE ALTURAS UNIFORME (pedido por Daniel):
   - Hero: exactamente lo que abarca la pantalla (100svh, sin cambio).
   - TODAS las demas secciones: 1080px de alto. El contenido se centra
     en esos 1080 y el iman lleva la mitad de la seccion al centro del
     area visible. Asi queda aire entre secciones y un solo criterio.
   ================================================================== */
/* v3r277: modulo adaptativo. 950px es el techo (pantallas holgadas); en
   ventanas mas bajas sigue a la banda visible conservando el mismo aire
   proporcional, asi el contenido nunca queda cortado. */
#ia, #autoridad, #proof, #arsenal, #demo, #planes, #faq, #cta-final {
  min-height: var(--modulo, 950px);
}


/* ==================================================================
   v3r175 — CENTRADO REAL del contenido en los 1080px de cada seccion
   + fluidez del iman (pausa de animaciones infinitas durante el vuelo).
   ================================================================== */
/* proof y planes: de flujo con padding asimetrico -> centrado flex */
#proof, #planes {
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 0; padding-bottom: 0;
}
/* arsenal: el track (100svh) se centra en los 1080 en vez de dejar
   toda la franja sobrante abajo */
#arsenal { display: flex; flex-direction: column; justify-content: center; }
/* manifiesto: el bloque (marco+tarjeta) cargaba 114px arriba / 12 abajo;
   se sube ~51px para igualar margenes */
/* v3r282: el manifiesto NO usa lienzo escalado (es fluido): estas
   compensaciones venian del diseno anterior y descolocaban la tarjeta. */
/* demo: la columna de textos ocupaba 35..1080; padding simetrico para
   que eyebrow y boton respiren igual respecto al centro */
.demo__texts { padding-top: 92px; padding-bottom: 92px; }

/* Mientras el iman vuela, pausar las animaciones infinitas del tramo
   planes/faq/cierre (respiracion de tarjeta, pulsos): con box-reflect y
   blur repintan cada frame y entrecortan el deslizamiento. */
/* v3r252: retirada la pausa global durante el vuelo del iman. Congelaba
   tambien las animaciones de ENTRADA — la de planes se atoraba a la mitad
   y continuaba al aterrizar. El entrecortado que motivo esta regla tenia
   otra causa, ya resuelta (el iman pedia scroll suave en cada cuadro). */

/* v3r176 — afinado con margenes medidos en vivo (arriba/abajo iguales) */
/* v3r254: el eyebrow arrancaba en y=-3 (pegado al borde). Se reparte el
   aire: 62px arriba, y el bloque baja pero sigue centrado en la banda
   visible del iman. */
/* v3r256 — el bloque medía 823px y la banda visible son 817: por eso el
   titulo quedaba pegado al borde. Se comprime el espaciado interno
   (eyebrow 36→24, header 70→46, separacion entre tarjetas 22→16) y con
   esos 58px liberados el conjunto baja y respira arriba. */
/* v3r263: la seccion centraba su contenido con alto fijo, asi que al
   abrir una pregunta el bloque crecia y el centrado lo subia todo — se
   movia la seccion entera. Ahora el contenido se ancla arriba (misma
   posicion de partida) y la seccion crece hacia abajo al desplegarse. */
#faq {
  padding-top: 55px;
  padding-bottom: 133px;
  height: auto;
  min-height: 950px;
  justify-content: flex-start;
}
#faq .faq__eyebrow { margin-bottom: 24px; }
#faq .faq__header  { margin-bottom: 46px; }
#faq .faq-item     { margin-bottom: 16px; }
#faq .faq-item:last-child { margin-bottom: 0; } /* v3r189: centro en la banda visible (409) con los 11px de margen interno compensados */ /* la seccion crecia a 1136 por sus paddings; con 1080 fijos el flex centra solo */
#planes { padding-bottom: 159px; } /* v3r187: centra en la banda visible (0..817 bajo la nav) */
#cta-final { padding-bottom: 90px; }
.demo__texts { padding-bottom: 152px; }



/* v3r184 — el stage recortaba a la chica en y=929 (su overflow:hidden);
   quien debe recortar es la SECCION en y=1000. */
#ia .iahero__stage { overflow: visible; }

/* v3r187 — proof, arsenal y planes centran su contenido en la BANDA
   VISIBLE del iman (817px bajo la nav), no en los 950 completos:
   flex-center + 133px de padding inferior = subir 66px el centro. */
#proof { padding-bottom: 133px; }
#arsenal { padding-bottom: 133px; }
/* el track media 100svh (895) y no cabia en la banda visible: se ajusta
   a la banda real bajo la nav (100svh - 78) */
#arsenal .arsenal__track { height: calc(100svh - 78px); }
/* el pinned/columns median 100vh y desbordaban el track: heredan su alto */
#arsenal .arsenal__pinned, #arsenal .arsenal__columns { height: 100%; min-height: 0; }
/* v3r193: info arriba y tarjetas MAS LARGAS — eyebrow pegado arriba (~32px)
   y las tarjetas usan casi toda la banda (padding-top 96 en vez de 156). */
#arsenal .arsenal__eyebrow { transform: translateY(-72px); }
#arsenal .arsenal__columns { padding-top: 96px; }

/* ==================================================================
   v3r194 — ENTRADA DEL HERO: la foto del equipo nace PEQUENA y crece
   (scale 0.5 -> 1 desde el suelo) justo al irse el preloader. Corre
   UNA sola vez por carga de pagina (animation de carga, no de scroll).
   Solo transform: opacity romperia el mix-blend del contenedor.
   ================================================================== */
@keyframes heroed-team-crece {
  from { transform: translateX(-50%) translateY(110px) scale(0.5); }
  to   { transform: translateX(-50%) translateY(0) scale(1); }
}
/* pequeno SOLO antes de crecer; al terminar (is-crecido) vuelve la cascada
   normal — el fill permanente pisaba los transforms de las escenas 2 y 3 */
.heroed__team:not(.is-crecido) {
  transform-origin: 50% 100%;
  transform: translateX(-50%) translateY(110px) scale(0.5);
  animation: none;
}
.heroed__team.is-crecer {
  animation: heroed-team-crece 1400ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* al terminar: SIN animacion (la entrada vieja de 2.35s se re-armaba y
   reacomodaba la imagen) y transform en reposo = fin del crecimiento */
.heroed__team.is-crecido { animation: none; transform: translateX(-50%); }
@media (prefers-reduced-motion: reduce) {
  .heroed__team:not(.is-crecido), .heroed__team.is-crecer { animation: none; transform: translateX(-50%); }
}




/* ==================================================================
   v3r206 — SIDE-NAV con NUMEROS ROMANOS: cada seccion lleva su romano
   junto al punto; se ilumina (chartreuse) el de la seccion en curso.
   Color neutro para que se lea igual sobre beige y sobre vino oscuro.
   ================================================================== */
.side-nav__roman {
  font-family: var(--ff-display);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.06em;
  color: rgba(140, 120, 110, 0.55);
  margin-left: 11px;
  min-width: 26px;          /* los puntos quedan alineados en columna */
  text-align: left;
  transition: color 400ms ease, font-size 400ms var(--ease-brut),
              text-shadow 400ms ease, opacity 400ms ease;
}
.side-nav__item.is-active .side-nav__roman {
  color: var(--c-neon);
  font-size: 14px;
  text-shadow: 0 0 12px rgba(232, 255, 0, 0.45);
}
.side-nav__link:hover .side-nav__roman { color: var(--c-neon); }
@media (max-width: 900px) { .side-nav__roman { display: none; } }

/* ==================================================================
   v3r207 — SIDE-NAV pegado a la orilla + franja vino que se difumina
   al alejarse del borde izquierdo. La franja va DETRAS de la columna
   (::before del propio nav) y cubre todo el alto de la pantalla.
   ================================================================== */
.side-nav { left: 12px; }
/* la franja NO puede vivir dentro del nav: su transform lo vuelve
   contenedor de los hijos fixed y la recorta. Va en el hermano. */
.side-nav__shadow {
  display: block !important;
  position: fixed;
  /* arranca justo bajo la barra del logo y baja hasta el pie */
  left: 0; top: 78px; bottom: 0;
  width: 108px !important;   /* v3r215: solo lo que ocupa la columna de puntos+romanos */
  height: auto;
  /* v3r212: color MEDIDO del borde izquierdo de las secciones 2 y 3.
     Su halo es radial(125% 160% at 59% 50%): en x=0 cae al ~20% de
     intensidad, no al 65% que se asumio antes. Compuesto sobre noche
     da rgb(18,7,12) — ese es el vino que hay que igualar. */
  background: linear-gradient(
    to right,
    rgba(18, 7, 12, 0.58) 0%,
    rgba(18, 7, 12, 0.44) 34%,
    rgba(18, 7, 12, 0.24) 58%,
    rgba(18, 7, 12, 0.08) 80%,
    rgba(18, 7, 12, 0) 100%
  );
  opacity: 1 !important;
  z-index: 149;              /* debajo del nav (150), encima del contenido */
  pointer-events: none;
}
/* sobre la franja vino los puntos y romanos se leen en claro */
.side-nav__dot { background: rgba(240, 226, 214, 0.5); }
.side-nav__roman { color: rgba(240, 226, 214, 0.62); }
@media (max-width: 900px) {
  .side-nav__shadow { display: none !important; }
}


/* v3r210 — primer punto: casita editorial (mismo trazo fino que la pagina)
   en vez de numeral. Hereda color del romano: tenue en reposo, neon activa. */
.side-nav__roman--casa {
  display: flex;
  align-items: center;
}
.side-nav__roman--casa svg {
  width: 12px; height: 12px;
  display: block;
  transition: width 400ms var(--ease-brut), height 400ms var(--ease-brut),
              filter 400ms ease;
}
.side-nav__item.is-active .side-nav__roman--casa svg {
  width: 14px; height: 14px;
  filter: drop-shadow(0 0 7px rgba(232, 255, 0, 0.5));
}




/* v3r215 — columna mas compacta: romano pegado al punto */
.side-nav__roman { margin-left: 8px; min-width: 20px; font-size: 10px; }
.side-nav__item.is-active .side-nav__roman { font-size: 12.5px; }
.side-nav__roman--casa svg { width: 11px; height: 11px; }
.side-nav__item.is-active .side-nav__roman--casa svg { width: 13px; height: 13px; }

/* v3r219 — el nav recortaba en horizontal (overflow: hidden auto) y cortaba
   el halo del punto activo contra su borde izquierdo. */
.side-nav {
  overflow: visible;
  padding-left: 6px;
  margin-left: -6px;   /* la columna no se mueve; solo gana aire para el halo */
}

/* v3r220 — logo nuevo de la barra (marca oficial con ®, recortado solo en
   vertical). v3r223: +10% de tamano SIN tocar el alto de la barra (48 < 78
   de la nav, asi que no la empuja). */
.nav__brand-logo { height: 48px; }
@media (max-width: 1200px) { .nav__brand-logo { height: 44px; } }
@media (max-width: 900px)  { .nav__brand-logo { height: 38px; } }
@media (max-width: 600px)  { .nav__brand-logo { height: 33px; } }

/* ==================================================================
   v3r225 — RELEVO DE LOGO "limpiado por la luz":
   una linea blanca diagonal cruza el logo de IZQUIERDA A DERECHA y el
   color cambia EXACTAMENTE bajo ella. Se logra porque la mascara de la
   capa que entra y la banda del destello usan el mismo angulo, el mismo
   tamano (300%) y la MISMA posicion animada: el borde del barrido y la
   linea son la misma recta.
   Capas: negro base (siempre) -> vino entra en el 1er paso -> negro
   entra en el 2o paso y al reiniciar el ciclo todo se resetea oculto
   (invisible: debajo ya hay negro).
   ================================================================== */
.nav__brand-swap { position: relative; display: block; line-height: 0; }
.nav__brand-logo--alt,
.nav__brand-logo--alt2 {
  position: absolute;
  inset: 0;
  /* opaco a la IZQUIERDA de la imagen: al bajar la posicion de 100 a 0,
     la zona opaca entra por el borde izquierdo -> revela izq -> der */
  -webkit-mask-image: linear-gradient(115deg, #000 0 47%, rgba(0,0,0,0) 53% 100%);
          mask-image: linear-gradient(115deg, #000 0 47%, rgba(0,0,0,0) 53% 100%);
  -webkit-mask-size: 300% 100%;   mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;  mask-position: 100% 0;
}
.nav__brand-logo--alt  { animation: navLogoPaso1 20s linear infinite; }
.nav__brand-logo--alt2 { animation: navLogoPaso2 20s linear infinite; }

@keyframes navLogoPaso1 {           /* entra el VINO */
  0%, 5%   { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  10%,100% { -webkit-mask-position: 0% 0;   mask-position: 0% 0; }
}
@keyframes navLogoPaso2 {           /* vuelve el NEGRO */
  0%, 55%  { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  60%,100% { -webkit-mask-position: 0% 0;   mask-position: 0% 0; }
}

/* La linea: misma geometria que las mascaras, asi va clavada en el borde
   del cambio. Recortada a la silueta del logo para no invadir la barra. */
.nav__brand-glint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  background: linear-gradient(115deg,
      rgba(255,255,255,0) 44%,
      rgba(255,255,255,0.98) 50%,
      rgba(255,255,255,0) 56%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  background-position: 100% 0;
  -webkit-mask-image: url("../images/logo-mkt4u-negro.png?v=1");
          mask-image: url("../images/logo-mkt4u-negro.png?v=1");
  -webkit-mask-size: 100% 100%;   mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: navLogoLinea 20s linear infinite;
}
@keyframes navLogoLinea {
  0%,   4.9%  { opacity: 0; background-position: 100% 0; }
  5%          { opacity: 1; background-position: 100% 0; }
  10%         { opacity: 1; background-position: 0% 0; }
  10.1%,54.9% { opacity: 0; background-position: 100% 0; }
  55%         { opacity: 1; background-position: 100% 0; }
  60%         { opacity: 1; background-position: 0% 0; }
  60.1%,100%  { opacity: 0; background-position: 100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nav__brand-logo--alt, .nav__brand-logo--alt2, .nav__brand-glint {
    animation: none; opacity: 0;
  }
}

/* ==================================================================
   v3r226 — ENTRADA DEL HERO coreografiada (arranca al irse el
   preloader, via .is-crecer/.is-crecido que ya pone el JS):
     1) equipo: nace pequeno y crece            (0.00s -> 1.40s)
     2) titulo: nace pequeno y crece con el     (0.15s -> 1.55s)
     3) boton:  entra suave cuando ya se asentaron ambos (1.55s -> 2.15s)
   Solo transform/opacity; el titulo crece desde su propio pie para que
   no se despegue de la linea de base.
   ================================================================== */
@keyframes heroCrecerTitulo {
  from { opacity: 0; transform: translateY(26px) scale(0.62); }
  to   { opacity: 1; transform: none; }
}
/* v3r227: el boton se descubre de IZQUIERDA A DERECHA con una mascara
   de borde suave (no un fade plano). El halo neon vive en su sombra, que
   la mascara no recorta, asi que se enciende con el. */
@keyframes heroEntradaBoton {
  from {
    opacity: 1;
    -webkit-mask-position: 100% 0;  mask-position: 100% 0;
  }
  to {
    opacity: 1;
    -webkit-mask-position: 0% 0;    mask-position: 0% 0;
  }
}

/* anulan las entradas viejas de linea (subida corta) */
.heroscene--1 .heroed__line--1,
.heroscene--1 .heroed__line--2 { animation: none; opacity: 0; }

/* estado armado: hasta que el preloader se va, todo esta oculto */
.hero--editorial .heroscene--1 .heroed__titlewrap { opacity: 0; }
.hero--editorial .heroed__btn--s1 { opacity: 0; }

/* al soltarse el preloader (JS marca .is-crecer en el equipo) */
.heroed__team.is-crecer ~ .heroscene--1 .heroed__titlewrap,
.heroed__team.is-crecido ~ .heroscene--1 .heroed__titlewrap,
.heroscene--1:has(~ .heroed__team.is-crecer) .heroed__titlewrap,
.heroscene--1:has(~ .heroed__team.is-crecido) .heroed__titlewrap {
  opacity: 1;
  transform-origin: 0% 100%;
  animation: heroCrecerTitulo 1400ms cubic-bezier(0.16, 1, 0.3, 1) 150ms both;
}
.heroscene--1:has(~ .heroed__team.is-crecer) .heroed__line--1,
.heroscene--1:has(~ .heroed__team.is-crecer) .heroed__line--2,
.heroscene--1:has(~ .heroed__team.is-crecido) .heroed__line--1,
.heroscene--1:has(~ .heroed__team.is-crecido) .heroed__line--2 { opacity: 1; }

.hero--editorial:has(.heroed__team.is-crecer) .heroed__btn--s1,
.hero--editorial:has(.heroed__team.is-crecido) .heroed__btn--s1 {
  /* opaco a la izquierda de la imagen: al ir de 100% a 0% la zona visible
     entra por el borde izquierdo y barre hacia la derecha */
  -webkit-mask-image: linear-gradient(100deg, #000 0 42%, rgba(0,0,0,0) 58% 100%);
          mask-image: linear-gradient(100deg, #000 0 42%, rgba(0,0,0,0) 58% 100%);
  -webkit-mask-size: 300% 100%;   mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: heroEntradaBoton 760ms cubic-bezier(0.16, 1, 0.3, 1) 1550ms both;
}

@media (prefers-reduced-motion: reduce) {
  .hero--editorial .heroscene--1 .heroed__titlewrap,
  .hero--editorial .heroed__btn--s1 { opacity: 1; animation: none; }
  .heroscene--1 .heroed__line--1, .heroscene--1 .heroed__line--2 { opacity: 1; }
}


/* ==================================================================
   v3r228 — ENTRADA ESCALONADA DE LOS CROMOS FIJOS.
   Tras el preloader solo se ve el HERO. Cuando su boton termina de
   entrar (1.55s + 0.76s = 2.31s) llegan, en orden:
     barra superior 2.45s -> side-nav 3.00s -> WhatsApp (pop) 3.55s
   ================================================================== */
body:not(.is-entrada) .nav,
body:not(.is-entrada) .side-nav,
body:not(.is-entrada) .side-nav__shadow,
body:not(.is-entrada) .wa-floating { opacity: 0; pointer-events: none; }

@keyframes cromoBarraIn {
  /* v3r232: mas suave — baja solo un tercio de su alto y lo hace con un
     fundido largo, en vez de caer entera desde fuera de pantalla. */
  from { opacity: 0; transform: translateY(-34%); }
  to   { opacity: 1; transform: none; }
}
@keyframes cromoLateralIn {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cromoFranjaIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cromoWaPop {
  0%   { opacity: 0; transform: scale(0.2); }
  62%  { opacity: 1; transform: scale(1.14); }
  100% { opacity: 1; transform: scale(1); }
}

body.is-entrada .nav {
  animation: cromoBarraIn 1100ms cubic-bezier(0.33, 0.9, 0.28, 1) 2450ms both;
}
body.is-entrada .side-nav {
  /* conserva su centrado vertical propio */
  animation: cromoLateralIn 1100ms cubic-bezier(0.33, 0.9, 0.28, 1) 3100ms both;
}
body.is-entrada .side-nav__shadow {
  /* v3r231: entra CON la columna — mismo gesto, tiempo y curva */
  animation: cromoFranjaIn 1100ms cubic-bezier(0.33, 0.9, 0.28, 1) 3100ms both;
}
body.is-entrada .wa-floating {
  animation: cromoWaPop 620ms cubic-bezier(0.34, 1.56, 0.64, 1) 3550ms both;
}

/* --- ONDA VINO del WhatsApp (misma familia que los botones del hero):
   un latido de ~1.2s y luego reposo, en ciclo de 5s. Solo con .is-onda. */
@keyframes waOnda {
  0%   { box-shadow: 0 10px 30px rgba(45,8,25,0.34), 0 0 0 0 rgba(74,14,44,0.55); }
  14%  { box-shadow: 0 10px 30px rgba(45,8,25,0.34), 0 0 0 22px rgba(74,14,44,0); }
  24%  { box-shadow: 0 10px 30px rgba(45,8,25,0.34), 0 0 0 0 rgba(74,14,44,0.42); }
  38%  { box-shadow: 0 10px 30px rgba(45,8,25,0.34), 0 0 0 26px rgba(74,14,44,0); }
  39%, 100% { box-shadow: 0 10px 30px rgba(45,8,25,0.34), 0 0 0 0 rgba(74,14,44,0); }
}
.wa-floating.is-onda { animation: waOnda 5s ease-out infinite 4200ms; }
/* durante el pop de entrada manda el pop; la onda arranca despues */
body.is-entrada .wa-floating.is-onda {
  animation: cromoWaPop 620ms cubic-bezier(0.34,1.56,0.64,1) 3550ms both,
             waOnda 5s ease-out infinite 4200ms;
}

@media (prefers-reduced-motion: reduce) {
  body.is-entrada .nav, body.is-entrada .side-nav,
  body.is-entrada .side-nav__shadow, body.is-entrada .wa-floating,
  .wa-floating.is-onda { animation: none; opacity: 1; }
}

/* ==================================================================
   v3r229 — tres correcciones de la coreografia v3r228:
   1) el hover del boton del hero volvia a perder su pulso porque la
      animacion de entrada (mas especifica) lo pisaba;
   2) el side-nav perdio su centrado: los keyframes reponian transform
      a none y borraban el translateY(-50%);
   3) el WhatsApp mantiene la onda mientras el cursor este encima.
   ================================================================== */

/* 1 · el pulso del hover manda sobre la entrada, ya terminada */
.hero--editorial:has(.heroed__team.is-crecer) .heroed__btn--s1:hover,
.hero--editorial:has(.heroed__team.is-crecido) .heroed__btn--s1:hover {
  animation: heroed-btn-pulse-ring 1.25s cubic-bezier(.4, 0, .2, 1) infinite;
  -webkit-mask-image: none;  mask-image: none;   /* sin resto de la mascara */
}

/* 2 · la entrada lateral conserva el centrado vertical */
@keyframes cromoLateralIn {
  from { opacity: 0; transform: translateY(-50%) translateX(-12px); }
  to   { opacity: 1; transform: translateY(-50%); }
}

/* 3 · onda continua mientras el cursor este encima del WhatsApp */
@keyframes waOndaHover {
  0%   { box-shadow: 0 10px 30px rgba(45,8,25,0.34), 0 0 0 0 rgba(74,14,44,0.55); }
  70%  { box-shadow: 0 10px 30px rgba(45,8,25,0.34), 0 0 0 24px rgba(74,14,44,0); }
  100% { box-shadow: 0 10px 30px rgba(45,8,25,0.34), 0 0 0 0 rgba(74,14,44,0); }
}
body .wa-floating:hover,
body.is-entrada .wa-floating.is-onda:hover,
body.is-entrada .wa-floating:hover {
  animation: waOndaHover 1.5s ease-out infinite !important;
}

/* ==================================================================
   v3r230 — ESTADO FINAL: terminada la entrada, ningun cromo conserva su
   animacion (asi un hover no puede reiniciarla y dejarla en su primer
   cuadro, que es invisible). El hover recupera su propio pulso.
   ================================================================== */
body.is-entrado .nav {
  animation: none !important; opacity: 1 !important; transform: none !important;
}
body.is-entrado .side-nav,
body.is-entrado .side-nav__shadow {
  animation: none !important; opacity: 1 !important;   /* el centrado vive en su base */
}

/* Boton del hero: quieto y visible; el hover manda su pulso */
body.is-entrado .heroed__btn--s1 {
  animation: none !important;
  opacity: 1 !important;
  -webkit-mask-image: none !important; mask-image: none !important;
}
body.is-entrado .heroed__btn--s1:hover {
  animation: heroed-btn-pulse-ring 1.25s cubic-bezier(.4, 0, .2, 1) infinite !important;
}

/* WhatsApp: quieto; la onda de seccion y la de hover se aplican encima */
body.is-entrado .wa-floating {
  animation: none !important; opacity: 1 !important; transform: none !important;
}
body.is-entrado .wa-floating.is-onda {
  animation: waOnda 5s ease-out infinite !important;
}
body.is-entrado .wa-floating:hover,
body.is-entrado .wa-floating.is-onda:hover {
  animation: waOndaHover 1.5s ease-out infinite !important;
}

/* ==================================================================
   v3r233 — ENTRADA DE LA COLUMNA LATERAL, coreografiada:
   1) la franja oscura se descubre con un BARRIDO de arriba hacia abajo
      (mascara vertical, 1.15s desde 2.90s);
   2) los puntos con sus romanos van naciendo a su paso, uno tras otro
      (cada uno con su retardo, del primero al ultimo);
   3) el WhatsApp cierra con un pop mas amplio.
   ================================================================== */
@keyframes franjaBarrido {
  from { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
  to   { -webkit-mask-position: 0 0;    mask-position: 0 0; }
}
@keyframes puntoNace {
  from { opacity: 0; transform: translateX(-10px) scale(0.6); }
  to   { opacity: 1; transform: none; }
}

body.is-entrada .side-nav__shadow {
  /* el barrido sustituye al deslizamiento lateral */
  -webkit-mask-image: linear-gradient(to bottom, #000 0 42%, rgba(0,0,0,0) 58% 100%);
          mask-image: linear-gradient(to bottom, #000 0 42%, rgba(0,0,0,0) 58% 100%);
  -webkit-mask-size: 100% 300%;   mask-size: 100% 300%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: cromoFranjaIn 320ms ease 2900ms both,
             franjaBarrido 1150ms cubic-bezier(0.33, 0.9, 0.28, 1) 2900ms both;
}
/* la columna ya no se desliza: sus puntos nacen uno por uno */
body.is-entrada .side-nav { animation: none; opacity: 1; }
body.is-entrada .side-nav__item {
  animation: puntoNace 520ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
body.is-entrada .side-nav__item:nth-child(1) { animation-delay: 3000ms; }
body.is-entrada .side-nav__item:nth-child(2) { animation-delay: 3095ms; }
body.is-entrada .side-nav__item:nth-child(3) { animation-delay: 3190ms; }
body.is-entrada .side-nav__item:nth-child(4) { animation-delay: 3285ms; }
body.is-entrada .side-nav__item:nth-child(5) { animation-delay: 3380ms; }
body.is-entrada .side-nav__item:nth-child(6) { animation-delay: 3475ms; }
body.is-entrada .side-nav__item:nth-child(7) { animation-delay: 3570ms; }
body.is-entrada .side-nav__item:nth-child(8) { animation-delay: 3665ms; }
body.is-entrada .side-nav__item:nth-child(9) { animation-delay: 3760ms; }

/* WhatsApp: pop mas amplio, entra cuando la columna termino */
@keyframes cromoWaPop {
  0%   { opacity: 0; transform: scale(0.15); }
  55%  { opacity: 1; transform: scale(1.38); }
  78%  { transform: scale(0.94); }
  100% { opacity: 1; transform: scale(1); }
}
body.is-entrada .wa-floating {
  animation: cromoWaPop 760ms cubic-bezier(0.34, 1.56, 0.64, 1) 4300ms both;
}
body.is-entrada .wa-floating.is-onda {
  animation: cromoWaPop 760ms cubic-bezier(0.34,1.56,0.64,1) 4300ms both,
             waOnda 5s ease-out infinite 5100ms;
}

/* estado final: sin rastro de las entradas */
body.is-entrado .side-nav__item { animation: none !important; opacity: 1 !important; transform: none !important; }
body.is-entrado .side-nav__shadow {
  -webkit-mask-image: none !important; mask-image: none !important;
}

/* ==================================================================
   v3r234 — TODO MAS SUAVE:
   · boton del hero: el barrido se alarga y su borde se hace mas difuso
     (la zona de transicion pasa de 16% a 46% del gradiente);
   · barra superior y columna: gestos aun mas cortos y curvas mas largas;
   · puntos: nacen, se pasan de tamano y se asientan, uno por uno.
   ================================================================== */

/* --- boton del hero: fade mucho mas suave --- */
.hero--editorial:has(.heroed__team.is-crecer) .heroed__btn--s1,
.hero--editorial:has(.heroed__team.is-crecido) .heroed__btn--s1 {
  -webkit-mask-image: linear-gradient(100deg, #000 0 27%, rgba(0,0,0,0) 73% 100%);
          mask-image: linear-gradient(100deg, #000 0 27%, rgba(0,0,0,0) 73% 100%);
  animation: heroEntradaBoton 1250ms cubic-bezier(0.33, 0.9, 0.28, 1) 1550ms both;
}

/* --- barra superior y columna: mas suaves aun --- */
@keyframes cromoBarraIn {
  from { opacity: 0; transform: translateY(-18%); }
  to   { opacity: 1; transform: none; }
}
body.is-entrada .nav {
  animation: cromoBarraIn 1500ms cubic-bezier(0.25, 0.85, 0.25, 1) 2600ms both;
}
body.is-entrada .side-nav__shadow {
  animation: cromoFranjaIn 420ms ease 3250ms both,
             franjaBarrido 1500ms cubic-bezier(0.25, 0.85, 0.25, 1) 3250ms both;
}

/* --- puntos: entran, se pasan de tamano y se asientan --- */
@keyframes puntoNace {
  0%   { opacity: 0; transform: translateX(-8px) scale(0.4); }
  55%  { opacity: 1; transform: translateX(0) scale(1.45); }
  78%  { transform: scale(0.93); }
  100% { opacity: 1; transform: none; }
}
body.is-entrada .side-nav__item {
  animation: puntoNace 640ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
body.is-entrada .side-nav__item:nth-child(1) { animation-delay: 3400ms; }
body.is-entrada .side-nav__item:nth-child(2) { animation-delay: 3520ms; }
body.is-entrada .side-nav__item:nth-child(3) { animation-delay: 3640ms; }
body.is-entrada .side-nav__item:nth-child(4) { animation-delay: 3760ms; }
body.is-entrada .side-nav__item:nth-child(5) { animation-delay: 3880ms; }
body.is-entrada .side-nav__item:nth-child(6) { animation-delay: 4000ms; }
body.is-entrada .side-nav__item:nth-child(7) { animation-delay: 4120ms; }
body.is-entrada .side-nav__item:nth-child(8) { animation-delay: 4240ms; }
body.is-entrada .side-nav__item:nth-child(9) { animation-delay: 4360ms; }

/* WhatsApp: cierra cuando el ultimo punto se asento */
body.is-entrada .wa-floating {
  animation: cromoWaPop 760ms cubic-bezier(0.34, 1.56, 0.64, 1) 5000ms both;
}
body.is-entrada .wa-floating.is-onda {
  animation: cromoWaPop 760ms cubic-bezier(0.34,1.56,0.64,1) 5000ms both,
             waOnda 5s ease-out infinite 5800ms;
}

/* ==================================================================
   v3r235 — ENTRADA DE LOS PILARES: cada tarjeta empieza como una LINEA
   horizontal y se abre hacia arriba y abajo, una despues de otra, al
   centrarse la seccion. Armado SIN transicion (si no, el primer cuadro
   se ve abierto y da un tiron); la transicion vive solo bajo .is-in.
   ================================================================== */
.arsenal.is-armado .arsenal__eyebrow { opacity: 0; transform: translateY(-72px) translateY(14px); }
.arsenal.is-armado .pilar {
  clip-path: inset(calc(50% - 1px) 0 calc(50% - 1px) 0);
}
.arsenal.is-armado.is-in .arsenal__eyebrow {
  opacity: 1;
  transform: translateY(-72px);
  transition: opacity 620ms cubic-bezier(0.16,1,0.3,1),
              transform 620ms cubic-bezier(0.16,1,0.3,1);
}
.arsenal.is-armado.is-in .pilar {
  clip-path: inset(0 0 0 0);
  transition: clip-path 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.arsenal.is-armado.is-in .pilar[data-pilar="1"] { transition-delay: 180ms; }
.arsenal.is-armado.is-in .pilar[data-pilar="2"] { transition-delay: 380ms; }
.arsenal.is-armado.is-in .pilar[data-pilar="3"] { transition-delay: 580ms; }
.arsenal.is-armado.is-in .pilar[data-pilar="4"] { transition-delay: 780ms; }

@media (prefers-reduced-motion: reduce) {
  .arsenal.is-armado .pilar { clip-path: none; }
  .arsenal.is-armado .arsenal__eyebrow { opacity: 1; transform: translateY(-72px); }
}

/* v3r236 — con el visor de servicio abierto, la columna lateral y su
   franja se retiran: el detalle manda y no compite con la navegacion. */
body:has(#visor.is-open) .side-nav,
body:has(#visor.is-open) .side-nav__shadow {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 260ms ease;
}
.side-nav, .side-nav__shadow { transition: opacity 260ms ease; }

/* ==================================================================
   v3r237 — PLANES: las tarjetas entran DE DERECHA A IZQUIERDA, se pasan
   un poco de su sitio y regresan. Con keyframes (no transicion) porque
   el sobrepaso necesita un cuadro intermedio propio.
   ================================================================== */


/* los precios siguen llegando despues de su tarjeta */
.planes.is-armado.is-in .plan--featured .plan__price      { transition-delay: 780ms; }
.planes.is-armado.is-in .plan[data-plan="1"] .plan__price { transition-delay: 960ms; }
.planes.is-armado.is-in .plan[data-plan="3"] .plan__price { transition-delay: 1140ms; }
.planes.is-armado.is-in .plan__badge { transition-delay: 1320ms; }

@media (prefers-reduced-motion: reduce) {
  .planes.is-armado .plan__inner,
  .planes.is-armado.is-in .plan__inner { opacity: 1; transform: none; animation: none; }
}

/* v3r238 — la tarjeta viaja COMPLETA: el precio y el badge dejan de tener
   entrada propia (llegaban tarde y por eso parecia que solo se movia una
   parte). Ahora son parte del bloque que entra desde la derecha. */
.planes.is-armado .plan__price,
.planes.is-armado.is-in .plan__price {
  opacity: 1;
  transform: none;
  transition: none;
  animation: none;
}
.planes.is-armado .plan__badge,
.planes.is-armado.is-in .plan__badge {
  opacity: 1;
  transform: none;
  transition: none;
  animation: none;
}

/* ==================================================================
   v3r239 — la tarjeta ENTERA viaja (marco incluido) y la entrada se
   apaga al terminar:
   · el recuadro (borde neon, fondo y sombra) vive en .plan, no en
     .plan__inner: por eso quedaba fijo mientras el contenido entraba.
     Ahora la animacion va en .plan y arrastra todo.
   · con .is-listo se retira la animacion, asi un hover no puede
     reiniciarla (las tarjetas volvian a entrar al quitar el cursor).
   ================================================================== */




/* terminada la coreografia: sin animacion que un hover pueda reiniciar */

/* v3r240: SIN !important — bloqueaba todo transform posterior (hasta el
   de la propia animacion de entrada). Sin animacion no hay nada que
   reponer, basta con el valor normal. */


/* v3r247 — el hover de las tarjetas no responde hasta que la entrada
   termino (antes se disparaba a mitad del viaje y peleaba con ella). */
.planes:not(.is-listo) .plan { pointer-events: none; }
.planes.is-listo .plan { pointer-events: auto; }




/* ==================================================================
   v3r249 — se conserva la entrada de V2 (planEnter: entra desde muy a la
   derecha, se pasa al -12% y regresa) y se retira la que yo habia hecho.
   El estado armado solo oculta; la animacion vieja pone el movimiento.
   ================================================================== */
.planes.is-armado .plan { opacity: 0; transform: translateX(200%); }


/* el estado final ya no debe apagar la animacion de V2 ni su flotacion */



/* v3r250 — LIMPIEZA: en planes manda la entrada de V2 (planEnter) y su
   flotacion en reposo (planIdleSide / planIdleCenter). Lo unico que se
   conserva del sistema nuevo es CUANDO dispara (seccion ya en su sitio)
   y que el hover no responde hasta que termino. */
.planes.is-armado .plan { opacity: 0; transform: translateX(200%); }
.planes.is-armado .plan.is-entered,
.planes.is-armado.is-in .plan.is-entered {
  opacity: 1;
  animation: planEnter 1.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.planes.is-armado .plan[data-plan="3"].is-entered { animation-delay: 0s; }
.planes.is-armado .plan--featured.is-entered     { animation-delay: 0.2s; }
.planes.is-armado .plan[data-plan="1"].is-entered { animation-delay: 0.4s; }

/* ==================================================================
   v3r260 — el boton del hero debe estar COMPLETAMENTE oculto hasta su
   turno. Con opacity: 0 seguian viendose su sombra proyectada y su halo
   neon (viven en box-shadow, que no depende de la opacidad del pintado
   en algunos compositores) y el conjunto "se medio notaba" al cargar.
   Se apaga tambien la sombra y se saca del arbol de pintado.
   ================================================================== */
.hero--editorial .heroed__btn--s1 {
  opacity: 0;
  visibility: hidden;      /* fuera del pintado hasta su turno */
  pointer-events: none;
}
.hero--editorial:has(.heroed__team.is-crecer) .heroed__btn--s1,
.hero--editorial:has(.heroed__team.is-crecido) .heroed__btn--s1 {
  visibility: visible;
  pointer-events: auto;
  /* v3r261: la zona de transicion del degradado llegaba al 73% y, con la
     mascara en su punto de partida, ese borde difuso caia DENTRO del
     encuadre: por eso el boton "se medio notaba" al cargar. Terminando
     la transparencia en 62% el arranque queda limpio y el barrido sigue
     siendo suave. */
  -webkit-mask-image: linear-gradient(100deg, #000 0 25%, rgba(0,0,0,0) 62% 100%);
          mask-image: linear-gradient(100deg, #000 0 25%, rgba(0,0,0,0) 62% 100%);
}
@media (prefers-reduced-motion: reduce) {
  .hero--editorial .heroed__btn--s1 { visibility: visible; opacity: 1; }
}

/* ==================================================================
   v3r265 — CIERRE: el boton pide atencion sin gritar.
   Tres capas, todas en el lenguaje de la casa:
   1) ANILLOS de neon que salen del boton cada 4.6s (dos, desfasados);
   2) DESTELLO diagonal que lo cruza — mismo gesto que el relevo del
      logo de la barra — cada 4.6s, sincronizado con el segundo anillo;
   3) RESPLANDOR de fondo que respira detras, para que el boton no
      quede flotando sobre negro plano.
   ================================================================== */
.cta-final__button {
  position: relative;
  isolation: isolate;
  box-shadow: 0 18px 44px rgba(232, 255, 0, 0.16);
}

/* 1 · anillos */
.cta-final__pulse {
  display: block;
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1.5px solid rgba(232, 255, 0, 0.55);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  animation: ctaAnillo 4.6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.cta-final__pulse--2 { animation-delay: 0.55s; }
@keyframes ctaAnillo {
  0%   { transform: scale(1);    opacity: 0.75; }
  55%  { transform: scale(1.34); opacity: 0; }
  100% { transform: scale(1.34); opacity: 0; }
}

/* 2 · destello diagonal, recortado al propio boton */
.cta-final__button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(112deg,
      rgba(255,255,255,0) 42%,
      rgba(255,255,255,0.62) 50%,
      rgba(255,255,255,0) 58%);
  background-size: 320% 100%;
  background-repeat: no-repeat;
  background-position: 130% 0;
  animation: ctaDestello 4.6s linear infinite;
}
@keyframes ctaDestello {
  0%,  8%  { background-position: 130% 0; }
  22%      { background-position: -30% 0; }
  22.1%, 100% { background-position: 130% 0; }
}

/* 3 · resplandor que respira detras del boton */
.cta-final__button-wrap, .cta-final { position: relative; }
.cta-final::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 22%;
  width: min(760px, 70vw);
  aspect-ratio: 2 / 1;
  transform: translate(-50%, 50%);
  background: radial-gradient(closest-side,
      rgba(232, 255, 0, 0.13), rgba(232, 255, 0, 0.05) 55%, transparent 78%);
  filter: blur(12px);
  pointer-events: none;
  z-index: 0;
  animation: ctaRespira 6.5s ease-in-out infinite;
}
@keyframes ctaRespira {
  0%, 100% { opacity: 0.62; transform: translate(-50%, 50%) scale(0.94); }
  50%      { opacity: 1;    transform: translate(-50%, 50%) scale(1.08); }
}
.cta-final__headline, .cta-final__button { position: relative; z-index: 1; }

/* al pasar el cursor manda el hover: anillo continuo y sin destello */
.cta-final__button:hover .cta-final__pulse { animation-duration: 1.5s; }
.cta-final__button:hover::after { animation: none; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .cta-final__pulse, .cta-final__button::after, .cta-final::after { animation: none; }
  .cta-final__pulse { opacity: 0; }
}

/* ==================================================================
   v3r266 — WHATSAPP en la seccion de cierre: invierte su identidad
   (fondo neon, icono vino) y sus ondas pasan a neon, para pertenecer
   al clima de esa seccion. Transicion suave al entrar y al salir.
   ================================================================== */
.wa-floating {
  transition: transform .35s var(--ease-brut), box-shadow .4s ease,
              background-color .5s ease, color .5s ease;
}
/* v3r267: hace falta ganarle a la regla tardia que fija vino-deep/beige */
.wa-floating.is-neon {
  background: var(--c-neon) !important;
  color: var(--c-vino) !important;
}
.wa-floating.is-neon .wa-floating__icon { fill: var(--c-vino); }
@keyframes waOndaNeon {
  0%   { box-shadow: 0 10px 30px rgba(232,255,0,0.28), 0 0 0 0 rgba(232,255,0,0.62); }
  14%  { box-shadow: 0 10px 30px rgba(232,255,0,0.28), 0 0 0 22px rgba(232,255,0,0); }
  24%  { box-shadow: 0 10px 30px rgba(232,255,0,0.28), 0 0 0 0 rgba(232,255,0,0.48); }
  38%  { box-shadow: 0 10px 30px rgba(232,255,0,0.28), 0 0 0 26px rgba(232,255,0,0); }
  39%, 100% { box-shadow: 0 10px 30px rgba(232,255,0,0.28), 0 0 0 0 rgba(232,255,0,0); }
}
@keyframes waOndaNeonHover {
  0%   { box-shadow: 0 10px 30px rgba(232,255,0,0.28), 0 0 0 0 rgba(232,255,0,0.62); }
  70%  { box-shadow: 0 10px 30px rgba(232,255,0,0.28), 0 0 0 24px rgba(232,255,0,0); }
  100% { box-shadow: 0 10px 30px rgba(232,255,0,0.28), 0 0 0 0 rgba(232,255,0,0); }
}
body.is-entrado .wa-floating.is-neon.is-onda {
  animation: waOndaNeon 5s ease-out infinite !important;
}
body.is-entrado .wa-floating.is-neon:hover,
body.is-entrado .wa-floating.is-neon.is-onda:hover {
  animation: waOndaNeonHover 1.5s ease-out infinite !important;
}


/* ==================================================================
   v3r268 — ATMOSFERA DEL CIERRE: reflector que sigue al cursor sobre
   una aurora lenta. Vive en un lienzo detras de todo el contenido de
   la seccion; los colores son de la casa (vino profundo + un apunte
   de neon), nunca compite con el boton.
   ================================================================== */
/* v3r273: el lienzo cubre cierre + pie y pinta TAMBIEN el fondo oscuro,
   asi ninguna de las dos zonas necesita fondo propio que lo tape. */
main { position: relative; }
/* v3r274: el FONDO va en el CSS del lienzo (no en su bitmap): si la
   animacion esta pausada —pestana oculta, movimiento reducido— la zona
   sigue oscura. El bitmap solo suma la atmosfera encima. */
.zona-oscura__atmos {
  position: absolute;
  left: 0;
  width: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(125% 160% at 59% 50%,
      rgba(74, 14, 44, 0.6) 0%, rgba(58, 11, 34, 0.34) 30%,
      rgba(45, 8, 25, 0.16) 52%, rgba(24, 9, 15, 0.06) 72%,
      rgba(0, 0, 0, 0) 92%),
    var(--c-noche);
}
.cta-final, .dark-footer { background: transparent; position: relative; z-index: 1; }
.cta-final > * { position: relative; z-index: 1; }

/* ==================================================================
   v3r269 — la atmosfera del cierre continua sobre el pie de pagina.
   El lienzo desborda la seccion (JS le da el alto de cierre + pie) y
   una hairline vino separa las dos areas sin cortar el degradado.
   ================================================================== */
.cta-final { overflow: visible; }


/* v3r272: sin fondo propio (la atmosfera del cierre pasa entera) y la
   linea divisoria ya no cruza de borde a borde: respeta el mismo margen
   lateral que las hairlines del pie. */
.dark-footer {
  position: relative;
  background: transparent;
  z-index: 1;
  border-top: 0;
}
.dark-footer__inner::before {
  content: "";
  display: block;
  height: 1px;
  background: rgba(232, 255, 0, 0.16);
  margin-bottom: 64px;
}
/* v3r272: fuera el suelo opaco — la atmosfera del cierre es el fondo. */
.dark-footer__inner { position: relative; z-index: 1; }

/* logo blanco: recortado, ahora puede crecer */
/* v3r270: el logo vuelve a su medida original (180px de ancho) con el
   archivo nuevo. Y fuera el filtro que invertia el logo negro: este ya
   viene en blanco, invertirlo lo dejaba negro sobre negro. */
.dark-footer__logo { width: 180px; height: auto; filter: none; }

/* enlaces de contacto */
.dark-footer__cols a { color: inherit; text-decoration: none; transition: color .25s ease; }
.dark-footer__cols a:hover { color: var(--c-neon); }

/* v3r277: manifiesto, arsenal y FAQ siguen la banda real */
.manif { height: calc(937px * var(--sm, var(--s, 0.85))); }
#arsenal .arsenal__track { height: calc(100svh - var(--nav-h, 78px)); }
#faq { min-height: var(--modulo, 950px); height: auto; }


/* ==================================================================
   v3r281 — el contenido se centra en la BANDA VISIBLE, no en el modulo:
   las secciones de flujo compensan con --extra (lo que el modulo mide
   de mas). Y en ventanas bajas las FAQ comprimen su interior para no
   desbordar.
   ================================================================== */
#proof, #planes, #cta-final { padding-bottom: var(--extra, 133px); }
#faq { padding-bottom: var(--extra, 133px); }
.demo__texts { padding-bottom: calc(92px + var(--extra, 133px)); }

@media (max-height: 860px) {
  #faq .faq__eyebrow { margin-bottom: 16px; }
  #faq .faq__header  { margin-bottom: 28px; }
  #faq .faq-item     { margin-bottom: 12px; }
  #faq .faq-item__question { padding-top: 18px; padding-bottom: 18px; }
  #faq { padding-top: 32px; }
}
@media (max-height: 760px) {
  #faq .faq__header { margin-bottom: 20px; }
  #faq .faq-item { margin-bottom: 9px; }
  #faq .faq-item__question { padding-top: 14px; padding-bottom: 14px; font-size: 0.94em; }
  #faq { padding-top: 20px; }
}


/* v3r283: el marco ya tiene su propio sistema (--alto-marco/--margen-v),
   mi centrado lo empujaba fuera de pantalla. Solo se conserva el ajuste
   de la tarjeta en ventanas bajas. */
@media (max-height: 860px) {
  .manif__card { min-height: clamp(210px, 21vw, 290px); }
  .manif__card .manif__text { line-height: 1.7; }
}

/* ==================================================================
   v3r284 — MANIFIESTO, dos correcciones de origen:
   1) el marco sumaba el alto de la barra a su posicion, pero la seccion
      YA empieza bajo la barra (asi la deja el iman): se contaba dos veces
      y el marco caia fuera de pantalla en ventanas bajas;
   2) la tarjeta se anclaba al pie de la SECCION (que mide mas que la
      banda visible); ahora se ancla al pie de la BANDA.
   ================================================================== */
.manif__frame { top: var(--margen-v); }
.manif__card  { bottom: calc(12px + var(--extra, 0px)); }

/* ==================================================================
   v3r285 — MOVIL: se libera el ancho minimo de 960px que forzaba el
   layout de escritorio en telefonos (era un guardarraíl del trabajo
   desktop-first). Por debajo de 900px mandan las media queries moviles.
   ================================================================== */
@media (max-width: 900px) {
  body { min-width: 0; }
  /* el modulo fijo no aplica en movil: cada seccion crece con su contenido */
  #ia, #autoridad, #proof, #arsenal, #demo, #planes, #faq, #cta-final {
    min-height: auto;
    height: auto;
  }
  #faq { padding-bottom: 72px; }
}


/* ==================================================================
   v3r290 — MOVIL (<=900px)
   HERO: la pantalla se divide en tres; los botones se colocan sobre la
   frontera del segundo y el tercer tercio. El subtitulo no aparece.
   MENU: recibe la navegacion de la columna lateral (punto + romano +
   nombre) en vino; la columna lateral desaparece de la pantalla.
   ================================================================== */
@media (max-width: 900px) {

  /* --- HERO: botones en la frontera 2/3 --- */
  .hero__movil {
    position: absolute;
    left: 0; right: 0;
    /* v3r295: en movil el hero mide DOS pantallas (equipo + chica), asi
       que el 66% de su alto caia fuera de vista. Se ancla al alto de la
       PANTALLA: frontera del segundo y el tercer tercio de la primera. */
    /* v3r359: baja hasta quedar POR DEBAJO de la foto del equipo (sus pies
       caen en ~82svh); antes se encimaba con las piernas. */
    top: 76svh;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    padding: 0 5vw;
    z-index: 6;
    pointer-events: none;
  }
  .hero__movil > * { pointer-events: auto; }
  /* v3r292: los tres botones conviven apilados y se relevan con LAS
     MISMAS animaciones de las escenas (heroscene-in / heroscene-out),
     enganchadas al estado real de cada escena. Asi el movimiento es
     identico al de escritorio, donde el boton viaja dentro de su escena. */
  /* v3r296: NO tocar position aqui — el relative pisaba el absolute de
     la regla de arriba y el contenedor caia al final del hero. */
  .hero__movil { min-height: 58px; }
  .hero--editorial .hero__movil .heroed__btn {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    display: inline-flex !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    width: min(78vw, 340px);
    justify-content: center;
    padding: 18px 26px;
    font-size: 14px;
    letter-spacing: 0.12em;
  }
  /* v3r293: el boton de la escena 1 tiene reglas de la entrada del hero
     con :has() (mas especificas) que lo dejaban siempre visible; aqui se
     neutralizan para que participe del relevo como los otros dos. */
  .hero--editorial:has(.heroed__team.is-crecer) .hero__movil .heroed__btn--s1,
  .hero--editorial:has(.heroed__team.is-crecido) .hero__movil .heroed__btn--s1 {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    -webkit-mask-image: none;
            mask-image: none;
    animation: none;
  }
  .hero--editorial:has(.heroscene--1.is-active) .hero__movil .heroed__btn--s1,
  .hero--editorial:has(.heroscene--2.is-active) .hero__movil .heroed__btn--s2,
  .hero--editorial:has(.heroscene--3.is-active) .hero__movil .heroed__btn--s3 {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    animation: heroBtnMovilIn 700ms cubic-bezier(.22, 1, .36, 1);
  }
  .hero--editorial:has(.heroscene--1.is-leaving) .hero__movil .heroed__btn--s1,
  .hero--editorial:has(.heroscene--2.is-leaving) .hero__movil .heroed__btn--s2,
  .hero--editorial:has(.heroscene--3.is-leaving) .hero__movil .heroed__btn--s3 {
    opacity: 0;
    visibility: visible;
    animation: heroBtnMovilOut 550ms cubic-bezier(.55, 0, .55, .2) forwards;
  }
  /* mismas curvas que las escenas, con el centrado conservado */
  @keyframes heroBtnMovilIn {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 34px)); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
  }
  @keyframes heroBtnMovilOut {
    from { opacity: 1; transform: translate(-50%, -50%); }
    to   { opacity: 0; transform: translate(-50%, calc(-50% - 34px)); }
  }

  /* --- sin subtitulo en el hero movil --- */
  .hero--editorial .heroscene__copy { display: none; }

  /* --- la columna lateral vive solo dentro del menu --- */
  .side-nav, .side-nav__shadow { display: none !important; }

  /* --- MENU con el lenguaje de la columna, en vino --- */
  .nav-drawer__list { width: 100%; }
  .nav-drawer__list li + li { margin-top: 4px; }
  .nav-drawer__link {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    padding: 11px 0;
  }
  .nav-drawer__dot {
    order: 3;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(74, 14, 44, 0.34);
    flex: 0 0 auto;
    transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
  }
  .nav-drawer__num {
    order: 2;
    flex: 0 0 34px;
    text-align: right;
    font-family: var(--ff-display, serif);
    font-size: 15px;
    letter-spacing: 0.05em;
    color: rgba(74, 14, 44, 0.5);
    transition: color .3s ease, font-size .3s ease;
  }
  .nav-drawer__num svg { width: 14px; height: 14px; display: block; margin-left: auto; }
  .nav-drawer__txt { order: 1; color: var(--c-vino); }

  .nav-drawer__link.is-active .nav-drawer__dot,
  .nav-drawer__link:active .nav-drawer__dot {
    background: var(--c-vino);
    transform: scale(1.5);
    box-shadow: 0 0 10px rgba(74, 14, 44, 0.35);
  }
  .nav-drawer__link.is-active .nav-drawer__num { color: var(--c-vino); font-size: 17px; }
  /* v3r298: dentro del CTA (pastilla vino) el texto y el numeral iban en
     vino sobre vino y desaparecian: aqui heredan el neon del boton. */
  .nav-drawer__link--cta { justify-content: center; gap: 12px; }
  .nav-drawer__link--cta .nav-drawer__txt,
  .nav-drawer__link--cta .nav-drawer__num { color: var(--c-neon); }
  .nav-drawer__link--cta .nav-drawer__dot { background: var(--c-neon); }
}

/* v3r294 — en movil el relevo del boton manda sobre el estado final del
   hero (body.is-entrado ... !important), que dejaba el boton 1 siempre
   visible y rompia el ciclo. */
@media (max-width: 900px) {
  body.is-entrado .hero__movil .heroed__btn {
    opacity: 0 !important;
    visibility: hidden !important;
    animation: none !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  body.is-entrado .hero--editorial:has(.heroscene--1.is-active) .hero__movil .heroed__btn--s1,
  body.is-entrado .hero--editorial:has(.heroscene--2.is-active) .hero__movil .heroed__btn--s2,
  body.is-entrado .hero--editorial:has(.heroscene--3.is-active) .hero__movil .heroed__btn--s3 {
    opacity: 1 !important;
    visibility: visible !important;
    animation: heroBtnMovilIn 700ms cubic-bezier(.22, 1, .36, 1) !important;
  }
  body.is-entrado .hero--editorial:has(.heroscene--1.is-leaving) .hero__movil .heroed__btn--s1,
  body.is-entrado .hero--editorial:has(.heroscene--2.is-leaving) .hero__movil .heroed__btn--s2,
  body.is-entrado .hero--editorial:has(.heroscene--3.is-leaving) .hero__movil .heroed__btn--s3 {
    opacity: 0 !important;
    visibility: visible !important;
    animation: heroBtnMovilOut 550ms cubic-bezier(.55, 0, .55, .2) forwards !important;
  }
}

/* v3r297 — con el menu abierto el WhatsApp se retira (competia con el
   cierre del panel y tapaba el ultimo elemento de la lista). Vuelve solo
   al cerrarlo, con el mismo fundido. */
body:has(.nav-drawer.is-open) .wa-floating {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: scale(0.85);
  transition: opacity 220ms ease, transform 220ms ease;
}

/* ==================================================================
   v3r299 — el llamado del menu deja de ser una fila mas de la lista:
   es un boton propio, separado, al pie del panel.
   ================================================================== */
@media (max-width: 900px) {
  .nav-drawer__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    align-self: flex-end;
    margin-top: 38px;
    padding: 16px 26px;
    border-radius: 999px;
    background: var(--c-vino);
    color: var(--c-neon);
    font-family: var(--ff-sans);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 14px 34px rgba(74, 14, 44, 0.28);
    transition: transform .25s var(--ease-brut), box-shadow .3s ease;
  }
  .nav-drawer__cta:active { transform: scale(0.97); }
  /* separacion clara respecto a la lista */
  .nav-drawer__list { padding-bottom: 6px; border-bottom: 1px solid rgba(74, 14, 44, 0.14); }
}

/* ==================================================================
   v3r300 — SECCION DE LA CHICA EN MOVIL (<=900px)
   · la chica ocupa el alto completo de la seccion (cuerpo entero, sin
     recorte) y se ancla a la derecha, desbordando ~1/3 de su ancho;
   · titular en TRES lineas, mas grande, a la izquierda y centrado en
     vertical; el texto puede pasar sobre ella, como en escritorio;
   · subtitulo y boton debajo, tambien a la izquierda y mas grandes.
   ================================================================== */
@media (max-width: 900px) {
  /* la seccion se ajusta al alto de la chica con su margen */
  #ia.iahero {
    min-height: 0;
    height: auto;
    padding: 76px 0 64px;
    position: relative;
    overflow: clip;
  }
  .iahero__stage {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 78svh;
    transform: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 6vw;
  }

  /* --- CHICA: alto completo, pegada a la derecha, se sale un tercio --- */
  .iahero .iahero__girl {
    position: absolute;
    left: auto;
    /* v3r302: el desborde debe medirse sobre ELLA, no sobre la pantalla.
       Un porcentaje en 'right' se calcula contra el ancho del contenedor
       (516px aqui), asi que -33% la sacaba medio cuerpo. Con translateX
       el porcentaje es del propio elemento: sale exactamente un tercio. */
    right: 0;
    /* v3r308: la regla de la coreografia (.iahero.is-live .iahero__girl
       { transform: none }) es mas especifica y anulaba el desplazamiento.
       Aqui se impone el encuadre movil. */
    transform: translate(30%, -50%) !important;
    top: 0;
    bottom: 0;
    /* v3r306: 15% mas grande SIN alterar el alto de la seccion. El
       crecimiento se ancla al pie (transform-origin abajo), asi que se
       reparte hacia arriba y el desborde inferior lo recorta la seccion. */
    /* v3r307: centrada en vertical dentro de la seccion — el 15% extra se
       reparte por igual arriba y abajo, asi la cabeza no choca con el borde. */
    height: 115%;
    width: auto;
    aspect-ratio: 810 / 1440;
    top: 50%;
    bottom: auto;
    z-index: 0;
    pointer-events: none;
  }
  .iahero .iahero__girlvid,
  .iahero .iahero__despedida {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
  }

  /* --- TEXTO: izquierda, sobre la chica --- */
  .iahero__title,
  .iahero__sub,
  .iahero__link {
    position: relative;
    left: auto; right: auto; top: auto; bottom: auto;
    text-align: left;
    z-index: 2;
  }
  .iahero__title {
    font-size: clamp(34px, 10.2vw, 58px);
    line-height: 1.04;
    margin: 0 0 22px;
    max-width: 92%;
  }
  /* v3r301: las lineas son absolutas en escritorio (left/top fijos del
     lienzo); en movil pasan a flujo para apilarse y quedar a la izquierda. */
  .iahero .iahero__line {
    position: relative;
    left: auto; right: auto; top: auto; bottom: auto;
    display: block;
    white-space: nowrap;
    font-size: inherit;
    line-height: 1.04;
  }
  .iahero__l3 { display: block; }          /* tercera linea solo en movil */
  .iahero .iahero__txt { display: inline; }

  .iahero__sub {
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0.06em;
    margin: 0 0 30px;
    max-width: 76%;
  }
  .iahero__link {
    align-self: flex-start;
    display: inline-flex;
    padding: 17px 28px;
    font-size: 13px;
    letter-spacing: 0.14em;
  }
}

/* en escritorio la tercera linea no existe */
@media (min-width: 901px) { .iahero__l3 { display: none; } }

/* ==================================================================
   v3r309 — MOVIL: el bloque de texto reserva su sitio. Mientras el
   titular se teclea letra por letra, su caja crecia linea a linea y
   empujaba al subtitulo y al boton. Ahora cada pieza tiene su altura
   reservada, asi el tecleo ocurre DENTRO de un hueco que ya existe.
   ================================================================== */
@media (max-width: 900px) {
  /* cada linea ocupa su alto aunque este vacia */
  .iahero .iahero__line {
    min-height: 1.04em;
    line-height: 1.04;
  }
  /* el titular reserva sus tres lineas */
  .iahero .iahero__title {
    min-height: calc(3 * 1.04em);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  /* el subtitulo reserva sus dos lineas (todas las escenas usan dos) */
  .iahero .iahero__sub {
    min-height: calc(2 * 1.6em);
  }
}

/* ==================================================================
   v3r311 — MANIFIESTO EN MOVIL: la seccion se parte en dos mitades.
   Arriba el video (marco a ancho completo, centrado en su mitad) y
   abajo la tarjeta de texto, ocupando la suya. Sin superposiciones.
   ================================================================== */
@media (max-width: 900px) {
  #autoridad .manif {
    height: auto;
    min-height: 0;
    padding: 0;
  }
  #autoridad .manif__stage {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-rows: 1fr 1fr;      /* dos mitades iguales */
    align-items: center;
    justify-items: center;
    gap: 0;
    width: 100%;
    height: auto;
    min-height: calc(100svh - var(--nav-h, 62px));
    padding: 18px var(--pag, 22px) 22px;
    transform: none;
  }
  #autoridad .manif__frame {
    position: relative;
    left: auto; right: auto; top: auto; bottom: auto;
    transform: none;
    width: 100%;
    height: auto;
    aspect-ratio: 1272 / 720;
    align-self: center;
  }
  #autoridad .manif__card {
    position: relative;
    left: auto; right: auto; top: auto; bottom: auto;
    transform: none;
    width: 100%;
    height: auto;
    min-height: 0;
    align-self: center;
  }
}

/* ==================================================================
   v3r312 — MANIFIESTO EN MOVIL: titulo de seccion arriba, video y
   tarjeta mas juntos, y la tarjeta con ALTO RESERVADO (relativo a la
   pantalla) para que el relevo de textos no la haga crecer y encoger.
   ================================================================== */
.manif__seccion-eyebrow { display: none; }

@media (max-width: 900px) {
  .manif__seccion-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px var(--pag, 22px) 0;   /* v3r313: mas cerca del video */
  }
  .manif__index {
    font-family: var(--ff-display, serif);
    font-size: 19px;
    color: var(--c-beige-claro);
    letter-spacing: 0.04em;
  }
  .manif__label-eyebrow {
    font-family: var(--ff-sans);
    font-size: 10px;
    letter-spacing: 0.22em;
    color: rgba(240, 226, 214, 0.62);
    padding-left: 14px;
    border-left: 1px solid rgba(240, 226, 214, 0.24);
  }

  /* video y tarjeta juntos, sin la separacion de las dos mitades */
  #autoridad .manif__stage {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;   /* v3r314: pegado al titulo, sin aire de centrado */
    gap: 16px;
    min-height: 0;
    padding: 12px var(--pag, 22px) 24px;
  }
  #autoridad .manif { display: flex; flex-direction: column; }

  /* v3r313: ALTO FIJO (no minimo): con min-height el texto mas largo
     seguia empujando la caja. Escala con la pantalla, no con el contenido. */
  #autoridad .manif__card {
    height: clamp(230px, 34svh, 330px);
    min-height: 0;
    display: flex;
    flex-direction: column;    /* numerales arriba, texto debajo */
    gap: 14px;
    overflow: hidden;
  }
  /* v3r314: numerales en fila y CENTRADOS, como el resto del bloque */
  #autoridad .manif__tabs {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: center;
    gap: 24px;
  }
  /* texto centrado y el bloque centrado en vertical dentro del recuadro */
  #autoridad .manif__card { text-align: center; }
  #autoridad .manif__card .manif__title,
  #autoridad .manif__card .manif__text,
  #autoridad .manif__panels .manif__eyebrow-label { text-align: center; }
  /* v3r319 — el subrayado tenia ancho fijo (190-255px) y anclaje a la
     izquierda: con el titulo centrado y de una sola linea quedaba
     descolocado y no seguia el largo de cada titular. Ahora el titulo se
     ajusta a su texto y el subrayado toma SU ancho, asi acompana a cada
     frase y queda centrado con ella. */
  #autoridad .manif__card .manif__title {
    display: inline-block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
  }
  #autoridad .manif__underline {
    left: 0;
    right: 0;
    width: auto;
    bottom: -8px;
    margin: 0;
  }
  #autoridad .manif__link { align-self: center; }
  #autoridad .manif__panels {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
  }
}

/* ==================================================================
   v3r315 — MANIFIESTO EN MOVIL, ajuste fino:
   · la seccion ocupa como minimo la pantalla completa;
   · separacion intermedia entre el titulo de seccion y el video;
   · video mas cuadrado (3:2) para ganar presencia;
   · el bloque completo se centra en vertical;
   · los titulares del recuadro caben en una linea si les alcanza.
   ================================================================== */
@media (max-width: 900px) {
  #autoridad.manif {
    min-height: 100svh;
    justify-content: center;          /* bloque centrado en la pantalla */
  }
  .manif__seccion-eyebrow {
    padding: 0 var(--pag, 22px) 0;
    margin-bottom: 26px;              /* intermedio entre 12 y 73 */
  }
  #autoridad .manif__stage {
    justify-content: center;
    flex: 0 0 auto;
    padding: 0 var(--pag, 22px);
  }
  /* video ligeramente mas cuadrado y con mas peso */
  #autoridad .manif__frame { aspect-ratio: 3 / 2; }

  /* titulares del recuadro: una sola linea cuando quepan (el salto lo
     retira el JS, sustituyendolo por un espacio real) */
  #autoridad .manif__card .manif__title {
    white-space: normal;
    text-wrap: balance;
  }
}

/* v3r317 — en movil el contenido nace desde SU numeral (que esta arriba,
   en fila), no desde la esquina izquierda. */
@media (max-width: 900px) {
  #autoridad .manif__panel { transform-origin: center top; }
  #autoridad .manif__panel.is-entering {
    animation-name: manifPanelInMovil;
  }
  @keyframes manifPanelInMovil {
    from { opacity: 0; transform: translate(var(--ox, 0px), var(--oy, -20px)) scale(0.45); }
    to   { opacity: 1; transform: translate(0, 0) scale(1); }
  }
}

/* ==================================================================
   v3r320 — la franja blanca de la derecha: html reservaba un carril
   para la barra de desplazamiento (scrollbar-gutter: stable, puesto
   para evitar el salto de 17px en Windows). En pantallas chicas ese
   carril se SUMA a la barra real y deja el documento mas angosto que
   la ventana. En movil no hace falta.
   ================================================================== */
@media (max-width: 900px) {
  html { scrollbar-gutter: auto; }
  html, body { max-width: 100%; overflow-x: clip; }
}


/* v3r323 — en el recuadro sobra aire: el titular respira mas respecto al
   parrafo (y este respecto al enlace), aprovechando el alto reservado. */
@media (max-width: 900px) {
  #autoridad .manif__card .manif__title { margin-bottom: 26px; }
  #autoridad .manif__card .manif__text  { margin-bottom: 22px; }
  #autoridad .manif__panels .manif__eyebrow-label { margin-bottom: 16px; }
}

/* ==================================================================
   v3r324 — PROOF EN MOVIL: todo dentro de la pantalla, repartido y
   centrado en vertical, con aire para el titulo de seccion. Y cada
   metrica nace cuando entra en vista (clase .is-visto desde el JS).
   ================================================================== */
@media (max-width: 900px) {
  #proof {
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: 0;
  }
  #proof .proof__inner {
    width: 100%;
    padding: 0 6vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #proof .proof__eyebrow { margin-bottom: 22px; }
  #proof .proof__statement {
    margin: 0 0 34px;
    font-size: clamp(30px, 8.6vw, 46px);
    line-height: 1.06;
  }
  #proof .proof__grid {
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 3.4svh, 34px);
  }
  #proof .proof__num { font-size: clamp(44px, 13vw, 70px); line-height: 1; }
  #proof .proof__label { font-size: 13px; line-height: 1.5; }

  /* --- entrada una por una --- */
  #proof .proof__metric {
    opacity: 0;
    transform: translateY(26px);
  }
  #proof .proof__metric.is-visto {
    opacity: 1;
    transform: none;
    transition: opacity 640ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 640ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  @media (prefers-reduced-motion: reduce) {
    #proof .proof__metric { opacity: 1; transform: none; }
  }
}

/* v3r325 — PROOF EN MOVIL: todo alineado al eje vertical de la seccion
   (centrado horizontal), incluidas cifras, subrayados y descripciones. */
@media (max-width: 900px) {
  #proof .proof__inner { align-items: center; text-align: center; }
  #proof .proof__eyebrow { justify-content: center; }
  #proof .proof__statement { text-align: center; }
  #proof .proof__grid { align-items: center; }
  #proof .proof__metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
  }
  #proof .proof__num { text-align: center; }
  #proof .proof__label { text-align: center; max-width: 30ch; }
  /* el subrayado de cada cifra, centrado bajo ella */
  #proof .proof__metric::after,
  #proof .proof__rule { margin-left: auto; margin-right: auto; }
}

/* ==================================================================
   v3r326 — MOVIL: las secciones miden la BANDA VISIBLE (pantalla menos
   la barra), no la pantalla entera. Con 100svh la seccion arrancaba
   bajo la barra y sus ultimos px caian fuera, asi que el contenido
   centrado en ella se veia alto en la pantalla.
   ================================================================== */
@media (max-width: 900px) {
  #proof, #autoridad.manif {
    min-height: calc(100svh - var(--nav-h, 62px));
  }
  #autoridad .manif__stage {
    min-height: 0;
  }
}

/* v3r327 — el manifiesto se pasaba 17px de la banda visible: se comprime
   el recuadro y el aire del titulo para que todo entre en pantalla. */
@media (max-width: 900px) {
  #autoridad .manif__card { height: clamp(180px, 26svh, 260px); }
  .manif__seccion-eyebrow { margin-bottom: 18px; }
  #autoridad .manif__stage { padding-bottom: 16px; }
}

/* ==================================================================
   v3r328 — ARSENAL EN MOVIL (paso 1 de 3): estado CERRADO.
   · las tarjetas ganan ancho (menos margen lateral);
   · se retira el texto que dependia del cursor (en movil no hay hover);
   · se conserva el + como senal de que la tarjeta se puede abrir.
   ================================================================== */
@media (max-width: 900px) {
  #arsenal .arsenal__columns {
    padding-left: 10px;
    padding-right: 10px;
    gap: 10px;
  }
  #arsenal .arsenal__eyebrow { padding-left: 10px; }

  /* el bloque que se revelaba con el cursor no aplica en tactil */
  #arsenal .pilar:not(.is-active) .pilar__reveal { display: none; }

  /* el + queda visible y con peso de boton */
  #arsenal .pilar:not(.is-active) .pilar__plus {
    display: grid;
    place-items: center;
    opacity: 1;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(240, 226, 214, 0.14);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border: 1px solid rgba(240, 226, 214, 0.24);
    color: var(--c-beige-claro);
    font-size: 20px;
    line-height: 1;
  }
}


/* ==================================================================
   v3r334 — ARSENAL EN MOVIL: pestanas + panel a pantalla completa.
   Mismo lenguaje visual que el pilar abierto de escritorio: fondo crema,
   numeral romano italico + titulo en una fila, lead en display vino y
   filas con hairline, flecha y miniatura de video.
   ================================================================== */
@media (max-width: 900px) {

  .arsmovil {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    top: var(--nav-h, 62px);
    z-index: 180;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility 0s linear .3s;
  }
  .arsmovil.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s ease, visibility 0s;
  }
  /* telon del portal: entra con el mismo retraso que el panel para que
     durante el vuelo de las pestanas aun se vea la seccion por debajo */
  .arsmovil::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--c-white);
    z-index: 0;
  }
  .arsmovil.is-open::before { animation: arsmovilFondo .45s ease .42s both; }
  /* mientras vive el portal, las tarjetas reales no se pintan: el morph
     debe aterrizar en un hueco vacio, no encima de la tarjeta ya puesta */
  #arsenal.arsenal--oculto .pilar { opacity: 0; }

  /* ASPECTO DE TARJETA de las pestanas (extremo del morph) */
  .arsmovil.is-tarjeta .arsmovil__tab {
    z-index: 2;
    box-shadow: none;
    border-radius: 18px;
    background-color: #2a0f1c;
    color: #fff;
    opacity: 1;
  }
  .arsmovil.is-tarjeta .arsmovil__tabnum { font-size: 40px; }
  .arsmovil.is-tarjeta .arsmovil__tabtit { display: block; opacity: .92; }
  .arsmovil .arsmovil__tabs { overflow: visible; }

  /* CIERRE POR TRANSFORMACION: el panel y el telon se apagan y cada pestana
     se convierte en su tarjeta (crece, se oscurece, el romano se agranda y
     aparece el titulo) hasta calzar con la tarjeta real que hay debajo. */
  .arsmovil.is-cerrando::before,
  .arsmovil.is-cerrando .arsmovil__panel {
    animation: none;
    opacity: 0;
    transition: opacity .3s ease;
  }
  .arsmovil.is-cerrando .arsmovil__panel { pointer-events: none; }

  .arsmovil__tabs, .arsmovil__panel { position: relative; z-index: 1; }

  /* ---- fila de pestanas (las tarjetas encogidas) ---- */
  .arsmovil__tabs {
    flex: 0 0 auto;
    display: flex;
    gap: 0;
    background: transparent;
  }
  .arsmovil__tab {
    flex: 1 1 0;
    min-width: 0;
    height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    text-align: center;
    border: 0;
    box-shadow: inset 1px 0 0 rgba(74, 14, 44, .08);
    background: var(--c-white);
    color: var(--c-vino);
    opacity: .5;
    font-family: var(--ff-display);
    font-weight: 900;
    font-style: italic;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transform-origin: center center;
  }
  .arsmovil__tab:first-child { box-shadow: none; }
  .arsmovil__tabnum {
    display: block;
    text-align: center;
    font-size: inherit;
    line-height: 1;
    transition: font-size .6s var(--ease-brut);
  }
  .arsmovil__tabtit {
    display: none;   /* solo existe en el extremo "tarjeta" del morph */
    margin-top: 10px;
    max-width: 84%;
    font-family: var(--ff-display);
    font-weight: 900;
    font-style: normal;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity .45s ease;
  }
  .arsmovil__tab.is-active {
    opacity: 1;
    background: #f7f2ea;
    box-shadow: none;
  }

  /* ---- panel: la tarjeta abierta ---- */
  /* el fondo del panel entra DESPUES del vuelo de las tarjetas, para que
     durante el viaje aun se vean las tarjetas originales por debajo */
  .arsmovil.is-open .arsmovil__panel { animation: arsmovilFondo .45s ease .42s both; }
  @keyframes arsmovilFondo { from { opacity: 0 } to { opacity: 1 } }

  .arsmovil__panel {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #f7f2ea;
    padding: 26px 18px 30px;
    color: var(--c-vino);
  }
  .arsmovil__cerrar {
    position: absolute;
    top: 18px; right: 16px;
    width: 34px; height: 34px;
    border: 1px solid rgba(74, 14, 44, .22);
    border-radius: 50%;
    background: transparent;
    color: var(--c-vino);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
  }

  .arsmovil__head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0 44px 14px 0;
  }
  .arsmovil__roman {
    flex: 0 0 auto;
    font-family: var(--ff-display);
    font-weight: 900;
    font-style: italic;
    font-size: 46px;
    line-height: .9;
    color: var(--c-vino);
  }
  .arsmovil__titulo {
    margin: 0;
    font-family: var(--ff-display);
    font-weight: 900;
    font-size: clamp(19px, 5.6vw, 26px);
    line-height: 1.04;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--c-vino);
  }
  .arsmovil__lead {
    margin: 0 0 20px;
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: clamp(17px, 4.8vw, 21px);
    line-height: 1.26;
    color: var(--c-vino);
  }
  .arsmovil__lead em { font-style: italic; font-weight: 700; }

  /* ---- filas de servicio ---- */
  .arsmovil__filas {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(74, 14, 44, .10);
  }
  .arsmovil__fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(74, 14, 44, .10);
    cursor: pointer;
  }
  .arsmovil__nom {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ff-sans);
    font-size: 15px;
    line-height: 1.25;
    color: var(--c-vino);
  }
  .arsmovil__nom::before {
    content: "\2192";
    flex: 0 0 auto;
    font-family: var(--ff-display);
    font-weight: 900;
    font-size: 16px;
    opacity: .45;
  }
  .arsmovil__mini {
    position: relative;
    flex: 0 0 auto;
    width: 124px;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(74, 14, 44, .08);
  }
  .arsmovil__vid {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .arsmovil__mas {
    position: absolute;
    right: 6px; bottom: 6px;
    display: grid;
    place-items: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .88);
    color: var(--c-vino);
    font-size: 15px;
    line-height: 1;
  }

  /* ---- entrada escalonada del contenido del panel ---- */
  .arsmovil__panel.is-entrando .arsmovil__head,
  .arsmovil__panel.is-entrando .arsmovil__lead,
  .arsmovil__panel.is-entrando .arsmovil__fila {
    animation: arsmovilSube .58s cubic-bezier(.16,1,.3,1) both;
  }
  .arsmovil__panel.is-entrando .arsmovil__head { animation-delay: .18s; }
  .arsmovil__panel.is-entrando .arsmovil__lead { animation-delay: .26s; }
  .arsmovil__panel.is-entrando .arsmovil__fila:nth-child(1) { animation-delay: .34s; }
  .arsmovil__panel.is-entrando .arsmovil__fila:nth-child(2) { animation-delay: .42s; }
  .arsmovil__panel.is-entrando .arsmovil__fila:nth-child(3) { animation-delay: .50s; }
  .arsmovil__panel.is-entrando .arsmovil__fila:nth-child(4) { animation-delay: .58s; }
  @keyframes arsmovilSube {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }

  /* con el panel abierto no se scrollea la pagina detras */
  body.arsmovil-abierto { overflow: hidden; }

  /* fuera el boton de WhatsApp y el menu lateral mientras esta abierto */
  body.arsmovil-abierto .wa-floating,
  body.arsmovil-abierto .side-nav { opacity: 0; pointer-events: none; transition: opacity .25s ease; }

  /* el visor de video va POR ENCIMA del panel */
  .visor { z-index: 220; }

  /* la barra superior se vuelve solida: detras esta el panel, no la seccion */
  body.arsmovil-abierto .nav { background: var(--c-white); }
}

/* ==================================================================
   v3r345 — DEMO EN MOVIL con la escena vertical.
   Reparto de la seccion: titulo arriba con aire, telefono a la izquierda
   (ya viene en la foto), la chica a la derecha detras de la mesa y el
   boton anclado abajo.
   ================================================================== */
@media (max-width: 900px) {
  #demo.demo {
    display: block;
    position: relative;
    padding: 0;
    background: var(--c-noche);
    min-height: calc(100svh - var(--nav-h, 62px));
  }

  #demo .demo__eyebrow {
    position: absolute;
    top: 16px; left: 0; right: 0;
    justify-content: center;
    z-index: 4;
  }

  /* el stage cubre la seccion: sirve de referencia para anclar el boton
     abajo sin sacar los textos de su capa (position:static mataria el
     z-index de .demo__texts y el texto se iria detras de la escena) */
  #demo .demo__stage {
    display: block;
    position: absolute;
    inset: 0;
    padding: 0;
    z-index: 3;
  }

  /* los textos se centran en la franja que queda ARRIBA del telefono
     (de la etiqueta al borde superior de la pantalla del iPhone) */
  #demo .demo__texts {
    position: absolute;
    top: 66px;
    left: 0; right: 0;
    height: calc(var(--demo-hueco-top, 320px) - 72px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 20px;
    text-align: center;
    z-index: 4;
  }
  #demo .demo__texts > .demo__title {
    margin: 0;
    font-size: clamp(21px, 5.6vw, 27px);
    line-height: 1.1;
  }
  #demo .demo__texts > .demo__lead {
    margin: 12px auto 0;
    max-width: 30ch;
    font-size: 13px;
    line-height: 1.45;
  }

  /* el CTA de escritorio se oculta: en movil se usa el CTA propio, anclado
     al fondo del stage (o sea, al fondo de la seccion) */
  #demo .demo__texts > .demo__cta { display: none; }
  /* !important porque una regla previa de movil lo oculta con !important */
  #demo .demo__cta--mobile {
    display: inline-flex !important;
    position: absolute;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    margin: 0;
    padding: 15px 30px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 5;
  }

  /* la chica: mitad derecha, detras de la mesa (el recorte de la linea de
     la mesa lo calcula el JS con MESA_A/MESA_B de la escena vertical) */
  #demo .demo__chica {
    right: -34%;
    left: auto;
    top: auto;
    bottom: -37%;
    height: 112%;
    width: auto;
    opacity: .92;
    z-index: 1;
  }
}

/* ==================================================================
   v3r351 — ESQUINAS del chat proyectado en MOVIL.
   El radio va sobre el lienzo BASE (250x540) y la homografia lo estira:
   hacia px de foto sx = 370/250 = 1.48 y sy = 1100/540 = 2.04. Para que
   la esquina se vea circular como la del iPhone (radio ~55 px de foto),
   el radio base debe ser eliptico: rx = 55/1.48 = 37, ry = 55/2.04 = 27.
   ================================================================== */
@media (max-width: 900px) {
  #demo .demo__pantalla .chat-phone { border-radius: 28px / 21px; }
}

/* ==================================================================
   v3r357 — PLANES EN MOVIL: la seccion ocupa la pantalla completa y su
   contenido se centra en la banda visible (pantalla menos barra).
   Se anula el padding inferior del modulo de escritorio (--extra), que
   dejaba una franja muerta abajo.
   ================================================================== */
@media (max-width: 900px) {
  #planes.planes {
    min-height: calc(100svh - var(--nav-h, 62px));
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #planes .planes__grid {
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

/* ==================================================================
   v3r358 — En MOVIL el snap nativo solo vale para la pantalla 2 del hero.
   El bloque del hero activa `scroll-snap-type: y` en <html>, y como todas
   las secciones llevan `scroll-snap-align: start`, cada seccion se volvia
   un iman nativo (mucho mas duro que el iman JS) y en secciones de alto
   exacto — como el demo — costaba salir. Aqui se apaga el snap de las
   secciones; el iman suave de JS sigue actuando solo donde toca.
   ================================================================== */
@media (max-width: 900px) {
  #hero, #ia, #autoridad, #proof, #arsenal, #demo, #planes, #faq, #cta-final {
    scroll-snap-align: none;
  }
}

/* ==================================================================
   v3r361 — MANIFIESTO: la etiqueta de seccion iguala a las demas.
   Estaba a la izquierda (justify-content: normal) y con 19/10px, mientras
   las etiquetas en flujo de las otras secciones (proof, planes, faq) van
   centradas con 24/11px.
   ================================================================== */
@media (max-width: 900px) {
  .manif__seccion-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .manif__seccion-eyebrow .manif__index { font-size: 24px; }
  .manif__seccion-eyebrow .manif__label,
  .manif__seccion-eyebrow span:last-child { font-size: 11px; letter-spacing: .22em; }
}

/* ==================================================================
   v3r362 — MOVIL: FAQ a pantalla completa y pulso del CTA de vuelta.
   ================================================================== */
@media (max-width: 900px) {
  /* v3r379: contenido ANCLADO ARRIBA, como en escritorio. Con
     justify-content:center, abrir una pregunta hacia crecer la seccion y el
     centrado recolocaba TODO el bloque; compensarlo con scroll dejaba la
     pregunta quieta pero movia la pagina entera. Anclado arriba, abrir una
     pregunta solo empuja lo que esta DEBAJO: ni el titulo ni las preguntas
     anteriores se mueven. La seccion sigue ocupando la pantalla completa. */
  #faq.faq {
    min-height: calc(100svh - var(--nav-h, 62px));
    padding-top: 22px;
    padding-bottom: 22px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  /* el pulso se habia apagado en el bloque de rendimiento; se recupera
     porque solo anima transform + opacity (barato para el compositor) */
  .cta-final__pulse,
  .cta-final__pulse--2 {
    animation: ctaAnillo 4.6s cubic-bezier(0.16, 1, 0.3, 1) infinite !important;
    opacity: 0;
    will-change: transform, opacity;
  }
  .cta-final__pulse--2 { animation-delay: .55s !important; }
}

/* ==================================================================
   v3r363 — PIE DE PAGINA EN MOVIL: dos columnas, centrado y sin franja.
   La franja blanca del final era el fondo del <body> asomando: el pie no
   tenia fondo propio y el degradado de la zona oscura no llegaba al ultimo
   tramo. Ahora el pie pinta su propio fondo noche.
   ================================================================== */
@media (max-width: 900px) {
  .dark-footer {
    /* sin fondo propio: el degradado de la zona oscura es el mismo de
       escritorio; la franja blanca se arregla remidiendo el lienzo */
    padding: 16px 20px 14px;
    display: flex;
    align-items: center;
  }
  .dark-footer__inner { width: 100%; }

  /* marca centrada y compacta */
  .dark-footer__top {
    display: block;
    gap: 0;
    padding-bottom: 10px;
    text-align: center;
  }
  .dark-footer__logo { width: 116px; height: auto; margin: 0 auto; }
  .dark-footer__tagline { margin: 8px 0 14px; font-size: 10px; letter-spacing: .2em; }

  /* datos en DOS columnas para acortar el pie a la mitad */
  .dark-footer__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 18px;
    align-items: center;
    text-align: left;
  }
  .dark-footer__cols > div:nth-child(2) { grid-row: span 2; }
  .dark-footer__cols .caps { font-size: 9px; letter-spacing: .2em; }
  .dark-footer__cols p {
    margin: 4px 0 0;
    font-size: 11.5px;
    line-height: 1.4;
    overflow-wrap: anywhere;   /* la direccion no se sale de su columna */
  }
  /* el <br> se conserva: sin el, "Benito Juarez," y "03810" se pegan */

  .dark-footer__legal {
    margin-top: 12px;
    padding-top: 10px;
    display: grid;
    gap: 4px;
    font-size: 9px;
    line-height: 1.45;
    text-align: center;
  }
}

/* v3r365 — el CTA final arrastraba el padding inferior del modulo de
   escritorio (133px de --extra) con solo 201px de contenido. En movil se
   ajusta al contenido para que CTA y pie quepan en la misma pantalla. */
@media (max-width: 900px) {
  /* v3r372: la seccion de cierre ocupa la pantalla completa con su
     contenido centrado (antes se habia recortado al contenido). */
  #cta-final.cta-final {
    min-height: calc(100svh - var(--nav-h, 62px));
    padding: 40px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* ==================================================================
   v3r368 — CARRUSEL DE PLANES EN MOVIL: el contenedor debe medir lo que
   la pantalla, no 1120px. Venia con el ancho y el padding del grid de
   escritorio, asi que se desbordaba de la seccion (overflow:hidden lo
   recortaba) y NUNCA scrolleaba: por eso la coreografia 1→3→2 no se veia.
   ================================================================== */
@media (max-width: 900px) {
  #planes .planes__grid {
    width: 100%;
    max-width: 100%;
    /* aire arriba: con la tarjeta elegida al 104.5% la insignia
       "MAS POPULAR" se recortaba contra el borde del carrusel */
    padding: 20px 16px 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #planes .planes__grid::-webkit-scrollbar { display: none; }
  #planes .plan {
    flex: 0 0 min(320px, 78vw);
    scroll-snap-align: center;
  }
}

/* ==================================================================
   v3r369 — ENTRADA DE PLANES EN MOVIL: viaja el CARRUSEL, no cada tarjeta.
   Antes cada .plan salia de translateX(62vw) DENTRO del contenedor con
   overflow, asi que el vuelo ocurria fuera del area visible: las tarjetas
   no "entraban", se materializaban vacias. Ahora se mueve el carrusel
   completo y las tarjetas entran con toda su informacion visible.
   Ademas, al terminar la coreografia, la tarjeta centrada se marca como
   elegida y toma el mismo tratamiento que el hover de escritorio.
   ================================================================== */
@media (max-width: 900px) {
  .plan.is-entered { animation: none !important; opacity: 1 !important; transform: none !important; }

  /* solo se oculta si el JS va a correr la entrada (si no, se ve normal) */
  #planes .planes__grid.is-oculto { opacity: 0; }
  #planes .planes__grid.is-entrando {
    animation: planesCarruselEntra .78s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  @keyframes planesCarruselEntra {
    0%   { opacity: .25; transform: translateX(34vw); }
    22%  { opacity: 1; }
    60%  { opacity: 1; transform: translateX(-5vw); }
    82%  { transform: translateX(1.8vw); }
    100% { opacity: 1; transform: translateX(0); }
  }
  #planes .planes__grid.is-listo { opacity: 1; }
  #planes .planes__grid.is-entrando { opacity: 1; }

  /* tarjeta centrada = "seleccionada" (equivalente movil del hover) */
  #planes .plan.is-elegido .plan__inner {
    transform: scale(1.045);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .42);
    transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease, filter .4s ease;
  }
  #planes .plan--featured.is-elegido .plan__inner {
    box-shadow: 0 34px 80px rgba(74, 14, 44, .5), 0 12px 30px rgba(74, 14, 44, .28);
  }
  #planes .plan:not(.is-elegido) .plan__inner {
    filter: grayscale(.55) brightness(.82);
    transition: filter .45s ease, transform .5s ease;
  }
}

/* ==================================================================
   v3r387 — REMATE ROTATIVO del cierre. La frase se queda fija y solo
   cambia la ultima parte, para cubrir cinco angulos del mismo mensaje.
   La palabra sale hacia arriba y la siguiente entra desde abajo, con la
   linea de acento acompanando el cambio.
   ================================================================== */
.cta-final__remate {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: bottom;
  transition: width .5s cubic-bezier(.16, 1, .3, 1);
  /* el recorte necesario para el relevo cortaba las colas de la g y la j;
     se abre la caja hacia abajo y se compensa con margen negativo para que
     la linea base no se mueva */
  padding-bottom: .22em;
  margin-bottom: -.22em;
}
.cta-final__palabra {
  display: inline-block;
  white-space: nowrap;
  transition: opacity .34s ease, transform .44s cubic-bezier(.16, 1, .3, 1);
}
.cta-final__remate.is-saliendo .cta-final__palabra {
  opacity: 0;
  transform: translateY(-58%);
}
.cta-final__remate.is-entrando .cta-final__palabra {
  opacity: 0;
  transform: translateY(58%);
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .cta-final__palabra { transition: none; }
}

/* v3r389 — en MOVIL el remate va SIEMPRE en su propia linea: asi el titulo
   se queda en tres filas fijas y lo unico que cambia ocupa la ultima,
   pase lo que pase con el largo de cada frase. */
@media (max-width: 900px) {
  #cta-final .cta-final__remate { display: block; margin-left: auto; margin-right: auto; }
}

/* ==================================================================
   v3r390 — La franja clara del final es el fondo del documento asomando
   por debajo del pie (rebote de scroll / ultimo pixel del lienzo). Se
   pinta con una sombra solida hacia abajo: cubre esa zona sin ocupar
   layout y sin tocar el fondo claro del arranque de la pagina.
   ================================================================== */
.dark-footer {
  box-shadow: 0 60vh 0 0 var(--c-noche);
  clip-path: inset(0 0 -60vh 0);
}

/* ==================================================================
   v3r391 — BARRA LATERAL sin franja: cada punto y su numeral toman el
   color del fondo que tienen DETRAS en ese instante. Como los puntos
   estan a alturas distintas y fijas, el borde entre dos secciones los va
   cruzando de uno en uno: el relevo se ve punto por punto, no de golpe.
   Claro  -> vino (inactivo al 32%, activo solido)
   Oscuro -> neutro claro (inactivo) y neon (activo)
   ================================================================== */
.side-nav__shadow { display: none !important; }

/* base: sin anillos ni halos, solo color */
.side-nav__dot {
  box-shadow: none !important;
  transition: background 420ms ease, width 400ms var(--ease-brut), height 400ms var(--ease-brut);
}
.side-nav__item.is-active .side-nav__dot { box-shadow: none !important; }
.side-nav__item.is-active .side-nav__roman { text-shadow: none; }
.side-nav__item.is-active .side-nav__roman--casa svg { filter: none; }

/* ---- sobre fondo OSCURO ---- */
.side-nav__item.es-oscuro .side-nav__dot { background: rgba(240, 226, 214, 0.5); }
.side-nav__item.es-oscuro .side-nav__roman { color: rgba(240, 226, 214, 0.62); }
.side-nav__item.es-oscuro.is-active .side-nav__dot { background: var(--c-neon); }
.side-nav__item.es-oscuro.is-active .side-nav__roman { color: var(--c-neon); }

/* ---- sobre fondo CLARO ---- */
.side-nav__item.es-claro .side-nav__dot { background: rgba(74, 14, 44, 0.32); }
.side-nav__item.es-claro .side-nav__roman { color: rgba(74, 14, 44, 0.42); }
.side-nav__item.es-claro.is-active .side-nav__dot { background: var(--c-vino); }
.side-nav__item.es-claro.is-active .side-nav__roman { color: var(--c-vino); }

/* el icono de la casa hereda el color del numeral */
.side-nav__roman--casa svg { color: inherit; }

/* ==================================================================
   v3r393 — FAQ: al abrir una pregunta la seccion se COMPACTA.
   El modulo de escritorio reserva 133px muertos al pie (--extra). Con una
   respuesta desplegada el listado crece ~120px y el conjunto se sale de la
   banda visible: la seccion "no se adapta" y las ultimas tarjetas quedan
   fuera de pantalla. Mientras haya una abierta se recupera ese espacio
   muerto y se aprieta el aire entre tarjetas.
   ================================================================== */
#faq.faq {
  transition: padding 420ms var(--ease-brut);
}
#faq.faq:has(.faq-item.is-open) {
  padding-bottom: 26px;
  padding-top: 8px;
}
.faq-item { transition: margin-bottom 380ms var(--ease-brut); }
#faq.faq:has(.faq-item.is-open) .faq-item { margin-bottom: 4px; }

/* la respuesta abierta tambien cede su aire inferior */
.faq-item__answer-inner p { transition: padding 380ms var(--ease-brut); }
#faq.faq:has(.faq-item.is-open) .faq-item.is-open .faq-item__answer-inner p {
  padding-bottom: 14px;
}

/* las preguntas cerradas ceden altura mientras hay una abierta: es donde
   sobra aire y lo que hace que el conjunto quepa en la banda visible */
.faq-item__question { transition: padding 380ms var(--ease-brut); }
#faq.faq:has(.faq-item.is-open) .faq-item:not(.is-open) .faq-item__question {
  padding-top: 9px;
  padding-bottom: 9px;
}