/*==========================================================
=
=               FISIO CEREZO
=
=               STYLE.CSS
=
==========================================================*/


/*==========================================================
=
= RESET
=
==========================================================*/

*,
*::before,
*::after{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

    scroll-padding-top:90px;

}

body{

    overflow-x:hidden;

    min-height:100vh;

}


/*==========================================================
=
= VARIABLES
=
==========================================================*/

:root{

    /*====================
      COLORES
    ====================*/

    --white:#ffffff;

    --background:#faf8fb;

    --background-soft:#f6f0f8;

    --background-card:rgba(255,255,255,.82);

    --primary:#a46ab6;

    --primary-dark:#7b4a8f;

    --secondary:#d6bfdc;

    --accent:#f2dbe7;

    --rose:#f7e8ef;

    --text:#323232;

    --text-soft:#666666;

    --border:#ebe4ef;

    --success:#3ca76b;

    --shadow:
        0 15px 40px rgba(108,69,122,.08);

    --shadow-hover:
        0 30px 60px rgba(108,69,122,.18);

    /*====================
      RADIOS
    ====================*/

    --radius-xs:8px;

    --radius-s:12px;

    --radius:18px;

    --radius-l:28px;

    --radius-xl:40px;

    --radius-full:999px;

    /*====================
      ESPACIADOS
    ====================*/

    --space-xs:.5rem;

    --space-s:1rem;

    --space-m:2rem;

    --space-l:4rem;

    --space-xl:7rem;

    --space-xxl:10rem;

    /*====================
      TIPOGRAFÍAS
    ====================*/

    --font-title:
        "Cormorant Garamond",
        serif;

    --font-text:
        "Poppins",
        sans-serif;

    /*====================
      TRANSICIONES
    ====================*/

    --transition:

        all .35s ease;

    --transition-slow:

        all .6s ease;

}

/*==========================================================
=
= BODY
=
==========================================================*/

body{

    background:

    radial-gradient(circle at top left,
    rgba(242,219,231,.45),
    transparent 35%),

    radial-gradient(circle at bottom right,
    rgba(214,191,220,.35),
    transparent 30%),

    var(--background);

    color:var(--text);

    font-family:var(--font-text);

    font-size:16px;

    line-height:1.8;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

}

/*==========================================================
=
= SELECCIÓN
=
==========================================================*/

::selection{

    background:var(--primary);

    color:white;

}

/*==========================================================
=
= SCROLLBAR
=
==========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:white;

}

::-webkit-scrollbar-thumb{

    background:var(--secondary);

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary);

}

/*==========================================================
=
= IMÁGENES
=
==========================================================*/

img{

    display:block;

    max-width:100%;

    user-select:none;

}

/*==========================================================
=
= ENLACES
=
==========================================================*/

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

/*==========================================================
=
= LISTAS
=
==========================================================*/

ul{

    list-style:none;

}

/*==========================================================
=
= BOTONES
=
==========================================================*/

button{

    border:none;

    background:none;

    cursor:pointer;

    font-family:inherit;

}

/*==========================================================
=
= CONTAINER
=
==========================================================*/

.container{

    width:min(1180px,92%);

    margin-inline:auto;

}

/*==========================================================
=
= SECTION
=
==========================================================*/

section{

    position:relative;

    padding:

        var(--space-xl)

        0;

}

/*==========================================================
=
= TITULARES
=
==========================================================*/

h1,
h2,
h3,
h4{

    color:var(--primary-dark);

    line-height:1.15;

    font-family:

        var(--font-title);

}

h1{

    font-size:

        clamp(3rem,8vw,5.8rem);

}

h2{

    font-size:

        clamp(2.2rem,5vw,4rem);

}

h3{

    font-size:

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

}

p{

    color:var(--text-soft);

}

/*==========================================================
=
= SECTION TAG
=
==========================================================*/

.section-tag{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    padding:

        .55rem

        1rem;

    background:

        rgba(255,255,255,.75);

    border:

        1px solid

        rgba(164,106,182,.18);

    border-radius:

        var(--radius-full);

    backdrop-filter:

        blur(10px);

    color:

        var(--primary);

    font-size:.9rem;

    font-weight:600;

    margin-bottom:1.5rem;

}

