/* ═══════════════════════════════════════════════════════════════
   PEMF Buenos Aires — premium.css
   Capa visual premium "Amanecer en la costa" (spec 2026-06-11)
   Se carga DESPUÉS de los estilos propios de cada página:
   sus reglas elevan el diseño sin tocar la lógica existente.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --night:  #0a1838;
  --gold:   #b88a2e;
  --shadow-soft:  0 8px 30px rgba(16, 29, 61, .10);
  --shadow-deep:  0 24px 80px rgba(16, 29, 61, .22);
  --shadow-float: 0 30px 60px -12px rgba(26, 79, 182, .35);
}

/* ── Tipografía premium: serif itálica en palabras clave ── */
.serif-it,
.hero-v2 h1 em,
.evidence-section h2 em,
.quizcta-card h2 em {
  font-family: 'Fraunces', Georgia, serif !important;
  font-style: italic;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* ════════════════════════════════════════════
   HERO V2 — "La Constelación"
   ════════════════════════════════════════════ */
.hero-v2 {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero-v2 .hero-inner {
  grid-template-columns: 1.05fr 1fr;
  gap: 24px;
  position: relative;
  z-index: 2;
}
.hero-v2 h1 {
  font-size: clamp(44px, 6.2vw, 86px);
  letter-spacing: -.035em;
  line-height: .98;
}
.hero-v2 h1 em { color: var(--blue); }
.hero-v2 h1 .warm { color: var(--terra); }

/* Orbes de luz desenfocados (capa fondo) */
.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.orb-sky   { width: 520px; height: 520px; background: rgba(103,204,233,.38); top: -140px; right: -80px; }
.orb-blue  { width: 420px; height: 420px; background: rgba(26,79,182,.14);  bottom: -160px; left: -120px; }
.orb-gold  { width: 300px; height: 300px; background: rgba(184,138,46,.10); top: 40%; left: 38%; }

/* Revelado palabra por palabra del H1 */
.w-rev { display: inline-block; overflow: hidden; vertical-align: bottom; }
.anim-ready .w-rev > span {
  display: inline-block;
  transform: translateY(110%);
  animation: wordUp .9s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes wordUp { to { transform: translateY(0); } }

/* ── Constelación de productos ── */
.constellation {
  position: relative;
  height: 600px;
  z-index: 2;
}
.const-item {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  will-change: transform;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.const-item img {
  width: 100%;
  height: auto;
  display: block;
  filter:
    saturate(1.06)
    drop-shadow(0 24px 38px rgba(16,29,61,.30))
    drop-shadow(0 4px 10px rgba(26,79,182,.18));
  transition: filter .35s ease;
}
.const-item:hover img {
  filter:
    saturate(1.12)
    drop-shadow(0 30px 48px rgba(16,29,61,.36))
    drop-shadow(0 0 22px rgba(103,204,233,.55));
}
/* halo radial detrás de cada producto */
.const-item::before {
  content: '';
  position: absolute;
  inset: -18%;
  background: radial-gradient(circle, rgba(103,204,233,.30) 0%, rgba(103,204,233,0) 65%);
  z-index: -1;
  border-radius: 50%;
}
/* sombra elíptica proyectada en el "piso" */
.const-shadow {
  width: 58%;
  height: 14px;
  margin-top: 18px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(16,29,61,.28) 0%, rgba(16,29,61,0) 70%);
  will-change: transform, opacity;
}
/* etiqueta que aparece al hover */
.const-tag {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translate(-50%, 6px);
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(103,204,233,.35);
  border-radius: 100px;
  padding: 5px 14px;
  font-family: 'Figtree', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--night);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
  box-shadow: var(--shadow-soft);
}
.const-item:hover .const-tag { opacity: 1; transform: translate(-50%, 0); }

/* posiciones orbitales (desktop) */
.const-x39      { width: 200px; top: 26%;  left: 34%; z-index: 6; }
.const-analemma { width: 120px; top: 2%;   left: 6%;  z-index: 4; }
.const-h2       { width: 130px; top: 8%;   right: 4%; z-index: 5; }
.const-neuro    { width: 150px; bottom: 6%; left: 2%; z-index: 5; }
.const-shungita { width: 135px; bottom: 2%; right: 10%; z-index: 4; }
.const-gamma    { width: 105px; top: 44%;  right: -2%; z-index: 3; }

/* ════════════════════════════════════════════
   BIBLIOTECA DE EVIDENCIA (sección oscura)
   ════════════════════════════════════════════ */
.evidence-section {
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 70% 10%, rgba(26,79,182,.35) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 90%, rgba(103,204,233,.12) 0%, transparent 55%),
    var(--night);
  color: #f4f7fb;
  overflow: hidden;
  padding: 110px 32px;
}
.evidence-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.evidence-label {
  font-family: 'Figtree', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sky);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.evidence-label::before {
  content: '';
  width: 28px; height: 2px;
  background: var(--sky);
  display: block;
}
.evidence-section h2 {
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.04;
  margin-bottom: 22px;
  color: #fff;
}
.evidence-section h2 em { color: var(--sky); }
.evidence-section .ev-sub {
  font-size: 16px;
  line-height: 1.75;
  color: #9db0cc;
  margin-bottom: 34px;
  max-width: 460px;
}
.ev-stats { display: flex; gap: 40px; margin-bottom: 38px; }
.ev-stat .ev-num {
  font-family: 'Figtree', sans-serif;
  font-size: 44px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -.02em;
}
.ev-stat .ev-num span { color: var(--sky); }
.ev-stat .ev-cap {
  font-size: 12.5px;
  color: #7f93b5;
  margin-top: 6px;
}
.btn-evidence {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--sky), var(--blue));
  color: #fff;
  font-family: 'Figtree', sans-serif;
  font-weight: 800;
  font-size: 15px;
  padding: 16px 30px;
  border-radius: 100px;
  text-decoration: none;
  box-shadow: 0 10px 34px rgba(103,204,233,.35);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
}
.btn-evidence:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 16px 44px rgba(103,204,233,.5);
}

