/* ============================================================
   APP-72H.CSS — capa propia de este proyecto
   Se carga DESPUÉS del framework (tokens → animations → los
   componentes de /framework/components/). Todo lo de aquí usa
   las variables de tokens.css — nunca colores sueltos — para no
   acabar con dos sistemas de variables pisándose (justo el
   problema que el README del framework documenta haber limpiado
   en los 3 proyectos originales).

   Índice:
   1. Fixed stack (ticker + header) — oscuro/dorado
   2. Ajustes de hero para este proyecto
   3. Botón CTA sólido para móvil (btn-urgent)
   4. Trust row + sellos de maravillas (dorado unificado)
   4b. Cards — glow dorado en hover
   5. Reviews
   6. Precio (borde dorado)
   7. FAQ
   8. Footer — oscuro/dorado, a juego con header/ticker
   9. Cookie banner + modal
   10. Páginas legales
   11. Helper de sección + divisor dorado
   12. Cursor luxury (ver js/luxury.js)
   13. v6 — 72 HORAS (documento, membresía, galería)
   ============================================================ */

/* ── 0. SCROLL — imprescindible con header+ticker fijos ───────── */
/* Sin esto, cualquier enlace #ancla (nav, footer) deja la sección
   objetivo tapada bajo el .fixed-stack. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--ticker-h) + 12px);
}

/* ── 0b. TEXTURA 72 HORASS SOLO EN HERO (v20) ────────────────────────── */
/* Textura en mosaico detrás del hero, un poco más visible que en el
   footer para crear presencia visual sin distraer del contenido.
   z-index:1 (v23) — por encima de .hero-bg (el resplandor radial,
   z-index:0 del framework): antes la textura quedaba DEBAJO de ese
   resplandor, que termina en blanco sólido opaco hacia los bordes, así
   que tapaba la textura justo donde debía verse (los márgenes). Con la
   textura por encima, se extiende edge-to-edge del hero en desktop. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.09;
  background-image: none; /* textura eliminada */
  background-repeat: repeat;
  background-size: 120px 120px;
}
.hero {
  position: relative;
}
.hero-inner {
  position: relative;
  z-index: 2;
}

/* ── 1. FIXED STACK — ticker + header apilados y fijos ───────── */
/* El framework asume el .header fijo solo; aquí el ticker va
   encima, así que ambos viven dentro de un wrapper fijo único en
   vez de calcular dos "top" a mano. */
