* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #222733;
    background: #fffaf8;
    line-height: 1.6;
    overflow-x: hidden;
}

.header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    padding: 1.3rem 5%;
}

.navbar {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(34, 39, 51, 0.08);
    border-radius: 999px;
    padding: 1.1rem 1.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 12px 30px rgba(34, 39, 51, 0.08);
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: #222733;
    text-decoration: none;
    min-width: 11rem;
}

/*.logo-mark {
    font-family: 'Lora', serif;
    font-weight: 900;
    font-size: 1.05rem;
    letter-spacing: 0.08rem;
    line-height: 1.12;
    padding-bottom: 0.04em;
    color: transparent;
    background: linear-gradient(
        180deg,
        #C9929F 0%,
        #222733 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
        0.3px 0.3px 0 rgba(34,39,51,0.08);
    display: inline-block;
}*/

.logo-mark{
    width:56px;
    height:56px;
    display:block;
    flex-shrink:0;
}


.brand-name {
    font-family: 'Lora', serif;

    font-size: 1rem;
    font-weight: 900;

    letter-spacing: 0.08rem;
    line-height: 1.12;
    padding-bottom: 0.04em;

    opacity: 0;

    color: transparent;

    background: linear-gradient(
        180deg,
        #C9929F 0%,
        #222733 100%
    );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    text-shadow:
        0.3px 0.3px 0 rgba(34,39,51,0.08);

    display: inline-block;
}


.nav-list {
    list-style: none;
    display: flex;
    gap: 1.6rem;
    align-items: center;
}

.nav-link {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: #222733;
    font-size: 0.95rem;
    font-weight: 700;
    opacity: 0.75;
    transition: opacity 0.25s ease, color 0.25s ease;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.45rem;
    width: 0;
    height: 0.18rem;
    background: #F8CBD1;
    border-radius: 999px;
    transition: width 0.25s ease;
}

.nav-link:hover,
.nav-link.active {
    opacity: 1;
    color: #222733;
}

.nav-link.active::after {
    width: 100%;
}

/*2026*/
.nav-button,
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 0.5rem;
    border: 2px solid #222733;
    border-radius: 999px;
    background: #F8CBD1;
    color: #222733;
    font-family: Arial, Helvetica, sans-serif;
    font-size: inherit;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 5px 5px 0 #222733;
    transition:
        background-color 0.22s ease,
        box-shadow 0.22s ease;
}


.nav-button:hover,
.btn:hover {
    transform: none;
    box-shadow: 7px 7px 0 #222733;
}

.nav-button:active,
.btn:active {
    transform: translate(5px, 5px);
    box-shadow: 0 0 0 #222733;
}

.btn-secondary {
    background: transparent !important;
    background-color: transparent !important;
    border: 2px solid #222733 !important;
    color: #222733 !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.btn-secondary:hover {
    background: rgba(248, 203, 209, 0.12) !important;
    background-color: rgba(248, 203, 209, 0.12) !important;
    transform: none !important;
    box-shadow: 6px 6px 0 rgba(34,39,51,0.85) !important;
}

.btn-secondary:active,
.btn-secondary.is-pressed {
    background: rgba(232, 166, 176, 0.28) !important;
    transform: translate(4px, 4px) !important;
    box-shadow: none !important;
}

.hero,
.about-section,
.support-section,
.services,
.stories-section,
.contact-section {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
}

