/* ========= Variables CSS (Opcional pero recomendado) ========= */
:root {
  --primary-color: #061424; /* Azul oscuro principal */
  --secondary-color: #1a2b40; /* Azul un poco más claro */
  --accent-color: #64a2d8; /* Azul claro para acentos/enlaces */
  --text-color: #f0f0f0; /* Gris claro / blanco */
  --text-muted: #aaa; /* Gris más oscuro para texto secundario */
  --hero-cta-bg: #007bff; /* Color CTA Hero (del usuario) */
  --hero-cta-hover-bg: #0056b3; /* Color Hover CTA Hero (del usuario) */
  --whatsapp-bg: #25D366;
  --whatsapp-hover-bg: #128C7E;
  --font-family: 'Arial', sans-serif; /* Fuente base (del usuario) */
}

/* ========= Estilos Globales y Reseteo Básico (del usuario) ========= */

/* Mejor manejo del modelo de caja */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth; /* Desplazamiento suave para enlaces internos (#) */
}

body {
  font-family: var(--font-family);
  line-height: 1.6;
  background-color: var(--primary-color); /* Fondo principal oscuro (confirmado) */
  color: var(--text-color); /* Texto principal claro (confirmado) */
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0.8em; /* Espacio debajo de los títulos */
   /* Asegurar buen contraste para títulos generales */
   /* Ajustes específicos por sección pueden sobrescribir esto */
  color: #ffffff;
}

p {
  margin-bottom: 1em; /* Espacio debajo de los párrafos */
}

a {
  color: var(--accent-color); /* Color de enlace para tema oscuro (confirmado) */
  text-decoration: none; /* Quitar subrayado por defecto */
}

a:hover {
  /* text-decoration: underline; */ /* Subrayado opcional, quitado para consistencia */
   filter: brightness(1.2); /* Aclarar un poco al pasar el ratón */
}

/* Estilo específico para enlaces visitados en tema oscuro */
a:visited {
  color: #90bde0; /* Tono ligeramente diferente (confirmado) */
}


img {
  max-width: 100%; /* Hacer imágenes responsivas por defecto */
  height: auto;
  display: block; /* Previene espacio extra debajo */
}

/* ========= Clases de utilidad ========= */
.container {
  max-width: 1100px; /* Ancho máximo para el contenido */
  margin: 0 auto; /* Centrar el contenedor */
  padding: 0 1.5rem; /* Espaciado lateral (usando rem) */
}

/* ========= Header ========= */
.site-header {
    background-color: var(--secondary-color);
    padding: 1rem 0;
    position: sticky; /* Menú fijo */
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    height: 50px; /* Ajustar tamaño */
}
.main-nav ul {
    list-style: none;
    display: flex;
}
.main-nav ul li {
    margin-left: 1.5rem;
}
.main-nav ul li a {
    color: var(--text-color);
    font-weight: bold;
    padding: 0.5rem;
    transition: color 0.3s ease;
}
.main-nav ul li a:hover {
    color: var(--accent-color);
    text-decoration: none;
}
.menu-toggle { /* Oculto en escritorio, visible en móvil */
    display: none;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 2rem;
    cursor: pointer;
}

/* ========= Estilos de la Sección Hero (Integrando estilos del usuario) ========= */
#hero {
  /* Aplicar la imagen de fondo */
  background-image: url('../images/hero-background.jpg'); /* Ruta relativa desde css/ a images/ */
  background-size: cover; /* Cubrir todo el área de la sección */
  background-position: center center; /* Centrar la imagen */
  background-repeat: no-repeat;

  /* Dimensiones y Alineación del Contenido */
  min-height: 90vh; /* Altura mínima (del usuario) */
  display: flex; /* Usar Flexbox para centrar el contenido */
  align-items: center; /* Centrar verticalmente */
  justify-content: center; /* Centrar horizontalmente */
  text-align: center; /* Centrar texto dentro del contenedor de contenido */

  /* Asegurar que el texto sea legible sobre el fondo oscuro */
  color: #ffffff; /* Color de texto blanco (confirmado) */
  padding: 2rem 0; /* Añadir padding vertical por si el contenido es alto */
}

.hero-content {
  max-width: 800px; /* Ancho máximo para el texto (del usuario) */
  padding: 20px; /* Espacio interno (del usuario) */
  /* Fondo semi-transparente (opcional, descomentar si es necesario) */
  /* background-color: rgba(0, 0, 0, 0.5); */
  /* border-radius: 8px; */
}

#hero h1 {
  font-size: 2.8rem; /* Tamaño grande (del usuario) */
  margin-bottom: 0.5em;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Sombra (del usuario) */
}

#hero p {
  font-size: 1.2rem; /* Tamaño subtítulo (del usuario) */
  margin-bottom: 1.5em;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); /* Sombra (del usuario) */
}

/* Estilos del Botón de Llamada a la Acción (CTA) en Hero (del usuario) */
#hero .cta-button {
  display: inline-block;
  background-color: var(--hero-cta-bg); /* Color de fondo (del usuario) */
  color: #ffffff; /* Color del texto (del usuario) */
  padding: 12px 25px; /* Relleno interno (del usuario) */
  font-size: 1.1rem;
  font-weight: bold;
  border: none;
  border-radius: 5px; /* Bordes redondeados */
  cursor: pointer;
  text-decoration: none; /* Asegurar sin subrayado */
  transition: background-color 0.3s ease, transform 0.2s ease; /* Transición suave */
}

#hero .cta-button:hover {
  background-color: var(--hero-cta-hover-bg); /* Color hover (del usuario) */
  text-decoration: none;
  transform: translateY(-2px); /* Efecto elevación (del usuario) */
}