/* abanico de papers 3D */
.ev-fan {
  position: relative;
  height: 440px;
  perspective: 1200px;
}
.ev-paper {
  position: absolute;
  top: 50%; left: 50%;
  width: 240px;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.16);
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) translateY(var(--ty, 0px));
  transform-origin: 50% 120%;
  will-change: transform;
}
.ev-paper img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.ev-paper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,24,56,.55), transparent 45%);
}

/* ════════════════════════════════════════════
   CTA FINAL — QUIZ
   ════════════════════════════════════════════ */
.quizcta-section {
  padding: 110px 32px;
  background: linear-gradient(170deg, var(--cream) 0%, #eaf6fc 100%);
  position: relative;
  overflow: hidden;
}
.quizcta-card {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  background:
    radial-gradient(circle 420px at var(--glow-x, 70%) var(--glow-y, 20%), rgba(103,204,233,.35), transparent 70%),
    linear-gradient(150deg, #102452 0%, var(--night) 70%);
  border-radius: 32px;
  padding: 72px 64px;
  text-align: center;
  color: #fff;
  box-shadow: var(--shadow-deep);
  border: 1px solid rgba(103,204,233,.22);
  transform-style: preserve-3d;
  will-change: transform;
}
.quizcta-card h2 {
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.06;
  margin-bottom: 16px;
}
.quizcta-card h2 em { color: var(--sky); }
.quizcta-card p {
  font-size: 16px;
  color: #9db0cc;
  margin-bottom: 34px;
  line-height: 1.7;
}
.btn-quizcta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: var(--night);
  font-family: 'Figtree', sans-serif;
  font-weight: 800;
  font-size: 16px;
  padding: 17px 34px;
  border-radius: 100px;
  text-decoration: none;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.btn-quizcta:hover { transform: translateY(-2px) scale(1.03); }
.quizcta-note { font-size: 12.5px; color: #7f93b5; margin-top: 18px; margin-bottom: 0 !important; }

/* ════════════════════════════════════════════
   HELPERS DE ANIMACIÓN (activados por JS)
   ════════════════════════════════════════════ */

/* Reveals: el estado oculto SOLO existe si JS arrancó (html.anim-ready) */
.anim-ready [data-reveal] {
  transition: opacity .95s cubic-bezier(.22,1,.36,1), transform .95s cubic-bezier(.22,1,.36,1), filter .95s cubic-bezier(.22,1,.36,1), clip-path 1.1s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--rd, 0s);
}
.anim-ready [data-reveal]:not(.revealed) {
  opacity: 0;
  transform: translateY(20px);
}
.anim-ready [data-reveal="left"]:not(.revealed)  { transform: translateX(-28px); }
.anim-ready [data-reveal="right"]:not(.revealed) { transform: translateX(28px); }
.anim-ready [data-reveal="zoom"]:not(.revealed)  { transform: scale(.94); }
.anim-ready [data-reveal="mask"]:not(.revealed)  {
  opacity: 1;
  clip-path: inset(6% 6% 6% 6% round 24px);
  transform: scale(1.03);
}
.anim-ready [data-reveal].revealed {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0 round 0);
}
/* tras revelar, se quita la transición para no pelear con tilt/hover */
.anim-ready [data-reveal].reveal-done { transition: none; }
/* clip-path solo lo usa el reveal "mask": en los demás recortaba la sombra (rectángulo detrás de botones redondeados) */
.anim-ready [data-reveal].revealed:not([data-reveal="mask"]),
.anim-ready [data-reveal].reveal-done { clip-path: none; }

/* ── Upgrade del sistema .reveal existente (page-index.js le pone .in) ── */
.anim-ready .reveal {
  transition: opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1), filter 1s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--rd, 0s);
}
.anim-ready .reveal:not(.in) {
  opacity: 0;
  transform: translateY(24px) scale(.99);
  filter: blur(4px);
}
.anim-ready .reveal.in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* ── Títulos palabra por palabra (al entrar en viewport) ── */
.t-line { display: inline-block; overflow: hidden; vertical-align: bottom; }
.t-line > span {
  display: inline-block;
  transform: translateY(115%);
  transition: transform .85s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--td, 0s);
}
.t-on .t-line > span { transform: translateY(0); }

