/* Estilos generales para resetear márgenes y padding */
body {
  margin: 0;
  font-family: 'Sarabun', sans-serif; /* Fuente principal para todo el cuerpo */
  /* Añadimos padding-top para compensar la altura de la barra de navegación fija */
  padding-top: 80px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  box-sizing: border-box;
}

/* Aseguramos que los encabezados y párrafos usen la fuente principal */
h1, h2, h3, p {
  font-family: 'Michroma', sans-serif;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); /* Sombra sutil general */
}




/* --- Barra de Navegación --- */
.main-header {
  position: fixed; /* Fija la barra en la parte superior */
  top: 0;
  left: 0;
  width: 100%; /* Ocupa todo el ancho */
  z-index: 1000; /* Se asegura que esté por encima de otros elementos */
  background-color: #252455;
  padding: 10px 40px; /* Espaciado interior para que no esté pegado a los bordes */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Sombra sutil opcional */
  box-sizing: border-box; /* Para que el padding no afecte el ancho total */
}

.navbar {
  display: flex;
  justify-content: space-between; /* Logo a la izquierda, menú a la derecha */
  align-items: center; /* Centra verticalmente los elementos */
}

/* --- Logo --- */
.navbar-logo img {
  height: 90px; /* Altura ajustable para el logo */
  width: auto; /* El ancho se ajusta automáticamente */
}

/* --- Menú de Navegación --- */
.nav-menu {
  list-style: none; /* Quita los puntos de la lista */
  display: flex; /* Pone los elementos en línea */
  margin: 0;
  padding: 0;
  gap: 30px; /* Espacio entre los elementos del menú */
}

.nav-item-dropdown {
  position: relative; /* Contenedor para el menú desplegable */
}


.nav-link {
  /* Estilos del texto del menú */
  font-family: 'Michroma', sans-serif;
  color: #C7C7C9;
  font-size: 18px;/*tamaño del menu*/
  font-weight: bolder;
  text-decoration: none; /* Quita el subrayado de los enlaces */
  padding: 10px 0; /* Espaciado para el efecto hover */
  position: relative; /* Necesario para el pseudo-elemento ::after */
}

.nav-arrow-down {
  font-size: 0.8em;
  margin-left: 5px;
  transition: transform 0.3s ease;
}

/* --- Efectos Hover --- */

/* 1. Efecto de línea inferior al pasar el cursor */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0; /* Inicia sin ancho */
  height: 3px; /* Grosor de la línea */
  background-color: #C7C7C9; /* Mismo color que el texto */
  transition: width 0.3s ease-out; /* Animación suave */
}

.nav-link:hover::after {
  width: 100%; /* La línea crece al 100% del ancho en hover */
}

/* --- Menú Desplegable (Dropdown) --- */
.dropdown-menu {
  position: absolute;
  top: 100%; /* Se posiciona justo debajo del enlace padre */
  left: 0;
  background-color: #252455;
  list-style: none;
  padding: 10px 0;
  margin-top: 10px; /* Pequeño espacio entre el menú y el desplegable */
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  width: 280px; /* Ancho del desplegable */
  opacity: 0; /* Oculto por defecto */
  visibility: hidden; /* Oculto y no interactuable */
  transform: translateY(10px); /* Efecto de aparición desde abajo */
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.dropdown-menu li {
  width: 100%;
}

.dropdown-menu a {
  font-family: 'Michroma', sans-serif;
  color: #C7C7C9;
  text-decoration: none;
  font-size: 15px;/*tamaño letra desplegada*/
  font-weight: normal;
  padding: 12px 20px;
  display: block; /* Ocupa todo el ancho del li */
  transition: background-color 0.2s ease;
}

.dropdown-menu a:hover {
  background-color: #3a387a; /* Color de fondo al pasar el cursor */
}

/* Mostrar el menú desplegable al hacer hover en el item padre */
.nav-item-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}




/* --- Hero Section --- */
.hero-section {
  position: relative; /* Contenedor para elementos posicionados absolutamente */
  height: calc(100vh - 80px); /* Altura total de la pantalla menos la barra de navegación */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Evita que el video se desborde */
  color: #FEFEFE; /* Color de texto por defecto para la sección */
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Escala y centra el video para cubrir el área */
  z-index: -2; /* Detrás del contenido y del overlay */
}

/* Opcional: Overlay oscuro para mejorar la legibilidad del texto */
.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /*background-color: rgba(0, 0, 0, 0.2); Color negro con 50% de opacidad */
  z-index: -1; /* Entre el video y el contenido */
}

