/* ============================================================
   sections.css — El Secreto de las Manos v2
   Fase 5: Todos los bloques de scroll
   Orden: Social · Proceso · Lecturas · Diferencial · FAQ
          CTA Final · Footer · Floating WA · Sticky Mobile
   ============================================================ */


/* ════════════════════════════════════════════════════════════
   ENCABEZADO COMPARTIDO DE SECCIÓN
   Usado por todos los bloques de scroll
   ════════════════════════════════════════════════════════════ */

.section-header {
  text-align: center;
  max-width: 580px;
  margin: 0 auto var(--sp-16);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

.section-title {
  font-family: var(--font-ritual);
  font-size: clamp(1.9rem, 4.5vw, 2.8rem);
  font-weight: 300;
  font-style: italic;
  color: var(--white-90);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.section-subtitle {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: var(--fw-light);
  color: var(--white-50);
  line-height: var(--lh-relaxed);
  max-width: 480px;
}


/* ════════════════════════════════════════════════════════════
   PRUEBA SOCIAL — #testimonios
   ════════════════════════════════════════════════════════════ */

.section-social {
  overflow: hidden;
}

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

.social-glow {
  position: absolute;
  width: 600px;
  height: 400px;
  border-radius: 50%;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(26, 12, 94, 0.40) 0%, transparent 70%);
  filter: blur(80px);
}

.section-social .container {
  position: relative;
  z-index: 1;
}

/* ── Contadores ── */
.counters-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-10);
  padding: var(--sp-8) var(--sp-12);
  background: rgba(14, 8, 36, 0.45);
  border: 1px solid var(--white-08);
  border-radius: var(--r-xl);
  margin-bottom: var(--sp-16);
  flex-wrap: wrap;
}

.counter-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
}

.counter-display {
  display: flex;
  align-items: baseline;
  gap: 3px;
  line-height: 1;
}

.counter-number {
  font-family: var(--font-ritual);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 300;
  color: var(--white-90);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.counter-suffix {
  font-family: var(--font-ritual);
  font-size: clamp(1.3rem, 2.8vw, 1.9rem);
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
}

.counter-label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-30);
}

.counter-divider {
  width: 1px;
  height: 52px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(196, 165, 245, 0.15),
    transparent
  );
  flex-shrink: 0;
}

/* ── Grid de testimonios ── */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  margin-bottom: var(--sp-12);
}

.testimo-card {
  /* hereda glass-panel de components.css */
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  transition: border-color var(--t-base) ease, transform var(--t-base) ease;
}

.testimo-card:hover {
  border-color: rgba(196, 165, 245, 0.20);
  transform: translateY(-3px);
}

.testimo-icon {
  color: var(--gold);
  opacity: 0.55;
  font-size: 22px;
  line-height: 1;
}

.testimo-quote {
  font-family: var(--font-ritual);
  font-size: var(--text-lg);
  font-weight: 300;
  font-style: italic;
  color: var(--white-70);
  line-height: 1.65;
  flex: 1;
  margin: 0;
  quotes: none;
}

.testimo-author {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--white-08);
}

.testimo-name {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--white-70);
  margin: 0;
}

.testimo-label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--white-30);
  letter-spacing: 0.04em;
  margin: 0;
}

/* ── Galería de screenshots de WhatsApp ── */
.screenshots-row {
  margin-top: var(--sp-12);
  position: relative;
}

/* Fade lateral izquierdo/derecho para hint de scroll */
.screenshots-row::before,
.screenshots-row::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: var(--sp-6);
  width: 60px;
  z-index: 2;
  pointer-events: none;
}
.screenshots-row::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-deep, #020008), transparent);
}
.screenshots-row::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-deep, #020008), transparent);
}

.screenshots-label {
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-20);
  margin: 0 0 var(--sp-6);
}

.screenshots-track {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-2) var(--sp-8) var(--sp-6);
  cursor: grab;
  scrollbar-width: none;
}
.screenshots-track::-webkit-scrollbar {
  display: none;
}
.screenshots-track:active {
  cursor: grabbing;
}

.screenshot-item {
  flex-shrink: 0;
  width: 190px;
  scroll-snap-align: start;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(196, 165, 245, 0.10);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.03);
  transition:
    transform  0.30s var(--ease-smooth),
    box-shadow 0.30s ease;
  background: rgba(14, 8, 36, 0.5);
}