/* ── Ambiente: orbes en secciones claras (inyectados por JS) ── */
.quiz-section, .wa-form-section { position: relative; overflow: hidden; }
.quiz-section > .quiz-inner, .wa-form-section > .wa-form-inner { position: relative; z-index: 1; }

/* ── Capas con parallax/velocidad ── */
.how-bg-wrap, .nosotros-photo img, .ev-fan, .prod-grid, .problem-grid, .ticker-row {
  will-change: transform;
}

/* Tilt 3D */
[data-tilt] {
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow .3s ease;
}

/* ── Testimonios: ritmo más calmo (important: el style del body pisa) ── */
.ticker-row.row-fwd { animation-duration: 80s !important; }
.ticker-row.row-rev { animation-duration: 96s !important; }

/* ── Refinamientos sobre componentes existentes ── */

/* sombras azuladas en vez de grises en tarjetas clave */
.quiz-card, .prod-card, .mech-card {
  box-shadow: var(--shadow-soft);
}
.quiz-card:hover, .prod-card:hover {
  box-shadow: var(--shadow-float);
}

/* ════════════════════════════════════════════
   CÓMO FUNCIONA — panel 3D interactivo
   ════════════════════════════════════════════ */
.mech-stage-host { position: relative; perspective: 1300px; }
.mech-carousel { will-change: transform; position: relative; z-index: 1; }
/* brillo especular que sigue el mouse */
.mech-carousel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle 260px at var(--glow-x, 75%) var(--glow-y, 15%), rgba(103,204,233,.16), transparent 70%);
  pointer-events: none;
}
/* barrido de luz periódico */
.mech-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
}
.mech-shine::before {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  width: 45%;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.09) 50%, transparent 80%);
  transform: translateX(-260%) skewX(-14deg);
  animation: mechShine 11s ease-in-out infinite 3s;
}
@keyframes mechShine {
  0%, 64% { transform: translateX(-260%) skewX(-14deg); }
  84%, 100% { transform: translateX(640%) skewX(-14deg); }
}
/* aurora: dos masas de luz que derivan detrás del panel */
.mech-aura {
  position: absolute;
  inset: -16%;
  pointer-events: none;
  z-index: 0;
  filter: blur(58px);
}
.mech-aura::before, .mech-aura::after {
  content: '';
  position: absolute;
  width: 56%;
  height: 56%;
  border-radius: 50%;
}
.mech-aura::before {
  left: 0; top: 8%;
  background: rgba(103,204,233,.25);
  animation: auraDrift 16s ease-in-out infinite alternate;
}
.mech-aura::after {
  right: 0; bottom: 4%;
  background: rgba(26,79,182,.22);
  animation: auraDrift 20s ease-in-out infinite alternate-reverse;
}
@keyframes auraDrift {
  from { transform: translate(-4%, -3%) scale(.95); }
  to   { transform: translate(6%, 6%) scale(1.08); }
}
/* borde de luz que recorre el contorno del panel */
@property --mang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.mech-border {
  position: absolute;
  inset: -1.5px;
  border-radius: 30px;
  padding: 1.5px;
  background: conic-gradient(from var(--mang),
    transparent 0deg,
    rgba(103,204,233,.6) 36deg,
    rgba(26,79,182,.3) 70deg,
    transparent 110deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: mangSpin 9s linear infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes mangSpin { to { --mang: 360deg; } }
/* línea de progreso + entrada de pasos (se re-anima al cambiar de mecanismo) */
.steps { position: relative; }
.steps::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(to bottom, var(--sky), rgba(103,204,233,.05));
}
.anim-ready .step { animation: stepIn .7s cubic-bezier(.22,1,.36,1) backwards; }
.anim-ready .step:nth-child(1) { animation-delay: .06s; }
.anim-ready .step:nth-child(2) { animation-delay: .22s; }
.anim-ready .step:nth-child(3) { animation-delay: .38s; }
.anim-ready .step:nth-child(4) { animation-delay: .54s; }
@keyframes stepIn { from { opacity: 0; transform: translateX(-16px); } }
.step-num { position: relative; z-index: 1; }

/* ════════════════════════════════════════════
   NOSOTROS — franja social estilo Neuro Gum
   ════════════════════════════════════════════ */
.nosotros-grid { grid-template-columns: 1fr; }
.ig-band { margin-top: 72px; }
.ig-band-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.ig-band-title {
  font-family: 'Figtree', sans-serif;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--slate);
  margin-top: 12px;
}
.ig-band-title em {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(45deg, #f09433, #dc2743, #bc1888);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ig-band-sub { font-size: 15px; color: var(--muted); margin-top: 6px; }

/* tira horizontal de reels */
.ig-strip {
  overflow: hidden;
  margin: 0 -32px;
  padding: 10px 0 18px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.ig-strip-track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: stripSide 60s linear infinite;
  will-change: transform;
}
@keyframes stripSide { to { transform: translateX(-50%); } }
.ig-strip:hover .ig-strip-track { animation-play-state: paused; }
.ig-card {
  position: relative;
  width: 272px;
  border-radius: 18px;
  overflow: hidden;
  display: block;
  flex-shrink: 0;
  box-shadow: 0 14px 34px rgba(16,29,61,.16);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
}
.ig-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  display: block;
}
.ig-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,24,56,.55) 0%, transparent 32%);
  pointer-events: none;
}
.ig-card:hover {
  transform: translateY(-8px) scale(1.03) rotate(.6deg);
  box-shadow: 0 24px 54px rgba(16,29,61,.3);
  z-index: 3;
}
.ig-handle {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(6px);
  border-radius: 100px;
  padding: 5px 12px;
  font-family: 'Figtree', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--night);
}
.ig-caption {
  position: absolute;
  bottom: 12px;
  left: 14px;
  right: 14px;
  z-index: 2;
  font-family: 'Figtree', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 8px rgba(10,24,56,.5);
}
.ig-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.9);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .25s, transform .3s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 6px 20px rgba(16,29,61,.25);
}
.ig-play svg { width: 16px; height: 16px; fill: var(--night); margin-left: 2px; }
.ig-card:hover .ig-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ig-follow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: #fff;
  font-family: 'Figtree', sans-serif;
  font-weight: 800;
  font-size: 14px;
  padding: 13px 26px;
  border-radius: 100px;
  text-decoration: none;
  box-shadow: 0 8px 28px rgba(204,35,102,.3);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
}
.ig-follow:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 12px 36px rgba(204,35,102,.45); }
.ig-follow svg { width: 17px; height: 17px; fill: #fff; }

/* ════════════════════════════════════════════
   ENCONTRÁ TU PRODUCTO — escenario 3D coreografiado
   ════════════════════════════════════════════ */
.quiz-cards { perspective: 1000px; }
.quiz-card { position: relative; will-change: transform; transition: box-shadow .5s ease; }
/* entrada: las tarjetas se "paran" desde el plano.
   El estado oculto solo existe si el JS marcó la sección (qs-prep):
   con caché viejo o sin JS, las tarjetas siempre se ven. */
.quiz-section.qs-prep .quiz-card {
  opacity: 0;
  transform: rotateX(10deg) translateY(30px) scale(.97);
}
.anim-ready .quiz-section.qs-in .quiz-card {
  opacity: 1;
  transform: none;
  transition: opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1), box-shadow .5s ease;
}
.anim-ready .quiz-section.qs-in .quiz-card:nth-child(1) { transition-delay: 0s; }
.anim-ready .quiz-section.qs-in .quiz-card:nth-child(2) { transition-delay: .12s; }
.anim-ready .quiz-section.qs-in .quiz-card:nth-child(3) { transition-delay: .24s; }
.anim-ready .quiz-section.qs-in .quiz-card:nth-child(4) { transition-delay: .36s; }
/* cuando el motor JS toma el control, la transición de transform se apaga */
.anim-ready .quiz-section.qs-ready .quiz-card { transition: opacity 1s, box-shadow .5s ease; }
/* pulso guía que recorre las tarjetas */
.quiz-card.qs-pulse {
  box-shadow: 0 18px 44px rgba(26,79,182,.16), 0 0 0 2px rgba(103,204,233,.55);
}
.quiz-card.qs-pulse .quiz-icon { animation: qiPop .7s cubic-bezier(.34,1.56,.64,1); }
@keyframes qiPop { 50% { transform: scale(1.14) rotate(-5deg); } }
/* los íconos respiran */
.anim-ready .quiz-icon { animation: qiBreath 4.5s ease-in-out infinite; }
.quiz-card:nth-child(2) .quiz-icon { animation-delay: 1.1s; }
.quiz-card:nth-child(3) .quiz-icon { animation-delay: 2.2s; }
.quiz-card:nth-child(4) .quiz-icon { animation-delay: 3.3s; }
@keyframes qiBreath { 50% { transform: translateY(-4px); } }