.hero {
    padding: 10rem 5% 8rem;
    background:
        linear-gradient(rgba(255, 250, 248, 0.82), rgba(255, 250, 248, 0.92)),
        url("../images/hero.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}

.hero-content {
    width: 100%;
    max-width: 1100px;
}

.hero-label,
.section-label {
    display: inline-block;
    margin-bottom: 1rem;
    color: #8a6f75;
    font-weight: 800;
    letter-spacing: 0.12rem;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.hero-title {
    margin: 0;
}

.hero-quote {
    width: 100%;
    max-width: 720px;
    margin: 0;
    font-family: "Lora", Georgia, serif;
    font-size: clamp(2.1rem, 3.4vw, 3.15rem);
    line-height: 1.08;
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.035em;
    color: #222733;
}

.hero-quote span {
    display: block;
}


.hero-side {
    max-width: 680px;
    margin-left: auto;
}



.hero-text{
font-size:1.35rem;
line-height:1.8;
max-width:32rem;
color:#4f5463;
}

.hero-buttons {
    display: flex;
    gap: 1.2rem;
    flex-wrap: nowrap;
    align-items: center;
}


.about-section{
    padding:8rem 5%;
    background:#F6EFEA;
    display:flex;
    align-items:center;
}



.about-content {
    max-width: 650px;
    color:#222733;
}

.about-content .section-label{
    color:#8b6d74;
}

.section-title {
    font-size: clamp(2.5rem, 5vw, 4.8rem);
    line-height: 1;
    margin-bottom: 1.5rem;
    letter-spacing: -0.04em;
}

/* =========================================================
   INDEX — JERARQUÍA DE TÍTULOS DE SECCIÓN
   ========================================================= */

.home-page .home-section-title {
    margin-bottom: 1.5rem;
    font-family: "Lora", Georgia, serif;
    font-size: clamp(1.7rem, 2.7vw, 2.55rem);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: #222733;
    text-wrap: balance;
}

.about-content p {
    font-size: 1.15rem;
    margin-bottom: 1rem;
    font-style: italic;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.5px;
}

.support-section {
    padding: 8rem 5%;
     background:

    radial-gradient(
        circle at 15% 20%,
        rgba(255,255,255,.35),
        transparent 24rem
    ),

    radial-gradient(
        circle at 85% 85%,
        rgba(255,255,255,.18),
        transparent 28rem
    ),

    linear-gradient(
        180deg,
        #F8CBD1 0%,
        #F5C2CB 45%,
        #F3B8C1 100%
    );
    text-align: center;
    display: flex;
    align-items: center;
}

.support-content {
    max-width: 900px;
    margin: 0 auto;
}

.support-content p {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.support-list {
    margin-top: 2rem;
    display: grid;
    gap: 1rem;
}

.support-list p {
    position:relative;
    overflow:hidden;
    margin:0;
    padding:1.15rem 1.35rem;
    background:rgba(255,255,255,.68);
    border:1px solid rgba(255,255,255,.52);
    border-radius:1.25rem;
    box-shadow:
        0 8px 24px rgba(34,39,51,.06);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}
.services {
    padding: 8rem 5%;
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,.32), transparent 24rem),
        radial-gradient(circle at 85% 85%, rgba(255,255,255,.18), transparent 28rem),
        linear-gradient(180deg, #F8CBD1 0%, #F5C2CB 48%, #F3B8C1 100%);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.services-list {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.service-card {
    background: white;
    border: 1px solid rgba(34, 39, 51, 0.08);
    border-radius: 1.6rem;
    padding: 2rem;
    text-align: left;
    box-shadow: 0 12px 30px rgba(34, 39, 51, 0.06);
}

.service-card h3 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.service-card p {
    color: #4b4f5c;
}

.stories-section {
    padding: 8rem 5%;
    background: #F8CBD1;
    text-align: center;
    display: flex;
    align-items: center;
}

.stories-content {
    width: min(1180px, 100%);
    max-width: 1180px;
    margin: 0 auto;
}

.stories-content p {
    font-size: 1.15rem;
}

.contact-section {
    padding: 8rem 5%;
    background:#f8f3ef;
    animation: aboutGradient 18s ease-in-out infinite alternate;
    text-align: center;
    display: flex;
    align-items: center;
}
.contact-content {
    max-width: 700px;
    margin: 0 auto;
}

.contact-content h2 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1;
    margin-bottom: 1rem;
}

.contact-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

.wave {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 7rem;
    z-index: 2;
    pointer-events: none;
    background-color: currentColor;
    clip-path: polygon(
        0 50%,
        10% 45%,
        20% 41%,
        30% 39%,
        40% 40%,
        50% 44%,
        60% 50%,
        70% 56%,
        80% 58%,
        90% 55%,
        100% 49%,
        100% 100%,
        0 100%
    );
}

.wave-pink {
    color: #F8CBD1;
}

.wave-light {
    color: #fffaf8;
}

.wave-green {
    color: #F6EFEA;
}

.wave-dark {
    color: #222733;
}

.footer {
    background: #222733;
    color: #fffaf8;
    padding: 0rem 5% 2rem;
}

.footer-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-logo-link{
    display:inline-flex;
    align-items:center;
    gap:0.9rem;
    text-decoration:none;
    margin-bottom:1.2rem;
}

.footer-logo{
    display:block;
    width:56px;
    height:auto;
    flex-shrink:0;
}

.footer-logo-link h3{
    margin:0;
    font-family:'Lora', serif;
    font-size:clamp(1.5rem, 2.2vw, 2.3rem);
    font-weight:800;
    letter-spacing:.03em;
    color:#fffaf8;
    line-height:1;
    transition:color .25s ease;
}

.footer-logo-link:hover h3{
    color:#F8CBD1;
}

.footer-brand p,
.footer-column p,
.footer-bottom p {
    color: rgba(255, 250, 248, 0.78);
}

.footer-column h4 {
    margin-bottom: 1rem;
    color: #F8CBD1;
}

.footer-column a {
    display: block;
    color: rgba(255, 250, 248, 0.78);
    text-decoration: none;
    margin-bottom: 0.6rem;
}

.footer-column a:hover {
    color: #F8CBD1;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 250, 248, 0.14);
    padding-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

/* PRELOADER */

body.is-loading {
    overflow: hidden;
}

body.is-loading .header,
body.is-loading main,
body.is-loading .footer {
    visibility: hidden;
}

body.is-loading .preloader {
    visibility: visible;
}

.preloader {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100svh;
    min-height: 100vh;
    background: #fffaf8;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}


/*2026*/
.loader-text {
    margin: 0;
    font-family: 'Lora', serif;
    font-size: clamp(3rem, 8vw, 8rem);
    font-weight: 900;
    display: flex;
    gap: 0.15em;
    letter-spacing: -0.035em;
    line-height: 1;
    padding: 0;
    overflow: visible;
    will-change: transform;
}

.loader-text span {
    display: inline-block;
    opacity: 0;
    transform: translateY(100px);
    line-height: 1.12;
    padding-bottom: 0.04em;

    color: transparent;
    background: linear-gradient(
        180deg,
        #C9929F 0%,
        #8C7482 45%,
        #222733 100%
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    text-shadow: 0.25px 0.25px 0 rgba(34,39,51,0.06);
}


/* RESPONSIVE */

@media (max-width: 1150px) {
    .navbar {
        border-radius: 2rem;
        flex-direction: column;
        gap: 1rem;
    }

    .logo {
        min-width: auto;
    }

    .nav-list {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }

    .hero {
        padding-top: 16rem;
        text-align: center;
    }

    .hero-title {
        max-width: 100%;
    }

    .hero-side {
        margin-left: 0;
        max-width: 100%;
    }

    .hero-text {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons {
        justify-content: center;
    }

    .services-list {
        grid-template-columns: 1fr;
    }

    .about-section {
        text-align: center;
        background-position: center;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
    }
}

@media (max-width: 520px) {
    .header {
        padding: 0.8rem 4%;
    }

    .hero {
        padding-top: 19rem;
    }

    .home-page .hero-title.hero-quote {
        max-width: 20rem;
        margin-left: auto;
        margin-right: auto;
        font-size: clamp(1.55rem, 6.5vw, 1.9rem);
        line-height: 1.2;
        letter-spacing: -0.025em;
    }

    .hero-text {
        font-size: 1.05rem;
    }

    .hero-buttons {
        gap: 0.7rem;
    }

    .btn {
        padding: 0.8rem 1rem;
        font-size: 0.82rem;
    }

    .nav-button {
        padding: 0.85rem 1.2rem;
    }

    .wave {
        height: 4.5rem;
    }
}

/* ==============================
   BOTÓN VOLVER ARRIBA
   ============================== */

.scroll-top-button {
    position: fixed;
    right: 24px;
    bottom: 24px;

    width: 52px;
    height: 52px;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 2px solid #222733;
    border-radius: 999px;

    background: #F8CBD1;
    color: #222733;

    font-family: inherit;
    font-size: 1.35rem;
    line-height: 1;

    box-shadow: 5px 5px 0 #222733;
    cursor: pointer;
    z-index: 9999;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(18px);

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease,
        background-color 0.24s ease,
        box-shadow 0.24s ease;
}

.scroll-top-button.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.scroll-top-button:hover {
    background: #F3B8C1;
    transform: none;
    box-shadow: 6px 6px 0 #222733;
}

.scroll-top-button:active,
.scroll-top-button.is-pressed {
    background: #F8CBD1;
    transform: translate(4px, 4px);
    box-shadow: none;
}

.scroll-top-button:focus-visible {
    outline: 3px solid rgba(34, 39, 51, 0.25);
    outline-offset: 4px;
}

@media (max-width: 520px) {
    .scroll-top-button {
        right: 18px;
        bottom: 18px;
        width: 48px;
        height: 48px;
        font-size: 1.15rem;
    }
}

/* ==============================
   HEADER DINÁMICO + NAV SENIOR
   ============================== */

.header {
    transition: padding 0.32s ease, transform 0.32s ease;
    will-change: padding, transform;
}

/*2026-2027 changed*/
.navbar {
    transition:
        padding 0.32s ease,
        background-color 0.32s ease,
        border-color 0.32s ease,
        box-shadow 0.32s ease,
        /*backdrop-filter 0.32s ease,*/
        transform 0.32s ease;
   /* will-change: transform, padding, background-color;*/
}

.header.header-scrolled {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

.header.header-scrolled .navbar {
    padding: 0.72rem 1.35rem;
    background: rgba(255, 250, 248, 0.74);
    backdrop-filter: blur(18px);
    border-color: rgba(34, 39, 51, 0.10);
    box-shadow: 0 16px 40px rgba(34, 39, 51, 0.12);
    transform: translateY(-0.08rem);
}

.nav-link::after {
    width: 100%;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.32s cubic-bezier(.2,.8,.2,1);
}

.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* ==============================
   FORMULARIO DE CONTACTO
   ============================== */

.contact-section {
    text-align: left;
}

.contact-content {
    width: min(100%, 980px);
    max-width: 980px;
}

.contact-content .section-label,
.contact-content h2,
.contact-content > p {
    text-align: center;
    display: block;
}

.contact-content > p {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.contact-form {
    margin-top: 2.6rem;
    padding: clamp(1.2rem, 3vw, 2rem);
    border: 2px solid #222733;
    border-radius: 2rem;
    background: rgba(255, 250, 248, 0.72);
    box-shadow: 8px 8px 0 #222733;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.form-field {
    display: grid;
    gap: 0.45rem;
    color: #222733;
    font-weight: 800;
}

.form-field span {
    font-size: 0.9rem;
    letter-spacing: 0.03rem;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    border: 2px solid rgba(34, 39, 51, 0.24);
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.82);
    color: #222733;
    font: inherit;
    font-weight: 600;
    padding: 0.95rem 1rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.form-field textarea {
    min-height: 9rem;
    resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: #222733;
    background: #fffaf8;
    box-shadow: 0 0 0 4px rgba(248, 203, 209, 0.55);
}

.form-field-full {
    margin-top: 1rem;
}

.contact-submit {
    margin-top: 1.3rem;
    border: 2px solid #222733;
    cursor: pointer;
    font-family: inherit;
}

@media (max-width: 820px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .contact-form {
        box-shadow: 5px 5px 0 #222733;
    }
}

@media (max-width: 1150px) {
    .header.header-scrolled .navbar {
        transform: none;
    }
}

/* =====================================================
   UPGRADE RESPONSIVE + NAVBAR FULL WIDTH + MENU MOBILE
   ===================================================== */

:root {
    --header-height: 5.9rem;
}

.header {
    top: 0;
    left: 0;
    width: 100%;
    padding: 0;
    z-index: 1000;
}

.navbar {
    width: 100%;
    border-radius: 0 0 2.35rem 2.35rem;
    padding: 1.05rem clamp(1rem, 5vw, 4.5rem);
    background: rgba(255, 250, 248, 0.88);
    border: 0;
    border-bottom: 1px solid rgba(34, 39, 51, 0.08);
    box-shadow: 0 16px 38px rgba(34, 39, 51, 0.08);
    clip-path: polygon(0 0, 100% 0, 100% 78%, 96.5% 100%, 3.5% 100%, 0 78%);
}

.header.header-scrolled {
    padding: 0;
}

.header.header-scrolled .navbar {
    padding-top: 0.72rem;
    padding-bottom: 0.72rem;
    background: rgba(255, 250, 248, 0.68);
    backdrop-filter: blur(20px) saturate(1.25);
    -webkit-backdrop-filter: blur(20px) saturate(1.25);
    box-shadow: 0 18px 45px rgba(34, 39, 51, 0.12);
    transform: translateY(-0.25rem);
    clip-path: polygon(0 0, 100% 0, 100% 74%, 97.4% 100%, 2.6% 100%, 0 74%);
}

.hero,
.about-section,
.support-section,
.services,
.stories-section,
.contact-section {
    min-height: 100dvh;
    min-height: 100svh;
    display: flex;
    align-items: center;
}

.hero,
.about-section,
.support-section,
.services,
.stories-section,
.contact-section {
    padding-top: clamp(7.5rem, 12vh, 9.5rem);
    padding-bottom: clamp(6rem, 10vh, 8rem);
}

.services {
    justify-content: center;
}

.nav-link::after {
    height: 0.22rem;
    bottom: -0.55rem;
    background: linear-gradient(90deg, #F8CBD1, #F9E4E8);
}

.menu-toggle {
    display: none;
    width: 3rem;
    height: 3rem;
    border: 2px solid #222733;
    border-radius: 999px;
    background: #fffaf8;
    cursor: pointer;
    position: relative;
    box-shadow: 4px 4px 0 #222733;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.25s ease;
}

.menu-toggle span {
    position: absolute;
    left: 50%;
    width: 1.15rem;
    height: 0.14rem;
    border-radius: 999px;
    background: #222733;
    transform: translateX(-50%);
    transition: top 0.28s ease, transform 0.28s ease, opacity 0.2s ease, width 0.28s ease;
}

.menu-toggle span:nth-child(1) { top: 0.9rem; }
.menu-toggle span:nth-child(2) { top: 1.38rem; width: 0.78rem; }
.menu-toggle span:nth-child(3) { top: 1.86rem; }

.menu-toggle:hover {
    background: #F8CBD1;
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 #222733;
}

body.nav-open .menu-toggle {
    background: #F8CBD1;
}

body.nav-open .menu-toggle span:nth-child(1) {
    top: 1.38rem;
    transform: translateX(-50%) rotate(45deg);
}

body.nav-open .menu-toggle span:nth-child(2) {
    opacity: 0;
    transform: translateX(-50%) scaleX(0);
}

body.nav-open .menu-toggle span:nth-child(3) {
    top: 1.38rem;
    transform: translateX(-50%) rotate(-45deg);
}

.section-orb {
    position: fixed;
    left: 0;
    top: 0;
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 46% 54% 58% 42% / 45% 45% 55% 55%;
    z-index: 8;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.72), transparent 34%),
        linear-gradient(135deg, rgba(248, 203, 209, 0.74), rgba(248, 203, 209, 0.78));
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 18px 48px rgba(34, 39, 51, 0.14);
    backdrop-filter: blur(5px) saturate(1.2);
    -webkit-backdrop-filter: blur(5px) saturate(1.2);
    mix-blend-mode: multiply;
    will-change: transform, opacity, border-radius;
}

.section-orb span {
    position: absolute;
    inset: 0.72rem;
    border: 1px solid rgba(34, 39, 51, 0.18);
    border-radius: inherit;
}

@keyframes organicOrb {
    0%, 100% { border-radius: 46% 54% 58% 42% / 45% 45% 55% 55%; }
    35% { border-radius: 58% 42% 44% 56% / 50% 58% 42% 50%; }
    70% { border-radius: 42% 58% 52% 48% / 58% 44% 56% 42%; }
}

.section-orb.is-active {
    animation: organicOrb 5.5s ease-in-out infinite;
}

@media (max-width: 980px) {
    :root {
        --header-height: 5.3rem;
    }

    .navbar,
    .header.header-scrolled .navbar {
        flex-direction: row;
        gap: 1rem;
        clip-path: none;
        border-radius: 0 0 1.6rem 1.6rem;
    }

    .logo {
        min-width: auto;
        z-index: 1002;
    }

    .brand-name {
        font-size: 0.88rem;
    }

    .menu-toggle {
        display: inline-flex;
        margin-left: auto;
        z-index: 1002;
    }

    .nav-button {
        display: none;
    }

    .nav-list {
        position: fixed;
        top: 5.2rem;
        left: 4%;
        right: 4%;
        display: grid;
        gap: 0.6rem;
        padding: 1rem;
        border: 2px solid #222733;
        border-radius: 1.5rem;
        background: rgba(255, 250, 248, 0.92);
        box-shadow: 8px 8px 0 #222733;
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-1rem) scale(0.96);
        transform-origin: top right;
        transition: opacity 0.28s ease, visibility 0.28s ease, transform 0.28s cubic-bezier(.2,.8,.2,1);
    }

    body.nav-open .nav-list {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }

    .nav-link {
        width: 100%;
        padding: 0.85rem 1rem;
        border-radius: 1rem;
    }

    .nav-link::after {
        left: 1rem;
        bottom: 0.45rem;
        width: calc(100% - 2rem);
    }

    .hero,
    .about-section,
    .support-section,
    .services,
    .stories-section,
    .contact-section {
        min-height: auto;
        padding-top: 7.2rem;
        padding-bottom: 6rem;
    }

    .hero {
        min-height: 100dvh;
        text-align: center;
        padding-top: 8.5rem;
    }

    .hero-buttons {
        flex-wrap: wrap;
    }

    .section-orb {
        width: 3.25rem;
        height: 3.25rem;
        opacity: 0 !important;
    }
}

@media (max-width: 560px) {
    .navbar,
    .header.header-scrolled .navbar {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    /*.logo-mark {
        font-size: 1.7rem;
    }*/
    .footer-logo{
        width:48px;
    }

    .footer-logo-link{
        gap:.75rem;
    }

    .footer-logo-link h3{
        font-size:1.35rem;
    }

    .footer-brand{
        text-align:left;
    }

    .logo-mark{
        width:42px;
        height:42px;
    }

    .brand-name {
        letter-spacing: 0.08rem;
    }

    .hero,
    .about-section,
    .support-section,
    .services,
    .stories-section,
    .contact-section {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }

    .section-title,
    .contact-content h2 {
        font-size: clamp(2.15rem, 11vw, 3.2rem);
    }

    .services-list {
        gap: 1rem;
    }
}

/* =====================================================
   AJUSTES FINALES PRO: NAV, UNDERLINE, ORB Y MOBILE MENU
   ===================================================== */

/* Navbar scrolled: más limpio, sin cortes cuadrados ni bordecito */
.header.header-scrolled .navbar {
    border: 0;
    border-bottom: 0;
    clip-path: none;
    border-radius: 0 0 clamp(1.65rem, 3vw, 2.65rem) clamp(1.65rem, 3vw, 2.65rem);
    overflow: hidden;
    transform: translateY(-0.55rem);
    background:
        linear-gradient(180deg, rgba(255, 250, 248, 0.78), rgba(255, 250, 248, 0.58));
    backdrop-filter: blur(22px) saturate(1.18);
    -webkit-backdrop-filter: blur(22px) saturate(1.18);
    box-shadow: 0 18px 42px rgba(34, 39, 51, 0.11);
}

.header.header-scrolled .navbar::after {
    content: "";
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(34, 39, 51, 0.08), transparent);
    pointer-events: none;
}

/* Underline del navbar: mismo ancho del texto y gradiente de una sola familia cromática */
.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: max-content;
}

.nav-link::after {
    left: 0;
    right: auto;
    width: 100%;
    height: 0.2rem;
    bottom: -0.52rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #F9E4E8 0%, #98D5C8 52%, #75BFAF 100%);
    box-shadow: 0 4px 12px rgba(232, 166, 176, 0.22);
}

/* Orb más realista y más parecido a una lupa orgánica de resaltado */
.section-orb {
    width: 3.45rem;
    height: 3.45rem;
    border-radius: 47% 53% 56% 44% / 46% 44% 56% 54%;
    background:
        radial-gradient(circle at 32% 27%, rgba(255, 255, 255, 0.94) 0 11%, rgba(255, 255, 255, 0.45) 12% 25%, transparent 45%),
        radial-gradient(circle at 66% 72%, rgba(232, 166, 176, 0.28), transparent 46%),
        linear-gradient(135deg, rgba(248, 203, 209, 0.74), rgba(243, 184, 193, 0.58));
    border: 1px solid rgba(255, 255, 255, 0.68);
    box-shadow:
        inset 0 1px 5px rgba(255, 255, 255, 0.72),
        inset 0 -8px 18px rgba(34, 39, 51, 0.055),
        0 18px 38px rgba(34, 39, 51, 0.13);
    backdrop-filter: blur(6px) saturate(1.24);
    -webkit-backdrop-filter: blur(6px) saturate(1.24);
    mix-blend-mode: multiply;
}

.section-orb::after {
    content: "";
    position: absolute;
    width: 0.72rem;
    height: 0.16rem;
    right: -0.28rem;
    bottom: 0.38rem;
    border-radius: 999px;
    background: rgba(34, 39, 51, 0.22);
    transform: rotate(42deg);
    transform-origin: left center;
    filter: blur(0.2px);
}

.section-orb span {
    inset: 0.55rem;
    border-color: rgba(34, 39, 51, 0.12);
}

@keyframes organicOrb {
    0%, 100% { border-radius: 47% 53% 56% 44% / 46% 44% 56% 54%; transform: translate3d(0, 0, 0) rotate(0.001deg); }
    30% { border-radius: 56% 44% 45% 55% / 48% 58% 42% 52%; transform: translate3d(0.12rem, -0.08rem, 0) rotate(1.5deg); }
    64% { border-radius: 43% 57% 54% 46% / 57% 43% 57% 43%; transform: translate3d(-0.08rem, 0.1rem, 0) rotate(-1deg); }
}

/* Mobile menu: bloquea scroll y oculta/blurrea lo de atrás */
body.nav-open {
    overflow: hidden;
    touch-action: none;
}

body.nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 998;
    background:
        radial-gradient(circle at 18% 18%, rgba(248, 203, 209, 0.34), transparent 34%),
        radial-gradient(circle at 82% 12%, rgba(246, 239, 234, 0.72), transparent 34%),
        rgba(255, 250, 248, 0.86);
    backdrop-filter: blur(16px) saturate(1.08);
    -webkit-backdrop-filter: blur(16px) saturate(1.08);
}

body.nav-open .header {
    z-index: 1100;
}

@media (max-width: 980px) {
    .navbar,
    .header.header-scrolled .navbar,
    body.nav-open .navbar {
        background: rgba(255, 250, 248, 0.88);
        backdrop-filter: blur(20px) saturate(1.14);
        -webkit-backdrop-filter: blur(20px) saturate(1.14);
        border: 0;
        border-radius: 0 0 1.65rem 1.65rem;
        box-shadow: 0 14px 32px rgba(34, 39, 51, 0.10);
        transform: none;
    }

    .nav-list {
        z-index: 1099;
        top: 5.4rem;
        left: 1rem;
        right: 1rem;
        max-height: calc(100dvh - 6.4rem);
        overflow: hidden;
        background:
            linear-gradient(180deg, rgba(255, 250, 248, 0.96), rgba(255, 245, 247, 0.94));
        backdrop-filter: blur(22px) saturate(1.18);
        -webkit-backdrop-filter: blur(22px) saturate(1.18);
        box-shadow:
            8px 8px 0 #222733,
            0 26px 58px rgba(34, 39, 51, 0.18);
    }

    .nav-link {
        width: max-content;
        max-width: 100%;
        padding: 0.85rem 1rem;
    }

    .nav-link::after {
        left: 1rem;
        width: calc(100% - 2rem);
        bottom: 0.42rem;
    }

    body.nav-open .nav-list {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }
}


/* =====================================================
   FIX FINAL: HAMBURGER ESTABLE + BOTÓN PRESIONADO + ORB REAL
   ===================================================== */

/* El botón hamburger abierto se siente presionado: sin sombra negra */
body.nav-open .menu-toggle,
body.nav-open .menu-toggle:hover {
    background: #F8CBD1;
    box-shadow: none;
    transform: translate(4px, 4px);
}

/* Menú mobile más estable: evita que los links queden ocultos por estilos inline */
@media (max-width: 980px) {
    body.nav-open .nav-list {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) scale(1) !important;
    }

    body.nav-open .nav-list .nav-link {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }

    body.nav-open .nav-list li {
        opacity: 1;
        transform: translateY(0);
    }
}

/* La bolita no puede animar transform por CSS porque GSAP usa transform para moverla */
.section-orb {
    z-index: 900;
    opacity: 0;
    transform: translate3d(-100px, -100px, 0);
    filter: saturate(1.08);
}

.section-orb.is-active {
    animation: organicOrbShape 5.8s ease-in-out infinite;
}

@keyframes organicOrbShape {
    0%, 100% {
        border-radius: 47% 53% 56% 44% / 46% 44% 56% 54%;
        filter: saturate(1.08) brightness(1);
    }
    30% {
        border-radius: 56% 44% 45% 55% / 48% 58% 42% 52%;
        filter: saturate(1.14) brightness(1.02);
    }
    64% {
        border-radius: 43% 57% 54% 46% / 57% 43% 57% 43%;
        filter: saturate(1.1) brightness(0.99);
    }
}

/* En pantallas pequeñas la ocultamos para no molestar al menú/touch */
@media (max-width: 760px) {
    .section-orb {
        display: none;
    }
}

/* =====================================================
   AJUSTE FINAL SENIOR v7: HERO, BOTONES, NAV, MOBILE MENU, ORB
   ===================================================== */

/* Hero: nombre + imagen orgánica, evitando botones pegados a la ola */
.hero-content {
    position: relative;
    z-index: 3;
}

.hero-signature-wrap {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(240px, 0.55fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
    width: 100%;
    max-width: 1120px;
    margin-bottom: clamp(2.2rem, 5vw, 4rem);
}

/*2026*/
.hero-title.hero-signature {
    max-width: 720px;
    margin: 0;
    font-size: clamp(3.7rem, 8vw, 7rem);
    line-height: 1.3;
    letter-spacing: -0.075em;

    color: transparent;
    background: linear-gradient(
    180deg,
    #C9929F 0%,
    #222733 100%
);

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.hero-signature span {
    display: block;
}

.hero-portrait {
    justify-self: end;
    width: clamp(220px, 28vw, 360px);
    aspect-ratio: 0.86;
    padding: 0.55rem;
    border: 1px solid rgba(34, 39, 51, 0.10);
    background: rgba(255, 250, 248, 0.62);
    box-shadow: 0 26px 65px rgba(34, 39, 51, 0.14);
    border-radius: 46% 54% 61% 39% / 42% 40% 60% 58%;
    overflow: hidden;
    transform: rotate(1.5deg);
}

.hero-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 42% 58% 56% 44% / 45% 52% 48% 55%;
    filter: saturate(0.95) contrast(0.98);
}

.hero-side {
    position: relative;
    z-index: 4;
    padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
}

.hero-buttons {
    gap: clamp(0.9rem, 2vw, 1.4rem);
    row-gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

.hero-buttons .btn {
    margin-top: 0.35rem;
}

.wave {
    z-index: 1;
}

/* Botones: estado presionado real y consistente */
.nav-button,
.btn,
.menu-toggle {
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.nav-button.is-pressed,
.btn.is-pressed,
.menu-toggle.is-pressed,
.nav-button:active,
.btn:active,
.menu-toggle:active {
    transform: translate(5px, 5px);
    box-shadow: none !important;
    background: #fffaf8;
}

/* Navbar underline: ancho exacto del texto, gradiente misma familia verde */
.nav-link {
    width: max-content;
    isolation: isolate;
}

.nav-link::after {
    left: 50% !important;
    right: auto !important;
    bottom: -0.52rem;
    width: 100% !important;
    max-width: 100%;
    height: 0.22rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #F8CBD1 0%, #F3B8C1 55%, #E8A6B0 100%) !important;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    opacity: 0;
    transition: transform 0.32s cubic-bezier(.2,.8,.2,1), opacity 0.22s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    transform: translateX(-50%) scaleX(1);
    opacity: 1;
}

/* Menú mobile estable: visible siempre al abrir, sin depender de scroll */
@media (max-width: 980px) {
    body.nav-open {
        overflow: hidden;
        height: 100dvh;
        touch-action: none;
    }

    body.nav-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 998;
        background:
            radial-gradient(circle at 18% 15%, rgba(248, 203, 209, 0.42), transparent 32%),
            radial-gradient(circle at 82% 10%, rgba(246, 239, 234, 0.72), transparent 34%),
            rgba(255, 250, 248, 0.78);
        backdrop-filter: blur(18px) saturate(1.12);
        -webkit-backdrop-filter: blur(18px) saturate(1.12);
    }

    .header,
    body.nav-open .header {
        z-index: 1200;
    }

    .navbar,
    .header.header-scrolled .navbar,
    body.nav-open .navbar {
        position: relative;
        z-index: 1201;
    }

    .menu-toggle {
        z-index: 1203;
    }

    body.nav-open .menu-toggle,
    body.nav-open .menu-toggle:hover {
        box-shadow: none !important;
        transform: translate(4px, 4px);
        background: #F8CBD1;
    }

    .nav-list {
        position: fixed !important;
        top: calc(var(--header-height, 5.3rem) + 0.85rem) !important;
        left: 1rem !important;
        right: 1rem !important;
        z-index: 1202 !important;
        display: grid !important;
        grid-auto-rows: max-content;
        gap: 0.55rem;
        max-height: calc(100dvh - 7rem);
        overflow: hidden !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-0.9rem) scale(0.97);
        background:
            linear-gradient(180deg, rgba(255, 250, 248, 0.98), rgba(255, 242, 245, 0.96));
        border: 0;
        border-radius: 1.6rem;
        box-shadow: 0 28px 70px rgba(34, 39, 51, 0.18);
        padding: 1rem;
    }

    body.nav-open .nav-list {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) scale(1) !important;
    }

    .nav-list li,
    .nav-list .nav-link,
    body.nav-open .nav-list li,
    body.nav-open .nav-list .nav-link {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .nav-list .nav-link {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        width: max-content;
        max-width: 100%;
        padding: 0.85rem 1rem;
        border-radius: 1rem;
        font-size: clamp(1.05rem, 4.6vw, 1.4rem);
    }

    .nav-list .nav-link::after {
        bottom: 0.48rem;
        left: 50% !important;
        width: calc(100% - 2rem) !important;
    }

    .hero-signature-wrap {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1.6rem;
        margin-bottom: 1.8rem;
    }

    .home-page .hero-title.hero-signature {
        margin-inline: auto;
        max-width: 22rem;
        font-size: clamp(1.9rem, 8vw, 2.55rem);
        line-height: 1.18;
        letter-spacing: -0.045em;
    }

    .hero-portrait {
        justify-self: center;
        width: min(68vw, 290px);
        order: -1;
    }

    .hero-side {
        padding-bottom: 5.8rem;
    }

    .hero-buttons {
        justify-content: center;
        flex-direction: column;
    }

    .hero-buttons .btn {
        width: min(100%, 22rem);
    }
}

@media (max-width: 520px) {
    .hero {
        padding-top: 7.8rem;
    }

    .hero-text {
        font-size: 1.04rem;
        line-height: 1.65;
    }

    .hero-buttons .btn {
        padding: 0.92rem 1.25rem;
        font-size: 0.95rem;
    }

    .nav-list {
        top: 5.65rem !important;
    }
}

/* Orb: más realista, visible y no conflictúa con GSAP */
.section-orb {
    width: clamp(3.2rem, 5vw, 4.5rem);
    height: clamp(3.2rem, 5vw, 4.5rem);
    z-index: 18;
    background:
        radial-gradient(circle at 34% 28%, rgba(255,255,255,0.78), transparent 26%),
        radial-gradient(circle at 66% 76%, rgba(232, 166, 176, 0.28), transparent 38%),
        linear-gradient(135deg, rgba(248, 203, 209, 0.82), rgba(243, 184, 193, 0.62));
    box-shadow:
        inset 8px 10px 18px rgba(255,255,255,0.38),
        inset -10px -12px 20px rgba(34,39,51,0.06),
        0 18px 46px rgba(34,39,51,0.12);
    border: 1px solid rgba(255,255,255,0.62);
    mix-blend-mode: multiply;
    backdrop-filter: blur(3px) saturate(1.18);
    -webkit-backdrop-filter: blur(3px) saturate(1.18);
}


/* =====================================================
   FINAL FIX: NAVBAR ORGÁNICO + MENÚ MOBILE ESTABLE
   ===================================================== */

.navbar,
.header.header-scrolled .navbar {
    clip-path: none !important;
    border-radius: 0 0 clamp(1.55rem, 3vw, 2.65rem) clamp(1.55rem, 3vw, 2.65rem) !important;
    overflow: visible;
}

.navbar::before,
.header.header-scrolled .navbar::before {
    content: "";
    position: absolute;
    left: clamp(1.25rem, 5vw, 4.2rem);
    right: clamp(1.25rem, 5vw, 4.2rem);
    bottom: -0.03rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(34, 39, 51, 0.08), transparent);
    pointer-events: none;
}

.header.header-scrolled .navbar {
    transform: translateY(-0.18rem) !important;
    background: rgba(255, 250, 248, 0.72) !important;
    box-shadow: 0 18px 42px rgba(34, 39, 51, 0.10) !important;
}

.nav-link::after,
.nav-list .nav-link::after {
    height: 0.22rem !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #F8CBD1 0%, #F3B8C1 55%, #E8A6B0 100%) !important;
    transform-origin: center !important;
}

.nav-button.is-pressed,
.btn.is-pressed,
.menu-toggle.is-pressed,
.scroll-top-button.is-pressed,
.nav-button:active,
.btn:active,
.menu-toggle:active,
.scroll-top-button:active {
    transform: translate(5px, 5px) !important;
    box-shadow: none !important;
    background-color: #F8CBD1 !important;
    color: #222733 !important;
}

body.nav-open .menu-toggle,
body.nav-open .menu-toggle:hover,
body.nav-open .menu-toggle:active {
    box-shadow: none !important;
    transform: translate(4px, 4px) !important;
    background-color: #F8CBD1 !important;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1rem, 2.3vw, 1.55rem) !important;
    align-items: center;
}

.hero-buttons .btn {
    margin: 0 !important;
}

@media (max-width: 980px) {
    body.nav-open {
        overflow: hidden !important;
        height: 100dvh;
        touch-action: none;
    }

    body.nav-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 1190;
        background:
            radial-gradient(circle at 20% 16%, rgba(248, 203, 209, 0.44), transparent 35%),
            radial-gradient(circle at 82% 14%, rgba(246, 239, 234, 0.72), transparent 36%),
            rgba(255, 250, 248, 0.88);
        backdrop-filter: blur(20px) saturate(1.12);
        -webkit-backdrop-filter: blur(20px) saturate(1.12);
        pointer-events: none;
    }

    .header,
    body.nav-open .header {
        z-index: 1300 !important;
    }

    .navbar,
    .header.header-scrolled .navbar,
    body.nav-open .navbar {
        position: relative;
        z-index: 1301 !important;
        border-radius: 0 0 1.55rem 1.55rem !important;
        background: rgba(255, 250, 248, 0.88) !important;
        backdrop-filter: blur(18px) saturate(1.12);
        -webkit-backdrop-filter: blur(18px) saturate(1.12);
    }

    .menu-toggle {
        display: inline-flex !important;
        z-index: 1304 !important;
        background: #fffaf8;
    }

    .nav-list {
        position: fixed !important;
        top: calc(var(--header-height, 5.3rem) + 0.9rem) !important;
        left: 1rem !important;
        right: 1rem !important;
        z-index: 1303 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.45rem !important;
        width: auto !important;
        max-height: calc(100dvh - 7.2rem) !important;
        overflow: hidden !important;
        padding: 1.05rem !important;
        border: 0 !important;
        border-radius: 1.55rem !important;
        background:
            linear-gradient(180deg, rgba(255, 250, 248, 0.98), rgba(255, 241, 244, 0.96)) !important;
        box-shadow: 0 26px 70px rgba(34, 39, 51, 0.18) !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-0.9rem) scale(0.97);
        transition:
            opacity 0.28s ease,
            visibility 0.28s ease,
            transform 0.32s cubic-bezier(.2,.8,.2,1);
    }

    body.nav-open .nav-list {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) scale(1) !important;
    }

    .nav-list li,
    .nav-list .nav-link,
    body.nav-open .nav-list li,
    body.nav-open .nav-list .nav-link {
        opacity: 1 !important;
        visibility: visible !important;
        display: inline-flex !important;
    }

    .nav-list .nav-link {
        position: relative;
        width: max-content !important;
        max-width: 100% !important;
        padding: 0.88rem 1rem !important;
        border-radius: 1rem !important;
        font-size: clamp(1.08rem, 4.6vw, 1.42rem) !important;
        color: #222733 !important;
    }

    .nav-list .nav-link::after {
        left: 1rem !important;
        right: auto !important;
        bottom: 0.42rem !important;
        width: calc(100% - 2rem) !important;
        transform: scaleX(0) !important;
        transform-origin: left center !important;
    }

    .nav-list .nav-link:hover::after,
    .nav-list .nav-link.active::after {
        transform: scaleX(1) !important;
        opacity: 1 !important;
    }
}


