:root {
    --green-deep: #0B3B2E;
    --green: #1F6B4E;
    --green-soft: #DDEBDD;
    --orange: #F97316;
    --orange-deep: #E85D04;
    --gold: #D9A441;
    --cream: #FAF6EF;
    --warm-white: #FFFDF7;
    --charcoal: #111111;
    --muted: #6D6A61;
    --line: rgba(17, 17, 17, 0.12);
    --shadow-soft: 0 18px 50px rgba(11, 59, 46, 0.14);
    --shadow-strong: 0 28px 80px rgba(5, 31, 24, 0.28);
    --radius: 8px;
    --container: 1180px;
}

*,
*::before,
*::after { box-sizing: border-box; }
html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    background: var(--warm-white);
    color: var(--charcoal);
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
main { width: 100%; max-width: 100%; overflow-x: hidden; }
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }

.skip-link {
    position: absolute;
    left: 16px;
    top: -48px;
    z-index: 1000;
    background: var(--charcoal);
    color: #fff;
    padding: 10px 14px;
    border-radius: var(--radius);
    transition: top 0.2s ease;
}
.skip-link:focus { top: 16px; }
.container { width: min(100% - 32px, var(--container)); max-width: 100%; margin-inline: auto; }
.section { width: 100%; max-width: 100%; padding: 76px 0; overflow-x: clip; }

