/* =============================================================================
   paywall.css — ⭐ Pantalla "Hazte Premium" (js/paywall.js) — v3 "más premium"
   Velo morado de la casa + tarjeta con cabecera luminosa del color de cada
   sección, chispas, medallones y plan anual con corona. Autónomo (Words
   también lo carga sin depender de auth.css).
   ========================================================================== */

.pw-overlay {
  position: fixed; inset: 0; z-index: 9600;   /* sobre el menú y el modal de login */
  display: grid; place-items: center; padding: 18px;
  opacity: 0; transition: opacity 0.25s ease;
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><g fill='%23FFFFFF' fill-opacity='0.06'><ellipse cx='38' cy='42' rx='7.2' ry='6'/><ellipse cx='29.2' cy='33.2' rx='2.7' ry='3.5'/><ellipse cx='34.5' cy='29.2' rx='2.4' ry='3.2'/><ellipse cx='41.5' cy='29.2' rx='2.4' ry='3.2'/><ellipse cx='46.8' cy='33.2' rx='2.7' ry='3.5'/><ellipse cx='150' cy='120' rx='7.2' ry='6'/><ellipse cx='141.2' cy='111.2' rx='2.7' ry='3.5'/><ellipse cx='146.5' cy='107.2' rx='2.4' ry='3.2'/><ellipse cx='153.5' cy='107.2' rx='2.4' ry='3.2'/><ellipse cx='158.8' cy='111.2' rx='2.7' ry='3.5'/></g></svg>"),
    radial-gradient(80% 55% at 50% 30%, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(130% 95% at 50% 50%, transparent 55%, rgba(30,8,60,.55) 100%),
    linear-gradient(160deg, #A85AF0 0%, #8A2BE2 52%, #5E17A0 100%);
  background-size: 200px 200px, cover, cover, cover;
}
.pw-overlay.is-in { opacity: 1; }

.pw-card {
  --pw-accent: #8A2BE2;      /* cada sección lo pinta del suyo (js/paywall.js) */
  position: relative;
  width: min(92vw, 400px);
  max-height: 88vh; overflow-y: auto; overflow-x: hidden;
  padding: 0 0 18px;
  border-radius: 28px;
  background: #fff; color: #2b2438;
  text-align: center;
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  transform: translateY(16px) scale(0.95);
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.15);
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
}
.pw-overlay.is-in .pw-card { transform: none; }

/* --- Cabecera luminosa del color de la sección ----------------------------- */
.pw-hero {
  position: relative;
  padding: 20px 16px 6px;
  margin-bottom: 10px;
  background:
    radial-gradient(90% 80% at 50% 0%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 70%),
    linear-gradient(170deg,
      color-mix(in srgb, var(--pw-accent) 22%, #fff) 0%,
      color-mix(in srgb, var(--pw-accent) 8%, #fff) 78%,
      #fff 100%);
}
/* Filo de luz superior, como un lomo dorado. */
.pw-hero::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--pw-accent) 55%, #ffd700),
    var(--pw-accent),
    color-mix(in srgb, var(--pw-accent) 55%, #ffd700));
}

/* Chispas que titilan en la cabecera. */
.pw-spark {
  position: absolute; color: var(--pw-accent); opacity: 0;
  font-size: 14px; pointer-events: none;
  animation: pw-twinkle 2.6s ease-in-out infinite;
}
.pw-spark--a { top: 22px; left: 12%; }
.pw-spark--b { top: 52px; right: 14%; font-size: 10px; animation-delay: 0.9s; }
.pw-spark--c { top: 96px; left: 20%; font-size: 9px; animation-delay: 1.7s; }
@keyframes pw-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.6) rotate(0deg); }
  50%      { opacity: 0.9; transform: scale(1.15) rotate(30deg); }
}

.pw-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  /* 44px = zona táctil mínima: fallar el toque de cerrar (o de elegir plan)
     en el checkout es la fricción más cara de toda la app. */
  background: rgba(255, 255, 255, 0.85); color: #6b5a8c;
  font-size: 17px; font-weight: 900; cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease, background 0.15s ease;
}
.pw-close:hover { background: #fff; transform: scale(1.06); }
.pw-close:active { transform: scale(0.92); }
.pw-close:focus-visible { outline: 2px solid var(--pw-accent); outline-offset: 2px; }

/* Cartel de la sección desde la que llegas (Words, Exercises, Books…). */
.pw-chip {
  display: inline-block; margin-bottom: 6px;
  padding: 6px 15px; border-radius: 999px;
  background: #fff; color: var(--pw-accent);
  font-size: 0.78rem; font-weight: 900; letter-spacing: 0.2px;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--pw-accent) 25%, transparent);
}

