:root {
    --color-morado-1: rgba(71, 46, 135, 1);
    --color-morado-2: rgba(235, 243, 250, 1);
    --color-morado-3: rgba(177, 154, 237, 1);
    --color-verde-1: rgba(121, 199, 173, 1);
    --color-verde-2: rgba(235, 243, 250, 1);
    --color-background: rgba(235, 243, 250, 1);
}

@font-face {
    font-family: cocogoose;
    src: url(../webfonts/Cocogoose\ Pro-trial.ttf);
}

@font-face {
    font-family: cocogoose-light;
    src: url(../webfonts/Cocogoose\ Pro\ Light-trial.ttf);
}

@font-face {
    font-family: cocogoose-semilight;
    src: url(../webfonts/Cocogoose\ Pro\ Semilight-trial.ttf);
}

@font-face {
    font-family: cocogoose-ultralight;
    src: url(../webfonts/Cocogoose\ Pro\ Ultralight-trial.ttf);
}

@font-face {
    font-family: loverine;
    src: url(../webfonts/Loverine.otf);
}

/*HEADER*/
.header-container {
    background-color: var(--color-morado-1);
    font-family: 'Poppins', sans-serif;
}

.header-logo {
    max-height: 50px; /* Ajusta el tamaño del logo según sea necesario */
}

.header-menu {
    margin: auto;
}

.header-menu li a {
    color: var(--color-background);
}

.header-menu li a:hover {
    color: var(--color-verde-1);
}

.header-menu li a:focus {
    color: var(--color-verde-1);
}

.offcanvas-button {
    border: 0;
}

.offcanvas-button:focus {
    border: 0;
    box-shadow: none;
}

.offcanvas-container {
    background-color: var(--color-morado-1);
}

.offcanvas-menu li a {
    color: var(--color-background);
}

.offcanvas-menu li a:hover {
    color: var(--color-verde-1);
}

.offcanvas-menu li a:focus {
    color: var(--color-verde-1);
}

.offcanvas-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 30px;
}

.offcanvas-social a {
    font-size: 18pt;
}

.offcanvas-social a:hover {
    font-size: 25pt;
    color: var(--color-verde-1);
}

.header-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.header-social a {
    font-size: 18pt;
}

.header-social a:hover {
    font-size: 18pt;
    color: var(--color-verde-1);
}

@media (max-width: 767.98px) {
    .header-menu {
        display: none;
    }
    .header-logo {
        margin: 0 auto;
    }
    .navbar-toggler {
        position: absolute;
        right: 0;
    }
}
/*HEADER ENDS*/

/*INDEX*/
.main-container {
    padding: 50px 1rem; 
    background-color: var(--color-background);
    font-family: 'Poppins', sans-serif;
}

section:not(:first-child) {
    margin-top: 100px;
}

.emp-hero {
    font-family: 'loverine', sans-serif;
    color: var(--color-morado-1);
}

.hero-estrellita {
    z-index: 99;
    position: absolute;
    top: -5px;
    left: 15%;
}

.hero-estrellita i {
    color: var(--color-verde-1);
    font-size: 25px;
}

.hero-image-container {
    width: 80%;
    display: flex;
    justify-content: end;
}

.hero-image-container::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 10%;
    width: 80%;
    height: 100%;
    border-radius: 5px;
    background-color: var(--color-morado-3);
}

.hero-image-container::after {
    content: '\f589';
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    position: absolute;
    left: 70px;
    top: 0;

    color: var(--color-verde-1);
    font-size: 25px;
}

.hero-image-container img {
    height: 250px;
    object-fit: cover;
    filter: drop-shadow(10px -5px 0.25rem var(--color-morado-1));
    border-radius: 5px;
}

.btn-text-morado {
    font-weight: 500 !important;
    color: var(--color-morado-1) !important;
}

.btn-text-morado:hover {
    border-bottom: solid 1px !important;
}

.icon-arrow-link {
    font-size: 8pt;
    vertical-align: super;
}

.adorno-elegirnos {
    z-index: 1;
}

.adorno-elegirnos::before {
    content: '';
    background-image: url(../images/recursos/lineas_paralelas.webp);
    position: absolute;
    width: 135px;
    height: 40px;
    left: calc(50% - 100px);
    top: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 0;
}

.estrellas-verdes {
    color: var(--color-verde-1);
    font-size: 30px;
    margin-left: 1rem;
}

