/* Los 4 Elementos · versión «subida» (21-sept-2026), solo esta copia de revisión.
   Precio por tramos al estilo de la referencia que mandaron Alex y Charly (lp.consulting.com/pr):
   en PC, una tarjeta por tramo con el mismo contenido y solo el precio distinto (la actual encendida, las siguientes
   en espera y sin cifra); en móvil, una sola tarjeta con el stack y la escalera de precios en filas. Más la caja
   «Importante» y la coletilla bajo cada botón. Los estados (pasado / actual / próximo) los pone main.js § 1c. */

/* la sección se ensancha para que quepan tres tarjetas */
.offer-head{margin-bottom:26px}
.tramos-intro{max-width:620px;margin:0 auto;color:var(--cream-70);font-size:1.02rem}
.tramos-intro b{color:var(--cream)}

/* ---- PC: tres tarjetas ---- */
.tramos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch;text-align:left}
/* 23-sept (Charly y Alex): un tramo ya pasado no se enseña nunca, ni tarjeta ni fila: quien entra ahora no tuvo opción a él */
.tramo.is-past,.esc-rows li.is-past{display:none!important}
.tramo{padding:26px 24px 24px;display:flex;flex-direction:column;position:relative;transition:opacity .3s,border-color .3s}
.tramo.is-now{border-color:var(--gold);box-shadow:0 0 0 1px rgba(217,166,78,.35),0 40px 100px rgba(0,0,0,.55),0 0 70px rgba(217,166,78,.16)}
.tramo.is-next{opacity:.5}
.tramo.is-past{opacity:.38}
.t-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:16px;min-height:44px}
.t-kick{font:800 .74rem/1.35 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--cream)}
.t-st{flex:none}
.t-st i{display:none;font:800 .6rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;font-style:normal;border-radius:999px;padding:6px 9px;white-space:nowrap}
.is-now .t-st .st-now{display:inline-block;color:#1A0F0A;background:var(--gold)}
.is-next .t-st .st-next{display:inline-block;color:var(--cream-70);border:1px solid rgba(243,233,216,.3)}
.is-past .t-st .st-past{display:inline-block;color:var(--cream-45);border:1px solid rgba(243,233,216,.2)}

/* filas «concepto ······ valor», como en la referencia */
.trows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.trows li{display:flex;align-items:baseline;gap:8px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.9rem;line-height:1.35;color:var(--cream)}
.trows li::after{content:'';order:2;flex:1;min-width:12px;border-bottom:1px dotted rgba(243,233,216,.3);transform:translateY(-4px)}
.trows .k{order:1;max-width:58%}
.trows .v{order:3;text-align:right;color:var(--gold);font-weight:700;font-size:.8rem;white-space:nowrap}
.trows .v svg{width:13px;height:13px;fill:currentColor;vertical-align:-2px;margin-right:4px}

/* precio: actual (cifra), pasado (cifra tachada) o próximo (candado, sin cifra) */
.t-price{margin:18px 0 2px;min-height:78px;display:flex;align-items:center}
.p-now{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.p-now .old{font:500 1.4rem/1 var(--display);text-decoration:line-through;text-decoration-color:var(--ember);text-decoration-thickness:2px;color:var(--cream-70)}
.p-now .new{font:700 3.5rem/1 var(--display);color:var(--gold);text-shadow:0 0 30px rgba(217,166,78,.3)}
.p-now small{flex-basis:100%;font:700 .66rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--cream-45)}
.is-past .p-now .new{color:var(--cream-70);text-decoration:line-through;text-decoration-color:var(--ember);text-decoration-thickness:3px;text-shadow:none}
.is-past .p-now .old{display:none}
/* los tramos siguientes enseñan su cifra (69 / 83 / 97), atenuada y sin el 320 € tachado: la escalera se lee de un vistazo */
.is-next .p-now .old{display:none}
.is-next .p-now .new{text-shadow:none}

/* cuenta atrás dentro de la tarjeta activa (como «Offer opens in» en la referencia) */
.t-cd{margin:12px 0 0;font:700 .7rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--cream-70)}
.t-cd b{color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:.06em;margin-left:4px}
.tramo:not(.is-now) .t-cd{visibility:hidden}

/* botón: activo en la tarjeta actual; en las otras, un botón apagado que dice desde cuándo */
.t-cta{margin-top:auto;padding-top:18px;text-align:center}
.t-cta .btn{width:100%;padding:16px 18px;font-size:.98rem}
.t-cta .btn.is-off{display:none;background:rgba(243,233,216,.07);color:var(--cream-45);box-shadow:none;border:1px solid rgba(243,233,216,.14);cursor:default;pointer-events:none;font-weight:700;letter-spacing:.04em}
.is-next .t-cta .btn.is-off.next,.is-past .t-cta .btn.is-off.past{display:inline-flex}
.tramo:not(.is-now) .t-cta [data-buy]{display:none}