.hero-content {
  text-align: center;
  padding: 20px;
  z-index: 1; /* Asegura que el contenido esté por encima del video y el overlay */
}

.hero-content h1{
  font-size: 3em; /* Tamaño grande para el título principal */
  margin-bottom: 0.5em;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); /* Sombra para legibilidad */
}

.hero-content p {
  font-size: 23px;
  font-weight: bold;
  max-width: 800px; /* Limita el ancho del párrafo para mejor lectura */
  margin: 0 auto 1.5em auto;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); /* Sombra para legibilidad */
}

.cta-button {
  background-color: #DE3431;
  color: #FFFFFF;
  font-family: 'Michroma', sans-serif;
  padding: 15px 30px;
  text-decoration: none;
  font-size: 1.1em;
  font-weight: bold;
  border-radius: 5px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.3s ease;
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
  background-color: #b92b28; /* Un tono de rojo más oscuro */
  color: #FEFEFE;
}





/* --- Sección Sobre Nosotros --- */
.about-us-section {
  position: relative;
  margin-bottom: -80px;
  padding: 80px 20px; /* Espaciado interno */
  height: auto;
  text-align: center;
  background-image: url('../img/arbolBcoDegradadojpeg.jpg'); /* Asumiendo la ruta de la imagen */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #FEFEFE; /* Color de texto por defecto para asegurar contraste */
}

/* Overlay para la sección Sobre Nosotros */
.about-us-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /*background-color: rgba(0, 0, 0, 2); Overlay oscuro */
  z-index: 0; /* Detrás del contenido */
}

.about-us-content {
  position: relative; /* Para que el contenido esté por encima del overlay */
  z-index: 1;
  max-width: 900px; /* Limitar ancho para mejor lectura */
  margin: 0 auto;
}

.about-us-section h1 {
  font-size: 2.5em;
  color: #252455; /* Color específico para el H1 */
  margin-bottom: 0.8em;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2); /* Sombra para legibilidad sobre fondo */
}

.about-us-text-main {
  font-size: 23px;
  font-weight: bold;
  color: #252455; /* Color específico para el primer párrafo */
  line-height: 1.6;
  margin-bottom: 1.5em;
}

.about-us-text-priority {
  font-size: 23px;
  font-weight: bold;
  color: #DE3431; /* Color específico para el segundo párrafo */
  margin-bottom: 2em;
}

.about-us-cta {
  background-color: #DE3431;
  color: #FEFEFE;
  font-family: 'Michroma', sans-serif;
  padding: 15px 30px;
  text-decoration: none;
  font-size: 1.1em;
  font-weight: bold;
  border-radius: 4px; /* Borde redondeado */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.3s ease;
  display: inline-block; /* Para que margin auto funcione y se pueda aplicar transform */
}

.about-us-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
  background-color: #b92b28; /* Un tono de rojo más oscuro */
}





/* --- Footer --- */
.main-footer {
  color: #C7C7C9; /*Copyright*/
  font-size: 18px;
  font-weight: bolder;
}

/* --- Parte Superior del Footer --- */
.footer-top {
  background-color: #252455ce;
  padding: 40px 20px;
  text-align: center;
}

.footer-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap; /* Para que se adapte en pantallas pequeñas */
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto; /* Centra el contenedor */
}

.footer-column {
  flex: 1;
  min-width: 280px; /* Ancho mínimo para cada columna */
  padding: 20px; /* Espaciado interno */
  color: #C7C7C9; /* Color de texto blanco para h2 y p */
  /* Se eliminan background-color y border-radius para que el texto blanco sea visible */
  /* background-color: #FFFFFF; */
  /* border-radius: 8px; */
  text-align: left; /* Alineación del texto dentro de las columnas */
}
.footer-column:not(:last-child) {
  border-right: 1px solid #C7C7C9; /* Línea divisoria blanca */
}

.footer-top .footer-column h2 {
  font-size: 1.2em; /* Tamaño relativo al font-size del footer */
  margin-top: 0;
}

.footer-column p {
  font-size: 18px; /* Tamaño de párrafo más pequeño */
  font-weight: normal; /* Peso de fuente normal para el párrafo */
  line-height: 1.6;
}

.footer-top .footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.8em;
  font-weight: normal;
}
.footer-top .footer-column p {
  font-size: 18px;
}
.footer-column li {
  font-family: 'Michroma', sans-serif;
  margin-bottom: 10px;
}

