:root {
  --ink: oklch(0.29 0.028 177); --teal: oklch(0.37 0.061 179); --teal2: oklch(0.29 0.047 180);
  --coral: oklch(0.64 0.18 35); --coral2: oklch(0.55 0.17 35); --sun: oklch(0.83 0.14 83);
  --cream: oklch(0.975 0.007 160); --surface: oklch(1 0 0); --line: oklch(0.9 0.013 167);
  --muted: oklch(0.49 0.024 175); --on-dark: oklch(1 0 0); --on-dark-muted: oklch(0.89 0.018 168);
  --hero-shade: linear-gradient(90deg, oklch(0.24 0.04 178 / .97) 0%, oklch(0.24 0.04 178 / .88) 38%, oklch(0.24 0.04 178 / .12) 78%);
  --modal-shade: oklch(0.2 0.025 178 / .72); --shadow: 0 12px 40px oklch(0.29 0.028 177 / .09);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--surface); color: var(--ink); font: 400 16px/1.65 Nunito, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
h1,h2,h3 { font-family: Nunito, system-ui, sans-serif; line-height: 1.2; margin: 0; font-weight: 800; letter-spacing: 0; }
h2 { font-size: 32px; margin-bottom: 16px; }
h3 { font-size: 19px; }
p { margin: 0 0 12px; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--teal); }
[hidden] { display: none !important; }
.btn { display: inline-flex; justify-content: center; align-items: center; gap: 16px; width: 100%; padding: 14px 20px; min-height: 52px; background: var(--coral); color: var(--on-dark); border: 1px solid var(--coral); border-radius: 6px; font: 800 16px/1.4 Nunito, sans-serif; text-decoration: none; text-align: center; cursor: pointer; transition: background .18s, transform .18s; }
.btn:hover { background: var(--coral2); border-color: var(--coral2); }
.btn:active { transform: translateY(1px); }
.btn-sec { background: var(--surface); color: var(--teal); border-color: var(--teal); }
.btn-sec:hover { background: var(--cream); border-color: var(--teal); }
.btn:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible { outline: 3px solid var(--sun); outline-offset: 4px; }
.nota { font-size: 13px; color: var(--muted); margin-top: 18px; }
.centro { text-align: center; }
.eyebrow { display: block; color: var(--coral2); font-size: 12px; font-weight: 800; text-transform: uppercase; margin-bottom: 14px; }
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--teal2); color: var(--on-dark); min-height: 570px; display: flex; align-items: center; padding: 64px max(32px, calc((100vw - 1080px) / 2)); }
.hero-img { position: absolute; inset: 0 0 0 auto; width: 58%; z-index: -2; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); }
.hero-img .foto { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.hero::after { content: ''; position: absolute; inset: 0; background: var(--hero-shade); z-index: -1; }
.hero-txt { width: 520px; max-width: 55%; }
.marca { color: var(--sun); font-size: 13px; font-weight: 800; margin-bottom: 20px; }
.hero h1 { font-family: Fredoka, sans-serif; font-size: 64px; font-weight: 600; margin-bottom: 18px; }
.hero-lead { font-size: 27px; line-height: 1.3; font-weight: 800; max-width: 420px; margin-bottom: 18px; }
.sub { font-size: 17px; color: var(--on-dark-muted); max-width: 390px; margin-bottom: 28px; }
.hero .btn { width: auto; min-width: 235px; }
.hero .nota { color: var(--on-dark-muted); margin-top: 18px; }
.link-hero { display: inline-block; color: var(--on-dark); font-size: 14px; margin-top: 20px; text-underline-offset: 5px; }
.sec { padding: 72px 32px; max-width: 1144px; margin: 0 auto; }
.sec + .sec:not(.suave) { border-top: 1px solid var(--line); }
.suave { background: var(--cream); max-width: none; }
.suave > * { max-width: 1080px; margin-left: auto; margin-right: auto; }
.intro { color: var(--muted); max-width: 650px; margin-bottom: 32px; font-size: 17px; }
.recibes { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; }
.recibes li { border-top: 2px solid var(--line); padding-top: 20px; color: var(--muted); }
.recibes b { display: block; font-size: 19px; color: var(--ink); margin: 12px 0 8px; font-weight: 800; }
.item-num { color: var(--coral2); font-size: 13px; font-weight: 800; }
.razones { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; margin-top: 32px; }
.razones h3 { margin-bottom: 10px; }
.razones p { color: var(--muted); margin: 0; }
.costos { display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; margin-top: 32px; }
.costos > div { border-left: 1px solid var(--line); padding-left: 20px; }
.costos h3 { font-size: 18px; margin-bottom: 10px; }
.costos p { font-size: 15px; color: var(--muted); margin: 0; }
.costos .item-num { display: block; margin-bottom: 14px; }
.cost-note { margin-top: 32px; font-weight: 800; color: var(--teal); }
.bonos { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; margin-top: 30px; }
.bonos article { display: grid; grid-template-columns: 72px 1fr; column-gap: 16px; align-items: start; }
.bonos img { width: 72px; height: 72px; object-fit: cover; grid-row: span 2; border-radius: 6px; }
.bonos h3 { font-size: 17px; margin-bottom: 8px; }
.bonos p { font-size: 14px; color: var(--muted); margin: 0; }
.oferta { scroll-margin-top: 20px; }
.oferta > h2,.oferta > .eyebrow { text-align: center; }
.timer { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--cream); padding: 20px 24px; border-radius: 6px; margin: 30px auto; max-width: 880px; }
.timer p { margin: 0; }
.timer-copy { max-width: 590px; font-size: 14px; }
.timer-pie { font-size: 12px; color: var(--muted); margin-top: 5px !important; }
.reloj { font-size: 30px; line-height: 1; font-weight: 800; color: var(--teal); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.planes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 880px; margin: 0 auto; align-items: stretch; }
.plan { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; padding: 32px; position: relative; }
.plan h3 { font-size: 23px; }
.plan .pago { font-size: 14px; color: var(--muted); margin: 12px 0 0; }
.precio { font-size: 44px; font-weight: 800; line-height: 1.2; margin: 24px 0 0; }
.precio small { font-size: 13px; font-weight: 600; color: var(--muted); }
.plan ul { list-style: none; margin: 24px 0 28px; padding: 0; flex: 1; }
.plan li { padding: 7px 0 7px 24px; position: relative; font-size: 15px; }
.plan li::before { content: '✓'; position: absolute; left: 0; color: var(--teal); font-weight: 800; }
.destacado { border: 2px solid var(--teal); background: var(--cream); }
.cinta { align-self: flex-start; display: inline-block; color: var(--coral2); font-size: 12px; font-weight: 800; margin-bottom: 12px; }
.pasos { list-style: none; counter-reset: p; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; }
.pasos li { counter-increment: p; color: var(--muted); font-size: 15px; }
.pasos li::before { content: '0' counter(p); display: block; font-size: 13px; color: var(--coral2); font-weight: 800; margin-bottom: 16px; }
.pasos b { display: block; color: var(--ink); font-size: 18px; margin-bottom: 8px; }
.testimonios { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.testimonios blockquote { margin: 0; padding: 24px; border: 1px solid var(--line); border-radius: 6px; }
.testimonios cite { display: block; margin-top: 12px; font-style: normal; font-weight: 800; }
.garantia { display: flex; gap: 28px; align-items: center; padding-top: 40px; padding-bottom: 40px; }
.garantia h2 { font-size: 24px; margin-bottom: 8px; }
.garantia p { color: var(--muted); margin: 0; max-width: 700px; }
.sello-img { flex-shrink: 0; width: 104px; height: 104px; object-fit: contain; }
.sec-img { display: block; width: 100%; max-height: 420px; object-fit: cover; border-radius: 12px; margin-top: 40px; }
.sec-ilus { display: block; width: min(340px, 80%); margin: 40px auto 0; border-radius: 12px; }
.sec-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.sec-fotos img { width: 100%; height: 280px; object-fit: cover; border-radius: 12px; }
.faq > * { max-width: 800px; }
details { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; padding: 22px 32px 22px 0; font-weight: 800; position: relative; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; position: absolute; right: 0; font-size: 23px; font-weight: 400; top: 17px; }
details[open] summary::after { content: '−'; }
details p { color: var(--muted); font-size: 15px; padding: 0 32px 16px 0; margin: 0; }
.cierre { text-align: center; }
.cierre .btn { width: auto; min-width: 230px; margin-top: 12px; }
footer { background: var(--cream); color: var(--muted); font-size: 12px; padding: 32px; text-align: center; }
footer p { margin-bottom: 8px; }
.aviso { max-width: 760px; margin: 0 auto 12px; }
.flotante { position: fixed; left: 16px; right: 16px; bottom: 14px; z-index: 5; background: var(--coral); color: var(--on-dark); padding: 14px; border-radius: 6px; text-align: center; text-decoration: none; font-weight: 800; box-shadow: var(--shadow); transition: transform .2s; display: none; }
.flotante.oculto { transform: translateY(100px); }
.modal { position: fixed; inset: 0; z-index: 10; background: var(--modal-shade); display: flex; justify-content: center; align-items: center; padding: 20px; }
.caja { background: var(--surface); border-radius: 8px; padding: 32px; max-width: 460px; width: 100%; max-height: calc(100dvh - 40px); overflow: auto; border-top: 6px solid var(--coral); }
.caja h2 { font-size: 28px; margin-bottom: 6px; }
.caja > p:not(.cinta-oferta) { font-size: 15px; color: var(--muted); }
.cinta-oferta { display: inline-block; background: var(--coral); color: var(--surface); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; margin: 0 0 14px; }
.precio-oferta { display: flex; align-items: baseline; gap: 14px; margin: 4px 0 14px; }
.precio-oferta s { font-size: 22px; color: var(--muted); text-decoration-thickness: 2px; }
.precio-oferta b { font-size: 44px; line-height: 1; color: var(--coral2); font-weight: 800; }
.reloj-oferta { background: var(--cream); border: 1px dashed var(--coral); border-radius: 6px; padding: 12px 16px; margin: 18px 0; color: var(--ink) !important; font-weight: 700; }
.reloj-oferta b { color: var(--coral2); font-size: 22px; font-variant-numeric: tabular-nums; }
.btn-link { display: block; width: 100%; border: 0; background: none; color: var(--muted); cursor: pointer; font: 700 14px/1.5 Nunito,sans-serif; padding: 16px 0 0; text-decoration: underline; text-underline-offset: 4px; }
.falta-config { color: var(--coral2); font-size: 14px; margin-top: 16px; }
.cookie-banner { position: fixed; bottom: 16px; left: 16px; right: 16px; z-index: 20; max-width: 560px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); max-height: calc(100dvh - 32px); overflow: auto; }
.cookie-banner h2 { font-size: 22px; }
.cookie-banner p,.cookie-banner a { font-size: 14px; }
.cookie-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
@media(max-width: 1000px) { .hero-txt { max-width: 60%; } .hero h1 { font-size: 54px; } .costos { grid-template-columns: 1fr 1fr; } .bonos { gap: 24px; } .bonos article { grid-template-columns: 1fr; } .bonos img { grid-row: auto; margin-bottom: 16px; } }
@media(max-width: 640px) {
 body { padding-bottom: 76px; }
 :root { --hero-shade: linear-gradient(90deg, oklch(0.24 0.04 178 / .94), oklch(0.24 0.04 178 / .52)); }
 .hero { min-height: 540px; padding: 42px 24px; }
 .hero-txt { max-width: 100%; width: 100%; }
 .hero h1 { font-size: 44px; }
 .hero-lead { font-size: 25px; max-width: 300px; }
 .sub { max-width: 290px; font-size: 16px; }
 .hero-img { inset: 0; width: auto; -webkit-mask-image: none; mask-image: none; }
 .hero-img .foto { object-position: 58% center; }
 .hero .btn { width: auto; }
 .hero .nota { font-size: 12px; }
 .sec { padding: 48px 24px; }
 h2 { font-size: 27px; }
 .intro { font-size: 16px; margin-bottom: 24px; }
 .recibes,.razones,.pasos { grid-template-columns: 1fr; gap: 24px; }
 .recibes li { padding-top: 16px; }
 .recibes b { margin-top: 8px; }
 .costos { gap: 24px 18px; }
 .costos > div { padding-left: 12px; }
 .costos h3 { font-size: 17px; }
 .bonos { grid-template-columns: 1fr; gap: 24px; }
 .bonos article { grid-template-columns: 64px 1fr; }
 .bonos img { grid-row: span 2; width: 64px; height: 64px; margin: 0; }
 .timer { padding: 18px; gap: 14px; align-items: flex-start; }
 .reloj { font-size: 25px; }
 .timer-copy { font-size: 13px; }
 .planes { grid-template-columns: 1fr; }
 .plan { padding: 26px; }
 .garantia { gap: 20px; align-items: flex-start; }
 .garantia h2 { font-size: 22px; }
 .sello-img { width: 72px; height: 72px; }
 .sec-fotos { grid-template-columns: 1fr; }
 .sec-fotos img { height: 220px; }
 .sec-img { max-height: 300px; margin-top: 28px; }
 .sec-ilus { margin-top: 28px; }
 .testimonios { grid-template-columns: 1fr; }
 .flotante { display: block; }
 .caja { padding: 24px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } .btn,.flotante { transition: none; } }