/* =====================================================
   FIX: NAVEGACIÓN CONSISTENTE Y ANCLAJES EXACTOS
   ===================================================== */

main section[id] {
    scroll-margin-top: calc(var(--header-height, 5.9rem) + 1rem);
}

.nav-list .nav-link {
    position: relative;
}

.nav-list .nav-link::after {
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: scaleX(0) !important;
    transform-origin: left center !important;
    transition: transform 0.32s cubic-bezier(.22, 1, .36, 1), opacity 0.28s ease !important;
    opacity: 0 !important;
}

.nav-list .nav-link:hover::after,
.nav-list .nav-link.active::after {
    transform: scaleX(1) !important;
    opacity: 1 !important;
}

/* =====================================================
   FINAL FIX: MODAL REFLEXIVO + NAV ACTIVO + BOTONES
   ===================================================== */

.nav-list .nav-link.active,
.nav-list .nav-link[aria-current="page"] {
    color: #222733 !important;
    opacity: 1 !important;
}

.nav-list .nav-link.active::after,
.nav-list .nav-link[aria-current="page"]::after {
    transform: scaleX(1) !important;
    opacity: 1 !important;
}

.nav-button:hover,
.btn:hover {
    transform: none !important;
    box-shadow: 6px 6px 0 #222733 !important;
}

.nav-button.is-pressed,
.btn.is-pressed,
.menu-toggle.is-pressed,
.scroll-top-button.is-pressed,
.nav-button:active,
.btn:active,
.menu-toggle:active,
.scroll-top-button:active {
    transform: translate(4px, 4px) !important;
    box-shadow: none !important;
    background: #F8CBD1 !important;
    background-color: #F8CBD1 !important;
    color: #222733 !important;
}

body.nav-open .menu-toggle,
body.nav-open .menu-toggle:hover,
body.nav-open .menu-toggle:active,
body.nav-open .menu-toggle.is-pressed {
    transform: translate(4px, 4px) !important;
    box-shadow: none !important;
    background: #F8CBD1 !important;
    background-color: #F8CBD1 !important;
}



body.reflection-open {
    overflow: hidden;
}

@media (max-width: 680px) {
    .reflection-modal__card {
        border-radius: 1.6rem 1.6rem 2.4rem 1.25rem;
        box-shadow: 7px 7px 0 #222733, 0 22px 60px rgba(34, 39, 51, 0.15);
    }

    .reflection-modal__card h2 {
        max-width: 10.8ch;
    }
}


/* =====================================================
   AJUSTE FINAL DE PALETA: BOTONES ROSA + FONDOS SUAVES
   ===================================================== */

.nav-button,
.btn,
.reflection-modal__close {
    background: #F8CBD1 !important;
    background-color: #F8CBD1 !important;
    color: #222733 !important;
}

.menu-toggle {
    background: #fffaf8 !important;
}

.nav-button:hover,
.btn:hover,
.scroll-top-button:hover,
.reflection-modal__close:hover,
.menu-toggle:hover {
    background: #F3B8C1 !important;
    background-color: #F3B8C1 !important;
}

.nav-button:active,
.btn:active,
.scroll-top-button:active,
.reflection-modal__close:active,
.menu-toggle:active,
.nav-button.is-pressed,
.btn.is-pressed,
.scroll-top-button.is-pressed,
.menu-toggle.is-pressed {
    background: #E8A6B0 !important;
    background-color: #E8A6B0 !important;
    color: #222733 !important;
}

body.nav-open .menu-toggle,
body.nav-open .menu-toggle:hover,
body.nav-open .menu-toggle:active,
body.nav-open .menu-toggle.is-pressed {
    background: #E8A6B0 !important;
    background-color: #E8A6B0 !important;
}

.contact-section {
    background: #F6EFEA !important;
}

.wave-green {
    color: #F6EFEA !important;
}

.nav-link::after,
.nav-list .nav-link::after {
    background: linear-gradient(90deg, #F8CBD1 0%, #F3B8C1 55%, #E8A6B0 100%) !important;
    box-shadow: 0 4px 12px rgba(232, 166, 176, 0.22) !important;
}

.section-orb {
    background:
        radial-gradient(circle at 34% 28%, rgba(255,255,255,0.78), transparent 26%),
        radial-gradient(circle at 66% 76%, rgba(232, 166, 176, 0.28), transparent 38%),
        linear-gradient(135deg, rgba(248, 203, 209, 0.82), rgba(243, 184, 193, 0.62)) !important;
}


/*to avoid any button move up when hover it*/
.nav-button:hover,
.btn:hover,
.btn-secondary:hover,
.scroll-top-button:hover,
.reflection-modal__close:hover,
.menu-toggle:hover {
    transform: none !important;
}

/* =====================================================
   SENIOR FIX v9: HERO, BOTONES SIN SALTO, WHATSAPP Y FORM
   ===================================================== */

:root {
    --ink: #222733;
    --soft-bg: #fffaf8;
    --rose: #F8CBD1;
    --rose-hover: #F3B8C1;
    --rose-pressed: #E8A6B0;
    --beige: #F6EFEA;
    --beige-strong: #EFE4DC;
}

/* Quita definitivamente la animación fea de subir en hover */
.nav-button:hover,
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.scroll-top-button:hover,
.reflection-modal__close:hover,
.menu-toggle:hover {
    transform: none !important;
}

.nav-button,
.btn,
.scroll-top-button,
.reflection-modal__close,
.menu-toggle {
    transition: background-color 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease, color 0.24s ease, opacity 0.24s ease !important;
}

.btn-primary,
.nav-button,
.contact-submit {
    background: var(--rose) !important;
    background-color: var(--rose) !important;
    border-color: var(--ink) !important;
    color: var(--ink) !important;
}

.btn-primary:hover,
.nav-button:hover,
.contact-submit:hover {
    background: var(--rose-hover) !important;
    background-color: var(--rose-hover) !important;
    box-shadow: 5px 5px 0 rgba(34, 39, 51, 0.92) !important;
}

.btn-secondary {
    background: rgba(246, 239, 234, 0.56) !important;
    background-color: rgba(246, 239, 234, 0.56) !important;

    border: 2px solid #222733 !important;

    color: #222733 !important;

    box-shadow: 5px 5px 0 #222733 !important;

    backdrop-filter: blur(10px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
}

.btn-secondary:hover {
    background: rgba(248, 203, 209, 0.20) !important;
    background-color: rgba(248, 203, 209, 0.20) !important;

    border: 2px solid #222733 !important;
    border-color: #222733 !important;

    box-shadow: 5px 5px 0 rgba(34, 39, 51, 0.82) !important;
}

.nav-button:active,
.btn:active,
.btn-primary:active,
.btn-secondary:active,
.hero-cta-secondary:active,
.contact-submit:active,
.nav-button.is-pressed,
.btn.is-pressed,
.btn-secondary.is-pressed,
.hero-cta-secondary.is-pressed,
.contact-submit.is-pressed {
    transform: translate(4px, 4px) !important;
    box-shadow: none !important;
    background: var(--rose-pressed) !important;
    background-color: var(--rose-pressed) !important;
}

/* Spinner circular dentro de botones tipo Windows/Linux */
.btn.is-loading,
.nav-button.is-loading,
.contact-submit.is-loading {
    pointer-events: none;
    opacity: 0.92;
}

.btn.is-loading::before,
.nav-button.is-loading::before,
.contact-submit.is-loading::before {
    content: "";
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 999px;
    border: 2px solid rgba(34, 39, 51, 0.25);
    border-top-color: var(--ink);
    animation: buttonSpinner 0.72s linear infinite;
}

.btn.is-loading::after,
.nav-button.is-loading::after,
.contact-submit.is-loading::after {
    content: "" !important;
}

@keyframes buttonSpinner {
    to { transform: rotate(360deg); }
}

/* Hero más senior: columna derecha siempre controlada */
.hero-content {
    width: min(100%, 1180px) !important;
    max-width: 1180px !important;
    margin-inline: auto !important;
}

.hero-signature-wrap {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 0.48fr) !important;
    align-items: center !important;
}

.hero-portrait {
    justify-self: end !important;
    transform: rotate(1.5deg);
    box-shadow: 0 30px 80px rgba(34, 39, 51, 0.16), 0 0 0 1px rgba(255,255,255,0.45) inset !important;
}

.hero-side {
    width: min(100%, 680px) !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    text-align: left !important;
}

.hero-text {
    max-width: 36rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.hero-buttons {
    justify-content: flex-start !important;
    align-items: center !important;
}

/* La curva del hero cae sobre la foto de la sección siguiente, sin corte recto feo */
.hero .wave {
    z-index: 8 !important;
    height: clamp(5rem, 9vw, 8.5rem) !important;
}

.about-section {
    margin-top: -1px;
    background-position: center top !important;
}


.about-content {
    position: relative;
    z-index: 2;
}

/* Lista premium: blanco con profundidad real, sin perder el estilo */
.support-list {
    gap: 1.05rem !important;
}

.support-list p {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(255, 250, 248, 0.92), rgba(255, 244, 246, 0.78)) !important;
    border: 1px solid rgba(255, 255, 255, 0.78);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        inset 0 -14px 28px rgba(232, 166, 176, 0.055),
        0 18px 42px rgba(34, 39, 51, 0.075);
    backdrop-filter: blur(10px) saturate(1.08);
    -webkit-backdrop-filter: blur(10px) saturate(1.08);
}

.support-list p::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.35rem;
    background: linear-gradient(180deg, var(--rose), var(--rose-pressed));
    border-radius: 999px;
}