.footer-icon {
  font-size: 1.2em; /* Tamaño ajustable para los iconos de contacto */
  margin-right: 10px;
  background-color: #C7C7C9; /* Fondo blanco para el icono */
  color: #53518f; /* Color del icono para que sea visible */
  padding: 5px;
  border-radius: 50%;
}

.social-icons {
  margin-top: 20px;
}

.social-icon {
  font-size: 2em; /* Tamaño ajustable para iconos de redes */
  margin: 0 10px;
  text-decoration: none;
}
.social-icon.instagram i { color: #C7C7C9; } /* Color oficial de Instagram */
.social-icon.youtube i { color: #C7C7C9; } /* Color oficial de YouTube */

/* --- Parte Inferior del Footer --- */
.footer-bottom {
  background-color: #252455;
  text-align: center;
  padding: 20px 0; /* Espaciado vertical, altura ajustable */
  font-size: 14px;
  font-weight: normal;
}

.footer-bottom p {
  font-size: 18px;
}





/* --- Sección Características Principales --- */
.features-section {
  padding: 60px 20px;
  background-color: #FEFEFE;
  text-align: center;
}

.features-top h1 {
  width: 100%; /* Ocupa todo el ancho */
  display: inline-block;
  padding: 15px 30px;
  background-color: #c7c7c93d;
  color: #252455;
  font-size: 2.2em;
  border-radius: 8px;
  margin-bottom: 60px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Layout responsive */
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.feature-card {
  background-color: #c7c7c93d;
  padding: 30px;
  border-radius: 4px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  text-align: left;
  color: #252455;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.feature-icon {
  font-size: 3em;
  margin-bottom: 20px;
  display: block;
  text-align: center;
  color: #DE3431; /* Color de acento */
}

.feature-card h2 {
  font-size: 1.4em;
  margin-top: 0;
  margin-bottom: 15px;
  text-align: center;
}

.feature-card p {
  font-size: 23px;
  line-height: 1.6;
  margin: 0;
}





/* --- Sección Clientes --- */
.clients-section {
  padding: 100px 20px;
  background-color: #f4f4f4;
  text-align: center;
  overflow: hidden; /* Evita el desbordamiento horizontal del carrusel */
}

.clients-title {
  color: #252455;
  font-size: 2.2em;
  margin-bottom: 60px;
}

.carousel-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
}

.carousel-viewport {
  width: 100%;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  /* Ancho de slide (180px) + margenes (20px*2) = 220px. 17 logos * 2 (duplicados) = 34. 220 * 34 */
  width: calc(220px * 34);
}

.carousel-slide {
  flex: 0 0 180px; /* Ancho fijo para cada logo */
  margin: 0 20px; /* Espacio entre logos */
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-slide img {
  max-width: 150px;
  height: auto;  
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.carousel-arrow {
  background-color: #252455;
  color: #FFFFFF;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 1.5em;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-arrow:hover {
  background-color: #252455ce;
  transform: scale(1.1);
}

.prev-arrow { margin-right: 15px; }
.next-arrow { margin-left: 15px; }





/* --- Estilos para Páginas de Servicios Individuales --- */
.service-page-content {
  padding: 40px;
  background-color: #f4f4f4;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.service-container {
  width: 100%;
}

.service-container h1 {
  color: #252455;
  margin-bottom: 0.5em;
  text-align: center;
}

.service-container .service-description {
  font-size: 20px;
  line-height: 1.7;
  color: #a3a3a5;
  text-align: center;
  margin-bottom: 2em;
}

.service-features {
  list-style: none;
  padding-left: 0;
  margin-bottom: 2.5em;
}

.service-features li {
  font-family: 'Michroma', sans-serif;
  font-size: 28px;
  padding: 10px 0 10px 35px;
  position: relative;
  color: #252455;
  border-bottom: 1px solid #e9e9e9;
}

.service-features li::before {
  content: '\f058'; /* Icono de check de Font Awesome */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: #DE3431;
  position: absolute;
  left: 0;
  top: 12px;
}

.service-cta-container {
  text-align: center;
}

/* --- Estilos para columnas en páginas de servicio --- */
.service-columns {
  display: flex;
  flex-wrap: wrap; /* Para que se apilen en pantallas pequeñas */
  gap: 40px;
  margin-top: 40px;
}

.service-column-left {
  flex: 2; /* Ocupa 2/3 del espacio */
  min-width: 300px; /* Ancho mínimo antes de apilarse */
}

.service-column-right {
  flex: 1; /* Ocupa 1/3 del espacio */
  min-width: 300px;
  text-align: center;
}

.service-column-left ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-column-left li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  font-size: 20px;/*tamaño letra li*/
  line-height: 1.6;
  font-family: 'Michroma', sans-serif;
  color: #252455;
}

.service-column-left li i {
  font-size: 24px;
  color: #DE3431; /* Color de acento */
  margin-right: 15px;
  width: 30px; /* Ancho fijo para alinear iconos */
  text-align: center;
  margin-top: 4px;
}

.service-column-right img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.service-column-right p {
  font-size: 18px;
  font-weight: bold;
  color: #a3a3a5;
  margin-bottom: 30px;
}




/* --- Sección Prueba Gratuita --- */
.trial-section {
  /* Contenedor principal de la sección */
}

.trial-top-marquee {
  background-color: #252455ce;
  height: 90px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 50px;
}

.marquee-content {
  display: flex;
  animation: scroll-horizontal 25s linear infinite;
  width: 200%; /* El doble para que el bucle sea suave */
}

.marquee-text {
  font-family: 'Michroma', sans-serif;
  font-size: 1.8em;
  font-weight: bold;
  color: #FFFFFF;
  white-space: nowrap;
  padding: 0 40px;
}

@keyframes scroll-horizontal {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.trial-bottom-content {
  background-color: #FFFFFF;
  padding: 20px 20px;
  text-align: center;
}

.trial-bottom-content h2 {
  color: #252455;
  font-size: 2.2em;
  margin-bottom: 1em;
}

.trial-bottom-content p,
.trial-bottom-content li {
  display: flex;
  align-items: flex-start;
  font-size: 23px;
  color: #a3a3a5;
  line-height: 1.7;
  font-family: 'Sarabun', sans-serif; /* Aseguramos la fuente correcta */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); /* Aplicamos la sombra */
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5em;
}

.trial-bottom-content li i {
  font-size: 24px;
  color: #a3a3a5;
  margin-right: 15px;
  width: 30px;
  text-align: center;
  margin-top: 8px; /* Ajuste vertical para alinear con el texto */
}
.trial-bottom-content ul {
  list-style-type: none;
  padding: 0;
  margin-bottom: 1.5em;
  display: inline-block;
  text-align: left;
}


.trial-cta-prompt {
  color: #DE3431;
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 1em;
}

.trial-bottom-content .cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}




/* --- Sección Blog --- */
.blog-page-content {
  background-image: url('../img/arbolBcoDegradadojpeg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 60px 20px;
  flex-grow: 1;
}

.blog-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.blog-container h1 {
  color: #252455;
  font-size: 2.5em;
  margin-bottom: 60px;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px;
}

.blog-card {
  background-color: #FEFEFE;
  border: 4px solid #252455;
  border-radius: 8px;
  text-align: center;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 25px rgba(37, 36, 85, 0.2);
}

.blog-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 20px;
}

.blog-card h3 {
  color: #252455;
  font-size: 1.2em;
  line-height: 1.4;
  margin-bottom: 20px;
  flex-grow: 1; /* Asegura que el título empuje el botón hacia abajo */
}



/* --- Página de Contacto --- */
.contact-page-content {
  padding: 60px 20px;
  background-color: #f4f4f4;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  background-color: #FEFEFE;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.contact-container h1 {
  text-align: center;
  color: #252455;
  margin-bottom: 40px;
}

.contact-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.contact-column-left,
.contact-column-right {
  flex: 1;
  min-width: 320px;
}

.contact-column-left h2 {
  color: #252455;
  font-size: 1.5em;
  margin-bottom: 20px;
  border-bottom: 2px solid #DE3431;
  padding-bottom: 10px;
}

.contact-info p {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #252455;
  margin-bottom: 15px;
  font-family: 'Sarabun', sans-serif;
}

.contact-social-icons {
  margin-top: 30px;
}

.contact-social-icons .social-icon {
  font-size: 2.5em;
}
.contact-social-icons .instagram i { color: #E4405F; } /* Color de Instagram */
.contact-social-icons .youtube i { color: #FF0000; } /* Color de YouTube */

.contact-form .form-group {
  margin-bottom: 20px;
}

.contact-form label {
  display: block;
  margin-bottom: 8px;
  color: #252455;
  font-weight: bold;
  font-family: 'Michroma', sans-serif;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #c7c7c9;
  border-radius: 4px;
  font-family: 'Sarabun', sans-serif;
  font-size: 16px;
  box-sizing: border-box;
}

.contact-form textarea {
  height: 150px;
  resize: vertical;
}

.contact-form .cta-button {
  width: 100%;
  border: none;
  cursor: pointer;
}