.recuadro-elegirnos-parent {
    filter: url('#goo');
    overflow: hidden;
}

.recuadro-elegirnos-list:nth-child(odd) .recuadro-elegirnos {
    clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 95px), calc(100% - 95px) calc(100% - 95px), calc(100% - 95px) 100%, 0% 100%);
    width: 94%;
    padding: 10px;
    background-color: var(--color-morado-3);
    height: 280px;
}

.recuadro-elegirnos-list:nth-child(even) .recuadro-elegirnos {
    clip-path: polygon(0% 0%, calc(100% - 95px) 0%, calc(100% - 95px) 95px, 100% 95px, 100% 100%, 0% 100%);
    width: 94%;
    padding: 10px;
    background-color: var(--color-morado-3);
    height: 280px;

    display: flex;
    align-items: end;
}

.recuadro-elegirnos-list:nth-child(odd) .recuadro-elegirnos-img {
    width: 30%;
    height: auto;
    object-fit: contain;
    position: absolute;
    bottom: 15px;
    left: 20px;
}

.recuadro-elegirnos-list:nth-child(even) .recuadro-elegirnos-img {
    width: 30%;
    height: auto;
    object-fit: contain;
    position: absolute;
    top: 15px;
    left: 20px;
}

.recuadro-elegirnos p {
    font-size: 10pt;
    margin-bottom: 0;
}

.recuadro-elegirnos-list:nth-child(odd) .icono-elegirnos {
    position: absolute;
    bottom: 0;
    right: 15px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background-color: var(--color-morado-3);
    color: var(--color-morado-1);
}

.recuadro-elegirnos-list:nth-child(even) .icono-elegirnos {
    position: absolute;
    top: 0;
    right: 15px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background-color: var(--color-morado-3);
    color: var(--color-morado-1);
}

.icono-elegirnos i {
    font-size: 30px;
}

@property --col-size-img {
    syntax: '<length>';
    inherits: false;
    initial-value: 10vw;
}

@property --row-size-img {
    syntax: '<length>';
    inherits: false;
    initial-value: 130px;
}

@property --gap-size-img {
    syntax: '<length>';
    inherits: false;
    initial-value: 0.5vw;
}

@media (width <= 425px) {
    @property --row-size-img {
        syntax: '<length>';
        inherits: false;
        initial-value: 65px;
    }

    @property --gap-size-img {
        syntax: '<length>';
        inherits: false;
        initial-value: 1px;
    }
}

.puzzle-container {
    display: grid;
    grid-template-columns: repeat(8, var(--col-size-img)); /* Adjust size and number of pieces */
    grid-template-rows: repeat(3, var(--row-size-img));    /* Adjust size and number of pieces */
    gap: var(--gap-size-img) var(--gap-size-img);  /* Space between pieces */
}

.puzzle-piece {
    width: var(--col-size-img);   /* Match grid size */
    height: var(--row-size-img);  /* Match grid size */
    background-image: url('../images/stock/nino-casita.webp'); /* Path to your image */
    background-size: calc(800% + 7*var(--gap-size-img)) auto; /* Size of the full image */
    border-radius: 5px;
    display: grid;
    object-fit: cover;
}

/* Position each piece */
.piece1 { 
    grid-column-start: 1;
    grid-column-end: 4;
    width: calc(3*var(--col-size-img) + 2*var(--gap-size-img));
    background-size: 275% auto;
    background-position: 0px 0px; 
}
.piece2 { 
    grid-column-start: 4;
    grid-column-end: 6;
    width: calc(2*var(--col-size-img) + var(--gap-size-img));
    background-image: none;
    background-color: var(--color-morado-1);

    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Poppins', sans-serif;    
    color: var(--color-background);

    p {
        font-size: 10pt;
        text-align: center;
        margin-bottom: 0px;
    }

    span {
        font-size: 20pt;
    }
}
.piece3 {
    grid-column-start: 6;
    grid-column-end: 9;
    width: calc(3*var(--col-size-img) + var(--gap-size-img));
    background-image: none;

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

    img {
        width: 80%;
        height: 120%;
        object-fit: contain;

        position: absolute;
        bottom: 15px;
    }
}
.piece4 { display: none; }
.piece5 { display: none; }
.piece6 { display: none; }
.piece7 { display: none; }
.piece8 { display: none; }

