/* ==========================================================================
   Motor de venta TAROT — estilos premium (móvil primero, responsive)
   El tema (colores/fuentes) lo inyecta tema.js desde la config de marca.
   ========================================================================== */

:root {
  --granate: #5E0F20;
  --granate-osc: #3d0a16;
  --rosa-oscuro: #A24B5A;
  --rosa-palo: #E9C3C9;
  --dorado: #C8A24B;
  --crema: #F4E9DD;
  --texto: #2A1A1D;
  --font-titular: "Playfair Display", Georgia, serif;
  --font-texto: "Poppins", system-ui, Arial, sans-serif;
  --font-acento: "Sacramento", cursive;
  --radio: 18px;
  --sombra: 0 10px 34px rgba(0,0,0,.16);
  --ancho: 1040px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-texto);
  color: var(--texto);
  background: var(--crema);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 86px; /* hueco para la barra fija en móvil */
}

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 22px; }

h1, h2, h3 { font-family: var(--font-titular); font-weight: 600; line-height: 1.14; }

/* --- Cabecera --- */
.cabecera { background: var(--granate); color: var(--crema); text-align: center; padding: 15px 20px; }
.cabecera .logo { font-family: var(--font-titular); font-size: 1.3rem; letter-spacing: .5px; }
.cabecera .logo .vela { color: var(--dorado); }

/* --- Botones --- */
.btn {
  display: inline-block; width: 100%; border: none; cursor: pointer;
  font-family: var(--font-texto); font-weight: 600; font-size: 1.05rem;
  padding: 15px 20px; border-radius: 999px; text-align: center;
  text-decoration: none; transition: transform .06s ease, filter .15s ease;
}
.btn:active { transform: scale(.98); }
.btn-primario { background: var(--dorado); color: var(--granate); box-shadow: var(--sombra); }
.btn-primario:hover { filter: brightness(1.06); }
.btn-secundario { background: transparent; color: var(--crema); border: 2px solid var(--dorado); }

/* ==========================================================================
   HERO (imagen de Vera + texto)  ·  se reutiliza en "Conoce a Vera"
   ========================================================================== */
.hero {
  background: radial-gradient(120% 120% at 70% 0%, #6d1226 0%, var(--granate) 45%, var(--granate-osc) 100%);
  color: var(--crema); padding: 30px 0 42px;
}
.hero-inner { display: flex; flex-direction: column; align-items: center; gap: 26px; }

.hero-imagen {
  width: 100%; max-width: 340px; aspect-ratio: 4 / 5;
  border-radius: 22px; overflow: hidden;
  border: 2px solid rgba(200,162,75,.55);
  box-shadow: 0 16px 44px rgba(0,0,0,.4);
}
.hero-imagen img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }

.hero-texto { text-align: center; }
.eyebrow {
  font-family: var(--font-texto); text-transform: uppercase; letter-spacing: 3px;
  font-size: .8rem; color: var(--dorado); font-weight: 600; margin-bottom: 12px;
}
.hero-texto .gancho { font-family: var(--font-acento); color: var(--dorado); font-size: 1.9rem; line-height: 1.05; margin-bottom: 6px; }
.hero-texto h1 { font-size: 2.35rem; margin-bottom: 14px; }
.hero-texto .sub { font-size: 1.1rem; opacity: .95; max-width: 34ch; margin: 0 auto 24px; }
.hero-cta { display: flex; flex-direction: column; gap: 12px; max-width: 340px; margin: 0 auto; }
.hero .confianza { margin-top: 18px; font-size: .85rem; opacity: .85; text-align: center; }

/* --- Ventajas (chips visuales) --- */
.ventajas-bloque { background: var(--granate-osc); padding: 18px 0; }
.ventajas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.ventaja { color: var(--crema); font-weight: 500; font-size: .98rem; display: flex; align-items: center; gap: 9px; }
.ventaja span { color: var(--granate); background: var(--dorado); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; flex: 0 0 24px; }

