/** IMPORTACIONES **/

@import url('https://fonts.googleapis.com/css2?family=Iosevka+Charon:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');

/** DECLARACIONES GLOBALES **/

:root {
    --BlancoPrimario: #FFFFFF;
    --BlancoSecundario: #F7F7F7;
    --BlancoTerciario: #999999;
    --AzulPrimario: #1E3A8A;
    --AzulSecundario: #11204D;
    --VerdePrimario: #00D084;
    --RojoPrimario: #FF0000;
    --NaranjaPrimario: #FF8000;
    --NaranjaSecundario: #FF8C00;
    --AmarilloPrimario: #FFFF00;
    --Negro: #000000;
}
html {
    font-family: 'Work Sans', sans-serif;
    box-sizing: border-box; /* 1P Declaracion para evitar calculos de tamaño */
    font-size: 62.5%; /* 1P Reiniciar tamaño de letra (10px = 1rem) */
    color: var(--BlancoPrimario);
}
body {
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 16px; /* 2P Reiniciar tamaño de letra (10px = 1rem) */
}

/** VARIABLES GLOBALES **/

a {
    text-decoration: none;
    color: var(--BlancoPrimario);
}
ul {
    list-style: none;
    padding: 0;
}
h1,h2,h3,h4,h5,h6 {
    font-family: 'Work Sans', sans-serif;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
}

/*todo ANIMACIONES GLOBALES todo*/