/*==========================================================
=
= SECTION HEADER
=
==========================================================*/

.section-header{

    max-width:700px;

    margin-inline:auto;

    margin-bottom:4rem;

    text-align:center;

}

.section-header p{

    margin-top:1.2rem;

}

/*==========================================================
=
= EFECTO ACUARELA
=
==========================================================*/

section::before{

    content:"";

    position:absolute;

    inset:auto;

    width:380px;

    height:380px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(214,191,220,.28),

            transparent 70%

        );

    filter:blur(60px);

    opacity:.35;

    z-index:-1;

}
/*==========================================================
=
= HEADER
=
==========================================================*/

#header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

    transition:var(--transition);

}

#header.scrolled{

    padding:.6rem 0;

}

.navbar{

    padding:1.2rem 0;

}

.navbar .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:

        rgba(255,255,255,.55);

    backdrop-filter:

        blur(18px);

    border:

        1px solid rgba(255,255,255,.45);

    border-radius:

        var(--radius-xl);

    padding:

        .8rem 2rem;

    box-shadow:

        var(--shadow);

}

/*==========================================================
=
= LOGO
=
==========================================================*/

.logo img{

    width:170px;

    transition:var(--transition);

}

.logo:hover img{

    transform:scale(1.03);

}

/*==========================================================
=
= MENU
=
==========================================================*/

.menu{

    display:flex;

    align-items:center;

    gap:2rem;

}

.menu a{

    position:relative;

    font-weight:500;

    color:var(--text);

}

.menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:var(--transition);

}

.menu a:hover{

    color:var(--primary);

}

.menu a:hover::after{

    width:100%;

}

/*==========================================================
=
= BOTÓN HAMBURGUESA
=
==========================================================*/

.menuButton{

    display:none;

    font-size:1.5rem;

    color:var(--primary);

}

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

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    padding-top:120px;

}

/*==========================================================
=
= FOTO
=
==========================================================*/

.heroBackground{

    position:absolute;

    inset:0;

    z-index:-3;

}

.heroBackground img{

    width:100%;

    height:100%;

    object-fit:cover;

}

/*==========================================================
=
= OVERLAY
=
==========================================================*/

.heroOverlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        rgba(255,255,255,.72),

        rgba(255,255,255,.84)

    ),

    linear-gradient(

        120deg,

        rgba(242,219,231,.35),

        rgba(214,191,220,.20)

    );

}

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

.heroContent{

    position:relative;

    max-width:820px;

    text-align:center;

    z-index:5;

}

.heroLogo{

    margin-bottom:2rem;

}

.heroLogo img{

    width:260px;

    margin:auto;

}

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

.heroSubtitle{

    text-transform:uppercase;

    letter-spacing:4px;

    color:var(--primary);

    font-size:.95rem;

    margin-bottom:1rem;

}

.hero h1{

    margin-bottom:1.8rem;

}

.heroText{

    font-size:1.1rem;

    max-width:650px;

    margin:auto;

}

/*==========================================================
=
= BOTONES
=
==========================================================*/

.heroButtons{

    display:flex;

    justify-content:center;

    gap:1.5rem;

    margin-top:3rem;

    flex-wrap:wrap;

}

.btnPrimary{

    display:inline-flex;

    align-items:center;

    gap:.8rem;

    padding:

        1rem

        2.2rem;

    border-radius:

        var(--radius-full);

    background:

        linear-gradient(

            135deg,

            var(--primary),

            var(--primary-dark)

        );

    color:white;

    font-weight:600;

    box-shadow:

        var(--shadow);

    transition:var(--transition);

}

.btnPrimary:hover{

    transform:

        translateY(-5px);

    box-shadow:

        var(--shadow-hover);

}

.btnSecondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:

        1rem

        2.2rem;

    border-radius:

        var(--radius-full);

    border:

        1px solid rgba(164,106,182,.25);

    background:

        rgba(255,255,255,.75);

    backdrop-filter:

        blur(12px);

    transition:var(--transition);

}

