:root{/*paletas de colores para aplicar variables*/
    --blanco: #ffffff;
    --oscuro: #212121;
    --verde: #00ff00;
    --primario: #ffc107; 
    --gris: #757575;
    --azul: #0000a7;
    --yellow:#d0f34f; 
    --fuente-principal: 3.8rem;
}

html{
    font-size: 62.5%;
    min-height: 100%;
    box-sizing: border-box;
       /*scroll-snap-type: y mandatory;*/
       scroll-snap-type: y proximity;
    }
    /*scroll snap para detener la pantalla en el momento que la subo o  la bajo aplicando mandatory*/
.servicios,
.navegacion-principal,
.formulario {
    scroll-snap-align: center;
    scroll-snap-stop: always;
}
*, *:before, *:after{
    box-sizing: inherit;
}

body{
    color: #2D2D2D; /* Gris oscuro para texto */
    font-family:'Nunito', sans-serif;
    font-size: 16px;/*Estas dos lineas de codigo facilitan la adaptación del tamaño con los rem y em*/
    background-image: linear-gradient(to top, #B0C4DE 0%, #FFFFFF 100%);
    /* background-image:linear-gradient(to top,#DFE9F3 0%, var(--blanco)100%);color degradado de la parte de abajo hscia arriba */
} /*1rem es igual a 10px se adaptan con dispositivos con densidad de pixeles muy alta*/

.sombra{
    color: #333333; /* Gris oscuro */
    box-shadow:0px 5px 15px 0px rgba(112,112,112,0.54);
    background-color: var(--blanco);
    padding:2rem;
    border-radius:1rem;
}
.contenido-hero {
    color: #2D2D2D; /* Texto oscuro */
    text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.7); /* Sombra para mejorar legibilidad */
}

h1{
font-size: 3.8rem;
}
h2{
font-size: 2.8rem;
}
h3{
 font-size: 1.8rem;   
}
h1,h2,h3{
    text-align: center;
}

.encabezado {
    text-align: center; /* centra el h1 dentro del header */
}

.encabezado .titulo {
    display: inline-flex;       /* hace que h1 use flex solo para su contenido */
    align-items: center;        /* centra verticalmente logo y texto */
    gap: 10px;                  /* espacio entre logo y texto */
    font-size: 2em;             /* ajusta tamaño del texto si quieres */
}

.encabezado .titulo .logo {
    height: 50px;               /* ajusta tamaño del logo */
}

.encabezado .titulo span {
    font-weight: normal;        /* estilo del span */
    font-size: 0.6em;           /* tamaño del span */
}


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

.volver-menu{
    text-decoration: none;
    color: var(--azul);
}
section .parrafo{
    background-color: #757575;
    padding: 25px;
    border-radius:20px;
    color:white;
    font-size: 20px;
}
.parrafo::first-letter {
    font-size: 1.5em; /* Tamaño más grande */
    font-weight: bold; /* Opcional: Negrita */
    color: white; /* Opcional: Color */
    margin-right: 0.1em; /* Espaciado hacia la derecha */
}
.boton{
    background-color: var(--azul);
    color:var(--blanco);
    padding: 1rem 3rem;
    margin-top: 1rem;
    font-size: 2rem;
    text-decoration: none;/*Quita la linea inferior del enlace*/
    text-transform: uppercase;/*coloca el texto en mayuscula*/
    font-weight: bold;/*coloca el texto en negrita*/
    border-radius:.5rem;
    /*width:75%;/*ancho del boton*/
    text-align: center;
    border:none;
}
#abrir-modal{
    cursor: pointer;
}
@media (min-width:768px){/*Codigo adaptable para diferentes pantallas, boton contactar*/
    .boton{
        width:auto;
    }
}
/*Boton enviar*/
.boton:hover{
    cursor:pointer;/*Este codigo se utiliza para que aparezca la manito como un link sobre el boton enviar*/
}
.w-sm-100{/*codigo para que elboton enviar ocupe el 100% de ancho en los dispositivos moviles*/
    width:100%;
}

@media (min-width:768px){/*codigo que coloca el boton al 100% del ancho con menos de 768px*/
    .w-sm-100{ 
    width:auto;
}
}
.flex{
    display:flex;
}
.alinear-derecha{/*codigo que coloca el boton a la derecha cuando la panpalla es mayor de 768px*/
    justify-content: flex-end;
    
}
.nav-bg{
    background-color: var(--azul);
}
.navegacion-principal{

display:flex;
flex-direction: column;

align-items: center;/*Centra los botones de navegacion en pantallas pequeñas*/
}
.navegacion-principal a {
    padding:1rem;
    color:var(--blanco);
    text-decoration: none;
    font-size: 2rem;
    font-weight: 700;

}

.navegacion-principal a:hover {/*Sombrea de amarillo los  enlaces y cambia el texto del enlace a color negro*/
background-color: var(--primario);
color: var(--negro);
}

@media(min-width:768px){/*Código adaptivi para tablets - 1140px para portatiles y pc de escritorios - 1400px para pantallas mas grandes*/
    .navegacion-principal{
       /* background-color:green;*/
       flex-direction: row;
       justify-content:space-between;
    }
}