/* ════════════════════════════════════════════
   PROBLEMA — tarjetas que se paran + fotos vivas
   ════════════════════════════════════════════ */
.problem-grid { perspective: 1100px; }
.anim-ready .problem-card.reveal:not(.in) {
  transform: rotateX(9deg) translateY(34px) scale(.98);
}
.prob-photo { overflow: hidden; }
.prob-photo img { will-change: transform; transform: scale(1.14); }
/* backdrop cinematográfico: la foto en foco llena toda la sección
   y su encuadre se abre (zoom-out) revelando más de la escena */
.pb-host { position: relative; }
.pb-host > .section-inner { position: relative; z-index: 1; }
.pb-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.pb-backdrop img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.35);
  transition: opacity 1.2s ease;
  will-change: transform, opacity;
}
.pb-backdrop img.on { opacity: .3; }
.pb-backdrop img.zooming { animation: pbZoomOut 4.6s cubic-bezier(.25,.55,.3,1) forwards; }
@keyframes pbZoomOut {
  from { transform: scale(1.16); }
  to   { transform: scale(1.03); }
}
.pb-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(250,248,244,.95) 0%,
    rgba(250,248,244,.55) 30%,
    rgba(250,248,244,.45) 65%,
    rgba(250,248,244,.92) 100%);
}