.hidden--animation {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

.show--animation {
  opacity: 1;
  transform: translateY(0);
}

/** BARRA DE NAVEGACION **/

nav {
    background-color: var(--NaranjaPrimario);
    justify-content: space-between;
    align-items: center;
    transition: all 0.5s ease;
    display: flex;
    padding: 1rem 2rem;
}
nav ul {
    display: flex;
}
nav ul a {
    background-color: var(--AzulPrimario);
    text-transform: uppercase;
    border-radius: 5rem;
    padding:  1rem 2rem;
    border: 0.2rem solid var(--AzulPrimario);
    margin: 0.5rem;
    color: var(--BlancoPrimario);
}
.nav__btn {
    display: none;
}
.nav__checkbox {
    display: none;
}

/*? INTERACCIONES EN LA BARRA DE NAVEGACION ?*/

nav ul a:hover , .nav--active {
    background-color: var(--AzulSecundario);
    transition: 0.2s;
    border: 0.2rem solid var(--BlancoPrimario);
}

/*todo ANIMACIONES EN LA BARRA DE NAVEGACION todo*/

.nav--hidden {
    transform: translateY(-100%);
    opacity: 0;
    filter: blur(5px);
}

.nav--show {
    transform: translateY(0);
    opacity: 1;
}

/*! RESPONSIVIDAD MOVIL BARRA DE NAVEGACION !*/

@media screen and (max-width: 767.99px) {

    nav {
        position: relative;
        z-index: 999;
    }
    .nav__btn {
        display: initial;
    }
    .nav__btn label {
        cursor: pointer;
    }
    .nav__checkbox:checked ~ .nav__list {
        display: initial;
    }
    .nav__list {
        background-color: var(--AzulPrimario);
        position: absolute;
        z-index: 999;
        display: none;
        right: 0;
        left: 0;
        top: 10rem;
    }
    .nav__list ul {
        border-top: 2px solid var(--AzulSecundario);
        display: block;
        margin: 0;
    }
    .nav__list ul li {
        text-align: center;
        padding: 0;
    }
    .nav__list ul li a {
        border-radius: 0;
        padding: 1.5rem;
        display: block;
        margin: 0;
        border: none;
        color: var(--BlancoPrimario);
    }

    /*? INTERACCIONES EN LA BARRA DE NAVEGACION SOLO PARA RESPONSIVIDAD ?*/

    .nav--active {
        background-color: var(--AzulPrimario);
    }
    .nav__list ul li a:hover {
        background-color: var(--NaranjaPrimario);
}
}

/** PIE DE PAGINA **/

footer {
    grid-template-columns: repeat(4, 1fr);
    background-color: var(--AzulSecundario);
    justify-content: space-evenly;
    text-align: center;
    padding: 2.5rem 20% 1rem 20%;
    display: grid;
}
footer h3 {
    text-transform: uppercase;
    font-size: 1.8rem;
}
.footer__section {
    min-width: 20rem;
    max-width: 30rem;
    padding: 1rem;
}
.footer__menu ul {
    line-height: 1.6;
    padding: 0;
}
.footer__contact_rrss ul {
    justify-content: center;
    display: flex;
}
.footer_form {
    text-align: left;
}
.footer_form label {
    font-size: 1.2rem;
}
.footer_form span {
    color: var(--RojoPrimario);
}
.footer_form input {
    border-radius: 0.5rem;
    box-sizing: border-box;
    padding: 1rem;
    border: none;
    margin: 0;
    width: 100%;
}
footer button {
    background-color: var(--NaranjaPrimario);
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 1rem;
    font-size: 1.2rem;
    padding: 1rem 1.7rem;
    margin: 1.5rem;
    border: none;
    color: var(--BlancoPrimario);
}
.footer_copyright {
    background-color: var(--BlancoTerciario);
    align-items: center;
    text-align: center;
    font-size: 1.2rem;
}
.footer_copyright span {
    font-weight: bold;
}
.footer_copyright p {
    margin: 0;
}

/*? INTERACCIONES CON EL PIE DE PAGINA ?*/

.footer__menu a:hover, .footer__contact_rrss a:hover {
    transition: 0.2s;
    color: var(--NaranjaPrimario);
}
footer button:hover {
    background-color: var(--NaranjaSecundario);
    transition: 0.2s;
    transform: scale(1.01);
}

/*! RESPONSIVIDAD MOVIL PIE DE PAGINA !*/

@media screen and (max-width: 767.99px) {

    footer {
        display: block;
    }
    footer h3 {
        margin: 0;
    }
    .footer__section {
        max-width: 100%;
        padding: 1rem 0;
    }
    .footer_form input {
        display: block;
        margin: 0 auto;
        width: 100%;
    }
    .footer__img, .footer__menu {
        display: none;
    }
}

/** PAGINA PRINCIPAL **/

.index__main {
    background-image: url(/images/background.png);
    background-color: var(--AzulPrimario);
}
.index__background {
    background-repeat: no-repeat;
    background-image: url(/images/main_qhse.png);
    background-size: cover;
    box-shadow: inset 0 0 0 1.5rem rgba(0, 0, 0, 0.3);
    position: relative;
    height: 80rem;
}
.index__content {
    background-color: rgba(0, 0, 0, 0.2); 
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: absolute;
    display: flex;
    height: 100%;
    width: 100%;
}
.index__content h2 {
    font-family: "Roboto Slab", serif;
    text-align: center;
    font-size: 4rem;
    max-width: 55rem;
}
.index__content h3 {
    font-family: "Iosevka Charon", monospace;
    font-weight: 500;
    text-align: center;
}
.index__content span {
    color: var(--NaranjaPrimario);
}
.index__btn {
    background-color: var(--NaranjaPrimario);
    text-transform: uppercase;
    border-radius: 5rem;
    font-weight: bold;
    font-size: 2rem;
    padding: 1.5rem 6.5rem;
    margin: 1.5rem;
    border: 0.2rem solid var(--Negro);
    color: var(--BlancoPrimario);
}

/** PAGINA PRINCIPAL SECCION SERVICIOS **/

.index__services {
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem 0;
    margin: 0 10%;
}
.index__services h2 {
    text-transform: uppercase;
    margin: 2rem;
}
.index__allcards__services {
    grid-template-columns: repeat(3, 1fr);
    display: grid;
}
.index__card__services {
    background-color: var(--AzulSecundario); 
    border-radius: 0.8rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    box-sizing: border-box;
    padding: 2rem;
    margin: 1rem;
    min-width: 20rem;
}
.index__card__services img {
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 100%;
}
.index__card__services h2, h3 {
    text-transform: uppercase;
}
.index__card__services_details {
    color: var(--NaranjaSecundario);
}

/*? PAGINA PRINCIPAL INTERACCIONES ?*/

.index__btn:hover {
    background-color: var(--NaranjaSecundario);
    transition: 0.2s;
    transform: scale(1.01);
}
.index__card__services:hover {
    box-shadow: 0 1.5rem 3rem rgba(0,0,0,0.2);
    transform: scale(1.01);
}

/*! RESPONSIVIDAD MOVIL PAGINA PRINCIPAL !*/

@media screen and (max-width: 767.99px) {

    .index__services {
        margin: 0;
    }
    .index__allcards__services {
        grid-template-columns: repeat(1, 1fr);
        display: grid;
    }
}

/** PAGINA NOSOTROS **/

.us__main {
    background-image: url(/images/background.png);
    background-color: var(--BlancoSecundario);
}
.us__section {
    grid-template-columns: repeat(1, 1fr);
    padding: 5rem 20%;
    display: grid;
    gap: 2rem;
}
.us__section h1 {
    padding: 2rem 0;
}
.us__section__category {
    background-color: var(--AzulSecundario);
    align-items: center;
    border-radius: 0.8rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    padding: 2.5rem;
    margin: 1rem;
    gap: 2rem;
}
.us__section__mv {
    grid-template-columns: repeat(2, 1fr);
    display: grid;
}
.us__section__category img {
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
}

/*! RESPONSIVIDAD MOVIL PAGINA SERVICIOS !*/

@media screen and (max-width: 767.99px) {
    
    .us__section {
        min-width: auto;
        padding: 5rem 0;
    }
    .us__section__category {
        margin: 1rem;
    }
    .us__section__mv {
        display: block;
    }
    .us__section__mv__img {
        display: none;
    }
}

/** PAGINA SERVICIOS **/

.services__main {
    background-image: url(/images/background.png);
    background-color: var(--BlancoSecundario);
    color: var(--Negro);
}
.services__section {
    grid-template-columns: repeat(1, 1fr);
    padding: 5rem 20%;
    display: grid;
    gap: 2rem;
}
.services__card {
    grid-template-columns: repeat(2, 1fr);
    background-color: var(--AzulSecundario);
    border-radius: 0.8rem;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    max-width: 110rem;
    padding: 2rem;
    margin: 1rem;
    display: grid;
    color: var(--BlancoPrimario);
    gap: 5% ;
}
.services__card img {
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0.8rem 0 0 0.8rem;
    width: 100%;
}
.services__card li {
    position: relative;
    padding: 0 0 0 2rem;
}
.services__card li::before {
    background-repeat: no-repeat;
    background-size: contain;
    transition: 0.3s ease;
    position: absolute;
    content: "";
    height: 1.6rem;
    width: 1.6rem;
    left: 0;
    top: 0.1rem;
}
.services__card__father::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'%3E%3Cpath d='M9 6c0 -.852 .986 -1.297 1.623 -.783l.084 .076l6 6a1 1 0 0 1 .083 1.32l-.083 .094l-6 6l-.094 .083l-.077 .054l-.096 .054l-.036 .017l-.067 .027l-.108 .032l-.053 .01l-.06 .01l-.057 .004l-.059 .002l-.059 -.002l-.058 -.005l-.06 -.009l-.052 -.01l-.108 -.032l-.067 -.027l-.132 -.07l-.09 -.065l-.081 -.073l-.083 -.094l-.054 -.077l-.054 -.096l-.017 -.036l-.027 -.067l-.032 -.108l-.01 -.053l-.01 -.06l-.004 -.057l-.002 -12.059z'/%3E%3C/svg%3E");
}
.services__card__child li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF8000'%3E%3Cpath d='M9 6c0 -.852 .986 -1.297 1.623 -.783l.084 .076l6 6a1 1 0 0 1 .083 1.32l-.083 .094l-6 6l-.094 .083l-.077 .054l-.096 .054l-.036 .017l-.067 .027l-.108 .032l-.053 .01l-.06 .01l-.057 .004l-.059 .002l-.059 -.002l-.058 -.005l-.06 -.009l-.052 -.01l-.108 -.032l-.067 -.027l-.132 -.07l-.09 -.065l-.081 -.073l-.083 -.094l-.054 -.077l-.054 -.096l-.017 -.036l-.027 -.067l-.032 -.108l-.01 -.053l-.01 -.06l-.004 -.057l-.002 -12.059z'/%3E%3C/svg%3E");
}
.services__card h2 {
    text-transform: uppercase;
    text-align: center;
}
.services__card__text {
    width: 50;
}
.services__card__text li {
    cursor: pointer;
    margin: 0.5rem 0;
}
.services__card__text li ul li, .services__card__text p{
    margin-left: 1rem;
}
.services__card__text p {
    font-size: 1.4rem;
    cursor: auto;
}
.services__card__child {
    display: none;
}
.services__card__child.active {
    display: block;
}
.services__card__child li {
    font-size: 1.5rem;
    color: var(--NaranjaSecundario);
}
.services__card__child p {
    color: var(--BlancoTerciario);
}
.services__card__child li p {
    display: none;
}
.services__card__child li p.active {
    display: block;
}

