body {
    font-family: 'Nunito', sans-serif;
    color: #1f2d3d;
}

.landing-hero {
    background: #fff;
    overflow-x: hidden;
    /* Prevent horizontal scroll from rotated elements */
}

.label-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid #E0D8FF;
    border-radius: 50rem;
    background: #F4F0FF;
    color: #7A5CF0;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.hero-title {
    font-weight: 800;
    color: rgb(39, 87, 126);
}

@media (min-width: 992px) {
    .hero-title {
    }
}

.hero-sub {
    color: #4B5871;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.hero-list {
    margin: 0;
    padding: 0;
    margin-top: 0.5rem;
}

.hero-list li {
    list-style: none;
    position: relative;
    padding-left: 1.5rem;
    margin: 0.5rem 0;
    font-weight: 600;
    color: #1f2d3d;
    font-size: 1.05rem;
}

.hero-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: -0.2rem;
    font-size: 1.5rem;
    color: #1f2d3d;
    line-height: 1;
}

/* Flechas para la lista de la sección de prácticas */
.issues-list li::before {
    content: "✓";
    font-size: 1.2rem;
    color: #19385F;
    top: -0.1rem;
}

/* Nota tipo etiqueta azul */
.note-badge {
    display: inline-block;
    background: #86A6F3;
    color: #fff;
    font-weight: 800;
    border-radius: 14px;
    padding: 0.6rem 1rem;
    margin-top: 0.75rem;
    position: relative;
    text-align: center;
}