.piece9 { 
    grid-column-start: 1;
    grid-column-end: 3;
    width: calc(2*var(--col-size-img) + var(--gap-size-img));
    background-size: 400% auto;
    background-position: 0px calc(-1*var(--row-size-img)); 
}
.piece10 { 
    grid-column-start: 3;
    grid-column-end: 5;
    width: calc(2*var(--col-size-img) + var(--gap-size-img));
    background-size: calc(400% + var(--gap-size-img)) auto;
    background-position: calc(-2*var(--col-size-img)) calc(-1*var(--row-size-img)); 
}
.piece11 { 
    grid-column-start: 5;
    grid-column-end: 7;
    width: calc(2*var(--col-size-img) + var(--gap-size-img));
    background-image: none;
    background-color: var(--color-morado-1);

    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Poppins', sans-serif;    
    color: var(--color-background);

    p {
        font-size: 10pt;
        text-align: center;
        margin-bottom: 0px;
    }

    span {
        font-size: 20pt;
    }
}
.piece12 {
    grid-column-start: 7;
    grid-column-end: 9;
    width: calc(2*var(--col-size-img) + var(--gap-size-img));
    background-size: calc(400% + 4*var(--gap-size-img)) auto;
    background-position: calc(-6*var(--col-size-img)) calc(-1*var(--row-size-img)); 
}
.piece13 { display: none; }
.piece14 { display: none; }
.piece15 { display: none; }
.piece16 { display: none; }

.piece17 { 
    grid-column-start: 1;
    grid-column-end: 3;
    width: calc(2*var(--col-size-img) + var(--gap-size-img));
    background-size: 400% auto;
    background-position: 0px calc(-2*var(--row-size-img)); 
}
.piece18 { 
    grid-column-start: 3;
    grid-column-end: 6;
    width: calc(3*var(--col-size-img) + 2*var(--gap-size-img));
    background-size: 263% auto;
    background-position: calc(-2*var(--col-size-img)) calc(-2*var(--row-size-img)); 
}
.piece19 { 
    grid-column-start: 6;
    grid-column-end: 8;
    width: calc(2*var(--col-size-img) + var(--gap-size-img));
    background-image: none;
    background-color: var(--color-morado-1);

    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Poppins', sans-serif;    
    color: var(--color-background);

    p {
        font-size: 10pt;
        text-align: center;
        margin-bottom: 0px;
    }

    span {
        font-size: 20pt;
    }
}
.piece20 { background-position: calc(-7*var(--col-size-img)) calc(-2*var(--row-size-img)); }
.piece21 { display: none; }
.piece22 { display: none; }
.piece23 { display: none; }
.piece24 { display: none; }

.adorno-detalles {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-left: 10px;
}

.recuadro-detalles-parent {
    filter: url('#goo');
    overflow: hidden;
}

.recuadro-detalles-list .recuadro-detalles {
    clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 95px), calc(100% - 95px) calc(100% - 95px), calc(100% - 95px) 100%, 0% 100%);
    width: 94%;
    padding: 10px;
    background-color: var(--color-morado-3);
    height: 280px;
}

.recuadro-detalles-img {
    width: 100%;
    height: calc(100% - 125px);
    object-fit: cover;
    border-radius: 5%;
}

.recuadro-detalles-text {
    padding: 0.5rem 0;
    position: absolute;
}

h5.recuadro-detalles-text {
    font-size: 12pt;
    bottom: 95px;
    margin-bottom: 0;
}

p.recuadro-detalles-text {
    font-size: 10pt;
    margin-bottom: 0;
    top: calc(100% - 95px);
    width: calc(100% - 95px - 3rem);
}

.recuadro-detalles-list .icono-detalles {
    position: absolute;
    bottom: 0;
    right: 15px;
    width: 80px;
    height: 80px;
    border-radius: 20%;
    display: grid;
    place-items: center;
    background-color: var(--color-morado-3);
    color: var(--color-morado-1);
}

.icono-detalles i {
    font-size: 30px;
}


.recuadro-contacto-parent {
    filter: url('#goo');
    overflow: hidden;
}

.recuadro-contacto {
    clip-path: polygon(0% 0%, calc(100% - 100px) 0%, calc(100% - 100px) 100px, 100% 100px, 100% 100%, 0% 100%);
    width: 100%;
    padding: 10px;
    background-color: var(--color-morado-3);
    height: 440px;
    display: inline-block;
    z-index: 0;
    position: relative;
}

