/* ============================================================
   IFÁ · Awọn Odù Ifá — hoja de estilos
   Estética limpia, inspirada en el lenguaje visual de Apple.
   ============================================================ */

:root {
  /* Tipografía del sistema (San Francisco en Apple) */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Display editorial para titulares */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;

  /* Escena oscura (hero, plan premium, footer) — carbón cálido, nunca negro puro */
  --ink: #0a0a0a;
  --ink-2: #141414;
  --ink-soft: #1f1f1f;
  --ink-text: #ffffff;
  --ink-text-2: #b3b3b3;
  --ink-line: rgba(255, 255, 255, 0.12);

  /* Oro de Ifá */
  --gold: #f97316;
  --gold-2: #ffa04d;
  --gold-deep: #d95f00;
  --gold-glow: rgba(249, 115, 22, 0.32);

  /* Paleta — tema claro, tonos cálidos suaves (sin negro de fondo) */
  /* MODO TEMPLO: negro por capas — el fondo es lo más oscuro,
     cada superficie sube un paso de luz; hairlines en vez de sombras. */
  --bg: #0a0a0a;             /* lienzo */
  --bg-elev: #141414;        /* superficie elevada / hundida */
  --bg-blur: rgba(10, 10, 10, 0.72);
  --text: #e8e8e8;           /* nunca blanco puro sobre negro */
  --text-2: #a8a8a8;
  --text-3: #8f8f8f;         /* contraste AA sobre #0a0a0a */
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.16);
  --accent: #f97316;          /* naranja — joyería, no tapiz */
  --accent-soft: rgba(249, 115, 22, 0.14);
  --mark: #e8e8e8;            /* color de las marcas del signo */
  --card: #161616;
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
  --radius: 18px;
  --radius-sm: 12px;
}

/* Forzamos esquema claro aunque el sistema esté en modo oscuro */
:root { color-scheme: light; }

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Barra superior (cristal, cambia sobre el hero) ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26px;
  background: var(--bg-blur);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
  transition: background 0.35s ease, border-color 0.35s ease;
}
.nav__brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  transition: color 0.35s ease;
}
.nav__brand .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-2), var(--gold-deep));
  box-shadow: 0 0 10px var(--gold-glow);
  display: inline-block;
}
.nav__links { display: flex; gap: 26px; align-items: center; }
.nav__links a {
  color: var(--text-2);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: color 0.2s;
}
.nav__links a:hover { color: var(--text); }
.nav__links a.nav__cta {
  background: linear-gradient(135deg, var(--gold-2), var(--gold-deep));
  color: #241a10;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.nav__links a.nav__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px var(--gold-glow);
  color: #241a10;
}

.nav__brand, .nav__links a { white-space: nowrap; }

/* En móvil: solo marca + CTA */
@media (max-width: 680px) {
  .nav { padding: 0 16px; }
  .nav__brand { font-size: 15px; }
  .nav__links { gap: 12px; }
  .nav__links a:not(.nav__cta) { display: none; }
  .nav__links a.nav__cta { padding: 7px 14px; font-size: 12.5px; }
}

/* Variante oscura: mientras el hero está en pantalla */
.nav--dark {
  background: rgba(25, 19, 16, 0.45);
  border-bottom-color: transparent;
}
.nav--dark .nav__brand { color: var(--ink-text); }
.nav--dark .nav__links a { color: var(--ink-text-2); }
.nav--dark .nav__links a:hover { color: var(--ink-text); }
.nav--dark .nav__links a.nav__cta { color: #241a10; }

/* ---------- Hero cinematográfico ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 22px 90px;
  overflow: hidden;
  background:
    radial-gradient(1100px 520px at 50% -10%, #2c2015 0%, transparent 60%),
    linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 55%, #14100d 100%);
  color: var(--ink-text);
}
.hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(560px 380px at 50% 46%, var(--gold-glow) 0%, transparent 70%);
  opacity: 0.5;
  animation: heroGlow 7s ease-in-out infinite alternate;
}
@keyframes heroGlow {
  from { opacity: 0.32; transform: scale(0.96); }
  to   { opacity: 0.6;  transform: scale(1.04); }
}

/* Signo de Eyiogbe gigante como marca de agua, se dibuja al cargar */
.hero__sign {
  --mark: var(--gold);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0.16;
}
.hero__sign svg { height: 86%; width: auto; }
.hero__sign svg rect {
  opacity: 0;
  animation: markIn 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
/* Se dibuja de derecha a izquierda: en cada fila la columna derecha marca antes que la izquierda */
.hero__sign svg rect:nth-of-type(1) { animation-delay: 0.3s; }
.hero__sign svg rect:nth-of-type(2) { animation-delay: 0.15s; }
.hero__sign svg rect:nth-of-type(3) { animation-delay: 0.6s; }
.hero__sign svg rect:nth-of-type(4) { animation-delay: 0.45s; }
.hero__sign svg rect:nth-of-type(5) { animation-delay: 0.9s; }
.hero__sign svg rect:nth-of-type(6) { animation-delay: 0.75s; }
.hero__sign svg rect:nth-of-type(7) { animation-delay: 1.2s; }
.hero__sign svg rect:nth-of-type(8) { animation-delay: 1.05s; }
@keyframes markIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__inner {
  position: relative;
  max-width: 900px;
  animation: heroRise 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero__eyebrow {
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(52px, 9.5vw, 118px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.02;
  margin-bottom: 26px;
}
.hero h1 em {
  font-style: italic;
  background: linear-gradient(100deg, var(--gold-2) 10%, var(--gold) 45%, var(--gold-2) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p {
  font-size: clamp(17px, 2.2vw, 21px);
  color: var(--ink-text-2);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}
.hero__actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 38px;
  flex-wrap: wrap;
}
.hero__stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 34px;
  margin-top: 64px;
}
.stat__sep { width: 1px; height: 34px; background: var(--ink-line); }
.stat__num {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--gold-2);
}
.stat__label {
  font-size: 12px;
  color: var(--ink-text-2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 3px;
}

/* Indicador de scroll */
.hero__scroll {
  position: absolute;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  width: 24px; height: 38px;
  border: 1.5px solid var(--ink-line);
  border-radius: 14px;
}
.hero__scroll span {
  position: absolute;
  top: 7px; left: 50%;
  width: 3px; height: 8px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--gold);
  animation: scrollNudge 1.8s ease-in-out infinite;
}
@keyframes scrollNudge {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(12px); opacity: 0.2; }
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.22s;
}
.btn--gold {
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  color: #0b0b0b;
  font-weight: 800;
  box-shadow: 0 10px 30px var(--gold-glow);
}
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 14px 38px var(--gold-glow); }
.btn--ghost {
  color: var(--ink-text);
  border: 1px solid rgba(244, 237, 225, 0.26);
}
.btn--ghost:hover { transform: translateY(-2px); border-color: rgba(244, 237, 225, 0.5); }
.btn--outline {
  color: var(--text);
  border: 1px solid var(--line-2);
}
.btn--outline:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--accent); }

