/*
    Theme Name: Iluminow theme.
    Theme URI: 
    Author: Josué Antonio Contreras Guzmán.
    Author URI: 
    Description: Theme Diseñado para Iluminow por Medra. 
    Version: 1.0.0.
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: .
    Text Domain: 
*/

/*Estilos Globales */
:root {

    /** Fuentes **/
    --fuente-Barlow-Regular: 'Barlow-Regular', sans-serif;
    --fuente-Barlow-bold: 'Barlow-Bold', sans-serif;
    --fuente-Syne-Mediuml: 'Syne-Medium', sans-serif;

    /** Colores **/
    --color-naranja: #FF5C35;
    --color-salmon: #e27355;
    --color-negro: #000000;
    --color-blanco: #ffffff;
    --color-gris: #6b6b6b;

}

@font-face {
    font-family: 'Barlow-Regular';
    src: url('fonts/Barlow-Regular.ttf');
}

@font-face {
    font-family: 'Barlow-Bold';
    src: url('fonts/Barlow-Bold.ttf');
}


@font-face {
    font-family: 'Syne-Medium';
    src: url('fonts/Syne-Medium.ttf');
}


html {
    box-sizing: border-box;
    font-size: 62.5%;
    scroll-behavior: smooth;
    /* 10px = 1rem*/
}

*,
*:before,
*:after {
    box-sizing: inherit;

}

/** globales **/