.icono-contacto {
    position: absolute;
    top: 0;
    right: 10px;
    width: 80px;
    height: 80px;
    border-radius: 25%;
    display: grid;
    place-items: center;
    background-color: var(--color-morado-3);
    color: var(--color-morado-1);
}

.icono-contacto i {
    font-size: 30px;
}

.recuadro-contacto-img {
    width: 30%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    clip-path: polygon(0% 0%, 100% 0%, 70% 100%, 0% 100%);
}

.recuadro-formulario-contenedor {
    width: calc(70% - 100px);
    height: 100%;
    position: absolute;
    left: 30%;
    top: 0;
}

.recuadro-formulario-contenedor h5 {
    font-size: 16pt;
    padding: 5% 5% 0 5%;
}

#form-contacto {
    position: absolute;
    top: 100px;
}

.adorno-contacto {
    width: 60px;
    height: 60px;
    object-fit: contain;
    position: absolute;
    bottom: 15px;
    right: 15px;
}

@media (width <= 768px) {
    section:not(:first-child) {
        margin-top: 65px;
    }

    #elegirnos-section {
        margin-top: 100px !important;
    }

    .adorno-elegirnos {
        margin-bottom: 15px !important;
    }

    .adorno-elegirnos::before {
        top: 23px;
        height: 25px;
        rotate: 5deg;
    }

    .recuadro-detalles-list,
    .recuadro-elegirnos-list {
        margin-bottom: 25px;
    }

    .puzzle-piece p {
        font-size: 8pt;
    }

    .puzzle-piece span {
        font-size: 18pt;
    }
}

@media (width <= 425px) {
    section:not(:first-child) {
        margin-top: 45px;
    }

    #elegirnos-section {
        margin-top: 85px !important;
    }

    .hero-image-container::after {
        left: 45px;
    }

    .puzzle-piece p {
        font-size: 8pt;
    }

    .puzzle-piece span {
        font-size: 14pt;
    }

    .recuadro-contacto-img {
        display: none;
    }

    .adorno-contacto {
        display: none;
    }
    
    .recuadro-formulario-contenedor {
        width: 100%;
        left: 0;
    }
    
    .recuadro-formulario-contenedor h5 {
        width: calc(100% - 100px);
        font-size: 16pt;
        padding: 10% 5% 0 10%;
    }
    
    #form-contacto {
        padding: 0 5% 0 5%;
        position: absolute;
        top: 100px;
    }
}

/*INDEX ENDS*/

/*FOOTER*/
.footer-container {
    background-color: var(--color-morado-1);
    font-family: 'Poppins', sans-serif;
}

.footer-logo img {
    max-height: 50px; /* Ajusta el tamaño del logo según sea necesario */
}

.footer-logo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.footer-menu ul {
    text-align: center;
    list-style-type: none;
    text-decoration: none;
    padding: 0;
}

.footer-menu ul li {
    margin-bottom: 10px;
}

.footer-menu li a:hover {
    color: var(--color-verde-1);
}

.footer-menu li a:focus {
    color: var(--color-verde-1);
}

.footer-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.footer-social a {
    font-size: 25pt;
}

.footer-social a:hover {
    font-size: 25pt;
    color: var(--color-verde-1);
}

@media (max-width: 767.98px) {
    .footer-logo h5 {
        display: none;
    }

    .footer-menu {
        margin-top: 8px;
    }

    .footer-social {
        margin-top: 8px;
        align-items: start;
    }

    .footer-social a {
        font-size: 15pt;
    }
}
/*FOOTER ENDS*/

/*PROXIMAMENTE MODAL*/
.proximamente-title {
    font-family: 'loverine', sans-serif;
    font-size: 30pt;
}
/*PROXIMAMENTE MODAL ENDS*/

/*CORREO MODAL*/
.correo-title {
    font-family: 'loverine', sans-serif;
    font-size: 30pt;
}
/*CORREO MODAL ENDS*/

/*HELPERS*/
.font-loverine {
    font-family: 'loverine', sans-serif;
}

.font-poppins {
    font-family: 'Poppins', sans-serif;
}

.fs-large {
    font-size: 30pt;
}

.fs-medium {
    font-size: 15pt;
}

.fc-bg {
    color: var(--color-background);
}

.btn-morado {
    background-color: var(--color-morado-1);
    color: var(--color-background);
}

.btn-morado:hover {
    background-color: var(--color-verde-1);
    color: var(--color-morado-1);
}
/*HELPERS END*/