.btnSecondary:hover{

    background:white;

    transform:

        translateY(-5px);

}

/*==========================================================
=
= TARJETAS RÁPIDAS
=
==========================================================*/

.quickCards{

    position:absolute;

    bottom:50px;

    left:50%;

    transform:translateX(-50%);

    display:grid;

    grid-template-columns:

        repeat(3,1fr);

    gap:2rem;

    width:min(1100px,90%);

}

.quickCards article{

    background:

        rgba(255,255,255,.65);

    backdrop-filter:

        blur(15px);

    border-radius:

        var(--radius);

    padding:2rem;

    text-align:center;

    box-shadow:

        var(--shadow);

    transition:var(--transition);

}

.quickCards article:hover{

    transform:

        translateY(-10px);

    box-shadow:

        var(--shadow-hover);

}

.quickCards i{

    font-size:2.2rem;

    color:var(--primary);

    margin-bottom:1rem;

}

.quickCards h3{

    margin-bottom:.8rem;

}

/*==========================================================
=
= INDICADOR SCROLL
=
==========================================================*/

.scrollIndicator{

    position:absolute;

    bottom:15px;

    left:50%;

    transform:translateX(-50%);

}

.scrollIndicator span{

    display:block;

    width:28px;

    height:48px;

    border-radius:40px;

    border:2px solid var(--primary);

    position:relative;

}

.scrollIndicator span::before{

    content:"";

    position:absolute;

    width:6px;

    height:6px;

    background:var(--primary);

    border-radius:50%;

    left:50%;

    transform:translateX(-50%);

    top:8px;

    animation:scrollMouse 2s infinite;

}

/*==========================================================
=
= POR QUÉ ELEGIR FISIO CEREZO
=
==========================================================*/

.why-us{
    overflow:hidden;
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:2rem;
}

.why-card{

    position:relative;

    background:rgba(255,255,255,.75);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.45);

    border-radius:var(--radius);

    padding:2.5rem;

    text-align:center;

    transition:var(--transition);

    box-shadow:var(--shadow);

}

.why-card:hover{

    transform:translateY(-12px);

    box-shadow:var(--shadow-hover);

}

.why-card i{

    font-size:2.8rem;

    color:var(--primary);

    margin-bottom:1.5rem;

}

.why-card h3{

    margin-bottom:1rem;

}

.why-card p{

    font-size:.96rem;

}

/*==========================================================
=
= CLÍNICA
=
==========================================================*/

.clinic{

    background:linear-gradient(
        180deg,
        transparent,
        rgba(255,255,255,.45)
    );

}

.clinic-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:5rem;

}

.clinic-image{

    position:relative;

}

.clinic-image img{

    border-radius:32px;

    box-shadow:var(--shadow-hover);

}

.clinic-image::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    right:-40px;

    bottom:-40px;

    background:radial-gradient(
        rgba(242,219,231,.45),
        transparent
    );

    border-radius:50%;

    filter:blur(45px);

    z-index:-1;

}

.clinic-content p{

    margin-bottom:1.6rem;

}

/*==========================================================
=
= TRATAMIENTOS
=
==========================================================*/

.treatments{

    position:relative;

}

.treatment-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:2rem;

}

.treatment-card{

    display:flex;

    flex-direction:column;

    overflow:hidden;

    background:rgba(255,255,255,.75);

    backdrop-filter:blur(16px);

    border-radius:28px;

    border:1px solid rgba(255,255,255,.4);

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.treatment-card:hover{

    transform:translateY(-12px);

    box-shadow:var(--shadow-hover);

}

.card-image{

    overflow:hidden;

    height:260px;

}

.card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1.1s;

}

.treatment-card:hover img{

    transform:scale(1.08);

}

.card-body{

    padding:2rem;

    display:flex;

    flex-direction:column;

    flex:1;

}

.card-body h3{

    margin-bottom:1rem;

}

.card-body p{

    margin-bottom:2rem;

}

.featured{

    transform:scale(1.04);

    border:2px solid rgba(164,106,182,.18);

}

.featured:hover{

    transform:translateY(-15px) scale(1.04);

}

