@import url('https://fonts.googleapis.com/css2?family=Paytone+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* =========================================================
   CONFIGURACIÓN GENERAL
========================================================= */

html {
    scroll-behavior: smooth;
}


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

h1 {
    font-family: "Paytone One", sans-serif;
    font-weight: 400;
    font-size: 40px;
    color: #18979E;
    margin-bottom: 38px;
}

p {
    font-family: "Noto Sans", sans-serif;
    font-weight: 400;
    font-size: 28px;
    color: #4C3D3D;
    margin-bottom: 45px;
}


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

.navbar img {
    max-width: 30%;
}

nav.navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
}


/* =========================================================
   INICIO
========================================================= */

.inicio {
    margin: 130px 40px 60px 40px;
}

.telefono {
    width: clamp(280px, 35vw, 450px);
    height: auto;
}


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

.boton-gal,
.boton-paq,
.quince,
.bs,
.fi,
.contacto a,
.pagsec a {
    text-decoration: none;
    font-family: "Noto Sans", sans-serif;
    font-weight: 600;
    font-size: 20px;
    padding: 12px 20px;
    border-radius: 35px;
}


/* Botón galería */

.boton-gal {
    color: white;
    background-color: #D1557E;
}

.boton-gal:hover {
    color: #D1557E;
    background-color: white;
    padding: 11px 19px;
    border: solid 2px;
}


/* Botón paquetes */

.boton-paq {
    color: white;
    background-color: #18979E;
}

.boton-paq:hover {
    color: #18979E;
    background-color: white;
    padding: 11px 19px;
    border: solid 2px;
}


/* Botón XV */

.quince {
    color: white;
    background-color: #D1557E;
}

.quince:hover {
    color: #D1557E;
    background-color: white;
    padding: 11px 19px;
    border: solid 2px;
}


/* Botón baby shower */

.bs {
    color: white;
    background-color: #7DC4C1;
}

.bs:hover {
    color: #7DC4C1;
    background-color: white;
    padding: 11px 19px;
    border: solid 2px;
}


/* Botón fiesta infantil */

.fi {
    color: white;
    background-color: #BCC356;
}

.fi:hover {
    color: #BCC356;
    background-color: white;
    padding: 11px 19px;
    border: solid 2px;
}


/* Botón contacto */

.contacto a {
    color: #4C3D3D;
    background-color: #BCC356;
}

.contacto a:hover {
    color: #BCC356;
    background-color: white;
    padding: 11px 19px;
    border: solid 2px;
}


/* Botón página XV */

.pagsec a {
    color: white;
    background-color: #D1557E;
}

.pagsec a:hover {
    color: #D1557E;
    background-color: white;
    padding: 11px 19px;
    border: solid 2px;
}


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

.galeria {
    background-image: url(../imagenes/fondonegro.jpg);
    background-size: cover;
    padding: 130px 50px;
}

.galeria h2 {
    text-align: center;
    font-family: "Paytone One", sans-serif;
    font-weight: 400;
    font-size: 35px;
    color: #F8FD37;
    margin-bottom: 40px;
}

.galeria p {
    text-align: center;
    font-family: "Noto Sans", sans-serif;
    font-weight: 400;
    font-size: 27px;
    color: white;
    margin: 35px 160px 88px 160px;
}


/* =========================================================
   PAQUETES
========================================================= */

.paquetes {
    background-image: url(../imagenes/fondoblanco.jpg);
    background-size: cover;
    position: relative;
}

.paquetes h2 {
    text-align: center;
    font-family: "Paytone One", sans-serif;
    font-weight: 400;
    font-size: 35px;
    color: #D1557E;

    /* Se conserva tal cual */
    margin-top: -144px;
}

.paquetes h3 {
    text-align: center;
    font-family: "Paytone One", sans-serif;
    font-weight: 400;
    font-size: 30px;
    color: #D1557E;
    margin-bottom: 60px;

    /* Se conserva tal cual */
    margin-top: -54px;
}


/* Tarjeta básica */

.basica {
    padding: 20px 30px;
    border: solid 5px #18979E;
    border-radius: 35px;
    margin-bottom: 50px;
}

.basica h4 {
    font-family: "Paytone One", sans-serif;
    text-align: center;
    font-weight: 400;
    font-size: 25px;
    color: #18979E;
}

.basica ul {
    font-family: "Noto Sans", sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: #4C3D3D;
}

.basica ul li::marker {
    color: #18979E;
}


/* Tarjeta premium */

.premium {
    padding: 20px 30px;
    border: solid 5px #BCC356;
    border-radius: 35px;
    margin-bottom: 50px;
}

.premium h4 {
    font-family: "Paytone One", sans-serif;
    text-align: center;
    font-weight: 400;
    font-size: 25px;
    color: #BCC356;
}