/* ---------- Secciones ---------- */
.section { max-width: 1120px; margin: 0 auto; padding: 84px 22px; }
.section__head { margin-bottom: 40px; }
.section__head--center { text-align: center; }
.section__head h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.08;
}
.section__head h2 em {
  font-style: italic;
  color: var(--accent);
}
.section__head p { color: var(--text-2); margin-top: 10px; font-size: 17px; }

.section { scroll-margin-top: 72px; }

/* Aparición al hacer scroll */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Los 16 Ojú Odù (carrusel de tarjetas) ---------- */
.principals {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.pcard {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px 14px 16px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.25s, box-shadow 0.25s;
}
.pcard:hover {
  transform: translateY(-4px);
  border-color: var(--line-2);
  box-shadow: var(--shadow);
}
.pcard__fig {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pcard__fig svg { height: 100%; width: auto; display: block; }
.pcard__name {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
}
.pcard__idx { color: var(--text-3); font-size: 12px; }

/* ---------- Navegador de los 256 ---------- */

/* Paso 1: selector del Odù mayor (chips) */
.nav-major {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.chip {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s;
}
.chip:hover { border-color: var(--line-2); transform: translateY(-1px); }
.chip.is-active {
  /* Escena oscura + oro: contraste 10.9:1 (antes blanco sobre ocre, 3.1:1) */
  background: var(--ink);
  border-color: var(--ink);
  color: var(--gold-2);
}
/* Punto dorado: familia con contenido completo */
.chip__dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  margin-left: 7px;
  vertical-align: 1px;
}
.chip.is-active .chip__dot { background: var(--gold-2); }

.nav-hint {
  font-size: 14px;
  color: var(--text-2);
  margin: 0 0 18px;
}

/* Paso 2: combinaciones (tarjetas espaciadas) */
.combos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}
.combo {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 20px 14px 16px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.22s, box-shadow 0.22s;
}
.combo:hover {
  transform: translateY(-4px);
  border-color: var(--line-2);
  box-shadow: var(--shadow);
}
.combo__fig {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.combo__fig svg { height: 100%; width: auto; display: block; }
.combo__name { margin-top: 12px; font-family: var(--font-display); font-weight: 600; font-size: 16.5px; }
.combo__sub { color: var(--text-3); font-size: 12.5px; margin-top: 2px; }

/* Número de posición (1–256), esquina superior derecha */
.combo { position: relative; }
.combo__n {
  position: absolute;
  top: 10px; right: 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.03em;
}

/* Estado del contenido: completo vs. próximamente */
.combo__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.combo__status--full { color: var(--gold-deep); }
.combo__status--full::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
}
.combo__status--soon { color: var(--text-3); }

/* Sin resultados en la búsqueda */
.combos__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 44px 20px;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  color: var(--text-2);
  font-size: 15px;
}
.combos__empty b { font-family: var(--font-display); display: block; font-size: 19px; margin-bottom: 6px; color: var(--text); }

