/* ========================================*

   *KIDDOS PLACE CHILDCARE*

   *MAIN STYLESHEET*

*======================================== */



/* ========================================*

   *COLORS*

*======================================== */

:root {

    --mint: #7AC9B0;

    --mint-dark: #5BAE93;

    --mint-light: #E4F6F0;

    --mint-extra-light: #F3FBF8;

    --peach: #FFC98A;

    --peach-dark: #F5A45E;

    --peach-light: #FFF1DF;

    --coral: #FF7F7A;

    --coral-dark: #ED6864;

    --coral-light: #FFE6E4;

    --dark-green: #2E6B4E;

    --dark-green-hover: #24563E;

    --light-gray: #F2F2F2;

    --text: #4B514D;

    --text-light: #6A716C;

    --white: #FFFFFF;

    --shadow:

        0 15px 40px

        rgba(46, 107, 78, 0.10);

    --shadow-hover:

        0 20px 50px

        rgba(46, 107, 78, 0.16);

}



/* ========================================*

   *RESET*

*======================================== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

    font-family:

        "Nunito",

        sans-serif;

    color:

        var(--text);

    background:

        var(--white);

    line-height: 1.6;

    overflow-x: hidden;

}



img {

    display: block;

    max-width: 100%;

}



a {

    text-decoration: none;

    color: inherit;

}



button {

    border: none;

    font-family: inherit;

}



ul {

    list-style: none;

}





/* ========================================*

   *GENERAL*

*======================================== */

.container {

    width: min(

        1180px,

        90%

    );

    margin: 0 auto;

}



.section-heading {

    max-width: 720px;

    margin-bottom: 45px;

}



.section-label {

    color:

        var(--dark-green);

    font-size: 15px;

    font-weight: 800;

    letter-spacing: 0.4px;

    margin-bottom: 8px;

}



.section-title {

    font-family:

        "Bree Serif",

        serif;

    color:

        var(--dark-green);

    font-weight: 400;

    font-size:

        clamp(

            38px,

            4vw,

            52px

        );

    line-height: 1.1;

    margin-bottom: 18px;

}



.section-title span {

    color:

        var(--coral);

}



.section-description {

    color:

        var(--text-light);

    font-size: 17px;

    max-width: 650px;

}





/* ========================================*

   *BUTTONS*

*======================================== */

.btn-primary {

    display:

        inline-flex;

    align-items:

        center;

    justify-content:

        center;

    min-height: 48px;

    padding:

        13px 25px;

    border-radius:

        100px;

    background:

        var(--dark-green);

    color:

        var(--white);

    font-weight:

        800;

    transition:

        0.25s ease;

    box-shadow:

        0 8px 20px

        rgba(

            46,

            107,

            78,

            0.18

        );

}



.btn-primary:hover {

    background:

        var(--dark-green-hover);

    transform:

        translateY(-3px);

}



.btn-secondary {

    display:

        inline-flex;

    align-items:

        center;

    justify-content:

        center;

    gap: 10px;

    min-height: 48px;

    padding:

        11px 25px;

    border:

        2px solid

        var(--mint);

    border-radius:

        100px;

    color:

        var(--dark-green);

    background:

        var(--white);

    font-weight:

        800;

    transition:

        0.25s ease;

}



.btn-secondary:hover {

    background:

        var(--mint-light);

    transform:

        translateY(-3px);

}





/* ========================================*

   *HEADER*

*======================================== */

.header {

    position:

        sticky;

    top: 0;

    z-index: 999;

    background:

        rgba(

            255,

            255,

            255,

            0.96

        );

    backdrop-filter:

        blur(12px);

    border-bottom:

        1px solid

        rgba(

            46,

            107,

            78,

            0.08

        );

}



.navbar {

    min-height: 125px;

    display: flex;

    align-items:

        center;

    justify-content:

        space-between;

    gap: 30px;

}



/* ========================================*

   *LOGO HEADER - MÁS GRANDE*

*======================================== */

.logo {

    flex-shrink: 0;

    display: flex;

    align-items: center;

}



.logo img {

    width: 210px;

    height: auto;

    display: block;

    object-fit: contain;

    transition:

        transform

        0.25s ease;

}