.hero{
    background-image: url(../img/hero.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height:450px;
    padding:0px;
    position: relative;
    margin-bottom:2rem;
}
.contenido-hero{
    position: absolute;
    background-color: rgba(0,0,0,.7);/*Para definir transparencia en el color negro*/
    background-color: rgb(0 0 0 / 50%);
    width:100%;
    height:100%;
   display: flex;/*Centra texto e iconos*/
   flex-direction:column;/*Centra texto e iconos*/
   align-items: center;/*Centra texto e iconos*/
   justify-content: center;/*para alinear tanto horizontal como vertical todo el código display flex*/
}
.contenido-hero h2,
.contenido-hero p {
 color:var(--blanco);
}
img{
    margin-bottom: 1rem;
    /* border-radius: 50%; */
}


/*Servicios   Se definen columnas*/
@media (min-width:768px){

.servicios{
    display:grid;
    grid-template-columns: 33.3% 33.3% 33.3%;/*lo puedo definir como 1fr = 33.3%*/
    /* grid-template-rows:; */
    column-gap: 1rem;/*HACE SEPARACIÓN EN LOS BORDES*/
    /*grid: 200px 800px / 300px 300px;/*Es el mismo código simplificado*/
    /*grid-template-columns:repeat(3,1fr); Me dice q repita 3 veces para crear 3 columnas*/
}
}
/*Servicio del section*/
.sobremi{
    line-height: 2;/*Este codigo separa el interlineado del parrafo*/
}
.servicio{
    display:flex;
    flex-direction: column;
    align-items: center;
}
.servicio p{
    line-height: 2;/*Este codigo separa el interlineado del parrafo*/
    /* text-align: center; */
}
.servicio h3{
color:var(--azul);
font-weight: normal;
}
.servicio .iconos{
    height:15rem;
    width:15rem;
    background-color: var(--primario);
    border-radius:50%;
    display:flex;
    justify-content: space-evenly;/*Este còdigo separa un poquito los iconos de la manzana*/
    align-items: center;/*Este còdigo coloca los iconos centrados dentro del circulo*/
}

/*Contacto*/

@media (min-width:280px){/*Codigo Adaptable para pantallas de 280px*/
.formulario {
    background-color: var(--gris);
    max-width: 800px;
    /*width:min(70rem, 60%);/*Utiliza el valor mas pequeño del ancho del background*/
    margin:0 auto;/*Centra horizontalmente el background del formulario donde el padre no tiene un display flex*/
    padding:1rem;/*Este codigo separa los bordes de los campos del background gris*/
    border-radius:2rem;
}
 }

.campo:nth-child(3),
.campo:nth-child(4){
    grid-column: 1 / 3;/*para posicionar elementos, coloca el campo ocupando el ancho de las tres columnas*/
    /*grid-row: 3 / 4;/*coloca el campo correo despues demensaje*/
}

/*Se aplica combinador Selecciona la img que es hijo directo de footer */
footer > img {
    height: 50px;         /* tamaño del logo */
    margin-bottom: 10px;  /* espacio debajo */
    display: block;       /* para centrar con margin auto */
    margin-left: auto;
    margin-right: auto;
}

/* Opcional: cambia color del texto dentro de footer */
footer p {
    color: #fff;
}

/* Opcional: fondo del footer */
footer {
    background-color: #111;
    padding: 20px;
    text-align: center; /* centra también el texto */
}


/* Estilos generales del formulario */
/* Estilos generales del formulario */
.contact-form {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    font-family: Arial, sans-serif;
}

/* Estilos para los párrafos */
.contact-form p {
    margin-bottom: 15px;
}

/* Estilos para las etiquetas */
.contact-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}

/* Estilos para los campos de entrada */
.contact-form input[type="text"],
.contact-form textarea,
.contact-form input[type="email"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
}

/* Estilos para el botón de envío */
.contact-form button {
    width: 100%;
    padding: 10px;
    background-color: #07407d;
    border: none;
    border-radius: 4px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Efecto hover para el botón de envío */
.contact-form button:hover {
    background-color: #66a6eb;
}
.msg-confirmacion{
    text-align: center;
}
@media (min-width: 1024px) {
    .custom-swal-popup{
        font-size: 15px;
    }
}
/* Estilo para dispositivos menores de 768px */
@media (max-width: 768px) {
    .custom-swal-popup {
        font-size: 0.8em;    /* Reduce el tamaño de fuente */
        width: 95%;        /* Ocupa el 95% del ancho */
        margin: 0 auto;    /* Centra la ventana */
    }

    .swal2-title {
        font-size: 1.2em; /* Ajusta el tamaño del título */
    }

    .swal2-html-container {
        font-size: 1em;    /* Ajusta el tamaño del contenido */
    }
}
/*Estilos de la sección proyectos*/
.cont-json {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    /* grid-template-columns:repeat(3,1fr); */
    gap: 5px;
    margin: 20px 0;
}
.proyecto {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    text-align: left;
    line-height: 23px;/*Espacio entre lineas*/
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.proyecto img {
    max-width: 100%;
    border-radius: 5px;
}
.proyecto h3 {
    margin: 10px 0;
}
.proyecto a {
    text-decoration: none;
    color: #064385;
    font-weight: bold;
    font-size: 14px;
}
.proyecto a:hover {
    text-decoration: underline;
}

/* Estilos del botón "Leer Más" */
.hidden {
    display: none;
  }

.btn {
    background-color: #04366b; /* Color principal (azul) */
    color: #fff; /* Texto en blanco */
    border: none; /* Sin bordes */
    padding: 5px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer; /* Cambiar cursor al pasar por encima */
    font-size: 1rem; /* Tamaño del texto */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transiciones suaves */
  }
  
  /* Efecto al pasar el mouse */
  .btn:hover {
    background-color: #0056b3; /* Azul más oscuro */
    transform: scale(1.05); /* Efecto de agrandamiento */
  }
  
  /* Botón activo (al hacer clic) */
  .btn:active {
    background-color: #004080; /* Azul aún más oscuro */
    transform: scale(0.95); /* Leve reducción */
  }
  
  /* Adaptabilidad para dispositivos pequeños */
  .btn {
    width: auto; /* Tamaño adaptable */
    text-align: center; /* Centrar el texto */
    margin: 10px 0; /* Separación */
  }