/* ---------- Hoja de detalle (modal estilo Apple) ---------- */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background 0.35s ease;
}
.sheet.open {
  background: rgba(0, 0, 0, 0.4);
  pointer-events: auto;
}
.sheet__panel {
  position: relative; /* ancla del cálculo offsetTop para los saltos internos */
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-anchor: none;
  background: var(--bg);
  border-radius: 24px 24px 0 0;
  box-shadow: var(--shadow-lg);
  transform: translateY(100%);
  transition: transform 0.42s cubic-bezier(0.2, 0.9, 0.2, 1);
  padding: 14px 26px 40px;
}
.sheet.open .sheet__panel { transform: translateY(0); }
@media (min-width: 720px) {
  .sheet { align-items: center; }
  .sheet__panel {
    border-radius: 24px;
    transform: translateY(24px) scale(0.96);
    opacity: 0;
    transition: transform 0.42s cubic-bezier(0.2, 0.9, 0.2, 1), opacity 0.3s;
  }
  .sheet.open .sheet__panel { transform: translateY(0) scale(1); opacity: 1; }
}
.sheet__grabber {
  width: 38px; height: 5px; border-radius: 3px;
  background: var(--line-2);
  margin: 4px auto 18px;
}
.sheet__close {
  position: absolute;
  top: 18px; right: 22px;
  width: 30px; height: 30px;
  border: none; border-radius: 50%;
  background: var(--bg-elev);
  color: var(--text-2);
  font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.detail__top {
  display: flex;
  gap: 22px;
  align-items: center;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.detail__figure {
  width: 96px; flex-shrink: 0;
  background: var(--bg-elev);
  border-radius: var(--radius-sm);
  padding: 14px;
}
.detail__figure svg { width: 100%; height: auto; display: block; }
.detail__title h2 {
  font-family: var(--font-display);
  font-size: 34px; font-weight: 600; letter-spacing: -0.01em;
}
.detail__sub { color: var(--text-2); font-size: 15px; margin-top: 4px; }
.detail__tag {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px; font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 3px 10px; border-radius: 20px;
}

.detail__section { padding: 18px 0; border-bottom: 1px solid var(--line); }
.detail__section:last-child { border-bottom: none; }
.detail__section h3 {
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-3); margin-bottom: 8px;
}
.detail__section p { font-size: 16px; color: var(--text); }
.detail__section ul { padding-left: 18px; }
.detail__section li { font-size: 16px; margin: 3px 0; }
.detail__empty { color: var(--text-3); font-style: italic; font-size: 15px; }

/* ---------- Features (qué encontrarás) ---------- */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.feature {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 24px;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.25s, border-color 0.25s;
}
.feature:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: var(--line-2);
}
.feature__icon {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 20px;
  margin-bottom: 16px;
}
.feature h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}
.feature p { font-size: 14.5px; color: var(--text-2); line-height: 1.55; }

/* ---------- Planes ---------- */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
  align-items: stretch;
}
.plan {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s;
}
.plan:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.plan__name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--accent);
}
.plan__price {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 8px 0 2px;
}
.plan__price span { font-size: 17px; font-family: var(--font-sans); font-weight: 500; color: var(--text-3); }
.plan__price-old {
  font-size: 26px;
  font-weight: 500;
  color: var(--text-3);
  text-decoration: line-through;
  text-decoration-color: var(--accent);
  margin-right: 10px;
}
.plan__discount {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-deep);
  background: var(--accent-soft);
  border: 1px solid rgba(184, 137, 59, 0.3);
  padding: 5px 11px;
  border-radius: 999px;
  margin: 6px 0 -2px;
}
.plan__desc { font-size: 14.5px; color: var(--text-2); margin-bottom: 20px; }
.plan__limit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold-2);
  background: var(--accent-soft);
  border: 1px solid rgba(249, 115, 22, 0.4);
  padding: 6px 12px;
  border-radius: 999px;
  margin: -8px 0 22px;
}
.plan__limit-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 var(--gold-glow);
  animation: limitPulse 1.8s ease-in-out infinite;
}
@keyframes limitPulse {
  0%   { box-shadow: 0 0 0 0 var(--gold-glow); }
  70%  { box-shadow: 0 0 0 7px rgba(212, 164, 76, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 164, 76, 0); }
}
/* Sobre la tarjeta oscura destacada, el distintivo va en naranja claro */
.plan--featured .plan__limit {
  color: var(--gold-2);
  background: rgba(249, 115, 22, 0.16);
  border-color: rgba(249, 115, 22, 0.55);
}
.plan__list {
  list-style: none;
  padding: 0;
  margin-bottom: 28px;
  flex: 1;
}
.plan__list li {
  position: relative;
  padding: 9px 0 9px 28px;
  font-size: 15px;
  border-bottom: 1px solid var(--line);
}
.plan__list li:last-child { border-bottom: none; }
.plan__list li::before {
  content: "✓";
  position: absolute;
  left: 2px;
  color: var(--accent);
  font-weight: 700;
}
.plan__cta { width: 100%; }

/* Plan destacado: escena oscura, espejo del hero */
.plan--featured {
  background: linear-gradient(170deg, var(--ink-2), var(--ink));
  border-color: rgba(249, 115, 22, 0.35);
  color: var(--ink-text);
  box-shadow: 0 24px 60px rgba(25, 19, 16, 0.35);
}
.plan--featured:hover { box-shadow: 0 30px 70px rgba(25, 19, 16, 0.45); }
.plan--featured .plan__name { color: var(--gold-2); }
.plan--featured .plan__desc { color: var(--ink-text-2); }
.plan--featured .plan__price span { color: var(--ink-text-2); }
.plan--featured .plan__list li { border-bottom-color: var(--ink-line); }
.plan--featured .plan__list li::before { color: var(--gold); }
.plan__badge {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold-2), var(--gold-deep));
  color: #241a10;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 999px;
  box-shadow: 0 6px 18px var(--gold-glow);
  white-space: nowrap;
}