.fixed-stack {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
}
.fixed-stack .header {
  position: static; /* el wrapper ya es fixed, el header no necesita serlo también */
  background: rgba(11, 18, 32, 0.94);
  border-bottom-color: rgba(245, 241, 232, 0.08);
}
.fixed-stack .header .logo span { color: #fff; }
.fixed-stack .header .nav a { color: rgba(245, 241, 232, 0.62); }
.fixed-stack .header .nav a:hover,
.fixed-stack .header .nav a.active { color: #fff; }
.fixed-stack .header .nav a::after { background: var(--accent-luxe); }
.fixed-stack .header .hamburger span { background: #fff; }
.fixed-stack .header .btn-header {
  border-color: var(--accent-luxe);
  color: var(--accent-luxe);
  font-weight: 600;
}
.fixed-stack .header .btn-header::after { background: var(--accent-luxe); }
.fixed-stack .header .btn-header:hover { color: var(--text); }

/* Mobile nav a pantalla completa — mismo tratamiento oscuro/dorado,
   en vez del blanco por defecto del framework. */
.mobile-nav { background: var(--text); }
.mobile-nav a { color: rgba(245, 241, 232, 0.55); }
.mobile-nav a:hover,
.mobile-nav a.active { color: var(--accent-luxe); }
.mobile-nav a.active { border-left-color: var(--accent-luxe); }

/* El framework dimensiona el mobile-nav para ~4 links (font-size hasta
   3.5rem, gap 1.8rem); este proyecto tiene 6 (Home añadido) y el primero
   quedaba cortado arriba, fuera del viewport. Reducir tamaño/gap y
   permitir scroll vertical como red de seguridad en pantallas bajas. */
.mobile-nav {
  gap: 1rem;
  padding: 90px 0 24px;
  overflow-y: auto;
}
.mobile-nav a {
  font-size: clamp(1.4rem, 6vw, 2.2rem);
  min-height: auto;
}

.ticker-wrap {
  background: var(--accent-urgent);
  color: #fff;
  border-bottom: 1px solid var(--accent-urgent-deep);
  padding: 0.85rem 0;
}
.ticker-wrap a { color: #fff; }

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0 28px;
}
.ticker-item svg { width: 16px; height: 16px; flex-shrink: 0; color: #fff; }

/* ── 2. HERO — ajustes para este proyecto ────────────────────── */
/* Padding del hero a la mitad (v22, pedido de Tom: demasiado espacio
   negativo) — tanto el extra sobre header+ticker como el padding-bottom,
   en mobile/base y en el breakpoint de desktop. */
.hero-inner {
  padding-top: calc(var(--header-h) + var(--ticker-h) + 1.5rem);
  padding-bottom: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
/* El framework mete un margin-bottom propio en h1/hero-sub (pensado
   para layout sin flex-gap); aquí el .hero-inner ya es flex con gap,
   así que ese margin se sumaba al gap y duplicaba el espacio entre
   el h2 y lo que viene después. Se anula para que el único espaciado
   sea el gap de .hero-inner. */
.hero h1,
.hero-sub {
  margin-bottom: 0;
}
/* .ta-badge trae margin propio (pensado para cuando va suelto en un
   párrafo, ver Story section); dentro del hero es un item de flex con
   gap, así que ese margin se sumaba al gap y duplicaba el espacio. */
.hero .ta-badge {
  margin: 0;
}
.hero {
  min-height: 108svh;
}
@media (min-width: 1024px) {
  .hero {
    min-height: 126svh;
  }
  .hero-inner {
    padding-top: calc(var(--header-h) + var(--ticker-h) + 2.5rem);
    padding-bottom: 4rem;
    gap: 0.75rem;
  }
}
@media (max-width: 640px) {
  .hero {
    min-height: auto;
  }
}
/* Un resplandor cálido muy sutil en vez de blanco plano — el
   framework deja .hero-bg como color sólido; aquí se sustituye por
   un radial suave que nace justo donde termina el header oscuro. */
.hero-bg {
  background: radial-gradient(circle at 50% 0%, var(--accent-luxe-soft) 0%, var(--bg) 55%);
}
/* El framework deja .hero-label en peso normal (400) — un poco más
   grueso aquí para que "72 HORAS · España" tenga algo
   más de presencia sin llegar a bold. */
.hero .hero-label {
  font-weight: 600;
  color: var(--text-muted);
}
/* El framework deja el h1 en peso 300 (elegante/fino en Cormorant);
   Fraunces a 700 da el mismo carácter editorial pero con el peso e
   impacto que este proyecto necesita en el hero. */
.hero h1 {
  font-weight: 700;
  font-size: clamp(2.6rem, 9vw, 5.2rem);
  letter-spacing: -0.02em;
}
.hero h1 .hl { color: var(--accent-luxe); font-style: italic; }
.hero { text-align: center; }
.hero-sub { margin-left: auto; margin-right: auto; }
.hero-actions { justify-content: center; }

/* Franja de confianza — rellena el hueco entre el trust-row y la foto
   del documento (pedido de Tom: "algo comercial/CTA que incite a
   comprar", en vez del SVG de icono suelto que quedaba demasiado
   pequeño). 3 reassurances de compra, sin inventar cifras ni prueba
   social falsa (mismo criterio que el resto del proyecto, ver
   CLAUDE.md — no counters, no testimonios inventados). */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 14px 20px;
  border-radius: var(--radius);
  background: var(--accent-luxe);
  border: 1px solid var(--accent);
}
.trust-strip-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--accent);
}
.trust-strip-item svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex-shrink: 0;
}

/* ── 3. CTA SÓLIDO — variante mobile-first de .btn ───────────── */
/* El .btn del framework rellena de color SOLO en :hover — en
   móvil no hay hover, así que la CTA principal (pagar) se vería
   como un simple contorno en el dispositivo donde más importa
   convertir. Parte ya rellena, sin depender de hover.
   .btn-urgent (rojo) se queda definida pero sin uso: el tono
   "deadpan serio" de v6 no pide urgencia — ver .btn-cta. */
.btn-urgent {
  background: var(--accent-urgent);
  border: 1px solid var(--accent-urgent);
  color: #fff;
  box-shadow: 0 10px 24px rgba(214, 41, 61, 0.28);
}
.btn-urgent::after { background: var(--accent-urgent-deep); }
.btn-urgent:hover { color: #fff; }

/* v6 — CTA dorada, misma lógica de "ya relleno, sin depender de
   hover", pero con el tono institucional/registro en vez de urgencia. */
.btn-cta {
  background: var(--accent-luxe);
  border: 1px solid var(--accent);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(201, 162, 39, 0.28);
}
.btn-cta:hover {
  background: var(--accent-luxe-deep);
  border-color: var(--accent);
  color: #fff;
}

/* ── 4. SELLOS ─────────────────────────────────────────────────── */
/* .seals-row/.seal quedan definidas pero sin uso en v6 (ya no hay
   7 maravillas) — se dejan por si se reintroduce ese concepto.
   .trust-row (icono + "Numbered on claim…") se retiró: decía lo mismo
   que .hero-badge-blue más abajo, redundante dentro del mismo hero. */
.stars { display: flex; gap: 2px; color: var(--accent-luxe); }
.stars svg { width: 15px; height: 15px; }

.seals-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.seal {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--border-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--text-dim);
}
.seal svg { width: 22px; height: 22px; }
.seal.found {
  border-color: var(--accent-luxe);
  background: var(--accent-luxe-soft);
  color: var(--accent-luxe-deep);
  box-shadow: 0 0 0 1px var(--accent-luxe) inset, 0 4px 16px rgba(201, 162, 39, 0.28);
}
.seal.locked { border-style: dashed; opacity: 0.6; }

/* ── 4b. CARDS — glow dorado en hover, encima del hover-lift del framework ── */
@media (hover: hover) and (pointer: fine) {
  .card:hover {
    border-color: var(--accent-luxe);
    box-shadow: 0 20px 50px rgba(201, 162, 39, 0.14);
  }
}

/* Fondo de color en todas las tarjetas (v11.1 — Tom pidió que todas
   compartan el mismo tratamiento que .price-block: fondo oscuro,
   texto blanco, borde superior dorado. Sustituye el ciclo de 3
   colores de v11, que quedaba demasiado disperso. */
.cards-grid .card {
  background: var(--text);
  border-color: transparent;
  border-top: 3px solid var(--accent-luxe);
}
.cards-grid .card h3 { color: #fff; }
.cards-grid .card p { color: rgba(255, 255, 255, 0.65); }
.cards-grid .card .card-num { color: var(--accent-luxe-deep); }

/* ── 4c. SELLOS DORADOS — glifo tipo placa de museo en las tarjetas
   del cuerpo (Why People Love It) y en la numeración de los pasos
   (How to Claim Yours), para que ambas usen el mismo lenguaje visual. */
.card-seal {
  width: 40px;
  height: 40px;
  margin: 0 auto var(--space-2);
  color: var(--accent-luxe);
}
.card-seal svg { width: 100%; height: 100%; }

/* Sobreescribe el número del framework (serif grande, gris, sin
   marco) por un sello circular dorado — mismo motivo que .card-seal,
   la cifra hace también de "número de pieza" de museo. */
.card--numbered .card-num {
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--accent-luxe);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-luxe-soft);
  font-size: 1.1rem;
  color: var(--accent-luxe-deep);
  opacity: 1;
  margin: 0 auto var(--space-2);
}

