/* ============================================================
   PROMO BAGS — Hero + Nav + Sticky WhatsApp (Bloque A)
   Hero Stage 1: fotografía hiperrealista (render carbón aprobado).
   Sin 3D. El "slot" del visual queda listo para el 360° de Stage 2.
   ============================================================ */

/* ---------- NAV (Ley de Jakob: patrón familiar) ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--sp-5);
  padding: .7rem var(--gutter);
  background: rgba(30,37,39,.72);
  backdrop-filter: saturate(1.3) blur(14px);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  border-bottom: 1px solid var(--linea);
}
.brand { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-display); }
.brand__mark { height: 38px; width: auto; display: block; }
.brand__name { font-weight: 700; letter-spacing: -.02em; font-size: 1.16rem; }
.brand__name b { color: var(--verde-marca); font-weight: 800; }
.nav__links { display: flex; gap: 1.55rem; margin-left: auto; font-weight: 500; }
.nav__links a { color: var(--texto-tenue); transition: color var(--dur) var(--ease); position: relative; }
.nav__links a:hover { color: var(--texto); }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px;
  background: var(--verde-vibrante); border-radius: 2px; transition: right var(--dur) var(--ease);
}
.nav__links a:hover::after { right: 0; }
.nav .cta { margin-left: .25rem; }
.nav__burger { display: none; }

/* ---------- HERO ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(2.2rem, 1rem + 5vw, 5rem) 0 clamp(3rem, 2rem + 5vw, 6rem);
  isolation: isolate;
}
/* glows verdes de fondo (C5: profundidad, no decorativos genéricos) */
.hero__glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none; }
.hero__glow--a { width: 42vw; height: 42vw; max-width: 560px; max-height: 560px; right: -6vw; top: 8%;
  background: radial-gradient(circle, rgba(162,237,85,.42), transparent 68%); }
.hero__glow--b { width: 34vw; height: 34vw; max-width: 440px; max-height: 440px; left: -10vw; bottom: -8%;
  background: radial-gradient(circle, rgba(110,176,200,.30), transparent 70%); opacity: .4; }

.hero__inner {
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
}

/* --- columna de copy --- */
.hero__copy { max-width: 42ch; }
.hero h1 { margin: 1.1rem 0 0; }
.hero__sub {
  margin-top: 1.35rem; font-size: var(--t-lead); color: var(--texto-tenue); max-width: 40ch;
}
.hero__sub b { color: var(--texto); font-weight: 600; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }
.trust { display: flex; flex-direction: column; gap: .6rem; margin-top: 2.1rem; }

/* --- columna del producto (el "stage" — slot 360° futuro) --- */
.stage { position: relative; display: flex; justify-content: center; }
.stage__frame { position: relative; width: min(100%, 520px); aspect-ratio: 1 / 1; }
/* halo radial detrás de la bolsa */
.stage__frame::before {
  content: ""; position: absolute; inset: 6% 6% 10%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(162,237,85,.22), rgba(42,51,53,0) 62%);
}
.stage__bag {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 40px 46px rgba(0,0,0,.55));
  animation: float 7s var(--ease-suave) infinite;
  /* El render trae su propio fondo carbón: difuminamos los 4 bordes para que
     la bolsa FLOTE y se funda con el carbón de la página (no un recuadro pegado). */
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 9%, #000 91%, transparent),
    linear-gradient(to bottom, transparent, #000 7%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, transparent, #000 9%, #000 91%, transparent),
    linear-gradient(to bottom, transparent, #000 7%, #000 92%, transparent);
          mask-composite: intersect;
}
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* sombra proyectada en el piso (flota de verdad — C5) */
.stage__frame::after {
  content: ""; position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%);
  width: 55%; height: 26px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.5), transparent 70%);
  filter: blur(7px); z-index: -1; animation: shadow 7s var(--ease-suave) infinite;
}
@keyframes shadow { 0%,100% { opacity: .55; transform: translateX(-50%) scale(1); } 50% { opacity: .35; transform: translateX(-50%) scale(.9); } }

/* badges flotantes (glassmorphism sutil — C5) */
.badge {
  position: absolute; z-index: 2;
  display: flex; flex-direction: column; gap: 2px;
  padding: .7rem .95rem; border-radius: var(--r-md);
  background: rgba(30,37,39,.62); border: 1px solid var(--panel-borde);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--sombra-card);
}
.badge b { font-family: var(--font-display); font-weight: 700; line-height: 1; }
.badge span { font-size: .74rem; color: var(--texto-suave); }
.badge--90 { top: 8%; left: -2%; }
.badge--90 b { font-size: 1.5rem; color: var(--verde-vibrante); }
.badge--logo { bottom: 12%; right: -4%; max-width: 12.5rem; }
.badge--logo b { font-size: .98rem; }