.screenshot-item:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(196, 165, 245, 0.18);
}

.screenshot-item img {
  display: block;
  width: 100%;
  height: auto;
}

/* Mobile: items un poco más angostos para ver que hay más al costado */
@media (max-width: 768px) {
  .screenshot-item {
    width: 165px;
  }
  .screenshots-row::before,
  .screenshots-row::after {
    width: 40px;
  }
}


/* ════════════════════════════════════════════════════════════
   CÓMO FUNCIONA — #como-funciona
   ════════════════════════════════════════════════════════════ */

.section-process {
  overflow: hidden;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(26, 12, 94, 0.08) 50%,
    transparent 100%
  );
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-8);
  position: relative;
}

/* Línea de conexión sutil entre pasos */
.process-steps::before {
  content: '';
  position: absolute;
  top: 68px; /* alinea con el centro del ícono */
  left: 12.5%; /* cuarto de la primera columna */
  right: 12.5%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(196, 165, 245, 0.10) 20%,
    rgba(196, 165, 245, 0.10) 80%,
    transparent
  );
  pointer-events: none;
  z-index: 0;
}

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

.step-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

.step-number {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.16em;
  color: var(--gold);
  opacity: 0.60;
  display: block;
}

.step-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(26, 12, 94, 0.60);
  border: 1px solid rgba(196, 165, 245, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--violet);
  font-size: 22px;
  transition:
    border-color var(--t-base) ease,
    box-shadow   var(--t-base) ease,
    background   var(--t-base) ease;
}

.step-item:hover .step-icon-wrap {
  border-color: rgba(196, 165, 245, 0.32);
  box-shadow: 0 0 22px rgba(123, 71, 201, 0.20);
  background: rgba(45, 20, 120, 0.55);
}

.step-title {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--white-90);
  line-height: 1.3;
  margin: 0 0 var(--sp-3);
}

.step-desc {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--fw-light);
  color: var(--white-50);
  line-height: var(--lh-relaxed);
  max-width: 200px;
  margin: 0;
}


/* ════════════════════════════════════════════════════════════
   UNIVERSO DE LECTURAS — #lecturas
   ════════════════════════════════════════════════════════════ */

.section-readings {
  overflow: hidden;
}

.section-readings .container {
  position: relative;
  z-index: 1;
}

/* ── Bloque de lectura (texto + visual) ── */
.reading-block {
  display: flex;
  gap: var(--sp-16);
  align-items: center;
  margin-bottom: var(--sp-20);
}

.reading-block-reverse {
  flex-direction: row-reverse;
}

.reading-text {
  flex: 55;
  min-width: 0;
}

.reading-visual {
  flex: 45;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reading-eyebrow {
  /* hereda .eyebrow */
  letter-spacing: 0.16em;
  margin-bottom: var(--sp-4);
  display: block;
}

.reading-title {
  font-family: var(--font-ritual);
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  font-weight: 300;
  font-style: italic;
  color: var(--white-90);
  line-height: 1.25;
  margin: 0 0 var(--sp-6);
}

.reading-desc {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--fw-light);
  color: var(--white-50);
  line-height: 1.72;
  margin: 0 0 var(--sp-8);
  max-width: 440px;
}

/* check-list de includes — hereda estilos de components.css */
.reading-includes {
  margin-bottom: var(--sp-10);
}

.reading-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(196, 165, 245, 0.10) 30%,
    rgba(196, 165, 245, 0.10) 70%,
    transparent
  );
  margin-bottom: var(--sp-20);
}

/* ════════════════════════════════════════════════════════════
   MAZO INTERACTIVO — deck.js
   ════════════════════════════════════════════════════════════ */

.tarot-deck-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 420px;
  padding: var(--sp-6) 0 var(--sp-8);
}

.deck-glow {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(123, 71, 201, 0.18) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  animation: deckGlowPulse 6s ease-in-out infinite;
}

/* Pulsación propia del mazo — más visible que el glowPulse global */
@keyframes deckGlowPulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1.0; }
}

.deck-stage {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 160px;
  width: 100%;
}

/* ── Cartas ── */
.deck-card {
  width: 88px;
  height: 138px;
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: -18px;
  opacity: 0;
  transform: translateY(40px) scale(0.92);
  transition: none;
  will-change: transform, opacity;
  position: relative;
}
.deck-card:first-child { margin-left: 0; }