/* El sello/número centrado necesita que el resto de la tarjeta
   también lo esté — si no, queda icono centrado + texto a la
   izquierda, descompensado. */
.card:has(.card-seal),
.card--numbered {
  text-align: center;
}

/* ── HERO PROMO — cartel promocional (v17), paleta propia
   (crema/granate) a propósito distinta del resto del sitio, igual
   que el mockup del documento tiene su color de "papel" aparte.
   Más ancho que .hero-photo porque el texto interno necesita
   legibilidad. */
.hero-promo {
  max-width: 560px;
  margin: var(--space-4) auto 0;
}
.hero-promo img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--accent-luxe);
  box-shadow: var(--shadow-card);
  display: block;
  filter: brightness(1.12);
}
.hero-promo figcaption {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-top: 10px;
}

/* ── HERO PHOTO + LÍNEAS FINAS ──────────────────────────────────── */
.hero-photo {
  max-width: 440px;
  margin: var(--space-3) auto 0;
  position: relative;
}
.hero-photo::before,
.hero-photo::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 1px;
  background: var(--accent-luxe);
  opacity: 0.3;
}
.hero-photo::before { top: -16px; }
.hero-photo::after { bottom: -16px; }
.hero-photo img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--accent-luxe);
  display: block;
}
.hero-photo-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1.5px dashed var(--border-mid);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-dim);
  background: var(--bg-2);
}
.hero-photo-placeholder svg { width: 30px; height: 30px; }
.hero-photo-placeholder span {
  font-family: var(--font-mono);
  font-size: 11px;
}
.hero-photo figcaption {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-top: 10px;
}