.pw-dogs { display: flex; justify-content: center; align-items: flex-end; gap: 0; }
.pw-dogs img {
  width: 92px; height: 92px; object-fit: contain;
  filter: drop-shadow(0 8px 12px color-mix(in srgb, var(--pw-accent) 30%, transparent));
}
.pw-dogs img:first-child { transform: rotate(-4deg) translateX(6px); }
.pw-dogs img:last-child  { transform: rotate(4deg) translateX(-6px); }

/* Nunito: la misma "voz" redondita del resto de la app — que pedir dinero no
   suene a un producto distinto (el resto de la tarjeta puede quedarse en Inter). */
.pw-title { margin: 0 14px 4px; font-size: 1.34rem; font-weight: 900; letter-spacing: -0.2px; font-family: 'Nunito', 'Inter', system-ui, sans-serif; }
.pw-title span { filter: drop-shadow(0 2px 5px rgba(255, 184, 0, 0.5)); }
.pw-sub { margin: 0 22px 12px; font-size: 0.88rem; line-height: 1.45; color: #6b6180; }

/* --- Beneficios con medallón -------------------------------------------- */
.pw-lista { list-style: none; margin: 0 14px 14px; padding: 0; text-align: left; }
.pw-lista li {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; font-size: 0.86rem; line-height: 1.35; color: #4a4160;
  border-radius: 13px;
}
.pw-lista li i {
  flex: 0 0 auto; width: 34px; height: 34px;
  display: grid; place-items: center;
  font-style: normal; font-size: 1.02rem;
  border-radius: 11px; background: #f5f2fb;
  box-shadow: inset 0 0 0 1px #ece6f8;
}
/* El beneficio de TU sección se enciende con su color. */
.pw-lista li.is-hot {
  background: color-mix(in srgb, var(--pw-accent) 9%, #fff);
  box-shadow:
    inset 0 0 0 1.5px color-mix(in srgb, var(--pw-accent) 45%, #fff),
    0 6px 16px color-mix(in srgb, var(--pw-accent) 16%, transparent);
}
.pw-lista li.is-hot i {
  background: var(--pw-accent); color: #fff;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--pw-accent) 40%, transparent);
}
.pw-lista li.is-hot b { color: var(--pw-accent); }

/* --- Los dos planes -------------------------------------------------------- */
.pw-planes { display: flex; gap: 10px; margin: 0 14px 14px; }
.pw-plan {
  position: relative; flex: 1;
  padding: 14px 6px 11px;
  border: 2px solid #e9e2f6; border-radius: 18px;
  background: #fbf9ff; cursor: pointer;
  font-family: inherit; color: #2b2438;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.pw-plan:hover { border-color: color-mix(in srgb, var(--pw-accent) 45%, #e9e2f6); }
.pw-plan:focus-visible { outline: 2px solid var(--pw-accent); outline-offset: 2px; }
.pw-plan b { display: block; font-size: 0.96rem; font-weight: 900; }
.pw-plan span { display: block; font-size: 0.85rem; color: #6b5a8c; margin-top: 2px; }
.pw-plan small { display: block; font-size: 0.76rem; color: var(--pw-accent); font-weight: 800; margin-top: 2px; }
.pw-plan.is-on {
  border-color: var(--pw-accent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--pw-accent) 10%, #fff), #fff);
  transform: translateY(-3px);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--pw-accent) 24%, transparent);
}
.pw-plan__badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  padding: 3px 10px; border-radius: 999px;
  background: linear-gradient(120deg, #ffd34d, #ffb800);
  color: #4a3200; box-shadow: 0 3px 8px rgba(255, 184, 0, 0.45);
  font-size: 0.7rem; font-weight: 900; font-style: normal; white-space: nowrap;
}
/* Sello de elegido ✓ */
.pw-plan__check {
  position: absolute; top: 7px; right: 7px;
  width: 20px; height: 20px; display: grid; place-items: center;
  border-radius: 50%; background: var(--pw-accent); color: #fff;
  font-size: 0.66rem; font-style: normal; font-weight: 900;
  opacity: 0; transform: scale(0.4);
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.pw-plan.is-on .pw-plan__check { opacity: 1; transform: scale(1); }

/* --- CTA con barrido de luz + goma ---------------------------------------- */
.pw-cta {
  position: relative; overflow: hidden;
  display: inline-block; width: calc(100% - 28px);
  padding: 15px 20px; border: 0; border-radius: 999px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--pw-accent) 72%, #fff), var(--pw-accent));
  color: #fff; font-size: 1rem; font-weight: 900; font-family: inherit;
  cursor: pointer; text-decoration: none;
  box-shadow:
    0 6px 0 color-mix(in srgb, var(--pw-accent) 55%, #000),
    0 12px 26px color-mix(in srgb, var(--pw-accent) 35%, transparent);
}
.pw-cta:active { transform: translateY(4px); box-shadow: none; }
.pw-cta:disabled { opacity: 0.75; }
.pw-cta:focus-visible { outline: 3px solid color-mix(in srgb, var(--pw-accent) 55%, #fff); outline-offset: 3px; }
/* Barrido de luz que cruza el botón de vez en cuando. */
.pw-cta::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -45%; width: 34%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  animation: pw-shine 3.4s ease-in-out infinite;
}
@keyframes pw-shine {
  0%, 55%  { left: -45%; }
  75%, 100% { left: 120%; }
}
/* Resistencia de goma: se estira y rebota "está a tope" (idea 15-jul). */
.pw-cta--rubber { animation: pw-rubber 0.9s cubic-bezier(0.28, 0.84, 0.42, 1) 1; }
@keyframes pw-rubber {
  0%   { transform: scale(1, 1); }
  30%  { transform: scale(1.12, 0.82); }
  45%  { transform: scale(0.9, 1.12); }
  60%  { transform: scale(1.06, 0.94); }
  75%  { transform: scale(0.97, 1.03); }
  100% { transform: scale(1, 1); }
}

/* El "Luego X €/mes · cancela cuando quieras" es texto de CONFIANZA, no letra
   pequeña: tamaño legible y color que pasa contraste AA sobre blanco. */
.pw-nota { margin: 10px 14px 4px; font-size: 0.85rem; color: #6b6180; }
.pw-estado { margin: 6px 14px 14px; font-size: 1rem; font-weight: 700; color: #4a4160; }
.pw-estado small { font-weight: 500; color: #8d84a3; }

.pw-restaurar {
  margin-top: 4px; padding: 12px; border: 0; background: none;
  color: var(--pw-accent); font-size: 0.8rem; font-weight: 700; font-family: inherit;
  text-decoration: underline; cursor: pointer;
}
.pw-restaurar:focus-visible { outline: 2px solid var(--pw-accent); outline-offset: 2px; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  .pw-cta--rubber, .pw-cta::after, .pw-spark { animation: none; }
}

/* ============================================================
   PREMIUM ACTIVO: cuenta atrás de la prueba + salto al anual (3-ago)
   Jerarquía: lo que vende arriba y grande; "gestionar" abajo, discreto
   pero SIEMPRE legible — Google exige que cancelar sea fácil de encontrar.
   ============================================================ */
.pw-trial {
  margin: 6px 14px 12px; padding: 14px 12px;
  border-radius: 16px; border: 2px solid #e9e2f6;
  background: linear-gradient(180deg, #faf7ff, #fff);
}
.pw-trial__dias { display: block; font-size: 1.15rem; font-weight: 900; color: #2b2438; }
.pw-trial small { display: block; margin-top: 4px; font-size: 0.82rem; color: #8d84a3; }
/* Últimos 2 días: el aviso se enciende (urgencia honesta) */
.pw-trial--fin { border-color: var(--pw-accent); background: linear-gradient(180deg, #fff7ed, #fff); }
.pw-trial--fin .pw-trial__dias { color: #b45309; }

.pw-upsell {
  position: relative; margin: 0 14px 10px; padding: 16px 12px 12px;
  border-radius: 18px; border: 2px solid var(--pw-accent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pw-accent) 8%, #fff), #fff);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--pw-accent) 55%, #000);
}
.pw-upsell__badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(180deg, #FDE68A, #F59E0B);
  color: #4a3000; font-size: 0.72rem; font-weight: 900; font-style: normal;
}
.pw-upsell b { display: block; font-size: 1rem; font-weight: 900; color: #2b2438; }
.pw-upsell span { display: block; margin: 2px 0 10px; font-size: 0.86rem; color: #6b5a8c; }
.pw-upsell .pw-cta { margin: 0; }

/* Gestionar: enlace de texto normal, legible, sin camuflaje. */
.pw-gestionar {
  display: block; margin: 2px 14px 14px; padding: 10px;
  color: #6b5a8c; font-size: 0.85rem; font-weight: 600;
  text-align: center; text-decoration: underline;
}
.pw-gestionar:focus-visible { outline: 2px solid var(--pw-accent); outline-offset: 2px; border-radius: 8px; }