:root {
    --morado: #674c9a;
    --verde: #CBD968;
    --verdewhats: #25D366;
    --transparente: #00000000;
    --blanco: #FFFFFF;
    --gris: #ACACAC;
    --negro: #000000;
}

img, video {
  max-width: 100%;
  height: auto;
}

html {
    font-size: 62.5%;
}

body {
    font-size: 16px;
    font-family: 'Outfit', sams-serif;

    overflow-x: hidden; /* con "hidden" Oculta cualquier elemento que se salga del margen*/

    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@keyframes parpadeo-borde {
  0%, 100% {
    border-color: var(--verde); /* Color inicial (ejemplo: rojo) */
    box-shadow: 0 0 5px var(--blanco); /* Opcional: un ligero brillo */
  }
  50% {
    border-color: transparent; /* Se oculta a la mitad del tiempo */
    box-shadow: 0 0 0 transparent;
  }
}


/*
* {
  outline: 1px solid red !important; /*Utilizado para marcar bordes rojos en todos los elementos
}
*/

/* RGB utilizados 103, 76, 154 y 203, 217, 104 */

*{
    margin: 0;
    padding: 0;
    box-sizing:content-box;
    text-decoration: none;
    list-style: none;
}

.container {
    max-width: 120rem;
    margin: 0 auto;
}

.header{
    background-color: var(--morado);
    max-height: 50.5rem;
    padding-top: 10rem;
    display: flex;
    align-items: center;
}

.menu {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    right: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }

.logo img {
    width: 8rem;
    margin-left: 1.5rem;
}

.sociales {
    width: 15rem;
}

.icon-tabler-brand-facebook {
    background-color: var(--verde);
    border-radius: 0.5rem;
    margin-right: 1.5rem;
}

.icon-tabler-brand-instagram {
    margin-right: 1.5rem;
}

.icon-tabler-brand-twitter {
    background-color: var(--verde);
    border-radius: 0.5rem;
    margin-right: 1.5rem;
}

/*Se comienza a trabajar con el header*/

.header-content {
    padding: 12rem 0;
    display: flex;
    align-items: center;
}

.header-textura img {
    height: 45rem;
    margin-left: 0;
}

.header-logo img {
    height: 16rem;
    margin-top: -4rem;
}

.header-caja img {
    width: 9rem;
    position: relative;
    top: 14.6rem;
    left: -15rem;
}

/*-----------------Boton contacto---------------*/

.contact {
    background-color: var(--morado);
    height: 8rem;
    display: flex;
    align-items:center;
    justify-content: center;
    padding-top: 1rem;
}

.btn-1 {
    display: inline-flex;
    padding: 1.2rem 4rem;
    color: var(--verde);
    border-style: solid;
    border-color: var(--verde);
    border-width: 0.1rem;
    border-radius: 10rem;
    font-size: 3rem;
    font-weight: 500;
    margin-top: 2rem;
    margin-bottom: 3rem;
    animation: parpadeo-borde 1s infinite;
}

.btn-1:hover {
    transition: 0.3s;
    background-color: var(--verdewhats);
    color: var(--morado);
    border-color: var(--verdewhats);

}

.contact img {
    position: relative;
    top: 0.3rem;
    height: 3rem;
    padding-left: 1rem;
}
/*------------------------------------------------------Slogan-------------------*/
.slogan {
    background-image: linear-gradient(
        var(--transparente),
        var(--transparente)),
        url(../images/HeadBg03.png);
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: cover;
        min-height: 60rem;
        display: flex;
        align-items: center;
}

.slogan img {
    width: 55rem;
    margin-left: -3rem;
}

/*-------------------------------------------------------About--------------------*/

.about-content {
    max-height: 20rem;
    color: var(--morado);
    font-size: 3.6rem;
    font-weight: 500;
    text-align: justify;
    padding: 10rem 35rem 11rem 18rem;
    align-items: center;
    border-bottom: 1.5rem dashed var(--morado);

}
.about .logoG img {
    width: 25rem;
    position: absolute;
    right: 10rem;
    top: 135rem;
}

.tex01 img {
    height: 40rem;
    position: absolute;
    top: 128rem;
    z-index: -1;
}

/*---------------------------------------------------------servicios----------------*/

.services {
    background-color: var(--morado);
    min-height: 30rem;
    padding-bottom: 8rem;
}

.services .txt-1 {
    font-size: 4rem;
    font-weight: 600;
    color: var(--blanco);
    padding-top: 5rem;
    padding-left: 5rem;
    position: absolute;
}

.services .txt-2 {
    font-size: 7rem;
    font-weight: 700;
    color: var(--blanco);
    padding-top: 10rem;
    padding-left: 5rem;
    position: absolute;
}

.services .saludo-verde { 
    /*width: 50rem;*/
    position: relative;
    padding: 5rem 0 0 40%;
}
/* este apartado se modifico en la Rev 05 */
.services-content {
    font-size: 2.5rem;
    font-weight: 350;
    color: var(--verde);
    text-align: center;

    display: flex;
    flex-direction: row;       /* Fuerza la fila horizontal */
    flex-wrap: nowrap;
    justify-content: space-between; /* Distribuye el espacio sobrante entre las tarjetas */
    gap: 15px;                 /* Separación fija entre cada elemento */
    width: 95%;                /* Ocupa casi todo el ancho de la pantalla */
    max-width: 1200px;         /* Límite en pantallas gigantes */
    margin: 0 auto;            /* Centra el bloque completo */
    padding: 15px 5px;         /* Espacio arriba y abajo para que el efecto hover no se corte */
    overflow: hidden;          /* PROHIBIDO generar barras de desplazamiento */
    box-sizing: border-box;
}

.service1, .service2, .service3, .service4, .service5, .service6 {
  /* FÓRMULA MÁGICA: El 100% de la pantalla se divide entre 6 elementos, */
  /* restando proporcionalmente los 15px de los espacios ('gap') intermediarios. */
  flex: 0 1 calc((100% - (15px * 5)) / 6);
  
  background-color: var(--transparente);
  padding: 20px 10px;        /* Un padding interno equilibrado */
  text-align: center;        /* Centra el texto de tus servicios */
  transition: transform 0.3s ease; 
  box-sizing: border-box;
}

.service2, .service5 {
    padding-top: 10rem;
}

.service3, .service4 {
    padding-top: 20rem;
}

.service1:hover, .service2:hover, .service3:hover, .service4:hover, .service5:hover, .service6:hover {
    transform: scale(1.05);
}

/*
.services-content img {
    width: 14rem;
}
*/

/*------------------------------------------------Contacto correo-----------------*/

.correo {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--morado);
}