/* --- Secciones --- */
section.bloque { padding: 46px 0; }
section.bloque h2 { font-size: 1.7rem; text-align: center; margin-bottom: 6px; color: var(--granate); }

/* --- Cómo funciona --- */
.pasos { display: grid; gap: 16px; margin-top: 26px; max-width: 520px; margin-left: auto; margin-right: auto; }
.paso { display: flex; gap: 15px; align-items: flex-start; }
.paso .num { flex: 0 0 42px; height: 42px; border-radius: 50%; background: var(--granate); color: var(--dorado); display: grid; place-items: center; font-family: var(--font-titular); font-size: 1.2rem; }
.paso .txt strong { display: block; color: var(--granate); }

/* --- Productos --- */
.productos-bloque { background: linear-gradient(180deg, var(--rosa-palo) 0%, var(--crema) 100%); }
.productos { display: grid; gap: 20px; margin-top: 28px; }
.producto {
  position: relative; background: #fff; border: 1px solid rgba(162,75,90,.18);
  border-radius: var(--radio); padding: 30px 22px 26px; text-align: center; box-shadow: var(--sombra);
}
.producto.destacado { border: 2px solid var(--dorado); transform: translateY(-2px); }
.producto .badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--dorado); color: var(--granate); font-weight: 600; font-size: .8rem;
  padding: 6px 16px; border-radius: 999px; white-space: nowrap; box-shadow: var(--sombra);
}
.producto .p-label { text-transform: uppercase; letter-spacing: 2px; font-size: .75rem; color: var(--rosa-oscuro); }
.producto .p-min { font-family: var(--font-titular); font-size: 1.5rem; color: var(--granate); margin-top: 2px; }
.producto .p-precio { font-family: var(--font-titular); font-size: 3rem; color: var(--granate); line-height: 1; margin: 8px 0; }
.producto .p-metodos { font-size: .9rem; color: var(--rosa-oscuro); margin-bottom: 18px; }
.producto .btn { font-size: 1rem; }

/* --- Bloque de seguridad (candado) --- */
.seguro {
  display: flex; gap: 14px; align-items: center; margin-top: 26px;
  background: #fff; border: 1px solid rgba(200,162,75,.5); border-radius: var(--radio);
  padding: 18px 20px; box-shadow: var(--sombra); max-width: 640px; margin-left: auto; margin-right: auto;
}
.seguro .candado { font-size: 1.8rem; }
.seguro p { font-size: .95rem; color: var(--texto); }
.seguro strong { color: var(--granate); }

/* --- Conoce a Vera --- */
.conoce { background: var(--crema); }
.conoce .hero-texto { color: var(--texto); }
.conoce .hero-texto h2 { text-align: center; }
.conoce .hero-imagen { border-color: rgba(162,75,90,.35); box-shadow: var(--sombra); }
.opinion { background: #fff; border-left: 4px solid var(--dorado); border-radius: 12px; padding: 16px 18px; margin-top: 18px; font-style: italic; color: var(--granate); box-shadow: var(--sombra); }
.opinion .autor { display: block; margin-top: 8px; font-style: normal; color: var(--rosa-oscuro); font-size: .85rem; }

/* --- FAQ --- */
.faq { max-width: 640px; }
.faq .contenedor { max-width: 640px; }
.faq details { border-bottom: 1px solid var(--rosa-palo); padding: 15px 0; }
.faq summary { font-weight: 600; cursor: pointer; color: var(--granate); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--dorado); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq p { margin-top: 10px; }

/* --- Footer --- */
.pie { background: var(--granate-osc); color: var(--crema); text-align: center; padding: 30px 20px; font-size: .85rem; }
.pie a { color: var(--dorado); text-decoration: none; }
.pie nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin-bottom: 14px; }

/* --- Barra fija (sticky) --- */
.barra-fija {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  display: flex; gap: 10px; padding: 10px 14px;
  background: rgba(61,10,22,.97); backdrop-filter: blur(6px);
}
.barra-fija .btn { font-size: .98rem; padding: 13px 14px; }