/* ── 5. REVIEWS — retirada en v6, sin sustituto. Bloque eliminado
   (no queda ningún .review-card/.review-placeholder-flag en el HTML;
   a diferencia de .seals-row, no hay plan de reintroducirla). */

/* ── 6. PRECIO ────────────────────────────────────────────────── */
.price-block {
  background: var(--text);
  color: #fff;
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--accent-luxe);
  padding: 36px 26px;
  text-align: center;
}
.price-block .price {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 700;
}
.price-block .price sup {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  margin-left: 6px;
  font-family: var(--font-body);
}
/* Línea de plazo de entrega, junto al precio — mismo dato (24h) ya
   usado en el trust-strip del hero, para no contradecirlo con un
   "instantáneo" que el flujo real (fulfillment manual, ver
   CLAUDE.md) no puede garantizar. */
.price-block .delivery-note {
  font-size: 12.5px;
  color: rgba(255,255,255,0.75);
  margin: 10px 0 24px;
}
.price-block .btn-urgent, .price-block .btn-cta { box-shadow: none; }
/* Aviso de facturación (facturación) — antes 11px/opacidad 0.4, se
   perdía como ruido bajo el botón. Icono ⓘ + más contraste para que
   se lea como información relevante de pre-compra, no letra pequeña. */
.price-block .billing-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  max-width: 360px;
  margin: 16px auto 0;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
  text-align: left;
}
.price-block .billing-note span {
  flex-shrink: 0;
  color: var(--accent-luxe);
  font-size: 14px;
}

/* ── 7. FAQ ───────────────────────────────────────────────────── */
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 15.5px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg { color: var(--accent); transition: transform 0.2s ease; flex-shrink: 0; }
.faq-item[open] summary svg { transform: rotate(180deg); }
.faq-item p { color: var(--text-muted); font-size: 14.5px; margin-top: 10px; }

/* ── 8. FOOTER — oscuro, a juego con header/ticker (efecto "marco") ── */
.footer {
  background: var(--text);
  border-top: none;
  position: relative;
  overflow: hidden;
}
/* Marca de agua de textura (v17) — mismo path del icono del logo
   (ver header), repetido en mosaico a muy poca opacidad. z-index:0
   + los hijos del footer a z-index:1 para que el texto quede siempre
   por encima del patrón, nunca al revés. */
.footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: none; /* textura eliminada */
  background-repeat: repeat;
  background-size: 72px 72px;
}
.footer-inner,
.footer-bottom {
  position: relative;
  z-index: 1;
}
.footer-inner { border-color: rgba(245, 241, 232, 0.1); }
.footer-brand p,
.footer-nav a,
.footer-contact a,
.footer-contact span { color: rgba(245, 241, 232, 0.55); }
.footer-label { color: var(--accent-luxe); }
.footer-nav a:hover,
.footer-contact a:hover,
.footer-nav a.active,
.footer-contact a.active { color: #fff; }
.footer-bottom { border-top-color: rgba(245, 241, 232, 0.1); color: rgba(245, 241, 232, 0.4); }

.footer-social {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(245, 241, 232, 0.1);
  color: var(--accent-luxe);
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: var(--space-2);
  transition: background 0.15s ease, color 0.15s ease;
}
.footer-social:hover { background: var(--accent-luxe); color: var(--text); }

.footer-contact button#cookie-reopen {
  background: none; border: none; cursor: pointer;
  font-size: 0.8rem; color: rgba(245, 241, 232, 0.55);
  text-align: left; padding: 0; font-family: inherit;
  transition: color 0.25s;
}
.footer-contact button#cookie-reopen:hover { color: #fff; }

/* ── 9. COOKIE BANNER + MODAL ─────────────────────────────────── */
.cookie-banner {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: var(--z-modal);
  background: var(--bg);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-card);
  max-width: 520px;
  margin: 0 auto;
  transform: translateY(140%);
  transition: transform 0.4s var(--ease-soft);
}
/* En mobile, .wa-float (buy-float) y .scroll-top-float bajan a
   bottom:1.2rem/50px de alto (ver animations.css, breakpoint
   max-width:600px). Con el banner en bottom:12px se solapaban por
   completo mientras el banner estaba visible, tapando el CTA
   flotante. Se sube el banner por encima de esa fila de botones. */
@media (max-width: 600px) {
  .cookie-banner {
    bottom: calc(1.2rem + 50px + 14px);
  }
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner p { font-size: 13.5px; color: var(--text-muted); margin-bottom: 16px; line-height: 1.6; }
.cookie-banner p a { color: var(--accent); text-decoration: underline; }

.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-actions button {
  flex: 1;
  min-width: 120px;
  padding: 13px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: 1.5px solid var(--text);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}
.cookie-actions button:hover { background: var(--bg-2); }

.cookie-manage-link {
  width: 100%;
  text-align: center;
  margin-top: 12px;
  font-size: 12.5px;
  text-decoration: underline;
  color: var(--text-muted);
  background: none; border: none; cursor: pointer;
}

.cookie-modal-backdrop {
  position: fixed; inset: 0; background: rgba(11,18,32,0.5);
  z-index: var(--z-modal);
  display: none; align-items: flex-end; justify-content: center;
}
.cookie-modal-backdrop.is-visible { display: flex; }
.cookie-modal {
  background: var(--bg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 24px 20px 28px;
  width: 100%;
  max-width: 520px;
}
.cookie-modal h3 { font-family: var(--font-display); font-size: 19px; margin-bottom: 14px; }
.cookie-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.cookie-row-text { padding-right: 16px; }
.cookie-row-text strong { font-size: 14.5px; display: block; margin-bottom: 2px; }
.cookie-row-text span { font-size: 13px; color: var(--text-muted); }

.switch {
  width: 44px; height: 26px; border-radius: 20px;
  background: var(--border-mid);
  position: relative; flex-shrink: 0;
  border: none; cursor: pointer;
}
.switch::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  transition: transform 0.15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.switch.is-on { background: var(--accent); }
.switch.is-on::after { transform: translateX(18px); }
.switch.is-disabled { background: var(--text-dim); opacity: 0.5; cursor: not-allowed; }

.cookie-modal .btn { margin-top: 18px; width: 100%; text-align: center; }

@media (min-width: 560px) {
  .cookie-modal { border-radius: var(--radius-lg); margin-bottom: 20px; }
  .cookie-modal-backdrop { align-items: center; }
}

/* ── 10. PÁGINAS LEGALES ──────────────────────────────────────── */
.legal {
  max-width: 640px;
  margin: 0 auto;
  padding: calc(var(--header-h) + var(--ticker-h) + 40px) 20px 80px;
}
.legal h1 { font-family: var(--font-display); font-size: clamp(28px, 7vw, 38px); margin-bottom: 6px; }
.legal .updated { font-size: 13px; color: var(--text-muted); margin-bottom: 32px; font-family: var(--font-mono); }
.legal h2 { font-family: var(--font-display); font-size: 19px; margin: 32px 0 10px; }
.legal p, .legal li { font-size: 15px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.7; }
.legal ul { padding-left: 20px; margin-bottom: 12px; }
/* El artículo del blog (Full History) es una "sección principal" más,
   igual que el hero de index — usa --section-pad-y arriba y abajo en
   vez de los valores fijos de .legal (pensados para páginas legales
   que terminan solas), así el espaciado es el mismo en ambas páginas
   y entre secciones principales y secundarias. */
.blog-article {
  padding-top: calc(var(--header-h) + var(--ticker-h) + var(--section-pad-y));
  padding-bottom: var(--section-pad-y);
}
.legal .pending {
  background: var(--accent-urgent-light); color: var(--accent-urgent-deep);
  padding: 2px 6px; border-radius: 4px; font-family: var(--font-mono); font-size: 13px;
}
.legal table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 13.5px; }
.legal th, .legal td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-muted); }
.legal th { color: var(--text); font-weight: 700; }