/* Form más parecido al bloque premium del proyecto de referencia */
.contact-form {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 12%, rgba(248, 203, 209, 0.24), transparent 36%),
        linear-gradient(145deg, rgba(255,250,248,0.88), rgba(246,239,234,0.78)) !important;
    border: 1px solid rgba(34, 39, 51, 0.16) !important;
    box-shadow:
        9px 9px 0 rgba(34, 39, 51, 0.90),
        0 28px 80px rgba(34, 39, 51, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.70) !important;
    backdrop-filter: blur(14px) saturate(1.08);
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
}

.contact-form::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(255,255,255,0.36), transparent 30%, rgba(248,203,209,0.12));
}

.contact-form > * {
    position: relative;
    z-index: 1;
}

.form-field input,
.form-field select,
.form-field textarea {
    background: rgba(255, 255, 255, 0.76) !important;
    border-color: rgba(34, 39, 51, 0.18) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--rose-pressed) !important;
    box-shadow: 0 0 0 4px rgba(248, 203, 209, 0.44), inset 0 1px 0 rgba(255,255,255,0.72) !important;
}


.form-status.is-success { color: #3d6f63; }
.form-status.is-error { color: #9b4e5a; }

@media (max-width: 980px) {
    .hero-signature-wrap {
        grid-template-columns: 1fr !important;
    }

    .hero-portrait {
        justify-self: center !important;
    }

    .hero-side {
        margin-inline: auto !important;
        text-align: center !important;
    }

    .hero-text {
        margin-inline: auto !important;
    }

    .hero-buttons {
        justify-content: center !important;
    }
}



/* =====================================================
   CORRECCIÓN FINAL v10: HERO, CURVA SOBRE FOTO, FORM TOAST
   ===================================================== */

/* Nunca más salto hacia arriba en hover */
.nav-button:hover,
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.hero-buttons .btn:hover,
.scroll-top-button:hover,
.reflection-modal__close:hover,
.menu-toggle:hover,
.contact-submit:hover {
    transform: none !important;
}

/* Los botones del hero siempre visibles y alineados con la columna derecha */
.hero-content {
    display: block !important;
}

.hero-signature-wrap {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.48fr) !important;
    align-items: center !important;
}

.hero-portrait {
    justify-self: end !important;
    opacity: 1;
    visibility: visible;
    will-change: transform, opacity, filter, clip-path;
}

.hero-side {
    width: min(100%, 680px) !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    text-align: left !important;
    opacity: 1;
    visibility: visible;
}

.hero-text {
    max-width: 36rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.hero-buttons {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: clamp(1rem, 2.3vw, 1.55rem) !important;
    flex-wrap: wrap !important;
    opacity: 1;
    visibility: visible;
}

.hero-buttons .btn {
    display: inline-flex !important;
    opacity: 1;
    visibility: visible;
}

/* Botón secundario: beige/glass, borde rosado, no pesado */
.hero-cta-secondary,
.btn-secondary {
    background: rgba(246, 239, 234, 0.72) !important;
    background-color: rgba(246, 239, 234, 0.72) !important;
    border: 2px solid rgba(243, 184, 193, 0.92) !important;
    color: var(--ink, #222733) !important;
    box-shadow: 5px 5px 0 #222733 !important;
    backdrop-filter: blur(12px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.08) !important;
}

.hero-cta-secondary:hover,
.btn-secondary:hover {
    background: rgba(255, 250, 248, 0.82) !important;
    background-color: rgba(255, 250, 248, 0.82) !important;

    border-color: #222733 !important;

    box-shadow: 5px 5px 0 #222733 !important;

    transform: none !important;
}
/* La sección de la foto toma una curva real en la parte superior */
.hero .wave {
    display: none !important;
}

.hero .wave {
    display: none !important;
}

.about-section {
    margin-top: -6rem !important;
    padding-top: calc(clamp(7.5rem, 12vh, 9.5rem) + 6rem) !important;

    overflow: hidden !important;
    isolation: isolate;
    background-position: center top !important;

    clip-path: none !important;
}

.about-section::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 6.5rem;
    z-index: 1;
    background: #fffaf8;
    clip-path: polygon(
        0 0,
        100% 0,
        100% 38%,
        90% 45%,
        78% 49%,
        66% 47%,
        54% 40%,
        42% 35%,
        30% 34%,
        18% 39%,
        8% 45%,
        0 50%
    );
    pointer-events: none;
}



/* Tarjetas blancas del acompañamiento: más premium, pero sutiles */
.support-list p {
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.95), transparent 30%),
        linear-gradient(145deg, rgba(255, 250, 248, 0.96), rgba(255, 244, 246, 0.82)) !important;
    border: 1px solid rgba(255, 255, 255, 0.88) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        inset 0 -16px 30px rgba(232, 166, 176, 0.05),
        0 16px 38px rgba(34, 39, 51, 0.075) !important;
}

/* Mensaje del formulario como toast flotante, no dentro visualmente del form */
.form-status {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) scale(0.98) !important;
    z-index: 250000 !important;
    width: min(92vw, 540px) !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 1rem 1.25rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(34, 39, 51, 0.12) !important;
    background:
        radial-gradient(circle at 18% 20%, rgba(255,255,255,0.86), transparent 36%),
        linear-gradient(135deg, rgba(255, 250, 248, 0.96), rgba(255, 241, 244, 0.94)) !important;
    box-shadow: 0 24px 70px rgba(34, 39, 51, 0.14), inset 0 1px 0 rgba(255,255,255,0.72) !important;
    color: #222733 !important;
    font-weight: 800 !important;
    text-align: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.28s ease, visibility 0.28s ease, transform 0.34s cubic-bezier(.22, 1, .36, 1) !important;
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
}


.form-status.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, -50%) scale(1) !important;
    pointer-events: auto;
}



.form-status.is-success,
.form-status.is-error {
    color: #222733 !important;
}

.form-status.is-success::before,
.form-status.is-error::before {
    display: inline-flex;
    margin-right: 0.45rem;
}

.form-status.is-success::before { content: "✓"; color: #C77E8A; }
.form-status.is-error::before { content: "!"; color: #C77E8A; }

/* Botón enviar y WhatsApp con spinner circular elegante */
.btn.is-loading,
.nav-button.is-loading,
.contact-submit.is-loading {
    gap: 0.72rem !important;
    pointer-events: none;
    opacity: 0.92;
}

.btn.is-loading::before,
.nav-button.is-loading::before,
.contact-submit.is-loading::before {
    content: "";
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    border: 2px solid rgba(34, 39, 51, 0.22);
    border-top-color: #222733;
    animation: buttonSpinner 0.72s linear infinite;
}

.btn.is-loading::after,
.nav-button.is-loading::after,
.contact-submit.is-loading::after {
    content: "" !important;
}

@media (max-width: 980px) {
    .hero-signature-wrap {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }

    .hero-portrait {
        justify-self: center !important;
    }

    .hero-side {
        margin-inline: auto !important;
        text-align: center !important;
    }

    .hero-text {
        margin-inline: auto !important;
    }

    .hero-buttons {
        justify-content: center !important;
    }

    .about-section {
        clip-path: polygon(
            0 4.4rem,
            20% 4rem,
            45% 3.7rem,
            70% 4.15rem,
            100% 3.85rem,
            100% 100%,
            0 100%
        ) !important;
        padding-top: 8rem !important;
    }
}


/* =====================================================
   AJUSTE FINAL v11: CURVA REAL, BOTONES HERO, TOAST Y FOOTER
   ===================================================== */

/* Botones del hero restaurados, visibles y sin salto en hover */
.hero-buttons,
.hero-buttons .btn,
.hero-cta-primary,
.hero-cta-secondary {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.hero-buttons {
    width: min(100%, 680px) !important;
    margin-top: 2rem;
    margin-left: auto !important;
    margin-right: 0 !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: clamp(1rem, 2.2vw, 1.5rem) !important;
}

.hero-buttons .btn:hover,
.hero-buttons .btn:focus,
.hero-buttons .btn:focus-visible,
.nav-button:hover,
.btn:hover,
.btn-secondary:hover,
.contact-submit:hover,
.scroll-top-button:hover,
.menu-toggle:hover,
.reflection-modal__close:hover {
    transform: none !important;
}

.hero-cta-secondary,
.btn-secondary {
    background: rgba(246, 239, 234, 0.74) !important;
    background-color: rgba(246, 239, 234, 0.74) !important;
    border: 2px solid #222733 !important;
    color: #222733 !important;
}

.hero-cta-secondary:hover,
.btn-secondary:hover {
    background: rgba(255, 250, 248, 0.82) !important;
    background-color: rgba(255, 250, 248, 0.82) !important;

    border-color: #222733 !important;

    box-shadow: 5px 5px 0 #222733 !important;

    transform: none !important;
}

/* Curva de la segunda sección: la imagen empieza casi justo debajo del hero */
.hero .wave {
    display: none !important;
}

.about-section{
    margin-top:-1px !important;
    padding:8rem 5% !important;
    background:#F6EFEA !important;
    clip-path:none !important;
    display:flex;
    align-items:center;
}

.about-section::before{
    content:none !important;
    display:none !important;
}

.about-section::after{
    content:none !important;
    display:none !important;
}

/* Quita el bordecito rosado de la izquierda en las tarjetas del acompañamiento */
.support-list p::before {
    display: none !important;
    content: none !important;
}

.support-list p {
    border-left: 1px solid rgba(255,255,255,0.88) !important;
    background:
        radial-gradient(circle at 14% 20%, rgba(255,255,255,0.95), transparent 32%),
        linear-gradient(145deg, rgba(255,250,248,0.97), rgba(255,244,246,0.84)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.86),
        inset 0 -14px 30px rgba(232,166,176,0.045),
        0 18px 44px rgba(34,39,51,0.075) !important;
}

/* Toast del formulario más profesional y más senior */
.form-status {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    bottom: auto !important;
    z-index: 250000 !important;
    width: min(92vw, 610px) !important;
    margin: 0 !important;
    padding: 1.05rem 1.35rem 1.05rem 1.15rem !important;
    border-radius: 1.35rem !important;
    border: 1px solid rgba(34,39,51,0.12) !important;
    background:
        radial-gradient(circle at 16% 12%, rgba(255,255,255,0.92), transparent 34%),
        linear-gradient(135deg, rgba(255,250,248,0.98), rgba(255,242,245,0.96)) !important;
    box-shadow:
        0 26px 80px rgba(34,39,51,0.16),
        inset 0 1px 0 rgba(255,255,255,0.78) !important;
    color: #222733 !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em !important;
    text-align: left !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate(-50%, -50%) scale(0.985) !important;
    transition:
        opacity 0.42s ease,
        visibility 0.42s ease,
        transform 0.52s cubic-bezier(.22, 1, .36, 1) !important;
}

.form-status.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

.form-status::before {
    display: inline-grid !important;
    place-items: center !important;
    width: 2rem !important;
    height: 2rem !important;
    margin-right: 0.7rem !important;
    border-radius: 999px !important;
    background: rgba(248,203,209,0.52) !important;
    color: #222733 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7) !important;
    vertical-align: middle !important;
}

.form-status.is-success::before {
    content: "✓" !important;
}

.form-status.is-error::before {
    content: "!" !important;
}

.form-status:not(.is-success):not(.is-error)::before {
    content: "" !important;
    border: 2px solid rgba(34,39,51,0.18) !important;
    border-top-color: #222733 !important;
    background: transparent !important;
    animation: buttonSpinner 0.72s linear infinite !important;
}


@keyframes toastSheen {
    to { transform: translateX(120%); }
}

/* Footer con más enlaces: separación más cómoda */
.footer-column a {
    margin-bottom: 0.72rem !important;
}

@media (max-width: 980px) {
    .hero-buttons {
        margin-inline: auto !important;
        justify-content: center !important;
    }

    .about-section {
        margin-top: -1.6rem !important;
        padding-top: 7.2rem !important;
        clip-path: polygon(
            0 2.15rem,
            18% 1.8rem,
            42% 1.6rem,
            70% 1.95rem,
            100% 1.72rem,
            100% 100%,
            0 100%
        ) !important;
    }
}


.hero-accent-word {
    font-family: 'Lora', serif;
    font-style: italic;
    font-weight: 600;

    background: linear-gradient(
        180deg,
        #D88D99 0%,
        #C77E8A 45%,
        #B86E7B 100%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    text-shadow:
        0.5px 0.5px 0 rgba(34, 39, 51, 0.18),
        1px 1px 2px rgba(34, 39, 51, 0.12);

    letter-spacing: 0.01em;
}


.btn-icon{
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.nav-button:hover .btn-icon{
    transform: translateX(2px); 
    transition: transform 0.25s ease; 
}

.form-field.is-invalid input,
.form-field.is-invalid select,
.form-field.is-invalid textarea {
    border-color: rgba(180, 60, 60, 0.75);
    box-shadow: 0 0 0 4px rgba(180, 60, 60, 0.10);
}


/* quitar resaltado azul mobile */
* {
    -webkit-tap-highlight-color: transparent;
}

/* quitar outline azul */
input:focus,
textarea:focus,
select:focus,
button:focus,
a:focus {
    outline: none;
}

/* mantener estilo visual pro */
input:focus,
textarea:focus,
select:focus {
    border-color: rgba(255,255,255,0.18);
    box-shadow: 0 0 0 4px rgba(255,255,255,0.05);
}

/* ================================
   Sección Mi libro
   ================================ */

.book-section {
    position: relative;
    overflow: hidden;
    padding: 7rem 8%;
    background: #fffaf8;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 4rem;
}

.book-content {
    max-width: 620px;
    position: relative;
    z-index: 2;
}

.book-content p {
    font-size: 1.08rem;
    line-height: 1.9;
    color: #5f5a5a;
    margin-bottom: 1.3rem;
}

.book-image {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
}

.book-image img {
    width: min(330px, 80%);
    border-radius: 18px;
    box-shadow: 0 28px 70px rgba(34, 39, 51, 0.22);
    transform: rotate(2deg);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.book-image img:hover {
    transform: rotate(0deg) translateY(-8px);
    box-shadow: 0 34px 90px rgba(34, 39, 51, 0.28);
}

@media (max-width: 850px) {
    .book-section {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 6rem 6%;
        gap: 3rem;
    }

    .book-content {
        margin: 0 auto;
    }

    .book-image img {
        width: min(280px, 82%);
    }
}


/* ================================
   Historias reales
   ================================ */

.stories-list {
    width: min(1080px, 100%);
    margin: 3rem auto 2.2rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
}

.story-card {
    background: rgba(255, 255, 255, 0.54);
    border: 1px solid rgba(34, 39, 51, 0.08);
    border-radius: 28px;
    padding: 2rem;
    text-align: left;
    box-shadow: 0 20px 45px rgba(34, 39, 51, 0.08);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.story-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 65px rgba(34, 39, 51, 0.13);
}

.story-card span {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #b9858f;
    font-weight: 700;
}

.story-card h3 {
    margin-bottom: 0.9rem;
    color: #222733;
    font-size: 1.25rem;
}

.story-card p {
    color: #6d6667;
    line-height: 1.8;
}

@media (max-width: 900px) {
    .stories-list {
        grid-template-columns: 1fr;
    }

    .story-card {
        text-align: center;
    }
}


/* =====================================================
   UPGRADE VISUAL FINAL - CALMA, PROFESIONAL Y ORGÁNICO
   ===================================================== */

html {
    background: #fffaf8;
}

body {
    background:
        radial-gradient(circle at 12% 8%, rgba(248, 203, 209, 0.32), transparent 28rem),
        radial-gradient(circle at 88% 18%, rgba(190, 227, 219, 0.34), transparent 26rem),
        #fffaf8;
}

.hero {
    background:
        linear-gradient(120deg, rgba(255, 250, 248, 0.92), rgba(255, 250, 248, 0.74)),
        url("../images/hero.jpg");
    background-size: cover;
    background-position: center;
}

.hero-portrait {
    animation: softFloat 7s ease-in-out infinite;
}

@keyframes softFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-14px) rotate(1.2deg);
    }
}

.btn,
.nav-button,
.scroll-top-button {
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        background-color 0.22s ease,
        filter 0.22s ease;
}

.btn:hover,
.nav-button:hover,
.scroll-top-button:hover {
    filter: brightness(1.03);
}

.service-card,
.story-card,
.contact-form,
.book-image img {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.service-card,
.story-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,250,248,0.58));
    border: 1px solid rgba(34, 39, 51, 0.08);
}

.service-card:hover,
.story-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 70px rgba(34, 39, 51, 0.13);
}