.logo img:hover {

    transform:

        scale(1.03);

}





/* ========================================*

   *NAVIGATION*

*======================================== */

.nav-links {

    display: flex;

    align-items:

        center;

    gap: 31px;

}



.nav-links a {

    position:

        relative;

    color:

        var(--text);

    font-size:

        15px;

    font-weight:

        700;

    transition:

        0.25s ease;

}



.nav-links a::after {

    content: "";

    position:

        absolute;

    left: 0;

    bottom: -7px;

    width: 0;

    height: 3px;

    border-radius: 5px;

    background:

        var(--mint);

    transition:

        width

        0.25s ease;

}



.nav-links a:hover {

    color:

        var(--dark-green);

}



.nav-links a:hover::after {

    width: 100%;

}





/* ========================================*

   *TOUR BUTTON*

*======================================== */

.tour-btn {

    padding:

        13px 23px;

    border-radius:

        100px;

    background:

        var(--coral);

    color:

        var(--white);

    font-size:

        14px;

    font-weight:

        800;

    box-shadow:

        0 8px 20px

        rgba(

            255,

            127,

            122,

            0.24

        );

    transition:

        0.25s ease;

}



.tour-btn:hover {

    background:

        var(--coral-dark);

    transform:

        translateY(-2px);

}



.menu-btn {

    display: none;

    cursor: pointer;

    background:

        transparent;

    color:

        var(--dark-green);

    font-size:

        30px;

}





/* ========================================*

   *HERO*

*======================================== */

.hero {

    position:

        relative;

    overflow:

        hidden;

    padding:

        75px 0 55px;

}



.hero::before {

    content: "";

    position:

        absolute;

    z-index: -1;

    width: 420px;

    height: 420px;

    left: -220px;

    top: -220px;

    border-radius:

        50%;

    background:

        var(--mint-light);

}



.hero::after {

    content: "";

    position:

        absolute;

    z-index: -1;

    width: 230px;

    height: 230px;

    right: -110px;

    bottom: -60px;

    border-radius:

        50%;

    background:

        var(--peach-light);

}



.hero-grid {

    display:

        grid;

    grid-template-columns:

        0.92fr

        1.08fr;

    gap: 55px;

    align-items:

        center;

}



.mini-badge {

    display:

        inline-flex;

    align-items:

        center;

    gap: 9px;

    margin-bottom: 20px;

    padding:

        9px 17px;

    border-radius:

        100px;

    background:

        var(--peach-light);

    color:

        var(--coral);

    font-size:

        14px;

    font-weight:

        800;

}



.hero-content h1 {

    font-family:

        "Bree Serif",

        serif;

    font-weight: 400;

    font-size:

        clamp(

            50px,

            5vw,

            72px

        );

    line-height: 1.02;

    margin-bottom: 22px;

}



.green {

    color:

        var(--dark-green);

}



.peach {

    color:

        var(--peach-dark);

}



.coral {

    color:

        var(--coral);

}



.hero-description {

    max-width: 520px;

    color:

        var(--text-light);

    font-size: 18px;

    margin-bottom: 30px;

}



.hero-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

}



.hero-photo {

    position: relative;

}



.hero-photo img {

    width: 100%;

    height: 475px;

    object-fit: cover;

    border-radius:

        130px

        32px

        130px

        32px;

    box-shadow:

        0 25px 60px

        rgba(

            46,

            107,

            78,

            0.15

        );

}



.hero-heart {

    position:

        absolute;

    left: -35px;

    bottom: 38px;

    color:

        var(--coral);

    font-size: 52px;

    transform:

        rotate(-12deg);

}



.hero-star {

    position:

        absolute;

    left: -13px;

    top: 100px;

    color:

        var(--peach-dark);

    font-size: 20px;

}





/* ========================================*

   *FEATURES*

*======================================== */

.features {

    padding:

        5px 0 75px;

}



.feature-grid {

    display:

        grid;

    grid-template-columns:

        repeat(

            3,

            1fr

        );

    gap: 20px;

}



.feature-card {

    display:

        flex;

    align-items:

        center;

    gap: 18px;

    padding: 23px;

    background:

        var(--white);

    border:

        1px solid

        rgba(

            46,

            107,

            78,

            0.08

        );

    border-radius:

        25px;

    box-shadow:

        var(--shadow);

    transition:

        0.3s ease;

}