a {
    text-decoration: none;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

hr {
    border: 1px solid var(--gris-claro);
}

.contenedor {
    width: min(95%, 120rem);
    margin: 0 auto;
}

h1 {
    font-family: var(--fuente-Syne-Mediuml);
    font-weight: 300;
}

h2 {
    font-family: var(--fuente-Barlow-bold);
}

h3 {
    font-family: var(--fuente-Syne-Mediuml);
    font-weight: 300;
}

p {
    font-family: var(--fuente-Barlow-Regular);
    margin: 0;
}

body {
    scrollbar-color: var(--color-naranja) var(--color-blanco) !important;
}


/** Estilos Header Principal **/

@media(min-width: 980px) {
    .contenedor-header-principal {
        padding: 4rem 0;
        width: 100%;
        height: auto;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
}

.contenedor-navegador-header-principal {
    display: none;
}

@media(min-width: 980px) {
    .contenedor-navegador-header-principal {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.contenedor-imagen-header-principal img {
    width: 100%;
    height: auto;
    max-width: 30rem;
}

.contenedor-enlaces-header-principal ul {
    display: flex;
    gap: 4rem;
}

/* Estilos de los enlaces */
.contenedor-enlaces-header-principal ul a {
    text-decoration: none;
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.contenedor-enlaces-header-principal ul a li {
    font-family: var(--fuente-Barlow-bold);
    font-size: clamp(1.8rem, 5vw, 2.4rem);
    color: var(--color-blanco);
    position: relative;
    padding-bottom: 5px;
    /* Espacio para la línea */
}

/* Línea inferior animada */
.contenedor-enlaces-header-principal ul a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background-color: var(--color-blanco);
    transform: scaleX(0);
    transform-origin: left;
    /* La animación comienza desde la izquierda */
    transition: transform 0.3s ease-in-out;
}

/* Efecto al hacer hover */
.contenedor-enlaces-header-principal ul a:hover::after {
    transform: scaleX(1);
    /* Se expande de izquierda a derecha */
}

/* Línea inferior */
.contenedor-enlaces-header-principal ul a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background-color: var(--color-blanco);
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}

/* Efecto al hacer hover */
.contenedor-enlaces-header-principal ul a:hover::after {
    transform: translateX(0);
}

/* Efecto al quitar el hover */
.contenedor-enlaces-header-principal ul a:not(:hover)::after {
    transform: translatey(100%);
}

/* Estilos Header Hamburguesa */

.header-hamburguesa {
    height: auto;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

@media(min-width: 980px) {
    .header-hamburguesa {
        display: none;
    }
}

.navbar-hamburguesa {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    padding: 2.5rem 3rem;
    background-color: var(--color-azul);
}

.menu-hamburguesa {
    display: none;
}

.menu-hamburguesa:checked+.ul-links {
    height: calc(70vh - 149px);
}

.imagen-header-hamburguesa {
    width: 100%;
    height: auto;
    max-width: 20rem;
}


.list-icon {
    cursor: pointer;
    color: var(--color-blanco);
    width: 5rem;
}

.ul-links {
    width: 100%;
    background-color: var(--color-salmon);
    position: absolute;
    top: 110px;
    left: 0;
    height: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 1000;
    gap: 2.5rem;
    transition: all .3s;
}


.link {
    font-size: clamp(2.2rem, 5vw, 2.4rem);
    color: var(--color-blanco);
    font-family: var(--fuente-Syne-Mediuml);
    gap: 2rem;
}


/** Estilos Primera Seccion **/

.contenedor-principal-primera-seccion {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 4rem 0;
}

.contenedor-principal-imagenes-primera-seccion {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 5%;
}

@media(min-width: 590px) {
    .contenedor-principal-imagenes-primera-seccion {
        flex-direction: row;
    }
}

.contenedor-imagen-primera-seccion-01 img {
    width: 100%;
    height: auto;
    max-width: 45rem;
}

.contenedor-secundario-imagenes-primera-seccion {
    display: flex;
    align-items: end;
    gap: 10%;
}

.contenedor-imagen-primera-seccion-02 img {
    width: 100%;
    height: auto;
    max-width: 27rem;
}

.contenedor-imagen-primera-seccion-03 img {
    width: 100%;
    height: auto;
    max-width: 26rem;
}

.contenedor-imagen-primera-seccion-04 img {
    width: 100%;
    height: auto;
    max-width: 45rem;
}

.contenedor-imagen-primera-seccion-04 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 2rem 0;
}


@media(min-width: 590px) {
    .contenedor-imagen-primera-seccion-04 {
        padding: 2rem 0 0 0;
    }

}


/** Estilos Segunda Seccion **/

.contenedor-principal-segunda-seccion {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    padding: 0;
}

@media(min-width: 800px) {
    .contenedor-principal-segunda-seccion {
        flex-direction: row;
        align-items: start;
        gap: 4rem;
        padding: 6rem 0;
    }
}

.contenedor-imagenes-senguda-seccion {
    width: 100%;
    height: auto;
    display: flex;
    align-items: end;
    justify-content: center;
    padding: 4rem 0;
}

@media(min-width: 800px) {
    .contenedor-imagenes-senguda-seccion {
        width: 60%;
        justify-content: center;
        padding: 0;
    }
}

.contenedor-imagen-segunda-seccion-01 {
    width: 100%;
    height: auto;
    max-width: 50rem;
}

.contenedor-imagen-segunda-seccion-01 img {
    width: 100%;
    height: auto;
    max-width: 45rem;
}

.contenedor-imagen-segunda-seccion-02 img {
    width: 100%;
    height: auto;
    max-width: 30rem;
}

.contenedor-imagen-segunda-seccion-02 {
    margin-left: -15rem;
}

.contenedor-informacion-segunda-seccion {
    text-align: center;
}

@media(min-width: 800px) {
    .contenedor-informacion-segunda-seccion {
        width: 45%;
        text-align: left;
    }
}

.contenedor-informacion-segunda-seccion h2 {
    font-size: clamp(1.2rem, 4vw, 2rem);
    letter-spacing: .4rem;
    margin: 2rem 0 0 0;
}

@media (min-width: 890px) {
    .contenedor-informacion-segunda-seccion h2 {
        margin: 0;
    }
}

.contenedor-informacion-segunda-seccion h1 {
    font-size: clamp(2.4rem, 9vw, 5.5rem);
    margin: 2rem 0;
    word-break: break-word;
    white-space: normal;
    padding: 0 4%;
}

@media (min-width: 800px) {
    .contenedor-informacion-segunda-seccion h1 {
        margin: 2rem 0 2rem 0;
        padding: 0;
    }
}

.contenedor-informacion-segunda-seccion p {
    font-size: clamp(2rem, 10vw, 2.4rem);
    padding: 0 2rem;
}

@media (min-width: 460px) {
    .contenedor-informacion-segunda-seccion p {
        padding: 0 4rem;
    }
}

@media (min-width: 800px) {
    .contenedor-informacion-segunda-seccion p {
        margin: 0;
        padding: 0;
    }
}

br.mobile-hide {
    display: none;
}

@media (min-width: 890px) {

    /* Aplica solo en pantallas grandes */
    br.mobile-hide {
        display: inline;
    }
}


/** Estilos Tercera Seccion **/

.contenedor-principal-tercera-seccion {
    margin-bottom: 4rem;
}

.contenedor-principal-informacion-tercera-seccion {
    display: flex;
    align-items: end;
    justify-content: center;
    flex-direction: column;
}

@media(min-width: 800px) {
    .contenedor-principal-informacion-tercera-seccion {
        flex-direction: row;
    }
}

.contenedor-informacion-tercera-seccion-01 {
    text-align: center;
}

@media(min-width: 800px) {
    .contenedor-informacion-tercera-seccion-01 {
        width: 50%;
        text-align: left;
    }
}

.contenedor-informacion-tercera-seccion-01 h2 {
    font-size: clamp(1.2rem, 4vw, 2rem);
    margin: 4rem 0 0 0;
    letter-spacing: .4rem;
}

.contenedor-informacion-tercera-seccion-01 h3 {
    font-size: clamp(2.4rem, 9vw, 5.5rem);
    margin: 2rem 0;
    word-break: break-word;
    white-space: normal;
    padding: 0 4%;
}

@media (min-width: 800px) {
    .contenedor-informacion-tercera-seccion-01 h3 {
        margin: 2rem 0 0 0;
        padding: 0;
    }
}


.contenedor-informacion-tercera-seccion-02 {
    text-align: center;
}


@media(min-width: 800px) {
    .contenedor-informacion-tercera-seccion-02 {
        width: 50%;
        text-align: left;
    }
}

.contenedor-informacion-tercera-seccion-02 p {
    font-size: clamp(2rem, 10vw, 2.4rem);
    padding: 0 2rem;
}

@media (min-width: 460px) {
    .contenedor-informacion-tercera-seccion-02 p {
        padding: 0 4rem;
    }
}

@media (min-width: 800px) {
    .contenedor-informacion-tercera-seccion-02 p {
        margin: 0;
        padding: 0;
        text-align: left;
    }
}


.contenedor-tarjeta-tercera-seccion {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    place-items: center;
    padding: 5rem 0 7rem 0;
}

.tarjeta-tercera-seccion {
    width: 100%;
    height: 340px;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    text-align: center;
    text-align: left;
    padding: 15px;
    color: white;
    font-size: 18px;
    font-weight: bold;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease-in-out;

}

.tarjeta-tercera-seccion::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(223, 91, 58, 0);
    transition: background 0.3s ease-in-out;
    border-radius: inherit;
    z-index: 1;
}

.tarjeta-tercera-seccion:hover::before {
    background: rgba(223, 91, 58, 0.5);
}

@media(min-width: 540px) {
    .tarjeta-tercera-seccion {
        width: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: end;
        text-align: left;
    }
}

.tarjeta-tercera-seccion img {
    width: 100px;
    height: auto;
    position: relative;
    z-index: 2;
}

.tarjeta-tercera-seccion h2 {
    position: relative;
    z-index: 2;
    font-size: clamp(3rem, 10vw, 3.6rem);
    font-family: var(--fuente-Syne-Mediuml) !important;
    font-weight: 500;
}

@media (max-width: 890px) {
    .tarjeta-tercera-seccion {
        width: 100%;
        height: 300px;
    }
}

.contenedor-boton-tercera-seccion {
    text-align: center;
}

.contenedor-boton-tercera-seccion a button {
    width: 100%;
    height: 4rem;
    max-width: 40rem;
    background-color: var(--color-naranja);
    color: var(--color-blanco);
    font-size: clamp(2rem, 10vw, 2.2rem);
    font-family: var(--fuente-Syne-Mediuml) !important;
    border: none;
    border-radius: 30px;
    cursor: pointer;
}

.contenedor-boton-tercera-seccion a button:hover {
    background-color: var(--color-blanco);
    border: solid .25rem var(--color-salmon);
    color: var(--color-naranja);
    transition: all .35s ease;
    font-weight: bold;
}

/** ESTILOS CUARTA SECCION **/

.contenedor-principal-cuarta-seccion {
    margin-top: 5rem;
    margin-bottom: 5rem;
}

.contenedor-titulo-cuarta-seccion {
    text-align: center;
}

.contenedor-titulo-cuarta-seccion h2 {
    font-size: clamp(1.2rem, 4vw, 2rem);
    margin: 4rem 0 0 0;
    letter-spacing: .4rem;
}

.contenedor-imagenes-grid-cuarta-seccion {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    place-items: center;
    margin-top: 4rem;
    margin-bottom: 4rem;
    gap: 1rem;
}

.contenedor-imagenes-grid-cuarta-seccion img {
    width: 100%;
    max-width: 11rem;
}

.contenedor-principal-informacion-cuarta-seccion {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

@media(min-width: 800px) {
    .contenedor-principal-informacion-cuarta-seccion {
        flex-direction: row;
    }
}

.contenedor-imagenes-informacion-cuarta-seccion {
    width: 100%;
}

@media(min-width: 800px) {
    .contenedor-imagenes-informacion-cuarta-seccion {
        width: 50%;
    }
}

.contenedor-imagenes-informacion-cuarta-seccion img {
    width: 100%;
    height: auto;
}

.contenedor-informacion-cuarta-seccion {
    text-align: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 1rem;
}

@media(min-width: 800px) {
    .contenedor-informacion-cuarta-seccion {
        width: 50%;
    }
}

@media(min-width: 1140px) {
    .contenedor-informacion-cuarta-seccion {
        width: 50%;
        padding: 2rem 6rem;
        text-align: left;
    }
}

.contenedor-informacion-cuarta-seccion h2 {
    font-size: clamp(1.2rem, 4vw, 2rem);
    margin: 0;
    letter-spacing: .4rem;
}

.contenedor-informacion-cuarta-seccion h3 {
    font-size: clamp(2.8rem, 7vw, 5rem);
    margin: 2rem 0;
    word-break: break-word;
    white-space: normal;
    padding: 0 4%;
}

@media (min-width: 800px) {
    .contenedor-informacion-cuarta-seccion h3 {
        margin: 2rem 0 0 0;
        padding: 0;
    }
}

.bloque-info-cuarta-seccion {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.bloque-info-cuarta-seccion-padding {
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.bloque-info-cuarta-seccion img {
    width: 100%;
    height: auto;
    max-width: 4rem;
}


.bloque-info-cuarta-seccion p {
    font-size: clamp(1.8rem, 10vw, 2.2rem);
    padding: 0;
}

@media (min-width: 460px) {
    .bloque-info-cuarta-seccion p {
        padding: 0 4rem;
    }
}

@media (min-width: 800px) {
    .bloque-info-cuarta-seccion p {
        margin: 0;
        padding: 0;
    }
}

.contenedor-boton-cuarta-seccion {}

.contenedor-boton-cuarta-seccion button {
    width: 100%;
    height: 4rem;
    max-width: 40rem;
    background-color: var(--color-naranja);
    color: var(--color-blanco);
    font-size: clamp(2rem, 10vw, 2.6rem);
    font-family: var(--fuente-Syne-Mediuml) !important;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    margin: 3rem 0;
}

@media (min-width: 800px) {
    .contenedor-boton-cuarta-seccion button {
        width: 50%;
        height: 5rem;
    }
}

.contenedor-boton-cuarta-seccion button:hover {
    background-color: var(--color-blanco);
    border: solid .25rem var(--color-salmon);
    color: var(--color-naranja);
    transition: all .35s ease;
    font-weight: bold;
}


/** Estilos Quinta Seccion **/

.contenedor-principal-quinta-seccion {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin: 5rem 0;
    padding: 5rem 0;
}

.contenedor-informacion-quinta-seccion {
    text-align: center;
    display: flex;
    flex-direction: column;
}

@media (min-width: 800px) {
    .contenedor-informacion-quinta-seccion {
        flex-direction: row;
    }
}

@media (min-width: 800px) {
    .contenedor-informacion-quinta-seccion {
        text-align: left;
    }
}

.contenedor-informacion-quinta-seccion-01 {
    width: 100%;
    height: auto;
}

@media (min-width: 800px) {
    .contenedor-informacion-quinta-seccion-01 {
        width: 50%;
        height: auto;
    }
}

.contenedor-informacion-quinta-seccion-01 h2 {
    font-size: clamp(1.2rem, 4vw, 2rem);
    margin: 0;
    letter-spacing: .4rem;
    color: var(--color-blanco);
}

.contenedor-informacion-quinta-seccion-01 h3 {
    font-size: clamp(2.8rem, 7vw, 5rem);
    margin: 2rem 0;
    word-break: break-word;
    white-space: normal;
    padding: 0 4%;
    color: var(--color-blanco);
}

@media (min-width: 800px) {
    .contenedor-informacion-quinta-seccion-01 h3 {
        margin: 2rem 0 0 0;
        padding: 0;
    }
}

.contenedor-informacion-quinta-seccion-02 {
    width: 100%;
    height: auto;
}

@media (min-width: 800px) {
    .contenedor-informacion-quinta-seccion-02 {
        width: 50%;
        height: auto;
    }
}

.contenedor-informacion-quinta-seccion-02 p {
    font-size: clamp(1.8rem, 10vw, 2.2rem);
    padding: 0;
    color: var(--color-blanco);
}

@media (min-width: 460px) {
    .bloque-info-cuarta-seccion p {
        padding: 0 4rem;
    }
}

@media (min-width: 800px) {
    .bloque-info-cuarta-seccion p {
        margin: 0;
        padding: 0;
    }
}

.informacion-quinta-seccion-p {
    margin-bottom: 2rem;
}

.contenedor-tarjetas-quinta-seccion {
    display: grid;
    flex-wrap: wrap;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin-top: 10rem;
}

.tarjeta-quinta-seccion {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: auto;
    min-height: 40rem;
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease-in-out;
}

.tarjeta-quinta-seccion h2 {
    font-size: clamp(3rem, 10vw, 3.2rem);
    font-family: var(--fuente-Syne-Mediuml) !important;
    font-weight: 200;
    margin-bottom: 0;
    color: var(--color-blanco);
}

.tarjeta-quinta-seccion:hover {}

.tarjeta-quinta-seccion .flecha-tarjeta-quinta:last-child {
    position: absolute;
    bottom: 20px;
    right: 220px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    transform: translateX(-10px);
}

.tarjeta-quinta-seccion:hover .flecha-tarjeta-quinta:last-child {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 1024px) {
    .contenedor-tarjetas-quinta-seccion {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

@media (max-width: 480px) {
    .contenedor-tarjetas-quinta-seccion {
        display: flex;
        flex-direction: column;
    }

    .tarjeta-quinta-seccion {
        max-width: 100%;
    }
}

.flecha-tarjeta-quinta {
    width: 3.5rem;
    height: auto;
}

.icono-tarjeta-quinta-seccion {
    width: 8rem;
    height: auto;
}

.tarjeta-quinta-seccion-01 {
    border-bottom: solid .2rem var(--color-blanco);
}

@media (min-width: 631px) {
    .tarjeta-quinta-seccion-01 {
        border-bottom: none;
    }
}


.tarjeta-quinta-seccion-02 {
    border-bottom: solid .2rem var(--color-blanco);
}

@media (min-width: 631px) {
    .tarjeta-quinta-seccion-02 {
        border-left: solid .2rem var(--color-blanco);
        border-bottom: none;
    }
}

@media (min-width: 947px) {
    .tarjeta-quinta-seccion-02 {
        border-left: solid .2rem var(--color-blanco);
        border-right: solid .2rem var(--color-blanco);
    }
}

@media (min-width: 1052px) {
    .tarjeta-quinta-seccion-02 {
        border-left: solid .2rem var(--color-blanco);
        border-right: solid .2rem var(--color-blanco);
    }
}

.tarjeta-quinta-seccion-03 {
    border-bottom: solid .2rem var(--color-blanco);
}

@media (min-width: 631px) {
    .tarjeta-quinta-seccion-03 {
        border-bottom: 0;
    }
}

@media (min-width: 1052px) {
    .tarjeta-quinta-seccion-03 {
        border-right: solid .2rem var(--color-blanco);
    }
}



.tarjeta-quinta-seccion-04 {}

@media (min-width: 631px) {
    .tarjeta-quinta-seccion-04 {
        border-left: solid .2rem var(--color-blanco);
    }
}

@media (min-width: 947px) {
    .tarjeta-quinta-seccion-04 {
        border-right: solid .2rem var(--color-blanco);
        border-left: none;
    }
}

@media (min-width: 1052px) {
    .tarjeta-quinta-seccion-04 {
        border: none;
    }
}

/** Estilos Sexta Seccion **/

.contenedor-principal-sexta-seccion {}

.contenedor-info-sexta-seccion {
    text-align: center;
}

.contenedor-info-sexta-seccion h2 {
    font-size: clamp(1.2rem, 4vw, 2rem);
    margin: 4rem 0 0 0;
    letter-spacing: .4rem;
    margin-bottom: 2rem;
}

.contenedor-info-sexta-seccion h3 {
    font-size: clamp(2.8rem, 7vw, 5rem);
    margin: 0;
}

.contenedor-info-sexta-seccion p {
    font-size: clamp(1.8rem, 10vw, 2.2rem);
}

.contenedor-tarjetas-sexta-seccion {
    display: grid;
    place-items: center;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    /* Espaciado entre tarjetas */
    padding: 20px;
}

@media (min-width: 484px) {
    .contenedor-tarjetas-sexta-seccion {
        display: grid;
        place-items: center;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        /* Espaciado entre tarjetas */
        padding: 20px;
    }

}

.tarjeta-sexta-seccion {
    width: 150px;
    height: 150px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    font-size: 16px;
    font-weight: bold;
    transition: background-image 0.3s ease-in-out;
    border-radius: 25px;
    border: solid .25rem #e9e9e9;
    font-size: clamp(1.2rem, 3vw, 2rem);
    color: #acacac;
    cursor: pointer;

}


.tarjeta-sexta-seccion:hover {
    color: var(--color-blanco);
    box-shadow: none;
}

@media (min-width: 484px) {
    .tarjeta-sexta-seccion {
        width: 200px;
        height: 200px;
    }
}

.tarjeta-sexta-seccion:hover {
    background-image: url('<?php echo get_template_directory_uri(); ?>/img/esquemas_activo_iluminow.png');
}


/** Estilos Septima Seccion **/

.contenedor-principal-septima-seccion {
    margin-top: 10rem;
}

.contenedor-titulo-septima-seccion {
    text-align: center;
}

.contenedor-titulo-septima-seccion h2 {
    font-size: clamp(1.2rem, 4vw, 2rem);
    letter-spacing: .4rem;
}

.contenedor-titulo-septima-seccion p {
    font-size: clamp(1.8rem, 10vw, 2.2rem);
    margin-bottom: 4rem;
}

.mobile-hide {}

.contenedor-imagen-septima-seccion {
    z-index: 1;
    display: flex;
    align-items: end;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 55rem;
    padding: 2rem;
    border-radius: 25px;
    position: relative;
    margin-bottom: -5rem;
}

@media(min-width: 600px) {
    .contenedor-imagen-septima-seccion {
        min-height: 60rem;
        padding: 5rem;
        margin-bottom: -12rem;
    }
}

.contenedor-informacion-imagen-septima-seccion {}

.contenedor-informacion-imagen-septima-seccion h3 {
    font-size: clamp(2.8rem, 10vw, 5rem);
    color: var(--color-naranja);
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 7rem;
}

.contenedor-informacion-imagen-septima-seccion p {
    font-size: clamp(1.8rem, 10vw, 2.2rem);
    color: var(--color-blanco);
}

.contenedor-sub-informacion-imagen-septima-seccion {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1rem;
}

.highlight {
    background: var(--color-blanco);
    padding: 2px 0;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    margin-bottom: 1rem;
}

.highlight-paneles {
    background: var(--color-blanco);
    padding: 2px 0;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    margin-bottom: 1rem;
    color: var(--color-negro);
}

/** Estilos Octava Seccion **/
.contenedor-principal-octava-seccion {
    padding-top: 10rem;
    padding-bottom: 5rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    z-index: 0 !important;
}

@media(min-width: 600px) {
    .contenedor-principal-octava-seccion {
        padding-top: 20rem;
        padding-bottom: 10rem;
    }
}

.contenedor-informacion-octava-seccion {}

.contenedor-informacion-octava-seccion h3 {
    font-size: clamp(2.8rem, 7vw, 5rem);
    margin: 0;
    color: var(--color-blanco);
}

.contenedor-informacion-octava-seccion button {
    font-family: var(--fuente-Syne-Mediuml);
    background-color: var(--color-blanco);
    color: var(--color-naranja);
    font-size: clamp(2rem, 10vw, 2.6rem);
    border: solid .2rem #e9e9e9;
    width: 100%;
    height: 4rem;
    max-width: 25rem;
    cursor: pointer;
    border-radius: 25px;
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.contenedor-informacion-octava-seccion button:hover {
    background-color: var(--color-salmon);
    border: solid .25rem var(--color-blanco);
    color: var(--color-blanco);
    transition: all .35s ease;
}



/** Estilos Formulario **/

form {}

form p {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

@media(min-width: 600px) {
    form p {
        flex-direction: row;
        gap: 1.5rem;
    }
}

form p label {
    width: 100%;
    color: var(--color-blanco);
    font-family: var(--fuente-Syne-Mediuml);
    font-size: clamp(2rem, 10vw, 2rem);
}

@media(min-width: 600px) {
    form p label {
        width: 10%;
        color: var(--color-blanco);
        font-family: var(--fuente-Syne-Mediuml);
        font-size: clamp(2rem, 10vw, 2rem);
    }
}

.nombre-formulario,
.correo-formulario,
.selector-formulario,
.telefono-formulario,
.correo-formulario,
.nombre-empresa-formulario,
.asunto-formulario {
    width: 35rem;
    height: 4.5rem;
    margin-bottom: 1rem;
    font-size: clamp(1.6rem, 10vw, 1.8rem);
    font-family: var(--fuente-Syne-Mediuml);
    padding-left: 1rem;
}

.mensaje-formulario {
    width: 35rem;
    margin-bottom: 1.5rem;
}

.label-recibo {
    width: 22rem;
    border: solid .20rem #ffffff;
    background-color: var(--color-naranja);
    border-radius: 25px;
    padding: 1rem;
}



.wpcf7-form-control-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media(min-width: 600px) {
    .wpcf7-form-control-wrap {
        display: flex;
        align-items: center;
    }
}

.wpcf7-submit {
    width: 18rem;
    border: solid .20rem #ffffff;
    background-color: var(--color-naranja);
    border-radius: 25px;
    padding: 1rem;
    font-family: var(--fuente-Syne-Mediuml);
    font-size: clamp(2rem, 10vw, 2rem);
    color: var(--color-blanco);
    margin-top: 2rem;
    margin-bottom: 2rem;
    cursor: pointer;
}

.wpcf7-submit:hover {
    background-color: var(--color-blanco);
    border: solid .25rem var(--color-naranja);
    color: var(--color-naranja);
    transition: all .35s ease;
    font-weight: bold;
}


.archivo-formulario {
    font-family: var(--fuente-Syne-Mediuml);
    font-size: 1.2rem;
}

.wpcf7-response-output {
    color: var(--color-blanco);
    font-family: var(--fuente-Syne-Mediuml);
    font-size: 1.6rem;
    border-color: var(--color-blanco) !important;
}

.wpcf7-form-control-wrap {
    display: flex;
    flex-direction: column;
}

.wpcf7-not-valid-tip {
    color: var(--color-blanco);
    font-family: var(--fuente-Syne-Mediuml);
    font-size: 1.6rem;
    margin-bottom: .5rem;
}

/** Estilos Footer Principal **/
footer {
    background-color: var(--color-naranja);
    padding: 4rem 0;
}

.contenedor-footer-principal {}

.contenedor {}

.contenedor-info-footer {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

@media(min-width: 780px) {
    .contenedor-info-footer {
        flex-direction: row;
        gap: 8rem;
    }
}

.contenedor-footer-01 {
    text-align: center;
}

@media(min-width: 780px) {
    .contenedor-footer-01 {
        width: 40%;
        text-align: left;
    }
}

.contenedor-footer-01 img {
    width: 100%;
    height: auto;
    max-width: 30rem;
}

.contenedor-footer-iconos-redes {
    margin-top: 8rem;
}

.contenedor-footer-iconos-redes .img-footer-01 {
    width: 100%;
    height: auto;
    max-width: 30px;
    margin-right: 3rem;
}

.contenedor-footer-iconos-redes .img-footer-02 {
    width: 100%;
    height: auto;
    max-width: 15px;
}

.flex-footer-02-03 {
    display: flex;
    width: 100%;
    gap: 4rem;
}

@media(min-width: 780px) {
    .flex-footer-02-03 {
        gap: 4rem;
        width: 60%;
    }
}

.contenedor-footer-02 {
    width: 50%;
    height: auto;
    text-align: center;
}

@media(min-width: 780px) {
    .contenedor-footer-02 {
        width: 20%;
        height: auto;
        text-align: left;
    }
}

.contenedor-footer-02 ul {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


.contenedor-footer-02 h3 {
    font-size: clamp(2.2rem, 5vw, 2.6rem);
    font-family: var(--fuente-Barlow-bold);
    margin: 0 0 1rem 0;
    color: var(--color-blanco);
}

.contenedor-footer-02 ul a li {
    font-size: clamp(1.6rem, 5vw, 1.8rem);
    color: var(--color-blanco);
    font-family: var(--fuente-Barlow-Regular);
    font-weight: 300;
}

.contenedor-footer-03 {
    width: 50%;
    height: auto;
    text-align: center;
}

@media(min-width: 780px) {
    .contenedor-footer-03 {
        width: 20%;
        height: auto;
        text-align: left;
    }
}

.contenedor-footer-03 ul {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contenedor-footer-03 h3 {
    font-size: clamp(2.2rem, 5vw, 2.6rem);
    font-family: var(--fuente-Barlow-bold);
    margin: 0 0 1rem 0;
    color: var(--color-blanco);
}

.contenedor-footer-03 ul a li {
    font-size: clamp(1.6rem, 5vw, 1.8rem);
    font-family: var(--fuente-Barlow-Regular);
    font-weight: 300;
    color: var(--color-blanco);
}

.contenedor-linea-footer {
    width: 100%;
    height: .1rem;
    background-color: var(--color-blanco);
    margin: 4rem 0;
}

.contenedor-direccion-footer {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media(min-width: 780px) {
    .contenedor-direccion-footer {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 10rem;
    }
}


.contenedor-direccion-footer p {
    font-size: clamp(1.2rem, 5vw, 1.8rem);
    font-family: var(--fuente-Barlow-Regular);
    font-weight: 300;
    color: var(--color-blanco);
}


.float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
}

.float:hover {
    text-decoration: none;
    color: #25d366;
    background-color: #fff;
}

.my-float {
    margin-top: 16px;
}