/* ==========================================================================
   PÁGINA DE PAGO CORRECTO  (código y "LLAMAR AHORA" protagonistas)
   ========================================================================== */
.pago-ok { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 30px 18px; }
.ticket { background: #fff; border-radius: 22px; box-shadow: var(--sombra); max-width: 480px; width: 100%; overflow: hidden; }
.ticket .cima { background: linear-gradient(160deg, #6d1226, var(--granate)); color: var(--crema); text-align: center; padding: 30px 20px 26px; }
.ticket .check { width: 70px; height: 70px; border-radius: 50%; background: var(--dorado); color: var(--granate); display: grid; place-items: center; font-size: 2.2rem; margin: 0 auto 14px; box-shadow: var(--sombra); }
.ticket .cima h1 { font-size: 1.9rem; }
.ticket .cuerpo { padding: 24px 22px 26px; }
.ticket .fila { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px dashed var(--rosa-palo); }
.ticket .fila span:first-child { color: var(--rosa-oscuro); }
.ticket .fila strong { font-family: var(--font-titular); }

.ticket .codigo { text-align: center; margin: 22px 0; padding: 18px; background: var(--crema); border-radius: 16px; border: 1px dashed var(--dorado); }
.ticket .codigo span { display: block; text-transform: uppercase; letter-spacing: 2px; font-size: .75rem; color: var(--rosa-oscuro); margin-bottom: 6px; }
.ticket .codigo .cod { font-family: var(--font-titular); font-size: 2.9rem; color: var(--granate); letter-spacing: 3px; line-height: 1; }

.ticket .instruccion { font-size: .95rem; text-align: center; margin-bottom: 20px; color: var(--texto); }
.ticket .instruccion strong { color: var(--granate); }

.ticket .btn-llamar {
  display: block; background: var(--dorado); color: var(--granate);
  font-family: var(--font-texto); font-weight: 700; font-size: 1.4rem;
  padding: 22px; border-radius: 16px; text-align: center; text-decoration: none;
  box-shadow: 0 10px 30px rgba(200,162,75,.5);
  animation: latido 1.8s ease-in-out infinite;
}
@keyframes latido { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }

/* --- Legal --- */
.legal { max-width: 720px; margin: 0 auto; padding: 30px 22px 60px; }
.legal h1 { color: var(--granate); margin-bottom: 6px; }
.legal h2 { color: var(--granate); font-size: 1.2rem; margin: 22px 0 8px; }
.legal p { margin-bottom: 10px; }
.legal a { color: var(--rosa-oscuro); }
.volver { display: inline-block; margin-bottom: 20px; color: var(--rosa-oscuro); text-decoration: none; }

/* --- Banner de cookies --- */
.cookies { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: #2A1A1D; color: var(--crema); padding: 16px 18px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; font-size: .88rem; }
.cookies p { flex: 1 1 240px; margin: 0; }
.cookies a { color: var(--dorado); }
.cookies .btn { width: auto; padding: 10px 18px; font-size: .9rem; }

.aviso-demo { background: #fff3cd; color: #664d03; text-align: center; padding: 8px 12px; font-size: .82rem; border-bottom: 1px solid #ffe69c; }

/* ==========================================================================
   RESPONSIVE (tablet / escritorio)
   ========================================================================== */
@media (min-width: 760px) {
  body { padding-bottom: 0; }

  /* Hero: texto a la izquierda, Vera a la derecha (el texto NUNCA tapa el rostro) */
  .hero { padding: 56px 0; }
  .hero-inner { flex-direction: row-reverse; gap: 48px; align-items: center; }
  .hero-imagen { flex: 0 0 40%; max-width: 400px; }
  .hero-texto { flex: 1; text-align: left; }
  .hero-texto .sub { margin-left: 0; }
  .hero-cta { flex-direction: row; margin: 0; max-width: none; }
  .hero-cta .btn { width: auto; padding-left: 30px; padding-right: 30px; }
  .hero .confianza { text-align: left; }
  .hero-texto h1 { font-size: 3rem; }
  .hero-texto .gancho { font-size: 2.2rem; }

  .ventajas { grid-template-columns: repeat(4, 1fr); }

  .productos { grid-template-columns: 1fr 1fr; align-items: start; }

  /* Conoce a Vera: imagen a la izquierda, texto a la derecha */
  .conoce .hero-inner { flex-direction: row; }
  .conoce .hero-texto { text-align: left; }
  .conoce .hero-texto h2 { text-align: left; }

  .barra-fija { display: none; } /* en escritorio no hace falta barra fija */
}

/* ==========================================================================
   v3 — REFINAMIENTO PREMIUM (más aire, tipografía editorial, transiciones)
   ========================================================================== */
section.bloque { padding: 66px 0; }
.contenedor { padding: 0 24px; }

/* Tipografía más editorial */
h1, h2, h3 { letter-spacing: -.015em; }
section.bloque h2 { font-size: 1.95rem; margin-bottom: 12px; }
.hero-texto h1 { font-size: 2.5rem; }
.hero-texto .sub { font-size: 1.14rem; line-height: 1.5; }
body { line-height: 1.65; }

/* Transiciones y hover elegantes */
.btn { transition: transform .18s ease, box-shadow .22s ease, filter .18s ease; }
.btn-primario:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0,0,0,.24); }
.producto { transition: transform .22s ease, box-shadow .22s ease; }
.producto:hover { transform: translateY(-5px); box-shadow: 0 22px 50px rgba(94,15,32,.16); }
.producto.destacado:hover { transform: translateY(-7px); }
.faq summary, .paso, .ventaja { transition: color .15s ease; }

/* Precios inmediatos en el hero (pills) */
.hero-precios { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 6px 0 24px; }
.hero-precios .pill {
  border: 1px solid rgba(244,233,221,.38); color: var(--crema);
  border-radius: 999px; padding: 9px 17px; font-size: .96rem; font-weight: 500;
  backdrop-filter: blur(2px);
}
.hero-precios .pill.destacado { border-color: var(--dorado); color: var(--dorado); font-weight: 600; }

/* Puente emocional (editorial) */
.puente { background: var(--crema); padding: 52px 0; }
.puente .contenedor { max-width: 700px; }
.puente p {
  font-family: var(--font-titular); font-style: italic; font-size: 1.55rem;
  line-height: 1.45; text-align: center; color: var(--granate);
}

/* Un poco más de aire y respiro premium */
.hero-texto .sub { margin-bottom: 20px; }
.producto { padding: 34px 24px 28px; }
.seguro { padding: 20px 22px; }

@media (min-width: 760px) {
  section.bloque { padding: 84px 0; }
  .hero-texto h1 { font-size: 3.15rem; }
  section.bloque h2 { font-size: 2.2rem; }
  .puente p { font-size: 1.8rem; }
  .hero-precios { justify-content: flex-start; }
}

/* Nota de "Cómo funciona" (aclaración 806) */
.pasos-nota { text-align: center; margin-top: 24px; font-size: .92rem; color: var(--rosa-oscuro); max-width: 520px; margin-left: auto; margin-right: auto; }

/* Nota de confianza (sustituye al testimonio no verificado) */
.conoce-nota { margin-top: 16px; color: var(--rosa-oscuro); font-size: 1rem; }

/* ==========================================================================
   MODALIDAD 806 (alternativa secundaria — premium pero sin competir con el prepago)
   ========================================================================== */
.tarificacion { background: var(--crema); padding-top: 8px; }
.tarificacion-card {
  max-width: 620px; margin: 0 auto; text-align: center; background: #fff;
  border: 1px solid rgba(94,15,32,.18); border-radius: var(--radio);
  padding: 34px 26px; box-shadow: var(--sombra);
}
.eyebrow-806 { text-transform: uppercase; letter-spacing: 2px; font-size: .75rem; color: var(--rosa-oscuro); font-weight: 600; margin-bottom: 8px; }
.tarificacion h2 { font-size: 1.5rem; margin-bottom: 10px; color: var(--granate); }
.t-desc { color: var(--texto); margin-bottom: 18px; }
.t-numero { font-family: var(--font-titular); font-size: 2.2rem; color: var(--granate); letter-spacing: 2px; margin-bottom: 18px; }
.btn-806 {
  display: inline-block; background: transparent; color: var(--granate);
  border: 2px solid var(--granate); border-radius: 999px; padding: 14px 30px;
  font-family: var(--font-texto); font-weight: 600; text-decoration: none;
  transition: background .18s ease, color .18s ease, transform .15s ease;
}
.btn-806:hover { background: var(--granate); color: var(--crema); transform: translateY(-2px); }
.t-costes { margin-top: 18px; font-size: .82rem; color: var(--rosa-oscuro); line-height: 1.75; }
.t-costes span { display: block; }
@media (min-width: 760px) { .tarificacion h2 { font-size: 1.7rem; } }

/* ==========================================================================
   SELECTOR DE MÉTODO DE PAGO (modal)
   ========================================================================== */
.modal-pago {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  background: rgba(42,26,29,.6); backdrop-filter: blur(3px); padding: 20px;
}
.modal-pago[hidden] { display: none; }
.modal-caja {
  position: relative; background: #fff; border-radius: var(--radio);
  max-width: 380px; width: 100%; padding: 30px 24px 24px; text-align: center; box-shadow: var(--sombra);
}
.modal-cerrar {
  position: absolute; top: 10px; right: 14px; border: none; background: none;
  font-size: 1.6rem; color: var(--rosa-oscuro); cursor: pointer; line-height: 1;
}
.modal-caja h3 { color: var(--granate); font-size: 1.4rem; }
.modal-resumen { font-family: var(--font-titular); color: var(--granate); font-size: 1.3rem; margin: 4px 0 16px; }
.modal-sub { color: var(--rosa-oscuro); font-size: .9rem; margin-bottom: 14px; }
.modal-caja .btn { margin-bottom: 12px; }
.btn-bizum { background: #12a5b4; color: #fff; }
.btn-bizum:hover { filter: brightness(1.06); }
.modal-seguro { font-size: .78rem; color: var(--rosa-oscuro); margin-top: 6px; }

/* InSite (tarjeta embebida) */
#insite-form { min-height: 90px; margin: 8px 0 14px; text-align: left; }
.enlace-volver { background: none; border: none; color: var(--rosa-oscuro); cursor: pointer; font-size: .9rem; margin-top: 4px; }

/* ==========================================================================
   PANEL DEL GABINETE
   ========================================================================== */
.panel { max-width: 860px; margin: 0 auto; padding: 24px 18px 60px; }
.panel h1 { color: var(--granate); }
.panel-nota { color: var(--rosa-oscuro); font-size: .88rem; margin-bottom: 16px; }
.tabla-envoltura { overflow-x: auto; }
.tabla-consultas { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--sombra); }
.tabla-consultas th, .tabla-consultas td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--rosa-palo); font-size: .92rem; white-space: nowrap; }
.tabla-consultas th { background: var(--granate); color: var(--crema); font-family: var(--font-texto); font-weight: 600; }
.estado { padding: 4px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.estado-pend { background: #f6e3c4; color: #8a5a00; }
.estado-curso { background: #cfeef2; color: #0a6b78; }
.estado-fin { background: #d6efd6; color: #2e6b2e; }
.btn-mini { background: var(--dorado); color: var(--granate); border: none; border-radius: 999px; padding: 8px 14px; font-weight: 600; cursor: pointer; font-family: var(--font-texto); }
.btn-mini:hover { filter: brightness(1.05); }