form {
    display: flex;
}

.campo {
    padding: 1.5rem 3.5rem;
    background-color: var(--blanco);
    border-radius: 2.5rem;
    margin-right: 1.5rem;
    border: 0.1rem var(--gris);
    outline: none;
    color: var(--morado);
}

.campo::placeholder {
    color: var(--gris);
} 

.form-content {
    padding: 0rem 0 6rem 0;
    text-align: center;
}

.form-content h2 {
    font-size: 4rem;
    color: var(--blanco);
    margin-bottom: 2.5rem;
}

.btn-2 {
    display: inline-block;
    padding: 1.5rem 3.5rem;
    font-size: 1.6rem;
    background-color: var(--verde);
    color: var(--morado);
    border-radius: 2.5rem;
    border: 0;
    cursor: pointer;
}

.btn-2:hover {
    background-color: var(--gris);
}

/*------------------------------------------------Rectangulos/fotos----------------*/
.carga-gral {
    background-color: var(--morado);
    /*height: 50rem;*/
    display: flex;
}

.carga {
    /*display: flex;
    flex-wrap: nowrap;*/
    justify-content: space-evenly;
}

/*---------------------------------------------------------cajas-------------------*/
.cajas {
    background-color: var(--morado);
    padding-top: 10rem;
    display: flex;
    align-items: first baseline;
    justify-content: end;
}

.cajas .caja01 {
    height: 6rem;
    margin-right: 3rem;
}

.cajas .caja02 {
    height: 9rem;
    margin-right: 3rem;
}

.cajas .caja03 {
    height: 12rem;
    margin-right: 8rem;
}