/* loop de foco: una tarjeta pasa al frente, las demás se desenfocan */
.pb-stage .problem-card {
  transition: transform 1.05s cubic-bezier(.22,1,.36,1), filter 1.05s cubic-bezier(.22,1,.36,1), opacity 1.05s cubic-bezier(.22,1,.36,1), box-shadow .7s ease !important;
  transition-delay: 0s !important;
  will-change: transform, filter;
}
.anim-ready .pb-stage .problem-card.pb-focus {
  transform: scale(1.035) translateY(-4px);
  z-index: 5;
  box-shadow: 0 26px 56px -12px rgba(26,79,182,.28);
}
.anim-ready .pb-stage .problem-card.pb-dim {
  transform: scale(.975);
  filter: blur(1.5px) saturate(.9);
  opacity: .82;
}

/* ════════════════════════════════════════════
   TABLET (768px-900px)
   ════════════════════════════════════════════ */
@media (max-width: 900px) {
  .hero-v2 .hero-inner { grid-template-columns: 1fr; gap: 8px; padding: 28px 20px; }
  .constellation { height: 380px; margin-top: -10px; }
  .const-x39      { width: 150px; top: 24%; left: 30%; }
  .const-analemma { width: 88px;  top: 0;   left: 2%; }
  .const-h2       { width: 96px;  top: 4%;  right: 2%; }
  .const-neuro    { display: none; }
  .const-shungita { width: 100px; bottom: 4%; right: 8%; }
  .const-gamma    { display: none; }
  .evidence-inner { grid-template-columns: 1fr; gap: 44px; }
  .ev-fan { height: 320px; }
  .ev-paper { width: 180px; }
  .quizcta-card { padding: 48px 24px; }
  .bg-orb { filter: blur(60px); }
  .orb-sky { width: 300px; height: 300px; }
  .ig-card { width: 190px; border-radius: 14px; }
  .ig-strip { margin: 0 -20px; }
  .ig-band { margin-top: 48px; }
  .mech-aura { inset: -8%; filter: blur(40px); }
  .opts-grid-3, .opts-grid-2 { grid-template-columns: 1fr; }
  .result-cards { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════
   MOBILE (<480px)
   ════════════════════════════════════════════ */
@media (max-width: 480px) {
  body { font-size: 12px; }

  /* NAV */
  .nav { height: 52px; }
  .nav-inner { padding: 0 16px; }
  .nav-links { display: none !important; }
  .nav .btn-ghost, .nav-cta .btn-ghost { display: none !important; }
  .logo-mark { width: 36px; height: 36px; }
  .logo-name { font-size: 13px; }
  .btn-nav-wa { font-size: 12px; padding: 7px 14px; }

  /* HERO */
  .hero-v2 { padding-top: 52px; }
  .hero-v2 .hero-inner { grid-template-columns: 1fr; gap: 8px; padding: 16px; }
  .hero-v2 h1 { font-size: 28px; }
  .hero-v2 p { font-size: 13px; }
  .constellation { display: none; }

  /* QUIZ SHELL */
  .quiz-shell { padding-top: 52px; }
  .quiz-body { padding: 16px; }
  .step-question { font-size: 20px; }
  .step-sub { font-size: 12px; }
  .opts-grid-3, .opts-grid-2 { grid-template-columns: 1fr; gap: 10px; margin-bottom: 12px; }
  .opt-card { padding: 18px 14px; }
  .opt-label { font-size: 12px; }
  .opt-desc { font-size: 10px; }

  /* RESULTADOS */
  .result-header { margin-bottom: 20px; }
  .result-title { font-size: 22px; }
  .result-cards { grid-template-columns: 1fr; gap: 12px; }
  .res-card { border-radius: 16px; }
  .res-img-area { height: 140px; }
  .res-img-area img { height: 100px; }
  .res-body { padding: 14px 12px; }
  .res-name { font-size: 16px; }
  .res-price { font-size: 18px; }
  .res-btn-buy, .res-btn-wa, .res-btn-cat { font-size: 12px; min-height: 44px; padding: 10px 12px; }

  /* FOOTER */
  .trust-footer { grid-template-columns: 1fr; gap: 12px; padding: 16px; }
  .trust-item { gap: 8px; }
  .trust-text strong { font-size: 11px; }
  .trust-text span { font-size: 9px; }

  /* OTROS */
  .progress-label { font-size: 10px; }
  .progress-dots { gap: 4px; }
  .progress-dot { width: 8px; height: 8px; }
  .quizcta-card { padding: 28px 16px; }
  .bg-orb { filter: blur(40px); }
  .orb-sky { width: 200px; height: 200px; }
  .ig-card { width: 160px; border-radius: 12px; font-size: 11px; }
  .ig-strip { margin: 0 -16px; }
  .ig-band { margin-top: 28px; }
  .mech-aura { inset: -10%; filter: blur(30px); }
}

/* ════════════════════════════════════════════
   ACCESIBILIDAD — sin movimiento
   ════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .anim-ready [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; clip-path: none !important; }
  .anim-ready .w-rev > span { animation: none !important; transform: none !important; }
  .const-item, .ev-paper, .quizcta-card, [data-tilt] { transform: none !important; transition: none !important; }
  .ig-strip-track, .mech-aura::before, .mech-aura::after, .mech-border, .mech-shine::before, .anim-ready .step, .anim-ready .quiz-icon, .pb-backdrop img { animation: none !important; }
  .pb-backdrop img { opacity: 0 !important; }
  .anim-ready .quiz-section .quiz-card { opacity: 1 !important; transform: none !important; }
  .prob-photo img { transform: none !important; }
  * { animation-duration: .001s !important; }
}