.support-list p {
    border: 1px solid rgba(34, 39, 51, 0.08);
    box-shadow: 0 14px 34px rgba(34, 39, 51, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.support-list p:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px rgba(34, 39, 51, 0.11);
}

.section-title {
    text-wrap: balance;
}

.hero-text,
.about-content p,
.support-content p,
.book-content p,
.stories-content p,
.contact-content p {
    text-wrap: pretty;
}

.footer-phrase {
    margin-top: 1.5rem;
    font-style: italic;
    opacity: 0.82;
    line-height: 1.8;
    max-width: 340px;
}

/* Microdetalle elegante en títulos */

.section-title::after {
    content: "";
    display: block;
    width: 4.4rem;
    height: 0.22rem;
    margin: 1.4rem auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #F8CBD1, #F9E4E8);
}

.about-content .section-title::after {
    margin-left: 0;
    background: linear-gradient(90deg, #F8CBD1, rgba(255,255,255,0.7));
}

@media (max-width: 1150px) {
    .about-content .section-title::after {
        margin-left: auto;
    }
}

/* Más calma en móviles */

@media (max-width: 700px) {
    .stories-section {
        padding: 7rem 0 6rem;
        align-items: flex-start;
    }

    .stories-content {
        width: 100%;
        max-width: none;
        padding: 0 1.2rem;
    }

    .stories-carousel {
        width: 100%;
        margin: 2rem 0 2rem;
        position: relative;
    }

    .stories-track {
        gap: 1rem;
        padding: 1rem 0 2rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
    }

    .video-story-card {
        flex: 0 0 100%;
        max-width: 100%;
        scroll-snap-align: center;
        border-radius: 1.25rem;
    }

    .video-story-card:hover {
        transform: none;
    }

    .story-arrow {
        display: grid;
        width: 2.65rem;
        height: 2.65rem;
        top: 45%;
        z-index: 8;
    }

    .story-arrow-left {
        left: 0.35rem;
    }

    .story-arrow-right {
        right: 0.35rem;
    }

    .story-arrow svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    .video-story-info {
        padding: 1rem;
    }

    .video-story-info h3 {
        font-size: 1.08rem;
    }

    .video-story-info p {
        font-size: 0.9rem;
    }

    .video-story-actions {
        flex-wrap: wrap;
    }

    .play-story,
    .video-story-actions a {
        flex: 1;
        text-align: center;
        justify-content: center;
    }
}


.schedule-section {
    position: relative;
    min-height: 100svh;
    padding: 8rem 5%;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 18%, rgba(248,203,209,.28), transparent 24rem),
        radial-gradient(circle at 88% 82%, rgba(246,239,234,.78), transparent 28rem),
        linear-gradient(180deg, #fffaf8 0%, #fff4f6 55%, #f6efea 100%);
    display: flex;
    align-items: center;
    text-align: center;
}

.schedule-content {
    width: min(1100px, 100%);
    margin: 0 auto;
}

.schedule-internal-page .schedule-title {
    max-width: 20ch;
    margin: 0 auto 1.5rem;

    font-family: "Lora", Georgia, serif;
    font-size: clamp(1.9rem, 3vw, 2.95rem);
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: -0.03em;

    color: #222733;
    text-wrap: balance;
}

.schedule-content > p {
    max-width: 720px;
    margin: 0 auto 2.5rem;
    font-size: 1.15rem;
    color: #4f5463;
}

.calendly-card {
    background: rgba(255,250,248,.78);
    border: 2px solid #222733;
    border-radius: 2rem;
    padding: 1rem;
    box-shadow: 10px 10px 0 #222733;
    overflow: hidden;
}

.calendly-inline-widget {
    width: 100%;
    border-radius: 1.4rem;
    overflow: hidden;
}

@media (max-width: 700px) {
    .schedule-section {
        padding: 7rem 1.2rem 6rem;
    }

    .calendly-card {
        padding: .55rem;
        box-shadow: 6px 6px 0 #222733;
    }

    .calendly-inline-widget {
        height: 650px !important;
    }
}

/*Styles for the testicuentos section*/
.stories-carousel {
    position: relative;
    width: min(1180px, 100%);
    margin: 3rem auto 2.5rem;
}

.stories-track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 1rem 0.4rem 2rem;
    scrollbar-width: none;
}

.stories-track::-webkit-scrollbar {
    display: none;
}

.video-story-card {
    flex: 0 0 clamp(260px, 32vw, 380px);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(34, 39, 51, 0.10);
    border-radius: 1.4rem;
    background:
        linear-gradient(
            145deg,
            rgba(255, 250, 248, 0.99),
            rgba(246, 239, 234, 0.96)
        );
    box-shadow:
        0 24px 60px rgba(34, 39, 51, 0.14);

    cursor: pointer;
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease;
}

.video-story-card:hover {
    transform: scale(1.04);
    border-color: rgba(232, 166, 176, 0.45);
    box-shadow:
        0 32px 80px rgba(34, 39, 51, 0.20);
}

.video-story-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.video-story-info {
    padding: 1.2rem;
    text-align: left;
    color: #222733;
}

.video-story-info > span {
    display: inline-block;
    margin-bottom: 0.45rem;

    color: #a76575;

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.video-story-info h3 {
    margin-bottom: 0.55rem;

    color: #222733;

    font-size: 1.25rem;
    font-weight: 800;
}

.video-story-info p {
    color: #5b5f6b;
    font-size: 0.95rem;
    line-height: 1.55;
}

.video-story-actions {
    display: flex;
    gap: 0.7rem;
    margin-top: 1rem;
    align-items: center;
}

.play-story,
.video-story-actions a {
    min-height: 2.7rem;
    padding: 0.65rem 1rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
}

.play-story {
    border: 0;
    background: #F8CBD1;
    color: #222733;
    cursor: pointer;
}

.video-story-actions a {
    border: 1px solid rgba(34, 39, 51, 0.18);
    background: #ffffff;
    color: #222733;
}

.video-story-actions a:hover {
    border-color: #F3B8C1;
    background: #fffaf8;
    color: #a76575;
}

.story-arrow {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    z-index: 5;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    border: 2px solid #222733;
    background: #F8CBD1;
    color: #222733;
    font-size: 2rem;
    cursor: pointer;
    box-shadow: 4px 4px 0 #222733;
}

.story-arrow-left {
    left: -1rem;
}

.story-arrow-right {
    right: -1rem;
}

.video-modal {
    position: fixed;
    inset: 0;
    z-index: 300000;

    display: grid;
    place-items: center;

    padding: clamp(0.75rem, 2vw, 1.5rem);
    overflow: hidden;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.video-modal.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.video-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(34, 39, 51, 0.78);
    backdrop-filter: blur(14px);
}

.video-modal-card {
    position: relative;
    z-index: 2;
    width: min(960px, 100%);
    max-height: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: clamp(0.85rem, 2vw, 1.4rem);
    background: #000;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.38);
}


@media (min-aspect-ratio: 16 / 9) {
    .video-modal-card {
        width: auto;
        height: min(540px, calc(100dvh - 3rem));
        max-width: 100%;
    }
}


.video-modal-card iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-modal-close {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    z-index: 4;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    border: 0;
    background: #F8CBD1;
    color: #222733;
    font-size: 1.6rem;
    cursor: pointer;
}
@media (max-width: 700px) {
    .stories-section {
        padding-left: 0;
        padding-right: 0;
    }

    .stories-content {
        width: 100%;
        max-width: none;
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }

    .stories-carousel {
        width: 100%;
        margin: 2.2rem auto 2rem;
        padding: 0 0.2rem;
    }

    .stories-track {
        gap: 1rem;
        padding: 1rem 0 2rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
    }

    .video-story-card {
        flex: 0 0 100%;
        max-width: 100%;
        scroll-snap-align: center;
    }

    .video-story-card:hover {
        transform: none;
    }

	.story-arrow {
	    display: grid;
	    width: 2.65rem;
	    height: 2.65rem;
	    top: 50%;
	    z-index: 8;
	}

    .story-arrow-left {
        left: 0.25rem;
    }

    .story-arrow-right {
        right: 0.25rem;
    }

    .story-arrow svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    .video-story-info {
        padding: 1rem;
    }

    .video-story-actions {
        flex-wrap: wrap;
    }

    .play-story,
    .video-story-actions a {
        flex: 1;
        text-align: center;
    }
}

.story-arrow {
    display: grid;
    place-items: center;
}

.story-arrow svg {
    width: 1.55rem;
    height: 1.55rem;
    display: block;
}
/*end testicuentos*/

.wave-book-front {
    bottom: -1px;
    height: 7rem;
    z-index: 3;

    clip-path: polygon(
        0 82%,
        8% 76%,
        16% 68%,
        24% 60%,
        32% 55%,
        42% 52%,
        52% 55%,
        62% 62%,
        72% 70%,
        82% 77%,
        92% 80%,
        100% 76%,
        100% 100%,
        0 100%
    );
}


@media (max-width: 700px) {
    .wave-book-front {
        height: 5rem;

        clip-path: polygon(
            0 78%,
            12% 74%,
            24% 69%,
            36% 65%,
            48% 63%,
            60% 65%,
            72% 69%,
            84% 74%,
            100% 78%,
            100% 100%,
            0 100%
        );
    }
}

.story-arrow.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/*book styles*/
/* LIBRO ABIERTO FRONTAL */

.book-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.book-link {
    display: block;
    text-decoration: none;
    transition: transform 0.25s ease;
}

.book-link:hover {
    transform: translateY(-4px);
}

.book-open {
    position: relative;
    display: flex;
    width: min(620px, 100%);
    aspect-ratio: 2 / 1.18;
    border-radius: 0.45rem;
    overflow: hidden;
    background: #fffaf8;
    box-shadow:
        0 18px 38px rgba(34, 39, 51, 0.18),
        0 4px 10px rgba(34, 39, 51, 0.10);
}

.book-page {
    position: relative;
    width: 50%;
    height: 100%;
    background: #fffaf8;
    overflow: hidden;
}

.book-page img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* sombra interior de páginas */
.book-page-left::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0,0,0,0.10),
        transparent 18%,
        transparent 72%,
        rgba(0,0,0,0.16)
    );
    pointer-events: none;
}

.book-page-right::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0,0,0,0.18),
        transparent 22%,
        transparent 82%,
        rgba(0,0,0,0.10)
    );
    pointer-events: none;
}

/* lomo central */
.book-spine {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1.35rem;
    height: 100%;
    transform: translateX(-50%);
    z-index: 3;
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0.18),
            rgba(255,255,255,0.42),
            rgba(0,0,0,0.16)
        );
    box-shadow:
        -0.35rem 0 1rem rgba(0,0,0,0.14),
        0.35rem 0 1rem rgba(0,0,0,0.12);
}

/* bordes del libro */
.book-open::before,
.book-open::after {
    content: "";
    position: absolute;
    top: 0;
    width: 0.45rem;
    height: 100%;
    z-index: 4;
    background: rgba(34, 39, 51, 0.14);
}

.book-open::before {
    left: 0;
}

.book-open::after {
    right: 0;
}

/* Responsive */
@media (max-width: 900px) {
    .book-section {
        text-align: center;
    }

    .book-visual {
        margin-top: 2rem;
    }

    .book-open {
        width: min(100%, 560px);
    }
}

@media (max-width: 520px) {
    .book-open {
        width: 100%;
        aspect-ratio: 2 / 1.25;
    }

    .book-spine {
        width: 0.9rem;
    }
}
/*end book styles*/
/* =========================================================
   MODELO HÍBRIDO Y PÁGINAS INTERNAS — JULIO 2026
   ========================================================= */