/* la coletilla bajo cada botón de la página (texto por tramo desde main.js) */
.sube{margin:12px auto 0;max-width:520px;font:500 .86rem/1.45 var(--sans);color:var(--cream-70)}
.cta .sube,.els-cta .sube{margin-top:10px}
.els-cta .sube{color:var(--cream);text-shadow:0 2px 14px rgba(0,0,0,.8)}
.sube-tramos{display:none;margin:18px auto 0;max-width:560px;font-size:.95rem;color:var(--cream)}
@media (min-width:1000px){ .sube-tramos{display:block} }
.sube:empty,.sube[hidden]{display:none}

/* ---- móvil y tablet: una tarjeta con la escalera en filas ---- */
.esc-m{display:none;text-align:left;padding:26px 22px 24px}
.esc-m .t-top{margin-bottom:12px;min-height:0}
.esc-rows{list-style:none;margin:22px 0 0;padding:0}
.esc-rows li{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.esc-rows li:last-child{border-bottom:1px solid var(--line)}
.esc-rows .e-price{flex:none;min-width:118px}
.esc-rows .p-now{gap:0}
.esc-rows .p-now .new{font-size:2.7rem}
.esc-rows .p-now .old,.esc-rows .p-now small{display:none}
.e-info{display:flex;flex-direction:column;gap:4px;font:700 .68rem/1.35 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--cream-45)}
.e-info b{display:none;color:var(--gold)}
.is-now .e-info .st-now,.is-next .e-info .st-next,.is-past .e-info .st-past{display:inline}
.is-next .e-info .st-next,.is-past .e-info .st-past{color:var(--cream-70)}
.e-info .e-cd{display:none;letter-spacing:.1em;color:var(--cream)}
.is-now .e-info .e-cd{display:inline}
.e-info .e-cd b{display:inline;color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.esc-rows li.is-next,.esc-rows li.is-past{opacity:.5}
.esc-rows li.is-past .p-now .new{color:var(--cream-70);text-decoration:line-through;text-decoration-color:var(--ember);text-decoration-thickness:3px;text-shadow:none}
.esc-m .t-cta .btn{width:100%}
@media (max-width:999px){
  .tramos{display:none}
  .esc-m{display:block}
}
@media (max-width:420px){
  .esc-rows .e-price{min-width:104px}
  .esc-rows .p-now .new{font-size:2.4rem}
  .trows .k{max-width:60%}
}

/* ---- último tramo (y cerrado): como la referencia el día 3, desaparecen los precios anteriores y queda una sola tarjeta ---- */
.ti-fin{display:none}
html[data-tramo-actual="2"] .ti-esc,html[data-tramo-actual="3"] .ti-esc{display:none}
html[data-tramo-actual="2"] .ti-fin,html[data-tramo-actual="3"] .ti-fin{display:inline}
html[data-tramo-actual="2"] .tramo.is-past,html[data-tramo-actual="3"] .tramo:not([data-tramo="2"]){display:none}
html[data-tramo-actual="2"] .tramos,html[data-tramo-actual="3"] .tramos{grid-template-columns:minmax(0,460px);justify-content:center}
html[data-tramo-actual="2"] .esc-rows li.is-past,html[data-tramo-actual="3"] .esc-rows li:not([data-tramo="2"]){display:none}
html[data-tramo-actual="2"] .esc-rows li,html[data-tramo-actual="3"] .esc-rows li{border-bottom:1px solid var(--line)}
html[data-tramo-actual="2"] .aviso-esc,html[data-tramo-actual="3"] .aviso-esc{display:none}

/* ---- la caja «Importante» (calendario de subidas) ---- */
.aviso{margin-top:22px;text-align:center;padding:clamp(28px,4vw,48px)}
.aviso-pill{display:inline-flex;align-items:center;gap:8px;font:800 .7rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(217,166,78,.5);background:rgba(217,166,78,.1);border-radius:999px;padding:9px 14px;margin-bottom:18px}
.aviso-pill svg{width:14px;height:14px;fill:currentColor}
.aviso h3{font-size:clamp(1.45rem,2.6vw,2.05rem);line-height:1.2;color:var(--cream);margin:0 auto 22px;max-width:700px}
.aviso-esc{list-style:none;margin:0 auto 22px;padding:0;max-width:580px;text-align:left}
.aviso-esc li{display:flex;gap:16px;align-items:baseline;padding:11px 0;border-top:1px solid var(--line)}
.aviso-esc li:last-child{border-bottom:1px solid var(--line)}
.aviso-esc .a-when{flex:none;width:42%;font:800 .72rem/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--cream-70)}
.aviso-esc .a-what{font:600 1.08rem/1.35 var(--display);color:var(--cream)}
.aviso-esc .a-what b{color:var(--gold);font-weight:700;font-size:1.3em}
.aviso-esc li.is-now .a-when{color:var(--gold)}
.aviso-esc li.is-past{opacity:.45}
.aviso-esc li.is-past .a-what b{text-decoration:line-through;text-decoration-color:var(--ember);color:var(--cream-70)}
.aviso-esc .st-now,.aviso-esc .st-next,.aviso-esc .st-past{display:none}
.aviso-esc .is-now .st-now,.aviso-esc .is-next .st-next,.aviso-esc .is-past .st-past{display:inline}
.aviso-esc .a-what svg{width:16px;height:16px;fill:var(--cream-45);vertical-align:-2px;margin-right:6px}
.aviso p{max-width:600px;margin:0 auto 1em}
.aviso p b{color:var(--cream)}
.aviso-hoy{font:italic 600 1.2rem/1.4 var(--display);color:var(--gold)}
.aviso-hoy > span{display:none}   /* solo los hijos directos (h0-h3): los <span data-precio> anidados deben seguir viéndose */
html:not([data-tramo-actual]) .aviso-hoy .h0,html[data-tramo-actual="0"] .aviso-hoy .h0,html[data-tramo-actual="1"] .aviso-hoy .h1,html[data-tramo-actual="2"] .aviso-hoy .h2,html[data-tramo-actual="3"] .aviso-hoy .h3{display:inline}
.aviso .t-cta{margin-top:6px}
@media (min-width:1000px){ .aviso .t-cta .btn{width:auto;padding:19px 38px;font-size:1.08rem} }
@media (max-width:560px){
  .aviso-esc li{flex-direction:column;gap:4px}
  .aviso-esc .a-when{width:auto}
}