.feature-card:hover {

    transform:

        translateY(-6px);

    box-shadow:

        var(--shadow-hover);

}



.feature-icon {

    width: 72px;

    height: 72px;

    min-width: 72px;

    display:

        flex;

    align-items:

        center;

    justify-content:

        center;

    border-radius:

        50%;

    font-size: 31px;

    font-weight: 800;

}



.mint-icon {

    background:

        var(--mint-light);

    color:

        var(--dark-green);

}



.peach-icon {

    background:

        var(--peach-light);

    color:

        var(--peach-dark);

}



.coral-icon {

    background:

        var(--coral-light);

    color:

        var(--coral);

}



.feature-card h3 {

    font-family:

        "Bree Serif",

        serif;

    color:

        var(--dark-green);

    font-size: 21px;

    font-weight: 400;

    margin-bottom: 4px;

}



.feature-card p {

    color:

        var(--text-light);

    font-size: 14px;

}





/* ========================================
   EDADES QUE ATENDEMOS
======================================== */

.programs {
    position: relative;
    padding: 85px 0;
    background:
        linear-gradient(
            180deg,
            var(--mint-extra-light),
            var(--mint-light)
        );
}

/* Encabezado de la sección */
.programs .section-heading {
    max-width: 780px;
    margin: 0 auto 45px;
    text-align: center;
}

.programs .section-description {
    margin-left: auto;
    margin-right: auto;
}


/* ========================================
   TARJETA GENERAL DE EDADES
======================================== */

.age-care-card {
    position: relative;
    overflow: hidden;
    padding: 30px;
    background: var(--white);
    border:
        1px solid
        rgba(46, 107, 78, 0.08);
    border-radius: 32px;
    box-shadow: var(--shadow);
}


/* DECORACIÓN */

.age-care-card::before {
    content: "♡";
    position: absolute;
    top: -28px;
    right: 28px;
    color:
        rgba(
            255,
            127,
            122,
            0.13
        );
    font-size: 125px;
    line-height: 1;
    transform: rotate(12deg);
    pointer-events: none;
}

.age-care-card::after {
    content: "★";
    position: absolute;
    left: 28px;
    bottom: 18px;
    color:
        rgba(
            245,
            164,
            94,
            0.16
        );
    font-size: 42px;
    pointer-events: none;
}


/* ========================================
   FOTOGRAFÍAS
   Las 3 imágenes pertenecen a una sola
   sección, no representan grupos.
======================================== */

.age-care-images {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns:
        1.15fr
        0.85fr
        0.85fr;
    gap: 16px;
    margin-bottom: 32px;
}

.age-care-image {
    height: 235px;
    overflow: hidden;
    border-radius: 24px;
    background: var(--mint-light);
}

.age-care-image:first-child {
    border-radius:
        65px 24px
        24px 24px;
}

.age-care-image:last-child {
    border-radius:
        24px 65px
        24px 24px;
}

.age-care-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition:
        transform
        0.4s ease;
}

.age-care-image:hover img {
    transform: scale(1.05);
}


/* ========================================
   CONTENIDO DE EDADES
======================================== */

.age-care-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.age-main-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 10px 20px;
    border-radius: 100px;
    background: var(--peach-light);
    color: var(--coral);
    font-size: 15px;
    font-weight: 800;
}

.age-care-content h3 {
    margin-bottom: 16px;
    color: var(--dark-green);
    font-family:
        "Bree Serif",
        serif;
    font-size:
        clamp(
            29px,
            3vw,
            39px
        );
    font-weight: 400;
    line-height: 1.15;
}

.age-care-content p {
    max-width: 720px;
    margin: 0 auto 12px;
    color: var(--text-light);
    font-size: 16px;
    line-height: 1.75;
}


/* ========================================
   EDADES - TABLET
======================================== */

@media (max-width: 950px) {

    .age-care-card {
        padding: 25px;
    }

    .age-care-images {
        grid-template-columns:
            repeat(
                3,
                1fr
            );
    }

    .age-care-image {
        height: 210px;
    }
}


/* ========================================
   EDADES - MOBILE
======================================== */