/* Plan de por vida: legado con borde dorado */
.plan--legacy {
  border: 1.5px solid var(--gold);
  background:
    linear-gradient(170deg, rgba(249, 115, 22, 0.07), transparent 45%),
    var(--card);
}
.plan--legacy .plan__name { color: var(--gold-deep); }
.plan__badge--legacy {
  background: var(--ink);
  color: var(--gold-2);
  border: 1px solid var(--gold);
  box-shadow: 0 6px 18px rgba(25, 19, 16, 0.3);
}
/* (regla vieja eliminada: el CTA de este plan ya es .btn--gold y trae sus colores) */
.plan__price span { margin-left: 6px; }
/* El nivel de por vida (Awó) resalta su modalidad de pago en bloque */
.plan--featured .plan__price span {
  display: block;
  margin: 2px 0 0;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.plans__note {
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
  margin-top: 22px;
}

/* ---------- Footer (escena oscura de cierre) ---------- */
.footer {
  background: linear-gradient(180deg, var(--ink) 0%, #14100d 100%);
  color: var(--ink-text-2);
  padding: 72px 22px 56px;
  text-align: center;
  margin-top: 40px;
}
.footer__brand {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--ink-text);
  margin-bottom: 12px;
}
.footer__bless {
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer__copy { font-size: 12.5px; }

/* ---------- Búsqueda ---------- */
.search {
  position: relative;
  max-width: 420px;
  margin-bottom: 24px;
}
.search input {
  width: 100%;
  height: 42px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  border-radius: 10px;
  padding: 0 14px 0 38px;
  font-size: 15px;
  font-family: var(--font-sans);
  color: var(--text);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.search input:focus { border-color: var(--accent); background: var(--bg); }
.search__icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--text-3); pointer-events: none;
}

.cell.dim { opacity: 0.18; }

/* ---------- Contenido del detalle: secciones ricas ---------- */

/* Atributos del signo (color de la suerte, día…) */
.datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.dato {
  background: var(--bg-elev);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.dato__l {
  display: block;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-3);
  margin-bottom: 6px;
}
.dato__v {
  font-size: 15px; font-weight: 600; color: var(--text);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.color-pill { display: inline-flex; align-items: center; gap: 6px; }
.swatch {
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  display: inline-block;
  flex-shrink: 0;
}

/* Rezo principal */
.rezo {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  padding: 14px 18px;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  font-style: italic;
}
.rezo__suyere {
  margin-top: 12px;
  font-size: 14.5px;
  color: var(--text-2);
  line-height: 1.55;
}
.rezo__suyere span {
  display: inline-block;
  font-style: normal;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-right: 8px;
}

/* Orishas (chips compactos) */
.orisha-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.orisha-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px 5px 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: default;
}
.orisha-chip__r {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.orisha-chips__hint {
  font-size: 12.5px;
  color: var(--text-3);
  margin-top: 10px;
}

/* FODA */
.foda {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 560px) { .foda { grid-template-columns: 1fr; } }
.foda__q {
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: var(--card);
}
.foda__q h4 {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; margin-bottom: 8px;
}
.foda__q ul { padding-left: 16px; }
.foda__q li { font-size: 14px; margin: 5px 0; line-height: 1.45; }
.foda__q--f { border-top: 3px solid #4a8f5b; }
.foda__q--f h4 { color: #4a8f5b; }
.foda__q--o { border-top: 3px solid #3f7cb8; }
.foda__q--o h4 { color: #3f7cb8; }
.foda__q--d { border-top: 3px solid #c08a2e; }
.foda__q--d h4 { color: #c08a2e; }
.foda__q--a { border-top: 3px solid #b8553f; }
.foda__q--a h4 { color: #b8553f; }

/* Refranes con interpretación */
.refranes { list-style: none; padding: 0; }
.refran {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.refran:last-child { border-bottom: none; }
.refran__t {
  font-size: 16px; font-weight: 600; color: var(--text);
  font-style: italic; line-height: 1.45;
}
.refran__i {
  font-size: 14px; color: var(--text-2);
  line-height: 1.5; margin-top: 4px;
}

/* Qué nace en el signo (texto + porqué) */
.naces { list-style: none; padding: 0; }
.nace {
  position: relative;
  padding: 12px 0 12px 22px;
  border-bottom: 1px solid var(--line);
}
.nace:last-child { border-bottom: none; }
.nace::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 11px;
  color: var(--accent);
  font-size: 13px;
}
.nace__t {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}
.nace__w {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.5;
  margin-top: 3px;
}

/* Ires y osogbos (dos columnas) */
.ios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 560px) { .ios { grid-template-columns: 1fr; } }
.io {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  background: var(--card);
}
.io h4 {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; margin-bottom: 10px;
}
.io--ire { border-top: 3px solid #4a8f5b; }
.io--ire h4 { color: #4a8f5b; }
.io--osogbo { border-top: 3px solid #b8553f; }
.io--osogbo h4 { color: #b8553f; }
.io ul { list-style: none; padding: 0; }
.io li { padding: 7px 0; border-bottom: 1px solid var(--line); }
.io li:last-child { border-bottom: none; }
.io li b { display: block; font-size: 14px; }
.io li span { display: block; font-size: 13px; color: var(--text-2); line-height: 1.45; margin-top: 2px; }
.io__links { display: block; margin-top: 6px; }
.io__link {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 12.5px; font-weight: 600;
  color: var(--accent);
  background: none;
  border: none;
  padding: 0;
  text-decoration: none;
  margin: 2px 12px 2px 0;
  cursor: pointer;
}
.io__link:hover { text-decoration: underline; }

/* Destello al saltar a un patakí desde un enlace */
.pataki--flash {
  animation: patakiFlash 1.4s ease;
  border-radius: 10px;
}
@keyframes patakiFlash {
  0% { background: var(--accent-soft); }
  100% { background: transparent; }
}

/* Pie del detalle: posición en los 256 */
.detail__foot {
  text-align: center;
  font-size: 12.5px;
  color: var(--text-3);
  letter-spacing: 0.02em;
  padding: 22px 0 4px;
  margin-top: 8px;
  border-top: 1px solid var(--line);
}

/* Prohibiciones con su porqué */
.prohibs { list-style: none; padding: 0; }
.prohib {
  position: relative;
  padding: 12px 0 12px 22px;
  border-bottom: 1px solid var(--line);
}
.prohib:last-child { border-bottom: none; }
.prohib::before {
  content: "✕";
  position: absolute;
  left: 0;
  top: 12px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}
.prohib__t {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}
.prohib__w {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.5;
  margin-top: 3px;
}

/* Recetas: ebbós y obras */
.receta {
  padding: 14px 16px;
  margin-bottom: 10px;
  background: var(--bg-elev);
  border-radius: var(--radius-sm);
}
.receta:last-child { margin-bottom: 0; }
.receta h4 {
  font-size: 15px; font-weight: 600; margin-bottom: 6px;
  color: var(--text);
}
.receta p { font-size: 14.5px; color: var(--text-2); line-height: 1.55; }
.receta__tema {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 3px 9px; border-radius: 999px;
  margin-bottom: 8px;
  background: var(--accent-soft); color: var(--accent);
}
.receta[data-tema="Dinero"] .receta__tema { background: rgba(74,143,91,.14); color: #4a8f5b; }
.receta[data-tema="Amor"] .receta__tema { background: rgba(192,86,127,.14); color: #c0567f; }
.receta[data-tema="Alejar la muerte"] .receta__tema { background: rgba(90,98,112,.16); color: #5a6270; }
.receta[data-tema="La pérdida"] .receta__tema { background: rgba(192,138,46,.16); color: #c08a2e; }
.receta[data-tema="Vencer enemigos"] .receta__tema { background: rgba(184,85,63,.14); color: #b8553f; }

/* Patakíes */
.patakies { list-style: none; padding: 0; counter-reset: none; }
.pataki {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 16px;
}
.pataki:last-child { border-bottom: none; }
.pataki__head {
  display: flex; gap: 11px; align-items: center; margin-bottom: 6px;
}
.pataki__n {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.pataki__head b { font-size: 16px; }
.pataki__tag {
  display: inline-block;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 9px; border-radius: 999px;
  margin: 2px 0 7px;
}
.pataki__tag--ire { background: rgba(74,143,91,.14); color: #4a8f5b; }
.pataki__tag--osogbo { background: rgba(184,85,63,.14); color: #b8553f; }
.pataki p { font-size: 14.5px; color: var(--text-2); line-height: 1.55; }
.pataki__full p { margin-top: 10px; }
.pataki__full p:first-child { margin-top: 8px; }
.pataki__toggle {
  margin-top: 8px;
  border: none;
  background: none;
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  padding: 2px 0;
}
.pataki__toggle:hover { text-decoration: underline; }

/* ---------- Detalle: navegación entre Odùs ---------- */
.detail__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 2px 0 16px;
}
.detail__navbtn {
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  max-width: 38%;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s, border-color 0.2s, transform 0.2s;
}
.detail__navbtn:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.detail__navpos {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}

/* Línea de esencia del Odù */
.detail__esencia {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.45;
  color: var(--text-2);
  margin-top: 8px;
  max-width: 460px;
}

/* ---------- Detalle: índice de secciones (pegajoso) ---------- */
.detail__toc {
  position: sticky;
  top: -14px; /* compensa el padding superior del panel */
  z-index: 6;
  display: flex;
  gap: 7px;
  overflow-x: auto;
  margin: 0 -26px 6px;
  padding: 12px 26px;
  background: var(--bg-blur);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.detail__toc::-webkit-scrollbar { display: none; }
.toc__chip {
  flex-shrink: 0;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.toc__chip:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ---------- Chips de santos expandibles ---------- */
.orisha-chip {
  font-family: var(--font-sans);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.18s;
}
.orisha-chip:hover { border-color: var(--line-2); transform: translateY(-1px); }
.orisha-chip.is-open {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text);
}
.orisha-note {
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.5;
}

/* ============================================================
   Plan gratuito · espacios publicitarios
   ============================================================ */
.ad-strip {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 22px;
}
.ad-strip--foot { margin-bottom: 44px; }

/* Anclado inferior (solo móvil, descartable) */
.ad-anchor {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60; /* debajo de la hoja de detalle (z:100) */
  display: none;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 10px 14px;
  background: var(--bg-blur);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--line-2);
  transform: translateY(105%);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ad-anchor.is-visible { transform: translateY(0); }
.ad-anchor .ad__label { position: static; flex-shrink: 0; }
.ad-anchor__ph {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 50px;
  border: 1px dashed var(--line-2);
  border-radius: 9px;
  background: var(--bg-elev);
}
.ad-anchor__ph b { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.ad-anchor__ph span { font-size: 10.5px; color: var(--text-3); }
.ad-anchor__close {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border: none;
  border-radius: 50%;
  background: var(--bg-elev);
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
/* Solo en pantallas pequeñas */
@media (max-width: 680px) {
  .ad-anchor { display: flex; }
}
.ad {
  position: relative;
  max-width: 728px;
  margin: 0 auto;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  overflow: hidden;
}
.ad__label {
  position: absolute;
  top: 6px; left: 10px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.ad__ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
}
.ad__ph b { font-size: 14px; font-weight: 600; color: var(--text-2); }
.ad__ph span { font-size: 11.5px; color: var(--text-3); }
.ad--leader .ad__ph { height: 90px; }
@media (max-width: 680px) { .ad--leader .ad__ph { height: 100px; } }
.ad--rect { max-width: 300px; }
.ad--rect .ad__ph { height: 250px; }
/* Rectángulo dentro del detalle: separado como una sección más */
.detail__section .ad--rect,
.sheet__panel .ad--rect { margin: 18px auto; }

/* Tarjeta nativa dentro de la cuadrícula: auto-promoción de planes */
.ad-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
}
.ad-card .ad__label { top: 8px; left: 12px; z-index: 1; }
.ad-card__body { text-align: center; padding: 14px 8px 10px; }
.ad-card__badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.ad-card__body b {
  display: block;
  font-family: var(--font-display);
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.25;
}
.ad-card__body > span:not(.ad-card__badge):not(.ad-card__cta) {
  display: block;
  font-size: 12px;
  line-height: 1.45;
  margin-top: 6px;
}
.ad-card__cta {
  display: inline-block;
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 700;
}

/* Variante Babalawo: escena oscura, espejo del plan destacado */
.ad-card--babalawo {
  background: linear-gradient(170deg, var(--ink-2), var(--ink));
  border-color: rgba(212, 164, 76, 0.35);
}
.ad-card--babalawo:hover { border-color: var(--gold); box-shadow: 0 14px 34px rgba(25, 19, 16, 0.3); }
.ad-card--babalawo .ad__label { color: rgba(244, 237, 225, 0.45); }
.ad-card--babalawo .ad-card__badge {
  background: linear-gradient(135deg, var(--gold-2), var(--gold-deep));
  color: #241a10;
}
.ad-card--babalawo b { color: var(--ink-text); }
.ad-card--babalawo .ad-card__body > span:not(.ad-card__badge):not(.ad-card__cta) { color: var(--ink-text-2); }
.ad-card--babalawo .ad-card__cta { color: var(--gold-2); }

/* Variante Awó: clara con borde dorado, espejo del plan legado */
.ad-card--awo {
  border: 1.5px solid var(--gold);
  background: linear-gradient(170deg, rgba(212, 164, 76, 0.08), transparent 50%), var(--card);
}
.ad-card--awo:hover { box-shadow: 0 10px 28px rgba(184, 137, 59, 0.18); }
.ad-card--awo .ad-card__badge {
  background: var(--ink);
  color: var(--gold-2);
}
.ad-card--awo b { color: var(--text); }
.ad-card--awo .ad-card__body > span:not(.ad-card__badge):not(.ad-card__cta) { color: var(--text-2); }
.ad-card--awo .ad-card__cta { color: var(--gold-deep); }

/* ============================================================
   Plan gratuito · candados de contenido
   ============================================================ */
.lockbox {
  margin-top: 14px;
  padding: 22px 20px;
  text-align: center;
  border: 1.5px dashed rgba(184, 137, 59, 0.45);
  border-radius: var(--radius);
  background: linear-gradient(170deg, rgba(212, 164, 76, 0.09), rgba(212, 164, 76, 0.03));
}
.lockbox__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold-2);
  margin-bottom: 10px;
}
.lockbox__icon svg { width: 20px; height: 20px; }
.lockbox__t {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.lockbox__s {
  font-size: 13.5px;
  color: var(--text-2);
  margin-top: 4px;
  line-height: 1.5;
}
.lockbox__cta {
  margin-top: 14px;
  padding: 11px 24px;
  font-size: 14px;
}

/* Interpretación de refrán bloqueada: texto señuelo borroso + chip */
.refran__i--locked { position: relative; margin-top: 6px; }
.lock-blur {
  display: block;
  filter: blur(5px);
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  opacity: 0.55;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.5;
}
.lock-chip {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ink);
  color: var(--gold-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(25, 19, 16, 0.25);
}
.lock-chip svg { width: 13px; height: 13px; }

/* ---- Candado ampliado (prototipo v2) ---- */
/* Franja compacta: para secciones cerradas con solo el conteo */
.lockbox--mini {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  padding: 14px 18px;
  margin-top: 4px;
}
.lockbox--mini .lockbox__icon {
  flex: none;
  width: 34px; height: 34px;
  margin-bottom: 0;
}
.lockbox--mini .lockbox__icon svg { width: 17px; height: 17px; }
.lockbox__mini-txt { flex: 1; min-width: 0; }
.lockbox--mini .lockbox__t { display: block; font-size: 15.5px; }
.lockbox--mini .lockbox__s { display: block; margin-top: 2px; }
.lockbox__mini-cta {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.lockbox__mini-cta:hover { text-decoration: underline; }

/* Lista-anzuelo: títulos visibles de recetas/patakíes bajo candado */
.locklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 2px 0 4px;
}
.lockline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px dashed rgba(184, 137, 59, 0.35);
  border-radius: 12px;
  background: rgba(212, 164, 76, 0.04);
}
.lockline .receta__tema { flex: none; margin: 0; }
.lockline__n {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(184, 137, 59, 0.12);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}
.lockline__t {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  line-height: 1.3;
}
.lockline__chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(184, 137, 59, 0.1);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.lockline__chip svg { width: 12px; height: 12px; }
/* Secreto de Awó: variante oscura, espejo del plan vitalicio */
.lockline--awo {
  border-style: solid;
  border-color: rgba(25, 19, 16, 0.35);
  background: linear-gradient(170deg, rgba(25, 19, 16, 0.05), rgba(25, 19, 16, 0.02));
}
.lockline--awo .lockline__chip {
  background: var(--ink);
  color: var(--gold-2);
}
.locklist__awonote {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-2);
  text-align: center;
  line-height: 1.5;
}
.locklist__awonote a { color: var(--accent); font-weight: 700; }
@media (max-width: 560px) {
  .lockline { flex-wrap: wrap; row-gap: 6px; }
  .lockline__t { flex-basis: 100%; order: 3; }
  .lockbox--mini { flex-wrap: wrap; }
  .lockbox__mini-cta { margin-left: 48px; }
}

/* ============================================================
   Checkout · carrito de suscripciones
   ============================================================ */
.co {
  max-width: 1020px;
  margin: 0 auto;
  padding: 100px 22px 80px;
}
.co__head { margin-bottom: 30px; }
.co__head h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.6vw, 44px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.co__head h1 em { font-style: italic; color: var(--accent); }
.co__head p { color: var(--text-2); margin-top: 8px; font-size: 16px; }

.co__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 800px) {
  .co__grid { grid-template-columns: 1fr; }
  .co__grid .co__summary { order: -1; position: static; } /* en móvil, el resumen primero y sin sticky */
}

.co__card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px 24px;
}
.co__card + .co__card { margin-top: 18px; }
.co__card h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
}
.co__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold-2);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 700;
  margin-right: 9px;
  vertical-align: -3px;
}

/* Selector de plan (radios como tarjetas) */
.co-plans { display: grid; gap: 10px; }
.co-plan {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1.5px solid var(--line-2);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.co-plan:hover { border-color: var(--accent); }
.co-plan input { position: absolute; opacity: 0; pointer-events: none; }
.co-plan__radio {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--line-2);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.co-plan.is-sel {
  border-color: var(--gold-deep);
  background: linear-gradient(170deg, rgba(212, 164, 76, 0.08), transparent 55%), var(--card);
  box-shadow: 0 6px 22px rgba(184, 137, 59, 0.14);
}
.co-plan.is-sel .co-plan__radio {
  border-color: var(--gold-deep);
  box-shadow: inset 0 0 0 5px var(--gold-deep);
}
.co-plan__body { flex: 1; min-width: 0; }
.co-plan__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.co-plan__pop {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.07em; text-transform: uppercase;
  background: linear-gradient(135deg, var(--gold-2), var(--gold-deep));
  color: #241a10;
  padding: 3px 9px; border-radius: 999px;
}
.co-plan__meta { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.co-plan__price { text-align: right; flex-shrink: 0; }
.co-plan__amount { font-family: var(--font-display); font-weight: 600; font-size: 20px; }
.co-plan__per { display: block; font-size: 11.5px; color: var(--text-3); }

/* Formulario */
.co-field { margin-bottom: 14px; }
.co-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.co-field input {
  width: 100%;
  height: 46px;
  border: 1px solid var(--line-2);
  background: var(--bg);
  border-radius: 11px;
  padding: 0 14px;
  font-size: 15.5px;
  font-family: var(--font-sans);
  color: var(--text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.co-field input:focus {
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(184, 137, 59, 0.15);
}
.co-field input.is-error { border-color: #b8553f; box-shadow: 0 0 0 3px rgba(184, 85, 63, 0.13); }
.co-field__err {
  display: none;
  font-size: 12.5px;
  color: #b8553f;
  margin-top: 5px;
}
.co-field.has-error .co-field__err { display: block; }
.co-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Métodos de pago */
.co-methods { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.co-method {
  border: 1.5px solid var(--line-2);
  background: var(--card);
  border-radius: 11px;
  padding: 9px 16px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.co-method.is-sel {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--gold-2);
}
.co-method__note {
  font-size: 13.5px;
  color: var(--text-2);
  background: var(--bg-elev);
  border-radius: 11px;
  padding: 13px 15px;
  line-height: 1.55;
}

/* Resumen del pedido */
.co__summary {
  position: sticky;
  top: 84px;
}
.co-sum {
  background: linear-gradient(170deg, var(--ink-2), var(--ink));
  color: var(--ink-text);
  border: 1px solid rgba(212, 164, 76, 0.35);
  border-radius: 20px;
  padding: 26px 24px;
  box-shadow: 0 20px 50px rgba(25, 19, 16, 0.28);
}
.co-sum h2 {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 600;
  margin-bottom: 16px;
  color: var(--ink-text);
}
.co-sum__fig {
  width: 54px;
  margin-bottom: 12px;
  opacity: 0.9;
}
.co-sum__fig svg { width: 100%; height: auto; display: block; }
.co-sum__fig svg rect { fill: var(--gold); }
.co-sum__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  font-size: 14.5px;
  color: var(--ink-text-2);
  border-bottom: 1px solid var(--ink-line);
}
.co-sum__row b { color: var(--ink-text); font-weight: 600; }
.co-sum__row--total {
  border-bottom: none;
  padding-top: 14px;
  font-size: 15px;
}
.co-sum__total {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  color: var(--gold-2);
  letter-spacing: -0.01em;
}
.co-sum__per { font-size: 13px; color: var(--ink-text-2); margin-left: 4px; font-family: var(--font-sans); }
.co-sum__save {
  display: inline-block;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gold-2);
  background: rgba(212, 164, 76, 0.14);
  border: 1px solid rgba(212, 164, 76, 0.4);
  padding: 4px 10px; border-radius: 999px;
}
.co-sum__limit {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--gold-2);
  background: rgba(212, 164, 76, 0.14);
  border: 1px solid rgba(212, 164, 76, 0.4);
  padding: 5px 11px; border-radius: 999px;
  margin-top: 10px;
}
.co-sum__cta {
  width: 100%;
  margin-top: 18px;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
}
.co-sum__note {
  font-size: 12px;
  color: var(--ink-text-2);
  text-align: center;
  margin-top: 13px;
  line-height: 1.5;
}
.co-sum__trust {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ink-line);
  font-size: 11.5px;
  color: var(--ink-text-2);
  letter-spacing: 0.03em;
}

/* Estado de éxito */
.co-done {
  text-align: center;
  padding: 60px 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
}
.co-done__fig { width: 64px; margin: 0 auto 20px; }
.co-done__fig svg { width: 100%; height: auto; }
.co-done__fig svg rect { fill: var(--gold-deep); }
.co-done h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 600;
  margin-bottom: 10px;
}
.co-done__bless {
  color: var(--gold-deep);
  font-size: 12.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.co-done p { color: var(--text-2); font-size: 16px; max-width: 440px; margin: 0 auto 26px; line-height: 1.6; }

/* ============================================================
   MODO TEMPLO — overrides del tema oscuro total (prototipo)
   ============================================================ */

/* Grano de papel casi imperceptible sobre todo el lienzo */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3000;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Elevación por capas: hairline en superficies de tarjeta */
.plan,
.ad-card {
  border-color: var(--line);
}

/* El candado sobre negro: el círculo de tinta necesita filo */
.lockbox__icon,
.lock-chip {
  border: 1px solid var(--line-2);
}

/* Secreto de Awó en modo oscuro: capa de luz, no mancha de tinta */
.lockline--awo {
  border-color: rgba(255, 255, 255, 0.22);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
}
.lockline--awo .lockline__chip {
  border: 1px solid rgba(249, 115, 22, 0.4);
}

/* Número de Odù gigante: el dato como arte, trazo hueco naranja */
.detail__top { position: relative; }
.detail__bignum {
  position: absolute;
  top: -34px;
  right: -8px;
  z-index: 0;
  font-family: var(--font-display);
  font-size: 190px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(249, 115, 22, 0.3);
  pointer-events: none;
  user-select: none;
}
.detail__title { position: relative; z-index: 1; }
@media (max-width: 680px) {
  .detail__bignum { font-size: 110px; top: -18px; right: 0; }
}

/* Letra capital en el texto completo de cada patakí, como libro antiguo */
.pataki__full p:first-child::first-letter {
  font-family: var(--font-display);
  font-size: 3.4em;
  font-weight: 600;
  line-height: 0.8;
  float: left;
  margin: 4px 10px 0 0;
  color: var(--accent);
}

/* ---- Precio de fundador ---- */
.plan__founder {
  font-size: 12.5px;
  color: var(--gold-2);
  background: var(--accent-soft);
  border: 1px dashed rgba(249, 115, 22, 0.4);
  border-radius: 10px;
  padding: 8px 12px;
  margin: -6px 0 16px;
  line-height: 1.5;
}
.plan__founder b { color: var(--gold-2); }

/* Selector de duración en el checkout (solo Babalawo) */
.co-dur {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.co-dur__label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 10px;
}
#co-durs .co-method {
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.3;
}
#co-durs .co-method small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  margin-top: 2px;
}
#co-durs .co-method.is-sel small { color: var(--text-2); }
.co-dur__best {
  display: inline-block;
  margin-left: 6px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #0b0b0b;
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  border-radius: 999px;
  padding: 2px 7px;
  vertical-align: 1px;
}