.deck-card.spread {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    opacity   0.5s ease;
}

.deck-card.collapsing {
  opacity: 0;
  transform: translateY(30px) scale(0.92);
  transition:
    transform 0.4s cubic-bezier(0.55, 0, 0.67, 0.3),
    opacity   0.3s ease;
}

.deck-card:hover           { z-index: 500 !important; }
.deck-card:hover .card-inner { transform: translateY(-14px) scale(1.08); }
.deck-card:hover .card-face  {
  border-color: rgba(220, 185, 120, 0.50);
  box-shadow:
    0 0 28px rgba(220, 185, 120, 0.16),
    0 0 50px rgba(120,  60, 220, 0.10),
    0 16px 40px rgba(0,   0,   0, 0.50);
}

.deck-card.dimmed {
  opacity: 0.06 !important;
  filter: blur(3px);
  pointer-events: none;
  transition: opacity 0.5s ease, filter 0.5s ease !important;
}
.deck-card.chosen           { z-index: 600 !important; }
.deck-card.chosen .card-inner { transform: translateY(-20px) scale(1.18); }

.card-inner {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

.card-face {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(170deg, #2a1578 0%, #1a0c5e 35%, #1f1068 100%);
  border: 1px solid rgba(220, 185, 120, 0.10);
  box-shadow:
    0 2px  6px rgba(0, 0, 0, 0.35),
    0 8px 24px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(220, 185, 120, 0.04);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.card-face::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 7px;
  border: 1px solid rgba(220, 185, 120, 0.08);
  pointer-events: none;
}
.card-face::after {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 5px;
  border: 0.5px solid rgba(220, 185, 120, 0.04);
  pointer-events: none;
}

.card-ornament {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.card-ornament svg { width: 70%; height: 70%; opacity: 0.9; }

.card-corner {
  position: absolute;
  width: 8px;
  height: 8px;
  pointer-events: none;
}
.card-corner::before,
.card-corner::after {
  content: '';
  position: absolute;
  background: rgba(220, 185, 120, 0.12);
}
.card-corner::before { width: 8px;   height: 0.5px; }
.card-corner::after  { width: 0.5px; height: 8px;   }
.card-corner.tl { top: 10px; left: 10px; }
.card-corner.tr { top: 10px; right: 10px; }
  .card-corner.tr::before { right: 0; }
  .card-corner.tr::after  { right: 0; }
.card-corner.bl { bottom: 10px; left: 10px; }
  .card-corner.bl::before { bottom: 0; }
  .card-corner.bl::after  { bottom: 0; }
.card-corner.br { bottom: 10px; right: 10px; }
  .card-corner.br::before { right: 0; bottom: 0; }
  .card-corner.br::after  { right: 0; bottom: 0; }

.card-star {
  position: absolute;
  font-size: 5px;
  color: rgba(220, 185, 120, 0.36);
  pointer-events: none;
  line-height: 1;
  animation: cardStarTwinkle var(--dur) var(--delay) ease-in-out infinite;
}

/* Titilación propia de las estrellas del mazo (solo opacidad, sin scale en elementos tiny) */
@keyframes cardStarTwinkle {
  0%, 100% { opacity: 0.15; }
  50%       { opacity: 0.65; }
}

/* ── Pie del mazo ── */
.tarot-hint {
  font-family: var(--font-ritual);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(220, 185, 120, 0.35);
  margin: 0 0 var(--sp-3);
  font-weight: 400;
  text-align: center;
}

.tarot-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  position: relative;
  z-index: 2;
}

.tarot-instruction {
  font-family: var(--font-ritual);
  font-style: italic;
  font-size: 18px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.30);
  transition: opacity 0.8s ease;
  margin: 0;
  opacity: 0;
  text-align: center;
}
.tarot-instruction.visible { opacity: 1; }

#tarot-reshuffle {
  font-family:      var(--font-ritual) !important;
  letter-spacing:   0.18em !important;
  text-transform:   uppercase !important;
  font-size:        13px !important;
  border-color:     rgba(220, 185, 120, 0.15) !important;
  color:            rgba(220, 185, 120, 0.42) !important;
  display:          none;
}
#tarot-reshuffle:hover {
  border-color: rgba(220, 185, 120, 0.40) !important;
  color:        rgba(220, 185, 120, 0.80) !important;
  box-shadow:   0 0 20px rgba(220, 185, 120, 0.07);
}