.badge{

    align-self:flex-start;

    margin-bottom:1rem;

    padding:.4rem 1rem;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

    color:white;

    font-size:.8rem;

    font-weight:600;

}

.btn-card{

    margin-top:auto;

    width:max-content;

    padding:.9rem 1.8rem;

    border-radius:999px;

    background:var(--primary);

    color:white;

    transition:var(--transition);

}

.btn-card:hover{

    background:var(--primary-dark);

    transform:translateY(-4px);

}

/*==========================================================
=
= INDIBA
=
==========================================================*/

.indiba-section{

    background:linear-gradient(
        180deg,
        rgba(242,219,231,.22),
        transparent
    );

}

.two-columns{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:5rem;

}

.two-columns img{

    border-radius:32px;

    box-shadow:var(--shadow-hover);

}

.benefits{

    margin-top:2rem;

}

.benefits li{

    margin-bottom:1rem;

    padding-left:.3rem;

    color:var(--text);

    font-weight:500;

}

/*==========================================================
=
= DRENAJE
=
==========================================================*/

.lymphatic-section{

    background:linear-gradient(
        180deg,
        transparent,
        rgba(214,191,220,.18)
    );

}

.reverse-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:5rem;

}

.reverse-grid img{

    border-radius:32px;

    box-shadow:var(--shadow-hover);

}

.benefit-list{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:1.2rem;

    margin-top:2rem;

}

.benefit-list div{

    display:flex;

    align-items:center;

    gap:.8rem;

    background:white;

    padding:1rem;

    border-radius:16px;

    box-shadow:var(--shadow);

}

.benefit-list i{

    color:var(--primary);

    font-size:1.2rem;

}

/*==========================================================
=
= DECORACIONES
=
==========================================================*/

.clinic::before,
.treatments::before,
.indiba-section::before,
.lymphatic-section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:radial-gradient(
        rgba(214,191,220,.18),
        transparent 70%
    );

    filter:blur(80px);

    z-index:-1;

}

.clinic::before{

    top:-80px;
    right:-120px;

}

.treatments::before{

    left:-120px;
    bottom:-120px;

}

.indiba-section::before{

    right:-160px;
    top:40%;

}

.lymphatic-section::before{

    left:-160px;
    top:30%;

}

/*==========================================================
=
= TARIFAS
=
==========================================================*/

.pricing{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2rem;
}

.price-card{

    position:relative;

    display:flex;
    flex-direction:column;

    background:rgba(255,255,255,.82);

    backdrop-filter:blur(18px);

    border-radius:28px;

    padding:2.5rem;

    text-align:center;

    box-shadow:var(--shadow);

    transition:var(--transition);

    overflow:hidden;

}

.price-card::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-50%;

    width:60%;

    height:300%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.55),
        transparent
    );

    transform:rotate(20deg);

    transition:.9s;

}

.price-card:hover::before{

    left:140%;

}

.price-card:hover{

    transform:translateY(-12px);

    box-shadow:var(--shadow-hover);

}

.price-card h3{

    margin-bottom:1rem;

}

.price-card .price{

    font-size:3rem;

    color:var(--primary-dark);

    font-family:var(--font-title);

    margin:1rem 0;

}

.price-card ul{

    margin:2rem 0;

    text-align:left;

}

.price-card li{

    margin-bottom:.8rem;

}

.price-card button{

    margin-top:auto;

}

/*==========================================================
=
= GALERÍA
=
==========================================================*/

.gallery{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(280px,1fr));

    gap:1.5rem;

}

.gallery img{

    width:100%;

    aspect-ratio:1;

    object-fit:cover;

    border-radius:24px;

    cursor:pointer;

    transition:.6s;

    box-shadow:var(--shadow);

}

.gallery img:hover{

    transform:scale(1.04);

}

/*==========================================================
=
= OPINIONES
=
==========================================================*/

.reviews{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:2rem;

}

.review{

    background:white;

    border-radius:24px;

    padding:2rem;

    box-shadow:var(--shadow);

}

.review .stars{

    color:#f5b301;

    margin-bottom:1rem;

}

