@font-face {
  font-family: 'Exo';
  src: url('./fonts/Exo-VariableFont_wght.ttf') format('truetype-variations');
  font-display:swap;
  }
  @font-face {
    font-family: 'Fredoka';
    src: url('./fonts/static/Fredoka-Medium.ttf') format("truetype");
    font-display: swap;
}

  
@font-face {
    font-family: "FontAwesome Solid";
    src: url("./fonts/fa-solid-900.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "FontAwesome Brands";
    src: url("./fonts/fa-brands-400.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* Para los iconos que pertenecen a FontAwesome Solid */
.fa-solid {
    font-family: "FontAwesome Solid" !important;
	  font-style: normal !important; /* Evita la cursiva */
}

/* Para los iconos de FontAwesome Brands (como WhatsApp) */
.fa-brands {
   font-style: normal !important; /* Evita la cursiva */
}

/* Forzar el contenido del icono en caso de fallo */
.fa-whatsapp:before {
    content: "\f232"; /* Código de WhatsApp en FontAwesome */
    font-family: "FontAwesome Brands" !important;
}

.fa-phone:before {
    content: "\f095";
    font-family: "FontAwesome Solid" !important;
}
.fa-envelope:before {
    content: "\f0e0";
    font-family: "FontAwesome Solid" !important;
}



/* General Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Fredoka,Exo, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
}
img {loading:lazy}

/* Estilos generales del header */
header {
    background-color: #0cc0df;
    padding: 0.3rem 2rem;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

/* Contenedor principal */
.header-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap; /* Permite que el logo y menú cambien de posición en móviles */
	font-size:2rem;
	font-weight:700;
}

/* Estilos del logo */

.logo img {
    height: 120px;
}


/* Estilos de la navegación */
nav {width:400px;}
nav ul {
	
    list-style: none;
    display: flex;
    gap: 1rem;
    padding: 5px;
    margin: 0;
	background-color:#1078b8;
	border-radius:8px;
	border:3px solid white;
	margin-bottom:10px;
		justify-content: center;
	}

/* Estilos de los enlaces */
nav ul li {
    display: inline-block;



}

nav ul li a {
    text-decoration: none;
    color: white;
    font-size: 1.2rem;
    transition: color 0.3s;
	font-weight:500;
	font-family:Fredoka;
}

nav ul li a:hover {
    text-decoration:none;
	font-weight:700;
}


/* Section Styles */
section {
    width: 100%;
    padding: 3rem 1rem;
    text-align: center;
    color: #fff;
}

.content-fondo {background-color: rgb(255 255 255 / 0%);
    width: 100%;
    min-height: 280px;
padding: 5px;align-content:center}


#home {
    width: 100%;
    height: 80vh; /* Tomará toda la altura de la pantalla */
    background-image: url('fondo1.jpg'); /* Coloca la URL correcta de la imagen */
    background-size: cover; /* La imagen cubre toda la sección */
    background-position: center; /* La imagen se centra */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column; /* Cambiado a columna para apilar los elementos */
    text-align: center;
    color: #fff;
    padding: 0 1rem;
}

#home h1 {
	color:#282828;
        font-size: 2.2rem;
		margin:0.2rem;

	font-weight:800;
}

#home p {
    font-size: 1.5rem;
    
    color:#26c624;
	
    font-weight: 900; /* Evita margen extra por encima del párrafo */
	 
 
}

/* Estilos generales para la sección de servicios */
#servicios {
    background-color: #282828; /* Color de fondo */
    color: white;
    padding: 3rem 1rem;
    text-align: center;
}

/* Contenedor Flex para los 2 divs (INVERTIDO: ahora texto a la izquierda, imagen a la derecha) */
.servicios-container {
    display: flex;
    justify-content: space-around; /* Espacio entre los elementos */
    align-items: center; /* Alineación vertical al centro */
    gap: 2rem; /* Espacio entre la imagen y el contenido */
    flex-wrap: wrap; /* Permite que los elementos se ajusten en pantallas pequeñas */
    flex-direction: row-reverse; /* Cambia el orden: texto izquierda, imagen derecha */
}

/* Estilos para la imagen */
.servicio-imagen img {
    max-width: 95%; /* Hace que la imagen sea flexible según el contenedor */
    height: auto; /* Mantiene la relación de aspecto */
    border-radius: 8px; /* Bordes redondeados */
    margin: 10px;
}

/* Estilos para la descripción */
.servicio-descripcion {
    flex: 0.8; /* Hace que este div ocupe el resto del espacio disponible */
    text-align: left; /* Alineación del texto a la izquierda */
    font-size: 1.1rem; /* Tamaño de fuente */
}


.servicio-descripcion h2 {margin: 0; color:white;  
font-weight:900; }

/* Estilos adicionales para la lista de servicios */
.servicio-descripcion ul {
    list-style-type: none;
    padding-left: 0;
}

.servicio-descripcion li {
    margin: 2rem 0; /* Espaciado entre los servicios */
    line-height: 1.6; /* Mejorar la legibilidad */
}