/* ════════════════════════════════════════════════════════════
   MODAL TAROT
   ════════════════════════════════════════════════════════════ */

.tarot-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(5, 3, 15, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.tarot-modal-overlay.active { display: flex; }

.tarot-modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 400px;
  width: 100%;
  animation: modalIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  /* modalIn definido en base.css — fuente única de verdad */
}

.tarot-modal-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.40);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.tarot-modal-close:hover {
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.85);
}

.tarot-modal-card {
  position: relative;
}
.tarot-modal-card::before {
  content: '';
  position: absolute;
  inset: -30px;
  background: radial-gradient(circle, rgba(130, 70, 220, 0.22) 0%, transparent 65%);
  pointer-events: none;
}
.tarot-modal-card img {
  display: block;
  width: 170px;
  height: 283px;
  object-fit: cover;
  border-radius: 14px;
  border: 1.5px solid rgba(220, 185, 120, 0.22);
  box-shadow:
    0 0  60px rgba(120, 60, 200, 0.20),
    0 30px 70px rgba(0,   0,   0, 0.50);
  position: relative;
}

.tarot-modal-text {
  text-align: center;
}
.tarot-modal-name {
  font-family: var(--font-ritual);
  font-size: 32px;
  color: var(--white);
  margin: 0 0 10px;
  letter-spacing: 1px;
}
.tarot-modal-keywords {
  font-family: var(--font-ritual);
  font-size: 13px;
  letter-spacing: 3px;
  color: rgba(220, 185, 120, 0.50);
  margin: 0 0 20px;
  text-transform: uppercase;
  font-weight: 300;
}
.tarot-modal-meaning {
  font-family: var(--font-ritual);
  font-style: italic;
  font-size: 18px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.60);
  max-width: 360px;
  margin: 0 auto;
  font-weight: 300;
}

.tarot-modal-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.tarot-btn-outline {
  background: transparent;
  border: 1px solid rgba(220, 185, 120, 0.20);
  color: rgba(220, 185, 120, 0.55);
  padding: 11px 24px;
  border-radius: 8px;
  font-family: var(--font-ritual);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s;
}
.tarot-btn-outline:hover {
  border-color: rgba(220, 185, 120, 0.50);
  color: rgba(220, 185, 120, 0.90);
}

/* ════════════════════════════════════════════════════════════
   HAND EXPLORER — hand-explorer.js
   ════════════════════════════════════════════════════════════ */

.hand-explorer {
  width: 200px;
  height: 240px;
  filter: drop-shadow(0 0 20px rgba(196, 165, 245, 0.10));
}

.hand-image-wrapper {
  position: relative;
  width: 200px;
  height: 240px;
}
.hand-image-wrapper svg {
  width: 200px;
  height: 240px;
}

/* ── Hotspots ── */
.hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 10;
}

/* Posiciones sobre el SVG (coordenadas relativas a 200x240px renderizado) */
.hs-corazon { top: 55%; left: 54%; }
.hs-cabeza  { top: 63%; left: 52%; }
.hs-vida    { top: 67%; left: 33%; }

.hs-pulse {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(196, 165, 245, 0.20);
  border: 1.5px solid rgba(196, 165, 245, 0.55);
  cursor: pointer;
  position: relative;
  animation: hsPulse 2.5s ease-in-out infinite;
  transition: background 0.2s, border-color 0.2s;
}
.hs-pulse:hover,
.hotspot.is-active .hs-pulse {
  background: rgba(196, 165, 245, 0.35);
  border-color: rgba(196, 165, 245, 0.90);
}

@keyframes hsPulse {
  0%   { box-shadow: 0 0 0 0   rgba(196, 165, 245, 0.50); }
  60%  { box-shadow: 0 0 0 8px rgba(196, 165, 245, 0);    }
  100% { box-shadow: 0 0 0 0   rgba(196, 165, 245, 0);    }
}

/* Cada hotspot tiene su propio delay para no pulsar sincronizados */
.hs-corazon .hs-pulse { animation-delay: 0s;    }
.hs-cabeza  .hs-pulse { animation-delay: 0.8s;  }
.hs-vida    .hs-pulse { animation-delay: 1.6s;  }