.review h4{

    margin-top:1rem;

}

/*==========================================================
=
= CONTACTO
=
==========================================================*/

.contact-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:3rem;

}

.contact-card{

    background:white;

    border-radius:24px;

    padding:2rem;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.contact-card:hover{

    transform:translateY(-8px);

}

.contact-item{

    display:flex;

    align-items:center;

    gap:1rem;

    margin-bottom:1.5rem;

}

.contact-item i{

    width:54px;

    height:54px;

    border-radius:50%;

    display:grid;

    place-items:center;

    background:var(--rose);

    color:var(--primary);

    font-size:1.2rem;

}

/*==========================================================
=
= MAPA
=
==========================================================*/

.map-wrapper{

    overflow:hidden;

    border-radius:30px;

    box-shadow:var(--shadow-hover);

}

.map-wrapper iframe{

    width:100%;

    height:500px;

    border:0;

}

/*==========================================================
=
= FOOTER
=
==========================================================*/

/*==========================================================
=
= FOOTER
=
==========================================================*/

.footer{

    position:relative;

    overflow:hidden;

    padding:5rem 0 2rem;

    background:
        linear-gradient(
            180deg,
            #fdf8fb 0%,
            #f8eef5 45%,
            #f3e4ee 100%
        );

    border-top:1px solid rgba(182,120,168,.18);

}

.footer::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at 15% 20%,
            rgba(214,171,198,.18),
            transparent 22%
        ),

        radial-gradient(
            circle at 80% 70%,
            rgba(206,169,210,.16),
            transparent 24%
        );

    pointer-events:none;

}

.footer,
.footer p,
.footer li,
.footer a{

    color:#7d5976;

}

.footer,
.footer p,
.footer li,
.footer a{

    color:#7d5976;

}

.footer a{

    transition:.25s;

    text-decoration:none;

}

.footer a:hover{

    color:var(--primary);

    padding-left:4px;

}

.footer-logo{

    width:180px;

    margin-bottom:1rem;

    opacity:.96;

}

.footer-bottom{

    margin-top:3rem;

    padding-top:1.5rem;

    border-top:1px solid rgba(176,123,170,.18);

    text-align:center;

    color:#9d7d94;

    font-size:.9rem;

}

.social{

    display:flex;

    gap:1rem;

}

.social a{

    display:grid;

    place-items:center;

    width:46px;

    height:46px;

    border-radius:50%;

    background:white;

    color:#a46ab6;

    box-shadow:0 10px 25px rgba(160,120,160,.12);

    transition:.3s;

}

.social a:hover{

    transform:translateY(-4px);

    background:#a46ab6;

    color:white;

}

/*==========================================================
=
= DISTRIBUCIÓN DEL FOOTER
=
==========================================================*/

.footer-grid{

    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr
        1fr;

    gap:3rem;

    align-items:flex-start;

}

.footer-grid > div:first-child{

    padding-right:2rem;

}

/*==========================================================
=
= BOTÓN WHATSAPP
=
==========================================================*/

.floating-whatsapp{

    position:fixed;

    right:25px;

    bottom:25px;

    width:65px;

    height:65px;

    border-radius:50%;

    background:#25D366;

    display:grid;

    place-items:center;

    color:white;

    font-size:2rem;

    box-shadow:0 15px 30px rgba(0,0,0,.2);

    z-index:999;

    transition:var(--transition);

}

.floating-whatsapp:hover{

    transform:scale(1.08);

}

/*==========================================================
=
= VOLVER ARRIBA
=
==========================================================*/

.backToTop{

    position:fixed;

    bottom:105px;

    right:32px;

    width:52px;

    height:52px;

    border-radius:50%;

    background:var(--primary);

    color:white;

    opacity:0;

    visibility:hidden;

    transition:var(--transition);

}

.backToTop.show{

    opacity:1;

    visibility:visible;

}

/*==========================================================
=
= MODALES
=
==========================================================*/

.modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    display:none;

    justify-content:center;

    align-items:center;

    padding:2rem;

    z-index:99999;

}

.modal.active{

    display:flex;

}