@media (max-width: 600px) {

    .programs {
        padding: 65px 0;
    }

    .programs .section-heading {
        margin-bottom: 32px;
    }

    .age-care-card {
        padding: 18px;
        border-radius: 26px;
    }

    .age-care-images {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 25px;
    }

    .age-care-image,
    .age-care-image:first-child,
    .age-care-image:last-child {
        height: 245px;
        border-radius: 20px;
    }

    .age-main-badge {
        padding: 9px 16px;
        font-size: 14px;
    }

    .age-care-content h3 {
        font-size: 29px;
    }

    .age-care-content p {
        font-size: 15px;
    }

    .age-care-card::before {
        right: -15px;
        font-size: 95px;
    }
}


/* ========================================
   EDADES - SMALL MOBILE
======================================== */

@media (max-width: 400px) {

    .age-care-image,
    .age-care-image:first-child,
    .age-care-image:last-child {
        height: 215px;
    }

    .age-care-content h3 {
        font-size: 26px;
    }
}

/* ========================================*

   *ABOUT*

*======================================== */

.about {

    padding:

        100px 0;

}



.about-grid {

    display:

        grid;

    grid-template-columns:

        1fr

        1fr;

    gap: 75px;

    align-items:

        center;

}



.about-image {

    position:

        relative;

}



.about-image img {

    width: 100%;

    height: 470px;

    object-fit: cover;

    border-radius:

        55px

        135px

        55px

        135px;

    box-shadow:

        var(--shadow);

}



.about-message {

    position:

        absolute;

    right: -20px;

    bottom: -22px;

    display:

        flex;

    align-items:

        center;

    gap: 8px;

    padding:

        22px 27px;

    border-radius:

        24px;

    background:

        var(--peach);

    color:

        var(--dark-green);

    font-weight:

        800;

    box-shadow:

        var(--shadow);

}



.about-message span {

    color:

        var(--coral);

    font-size: 20px;

}



.about-text {

    color:

        var(--text-light);

    font-size: 17px;

    margin-bottom: 25px;

}



.check-list {

    margin-bottom: 30px;

}



.check-list li {

    display:

        flex;

    align-items:

        center;

    gap: 10px;

    margin-bottom: 12px;

    color:

        var(--dark-green);

    font-weight: 700;

}



.check-list span {

    color:

        var(--coral);

}





/* ========================================*

   *GALLERY*

*======================================== */

.gallery {

    padding:

        90px 0;

    background:

        var(--light-gray);

}



.gallery-heading {

    max-width: 700px;

    text-align: center;

    margin:

        0 auto 45px;

}



.gallery-grid {

    display:

        grid;

    grid-template-columns:

        repeat(

            4,

            1fr

        );

    grid-auto-rows:

        220px;

    gap: 18px;

}



.gallery-item {

    overflow: hidden;

    border-radius:

        28px;

    box-shadow:

        var(--shadow);

}



.gallery-large {

    grid-column:

        span 2;

    grid-row:

        span 2;

}



.gallery-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:

        0.4s ease;

}



.gallery-item:hover img {

    transform:

        scale(1.06);

}





/* ========================================*

   *TESTIMONIAL*

*======================================== */

.testimonial-section {

    padding:

        80px 0;

    background:

        #FFF9F3;

}



.testimonial {

    position:

        relative;

    max-width: 900px;

    margin:

        0 auto;

    padding:

        45px 60px;

    text-align:

        center;

    border:

        2px solid

        var(--peach-light);

    border-radius:

        32px;

    background:

        var(--white);

    box-shadow:

        var(--shadow);

}



.quote {

    height: 50px;

    color:

        var(--coral);

    font-family:

        "Bree Serif",

        serif;

    font-size: 78px;

    line-height: 0.75;

}



.testimonial p {

    font-size: 18px;

    font-style: italic;

    color:

        var(--text);

    margin-bottom: 18px;

}



.testimonial strong {

    color:

        var(--dark-green);

}



.testimonial-hearts {

    margin-top: 18px;

    color:

        var(--coral);

    letter-spacing: 7px;

}





/* ========================================*

   *ENROLLMENT*

*======================================== */

.enrollment {

    padding:

        90px 0;

}