.site-header {
    width: 100%;
    max-width: 100%;
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 253, 247, 0.9);
    border-bottom: 1px solid rgba(11, 59, 46, 0.1);
    backdrop-filter: blur(18px);
}
.header-inner { min-height: 74px; display: flex; align-items: center; gap: 18px; max-width: 100%; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand img { width: 142px; max-height: 58px; object-fit: contain; }
.site-nav { display: none; }
.site-nav a { color: rgba(17, 17, 17, 0.78); font-weight: 700; font-size: 0.9rem; }
.site-nav a:hover, .site-nav a:focus { color: var(--green); }
.menu-toggle {
    width: 44px;
    height: 44px;
    margin-left: auto;
    border: 1px solid rgba(11, 59, 46, 0.18);
    border-radius: var(--radius);
    background: #fff;
    display: inline-grid;
    place-content: center;
    gap: 5px;
    cursor: pointer;
}
.menu-toggle span { width: 20px; height: 2px; background: var(--green-deep); border-radius: 999px; }
.header-cta { display: none; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 14px 22px;
    border-radius: var(--radius);
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn:hover, .btn:focus { transform: translateY(-2px); }
.btn-primary, .btn-small {
    background: linear-gradient(135deg, var(--orange), var(--orange-deep));
    color: #fff;
    box-shadow: 0 14px 28px rgba(249, 115, 22, 0.28);
}
.btn-secondary { color: var(--green-deep); background: rgba(255,255,255,0.82); border-color: rgba(11,59,46,0.18); }
.btn-small { min-height: 44px; padding: 11px 16px; font-size: 0.9rem; }
.btn-full { width: 100%; }
.btn-price { display: inline-flex; align-items: baseline; gap: 6px; margin-left: 4px; white-space: nowrap; max-width: 100%; }
.btn .old-price { color: rgba(255,255,255,0.72); font-size: 0.78em; text-decoration-color: #fff; }
.btn .new-price { color: #FFE6A3; font-size: 1.08em; }
.btn-secondary .old-price { color: rgba(17,17,17,0.52); text-decoration-color: var(--orange-deep); }
.btn-secondary .new-price { color: var(--orange-deep); }

.hero {
    width: 100%;
    max-width: 100%;
    position: relative;
    background: radial-gradient(circle at 84% 16%, rgba(217,164,65,0.25), transparent 30%), linear-gradient(135deg, var(--cream), #fff 42%, var(--green-soft));
    padding-top: 44px;
}
.hero-grid, .split-grid, .product-intro-grid, .belief-grid, .guarantee-grid, .final-panel, .stack-panel {
    display: grid;
    gap: 42px;
    align-items: center;
}
.eyebrow { margin: 0 0 12px; color: var(--green); font-size: 0.78rem; font-weight: 900; letter-spacing: 0; text-transform: uppercase; }
.eyebrow.light { color: #F7D990; }
h1, h2, h3 { margin: 0; line-height: 1.08; color: var(--green-deep); }
h1, h2 { font-family: "Playfair Display", Georgia, serif; font-weight: 800; }
h1 { font-size: clamp(2.45rem, 8vw, 5.15rem); max-width: 850px; }
h2 { font-size: clamp(2rem, 6vw, 3.65rem); }
h3 { font-size: 1.05rem; }
.hero-subtitle, .lead, .section-heading p { color: var(--muted); font-size: clamp(1.02rem, 2.5vw, 1.18rem); }
.hero-subtitle { margin: 22px 0; max-width: 710px; }
.truth-note, .gold-note { border-radius: var(--radius); font-weight: 800; }
.truth-note { background: #fff; border-left: 5px solid var(--orange); color: var(--green-deep); padding: 18px; box-shadow: var(--shadow-soft); }
.check-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.check-list li { position: relative; padding-left: 36px; color: rgba(17,17,17,0.82); font-weight: 650; }
.check-list li::before, .benefit-item span, .stack-list span, .trust-grid span, .card-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(249,115,22,0.12);
    color: var(--orange);
    border: 1px solid rgba(249,115,22,0.22);
    font-size: 14px;
    line-height: 1;
    font-weight: 900;
    flex: 0 0 22px;
}
.check-list li::before { content: "\2713"; position: absolute; left: 0; top: 0.08em; }
.hero-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.price-box { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px; color: var(--green-deep); font-weight: 900; }
.hero-price { justify-content: flex-start; margin-top: 20px; }
.old-price { color: rgba(17,17,17,0.58); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--orange-deep); }
.new-price { color: var(--orange-deep); font-size: clamp(1.55rem, 4vw, 2.25rem); line-height: 1; font-weight: 900; }
.microcopy { color: rgba(17,17,17,0.66); font-size: 0.9rem; font-weight: 700; }
.microcopy span, del { text-decoration-thickness: 2px; text-decoration-color: var(--orange-deep); }
.hero-product { position: relative; min-height: 440px; display: grid; place-items: center; }
.product-glow { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(249,115,22,0.2), rgba(31,107,78,0.16), transparent 66%); filter: blur(8px); }
.book-cover { position: relative; width: min(82vw, 470px); filter: drop-shadow(0 32px 42px rgba(11,59,46,0.28)); }
.price-badge { position: absolute; right: 4%; bottom: 10%; width: 136px; min-height: 136px; display: grid; place-content: center; text-align: center; border-radius: 50%; background: var(--green-deep); color: #fff; box-shadow: var(--shadow-strong); border: 3px solid var(--gold); }
.price-badge span { font-size: 0.76rem; font-weight: 800; text-transform: uppercase; }
.price-badge del { text-decoration-thickness: 2px; text-decoration-color: #fff; }
.price-badge strong { color: #FFE6A3; font-size: 1.25rem; line-height: 1.05; }

.section-copy .lead { margin: 18px 0 0; }
.body-copy { color: rgba(17,17,17,0.72); margin-top: 22px; }
.body-copy p { margin: 0 0 14px; }
.lifestyle-placeholder { min-height: 480px; border-radius: var(--radius); padding: 24px; background-image: linear-gradient(135deg, rgba(11,59,46,0.20), rgba(11,59,46,0.08)), url("../../img/comer-mejor.png"); background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: var(--shadow-soft); display: flex; align-items: flex-end; }
.placeholder-card { width: min(100%, 420px); background: rgba(255,253,247,85%); border: 1px solid rgba(255,255,255,0.72); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-soft); }
.placeholder-card strong { display: block; color: var(--green-deep); font-family: "Playfair Display", Georgia, serif; font-size: 1.65rem; line-height: 1.12; }
.placeholder-card p { margin: 12px 0 0; color: var(--muted); }
.placeholder-card span { font-weight: 800; color: var(--green-deep); }
.placeholder-kicker { display: block; color: var(--orange-deep); font-size: 0.75rem; text-transform: uppercase; margin-bottom: 8px; }

.belief, .bonuses, .value-stack, .final-cta { background: var(--green-deep); color: #fff; }
.belief h2, .bonuses h2, .value-stack h2, .final-cta h2 { color: #fff; }
.belief-copy { color: rgba(255,255,255,0.82); }
.gold-note { margin-top: 22px; padding: 20px; background: rgba(217,164,65,0.16); color: #FFE6A3; border: 1px solid rgba(217,164,65,0.45); }
.product-intro { background: var(--cream); }
.product-media { display: grid; gap: 22px; place-items: center; }
.side-cover { width: min(78vw, 360px); }
.pages-fan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; width: 100%; }
.pages-fan img, .preview-grid img { border-radius: var(--radius); border: 1px solid rgba(11,59,46,0.12); box-shadow: var(--shadow-soft); background: #fff; }
.pages-fan img:nth-child(1) { transform: rotate(-4deg) translateY(12px); }
.pages-fan img:nth-child(2) { transform: translateY(-8px); }
.pages-fan img:nth-child(3) { transform: rotate(4deg) translateY(12px); }
.section-heading { max-width: 760px; margin-bottom: 34px; }
.section-heading.centered { margin-inline: auto; text-align: center; }
.preview-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.fit { background: linear-gradient(180deg, #fff, var(--cream)); }
.card-grid, .bonus-grid { display: grid; gap: 16px; }
.soft-card, .bonus-card { border-radius: var(--radius); padding: 20px; }
.soft-card { background: #fff; border: 1px solid var(--line); box-shadow: 0 12px 34px rgba(11,59,46,0.08); }
.check-card { display: flex; gap: 14px; align-items: flex-start; }
.check-card p { margin: 0; color: rgba(17,17,17,0.78); font-weight: 650; }
.center-note { max-width: 780px; margin: 26px auto 0; text-align: center; color: var(--green-deep); font-weight: 800; }
.benefits { background: #fff; }
.benefit-list { display: grid; gap: 12px; }
.benefit-item { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border: 1px solid rgba(11,59,46,0.12); border-radius: var(--radius); background: var(--warm-white); }
.benefit-item p { margin: 0; font-weight: 700; color: rgba(17,17,17,0.78); }
.includes { background: var(--green-soft); }
.pill-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pill-grid span { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 16px 10px 14px; border-radius: 999px; background: #fff; border: 1px solid rgba(11,59,46,0.12); color: var(--green-deep); font-weight: 800; }
.pill-grid span::before { content: "\2713"; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(249,115,22,0.12); color: var(--orange); border: 1px solid rgba(249,115,22,0.22); font-size: 13px; line-height: 1; font-weight: 900; flex: 0 0 20px; }
.disclaimer { max-width: 760px; margin: 26px auto 0; color: var(--muted); text-align: center; font-size: 0.95rem; }

.bonuses .section-heading p { color: rgba(255,255,255,0.78); }
.bonuses .section-heading { position: relative; }
.bonuses .section-heading::after { content: "Incluidos gratis"; display: inline-flex; align-items: center; justify-content: center; min-height: 36px; margin-top: 18px; padding: 8px 16px; border-radius: 999px; background: rgba(249,115,22,0.16); color: #FFE6A3; border: 1px solid rgba(249,115,22,0.36); font-size: 0.82rem; font-weight: 900; }
.bonus-card { position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(255,253,247,0.13), rgba(255,253,247,0.06)), rgba(255,253,247,0.08); border: 1px solid rgba(217,164,65,0.24); display: flex; gap: 18px; min-height: 150px; box-shadow: 0 16px 38px rgba(0,0,0,0.12); transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease; }
.bonus-card::after { content: ""; position: absolute; right: -28px; top: -28px; width: 88px; height: 88px; border-radius: 50%; background: rgba(249,115,22,0.12); }
.bonus-card:hover { transform: translateY(-3px); border-color: rgba(217,164,65,0.46); background: linear-gradient(135deg, rgba(255,253,247,0.16), rgba(255,253,247,0.07)), rgba(255,253,247,0.1); }
.bonus-icon { width: 46px; height: 46px; min-width: 46px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 46px; border-radius: 50%; background: rgba(217,164,65,0.18); border: 1px solid rgba(217,164,65,0.42); box-shadow: 0 12px 26px rgba(249,115,22,0.18); font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 40px; line-height: 1; }
.bonus-content { position: relative; min-width: 0; }
.bonus-card h3 { position: relative; color: #fff; }
.bonus-card p { position: relative; color: rgba(255,255,255,0.76); margin: 10px 0 0; }

.stack-panel { border-radius: var(--radius); padding: clamp(28px, 4vw, 48px); background: radial-gradient(circle at 84% 10%, rgba(249,115,22,0.22), transparent 30%), linear-gradient(135deg, rgba(255,253,247,0.1), rgba(255,253,247,0.04)), rgba(255,253,247,0.08); border: 1px solid rgba(255,255,255,0.14); }
.value-stack-inner { display: grid; grid-template-columns: 1fr; align-items: center; gap: clamp(32px, 5vw, 80px); }
.value-stack-content { min-width: 0; }
.stack-list { display: grid; gap: 12px; margin-top: 24px; color: rgba(255,255,255,0.88); }
.stack-list div { display: flex; align-items: flex-start; gap: 12px; font-weight: 650; line-height: 1.45; }
.value-stack-offer-card { position: relative; overflow: visible; background: var(--warm-white); color: var(--charcoal); border-radius: 24px; padding: clamp(28px, 4vw, 44px); border: 1px solid rgba(217,164,65,0.25); box-shadow: 0 24px 70px rgba(0,0,0,0.22); text-align: center; }
.value-stack-book { width: min(100%, 340px); margin: -76px auto 22px; display: block; filter: drop-shadow(0 26px 42px rgba(0,0,0,0.28)); }
.offer-price { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 10px 12px; margin-bottom: 20px; text-align: center; }
.offer-price .old-price { color: rgba(17,17,17,0.56); }
.offer-price .new-price { color: var(--orange-deep); font-size: clamp(2rem, 4vw, 3rem); line-height: 1; }
.value-stack-offer-card .btn { width: auto; min-width: 240px; max-width: 340px; display: inline-flex; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.light-copy { color: rgba(255,255,255,0.72); }
.value-stack-offer-card .light-copy { color: var(--muted); text-align: center; margin: 14px 0 0; }

.guarantee { background: linear-gradient(180deg, var(--cream), #fff); }
.guarantee-seal { display: grid; place-items: center; }
.guarantee-seal img { width: min(82vw, 360px); filter: drop-shadow(0 22px 34px rgba(217,164,65,0.32)); }
.guarantee-text { font-size: 1.15rem; color: rgba(17,17,17,0.74); font-weight: 700; }
.trust-grid { display: grid; gap: 10px; margin-top: 22px; }
.trust-grid div { display: flex; gap: 12px; align-items: center; font-weight: 800; color: var(--green-deep); }
.hotmart-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 24px; color: var(--muted); font-weight: 800; }
.hotmart-button { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; padding: 0px; border-radius: 9px; background: transparent; box-shadow: 0 12px 30px rgba(255, 90, 31, 0.22); transition: transform 0.2s ease, box-shadow 0.2s ease; text-decoration: none; overflow: hidden;}
.hotmart-button:hover, .hotmart-button:focus { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(255, 90, 31, 0.32); }
.hotmart-button img { display: block; max-width: 120px; height: auto; }
.faq { background: var(--warm-white); }
.faq-wrap { max-width: 920px; }
.faq-list { display: grid; gap: 12px; }
.faq-item { border: 1px solid rgba(11,59,46,0.13); border-radius: var(--radius); background: #fff; box-shadow: 0 10px 28px rgba(11,59,46,0.06); overflow: hidden; }
.faq-item h3 { margin: 0; }
.faq-item button { width: 100%; min-height: 64px; padding: 18px; border: 0; background: transparent; color: var(--green-deep); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; text-align: left; font-weight: 900; }
.faq-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--green-soft); color: var(--green-deep); flex: 0 0 auto; }
.faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.24s ease; }
.faq-panel p { overflow: hidden; margin: 0; padding: 0 18px; color: var(--muted); }
.faq-item.is-open .faq-panel { grid-template-rows: 1fr; }
.faq-item.is-open .faq-panel p { padding-bottom: 18px; }
.faq-item.is-open .faq-icon { background: var(--orange); color: #fff; }
.final-panel { align-items: center; padding: 28px; border-radius: var(--radius); background: linear-gradient(135deg, rgba(255,253,247,0.1), rgba(255,253,247,0.04)), var(--green-deep); }
.final-panel p { color: rgba(255,255,255,0.78); font-size: 1.08rem; }
.final-price { display: grid; gap: 12px; background: rgba(255,253,247,0.1); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius); padding: 22px; }
.final-price .price-box { justify-content: flex-start; color: rgba(255,255,255,0.82); }
.final-price .old-price { color: rgba(255,255,255,0.68); text-decoration-color: #FFE6A3; }
.final-price .new-price { color: #FFE6A3; font-size: 2.3rem; }
.final-price small { color: rgba(255,255,255,0.76); font-weight: 800; }
.site-footer { padding: 34px 0; background: #081F19; color: #fff; }
.footer-inner { display: grid; gap: 16px; align-items: center; }
.footer-inner p { margin: 4px 0 0; color: rgba(255,255,255,0.68); }

@media (max-width: 899px) {
    .site-nav { position: fixed; inset: 74px 0 auto 0; background: rgba(255,253,247,0.98); border-bottom: 1px solid rgba(11,59,46,0.12); padding: 20px 16px; box-shadow: 0 18px 40px rgba(11,59,46,0.16); }
    .site-nav.is-open { display: grid; gap: 16px; }
    .site-nav a { padding: 12px; border-radius: var(--radius); background: var(--cream); }
    .split-grid, .product-intro-grid, .belief-grid, .guarantee-grid, .final-panel, .stack-panel, .card-grid, .bonus-grid, .preview-grid { grid-template-columns: 1fr; width: 100%; max-width: 100%; }
    .hero-grid { grid-template-columns: 1fr; text-align: center;}
    .hero-copy { text-align: center; }
    .hero-copy h1, .hero-subtitle { margin-left: auto; margin-right: auto; }
    .hero-actions, .hero-price { justify-content: center; }
    .hero-product { min-height: auto; }
    .hero-product .book-cover { width: min(82vw, 360px); }
    .value-stack-inner { grid-template-columns: 1fr; }
    .value-stack-content { text-align: left; }
    .value-stack-offer-card { margin-top: 24px; padding: 28px 20px; }
    .value-stack-book { width: min(100%, 280px); margin-top: -46px; }
    .value-stack-offer-card .btn { width: 100%; max-width: none; min-width: 0; }
}



@media (max-width: 767px) {
    .hero-grid {
        display: flex;
        flex-direction: column;
    }

    .hero-product {
        order: 1;
    }

    .hero-copy {
        order: 2;
    }
}
@media (max-width: 600px) {
    .container { width: min(100% - 24px, var(--container)); }
    .btn { padding-left: 16px; padding-right: 16px; }
    .btn-price { flex-basis: 100%; justify-content: center; }
    .header-inner { gap: 10px; }
    .brand img { width: 124px; }
    .menu-toggle { width: 42px; height: 42px; }
}

@media (min-width: 620px) {
    .hero-actions { flex-direction: row; align-items: center; }
    .preview-grid, .fit-grid, .bonus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
    .section { padding: 104px 0; }
    .menu-toggle { display: none; }
    .site-nav { display: flex; align-items: center; justify-content: center; gap: 22px; flex: 1 1 auto; }
    .header-cta { display: inline-flex; }
    .hero { padding: 82px 0 108px; }
    .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr); align-items: center; gap: clamp(32px, 5vw, 80px); }
    .hero-copy { text-align: left; }
    .hero-product { min-height: 560px; display: flex; align-items: center; justify-content: center; justify-self: end; width: 100%; }
    .hero-product .book-cover { width: min(100%, 520px); }
    .split-grid, .product-intro-grid, .belief-grid, .guarantee-grid, .final-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .belief-grid { align-items: start; }
    .preview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .bonus-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .value-stack-inner { grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr); align-items: center; gap: clamp(36px, 5vw, 80px); }
    .value-stack-content { text-align: left; }
    .value-stack-offer-card { justify-self: end; width: min(100%, 470px); }
    .value-stack-book { width: min(100%, 380px); margin-top: -92px; }
    .value-stack-offer-card .btn { width: auto; min-width: 240px; max-width: 340px; }
    .footer-inner { grid-template-columns: auto 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}