.modal-content{

    background:white;

    border-radius:28px;

    width:min(700px,100%);

    padding:3rem;

    position:relative;

    animation:modalShow .35s ease;

}

.closeModal{

    position:absolute;

    right:20px;

    top:20px;

    font-size:2rem;

}

/*==========================================================
=
= LOADER
=
==========================================================*/

#loader{

    position:fixed;

    inset:0;

    background:white;

    display:grid;

    place-items:center;

    z-index:999999;

}

.loader-flower{

    font-size:3rem;

    animation:spin 3s linear infinite;

}

/*==========================================================
=
= EFECTOS GENERALES
=
==========================================================*/

.fade-up{

    opacity:0;

    transform:translateY(50px);

}

.fade-up.show{

    opacity:1;

    transform:none;

    transition:.8s ease;

}

.glass{

    background:rgba(255,255,255,.55);

    backdrop-filter:blur(20px);

}

.shadow{

    box-shadow:var(--shadow);

}

.shadow-hover:hover{

    box-shadow:var(--shadow-hover);

}

/*==========================================================
=
= ANIMACIONES BÁSICAS
=
==========================================================*/

@keyframes modalShow{

    from{

        opacity:0;

        transform:translateY(40px) scale(.95);

    }

    to{

        opacity:1;

        transform:none;

    }

}

@keyframes spin{

    from{

        transform:rotate(0);

    }

    to{

        transform:rotate(360deg);

    }

}

/*==========================================================
=
= MAPA INTERACTIVO
=
==========================================================*/

.map-wrapper{
    position:relative;
    min-height:420px;
    background:
        linear-gradient(
            135deg,
            var(--background-soft),
            var(--rose)
        );
}

.map-wrapper::before{
    content:"Cargando mapa…";
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:var(--primary-dark);
    font-weight:500;
    pointer-events:none;
    transition:opacity .35s ease;
}

.map-wrapper--loaded::before{
    opacity:0;
}

.map-wrapper iframe{
    position:relative;
    z-index:1;
    opacity:0;
    transition:opacity .45s ease;
}

.map-wrapper iframe.map-loaded{
    opacity:1;
}

.map-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:1rem;
    margin-top:2rem;
}

.map-actions .is-disabled{
    opacity:.45;
    pointer-events:none;
}

.copy-success{
    color:var(--success);
}

.image-error{
    min-height:220px;
    background:
        linear-gradient(
            135deg,
            var(--background-soft),
            var(--rose)
        );
    color:transparent;
}

/* =========================================================
   CORRECCIÓN: PÉTALOS COMO FONDO, SIN OCUPAR ESPACIO
========================================================= */

#petalsCanvas {
    position: fixed !important;
    inset: 0 !important;

    display: block;
    width: 100vw !important;
    height: 100vh !important;

    margin: 0 !important;
    padding: 0 !important;

    pointer-events: none;
    z-index: 2;

    opacity: 0.72;
}

/* El contenido debe quedar por encima de los pétalos */
#header {
    z-index: 1000;
}

main,
.hero,
.quick-access-section,
.footer {
    position: relative;
    z-index: 3;
}

/* El hero debe comenzar inmediatamente arriba */
.hero {
    margin-top: 0 !important;
}

/* Evita posibles espacios creados por el canvas inline */
body > canvas {
    vertical-align: top;
}


/*==========================================================
=
= TARJETA DE HORARIO
=
==========================================================*/

.schedule-card{
    position:relative;
    overflow:hidden;
    padding:2.2rem;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.94),
            rgba(246,240,248,.9)
        );
    border:1px solid rgba(164,106,182,.14);
}

.schedule-card::before{
    content:"";
    position:absolute;
    top:-90px;
    right:-80px;
    width:220px;
    height:220px;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(214,191,220,.38),
            transparent 70%
        );
    pointer-events:none;
}

.schedule-card__header{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:1.2rem;
    margin-bottom:2rem;
}

.schedule-card__header .section-tag{
    margin-bottom:.5rem;
}

.schedule-card__header h3{
    margin:0;
}