/* ---- «El precio sube» como sección propia antes del cierre (22-sept), al estilo de la caja de la referencia:
   titular grande, la escalera en tres líneas (la pasada tachada), dos frases, cuenta atrás y botón ---- */
.aviso-sec{padding:clamp(48px,7vw,88px) 0}
.aviso-sec .aviso{margin-top:0;padding:clamp(30px,5vw,56px) clamp(22px,4vw,48px)}
.aviso-h2{margin:0 auto 14px;max-width:720px;font:700 clamp(1.7rem,3.6vw,2.6rem)/1.12 var(--display);text-transform:uppercase;letter-spacing:.03em;color:var(--cream)}
.aviso-sub{max-width:560px;margin:0 auto 22px;color:var(--cream-70);font-size:1rem}
.aviso-sec .aviso-esc{display:block;max-width:none;margin:0 auto 18px;text-align:center;border:0}
.aviso-sec .aviso-esc li{display:block;padding:4px 0;border:0;font:600 clamp(1.35rem,3vw,2.15rem)/1.3 var(--display)}
.aviso-sec .aviso-esc .a-when{display:inline;width:auto;font:inherit;letter-spacing:0;text-transform:none;color:var(--gold)}
.aviso-sec .aviso-esc b{font-weight:700;color:var(--cream)}
.aviso-sec .aviso-esc li.is-now{opacity:1}
.aviso-sec .aviso-esc li.is-now b{color:var(--gold);text-shadow:0 0 22px rgba(217,166,78,.25)}
.aviso-sec .aviso-esc li.is-past{opacity:.45;text-decoration:line-through;text-decoration-color:var(--ember);text-decoration-thickness:3px}
.aviso-sec .aviso-esc li.is-past .a-when,.aviso-sec .aviso-esc li.is-past b{color:var(--cream-70)}
.aviso-sec .aviso-hoy{margin:0 auto 22px;max-width:560px;font-size:1.15rem}
.aviso-cd{margin:0 0 22px;font:700 .74rem/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--cream-70)}
.aviso-cd b{display:block;margin-top:6px;font:600 clamp(1.6rem,3.4vw,2.3rem)/1 var(--display);color:var(--gold);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.aviso-cd b[hidden]{display:none}
.aviso-sec .t-cta{margin-top:0}

/* ---- regalo extra «Sanación del niño interior» hasta el mié 23 23:59: main.js § 1d pone data-bonus en <html> ---- */
html[data-bonus="off"] [data-bonus]{display:none!important}
.bonus-nino .pill{white-space:normal;line-height:1.35}
.thumb-ph{display:grid;place-items:center;min-height:220px;background:radial-gradient(ellipse at 50% 42%,rgba(217,166,78,.3),transparent 68%),var(--bg3)}
.thumb-ph svg{width:72px;height:72px;fill:var(--gold);opacity:.85}
.trows li[data-bonus] .k{color:var(--gold)}

/* ---- hero: «liberar tu voz» y «en tan solo 4 semanas» con la letra en amarillo (Alex, 23-sept: «pintar las letras de
   amarillo, no subrayarlas»). Amarillo cálido, más vivo que el dorado de la marca para que las dos frases destaquen igual ---- */
.hero h1 .subr{color:#F2C14E}