/* ── Tooltips (default: aparece arriba centrado) ── */
.hs-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  width: 150px;
  background: rgba(14, 8, 36, 0.96);
  border: 1px solid rgba(196, 165, 245, 0.15);
  border-radius: var(--r-sm, 8px);
  padding: 10px 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hotspot.is-active .hs-tooltip,
.hotspot:hover     .hs-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Tooltip derecho (para hs-vida, que está al borde izquierdo) */
.hs-tooltip-right {
  left: calc(100% + 10px);
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  width: 146px;
}
.hotspot.is-active .hs-tooltip-right,
.hotspot:hover     .hs-tooltip-right {
  transform: translateY(-50%) translateX(0);
}

.hs-tooltip h4 {
  font-family: var(--font-ritual);
  font-size: 13px;
  color: rgba(196, 165, 245, 0.90);
  margin: 0 0 4px;
  font-weight: 400;
  letter-spacing: 0.05em;
}
.hs-tooltip p {
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.50);
  margin: 0;
  line-height: 1.5;
}


/* ════════════════════════════════════════════════════════════
   DIFERENCIAL — #diferencial
   ════════════════════════════════════════════════════════════ */

.section-diferencial {
  overflow: hidden;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(26, 12, 94, 0.20) 40%,
    rgba(26, 12, 94, 0.20) 60%,
    transparent 100%
  );
}

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

.diferencial-glow {
  position: absolute;
  width: 700px;
  height: 500px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse,
    rgba(123, 71, 201, 0.18) 0%,
    rgba(26, 12, 94, 0.10) 40%,
    transparent 70%
  );
  filter: blur(60px);
}

.section-diferencial .container {
  position: relative;
  z-index: 1;
}

.diferencial-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-20);
  align-items: center;
}

/* ── Columna izquierda: declaración ── */
.diferencial-statement {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.diferencial-quote {
  font-family: var(--font-ritual);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 300;
  font-style: italic;
  color: var(--white-90);
  line-height: 1.22;
  quotes: none;
  margin: 0;
  padding-left: var(--sp-6);
  border-left: 2px solid rgba(220, 185, 120, 0.20);
  text-shadow:
    0 0 60px rgba(196, 165, 245, 0.08),
    0 4px 20px rgba(0, 0, 0, 0.3);
}

.diferencial-body {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--fw-light);
  color: var(--white-50);
  line-height: 1.72;
  max-width: 420px;
  margin: 0;
}

/* ── Columna derecha: lista de diferenciales ── */
.diferencial-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-6);
  background: rgba(14, 8, 36, 0.30);
  border: 1px solid rgba(196, 165, 245, 0.07);
  border-radius: var(--r-lg);
}

.diferencial-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-4);
  border-radius: var(--r-sm);
  transition: background var(--t-base) ease;
}

.diferencial-item:hover {
  background: rgba(196, 165, 245, 0.04);
}

.diferencial-icon {
  color: var(--gold);
  font-size: 12px;
  opacity: 0.65;
  margin-top: 4px;
  flex-shrink: 0;
}

.diferencial-item > div {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.diferencial-item strong {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--white-90);
  line-height: 1.3;
}

.diferencial-item p {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--fw-light);
  color: var(--white-50);
  line-height: 1.65;
  margin: 0;
}


/* ════════════════════════════════════════════════════════════
   FAQ — #faq
   Acordeón limpio sin zodíaco
   ════════════════════════════════════════════════════════════ */

.section-faq {
  overflow: hidden;
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.faq-item {
  border: 1px solid var(--white-08);
  border-radius: var(--r-base);
  background: rgba(14, 8, 36, 0.30);
  overflow: hidden;
  transition: border-color var(--t-base) ease;
}

.faq-item.is-open {
  border-color: rgba(196, 165, 245, 0.18);
  background: rgba(26, 12, 94, 0.25);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: var(--sp-6) var(--sp-8);
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
  transition: background var(--t-fast) ease;
}

.faq-question:hover {
  background: rgba(196, 165, 245, 0.04);
}

.faq-question-text {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: var(--white-70);
  line-height: 1.4;
  transition: color var(--t-fast) ease;
}

.faq-item.is-open .faq-question-text {
  color: var(--white-90);
}

.faq-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(196, 165, 245, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--violet);
  font-size: 16px;
  flex-shrink: 0;
  transition:
    transform     var(--t-base) var(--ease-smooth),
    border-color  var(--t-base) ease,
    background    var(--t-base) ease;
}