.enrollment-box {

    position:

        relative;

    overflow:

        hidden;

    text-align:

        center;

    padding:

        65px 25px;

    border-radius:

        42px;

    background:

        linear-gradient(

            135deg,

            var(--mint),

            #A1DECB

        );

}



.enrollment-small {

    position:

        relative;

    z-index: 2;

    margin-bottom: 8px;

    color:

        var(--dark-green);

    font-weight: 800;

}



.enrollment-box h2 {

    position:

        relative;

    z-index: 2;

    max-width: 650px;

    margin:

        0 auto 15px;

    color:

        var(--dark-green);

    font-family:

        "Bree Serif",

        serif;

    font-size:

        clamp(

            38px,

            5vw,

            50px

        );

    font-weight: 400;

}



.enrollment-box >

p:not(.enrollment-small) {

    position:

        relative;

    z-index: 2;

    max-width: 650px;

    margin:

        0 auto 26px;

    color:

        #365B4A;

}



.cta-button {

    position:

        relative;

    z-index: 2;

    display:

        inline-block;

    padding:

        14px 26px;

    border-radius:

        100px;

    background:

        var(--coral);

    color:

        var(--white);

    font-weight:

        800;

    transition:

        0.25s ease;

}



.cta-button:hover {

    background:

        var(--coral-dark);

    transform:

        translateY(-3px);

}



.decor-heart {

    position:

        absolute;

    color:

        rgba(

            255,

            255,

            255,

            0.28

        );

    font-size: 160px;

    line-height: 1;

}



.left-heart {

    left: 30px;

    top: -45px;

    transform:

        rotate(-12deg);

}



.right-heart {

    right: 20px;

    bottom: -75px;

    transform:

        rotate(18deg);

}





/* ========================================*

   *FOOTER*

*======================================== */

.footer {

    padding-top: 65px;

    background:

        var(--mint-light);

}



.footer-grid {

    display:

        grid;

    grid-template-columns:

        1.4fr

        1fr

        1fr

        0.8fr;

    gap: 45px;

    padding-bottom: 50px;

}





/* ========================================*

   *FOOTER LOGO - MÁS GRANDE*

*======================================== */

.footer-brand img {

    width: 240px;

    height: auto;

    object-fit: contain;

    margin-bottom: 18px;

}



.footer-brand p {

    max-width: 300px;

    color:

        var(--text-light);

}



.footer-column {

    display:

        flex;

    flex-direction:

        column;

    align-items:

        flex-start;

    gap: 8px;

}



.footer-column h4 {

    color:

        var(--dark-green);

    margin-bottom: 8px;

    font-size: 18px;

}



.footer-column p,

.footer-column a {

    color:

        var(--text-light);

    font-size: 14px;

}



.footer-column a:hover {

    color:

        var(--coral);

}



.social-links {

    display:

        flex;

    gap: 10px;

}



.social-links a {

    width: 40px;

    height: 40px;

    display:

        flex;

    align-items:

        center;

    justify-content:

        center;

    border-radius:

        50%;

    background:

        var(--dark-green);

    color:

        var(--white);

    font-size: 17px;

    font-weight: 800;

    transition:

        0.25s ease;

}



.social-links a:hover {

    color:

        var(--white);

    background:

        var(--coral);

    transform:

        translateY(-2px);

}



.footer-bottom {

    padding:

        14px 20px;

    text-align:

        center;

    background:

        var(--dark-green);

    color:

        var(--white);

    font-size: 14px;

}





/* ========================================*

   *TABLET*

*======================================== */

@media