.schedule-card__icon{
    display:grid;
    place-items:center;
    flex:0 0 auto;
    width:64px;
    height:64px;
    border-radius:20px;
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );
    color:white;
    font-size:1.55rem;
    box-shadow:
        0 14px 28px rgba(123,74,143,.2);
}

.schedule-summary{
    position:relative;
    z-index:1;
    display:grid;
    gap:.8rem;
}

.schedule-row{
    display:grid;
    grid-template-columns:minmax(110px, .8fr) 1.4fr;
    align-items:center;
    gap:1rem;
    margin:0;
    padding:1rem 1.1rem;
    border-radius:16px;
    background:rgba(255,255,255,.82);
    border:1px solid rgba(164,106,182,.1);
    transition:var(--transition);
}

.schedule-row:hover{
    transform:translateX(4px);
    border-color:rgba(164,106,182,.24);
    box-shadow:var(--shadow);
}

.schedule-row strong{
    color:var(--primary-dark);
    font-family:var(--font-title);
    font-size:1.15rem;
}

.schedule-row span{
    justify-self:end;
    color:var(--text);
    font-size:.92rem;
    font-weight:500;
    text-align:right;
}

.schedule-row span::before{

    content:"🌸";
    display:inline-block;
    margin-right:.55rem;
    font-size:.95rem;
    line-height:1;
    vertical-align:middle;
    transform:translateY(-1px);

}

.schedule-row.is-closed span::before{

    content:"🌸";

    opacity:.45;

    filter:grayscale(100%);

}

.schedule-row.is-closed span{
    color:var(--text-soft);
}

.schedule-row.is-closed span::before{
    background:#b7aab9;
    box-shadow:
        0 0 0 4px rgba(183,170,185,.14);
}

.schedule-card__note{
    position:relative;
    z-index:1;
    display:flex;
    align-items:flex-start;
    gap:.9rem;
    margin-top:1.4rem;
    padding:1rem 1.1rem;
    border-radius:16px;
    background:var(--rose);
}

.schedule-card__note i{
    margin-top:.25rem;
    color:var(--primary);
}

.schedule-card__note p{
    margin:0;
    font-size:.9rem;
}

.schedule-card__button{
    position:relative;
    z-index:1;
    width:100%;
    justify-content:center;
    margin-top:1.4rem;
}

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

.backToTop{

    position:fixed !important;

    right:28px !important;
    bottom:105px !important;

    left:auto !important;
    top:auto !important;

    display:grid;
    place-items:center;

    width:52px;
    height:52px;

    padding:0;

    border:0;
    border-radius:50%;

    background:var(--primary);
    color:#ffffff;

    font-size:1rem;

    box-shadow:
        0 12px 28px
        rgba(123,74,143,.25);

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

    z-index:9998;

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease,
        background .3s ease;

}

.backToTop.show{

    opacity:1;
    visibility:visible;
    pointer-events:auto;

}

.backToTop:hover{

    background:var(--primary-dark);
    transform:translateY(-4px);

}

.backToTop i{

    display:block;
    line-height:1;

}

/*==========================================================
=
= CORRECCIÓN DEFINITIVA DEL LIGHTBOX DE GALERÍA
=
==========================================================*/

.gallery-lightbox{
    position:fixed !important;
    inset:0 !important;

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

    width:100vw;
    height:100vh;

    margin:0 !important;
    padding:clamp(1rem, 4vw, 3rem);

    background:rgba(31,20,36,.88);
    backdrop-filter:blur(18px);

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

    overflow:hidden;

    z-index:100000 !important;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}

.gallery-lightbox.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.gallery-lightbox__content{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    width:min(1100px,82vw);
    max-height:88vh;

    margin:0;
}

.gallery-lightbox__image{
    display:block;
    max-width:100%;
    max-height:76vh;

    object-fit:contain;

    border-radius:22px;

    box-shadow:
        0 30px 80px rgba(0,0,0,.35);
}

.gallery-lightbox__close,
.gallery-lightbox__navigation{
    position:absolute;

    display:grid;
    place-items:center;

    width:52px;
    height:52px;

    padding:0;
    margin:0;

    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;

    background:rgba(255,255,255,.14);
    color:#fff;

    font-size:1.2rem;
    line-height:1;

    z-index:4;
}