.collage-title {
    font-weight: 800;
    color: rgb(39, 87, 126);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.color-blue {
    color: rgb(39, 87, 126);;
}

.color-gray {
    color: rgb(74, 92, 116);
}

/* Imagen única lado derecho */
.hero-bono {
    display: block;
    width: 100%;
    max-width: 620px;
    height: auto;
    margin: 0.5rem auto 0 auto;
    object-fit: contain;
}

.hero-collage {
    position: relative;
    width: 100%;
    max-width: 580px;
    height: 400px;
    margin-top: 1rem;
}

@media (max-width: 576px) {
    .hero-collage {
        height: 320px;
        transform: scale(0.9);
        transform-origin: top center;
    }
}

.collage-card {
    position: absolute;
    background: #fff;
    border-radius: 0.8rem;
    box-shadow: 0 12px 28px rgba(25, 56, 95, 0.15);
    border: 1px solid #e6ebf3;
    background-size: cover;
    background-position: center;
}

/* Placeholder colors if images are missing, but ideally we map them */
.card-main {
    width: 240px;
    height: 340px;
    left: 50%;
    top: 20px;
    transform: translateX(-50%) rotate(0deg);
    z-index: 10;
    background-image: url('../../images/Screenshot 2025-11-30 154410.png');
}

.card-left-top {
    width: 160px;
    height: 220px;
    left: 40px;
    top: 10px;
    transform: rotate(-8deg);
    z-index: 5;
    background-image: url('../../images/Screenshot 2025-11-30 154305.png');
}

.card-right-top {
    width: 160px;
    height: 220px;
    right: 40px;
    top: 10px;
    transform: rotate(8deg);
    z-index: 5;
    background-image: url('../../images/Screenshot 2025-11-30 154426.png');
}

.card-left-bottom {
    width: 140px;
    height: 190px;
    left: 10px;
    bottom: 40px;
    transform: rotate(-15deg);
    z-index: 4;
    background-image: url('../../images/Screenshot 2025-11-30 154434.png');
}

.card-right-bottom {
    width: 140px;
    height: 190px;
    right: 10px;
    bottom: 40px;
    transform: rotate(15deg);
    z-index: 4;
    background-image: url('../../images/Screenshot 2025-11-30 154336.png');
}

.discount-badge {
    position: absolute;
    right: -10px;
    bottom: 40px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: #E84545;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 800;
    line-height: 1.1;
    box-shadow: 0 10px 20px rgba(232, 69, 69, 0.4);
    transform: rotate(15deg);
    z-index: 20;
    border: 3px solid #fff;
}

.discount-badge span {
    font-size: 1.8rem;
    display: block;
}

.bono-tag {
    position: absolute;
    width: 80px;
    z-index: 20;
}

.bono-1 {
    left: 0;
    bottom: 20px;
    transform: rotate(-10deg);
}

.bono-2 {
    right: 0;
    top: 50px;
    /* Adjusted based on typical layouts */
    display: none;
    /* Hide second bono if not in image, or adjust */
}

/* Button */
.cta-button {
    display: inline-block;
    padding: 1rem 2.6rem;
    border-radius: 999px;
    background: #A78BFF;
    background-color: #A78BFF !important;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 0.01em;
    box-shadow: none;
    transition: transform 0.1s, opacity 0.15s;
    border: none;
    text-transform: uppercase;
    animation: pulse 1.6s ease-in-out infinite;
}
.cta-button--aqua{background:#00c4cc;background-color:#00c4cc !important}
.cta-button:hover, .cta-button:focus{opacity:.95;background:#A78BFF;background-color:#A78BFF !important;color:#fff}
.cta-button--aqua:hover, .cta-button--aqua:focus{opacity:.95;background:#00c4cc;background-color:#00c4cc !important;color:#fff}

.cta-button:active { transform: scale(1.02); }

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* Social Proof */
.social-proof {
    max-width: 800px;
    margin: 2rem auto 0;
}

.star {
    width: 22px;
    height: 22px;
}

.proof-text {
    font-weight: 800;
    color: #19385F;
    font-size: 1.1rem;
}
@media (max-width: 576px) {
    .social-proof .d-flex { flex-wrap: nowrap; gap: 4px; }
    .star { width: 14px; height: 14px; }
    .proof-text { white-space: nowrap; font-size: 0.95rem; }
}
@media (max-width: 420px) {
    .social-proof .d-flex { flex-wrap: wrap; }
    .proof-text { white-space: normal; width: 100%; margin-top: 4px; }
}

.proof-list {
    margin-top: 1rem;
    padding-left: 0;
    text-align: left;
    display: inline-block;
}

.proof-list li {
    list-style: none;
    position: relative;
    padding-left: 1.5rem;
    margin: 0.4rem 0;
    content: "•";
    position: absolute;
    left: 0;
    top: -0.2rem;
    font-size: 1.5rem;
    color: #1f2d3d;
    line-height: 1;
}

.collage-title {
    font-weight: 800;
    color: rgb(39, 87, 126);;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.hero-collage {
    position: relative;
    width: 100%;
    max-width: 580px;
    height: 400px;
    margin-top: 1rem;
}

@media (max-width: 576px) {
    .hero-collage {
        height: 320px;
        transform: scale(0.9);
        transform-origin: top center;
    }
}

.collage-card {
    position: absolute;
    background: #fff;
    border-radius: 0.8rem;
    box-shadow: 0 12px 28px rgba(25, 56, 95, 0.15);
    border: 1px solid #e6ebf3;
    background-size: cover;
    background-position: center;
}

/* Placeholder colors if images are missing, but ideally we map them */
.card-main {
    width: 240px;
    height: 340px;
    left: 50%;
    top: 20px;
    transform: translateX(-50%) rotate(0deg);
    z-index: 10;
    background-image: url('../../images/Screenshot 2025-11-30 154410.png');
}

.card-left-top {
    width: 160px;
    height: 220px;
    left: 40px;
    top: 10px;
    transform: rotate(-8deg);
    z-index: 5;
    background-image: url('../../images/Screenshot 2025-11-30 154305.png');
}

.card-right-top {
    width: 160px;
    height: 220px;
    right: 40px;
    top: 10px;
    transform: rotate(8deg);
    z-index: 5;
    background-image: url('../../images/Screenshot 2025-11-30 154426.png');
}

.card-left-bottom {
    width: 140px;
    height: 190px;
    left: 10px;
    bottom: 40px;
    transform: rotate(-15deg);
    z-index: 4;
    background-image: url('../../images/Screenshot 2025-11-30 154434.png');
}

.card-right-bottom {
    width: 140px;
    height: 190px;
    right: 10px;
    bottom: 40px;
    transform: rotate(15deg);
    z-index: 4;
    background-image: url('../../images/Screenshot 2025-11-30 154336.png');
}

.discount-badge {
    position: absolute;
    right: -10px;
    bottom: 40px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: #E84545;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 800;
    line-height: 1.1;
    box-shadow: 0 10px 20px rgba(232, 69, 69, 0.4);
    transform: rotate(15deg);
    z-index: 20;
    border: 3px solid #fff;
}

.discount-badge span {
    font-size: 1.8rem;
    display: block;
}

.bono-tag {
    position: absolute;
    width: 80px;
    z-index: 20;
}

.bono-1 {
    left: 0;
    bottom: 20px;
    transform: rotate(-10deg);
}

.bono-2 {
    right: 0;
    top: 50px;
    /* Adjusted based on typical layouts */
    display: none;
    /* Hide second bono if not in image, or adjust */
}

/* Button */
.cta-button {
    display: inline-block;
    padding: 1rem 2.6rem;
    border-radius: 999px;
    background: #7d2ae8;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 0.01em;
    box-shadow: none;
    transition: transform 0.1s;
    border: none;
    text-transform: uppercase;
    animation: pulse 1.6s ease-in-out infinite;
}

.cta-button:active { transform: scale(1.02); }

/* Social Proof */
.social-proof {
    max-width: 800px;
    margin: 2rem auto 0;
}

.star {
    width: 22px;
    height: 22px;
}

.proof-text {
    font-weight: 800;
    color: #19385F;
    font-size: 1.1rem;
}

.proof-list {
    margin-top: 1rem;
    padding-left: 0;
    text-align: left;
    display: inline-block;
}

.proof-list li {
    list-style: none;
    position: relative;
    padding-left: 1.5rem;
    margin: 0.4rem 0;
    color: #4B5871;
    font-weight: 600;
    font-size: 1rem;
}

.proof-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: -0.45rem;
    font-size: 1.5rem;
    color: #19385F;
}

/* Centrar bloque de listas de contenidos */
.content-list { max-width: 900px; margin: 0 auto; margin-top: .5rem; }

/* Lista compacta para menos separación entre ítems */
.compact-list li { margin: .25rem 0; }

/* Bloques de profesionales */
.pro-block{background:#F4F7FF;border:1px solid #e6ebf3;border-radius:12px;padding:.75rem 1rem}
.pro-avatar{width:52px;height:52px;border-radius:50%;object-fit:cover}
.pro-title{font-weight:800;color:#19385F}
.pro-sub{font-size:.95rem}
.testimonials{margin-top:1rem;max-width:1100px;margin-left:auto;margin-right:auto}
.t-card{position:relative;background:#fff;border:1px solid #e6ebf3;border-radius:16px;box-shadow:0 8px 20px rgba(25,56,95,.08);height:100%;padding:1.25rem 1.25rem 1rem 1.25rem;padding-right:100px}
.t-stars{display:flex;gap:6px;margin-bottom:.5rem}
.t-stars img{width:18px;height:18px}
.t-avatar{position:absolute;right:16px;top:16px;width:52px;height:52px;border-radius:50%;object-fit:cover}
.t-quote{color:#4B5871;font-size:1rem;line-height:1.6;margin-top:.6rem}
.t-author{color:#19385F;font-weight:800;margin-top:.75rem;font-size:.95rem}

/* Bonos */
.bonus-section{max-width:1100px;margin:0 auto}
.bonus-card{background:#fff;border:1px solid #e6ebf3;border-radius:16px;box-shadow:0 8px 20px rgba(25,56,95,.08);padding:1rem 1.2rem}
.bonus-head{font-weight:800;color:#19385F}
.bonus-price{font-weight:800;color:#19385F;margin:.4rem 0}
.bonus-list{margin:.4rem 0 0 0;padding:0}
.bonus-list li{list-style:none;position:relative;padding-left:1.4rem;margin:.35rem 0;color:#4B5871}
.bonus-list li::before{content:"✓";position:absolute;left:0;top:.05rem;color:#1eb05d;font-weight:800}
.bonus-image{display:block;width:100%;max-width:560px;height:auto;margin:0 auto;object-fit:contain}

/* Autor */
.author-text{color:#4B5871;font-size:1.05rem;line-height:1.65;margin:.4rem 0}
.author-text strong{color:#19385F;font-weight:800}
.author-photo{width:100%;max-width:420px;height:auto;border-radius:16px;object-fit:cover}

/* Compra segura */
.secure-list{margin-top:.5rem;padding:0;max-width:800px}
.secure-list li{list-style:none;margin:.35rem 0;color:#4B5871;font-size:1.02rem}
.secure-list .icon{display:inline-block;width:22px;text-align:center;margin-right:.35rem}
.secure-list strong{color:#19385F}

/* FAQ */
.faq-item{background:#f7f9fc;border:1px solid #e6ebf3;border-radius:12px;padding:1rem 1.2rem;margin:.65rem 0}
.faq-q{font-weight:800;color:#19385F;margin-bottom:.35rem}
.faq-a{margin:0;line-height:1.6}

/* Oferta limitada */
.offer-block{padding:.5rem 0}
.offer-title{color:#e03a3a;font-weight:800;letter-spacing:.02em;margin-bottom:.25rem}
.offer-before{color:#4B5871;font-size:3.60rem;font-weight:700}
.strike{position:relative;display:inline-block;color:#4B5871}
.strike::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:2px;background:#e03a3a;transform:rotate(-8deg)}
.offer-now{color:#00c4cc;font-weight:800;font-size:5rem;line-height:1;margin:.25rem 0}
.offer-now .price-big{font-size:5rem}
.offer-save{color:#00c4cc;font-weight:800;font-size:2.5rem}
@media(max-width:576px){
  .offer-now{font-size:2rem}
  .offer-now .price-big{font-size:2.4rem}
}