.premium ul {
    font-family: "Noto Sans", sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: #4C3D3D;
}

.premium ul li::marker {
    color: #BCC356;
}


/* Tarjeta extras */

.extras {
    padding: 20px 30px;
    border: solid 5px #D1557E;
    border-radius: 35px;
    margin-bottom: 50px;
}

.extras h4 {
    font-family: "Paytone One", sans-serif;
    text-align: center;
    font-weight: 400;
    font-size: 25px;
    color: #D1557E;
}

.extras ul {
    font-family: "Noto Sans", sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: #4C3D3D;
}

.extras ul li::marker {
    color: #D1557E;
}


/* Icono de los planes */

.icono-plan {
    display: block;
    width: 130px;
    height: auto;
    margin: 0 auto 15px;
}


/* Precio */

.costo {
    font-family: "Paytone One", sans-serif;
    text-align: center;
    font-weight: 400;
    font-size: 18px;
    color: #D1557E;
}


/* Imagen final de paquetes
   Se conserva sin modificar */

.paquetes>img:last-child {
    display: block;
    margin-left: auto;
}


/* =========================================================
   PROCESO
========================================================= */

.proceso {
    background-image: url(../imagenes/fondonegro.jpg);
    background-size: cover;
    padding: 60px 50px 80px 50px;
}

.proceso h2 {
    text-align: center;
    font-family: "Paytone One", sans-serif;
    font-weight: 400;
    font-size: 35px;
    color: #F8FD37;
    margin-bottom: 50px;
}

.proceso p {
    text-align: center;
    font-family: "Noto Sans", sans-serif;
    font-weight: 400;
    font-size: 25px;
    color: white;
    margin: 35px 160px;
}


/* =========================================================
   CARRUSEL
========================================================= */

.carrusel {
    width: 100%;
    max-width: 1000px;
    margin: auto;
    overflow: hidden;
    position: relative;
}

.imagenes {
    display: flex;
    transition: transform 0.5s ease;
    will-change: transform;
}

.imagenes img {
    width: 50%;
    flex: 0 0 50%;
    padding: 10px;
    box-sizing: border-box;
}

/* Botones del carrusel */

.anterior,
.siguiente {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;

    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;

    width: 40px;
    height: 40px;

    cursor: pointer;
    font-size: 20px;
}

.anterior {
    left: 10px;
}

.siguiente {
    right: 10px;
}


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

.contacto {
    background-image: url(../imagenes/fondoblanco.jpg);
    background-size: cover;
    position: relative;
    padding: 90px 60px 0 60px;
}

.contacto h2 {
    text-align: center;
    font-family: "Paytone One", sans-serif;
    font-weight: 400;
    font-size: 35px;
    color: #18979E;
}

.contacto p {
    padding: 10px 145px;
    text-align: center;
}


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

footer {
    background-color: #313131;
    padding: 35px 100px;
    text-align: center;
}

.cont {
    margin-bottom: 18px;
}

.cont h4 {
    color: white;
    font-family: "Noto Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
}

.cont a {
    color: #18979E;
    font-family: "Noto Sans", sans-serif;
    font-weight: 600;
    font-size: 16px;
}

footer h5 {
    color: white;
    font-family: "Noto Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    margin-top: 15px;
}

footer a {
    color: white;
    font-family: "Noto Sans", sans-serif;
    font-weight: 200;
    font-size: 16px;
}

footer img {
    max-width: 10%;
    margin-top: 15px;
}


/* =========================================================
   PÁGINA XV
========================================================= */

.pagsec {
    font-family: "Paytone One", sans-serif;
    font-weight: 400;
    font-size: 40px;
    color: #18979E;
    text-align: center;
    margin-top: 130px;
    margin-bottom: 0;
}

.pagsec p {
    font-family: "Noto Sans", sans-serif;
    font-weight: 400;
    font-size: 28px;
    color: #4C3D3D;
    margin-bottom: 45px;
    padding: 10px 320px;
}

.pagsec img {
    max-width: 85%;
}

.unaimg {
    margin-top: -125px;
}

.botonw {
    margin-top: 40px;
}

.botonw a {
    color: white;
    background-color: #18979E;
}

.botonw a:hover {
    color: #18979E;
    background-color: white;
    padding: 11px 19px;
    border: solid 2px;
}


/* =========================================================
   PÁGINA legal
========================================================= */

.pagter {
    font-family: "Paytone One", sans-serif;
    font-weight: 400;
    font-size: 40px;
    color: #18979E;
    text-align: center;
    margin-top: 130px;
    margin-bottom: 0;
}

.pagter p {
    font-family: "Noto Sans", sans-serif;
    text-align: left;
    font-weight: 400;
    font-size: 23px;
    color: #4C3D3D;
    margin-bottom: 45px;
    padding: 20px 17%;
}

.pagter img {
    max-width: 85%;
}

