/* RTE · Pantalla de pago (temporada-1.html) y bienvenida (bienvenida.html)
   Usa los estilos de rte.css y landing.css (encabezado, botones, secciones y el reproductor del tráiler). */

.naranja { color: var(--naranja); }
.stack-lg { display: flex; flex-direction: column; gap: 36px; }

/* ---------- Arriba: título, tráiler y precios ---------- */
.pay-hero { padding-block: clamp(24px, 4vw, 56px) clamp(40px, 6vw, 80px); }
.pay-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "media" "offer"; gap: 24px 56px; }
.pay-copy { grid-area: copy; display: flex; flex-direction: column; gap: 14px; }
.pay-copy h1, .welcome h1 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(40px, 5.2vw, 72px); line-height: 0.9; text-wrap: balance; }
.pay-lead { font-size: 19px; line-height: 1.5; color: var(--text-3); text-wrap: pretty; }
.pay-lead em { color: var(--text); font-style: italic; }
.pay-lead strong { color: var(--text); }

/* El tráiler: vertical, completo, sin sombra encima. Cabe en la pantalla del celular */
.pay-media { grid-area: media; justify-self: center; }
.pay-media.hero-media { flex: none; min-height: 0; width: min(100%, 420px, calc((100vh - 230px) * 9 / 16)); width: min(100%, 420px, calc((100svh - 230px) * 9 / 16)); aspect-ratio: 9 / 16; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.pay-media .hero-trailer { opacity: 1; }
.pay-media .hp-window { height: 100%; }
/* El botón de play, arriba del título de la portada, para que se vea sin bajar */
.pay-media .trailer-pill { top: 30%; bottom: auto; transform: translate(-50%, -50%); white-space: nowrap; }
.pay-media .hero-player.is-full { border-radius: 0; }
/* En celulares bajitos el video queda angosto: el botón de pantalla completa queda solo con su ícono */
@media (max-width: 899px) and (max-height: 760px), (max-width: 340px) { .pay-media .hp-full { width: 40px; padding: 0; justify-content: center; } .pay-media .hp-full-label { display: none; } }

.pay-offer { grid-area: offer; display: flex; flex-direction: column; gap: 16px; }

@media (min-width: 900px) {
  .pay-grid { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "media copy" "media offer"; grid-template-rows: 1fr auto; align-items: start; }
  .pay-copy { align-self: end; }
  .pay-offer { padding-bottom: 8px; }
  .pay-media.hero-media { width: min(420px, calc((100vh - 140px) * 9 / 16)); position: sticky; top: 24px; }
}

/* ---------- Los planes ---------- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; }
@media (min-width: 1100px) { .plans { grid-template-columns: 1fr 1.1fr 1fr; align-items: stretch; } }
.plan { display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.plan.is-best { border-color: var(--naranja); box-shadow: inset 0 0 0 1px var(--naranja); }
.plan-tag { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--cian); }
.plan-tag.naranja { color: var(--naranja); }
.plan-tag.gris { color: var(--text-4); }
.plan h3 { font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1; text-transform: uppercase; }
.price { font-family: var(--display); font-weight: 900; font-size: 58px; line-height: 0.9; }
.price .cur { font-size: 0.55em; vertical-align: 0.6em; margin-right: 2px; }
.price .mxn { margin-left: 6px; font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-3); vertical-align: 0.15em; }
.price .per { font-family: var(--body); font-weight: 600; font-size: 15px; letter-spacing: 0; color: var(--text-3); }
.was { font-size: 15px; color: var(--text-4); }
.was s { color: var(--text-3); text-decoration-thickness: 2px; text-decoration-color: var(--naranja); }
.plan-list { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; }
.plan-list li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.5; color: var(--text-3); }
.plan-list li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--cian); }
.plan-list strong { color: var(--text); }
.naranja-eyebrow { color: var(--naranja); }
.plan-btn { width: 100%; justify-content: center; margin-top: 4px; }
.pay-note { font-size: 14px; line-height: 1.5; color: var(--text-4); }
.pay-facts { display: flex; flex-direction: column; gap: 10px; }
.pay-facts li { display: flex; align-items: center; gap: 10px; font-size: 16px; line-height: 1.4; color: var(--text-2); }
.pay-facts svg { color: var(--cian); }
.pay-facts strong { color: var(--text); }

/* ---------- Secciones de abajo ---------- */
.pay-h3 { font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1; text-transform: uppercase; }
.pay-split { align-items: flex-start; }
.pay-doubts { font-size: 16px; color: var(--text-3); }

/* ---------- Bienvenida ---------- */
.welcome { padding-block: clamp(32px, 6vw, 88px); }
.welcome-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 64px; align-items: center; }
@media (min-width: 900px) { .welcome-grid { grid-template-columns: minmax(0, 1fr) 340px; } }
.welcome-copy { display: flex; flex-direction: column; gap: 18px; }
.w-plan { align-self: flex-start; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; color: var(--text-2); }
.steps { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.steps li { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.steps .n { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--naranja); color: var(--bg); font-family: var(--display); font-weight: 900; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.steps b { font-size: 18px; }
.steps p { margin-top: 2px; font-size: 15px; line-height: 1.5; color: var(--text-3); }
.w-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.season-lock { position: relative; justify-self: center; width: 100%; max-width: 340px; aspect-ratio: 9 / 16; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; }
.season-lock img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.75); }
.lock-badge { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(13, 15, 19, 0.75); font-size: 13px; font-weight: 600; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lock-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 4px; padding: 40px 18px 18px; background: linear-gradient(0deg, rgba(8, 9, 11, 0.95), rgba(8, 9, 11, 0)); }
.lock-foot small { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--cian); }
.lock-foot b { font-family: var(--display); font-weight: 900; font-size: 34px; line-height: 1; text-transform: uppercase; }
.lock-foot span { font-size: 13px; color: var(--text-3); }