/* ── 11. HELPER DE SECCIÓN + DIVISORES VISUALES ─────────────────── */
.section {
  padding: var(--section-pad-y) var(--section-pad-x);
  position: relative;
}
/* Divisor entre secciones — sutil, con gradiente fade en los extremos
   para que no toque los márgenes (mismo lenguaje que .hero-label::after). */
.section:not(:first-of-type)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, var(--accent-luxe) 15%, var(--accent-luxe) 85%, transparent 100%);
  pointer-events: none;
}

/* Padding vertical de sección ligeramente menor en móvil — únicamente
   el eje Y (nunca --section-pad-x ni nada de desktop). El clamp() de
   tokens.css ya baja de forma fluida con el viewport, esto añade un
   recorte fijo adicional solo por debajo del breakpoint móvil. */
@media (max-width: 600px) {
  :root {
    --section-pad-y: clamp(1.125rem, 3.5vh, 2.75rem);
  }
}
.section-inner > .hero-label::after {
  content: '';
  display: block;
  width: 80px;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, var(--accent-luxe) 20%, var(--accent-luxe) 80%, transparent 100%);
  margin: 14px auto 0;
}
.section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.section-inner > .hero-label {
  display: block;
  text-align: center;
  margin-bottom: var(--space-3);
  font-weight: 600;
}
/* Divisor dorado con líneas decorativas — motivo recurrente de
   sección, el mismo gesto en cada bloque (How it works / Reviews / FAQ).
   Línea central + alas para dar más presencia visual. */
.section-inner > .hero-label::after {
  content: '';
  display: block;
  width: 80px;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, var(--accent-luxe) 20%, var(--accent-luxe) 80%, transparent 100%);
  margin: 14px auto 0;
}

/* buy-float reutiliza .wa-float (posición/tamaño/pulso/reduced-motion
   ya resueltos en animations.css) — solo cambia color e icono.
   v6: dorado en vez de rojo — sin urgencia, tono institucional. */
.buy-float { background: var(--accent-luxe); }

/* ── SCROLL TO TOP (v19) — abajo a la izquierda, borde dorado ──── */
/* No reutiliza .wa-float a propósito: ese es sólido/dorado con
   pulso, pensado para destacar como CTA. Este es solo utilidad de
   navegación — más pequeño, borde dorado siempre visible, sin
   animación de pulso. href="#" + scroll-behavior:smooth (ver sección 0)
   hacen todo el trabajo, sin JS ni listeners nuevos. */