(max-width: 950px) {



    .navbar {

        min-height: 115px;

        position: relative;

    }



    .logo img {

        width: 190px;

    }



    .menu-btn {

        display: block;

    }



    .nav-links {

        display: none;

        position:

            absolute;

        left: 0;

        right: 0;

        top: 115px;

        flex-direction:

            column;

        align-items:

            center;

        gap: 20px;

        padding:

            30px;

        border-radius:

            0 0 24px 24px;

        background:

            var(--white);

        box-shadow:

            0 20px 30px

            rgba(

                0,

                0,

                0,

                0.08

            );

    }



    .nav-links.active {

        display: flex;

    }



    .tour-btn {

        display: none;

    }



    .hero-grid {

        grid-template-columns:

            1fr;

    }



    .hero-content {

        text-align: center;

    }



    .hero-description {

        margin-left: auto;

        margin-right: auto;

    }



    .hero-buttons {

        justify-content:

            center;

    }



    .hero-photo {

        max-width: 720px;

        margin:

            0 auto;

    }



    .feature-grid {

        grid-template-columns:

            1fr;

    }
.about-grid {

        grid-template-columns:

            1fr;

    }



    .about-image {

        max-width: 700px;

        margin:

            0 auto;

    }



    .gallery-grid {

        grid-template-columns:

            1fr 1fr;

    }



    .footer-grid {

        grid-template-columns:

            1fr 1fr;

    }

}





/* ========================================*

   *MOBILE*

*======================================== */

@media

(max-width: 600px) {



    .navbar {

        min-height: 100px;

    }



    .logo img {

        width: 165px;

    }



    .nav-links {

        top: 100px;

    }



    .menu-btn {

        font-size: 28px;

    }



    .hero {

        padding:

            45px 0;

    }



    .hero-content h1 {

        font-size: 45px;

    }



    .hero-description {

        font-size: 16px;

    }



    .hero-photo img {

        height: 340px;

        border-radius:

            65px

            20px

            65px

            20px;

    }



    .hero-heart {

        left: 0;

        bottom: 20px;

    }
.programs {

        padding:

            65px 0;

    }



    .about {

        padding:

            70px 0;

    }



    .about-image img {

        height: 350px;

        border-radius:

            35px

            75px

            35px

            75px;

    }



    .about-message {

        right: 10px;

        bottom: -18px;

        padding:

            16px 20px;

        font-size: 14px;

    }



    .gallery {

        padding:

            65px 0;

    }



    .gallery-grid {

        display: grid;

        grid-template-columns:

            1fr;

        grid-auto-rows:

            250px;

    }



    .gallery-large {

        grid-column:

            span 1;

        grid-row:

            span 1;

    }



    .testimonial {

        padding:

            40px 25px;

    }



    .testimonial p {

        font-size: 16px;

    }



    .enrollment {

        padding:

            65px 0;

    }



    .enrollment-box {

        padding:

            55px 20px;

        border-radius:

            30px;

    }



    .footer-grid {

        grid-template-columns:

            1fr;

    }



    .footer-brand img {

        width: 220px;

    }

}





/* ========================================*

   *SMALL MOBILE*

*======================================== */

@media

(max-width: 400px) {



    .logo img {

        width: 145px;

    }



    .navbar {

        min-height: 95px;

    }



    .nav-links {

        top: 95px;

    }



    .hero-content h1 {

        font-size: 39px;

    }



    .mini-badge {

        font-size: 12px;

    }



    .hero-photo img {

        height: 300px;

    }



    .section-title {

        font-size: 35px;

    }



    .footer-brand img {

        width: 200px;

    }

}

/* ==========================================*

   *PLACEHOLDERS DE LA MAQUETA*

*========================================== */

.placeholder-text {

    color: #65756C;

    font-style: italic;

}



/* CONTENEDOR PARA FOTOGRAFÍAS PENDIENTES */

.image-placeholder {

    width: 100%;

    height: 100%;

    min-height: 220px;

    padding: 30px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

    text-align: center;

    background:

        linear-gradient(

            135deg,

            #E4F6F0,

            #FFF1DF

        );

    border:

        2px dashed

        #7AC9B0;

    color:

        #2E6B4E;

}



.image-placeholder strong {

    font-family:

        "Bree Serif",

        serif;

    font-size: 22px;

    font-weight: 400;

}



.image-placeholder p {

    max-width: 330px;

    color: #65756C;

    font-size: 14px;

}



.placeholder-icon {

    font-size: 35px;

}



/* FOTO PRINCIPAL */

.hero-photo .image-placeholder {

    height: 475px;

    border-radius:

        130px 32px

        130px 32px;

}



/* TARJETAS DE EDADES */

.small-placeholder {

    min-height: 205px;

    border: none;

    border-radius: 21px;

}



.small-placeholder strong {

    font-size: 17px;

}



/* ABOUT */