.faq-item.is-open .faq-icon {
  transform: rotate(45deg);
  border-color: rgba(196, 165, 245, 0.30);
  background: rgba(123, 71, 201, 0.15);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.38s cubic-bezier(0.23, 1, 0.32, 1),
    opacity    0.30s ease;
}

.faq-item.is-open .faq-answer {
  max-height: 600px;
  opacity: 1;
}

.faq-answer-inner {
  padding: 0 var(--sp-8) var(--sp-6);
}

.faq-answer p {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--fw-light);
  color: var(--white-50);
  line-height: 1.72;
  margin: 0;
}


/* ════════════════════════════════════════════════════════════
   CTA FINAL
   Cierre dramático con glow centrado
   ════════════════════════════════════════════════════════════ */

.section-cta-final {
  position: relative;
  padding-block: var(--sp-32);
  overflow: hidden;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(26, 12, 94, 0.30) 30%,
    rgba(45, 20, 120, 0.25) 60%,
    rgba(26, 12, 94, 0.15) 80%,
    transparent 100%
  );
}

.cta-final-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.cta-glow {
  position: absolute;
  width: 800px;
  height: 600px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse,
    rgba(123, 71, 201, 0.20) 0%,
    rgba(26, 12, 94, 0.12) 35%,
    transparent 65%
  );
  filter: blur(70px);
  animation: glowPulse 8s ease-in-out infinite;
}

.section-cta-final .container {
  position: relative;
  z-index: 1;
}

.cta-final-inner {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
}

.cta-final-title {
  font-family: var(--font-ritual);
  font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  font-weight: 300;
  font-style: italic;
  color: var(--white-90);
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-shadow:
    0 0 60px rgba(196, 165, 245, 0.12),
    0 6px 30px rgba(0, 0, 0, 0.4);
  margin: var(--sp-2) 0 0;
}

.cta-final-subtitle {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: var(--fw-light);
  color: var(--white-50);
  line-height: 1.65;
  max-width: 420px;
  margin: 0;
}

.cta-final-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.cta-final-microcopy {
  font-size: var(--text-xs);
  color: var(--white-20);
  letter-spacing: 0.06em;
  margin: 0;
}


/* ════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════ */

.site-footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--white-08);
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-8);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--sp-12);
  margin-bottom: var(--sp-12);
  padding-bottom: var(--sp-10);
  border-bottom: 1px solid var(--white-08);
}

/* ── Marca ── */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.footer-logo {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-regular);
  color: var(--white-70);
  letter-spacing: 0.02em;
  display: block;
}

.footer-tagline {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--fw-light);
  color: var(--white-30);
  line-height: 1.65;
  max-width: 240px;
  margin: 0;
}

/* ── Navegación ── */
.footer-nav-title {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white-30);
  margin: 0 0 var(--sp-5);
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
}

.footer-links a,
.footer-link {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--fw-light);
  color: var(--white-50);
  text-decoration: none;
  transition: color var(--t-fast) ease;
}

/* .footer-link: botones WA dentro de la nav del footer */
.footer-link {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.footer-links a:hover,
.footer-link:hover {
  color: var(--white-90);
}

/* ── Contacto ── */
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.footer-wa-btn {
  /* hereda .btn .btn-outline de components.css */
  width: fit-content;
}

.footer-contact-hint {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--white-30);
  letter-spacing: 0.04em;
  margin: 0;
}

/* ── Pie del footer ── */
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-align: center;
}

.footer-copyright {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--white-30);
  letter-spacing: 0.04em;
  margin: 0;
}

.footer-disclaimer {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--white-15);
  letter-spacing: 0.02em;
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto;
}


/* ════════════════════════════════════════════════════════════
   BOTÓN FLOTANTE WHATSAPP (desktop)
   ════════════════════════════════════════════════════════════ */

.floating-wa {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple-core) 0%, var(--purple-deep) 100%);
  border: 1px solid rgba(196, 165, 245, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--white-90);
  z-index: 900;
  text-decoration: none;
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.40),
    0 0 0 0 rgba(123, 71, 201, 0);
  transition:
    transform   0.30s var(--ease-smooth),
    box-shadow  0.30s ease,
    border-color 0.30s ease;
  /* Oculto por defecto, visible tras 40% scroll (animations.js) */
  opacity: 0;
  pointer-events: none;
}