/*--------------------------------------------------------Ubicacion----------------------*/
.location {
    background-image: url(../images/Ubicacion02.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: var(--verde);
    min-height: 50rem;
}

.location-content .saludoM {
    width: 18rem;
    position: absolute;
    top: 355rem;
    left: 3rem;
}

.location-content {
    color: var(--morado);
    font-size: 3rem;
    font-weight: 500;
}

.txt-3 {
    text-align: center;
    padding: 3rem 5rem 0 100rem;
}

.txt-4 {
    text-align: center;
    padding: 21rem 93rem 0 10rem;
}

/*-------------------footer---------------------*/
.footer {
    border-top: 0.2rem solid var(--blanco);
    padding: 1rem 0 0 0;
    text-align: center;
    background-color: var(--morado);
}

.footer-links {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    margin-right: 2rem;
}

.link-img {
    text-align: center;
}

.link-img img {
    width: 7rem;
    margin: 1rem;
}

.socials-2 img {
    width: 3rem;
    margin: 1rem;
}

.link h3 {
    font-size: 1.4rem;
    color: var(--blanco);
    margin-bottom: 1.2rem;
}

.link a {
    font-size: 1.4rem;
    display: block;
    color: var(--blanco);
    margin-bottom: 0.8rem;
}

.link a:hover {
    color: var(--verde);
    font-weight: normal;
}

.footer-copy {
    padding: 0.8rem 0;
    text-align: center;
}

.footer-copy p {
    color: var(--gris);
    font-size: 1.3rem;
    margin: 0;
}

/*------------------------------------------------ RESPONSIVE PARA TABLETS ------------*/

@media (max-width: 1200px) { /*tenia 991*/

    .header {
        min-height: 0vh;
    }

    .header-content {
        padding: 9rem 0 9rem 4rem;
    }

    .header-caja img {
        display: inline-flex;
        top: 11.6rem;
        left: -10rem;
    }

    .slogan img {
        margin-left: -3rem;
    }

    .about-content {
        max-height: 25rem;
        font-size: 3rem;
        font-weight: 450;
        text-align: justify;
        padding: 4rem 20rem 5rem 6rem;
        border-bottom: 1.5rem dashed var(--morado);
    
    }
    .about .logoG img {
        width: 15rem;
        position: absolute;
        right: 3rem;
        top: 125rem;
    }
    
    .tex01 img {
        height: 35rem;
        position: absolute;
        top: 128rem;
    }

    .services .txt-1 {
        font-size: 3.5rem;
        padding-top: 3rem;
    }
    
    .services .txt-2 {
        font-size: 5rem;
        padding-top: 8rem;
    }
    
    .services .saludo-verde img {
        width: 25rem;
        position: relative;
        padding: 4.2rem 0 0 0;
    }
/* Imagenes de personas cargando */
    .carga {
        display: flex; /*tenia grid*/
        gap: 1.2rem;
        grid-template-columns: 1fr 1fr;
        margin: 0 auto;
        max-width: 130.7rem;
        width: 90%;
    }

   .carga img {
        width: 25rem; /*tenia rem*/
   }

    .cajas {
        padding: 0;

    }
    
    .cajas .caja01 {
        height: 4rem;
        margin-right: 1rem;
    }
    
    .cajas .caja02 {
        height: 7rem;
        margin-right: 1rem;
    }
    
    .cajas .caja03 {
        height: 10rem;
        margin-right: 6rem;
    }

    .location-content .saludoM {
        width: 12rem;
        top: 290rem;
    }
        
    .txt-3 {
        padding: 3rem 5rem 0 19rem;
    }
    
   .txt-4 {
        text-align: center;
        padding: 38rem 0rem 0 0rem;
    }
    

}

/* ----------------------------------------------- RESPONSIVE PARA MÓVILES ---------------*/

@media (max-width: 768px) { /*tenia 601*/

    .header {
        max-height: 33rem;
        padding-top: 6rem;
    }

    .logo img {
        width: 6rem;
        margin-left: 1.5rem;
    }
    
    .header-textura img {
        height: 20rem;
        margin-left: 0rem;
    }
    
    .header-logo img {
        height: 8rem;
        margin-top: -1rem;
    }
    
    .header-caja img {
        width: 7rem;
        position: relative;
        top: 9.9rem;
        left: -7rem;
    }

    .contact {
        height: 6rem;
    }

    .slogan {

        background-size: cover;
        min-height: 10rem;
        display: flex;
        align-items: center;
    }

    .slogan img {
        width: 35rem;
        margin-left: -3rem;
    }

    .about-content {
        max-height: 23rem;
        font-size: 2rem;
        font-weight: 450;
        text-align: justify;
        padding: 4rem 15rem 5rem 4rem;
        border-bottom: 1.2rem dashed var(--morado);
    
    }
    .about .logoG img {
        width: 10rem;
        position: absolute;
        right: 2rem;
        top: 92rem;
    }
    
    .tex01 img {
        height: 35rem;
        position: absolute;
        top: 106rem;
    }

    .services .txt-1 {
        font-size: 3rem;
        padding-left: 3.5rem;
    }
    
    .services .txt-2 {
        font-size: 4rem;
        padding-left: 3.5rem;
        padding-top: 7rem;
    }
    
    .services .saludo-verde img {
        width: 20rem;
        top: 4rem;
        left: -4rem;
        padding-bottom: 6rem;

    }

    .services-content {
        display: grid; /*tenia grid*/
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        width: 90%;
    }
        
    .service1, .service2, .service3, .service4, .service5, .service6 {
        flex: none; 
        width: 100%;
        padding: 15px 5px;        /* Espaciado interno más compacto */
        font-size: 15px;          /* Reducimos un poco la letra para evitar textos amontonados */
        word-break: break-word;   /* Rompe palabras largas si es necesario */

    }

    .service2, .service5 {
        padding-top: 7rem;
    }

    .services-content img {
        width: 12rem;
    }

    .correo {
        padding: 3rem; 
    }

    .form-content {
        width: 100%;
        margin-top: -5rem;
        margin-bottom: -4rem;
    }

    form {
        flex-direction: column;
    }

    .campo {
        margin-bottom: 2rem;
        margin-right: 0rem;
    }
/* Se modific[o esta parte en rev 06 */

    .carga-gral {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
        width: 100%;
        max-width: 1200px;
    /*   margin: 0 auto;  */
        margin-left: auto;
        margin-right: auto;
        padding-left: 10%;
        padding-right: 15px;
        box-sizing: border-box; 
    }

    .carga img {
        width: 100%;
        height: auto;
    /*    aspect-ratio: 2/3;
        object-fit: contain; 
        background-color: var(--transparente); */
        display: block;
    }

    .cajas .caja01 {
        height: 4rem;
        margin-right: 1rem;
    }
    
    .cajas .caja02 {
        height: 6rem;
        margin-right: 1rem;
    }
    
    .cajas .caja03 {
        height: 8rem;
        margin-right: 2rem;
    }

    .location {
        max-height: 8rem;
    }
    
    .location-content .saludoM {
        width: 7rem;
        top: 260rem;
    }
        
    .txt-3 {
        padding: 2rem 1rem 1rem 1rem;
    }
    
    .txt-4 {
        padding: 30rem 1rem 1rem 1rem;
    }

    .footer {
        padding: 30px 30px 0 30px;
      }
    
      .footer-links {
        flex-direction: column;
        text-align: center;
      }
    
      .link-img {
        margin-bottom: 15px;
      }

      .link h3 {
        margin-top: 1.5rem;
      }

}

/*---------------------------------------------------- Estilo para modal-----------------*/

a.open{
	text-decoration: none;
}

section.modalDialog{
	background-color: rgba(0, 0, 0, 0.5);
	bottom: 0;
	top:0;
	left: 0;
	right: 0;
	position: fixed;
	display: none;
	z-index: 2;
}

section.modalDialog:target{
	display: flex; /*tenia block*/
    justify-content: center;
    align-items: center;
}

a.close{
	background-color: var(--blanco);
	border-radius: 5%;
	color: var(--blanco);
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 22%;
	position:  absolute;
	right: 1%;
	top:2%;
	text-align: center;
	text-decoration: none;
	width: 3%;
}

a.close{
	background-color: var(--morado);
    height: 2rem;
    width: 2rem;
    border-radius: 50%;
    align-content: center;
}

section.modal{
	background-color: var(--verde); /*Aquí podemos cambiar el color de fondo de los pop-up*/
	box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.5);
	border-radius: 1.3rem;
	color: var(--morado);
	margin: 4% auto;
	padding: 2%;
	position: relative;
	width: 70%;

	 max-height: 80vh; /*O lo que quieras o veas que se adpate mejor*/
  /*overflow: auto; u otra opción es que solo sea en la altura el scroll*/
  overflow-y: auto;
  overflow-x: none;
  
}

.diferencia {
	color: var(--morado);
	font-size: 2.5rem;
	margin-bottom: 2rem;
}

.diferente {
	color: var(--negro);
	font-size: 1.3rem;
    font-weight: 300;
    text-align: justify;
    
}

img.logo-mano {
    width: 3rem;
}

.logo-mano {
    display: block !important;    /* Por defecto las imágenes son 'inline', hay que cambiarlo a 'block' */
    margin-left: auto !important;
    margin-right: auto !important;
}

img.video {
    height: auto !important;
    max-height: 63vh !important;
    object-fit: contain !important;
    aspect-ratio: 9/16 !important;
    margin: 0 auto;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 6px;
}