.brand-copy{display:flex;flex-direction:column;line-height:1}.brand-role{margin-top:.25rem;font-size:.58rem;font-weight:600;letter-spacing:.08em;text-transform:none;color:var(--text-color,#222733)}
.section-page-link{display:inline-flex;margin-top:1.25rem}
.internal-page{background:#fff;color:#222733;font-family:"Inter",sans-serif}
.internal-page main{overflow:hidden;padding-top:0}
.internal-page h1,.internal-page h2,.internal-page .internal-quote{font-family:"Lora",serif}
.internal-shell{width:min(1180px,calc(100% - 40px));margin-inline:auto}
.internal-hero{padding:clamp(8.5rem,13vw,12rem) 0 clamp(5rem,8vw,8rem);background:#fff}
.internal-hero--pink,.internal-section--pink,.internal-cta{background:#fff0f3}
.internal-hero-grid,.internal-cta-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.75fr);align-items:center;gap:clamp(2rem,6vw,6rem)}
.internal-eyebrow{display:block;margin-bottom:1rem;color:#a55364;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.internal-hero h1{max-width:850px;margin:0 0 1.25rem;font-size:clamp(2.65rem,6vw,5.6rem);line-height:1.02;font-weight:500;letter-spacing:-.04em}
.internal-lead{max-width:760px;font-size:clamp(1.12rem,2vw,1.45rem);line-height:1.65}
.internal-hero p:not(.internal-lead){max-width:720px;line-height:1.75}
.internal-photo{overflow:hidden;margin:0;border-radius:42px;background:#f7dbe1;box-shadow:0 24px 60px rgba(73,42,49,.13)}
.internal-photo img{display:block;width:100%;height:100%;object-fit:cover}
.internal-photo--hero{aspect-ratio:4/5}.internal-photo--cta{aspect-ratio:4/4.5}
.internal-section{padding:clamp(5rem,9vw,9rem) 0;background:#fff}
.internal-section h2,.internal-cta h2{max-width:900px;margin:0 0 1.5rem;font-size:clamp(2.15rem,4.5vw,4.2rem);line-height:1.08;font-weight:500;letter-spacing:-.035em}
.internal-intro{max-width:850px;font-size:1.2rem;line-height:1.7}
.story-columns{columns:2;column-gap:clamp(2rem,5vw,5rem);margin-top:3rem}.story-columns p{break-inside:avoid;margin:0 0 1.5rem;line-height:1.85;color:#4b4f5b}
.formation-card,.service-detail-card{background:#fff;border-radius:44px;box-shadow:0 22px 60px rgba(84,45,54,.1)}
.formation-card{display:grid;grid-template-columns:minmax(280px,.75fr) minmax(0,1.25fr);gap:clamp(2rem,5vw,5rem);align-items:center;padding:clamp(1.25rem,3vw,2rem)}
.formation-card>div{padding:clamp(1rem,3vw,3rem) clamp(.25rem,2vw,2rem)}
.formation-card p,.narrow-copy p{line-height:1.85;color:#4b4f5b}
.internal-cta{padding:clamp(5rem,9vw,8rem) 0}
.internal-quote{font-size:clamp(1.8rem,4vw,3.7rem);font-style:italic;line-height:1.25;color:#6e3442}
.narrow-copy {
    max-width: 920px;
}

/* =========================================================
   ACOMPAÑAMIENTO — ENCABEZADOS CENTRADOS
   ========================================================= */

.accompaniment-internal-page .accompaniment-section-heading {
    width: min(100%, 900px);
    margin:
        0 auto
        clamp(2.5rem, 5vw, 4rem);

    text-align: center;
}

.accompaniment-internal-page
.accompaniment-section-heading .internal-eyebrow {
    display: block;
    margin-bottom: 1.25rem;
}

.accompaniment-internal-page
.accompaniment-section-heading h2 {
    margin-left: auto;
    margin-right: auto;
    max-width: 22ch;
    font-family: "Lora", Georgia, serif;
    font-size: clamp(1.7rem, 2.9vw, 2.7rem);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.02em;
}
.accompaniment-internal-page
.service-detail-card .accompaniment-section-heading {
    margin-bottom: 2.5rem;
}

.accompaniment-internal-page
.accompaniment-fit .accompaniment-section-heading {
    margin-bottom: 2.5rem;
}

.accompaniment-internal-page
.accompaniment-commitment .narrow-copy > p {
    text-align: center;
}

.service-detail-card{padding:clamp(2rem,5vw,5rem)}
.service-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;margin-top:2.5rem}
.accompaniment-internal-page .service-detail-grid article{
    padding:1.6rem;
    border:1px solid #e8a6b0;
    border-radius:26px;
    background:#f9e4e8;
}
.service-detail-grid h3{font-family:"Lora",serif;font-size:1.35rem}.service-detail-grid ul,.connection-list{padding-left:1.2rem}.service-detail-grid li,.connection-list li{margin:.8rem 0;line-height:1.65}
.consent-gate{margin-top:2rem;padding-top:2rem;border-top:1px solid #ecd0d7}.consent-gate label{display:flex;align-items:flex-start;gap:.7rem;line-height:1.65}.consent-gate input{width:1.2rem;height:1.2rem;margin-top:.25rem;accent-color:#ad5f70}.legal-link{padding:0;border:0;background:none;color:#8d4354;text-decoration:underline;cursor:pointer;font:inherit}.is-disabled{opacity:.5;pointer-events:none}.zelle-note{margin-top:1rem;font-size:.93rem}.zelle-note a{color:#8d4354;font-weight:700}
.connection-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem 2rem;
    margin-top:2.5rem;
    list-style:none;
    padding:0
}


/* =========================================================
   ACOMPAÑAMIENTO — TARJETAS ANIMADAS
   ========================================================= */

/* Tarjetas de “Este proceso es para ti si...” */
.accompaniment-internal-page .connection-list li {
    position: relative;
    padding: 1.2rem 1.2rem 1.2rem 3rem;
    background: #f9e4e8;
    border: 1px solid #e8a6b0;
    border-radius: 22px;
    box-shadow: 0 12px 30px rgba(165, 83, 100, 0.06);
    will-change: transform, opacity, filter;
}

.accompaniment-internal-page .connection-list li::before {
    content: "✓";
    position: absolute;
    left: 1.2rem;
    color: #a55364;
    font-weight: 800;
}


/* Tarjetas de “Servicio individual” */
.accompaniment-internal-page .service-detail-grid article {
    position: relative;
    overflow: hidden;
    will-change: transform, opacity, filter;
}

.accompaniment-internal-page
.service-detail-grid article::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    background: linear-gradient(
        115deg,
        transparent 24%,
        rgba(255, 255, 255, 0.7) 48%,
        transparent 72%
    );

    transform: translateX(-135%);
}

.accompaniment-internal-page
.service-detail-grid article.is-revealed::after {
    animation: service-card-shine 0.95s ease-out forwards;
}

.accompaniment-internal-page
.service-detail-grid article:nth-child(2).is-revealed::after {
    animation-delay: 0.14s;
}

.accompaniment-internal-page
.service-detail-grid article:nth-child(3).is-revealed::after {
    animation-delay: 0.28s;
}

@keyframes service-card-shine {
    to {
        transform: translateX(135%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .accompaniment-internal-page .connection-list li,
    .accompaniment-internal-page .service-detail-grid article {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .accompaniment-internal-page
    .service-detail-grid article::after {
        animation: none !important;
        display: none;
    }
}

    .accompaniment-internal-page
    .connection-list li::after {
        animation: none !important;
    }
}

.professional-notice {
    padding: 3.5rem 0;
    background: #f8f5f6;
    font-size: 0.88rem;
}

.professional-notice h2 {
    font:
        600 1rem
        "Inter",
        sans-serif;

    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.professional-notice p {
    line-height: 1.7;
    color: #5d6069;
}

.accompaniment-internal-page .professional-notice__content {
    width: min(100%, 900px);
    margin: 0 auto;
    text-align: center;
}

.accompaniment-internal-page .professional-notice__content h2 {
    max-width: 760px;
    margin: 0 auto 1.5rem;
}

.accompaniment-internal-page .professional-notice__content p {
    width: min(100%, 760px);
    margin: 0 auto 1rem;
}

.consent-modal{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:1rem;visibility:hidden;opacity:0;transition:.25s ease}.consent-modal.is-visible{visibility:visible;opacity:1}.consent-modal__backdrop{position:absolute;inset:0;background:rgba(23,19,21,.68);backdrop-filter:blur(5px)}.consent-modal__card{position:relative;width:min(760px,100%);max-height:88vh;overflow:auto;padding:clamp(1.5rem,4vw,3rem);border-radius:32px;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.3)}.consent-modal__card h2{font-family:"Lora",serif;font-size:clamp(1.8rem,4vw,3rem)}.consent-modal__card h3{margin-top:1.5rem}.consent-modal__card p{line-height:1.65}.consent-modal__close{position:absolute;right:1rem;top:1rem;width:42px;height:42px;border:0;border-radius:50%;background:#f8e2e7;font-size:1.7rem;cursor:pointer}.modal-open{overflow:hidden}
.book-page-visual{margin:0 auto;max-width:420px;filter:drop-shadow(0 30px 35px rgba(65,35,42,.18))}.book-page-visual img{display:block;width:100%;border-radius:10px}
.video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}.simple-video-card{padding:1.25rem;border-radius:30px;background:#fff;box-shadow:0 18px 45px rgba(82,46,54,.1)}.simple-video-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:20px}.simple-video-card h2{margin:1.3rem 0 .8rem;font-size:1.65rem}.simple-video-card p{line-height:1.65;color:#555965}



@media (max-width: 980px) {
    .brand-role {
        display: none;
    }

    .internal-hero-grid,
    .internal-cta-grid,
    .formation-card {
        grid-template-columns: 1fr;
    }

    .internal-photo--hero {
        max-width: 560px;
    }

    .service-detail-grid,
    .video-grid {
        grid-template-columns: 1fr;
    }

    .story-columns {
        columns: 1;
    }

    .connection-list {
        grid-template-columns: 1fr;
    }

    .internal-hero {
        padding-top: 8rem;
    }

    /* Sobre Dennise */
    .about-internal-page .about-hero-copy,
    .about-internal-page .internal-cta-grid > div {
        text-align: center;
    }

    /* Acompañamiento: primer contenido */
    .accompaniment-internal-page .accompaniment-hero-copy {
        text-align: center;
    }

    .accompaniment-internal-page .accompaniment-hero-copy h1,
    .accompaniment-internal-page .accompaniment-hero-copy .internal-lead {
        margin-left: auto;
        margin-right: auto;
    }

    /* Acompañamiento: aviso final con aire lateral */
    .accompaniment-internal-page .professional-notice__content {
        width: min(calc(100% - 2rem), 900px);
    }
}


@media(max-width:600px){.internal-shell{width:min(100% - 28px,1180px)}.internal-photo,.formation-card,.service-detail-card{border-radius:28px}.formation-card{padding:1rem}.internal-hero h1{font-size:2.65rem}.internal-section h2{font-size:2.25rem}.consent-gate label{font-size:.92rem}}


/* =========================================================
   SEPARADORES ORGÁNICOS SVG — PÁGINAS INTERNAS
   ========================================================= */

/*another one*/
/* Mi libro: sección blanca → footer oscuro */
.section-wave--book-to-dark {
    background: #ffffff;
}

.section-wave--book-to-dark .section-wave__back {
    fill: #D9C8CD;
}

.section-wave--book-to-dark .section-wave__front {
    fill: #222733;
}
/*end*/



/*another one*/
/* Mi libro: sección blanca → footer oscuro */
.section-wave--my-book-to-dark {
    background: #fffaf8;
}

.section-wave--my-book-to-dark .section-wave__back {
    fill: #D9C8CD;
}

.section-wave--my-book-to-dark .section-wave__front {
    fill: #222733;
}
/*end*/

/**/
/* Sobre Dennise: Mi formación → CTA */
.section-wave--about-formation-to-cta {
    background: #F8CBD1;
}

.section-wave--about-formation-to-cta .section-wave__back {
    fill: #F2B6C0;
}

.section-wave--about-formation-to-cta .section-wave__front {
    fill: #ffffff;
}
/**/


.section-wave {
    position: relative;
    width: 100%;
    height: clamp(6rem, 10vw, 11rem);
    margin-top: -1px;
    margin-bottom: -1px;
    overflow: hidden;
    line-height: 0;
    pointer-events: none;
}

.section-wave svg {
    display: block;
    width: 100%;
    height: 100%;
}

/*
 * Las dos capas se dibujan con curvas Bézier reales.
 * No dependen del ancho de pantalla ni de puntos poligonales.
 */
.section-wave__back,
.section-wave__front {
    vector-effect: non-scaling-stroke;
}

/* Sección clara → CTA rosa */
.section-wave--light-to-pink {
    background: #fff;
}

.section-wave--light-to-pink .section-wave__back {
    fill: #F2B6C0;
}

.section-wave--light-to-pink .section-wave__front {
    fill: #F8CBD1;
}


/* Sobre Dennise: Mi historia blanca → Mi formación rosa */
.section-wave--about-story-to-pink {
    background: #FFF;
}

/* Sobre Dennise: CTA rosa → footer oscuro */
.section-wave--about-cta-to-dark {
    background: #F8CBD1;
}

.section-wave--about-cta-to-dark .section-wave__back {
    fill: #D9C8CD;
}

.section-wave--about-cta-to-dark .section-wave__front {
    fill: #222733;
}
/*end new one*/

.section-wave--about-story-to-pink .section-wave__back {
    fill: #F2B6C0;
}

.section-wave--about-story-to-pink .section-wave__front {
    fill: #ffffff;
}


/*begin new*/
/* =========================================================
   WAVES EXCLUSIVAS DEL INICIO
   ========================================================= */
/*ANOTHER WAVE IN THE INICIO TAB*/

/* Hero con fotografía → Contacto crema */
.section-wave--first-home-hero-to-contact {
    position: relative;
    z-index: 5;
    width: 100%;
    height: clamp(8rem, 14vw, 13.75rem);
    margin-top: clamp(-7rem, -7vw, -4.5rem);
    margin-bottom: -1px;
    overflow: hidden;
    background: transparent;
}

.section-wave--first-home-hero-to-contact svg {
    display: block;
    width: 100%;
    height: 100%;
}

.section-wave--first-home-hero-to-contact .section-wave__back {
    fill: rgba(242, 182, 192, 0.88);
}

.section-wave--first-home-hero-to-contact .section-wave__front {
    fill: #f6efea;
}

@media (max-width: 768px) {
    .section-wave--first-home-hero-to-contact {
        height: 7.5rem;
        margin-top: -3.5rem;
    }

    .section-wave--v-home-contact-to-footer
        .section-wave__back {
        fill: #222733;
    }
}
/*END*/



/* Hero claro → Contacto crema */
.section-wave--home-hero-to-contact {
    background: #fffaf8;
}

.section-wave--home-hero-to-contact svg .section-wave__back {
    fill: #F2B6C0;
}

.section-wave--home-hero-to-contact svg .section-wave__front {
    fill: #fffaf8;
}



/* another variant Contacto crema → Footer oscuro */
.section-wave--v-home-contact-to-footer {
    background: #F6EFEA;
}

.section-wave--v-home-contact-to-footer svg .section-wave__back {
    fill: #D9C8CD;
}

.section-wave--v-home-contact-to-footer svg .section-wave__front {
    fill: #222733;
}
/*end new another variant*/


/* Contacto crema → Footer oscuro */
.section-wave--home-contact-to-footer {
    background: #f8f3ef;
}

.section-wave--home-contact-to-footer svg .section-wave__back {
    fill: #D9C8CD;
}

.section-wave--home-contact-to-footer svg .section-wave__front {
    fill: #222733;
}
/*end new*/

/* Rosa → blanco */
.section-wave--pink-to-white {
    background: #FFF0F3;
}



.section-wave--pink-to-white .section-wave__back {
    fill: #F2B6C0;
}

.section-wave--pink-to-white .section-wave__front {
    fill: #ffffff;
}

/* Rosa → footer oscuro */
.section-wave--pink-to-dark {
    background: #F8CBD1;
}

.section-wave--pink-to-dark .section-wave__back {
    fill: #D9C8CD;
}

.section-wave--pink-to-dark .section-wave__front {
    fill: #222733;
}

/* CTA rosa → aviso claro */
.section-wave--pink-to-light {
    background: #F8CBD1;
}

.section-wave--pink-to-light .section-wave__back {
    fill: #F2B6C0;
}

.section-wave--pink-to-light .section-wave__front {
    fill: #F8F5F6;
}

/* Mi libro: contenido rosa → onda intermedia crema → autora blanca */
.section-wave--book-content-to-author {
    background: #F3B8C1;
}

.section-wave--book-content-to-author .section-wave__back {
    fill: #f8cbd1;
}

.section-wave--book-content-to-author .section-wave__front {
    fill: #ffffff;
}




/*begin last wave in my book*/
/* Mi libro: contenido rosa → onda intermedia crema → autora blanca */
.section-wave--book-content-choose-format {
    background: #ffffff;
}

.section-wave--book-content-choose-format .section-wave__back {
    fill: #F2B6C0;
}

.section-wave--book-content-choose-format .section-wave__front {
    fill: #fffaf8;
}
/*end last wave in my book*/

/* Aviso claro → footer oscuro */
.section-wave--light-to-dark {
    background: #F8F5F6;
}

.section-wave--light-to-dark .section-wave__back {
    fill: #D9C8CD;
}

.section-wave--light-to-dark .section-wave__front {
    fill: #222733;
}

/*
 * La sección superior y la inferior comparten exactamente
 * el color de inicio y cierre del SVG.
 */
.internal-cta {
    background: #F8CBD1;
}

.professional-notice {
    background: #F8F5F6;
}

.footer {
    background: #222733;
}

/*
 * Elimina cualquier hueco subpíxel que el navegador pueda
 * producir entre SVG y sección.
 */
.section-wave + .professional-notice,
.section-wave + .footer {
    margin-top: -1px;
}

@media (max-width: 768px) {
    .section-wave {
        height: clamp(5rem, 24vw, 7rem);
    }
}


/*Para historias reales*/
/* Página interna: encabezado de Historias reales */
/* =========================================================
   PÁGINA INTERNA — HISTORIAS REALES / TESTICUENTOS
   ========================================================= */

.stories-internal-page {
    background: #fffaf8;
}


/* =========================================================
   HERO
   ========================================================= */

.stories-landing-hero {
    position: relative;
    min-height: 100svh;
    padding:
        clamp(8.5rem, 13vh, 10.5rem)
        0
        clamp(5.5rem, 9vw, 8rem);

    display: flex;
    align-items: center;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(248, 203, 209, 0.4),
            transparent 27rem
        ),
        radial-gradient(
            circle at 89% 77%,
            rgba(246, 239, 234, 0.88),
            transparent 31rem
        ),
        #fffaf8;
}

.stories-hero-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, 0.72fr);

    align-items: center;
    gap: clamp(3rem, 7vw, 7rem);
}

.stories-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
}

.stories-hero-copy .internal-eyebrow {
    margin-bottom: 1.25rem;
}

.stories-hero-quote {
    margin: 0;
    max-width: 20ch;
    font-family: "Lora", Georgia, serif;
    font-size: clamp(1.9rem, 3vw, 2.95rem);
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: -0.03em;
    color: #222733;
}

.stories-hero-quote span {
    display: block;
}

.stories-hero-quote span:last-child {
    color: #a26f7b;
    font-style: italic;
}

.stories-hero-lead {
    max-width: 610px;
    margin: 2rem 0 1.8rem;

    color: #575b68;
    font-size: clamp(1.05rem, 1.5vw, 1.22rem);
    line-height: 1.75;
}

.stories-hero-photo {
    position: relative;
    z-index: 1;
    width: min(100%, 470px);
    aspect-ratio: 0.82;
    margin: 0 auto;
    padding: 0.58rem;
    overflow: hidden;
    border: 1px solid rgba(34, 39, 51, 0.1);
    border-radius: 44% 56% 59% 41% / 42% 42% 58% 58%;
    background: rgba(255, 255, 255, 0.55);
    box-shadow:
        0 32px 80px rgba(34, 39, 51, 0.16),
        inset 0 0 0 1px rgba(255, 255, 255, 0.48);
}

.stories-hero-photo::before {
    content: "";
    position: absolute;
    inset: 8% -8% -7% 12%;
    z-index: -1;
    border-radius: inherit;
    background: rgba(248, 203, 209, 0.58);
}

.stories-hero-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: 41% 59% 55% 45% / 45% 51% 49% 55%;
}


/* =========================================================
   INTRODUCCIÓN
   ========================================================= */

.stories-introduction {
    position: relative;
    padding: clamp(5.5rem, 9vw, 9rem) 0;
    overflow: hidden;
    background: #ffffff;
}

.stories-section-heading {
    width: min(100%, 900px);
    margin: 0 auto clamp(3.2rem, 6vw, 5rem);
    text-align: center;
}

.stories-section-heading h2,
.stories-purpose-heading h2,
.stories-showcase-heading h2,
.stories-final-cta h2 {
    font-family: "Lora", Georgia, serif;
    font-weight: 500;
    letter-spacing: -0.045em;
}

.stories-internal-page .stories-section-heading h2 {
    margin-bottom: 1.6rem;
    font-size: clamp(1.7rem, 2.8vw, 2.65rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.stories-section-heading p {
    width: min(100%, 790px);
    margin-inline: auto;
    color: #555a66;
    font-size: 1.08rem;
    line-height: 1.82;
}

.stories-section-heading p + p {
    margin-top: 1rem;
}

.stories-introduction-lead {
    color: #222733 !important;
    font-family: "Lora", Georgia, serif;
    font-size: clamp(1.15rem, 2vw, 1.42rem) !important;
    line-height: 1.7 !important;
}


/* =========================================================
   TRES PILARES
   ========================================================= */

.stories-pillars {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 1.7rem);
    margin-bottom: clamp(4rem, 7vw, 6rem);
}

.stories-pillar-card {
    position: relative;
    min-height: 260px;
    padding: clamp(1.5rem, 3vw, 2.2rem);
    overflow: hidden;
    border: 1px solid rgba(34, 39, 51, 0.09);
    border-radius: 2rem;
    background:
        linear-gradient(
            145deg,
            rgba(255, 250, 248, 0.98),
            rgba(246, 239, 234, 0.8)
        );
    box-shadow:
        0 20px 45px rgba(34, 39, 51, 0.08);
}

.stories-pillar-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 22% 18%,
            rgba(255,255,255,0.75) 0%,
            rgba(255,255,255,0.28) 28%,
            transparent 58%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,0.20) 0%,
            rgba(255,255,255,0.05) 35%,
            transparent 100%
        );
}

.stories-pillar-card::after {
    content: "";
    position: absolute;
    right: -3.5rem;
    bottom: -4rem;
    width: 10rem;
    height: 10rem;

    border-radius: 50%;
    background: rgba(248, 203, 209, 0.46);
}

.stories-pillar-number {
    display: inline-flex;
    margin-bottom: 2.2rem;

    color: #a26f7b;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.stories-pillar-card h3 {
    position: relative;
    z-index: 1;
    margin-bottom: 0.8rem;

    font-family: "Lora", Georgia, serif;
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: 500;
    line-height: 1.15;
}

.stories-pillar-card p {
    position: relative;
    z-index: 1;
    color: #5b5f6a;
    line-height: 1.7;
}


/* =========================================================
   TEXTO EDITORIAL
   ========================================================= */

.stories-editorial-copy {
    width: min(100%, 850px);
    margin: 0 auto clamp(5rem, 8vw, 7rem);
}

.stories-editorial-copy > p {
    margin-bottom: 1.25rem;
    color: #525763;
    font-size: 1.08rem;
    line-height: 1.85;
}

.stories-editorial-copy blockquote {
    position: relative;
    z-index: 0;
    margin-top: 2.5rem;
    padding:
        clamp(1.8rem, 4vw, 3rem)
        clamp(1.6rem, 5vw, 4rem);
    overflow: hidden;
    border: 0;
    border-left: 0.35rem solid #F3B8C1;
    border-radius: 0 2rem 2rem 0;
    background: #F6EFEA;
    color: #222733;
    font-family: "Lora", Georgia, serif;
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    font-style: italic;
    line-height: 1.6;
}

.stories-editorial-copy blockquote::after {
    content: "";
    position: absolute;
    right: -4rem;
    bottom: -5rem;
    z-index: -1;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    background: rgba(248, 203, 209, 0.52);

    pointer-events: none;
}

/* =========================================================
   PROPÓSITO
   ========================================================= */

.stories-purpose {
    width: min(100%, 1040px);
    margin: 0 auto clamp(5rem, 8vw, 7rem);
}

.stories-purpose-heading {
    width: min(100%, 900px);
    margin:
        0 auto
        clamp(2.5rem, 5vw, 4rem);
    text-align: center;
}

.stories-internal-page .stories-purpose-heading h2 {
    font-size: clamp(1.7rem, 2.8vw, 2.65rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.stories-purpose-grid {
    display: grid;
    gap: 1rem;
}

.stories-purpose-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(1.2rem, 3vw, 2rem);
    align-items: start;

    padding: clamp(1.4rem, 3vw, 2rem);

    border-bottom: 1px solid rgba(34, 39, 51, 0.12);
}

.stories-purpose-item > span {
    width: 3rem;
    height: 3rem;

    display: grid;
    place-items: center;

    border-radius: 50%;
    background: #F8CBD1;
    color: #222733;

    font-size: 0.78rem;
    font-weight: 800;
}

.stories-purpose-item h3 {
    margin-bottom: 0.55rem;
    font-family: "Lora", Georgia, serif;
    font-size: 1.45rem;
    font-weight: 500;
}

.stories-purpose-item p {
    max-width: 760px;
    color: #565b67;
    line-height: 1.75;
}


/* =========================================================
   INVITACIÓN Y PRESENTACIÓN DEL SLIDER
   ========================================================= */

.stories-invitation {
    width: min(100%, 800px);
    margin: 0 auto clamp(5rem, 8vw, 7rem);
    text-align: center;
}

.stories-invitation p {
    margin-bottom: 0.8rem;
    color: #545965;
    font-size: 1.1rem;
    line-height: 1.8;
}

.stories-invitation strong {
    display: block;
    color: #a26f7b;

    font-family: "Lora", Georgia, serif;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-style: italic;
    font-weight: 500;
}

.stories-showcase-heading {
    width: min(100%, 880px);
    margin: 0 auto;
    text-align: center;
}

.stories-internal-page .stories-showcase-heading h2 {
    margin-bottom: 1.25rem;
    font-size: clamp(1.7rem, 2.8vw, 2.65rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.stories-showcase-heading p {
    width: min(100%, 670px);
    margin-inline: auto;

    color: #575c68;
    font-size: 1.08rem;
    line-height: 1.75;
}


/* =========================================================
   SLIDER EXISTENTE — NO CAMBIA SU FUNCIONAMIENTO
   ========================================================= */

.stories-page-slider {
    overflow: hidden;
    margin: 0;
    padding:
        clamp(4.5rem, 8vw, 7rem)
        0
        clamp(4rem, 7vw, 6rem);

    background:
        radial-gradient(
            circle at 14% 20%,
            rgba(255, 255, 255, 0.35),
            transparent 25rem
        ),
        linear-gradient(
            180deg,
            #F8CBD1 0%,
            #F5C2CB 48%,
            #F3B8C1 100%
        );
}

.stories-page-slider .internal-shell {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
}

.stories-page-slider .stories-carousel {
    margin: 0;
}


/* =========================================================
   CTA FINAL
   ========================================================= */

.stories-final-cta {
    position: relative;
    padding:
        clamp(5rem, 8vw, 8rem)
        0
        clamp(4rem, 7vw, 6rem);

    overflow: hidden;
    background: #F8CBD1;
    text-align: center;
}

.stories-final-cta::before {
    display: none;
}

.stories-final-cta-inner {
    position: relative;
    z-index: 1;
    width: min(100%, 900px);
}

.stories-internal-page .stories-final-cta h2 {
    margin: 0 auto 1.5rem;
    max-width: 24ch;
    font-size: clamp(1.7rem, 2.8vw, 2.65rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.stories-final-cta p {
    width: min(100%, 680px);
    margin: 0 auto 2rem;

    color: #4f5360;
    font-size: clamp(1.05rem, 1.7vw, 1.22rem);
    line-height: 1.75;
}

.stories-final-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.2rem;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 980px) {

    .stories-landing-hero {
        min-height: auto;
        padding-top: 8.5rem;
    }

    .stories-hero-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
    }

    .stories-hero-copy {
        margin-inline: auto;
    }

    .stories-hero-quote {
        max-width: 15ch;
        margin-inline: auto;
    }

    .stories-hero-lead {
        margin-inline: auto;
    }

    .stories-hero-photo {
        width: min(72vw, 380px);
        order: -1;
    }

    .stories-pillars {
        grid-template-columns: 1fr;
    }

    .stories-pillar-card {
        min-height: auto;
    }
}


@media (max-width: 640px) {

    .stories-landing-hero {
        padding:
            7.5rem
            1.2rem
            4.5rem;
    }

    .stories-hero-quote {
        max-width: none;
        font-size: clamp(2.25rem, 11.5vw, 3.55rem);
        line-height: 1.04;
    }

    .stories-hero-quote span {
        display: inline;
    }

    .stories-hero-photo {
        width: min(82vw, 320px);
    }

    .stories-introduction {
        padding:
            4.5rem
            0
            5rem;
    }

    .stories-purpose-item {
        grid-template-columns: 1fr;
    }

    .stories-purpose-item > span {
        width: 2.7rem;
        height: 2.7rem;
    }

    .stories-page-slider .internal-shell {
        width: min(100% - 28px, 1180px);
    }

    .stories-final-actions {
        flex-direction: column;
    }

    .stories-final-actions .btn {
        width: min(100%, 22rem);
    }
}
/*end*/


/*begin my book styles pages*/

/* =========================================================
   PÁGINA INTERNA MI LIBRO — LANDING COMPLETA
   ========================================================= */

.book-internal-page {
    background: #ffffff;
}


/* =========================================================
   ELEMENTOS COMUNES
   ========================================================= */

.book-internal-page .internal-section {
    padding-block: clamp(5rem, 8vw, 8rem);
}

.book-internal-page .internal-eyebrow {
    margin-bottom: 1rem;
}

.book-section-intro {
    margin-bottom: 1.5rem;
    font-size: 1.08rem;
    font-weight: 700;
}

.book-section-heading {
    width: min(100%, 900px);
    margin: 0 auto clamp(3rem, 6vw, 5rem);
    text-align: center;
}

.book-internal-page .book-audience-copy h2,
.book-internal-page .book-section-heading h2,
.book-internal-page .book-author-copy h2 {
    font-family: "Lora", Georgia, serif;
    font-size: clamp(1.7rem, 2.8vw, 2.65rem);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.book-internal-page .book-section-heading h2 {
    margin-bottom: 1.5rem;
}

.book-section-heading p {
    width: min(100%, 780px);
    margin-inline: auto;
}

.book-section-heading p + p {
    margin-top: 1rem;
}


/* =========================================================
   BLOQUE 1 — HERO
   ========================================================= */

.book-landing-hero {
    overflow: hidden;
}

.book-landing-hero-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(340px, 0.82fr);

    align-items: center;
    gap: clamp(3rem, 7vw, 7rem);
}

.book-landing-hero-copy {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    text-align: left;
}

.book-landing-hero-copy h1 {
    margin: 0;
    max-width: 20ch;
    font-family: "Lora", Georgia, serif;
    font-size: clamp(1.9rem, 3vw, 2.95rem);
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: -0.03em;
    color: #222733;
}

.book-landing-hero-copy .internal-lead {
    max-width: 660px;
}

.book-landing-hero-copy > .btn {
    margin-block: clamp(1.35rem, 2vw, 1.65rem);
}

.book-landing-hero-photo {
    position: relative;
    width: min(100%, 490px);
    aspect-ratio: 0.86;
    margin: 0 auto;
    padding: 0.55rem;
    overflow: hidden;
    border: 1px solid rgba(34, 39, 51, 0.1);
    border-radius: 44% 56% 58% 42% / 42% 43% 57% 58%;
    background: rgba(255, 255, 255, 0.52);
    box-shadow:
        0 30px 70px rgba(34, 39, 51, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transform: rotate(1.2deg);
}

.book-landing-hero-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 42% 58% 54% 46% / 45% 50% 50% 55%;
}

.about-hero-copy,
.accompaniment-hero-copy {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 700px;

    margin: 0 auto;
    text-align: left;
}

.about-hero-copy .internal-eyebrow,
.accompaniment-hero-copy .internal-eyebrow {
    margin-bottom: 1.25rem;
}

.about-hero-copy h1,
.accompaniment-hero-copy h1 {
    margin: 0;
    max-width: 20ch;
    font-family: "Lora", Georgia, serif;
    font-size: clamp(1.9rem, 3vw, 2.95rem);
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: -0.03em;
    color: #222733;
}


/* Sobre Dennise: jerarquía y centrado de títulos de sección */
.about-internal-page .story-section .internal-eyebrow,
.about-internal-page .story-section h2,
.about-internal-page .story-section .internal-intro {
    display: block;
    text-align: center;
}

.about-internal-page .story-section h2 {
    max-width: 24ch;
    margin-left: auto;
    margin-right: auto;

    font-size: clamp(1.7rem, 2.8vw, 2.65rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.about-internal-page .story-section .internal-intro {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}

.about-internal-page .formation-card > div {
    text-align: center;
}

.about-internal-page .formation-card h2 {
    max-width: 22ch;
    margin-left: auto;
    margin-right: auto;

    font-size: clamp(1.7rem, 2.8vw, 2.65rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.about-internal-page .formation-card p {
    text-align: left;
}

.about-hero-copy .internal-lead,
.accompaniment-hero-copy .internal-lead {
    max-width: 610px;
    margin: 2rem 0 1rem;

    color: #575b68;
    font-size: clamp(1.05rem, 1.5vw, 1.22rem);
    line-height: 1.75;
}

.about-hero-copy > p:not(.internal-lead),
.accompaniment-hero-copy > p:not(.internal-lead) {
    max-width: 610px;
    margin-bottom: 1.8rem;

    color: #575b68;
    line-height: 1.75;
}
/* =========================================================
   BLOQUE 2 — PARA QUIÉN ES
   ========================================================= */

.book-audience-section {
    background: #ffffff;
}

.book-audience-grid {
    display: grid;
    grid-template-columns:
        minmax(420px, 1fr)
        minmax(0, 0.9fr);

    align-items: center;
    gap: clamp(3rem, 7vw, 7rem);
}

.book-audience-visual {
    min-width: 0;
}

.book-audience-visual .book-link {
    display: block;
    width: min(100%, 680px);
    margin-inline: auto;
}

.book-audience-visual .book-open {
    width: 100%;

    transform:
        perspective(1400px)
        rotateX(2deg)
        rotateY(2deg);

    transform-origin: center;

    transition:
        transform 0.45s cubic-bezier(.2, .8, .2, 1),
        box-shadow 0.45s ease;
}

.book-audience-visual .book-link:hover .book-open {
    transform:
        perspective(1400px)
        rotateX(0deg)
        rotateY(0deg)
        translateY(-6px);

    box-shadow:
        0 30px 65px rgba(34, 39, 51, 0.2),
        0 8px 20px rgba(34, 39, 51, 0.1);
}

.book-audience-copy {
    max-width: 620px;
}

.book-audience-copy h2 {
    margin-bottom: 1rem;
}

.book-benefit-list {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.book-benefit-list li {
    position: relative;
    padding: 1.25rem 1.25rem 1.25rem 3.4rem;

    border: 1px solid rgba(34, 39, 51, 0.09);
    border-radius: 1.4rem;

    background: #fffaf8;

    box-shadow: 0 12px 28px rgba(34, 39, 51, 0.055);
}

.book-benefit-list li::before {
    content: "✓";

    position: absolute;
    top: 1.25rem;
    left: 1.25rem;

    width: 1.35rem;
    height: 1.35rem;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #F8CBD1;
    color: #222733;

    font-size: 0.74rem;
    font-weight: 900;
}

.book-benefit-list strong,
.book-benefit-list span {
    display: block;
}

.book-benefit-list strong {
    margin-bottom: 0.35rem;
    line-height: 1.45;
}

.book-benefit-list span {
    color: #555965;
    line-height: 1.65;
}


/* =========================================================
   BLOQUE 3 — PILARES
   ========================================================= */

.book-content-section {
    background:
        radial-gradient(
            circle at 15% 18%,
            rgba(255, 255, 255, 0.45),
            transparent 24rem
        ),
        radial-gradient(
            circle at 85% 82%,
            rgba(255, 255, 255, 0.22),
            transparent 28rem
        ),
        linear-gradient(
            180deg,
            #F8CBD1 0%,
            #F5C2CB 48%,
            #F3B8C1 100%
        );
}

.book-pillars-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

.book-pillar-card {
    position: relative;
    min-height: 250px;
    padding: clamp(1.5rem, 3vw, 2.3rem);

    overflow: hidden;

    border: 1px solid rgba(34, 39, 51, 0.08);
    border-radius: 1.8rem;

    background: rgba(255, 250, 248, 0.82);

    box-shadow: 0 16px 38px rgba(34, 39, 51, 0.08);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.book-pillar-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 24px 48px rgba(34, 39, 51, 0.12);
}

.book-pillar-number {
    display: inline-block;
    margin-bottom: 1.4rem;

    color: #C9929F;

    font-family: "Lora", serif;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 600;
    line-height: 1;
}

.book-pillar-card h3 {
    margin-bottom: 0.8rem;
    font-size: clamp(1.35rem, 2.5vw, 1.8rem);
}

.book-pillar-card p {
    color: #555965;
    line-height: 1.7;
}


/* =========================================================
   BLOQUE 4 — AUTORA
   ========================================================= */

.book-author-section {
    background: #ffffff;
}

.book-author-grid {
    display: grid;
    grid-template-columns:
        minmax(320px, 0.75fr)
        minmax(0, 1.1fr);

    align-items: center;
    gap: clamp(3rem, 7vw, 7rem);
}

.book-author-photo {
    width: min(100%, 480px);
    aspect-ratio: 0.82;
    margin-inline: auto;
    padding: 0.5rem;

    overflow: hidden;

    border: 1px solid rgba(34, 39, 51, 0.09);
    border-radius: 2rem 2rem 4rem 1.5rem;

    background: #fffaf8;

    box-shadow: 0 28px 65px rgba(34, 39, 51, 0.14);
}

.book-author-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 1.65rem 1.65rem 3.5rem 1.2rem;
}

.book-author-copy {
    max-width: 720px;
}

.book-manifesto {
    margin: 0 0 2rem;
    padding-left: clamp(1.25rem, 3vw, 2rem);

    border-left: 5px solid #F8CBD1;

    color: #6f3747;

    font-family: "Lora", serif;
    font-size: clamp(1.7rem, 3.8vw, 3.1rem);
    font-style: italic;
    line-height: 1.25;
}

.book-author-copy h2 {
    margin-bottom: 1.2rem;
}

.book-author-copy p + p {
    margin-top: 1rem;
}

.book-author-copy > .btn {
    margin-block: clamp(1.35rem, 2vw, 1.65rem);
}


/* =========================================================
   BLOQUE 5 — COMPRA
   ========================================================= */

.book-purchase-section {
    background: #fffaf8;
}

.book-purchase-heading {
    margin-bottom: clamp(3rem, 6vw, 5rem);
}

.book-purchase-layout {
    display: grid;
    grid-template-columns:
        minmax(340px, 0.8fr)
        minmax(0, 1.2fr);

    align-items: center;
    gap: clamp(3rem, 7vw, 7rem);
}

.book-purchase-visual {
    display: grid;
    place-items: center;
}

.book-product-composition {
    position: relative;
    width: min(100%, 480px);
    min-height: 520px;
}

.book-internal-page .book-product-physical {
    position: absolute;
    left: 0;
    bottom: 0;

    width: 63%;

    border-radius: 0.55rem;

    filter: drop-shadow(0 28px 30px rgba(34, 39, 51, 0.24));

    transform:
        perspective(1000px)
        scaleX(-1)
        rotateY(7deg)
        rotateZ(-2deg);
}

.book-digital-device {
    position: absolute;
    right: 0;
    top: 0;

    width: 63%;
    aspect-ratio: 0.72;

    padding: 0.8rem;

    overflow: hidden;

    border: 0.65rem solid #222733;
    border-radius: 1.5rem;

    background: #222733;

    box-shadow: 0 30px 65px rgba(34, 39, 51, 0.23);

    transform:
        perspective(1000px)
        rotateY(-7deg)
        rotateZ(2deg);
}

.book-digital-device img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: top;

    border-radius: 0.45rem;
}

.book-format-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.book-format-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: clamp(1.5rem, 3vw, 2.2rem);

    border: 2px solid #222733;
    border-radius: 1.8rem;

    background: #ffffff;

    box-shadow: 7px 7px 0 #222733;
}

.book-format-label {
    display: inline-block;
    margin-bottom: 0.65rem;

    color: #8a6f75;

    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.book-format-card h3 {
    margin-bottom: 1.2rem;
    font-size: clamp(1.45rem, 3vw, 2rem);
}

.book-format-card ul {
    display: grid;
    gap: 0.75rem;
    margin: 0 0 1.7rem;
    padding-left: 1.2rem;
}

.book-format-card li {
    color: #555965;
    line-height: 1.55;
}

.book-format-card .btn {
    width: 100%;
    margin-top: auto;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 980px) {

    .book-landing-hero-grid,
    .book-audience-grid,
    .book-author-grid,
    .book-purchase-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .book-landing-hero-copy,
    .book-audience-copy,
    .book-author-copy {
        width: min(100%, 760px);
        margin-inline: auto;
        text-align: center;
    }

    .book-landing-hero-copy h1,
    .book-landing-hero-copy .internal-lead {
        margin-inline: auto;
    }

    .book-landing-hero-copy > .btn,
    .book-author-copy > .btn {
        margin-inline: auto;
    }

    .book-landing-hero-photo {
        width: min(78vw, 460px);
    }

    .book-audience-visual {
        order: 2;
    }

    .book-audience-copy {
        order: 1;
    }

    .book-audience-visual .book-link {
        width: min(100%, 640px);
    }

    .book-audience-visual .book-open {
        transform: none;
    }

    .book-benefit-list {
        text-align: left;
    }

    .book-author-photo {
        width: min(78vw, 470px);
    }

    .book-purchase-visual {
        order: 2;
    }

    .book-format-grid {
        order: 1;
    }

    .book-product-composition {
        width: min(100%, 440px);
    }

}


@media (max-width: 700px) {

    .book-internal-page .internal-section {
        padding-block: 4.5rem;
    }

    .book-pillars-grid,
    .book-format-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .book-pillar-card {
        min-height: auto;
    }

    .book-format-card {
        min-height: auto;
    }

    .book-product-composition {
        min-height: 440px;
    }

}


@media (max-width: 520px) {

    .book-landing-hero-photo,
    .book-author-photo {
        width: min(88vw, 390px);
    }

    .book-landing-hero-copy > .btn,
    .book-author-copy > .btn {
        display: inline-flex;
        justify-content: center;
        margin-inline: auto;
    }

    .book-audience-visual .book-link {
        width: 100%;
    }

    .book-audience-visual .book-open {
        width: 100%;
        margin-inline: auto;
        aspect-ratio: 2 / 1.25;
        border-radius: 0.35rem;
    }

    .book-benefit-list li {
        padding:
            1.15rem
            1rem
            1.15rem
            3rem;
    }

    .book-benefit-list li::before {
        left: 1rem;
    }

    .book-manifesto {
        font-size: clamp(1.55rem, 8vw, 2.2rem);
    }

    .book-product-composition {
        width: min(100%, 350px);
        min-height: 390px;
    }

}

/*end my book*/

/*preloader*/
/* =====================================================
   PRELOADER INICIAL MINIMALISTA
   ===================================================== */

.bootstrap-preloader {
    position: fixed;
    inset: 0;
    z-index: 999999;

    display: grid;
    place-items: center;

    background: #f8f3ef;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.bootstrap-preloader__spinner {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border:5px solid #d9d2ce;
    /*border: 5px solid #c9c9c9;*/
    /*border-top-color: var(--main-color);*/
    /*border-top-color: #C9929F;*/
    border-top-color:#9C6674;
    animation: minimalPreloaderSpin 0.85s linear infinite;
    filter: blur(0.2px);
}

.bootstrap-preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@keyframes minimalPreloaderSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bootstrap-preloader__spinner {
        animation-duration: 1.8s;
    }
}
/*end preloader*/

/*social networks*/
/* =====================================================
   FRANJA DE REDES SOCIALES DEL FOOTER
   ===================================================== */

.footer-social-bar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1.2rem, 4vw, 2.4rem);
    margin-bottom: 3rem;
    padding: 2.2rem 1rem;
    border-top: 1px solid rgba(255, 250, 248, 0.10);
    border-bottom: 1px solid rgba(255, 250, 248, 0.10);
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(248, 203, 209, 0.07),
            transparent 20rem
        );
}

.footer-social-bar a {
    position: relative;

    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 250, 248, 0.18);
    border-radius: 50%;

    background: rgba(255, 250, 248, 0.055);
    color: #fffaf8;

    text-decoration: none;

    transition:
        transform 0.32s cubic-bezier(.22, 1, .36, 1),
        color 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.32s ease;
}

.footer-social-bar box-icon {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

.footer-social-bar a:hover {
    color: #222733;

    background: #F8CBD1;
    border-color: #F8CBD1;

    transform: translateY(-5px) scale(1.06);

    box-shadow:
        0 12px 30px rgba(248, 203, 209, 0.20),
        0 0 0 7px rgba(248, 203, 209, 0.07);
}

.footer-social-bar a:focus-visible {
    outline: 3px solid #F8CBD1;
    outline-offset: 5px;
}


@media (max-width: 768px) {
    .footer-social-bar {
        background: #222733;
    }
}

@media (max-width: 520px) {
    .footer-social-bar {
        gap: 1rem;
        padding: 1.8rem 0.75rem;
        background: #222733;
    }

    .footer-social-bar a {
        width: 52px;
        height: 52px;
    }

    .footer-social-bar box-icon {
        width: 25px;
        height: 25px;
    }
}




@media (max-width: 320px) {
    .footer-social-bar {
        flex-wrap: wrap;
        max-width: 15rem;
        margin-left: auto;
        margin-right: auto;
        gap: 1rem 1.35rem;
        padding: 1.5rem 0.75rem;
        background: #222733;
    }

    .footer-social-bar a {
        flex: 0 0 52px;
        width: 52px;
        height: 52px;
    }

    .footer-social-bar box-icon {
        width: 25px;
        height: 25px;
    }
}


/**/


/*begin styles fo slider real stories*/

/* =========================================================
   HISTORIAS REALES — AMPLIACIÓN DE TARJETAS Y LECTOR
   Todo está limitado a esta página y no altera otras secciones.
   ========================================================= */

.story-card-enhanced .video-story-info {
    position: relative;
}

.story-card-enhanced .story-category {
    margin: -0.25rem 0 0.8rem;
    color: #a76575;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.025em;
}

.story-card-enhanced .story-preview {
    position: relative;
    min-height: 7.2rem;
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.story-card-enhanced .story-preview p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #565b67;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
}

.story-card-enhanced .story-preview::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2.8rem;
    pointer-events: none;
    background:
        linear-gradient(
            to bottom,
            rgba(246, 239, 234, 0),
            rgba(246, 239, 234, 0.97) 88%
        );
}

.story-card-enhanced .video-story-actions {
    align-items: center;
    flex-wrap: wrap;
}

.story-expand {
    min-height: 2.9rem;
    padding: 0.7rem 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 1px solid rgba(167, 101, 117, 0.55);
    border-radius: 999px;
    background-color: transparent;
    color: #a76575;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition:
        background-color 0.22s ease,
        border-color 0.22s ease,
        color 0.22s ease,
        box-shadow 0.22s ease;
}

.story-expand span,
.story-expand svg {
    color: inherit;
    transition:
        color 0.22s ease,
        fill 0.22s ease;
}

.story-expand span {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.story-expand svg {
    width: 1.1rem;
    height: 1.1rem;
    display: block;
    flex: 0 0 auto;
    fill: currentColor;
}
.story-expand:hover {
    border-color: #F8CBD1;
    background-color: #F8CBD1;
    color: #222733;
}

.story-expand:focus-visible {
    outline: 3px solid rgba(248, 203, 209, 0.42);
    outline-offset: 3px;
}

/* Lector modal */
.story-reader {
    position: fixed;
    inset: 0;
    z-index: 400000;
    display: grid;
    place-items: center;
    padding: clamp(0.75rem, 2vw, 1.5rem);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.story-reader.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.story-reader__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(255, 250, 248, 0.84);
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

.story-reader__card {
    position: relative;
    z-index: 2;
    width: min(100%, 960px);
    height: min(92dvh, 920px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(34, 39, 51, 0.12);
    background:
        linear-gradient(
            145deg,
            rgba(255, 250, 248, 0.99),
            rgba(246, 239, 234, 0.97)
        );
    color: #222733;
    box-shadow:
        0 35px 100px rgba(34, 39, 51, 0.20);
    border-radius: clamp(1.25rem, 3vw, 2rem);
    transform: translateY(18px) scale(0.985);
    transition: transform 0.32s cubic-bezier(.2, .8, .2, 1);
}

.story-reader.is-visible .story-reader__card {
    transform: translateY(0) scale(1);
}

.story-reader__header {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: clamp(1.25rem, 4vw, 2.2rem);
    border-bottom: 1px solid rgba(34, 39, 51, 0.10);
    background:
        linear-gradient(
            180deg,
            rgba(248, 203, 209, 0.28),
            rgba(255, 250, 248, 0.20)
        );
    }

.story-reader__eyebrow {
    display: block;
    margin-bottom: 0.55rem;
    color: #a76575;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.story-reader__header h2 {
    margin: 0;
    color: #222733;
    font-family: "Lora", serif;
    font-size: clamp(1.8rem, 5vw, 3.7rem);
    font-weight: 500;
    line-height: 1.05;
}

.story-reader__category {
    margin: 0.7rem 0 0;
    color: #666a75;
    font-size: 0.9rem;
    line-height: 1.5;
}

.story-reader__close {
    flex: 0 0 auto;
    width: 2.8rem;
    height: 2.8rem;
    display: grid;
    place-items: center;
    border: 2px solid #F8CBD1;
    border-radius: 999px;
    background: #F8CBD1;
    color: #222733;
    font-size: 1.65rem;
    line-height: 1;
    cursor: pointer;
}

.story-reader__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: clamp(1.25rem, 4vw, 2.4rem) clamp(1.25rem, 5vw, 3.2rem) 4rem;
    scrollbar-color: #F8CBD1 rgba(255, 255, 255, 0.08);
    scrollbar-width: thin;
}

.story-reader__body section + section {
    margin-top: 3rem;
}

.coach{
    color: #a76575;
}

.story-reader__body h4 {
    margin: 0 0 1rem;
    color: #a76575;
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.story-reader__body p {
    margin: 0 0 1.15rem;
    color: #454a56;
    font-size: clamp(1rem, 1.6vw, 1.12rem);
    line-height: 1.82;
}

.story-reader-note {
    color: rgba(248, 203, 209, 0.82) !important;
    font-size: 0.88rem !important;
    font-style: italic;
}

body.story-reader-open {
    overflow: hidden;
}

@media (max-width: 700px) {
    .story-card-enhanced .story-preview {
        min-height: 5.8rem;
    }

    .story-card-enhanced .story-preview p {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .story-card-enhanced .video-story-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .story-expand {
        grid-column: 1 / -1;
        width: 100%;
    }

    .story-reader {
        padding: 0;
    }

    .story-reader__card {
        width: 100%;
        height: 100dvh;
        max-height: none;
        border: 0;
        border-radius: 0;
    }

    .story-reader__header {
        padding: 1.1rem;
    }

    .story-reader__body {
        padding: 1.2rem 1.2rem 3rem;
    }

    .story-reader__close {
        width: 2.6rem;
        height: 2.6rem;
    }
}

/*end styles fo slider real stories*/