/*? PAGINA SERVICIO INTEACCIONES ?*/

.services__card__father:has(.services__card__child.active)::before {
    transform: rotate(90deg);
}
.services__card__child li:has(> p.active)::before {
    transform: rotate(90deg);
}

/*! RESPONSIVIDAD MOVIL PAGINA SERVICIOS !*/

@media screen and (max-width: 767.99px) {

    .services__section {
        padding: 5rem 0;
    }
    .services__card {
        grid-template-columns: repeat(1, 1fr);
        max-height: none;
        gap: 0;
    }
    .services__card__text {
        margin-top: 1rem;
    }
    .services__card img {
        border-radius: 0.8rem 0.8rem 0 0;
    }
}

/** PAGINA DE NOTICIAS **/

.newsletter__main {
    background-image: url(/images/background.png);
    background-color: var(--BlancoSecundario);
}
.newsletter__carrousel {
    touch-action: pan-y;
    padding: 5rem 0;
    margin: 0 10%;
}
.newsletter__carrousel__container {
    background-color: var(--AzulSecundario);
    border-radius: 0.8rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    max-width: 110rem;
    overflow: hidden;
    position: relative;
    padding: 2rem;
    margin: 1rem auto;
    height: 75rem;
}
.newsletter__carrousel__track {
    transition: transform 0.5s ease-in-out;
    display: flex;
    height: 100%;
    gap: 2rem;
}
.newsletter__carrousel__slide {
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    display: grid;
    flex: 0 0 100%;
}
.newsletter__carrousel__item {
    text-align: center;
}
.newsletter__carrousel__item img {
    background-size: cover;
    max-height: 75rem;
    max-width: 100%;
}
.newsletter__carrousel__item__text {
    padding: 0 5rem;
}
.newsletter__carrousel__item__text p {
    text-align: start;
}
.newsletter__carrousel__item__text ul {
    list-style: disc;
    margin: 0 10%;
}
.newsletter__carrousel__item__text ul li  {
    text-align: start;
    margin: 1rem;
}
.newsletter__carrousel__item__text ul li::marker {
    color: var(--NaranjaPrimario);
}
.newsletter__carrousel__btn {
    background-color: transparent;
    position: absolute;
    border: none;
    cursor: pointer;
    color: var(--NaranjaPrimario);
    top: 50%;
}
.carrousel__btn__prev {
    left: 10px;
}
.carrousel__btn__next {
    right: 10px;
}