/* ========= Services Section ========= */
#servicios { /* Usar ID en lugar de clase para la sección */
    padding: 4rem 0;
}
#servicios h2 { /* Estilo específico para el título de esta sección */
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2.2rem;
}
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Diseño responsivo */
    gap: 2rem; /* Espacio entre tarjetas */
    margin-bottom: 3rem;
}
.service-card {
    background-color: var(--secondary-color);
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(100, 162, 216, 0.1); /* Borde sutil */
}
.service-card:hover {
    transform: translateY(-5px);
     box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}
.service-icon {
    height: 50px; /* Tamaño del icono */
    margin: 0 auto 1.5rem auto;
    filter: brightness(1.5); /* Hacer iconos SVG un poco más brillantes */
}
.service-card h3 {
    font-size: 1.3rem; /* Tamaño título servicio */
    color: #fff; /* Blanco para títulos de tarjeta */
    margin-bottom: 0.7rem;
}
.service-card p {
    font-size: 0.95rem; /* Tamaño descripción servicio */
    color: var(--text-color); /* Usar color de texto principal claro */
}

/* Estilos Servicios Adicionales */
.additional-services {
    margin-top: 4rem;
    text-align: center;
    /* background-color: rgba(26, 43, 64, 0.5); Fondo semi-transparente */
    padding: 2rem;
    border-radius: 8px;
    border: 1px dashed var(--secondary-color); /* Borde punteado */
}
.additional-services h3 {
     color: var(--accent-color); /* Usar color de acento */
     font-size: 1.6rem;
     margin-bottom: 1.5rem;
}
.additional-services ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}
.additional-services ul li {
    /* background-color: var(--secondary-color); */
    border: 1px solid var(--secondary-color);
    color: var(--text-muted);
    padding: 0.6rem 1.2rem;
    border-radius: 20px; /* Píldoras */
    font-size: 0.9rem;
    transition: background-color 0.3s, color 0.3s;
}
.additional-services ul li:hover {
    background-color: var(--secondary-color);
    color: var(--text-color);
}

/* ========= Contact Section ========= */
#contacto { /* Usar ID */
    background-color: var(--secondary-color);
    padding: 4rem 0;
    text-align: center;
    margin-top: 3rem;
}
#contacto h2 {
    margin-bottom: 1rem;
}

#contacto p {
    max-width: 600px;
    margin: 0 auto 2rem auto;
    color: var(--text-muted);
}
#contacto p:last-of-type { /* Para el 'Te responderemos...' */
     margin-top: 1.5rem;
     font-size: 0.9rem;
}

.whatsapp-button {
    background-color: var(--whatsapp-bg); /* Color de WhatsApp */
    color: #fff;
    padding: 0.9rem 2rem; /* Botón más prominente */
    border-radius: 5px;
    font-weight: bold;
    text-transform: uppercase;
    display: inline-flex; /* Para alinear icono y texto */
    align-items: center;
    gap: 0.8rem; /* Espacio entre icono y texto */
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-size: 1.1rem;
}
.whatsapp-button:hover {
    background-color: var(--whatsapp-hover-bg); /* Color más oscuro de WhatsApp */
    transform: translateY(-2px);
     text-decoration: none; /* Evitar subrayado en hover */
     color: #fff; /* Asegurar blanco en hover */
}
.button-icon {
    height: 24px; /* Tamaño del icono del botón */
    width: 24px;
    display: inline-block; /* Asegurar que esté en línea */
}

/* ========= Footer ========= */
.site-footer {
    background-color: #111; /* Más oscuro */
    color: var(--text-muted);
    text-align: center;
    padding: 2rem 0; /* Más padding */
    margin-top: 4rem; /* Separación */
    font-size: 0.9rem;
}

/* ========= Estilos para Menú Móvil (Responsive) ========= */
@media (max-width: 768px) {
    #hero h1 { font-size: 2.2rem; } /* Ajustar tamaño en móvil */
    #hero p { font-size: 1rem; }

    .main-nav {
        display: none;
        position: absolute;
        top: 70px; /* Ajustar si la altura del header cambia */
        left: 0;
        width: 100%;
        background-color: var(--secondary-color);
        flex-direction: column;
        box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* Sombra más pronunciada */
        padding-bottom: 1rem; /* Espacio inferior */
    }
    .main-nav.active {
        display: flex;
    }

    .main-nav ul {
        flex-direction: column;
        width: 100%;
    }
    .main-nav ul li {
        margin: 0;
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }
     .main-nav ul li a {
        display: block;
        padding: 1.2rem 1rem; /* Más padding vertical */
        font-size: 1.1rem;
     }
      .main-nav ul li a:hover {
        background-color: rgba(100, 162, 216, 0.1); /* Fondo sutil al pasar el ratón */
      }

    .menu-toggle {
        display: block; /* Mostrar el botón hamburguesa */
    }
}
/* ========= Estilos para Animación Fade-In ========= */

/* Estado inicial de los elementos a animar */
.fade-in-element {
  opacity: 0; /* Empieza totalmente transparente */
  transform: translateY(20px); /* Empieza ligeramente desplazado hacia abajo */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Define la animación */
  /* Ajusta la duración (0.6s) y el timing (ease-out) si lo deseas */
}

/* Estado final (visible) cuando se añade la clase .is-visible con JS */
.fade-in-element.is-visible {
  opacity: 1; /* Totalmente visible */
  transform: translateY(0); /* Vuelve a su posición original */
}

/* Opcional: Puedes crear variaciones con diferentes delays */
/* .fade-in-delay-1 { transition-delay: 0.1s; } */
/* .fade-in-delay-2 { transition-delay: 0.2s; } */
/* etc. */