.scroll-top-float {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-luxe);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-float);
  color: var(--accent-luxe);
  transition: background 0.25s, color 0.25s;
}
.scroll-top-float svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .scroll-top-float:hover {
    background: var(--accent-luxe-soft);
  }
}
@media (max-width: 600px) {
  .scroll-top-float { bottom: 1.2rem; left: 1.2rem; width: 36px; height: 36px; }
}

/* ── QUICK LINKS FLOTANTE — apilada encima de la flotante de pago
   (misma columna derecha), en vez de un bot con IA: chips fijos a
   las secciones clave. Botón: mismo tratamiento "outline dorado"
   que .scroll-top-float (utilidad, no CTA de conversión — ese ya lo
   cubre .buy-float, sólido y con pulso). */
.info-float-wrap {
  position: fixed;
  bottom: calc(2rem + 56px + 14px);
  right: 2rem;
  z-index: var(--z-float);
}
.info-float {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-luxe);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-luxe);
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.info-float svg { width: 19px; height: 19px; }
@media (hover: hover) and (pointer: fine) {
  .info-float:hover { background: var(--accent-luxe-soft); }
}
.info-panel {
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 168px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px solid var(--border-mid);
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.info-panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.info-panel-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 2px;
}
.info-chip {
  display: block;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--bg-2);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
}
@media (hover: hover) and (pointer: fine) {
  .info-chip:hover { background: var(--accent-luxe-soft); }
}
@media (max-width: 600px) {
  .info-float-wrap { bottom: calc(1.2rem + 50px + 12px); right: 1.2rem; }
  .info-float { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .info-panel { transition: none; }
}

/* ── 12. CURSOR LUXURY (ver js/luxury.js) ─────────────────────── */
/* Solo se inyecta con puntero fino y sin prefers-reduced-motion —
   luxury.js hace esa comprobación antes de tocar el DOM. Aquí solo
   el aspecto visual del punto que sigue al cursor. */
#luxe-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  border: 1px solid var(--accent-luxe);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.2s var(--ease), height 0.2s var(--ease), background 0.2s var(--ease);
  will-change: transform;
}
#luxe-cursor.is-active {
  width: 34px;
  height: 34px;
  background: var(--accent-luxe-soft);
}
@media (hover: hover) and (pointer: fine) {
  body.has-luxe-cursor,
  body.has-luxe-cursor a,
  body.has-luxe-cursor button {
    cursor: none;
  }
}

/* ── 13. V6 — 72 HORAS (documento, membresía, galería) ── */

/* Columnas de prosa más estrechas para secciones de solo texto
   (The Story / Membership) — el framework no define esto. */
.section-narrow {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.section-narrow p { margin-bottom: var(--space-3); }
/* :not(.hero-label) — algunas secciones (Why/Claim/FAQ, v-SEO) usan
   <h2 class="hero-label"> como único heading real de la sección (antes
   era un <span> sin heading, corregido por jerarquía de encabezados).
   Sin esta exclusión, esta regla ganaba por especificidad y el eyebrow
   pequeño se veía como título grande. */
.section h2:not(.hero-label) {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin-bottom: var(--space-3);
}

/* Sello genérico (anillo + check) — usado en claim-received.html fuera
   del mockup. Se conserva por separado aunque v11.2 quitó el resto de
   clases .muestra-* del mockup, porque esta la usa otra página. */
.sample-seal {
  width: 40px;
  height: 40px;
  color: var(--accent-luxe);
}
.sample-seal svg { width: 100%; height: 100%; }

/* Certificado real (v11.2 — Tom ya entregó discover.png, sustituye el
   mockup CSS ilustrativo de v6-v10). Solo marco + sombra sobre la
   imagen, el diseño en sí es responsabilidad de Tom (ver "División de
   trabajo" en CLAUDE.md) — no tocar el contenido de assets/muestra.jpg
   desde código. */
.sample-figure {
  max-width: 420px;
  margin: 0 auto var(--space-5);
}
.sample-figure img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--accent-luxe);
  box-shadow: var(--shadow-card);
  display: block;
}
.sample-figure figcaption {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-top: 10px;
}
.sample-features { margin-top: 0; }