/* Fondo y espaciado de #servicios2 */
#servicios2 {
    background-color: white; /* Un color de fondo más claro */
    padding: 4rem 0; /* Espaciado superior e inferior */
    color: #282828;
	display:inline;
}

/* Contenedor Flex para los 2 divs (INVERTIDO: ahora imagen a la dcha y texto izq) */
#servicios2 .servicios-container {
        display: flex;
    justify-content: space-around;
    align-items: flex-start;
    gap: 2.5rem;
    flex-wrap: wrap;
    flex-direction: row-reverse;
	
}

#servicios2 ul {
    margin: 0px 10px 0px 10px;
}

/* Estilos para el título de la sección */
#servicios2 h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 2rem;
	 -webkit-text-stroke: 1px white; /* Trazo blanco alrededor de las letras */
    text-stroke: 1px white; /* Para compatibilidad futura */
	font-weight:800;
}


#otro {
    width: 100%;    
	background-color: rgb(255 255 255 / 88%);
      display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Cambiado a columna para apilar los elementos */
    text-align: center;
    color: #fff;
    padding: 0 1rem;
}

#otro h3 {
        font-size: 2rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 5px rgb(254 254 254 / 96%);
    color: #282828;
}

#otro p {
    font-size: 1.5rem;
    text-shadow: 2px 2px 5px rgb(255 255 255 / 50%);
    margin-top: 0;
    color: #282828;
    font-weight: 600; /* Evita margen extra por encima del párrafo */
}




#contacto {
    background-color: #1078b8; /* Color de fondo de la sección contacto */
}



/* Estilos para los textos de la sección de servicios */
ul {
    list-style-type: none;
    margin-top: 1rem;
}

ul li {
    font-size: 1.2rem;
    margin: 0.5rem 0;
}

#oferta {width: 100%;
   color:#282828;
}

#oferta h3 {
    font-size: 1.7rem;
    margin-bottom: 1rem;
}
#oferta A {text-decoration:none}

/* Footer Styles */
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1rem;
    position: relative;
    bottom: 0;
    width: 100%;
}

/* Enlaces de contacto */
a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.descarga-container {
  text-align: center;
  color: white;
  background-color: #2e2e2e; /* gris oscuro */
  padding: 2rem 1rem;
  border-radius: 12px;
      max-width: 550px;
    margin: auto;
}

.boton-descarga {
  display: inline-block;
  background-color: #e6cb35; /* amarillo neutro */
  color: #2e2e2e; /* texto oscuro para contrastar */
  padding: 0.75rem 1.5rem;
  font-weight: bold;
  font-size: 1rem;
  border-radius: 999px; /* muy redondeado */
  text-decoration: none;
  margin-top: 1rem;
  transition: background-color 0.3s ease;
}

.boton-descarga:hover {
  background-color: #f0ef0f; /* un tono más claro al pasar el ratón */
}
.faq-container {
	
    max-width: 800px;
	    margin: auto;
    padding: 2rem;
    font-family: 'Fredoka', sans-serif;
}

.faq-item {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #23cfed;
    padding-bottom: 1rem;
}

.faq-question {
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    background-color:#dafaff;
    padding: 1rem;
    border-radius: 10px;
    transition: background-color 0.3s;
}

.faq-question:hover {
    background-color:#23cfed;
}

.faq-answer {
    display: none;
    padding: 1rem;
    background-color: #ffffff;
    color: #333;
    border-left: 4px solid #27cbe7;
    margin-top: 0.5rem;
    border-radius: 0 10px 10px 10px;
}

/* Responsividad para pantallas pequeñas */
@media (max-width: 1020px) {

	

    .header-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .logo {
        margin-bottom: 1rem; /* Espacio entre el logo y el menú */
		font-size:2rem;
		font-weight:700;
    }

    nav {
        
		max-width:300px;
        text-align: center;
    }

    nav ul {
        justify-content: center; /* Centrar los enlaces */
        flex-wrap: wrap;
	gap:0.2rem;
    }
	
	
#home h1 , #home h2, #otro h3  {font-size:1rem; margin:5px;margin-bottom:20px}

	#home p, #otro p { font-size:0.9rem}
	
    .servicios-container {
        flex-direction: column; /* En pantallas pequeñas, los elementos se apilan verticalmente */
        text-align: justify; 
    }

    .servicio-imagen {
        margin-bottom: 1.5rem; /* Espacio entre la imagen y el texto */
    }

    .servicio-descripcion { 
        text-align: left; 
    }
	    .servicio-descripcion h2 {margin: 0; color:white;  -
	font-weight:900; text-align:left;font-size:1.5rem}
	
	   .servicio-descripcion li { font-size:0.9rem}
	.faq-container { padding:5px}
		
	#oferta img {max-width:700px;max-height:350px}
	
}


@media (min-width: 700px) and (max-width: 1024px)  {
	#home h1 , #home h2, #otro h3  {font-size:1.5rem; margin:5px;margin-bottom:20px}
		#home p, #otro p { font-size:1.2rem}
		 nav {
        
		max-width:350px;
		 }
.servicio-descripcion li { font-size:1.1rem}

	}