.about-placeholder {

    min-height: 470px;

    border-radius:

        55px 135px

        55px 135px;

}



/* GALERÍA */

.gallery-item .image-placeholder {

    min-height: 100%;

    border: none;

    border-radius: 0;

}



.gallery-item .image-placeholder strong {

    font-size: 16px;

}



/* MOBILE */

@media (max-width: 600px) {

    .hero-photo .image-placeholder {

        height: 340px;

        border-radius:

            65px 20px

            65px 20px;

    }



    .about-placeholder {

        min-height: 350px;

        border-radius:

            35px 75px

            35px 75px;

    }



    .image-placeholder {

        padding: 20px;

    }

}

/* =========================================
   FOTOGRAFÍAS REALES
========================================= */

.image-placeholder.photo-filled {
    padding: 0 !important;
    overflow: hidden;
}

.image-placeholder.photo-filled img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


/* =========================================
   AJUSTES GENERALES RESPONSIVE
========================================= */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Imagen promocional de inscripción */
.enrollment-box h2 img {
    display: block;
    width: min(100%, 560px);
    height: auto;
    margin: 0 auto;
    border-radius: 24px;
}


/* =========================================
   TABLET Y CELULAR
   768px O MENOS
========================================= */

@media (max-width: 768px) {

    /* CONTENEDOR GENERAL */

    .container {
        width: calc(100% - 32px);
        max-width: 100%;
    }


    /* HEADER */

    .header {
        width: 100%;
    }

    .navbar {
        min-height: 88px;
        gap: 12px;
        padding: 8px 0;
    }

    .logo img {
        width: 150px;
        max-width: 42vw;
        height: auto;
    }

    .menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 44px;
        height: 44px;
        min-width: 44px;

        border-radius: 12px;

        font-size: 27px;
        line-height: 1;
    }


    /* MENÚ MOBILE */

    .nav-links {
        left: 16px;
        right: 16px;
        top: 88px;

        width: auto;

        padding: 22px;
        gap: 14px;

        border-radius: 0 0 22px 22px;

        z-index: 1000;
    }

    .nav-links a {
        display: block;
        width: 100%;
        padding: 7px 4px;
        text-align: center;
        font-size: 16px;
    }

    .tour-btn {
        display: none;
    }


    /* PORTADA */

    .hero {
        padding: 38px 0 45px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .hero-content {
        text-align: center;
    }

    .mini-badge {
        margin-left: auto;
        margin-right: auto;
        font-size: 13px;
        padding: 8px 14px;
    }

    .hero-content h1 {
        font-size: clamp(
            38px,
            12vw,
            50px
        );

        line-height: 1.04;
        margin-bottom: 18px;
    }

    .hero-description {
        max-width: 100%;
        margin: 0 auto 24px;
        font-size: 16px;
        line-height: 1.7;
    }

    .hero-buttons {
        justify-content: center;
        gap: 12px;
    }

    .hero-photo {
        width: 100%;
        max-width: 580px;
        margin: 0 auto;
    }

    .hero-photo .image-placeholder,
    .hero-photo img {
        width: 100%;
        height: auto;
        min-height: 0;

        aspect-ratio: 4 / 3;
        object-fit: cover;

        border-radius:
            55px
            20px
            55px
            20px;
    }

    .hero-heart {
        left: 8px;
        bottom: 12px;
        font-size: 38px;
    }

    .hero-star {
        left: 10px;
        top: 55px;
    }


    /* CARACTERÍSTICAS */

    .features {
        padding: 5px 0 55px;
    }

    .feature-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .feature-card {
        align-items: flex-start;
        padding: 20px;
    }

    .feature-icon {
        width: 58px;
        height: 58px;
        min-width: 58px;
        font-size: 25px;
    }


    /* TÍTULOS GENERALES */

    .section-heading,
    .gallery-heading {
        width: 100%;
        max-width: 100%;
    }

    .section-title {
        font-size: clamp(
            32px,
            10vw,
            42px
        );

        overflow-wrap: break-word;
    }

    .section-description {
        font-size: 16px;
        line-height: 1.7;
    }


    /* EDADES */

    .programs {
        padding: 60px 0;
    }

    .programs .section-heading {
        margin-bottom: 30px;
    }

    .age-care-card {
        padding: 18px;
        border-radius: 25px;
    }

    .age-care-images {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 24px;
    }

    .age-care-image {
        height: 155px;
        overflow: hidden;
        border-radius: 18px !important;
    }

    .age-care-image:first-child {
        grid-column: 1 / -1;
        height: 225px;
    }

    .age-care-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .age-main-badge {
        font-size: 13px;
        padding: 8px 14px;
        white-space: normal;
        text-align: center;
    }

    .age-care-content h3 {
        font-size: clamp(
            26px,
            8vw,
            32px
        );
    }

    .age-care-content p {
        font-size: 15px;
        line-height: 1.7;
    }


    /* SOBRE KIDDOS PLACE */

    .about {
        padding: 65px 0;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .about-image {
        width: 100%;
    }

    .about-image .image-placeholder,
    .about-image img {
        width: 100%;
        height: auto;
        min-height: 0;

        aspect-ratio: 4 / 3;
        object-fit: cover;

        border-radius:
            35px
            70px
            35px
            70px;
    }

    .about-message {
        right: 8px;
        bottom: -20px;

        max-width: calc(100% - 16px);

        padding: 14px 18px;

        font-size: 13px;
    }

    .check-list li {
        align-items: flex-start;
    }


    /* GALERÍA */

    .gallery {
        padding: 60px 0;
    }

    .gallery-heading {
        margin-bottom: 30px;
    }

    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 170px;
        gap: 10px;
    }

    .gallery-large {
        grid-column: 1 / -1;
        grid-row: span 2;
    }

    .gallery-item {
        border-radius: 18px;
    }

    .gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    /* TESTIMONIOS */

    .testimonial-section {
        padding: 55px 0;
    }

    .testimonial {
        padding: 35px 22px;
        border-radius: 25px;
    }

    .testimonial p {
        font-size: 16px;
        line-height: 1.7;
    }


    /* INSCRIPCIÓN */

    .enrollment {
        padding: 60px 0;
    }

    .enrollment-box {
        padding: 42px 18px;
        border-radius: 28px;
    }

    .enrollment-box h2 {
        width: 100%;
        margin-bottom: 20px;
    }

    .enrollment-box h2 img {
        width: 100%;
        max-width: 500px;
        height: auto;
        border-radius: 18px;
    }

    .enrollment-box > p:not(.enrollment-small) {
        font-size: 15px;
        line-height: 1.7;
    }

    .decor-heart {
        font-size: 100px;
    }


    /* FOOTER */

    .footer {
        padding-top: 50px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-bottom: 38px;
    }

    .footer-brand img {
        width: 190px;
        max-width: 70vw;
    }

    .footer-column {
        width: 100%;
    }

    .footer-bottom {
        padding: 14px 16px;
        font-size: 12px;
        line-height: 1.6;
    }
}