/* Membership — fila de badges tipo "términos del registro" */
.chips-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: var(--space-4);
}
.chips-row span {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  padding: 8px 16px;
  border: 1px solid var(--accent);
  border-radius: 20px;
  background: var(--accent-luxe);
  color: var(--accent);
}

.hero-cta-note {
  max-width: 420px;
  margin: 0 auto;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ── 14. TRIPADVISOR BADGE — tratamiento card ────────────────────── */
.ta-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-top: 3px solid var(--accent-luxe);
  border-radius: var(--radius);
  background: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: var(--space-3) 0;
}
.ta-badge svg {
  width: 16px;
  height: 16px;
  color: inherit;
  flex-shrink: 0;
}

/* ── 14. CLAIM FORM (claim.html) + CONTACT FORM (index.html #contact) ── */
.claim-form,
.contact-form {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: left;
}
.claim-form label,
.contact-form label {
  font-size: 13.5px;
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}
.claim-form label span,
.contact-form label span {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 12px;
}
.claim-form input[type="text"],
.claim-form input[type="email"],
.claim-form input[type="file"],
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm, 10px);
  font-family: var(--font-body);
  font-size: 15px;
  background: var(--bg);
  color: var(--text);
}
.contact-form textarea {
  resize: vertical;
  min-height: 110px;
}
.claim-form input[type="text"]:focus,
.claim-form input[type="email"]:focus,
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent-luxe);
}
.claim-form .btn,
.contact-form .btn { margin-top: var(--space-2); width: 100%; text-align: center; }
.claim-status,
.contact-status {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  min-height: 1.2em;
}

/* Honeypot — oculto a la vista, visible para lectores de pantalla
   evitado (aria-hidden en el HTML) y para bots simples que rellenan
   cualquier campo que encuentren. Nunca display:none puro: algunos
   bots lo detectan y lo saltan a propósito. */
.claim-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── 15. HERO TRUST BLOCK (trust-strip + timeline + badge, agrupados) ──
   Antes cada pieza llevaba su propio margen y heredaba el mismo gap
   uniforme de .hero-inner que el resto de elementos del hero (h1, CTA,
   nota…) — con 4 piezas de "confianza" seguidas se leía como ruido
   plano, sin jerarquía. Agrupadas en un solo bloque con su propio gap
   interno, se leen como una sola sección compacta en vez de 4 chips
   sueltos apilados. */
.hero-trust-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}
.hero-timeline {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  max-width: 460px;
}
.hero-timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.htl-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.4px solid var(--accent-luxe);
  color: var(--accent-luxe-deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  flex-shrink: 0;
}
.htl-label {
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  max-width: 76px;
  line-height: 1.3;
}
.htl-line {
  flex: 1;
  height: 1px;
  min-width: 12px;
  background: var(--border-mid);
  margin-top: 13px;
  align-self: flex-start;
}
@media (max-width: 480px) {
  .hero-timeline { max-width: 340px; }
  .htl-label { font-size: 9.5px; max-width: 60px; }
  .htl-line { min-width: 6px; }
}

/* ── 16. LIGHTBOX (zoom del documento — hero + sección Muestra) ──
   Un único overlay reutilizado por ambas imágenes (misma foto, dos
   sitios distintos), en vez de duplicar el modal. */
.lightbox-trigger {
  cursor: zoom-in;
}
.lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(11, 18, 32, 0.92);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.lightbox-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.lightbox-backdrop img {
  max-width: min(90vw, 720px);
  max-height: 88vh;
  border-radius: var(--radius);
  border: 1px solid var(--accent-luxe);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  cursor: zoom-out;
}
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
}
.lightbox-close svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) {
  .lightbox-backdrop { transition: none; }
}

/* Nota bajo la línea de tiempo — sin caja, mismo tratamiento tipográfico
   minimal que .htl-label (texto suelto, sin fondo/borde). */
.hero-badge-blue {
  display: block;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
}