/*? PAGINA NEWSLETTER INTERACCIONES ?*/

.newsletter__carrousel__btn:hover {
    transform: scale(1.2);
}

/*! RESPONSIVIDAD MOVIL PAGINA SERVICIOS !*/

@media screen and (max-width: 767.99px) {

    .newsletter__allcards__services {
        grid-template-columns: repeat(1, 1fr);
        display: grid;
    }
    .newsletter__carrousel {
        padding: 5rem 0;
        margin: 0;
    }
    .newsletter__carrousel__container {
        height: auto;
        margin: 1rem;
    }
    .newsletter__carrousel__track {
        gap: 0;
    }
    .newsletter__carrousel__slide {
        display: block;
    }
    .newsletter__carrousel__item {
        padding: 0 2rem;
    }
    .newsletter__carrousel__item__text {
        margin-top: 2rem;
    }
}

/** PAGINA CONTACTO **/

.contact__main {
    background-image: url(/images/background.png);
    background-color: var(--BlancoSecundario);
    justify-content: center;
    padding: 5rem;
    display: flex;
}
.contact__main h1 {
    color: var(--Negro);
}
.contact__group {
    grid-template-columns: repeat(2, 1fr);
    background-color: var(--AzulSecundario);
    border-radius: 1rem;
    box-shadow: 0 0.4rem 0.8rem rgba(0,0,0,0.2);
    max-width: 120rem;
    padding: 2rem;
    margin: 1rem 0;
    display: grid;
    gap: 1rem;
}
.contact__section__image {
    align-items: center;
    display: flex;
}
.contact__section__image img {
    border-radius: 1rem 0 0 1rem;
    object-position: left;
    object-fit: cover;
    height: 100%;
    width: 100%;
}
.contact__section__message {
  display: none !important;
}
.contact__message__modal {
    background-color: var(--AzulPrimario);
    border-radius: 1rem;
    text-align: center;
    max-width: 30rem;
    padding: 1rem 5rem;
    border: 0.2rem solid var(--NaranjaPrimario);
    width: 80%;
}
 .contact__message__modal button {
    background-color: var(--NaranjaPrimario);
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 1rem;
    font-size: 1.2rem;
    padding: 1rem 1.7rem;
    cursor: pointer;
    margin: 1.5rem;
    border: none;
    color: var(--BlancoPrimario);
}
.contact__section__form {
    padding: 1rem;
    width: 100%;
}
.contact__section__form fieldset {
    border: none;
    margin: 0;
}
.contact__section__form h5 {
    font-weight: 500;
    color: var(--NaranjaPrimario);
}
.contact__section__form legend {
    text-transform: uppercase;
    font-family: 'Work Sans', sans-serif;
    font-weight: bold;
    text-align: center;
    font-size: 2.2rem;
    width: 100%;
}
.contact__form__group {
    grid-template-columns: repeat(1, 1fr);
    display: grid;
    gap: 2rem;
}
.contact__form__section input, .contact__form__section textarea {
    border-radius: 0.6rem;
    box-sizing: border-box;
    outline-offset: -0.3rem;
    padding: 1rem;
    border: none;
    width: 100%;
}
.contact__form__section textarea {
    min-height: 12rem;
    resize: none;
}
.contact__form__section span {
    color: var(--RojoPrimario);
}
.contact__form__btn button {
    background-color: var(--NaranjaPrimario);
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 0.5rem;
    margin-top: 2rem;
    padding: 1rem;
    border: none;
    color: var(--BlancoPrimario);
    width: 100%;
}

/*? PAGINA CONTACTO INTEACCIONES ?*/

.contact__form__btn button:hover, .contact__message__modal button:hover {
    background-color: var(--NaranjaSecundario);
    transform: scale(1.01);
}
.contact__form__section input:focus, .contact__form__section textarea:focus {
    outline: 2px solid var(--NaranjaPrimario);
}
#contact__message__overlay {
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    z-index: 999;
    display: flex;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

/*! RESPONSIVIDAD MOVIL PAGINA CONTACTO !*/

@media screen and (max-width: 767.99px) {
    
    .contact__main {
        padding: 5rem 0;
    }
    .contact__group {
        display: flex;
        margin: 1rem;
    }
    .contact__section__image {
        display: none;
    }
}

/*! RESPONSIVIDAD MOVIL HORIZONTAL !*/

@media screen and (min-width: 768px) and (max-width: 1200px) and (orientation: landscape) {

    footer {
        padding: 0;
    }
    .us__section {
        padding: 5rem 10%;
    }
    .services__section {
        padding: 5rem 10%;
    }
    .services__card {
        display: block;
    }
    .newsletter__carrousel {
        margin: 0 10%;
    }
    .newsletter__carrousel__container {
        height: auto;
    }
}