.gallery-lightbox__close{
    top:24px;
    right:24px;
}

.gallery-lightbox__navigation{
    top:50%;
    transform:translateY(-50%);
}

.gallery-lightbox__previous{
    left:24px;
}

.gallery-lightbox__next{
    right:24px;
}

.gallery-lightbox__information{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:2rem;

    width:100%;
    margin-top:1rem;
    padding:.7rem 1rem;

    color:#fff;
}

.gallery-lightbox__caption{
    color:rgba(255,255,255,.92);
}

.gallery-lightbox__counter{
    color:rgba(255,255,255,.72);
}

body:not(.gallery-open) .gallery-lightbox{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
}

/* =========================================================
   MODALES — CORRECCIÓN GENERAL
========================================================= */

body.modal-open{
    overflow:hidden;
}

.modal{
    position:fixed !important;
    inset:0 !important;

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

    width:100%;
    height:100%;

    padding:2rem;

    background:rgba(38,24,43,.66);
    backdrop-filter:blur(12px);

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

    overflow-y:auto;

    z-index:100001 !important;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}

.modal[hidden]{
    display:none !important;
}

.modal.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.modal-content{
    position:relative;

    width:min(700px, 100%);
    max-width:100%;
    max-height:calc(100dvh - 4rem);

    margin:auto;
    padding:3rem;

    overflow-y:auto;
    overscroll-behavior:contain;

    border-radius:28px;
    background:#fff;

    box-shadow:
        0 30px 90px rgba(38,24,43,.28);

    transform:translateY(30px) scale(.97);

    transition:transform .3s ease;
}

.modal.active .modal-content{
    transform:none;
}

.closeModal{
    position:sticky;
    top:0;
    float:right;

    display:grid;
    place-items:center;

    width:46px;
    height:46px;

    margin-top:-1rem;
    margin-right:-1rem;

    border-radius:50%;

    background:var(--rose);
    color:var(--primary-dark);

    font-size:1.2rem;

    z-index:3;
}

.modal-content h2,
.modal-content h3{
    clear:both;
}

.modal-list{
    display:grid;
    gap:.75rem;

    margin:1.3rem 0 1.6rem;
    padding:0;

    list-style:none;
}

.modal-list li{
    position:relative;
    padding-left:1.6rem;
    color:var(--text-soft);
}

.modal-list li::before{
    content:"";
    position:absolute;
    left:0;
    top:.75em;

    width:7px;
    height:7px;

    border-radius:50%;
    background:var(--primary);
}

.modal-note{
    margin:1.5rem 0;
    padding:1rem 1.1rem;

    border-radius:16px;
    background:var(--rose);
}

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

@media (max-width: 768px){

    .modal{
        align-items:flex-end;
        padding:0;
    }

    .modal-content{
        width:100%;
        max-height:calc(
            100dvh -
            env(safe-area-inset-top, 0px) -
            1rem
        );

        margin:0;
        padding:
            1.5rem
            1.25rem
            calc(
                1.5rem +
                env(safe-area-inset-bottom, 0px)
            );

        border-radius:26px 26px 0 0;

        transform:translateY(100%);
    }

    .modal.active .modal-content{
        transform:translateY(0);
    }

    .closeModal{
        width:44px;
        height:44px;

        margin-top:-.5rem;
        margin-right:-.25rem;
    }

    .modal-content .section-tag{
        max-width:calc(100% - 60px);
    }

    .modal-content h2{
        font-size:clamp(2rem, 10vw, 3rem);
        line-height:1.05;
    }

    .modal-content h3{
        font-size:1.45rem;
    }

    .modal-content .btnPrimary{
        width:100%;
        justify-content:center;
    }

}

@media (max-width: 390px){

    .modal-content{
        padding:
            1.25rem
            1rem
            calc(
                1.25rem +
                env(safe-area-inset-bottom, 0px)
            );
    }

    .modal-content p,
    .modal-list li{
        font-size:.94rem;
    }

}