.floating-wa.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.floating-wa:hover {
  transform: scale(1.10) translateY(-2px);
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.50),
    0 0 30px rgba(123, 71, 201, 0.35);
  border-color: rgba(196, 165, 245, 0.42);
}


/* ════════════════════════════════════════════════════════════
   STICKY FOOTER MOBILE
   Solo visible en mobile, aparece tras 40% de scroll
   ════════════════════════════════════════════════════════════ */

.sticky-footer-mobile {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 800;
  background: rgba(2, 0, 8, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding:
    var(--sp-3)
    var(--sp-5)
    calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--white-08);
  transform: translateY(100%);
  transition: transform 0.40s var(--ease-smooth);
  display: none; /* solo en mobile */
}

.sticky-footer-mobile.is-visible {
  transform: translateY(0);
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */

/* Tablet (1024px y menos) */
@media (max-width: 1024px) {
  .process-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-10);
  }

  .process-steps::before {
    display: none;
  }

  .diferencial-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-12);
  }

  .diferencial-quote {
    font-size: 2.4rem;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* Mobile (768px y menos) */
@media (max-width: 768px) {
  .section-header {
    margin-bottom: var(--sp-10);
  }

  /* Contadores */
  .counters-row {
    gap: var(--sp-6);
    padding: var(--sp-6) var(--sp-8);
  }

  .counter-divider {
    display: none;
  }

  /* Testimonios */
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  /* Proceso */
  .process-steps {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .step-item {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: var(--sp-5);
  }

  .step-head {
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    margin-bottom: 0;
  }

  .step-desc {
    max-width: none;
  }

  /* Lecturas */
  .reading-block,
  .reading-block-reverse {
    flex-direction: column;
    gap: var(--sp-8);
  }

  .reading-visual {
    order: -1; /* visual primero en mobile */
  }

  .reading-block-reverse .reading-text {
    order: unset;
  }

  .reading-desc {
    max-width: none;
  }

  /* Deck — fan compacto en mobile para que no desborde */
  .deck-stage {
    height: 126px;
  }
  .deck-card {
    width: 64px;
    height: 104px;
    margin-left: -38px; /* overlap mayor: 10 cartas × (64-38) = 298px total */
  }
  .tarot-instruction { font-size: 16px; }

  /* Hand explorer — centrado en mobile */
  .hand-explorer,
  .hand-image-wrapper,
  .hand-image-wrapper svg {
    width: 180px;
    height: 218px;
  }

  /* Footer */
  .floating-wa {
    display: none;
  }

  .sticky-footer-mobile {
    display: block;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .footer-brand {
    grid-column: auto;
  }

  /* CTA final */
  .section-cta-final {
    padding-block: var(--sp-20);
  }
}

/* Mobile pequeño (480px y menos) */
@media (max-width: 480px) {
  .counters-row {
    padding: var(--sp-5) var(--sp-6);
  }

  .counter-number {
    font-size: 2rem;
  }

  .diferencial-quote {
    font-size: 1.85rem;
  }

  .cta-final-title {
    font-size: 2rem;
  }

  .faq-question {
    padding: var(--sp-5) var(--sp-5);
  }

  .faq-answer-inner {
    padding: 0 var(--sp-5) var(--sp-5);
  }

  .section-process .step-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Modal tarot en pantallas muy pequeñas */
  .tarot-modal-card img {
    width: 140px;
    height: 233px;
  }
  .tarot-modal-name   { font-size: 26px; }
  .tarot-modal-meaning { font-size: 16px; }
  .tarot-modal-actions { flex-direction: column; align-items: center; }

  /* Hand explorer: tooltip de hs-vida va a la derecha en desktop pero
     desborda en mobile small (container 180px). Se redirige hacia arriba. */
  .hs-vida .hs-tooltip-right {
    left: 0;
    right: auto;
    bottom: calc(100% + 10px);
    top: auto;
    width: 130px;
    transform: translateY(6px);
  }
  .hotspot.is-active .hs-vida .hs-tooltip-right,
  .hotspot:hover     .hs-vida .hs-tooltip-right {
    transform: translateY(0);
  }

  /* Diferencial: en mobile pequeño, quitar el padding-left del quote
     para no comprimir demasiado el texto */
  .diferencial-quote {
    padding-left: var(--sp-4);
  }
}