/* ---------- STICKY WhatsApp móvil (thumb-zone · Ley de Fitts) ---------- */
.sticky-wa { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__copy { max-width: none; order: 1; }
  .hero__sub { max-width: 46ch; }
  .stage { order: 2; }
  .stage__frame { width: min(78%, 380px); }
  .nav__links { display: none; }
  .nav .cta--sm { display: none; }          /* el CTA vive en la barra sticky abajo */
  .nav__burger {
    display: inline-flex; margin-left: auto; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: var(--r-sm);
    background: var(--panel); border: 1px solid var(--panel-borde); color: var(--texto);
  }
  .nav__burger svg { width: 22px; height: 22px; }

  /* barra sticky de WhatsApp siempre a un tap */
  .sticky-wa {
    display: block; position: fixed; z-index: 60; left: 0; right: 0; bottom: 0;
    padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(30,37,39,.96), rgba(30,37,39,.75));
    backdrop-filter: blur(10px); border-top: 1px solid var(--linea);
  }
  .sticky-wa .cta { width: 100%; }
  body { padding-bottom: 5rem; }             /* que la barra no tape contenido */
}

@media (max-width: 480px) {
  .badge--90 { left: 0; }
  .badge--logo { right: 0; bottom: 8%; }
  /* D10 — en el stage chico móvil el hint "arrástrala" (~250px de ancho) se
     encimaba con .badge--logo sin corner libre que lo salvara. Los 2 badges de
     marketing mandan y el auto-giro ya señala que es interactivo → oculto el
     hint en móvil (un solo foco por capa). Reaparece ≥481px.
     Especificidad .stage__frame .stage__hint para ganarle a la regla base
     posterior (.stage__hint, línea ~170, mismo peso pero va después). */
  .stage__frame .stage__hint { display: none; }
  .hero__actions .ghost { flex: 1; justify-content: center; }
}

/* ---------- MENÚ MÓVIL desplegable ---------- */
.mobile-menu {
  /* D15 — sobre el launcher del asesor y el sticky de WhatsApp (ambos z-60);
     el overlay 97% opaco los tapa → un solo foco por capa con el menú abierto. */
  display: none; position: fixed; inset: 0; z-index: 70;
  background: rgba(30,37,39,.97); backdrop-filter: blur(6px);
  flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem;
  font-family: var(--font-display); font-size: 1.6rem;
}
.mobile-menu.open { display: flex; }
.mobile-menu a { color: var(--texto); font-weight: 600; }
.mobile-menu__close {
  position: absolute; top: 1rem; right: var(--gutter);
  width: 44px; height: 44px; background: none; border: 0; color: var(--texto);
}

/* ===== Hero Variante C (firmada 07-jul) ===== */
.hero--c .hero__emotive {
  display: block; font-family: var(--font-display); font-weight: 700;
  letter-spacing: -.01em; color: var(--texto);
  font-size: clamp(1.05rem,.95rem+.6vw,1.35rem); line-height: 1.25; margin-bottom: .55rem;
}
/* 2.6 — hint discreto "arrástrala" en una esquina del stage; se desvanece al interactuar */
.stage__frame { position: relative; }
.stage__hint {
  position: absolute; right: .8rem; bottom: .8rem; z-index: 4;
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-body); font-size: .74rem; font-weight: 700; letter-spacing: .01em;
  color: var(--crema); background: rgba(35,48,43,.6); backdrop-filter: blur(6px);
  border: 1px solid rgba(244,241,232,.2); border-radius: var(--r-pill);
  padding: .34rem .66rem; pointer-events: none;
  animation: hint-float 2.6s ease-in-out infinite;
}
.stage__hint svg { width: 1.05em; height: 1.05em; }
@keyframes hint-float { 0%,100%{ transform: translateY(0); opacity:.9 } 50%{ transform: translateY(-3px); opacity:1 } }
.stage__frame:hover .stage__hint, .stage__frame:focus-within .stage__hint { opacity: 0; transition: opacity .3s ease; }
@media (prefers-reduced-motion: reduce){ .stage__hint { animation: none; } }