.pagter h3 {
    font-family: "Noto Sans", sans-serif;
    font-weight: 600;
    font-size: 28px;
    color: #4C3D3D;
}


/* =========================================================
   MEDIA QUERIES
========================================================= */


/* ---------------------------------------------------------
   PANTALLAS GRANDES
   1024px en adelante
--------------------------------------------------------- */

@media (min-width: 1024px) {

    .paquetes>img:last-child {
        max-width: 90%;
    }

    footer img {
        max-width: 15%;
    }

    .pagsec p {
        padding: 10px 214px;
    }
}


/* ---------------------------------------------------------
   TABLET
   768px o menos
--------------------------------------------------------- */

@media (max-width: 768px) {

    .unaimg {
        margin-top: -219px;
    }

    h1 {
        font-size: 30px;
        margin-bottom: 25px;
    }

    /* Párrafo principal */
    .inicio p {
        font-size: 23px;
    }


    /* Galería */

    .galeria h2 {
        font-size: 27px;
        margin-bottom: 30px;
    }

    .galeria p {
        font-size: 24px;
        margin: 30px 80px 65px 80px;
    }


    /* Paquetes */

    .paquetes h2 {
        font-size: 27px;

        /* NO SE MODIFICA */
        margin-top: -164px;
    }

    .paquetes h3 {
        font-size: 24px;
        margin-bottom: 60px;

        /* NO SE MODIFICA */
        margin-top: -106px;
    }

    .basica,
    .premium,
    .extras {
        padding: 18px 15px;
        margin-bottom: 40px;
    }

    .paquetes>img:last-child {
        max-width: 85%;

        /* NO SE MODIFICA */
        margin-top: -147px;
    }


    /* Proceso */

    .proceso h2 {
        font-size: 27px;
        margin-bottom: 60px;
    }

    .proceso p {
        font-size: 23px;
        margin: 35px 80px;
    }


    /* Contacto */

    .contacto h2 {
        font-size: 27px;
    }

    .contacto p {
        padding: 10px 60px;
        font-size: 24px;
    }



    /* Footer */

    footer img {
        max-width: 22%;
        margin-top: 15px;
    }


    /* Página XV */

    .pagsec h2 {
        font-size: 27px;
    }

    .pagsec p {
        font-size: 23px;
        margin-bottom: 45px;
        padding: 5px 50px;
    }

    .pagsec img {
        max-width: 70%;
    }
}


/* ---------------------------------------------------------
   TABLET PEQUEÑA / MÓVIL GRANDE
   600px o menos
--------------------------------------------------------- */

@media (max-width: 600px) {

    .navbar img {
        max-width: 40%;
    }

    .imagenes img {
        width: 100%;
        flex: 0 0 100%;
    }

}


/* ---------------------------------------------------------
   CELULAR
   480px o menos
--------------------------------------------------------- */

@media (max-width: 480px) {


    /* Inicio */

    h1 {
        font-size: 28px;
        margin-top: 45px;
    }

    .inicio p {
        font-size: 20px;
    }


    /* Galería */

    .galeria {
        padding: 63px 50px;
    }

    .galeria h2 {
        font-size: 27px;
    }

    .galeria p {
        font-size: 20px;
        margin: 35px 20px 80px 20px;
    }


    /* Paquetes */

    .paquetes h2 {
        font-size: 27px;
    }

    .paquetes h3 {
        font-size: 24px;

        /* NO SE MODIFICA */
        margin-top: -83px;
    }

    .basica,
    .premium {
        padding: 9px 8px;
        margin-bottom: 40px;
    }

    .extras {
        padding: 9px 8px;
    }

    .paquetes>img:last-child {
        display: block;
        margin-left: auto;
        max-width: 99%;

        /* NO SE MODIFICA */
        margin-top: -88px;
    }


    /* Proceso */

    .proceso {
        padding: 40px 20px;
    }

    .proceso h2 {
        font-size: 27px;
    }

    .proceso p {
        font-size: 20px;
        margin: 35px 20px;
    }


    /* Contacto */

    .contacto {
        padding: 45px 15px 0 15px;
    }

    .contacto h2 {
        font-size: 27px;
    }

    .contacto p {
        padding: 10px 45px;
        font-size: 20px;
    }


    /* Footer */

    footer img {
        max-width: 51%;
        margin-top: 15px;
    }


    /* Página XV */

    .pagsec h2 {
        font-size: 27px;
    }

    .pagsec p {
        font-size: 20px;
        padding: 10px 30px;
    }
}


/* ---------------------------------------------------------
   CELULAR PEQUEÑO
   376px o menos
--------------------------------------------------------- */

@media (max-width: 376px) {

    .contacto a {
        font-size: 16px;
        padding: 12px 19px;
    }

    .contacto a:hover {
        font-size: 16px;
        padding: 12px 18px;
    }
}