/* =========================================
   CELULARES PEQUEÑOS
   480px O MENOS
========================================= */

@media (max-width: 480px) {

    .container {
        width: calc(100% - 24px);
    }


    /* HEADER */

    .navbar {
        min-height: 78px;
    }

    .logo img {
        width: 135px;
    }

    .nav-links {
        top: 78px;
        left: 12px;
        right: 12px;
    }


    /* PORTADA */

    .hero {
        padding-top: 28px;
    }

    .hero-content h1 {
        font-size: clamp(
            34px,
            11vw,
            42px
        );
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary {
        width: 100%;
    }

    .hero-photo .image-placeholder,
    .hero-photo img {
        aspect-ratio: 1 / 1;

        border-radius:
            45px
            16px
            45px
            16px;
    }


    /* EDADES */

    .age-care-images {
        grid-template-columns: 1fr;
    }

    .age-care-image,
    .age-care-image:first-child {
        grid-column: auto;
        height: 210px;
    }


    /* GALERÍA */

    .gallery-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 240px;
    }

    .gallery-large {
        grid-column: auto;
        grid-row: auto;
    }


    /* TESTIMONIO */

    .testimonial {
        padding: 32px 18px;
    }


    /* INSCRIPCIÓN */

    .enrollment-box {
        padding: 36px 15px;
    }

    .enrollment-box h2 img {
        border-radius: 14px;
    }
}