/* ==== RESET ==== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px; /* Espacio para el header fijo, ajustado a la nueva altura */
}
body {
  font-family: 'Montserrat', sans-serif;
  color: #333;
  line-height: 1.6;
  background: #fff;
}

/* ==== HEADER ==== */
#site-header {
  position: fixed;
  top: 0; left: 0; width: 100%;
  background: #fff; /* Fondo blanco al cargar */
  transition: background 0.3s ease, box-shadow 0.3s ease;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Sombra inicial */
}
#site-header.scrolled {
  background: rgba(255, 255, 255, 0.85); /* Fondo blanco semitransparente al hacer scroll */
  box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Sombra sutil para dar profundidad */
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px; /* Reducimos el padding vertical para un header más angosto */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  text-decoration: none;
}
#site-header .logo img {
  height: 100px; /* Altura del logo para escritorio */
  width: auto; /* Mantiene la proporción al ajustar la altura */
}
.menu {
  display: flex;
  gap: 20px;
}
.menu a {
  color: #333;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
}
.menu a:hover {
  color: #4B6C9E;
}
.menu a.active {
  color: #F4893B; /* Naranja del logo */
  font-weight: 700; /* Hacemos el texto más notorio */
}
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
}

/* ==== HERO ==== */
.hero {
  position: relative;
  height: 100vh; /* 🔹 Toma todo el alto de la pantalla */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: hidden;
}
.hero-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.45);
  z-index: 2;
}
.hero-slider {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 1;
}
.hero-slide {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-size: cover;
  background-position: center 75%;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}
.hero-slide.active {
  opacity: 1;
}
.slider-dots {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 12px;
}
.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.dot:hover {
  background-color: rgba(255, 255, 255, 0.8);
  transform: scale(1.1);
}
.dot.active {
  background-color: #fff;
  transform: scale(1.2);
}
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  padding: 10px 15px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}
.slider-arrow:hover {
  background-color: rgba(0, 0, 0, 0.6);
}
.prev-arrow {
  left: 20px;
}
.next-arrow {
  right: 20px;
}
.hero-content {
  position: relative;
  text-align: center;
  z-index: 3;
  padding: 0 20px;
  max-width: 800px;
  /* Animación de entrada */
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
  transform: translateY(0);
  opacity: 1;
}
.hero-content.fade-out {
  opacity: 0;
  transform: translateY(30px); /* Desliza el texto hacia abajo al salir */
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}
.hero p {
  font-size: 1.3rem;
  margin-bottom: 2rem;
}
.btn-cta {
  background: #1A29C7;
  color: #fff;
  padding: 14px 34px;
  text-decoration: none;
  border-radius: 6px;
  font-size: 1.1rem;
  transition: background 0.3s;
}
.btn-cta:hover { background: #1624b1; }

/* ==== CONTENIDO ==== */
.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 20px;
}
h2 { 
  color: #1A29C7; 
  margin-bottom: 20px; 
  text-align: center; 
}
.contenido p, .intro p {
  margin-bottom: 15px;
}
.bg-light {
  background-color: #f8f9fa; /* Gris muy claro para el fondo */
}

/* Párrafo introductorio destacado */
.intro-text {
  background-color: #eef2f7; /* Un fondo azul muy sutil */
  padding: 20px 30px;
  margin: 30px auto 50px; /* Margen superior/inferior y centrado */
  border-radius: 8px;
  font-size: 1.05rem; /* Ligeramente más grande para legibilidad */
  line-height: 1.7;
  max-width: 900px; /* Ancho máximo para que no se extienda demasiado */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* ==== SERVICIOS ==== */
.servicios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Cambiamos a 3 columnas */
  gap: 30px;
}
.servicio-card {
  background: #fff;
  border-radius: 8px;  
  box-shadow: 21px 38px 17px rgba(0, 0, 0, 0.1); /* Sombra más intensa */
  padding: 30px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.servicio-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Sombra hover más intensa */
}
.servicio-card.full-width-card {
  grid-column: 1 / -1; /* Hace que la tarjeta ocupe todas las columnas */
}
.servicio-card h3 {
  color: #1A29C7;
  margin-bottom: 10px;
}
.servicio-card.card-featured {
  background-color: #1d2c53; /* Azul oscuro de referencia */
  color: #fff;
  border-bottom: 5px solid #1A29C7; /* Borde inferior azul brillante */
  box-shadow: 0 10px 30px rgba(29, 44, 83, 0.4); /* Sombra azulada */
}
.servicio-card.card-featured h3 {
  color: #fff;
}
.servicio-card.card-featured .sub-servicios-list li i {
  color: #fff; /* Iconos en blanco */
  opacity: 0.8;
}

.servicio-card p {
  font-size: 0.95rem;
}
.servicio-card ul {
  list-style: none;
  text-align: left;
  margin-top: 15px;
  padding-left: 0; /* Reseteamos el padding */
}
.sub-servicios-list li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 10px;
  font-size: 0.85rem;
  padding: 0;
  background-color: transparent;
  border-left: none;
}
.sub-servicios-list li i {
  font-size: 1.5rem;
  color: #4B6C9E; /* Color secundario para los iconos */
  margin-top: 2px;
}

/* ==== BENEFICIOS ==== */
#beneficios {
  position: relative;
  background: url('../imagenes/Beneficios.jpg') center center/cover no-repeat;
  background-attachment: fixed; /* Efecto Parallax */
  color: #fff;
}
#beneficios::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(18, 93, 94, 0.6); /* Capa oscura para legibilidad */
  z-index: 1;
}
#beneficios .wrap {
  position: relative;
  z-index: 2;
}
#beneficios h2 {
  color: #fff;
}
#beneficios .beneficio-card {
  background: rgba(255, 255, 255, 0.1); /* Fondo semitransparente para las tarjetas */
}
.beneficios-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Cambiamos a 2 columnas */
  gap: 30px;
  margin-top: 30px;
}
.beneficio-card {
  background: #fff; /* Este se sobreescribirá por el estilo de #beneficios */
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.07);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.beneficio-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.beneficio-card i {
  font-size: 42px;
  color: #fff; /* Cambiamos el color del icono a blanco */
  margin-bottom: 15px;
  display: block;
}

/* ==== EQUIPO ==== */
.equipo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}
.miembro {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  padding: 20px;
  width: 300px;
  text-align: center;
}
.miembro h3 {
  color: #1A29C7;
  margin-bottom: 10px;
}
.miembro p {
  font-size: 0.95rem;
}

/* ==== QUIÉNES SOMOS (TARJETAS) ==== */
.quienes-somos-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columnas */
  gap: 30px;
  margin-top: 50px;
}
.card {
  position: relative;
  padding: 30px;
  border-radius: 20px;
  overflow: hidden;
  color: #333;
  min-height: 250px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card-label {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 15px;
  background-color: rgba(255, 255, 255, 0.7);
  color: #777;
  z-index: 1;
}
.card-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 10px;
  z-index: 1;
  color: #333;
  text-align: left;
}
.card-text {
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 20px;
  z-index: 1;
}
.card-shape {
  position: absolute;
  z-index: 0;
  opacity: 0.7;
}

/* --- Tarjeta 1: Naranja/Durazno --- */
.card-orange {
  background: linear-gradient(135deg, #e3f2fd, #bbdefb); /* Gradiente azul claro */
}
.card-orange .card-shape {
  width: 150px;
  height: 180px;
  right: -40px;
  bottom: -40px;
  background: linear-gradient(45deg, rgba(66, 165, 245, 0.4), rgba(30, 136, 229, 0.6)); /* Forma azul */
  border-radius: 50% 50% 70% 30% / 60% 60% 40% 40%;
  filter: blur(20px);
}

/* --- Tarjeta 2: Púrpura/Lila --- */
.card-purple {
  background: linear-gradient(135deg, #e8f0f7, #d6e4f0); /* Gradiente azul-grisáceo */
}
.card-purple .card-shape {
  width: 180px;
  height: 180px;
  right: -50px;
  bottom: -50px;
  background: linear-gradient(45deg, rgba(144, 164, 174, 0.5), rgba(176, 190, 197, 0.7)); /* Forma azul-gris */
  border-radius: 50%;
  filter: blur(30px);
}

/* --- Tarjeta 3: Verde/Lima --- */
.card-green {
  background: linear-gradient(135deg, #b3e5fc, #4fc3f7); /* Gradiente azul cielo */
}
.card-green .card-shape {
  width: 150px;
  height: 150px;
  right: 20px;
  bottom: 20px;
  background: linear-gradient(to top, rgba(3, 169, 244, 0.5), rgba(0, 188, 212, 0.7)); /* Forma cian/azul */
  clip-path: polygon(50% 0%, 70% 40%, 100% 40%, 80% 70%, 90% 100%, 50% 90%, 10% 100%, 20% 70%, 0% 40%, 30% 40%);
  transform: scale(1.5);
  filter: blur(10px);
}

/* --- Tarjeta 4: Rosa/Magenta --- */
.card-pink {
  background: linear-gradient(135deg, #d1e5f0, #92c5de); /* Gradiente azul más profundo */
}
.card-pink .card-shape {
  width: 200px;
  height: 200px;
  right: -20px;
  bottom: -20px;
  background: linear-gradient(180deg, rgba(79, 195, 247, 0.5), rgba(33, 150, 243, 0.7)); /* Forma azul */
  clip-path: polygon(50% 0%, 100% 30%, 80% 100%, 20% 100%, 0% 30%);
  filter: blur(15px);
}

/* ==== CONTACTO ==== */
.contact-section {
  padding: 80px 0;
  background-color: #e4eaf1; /* Color de fondo azul claro de la imagen */
}
.contact-container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.contact-info {
  background: url('../imagenes/contacto.jpg') center center / cover no-repeat; /* Imagen de fondo */
  padding: 40px;
  display: flex;
  align-items: flex-end; /* Alinea el texto abajo */
  position: relative;
}
.contact-info::before { /* Capa oscura sobre la imagen para legibilidad */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  border-radius: 10px 0 0 10px;
}
.contact-info-text {
  position: relative;
  z-index: 2;
  color: #fff;
}
.contact-info-text h2 {
  color: #fff;
  text-align: left;
  font-size: 2.5rem;
}
.contact-form-wrapper {
  padding: 40px;
}
.contact-form-wrapper h3 {
  color: #333;
  margin-bottom: 20px;
  font-size: 1.5rem;
}
.formulario-moderno {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.formulario-moderno input,
.formulario-moderno textarea {
  padding: 15px;
  border: none;
  background-color: #f0f0f0;
  border-radius: 8px;
  font-size: 1rem;
  font-family: 'Montserrat', sans-serif;
}
.formulario-moderno textarea { min-height: 120px; }

/* ==== FOOTER ==== */
footer {
  background: #222;
  color: #bbb;
  padding: 50px 20px 20px;  
}
.footer-ssn-logo {
  width: 320px; 
}
.footer-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
}
.footer-col h4 { color: #fff; margin-bottom: 10px; }
.footer-col a {
  color: #bbb; 
  text-decoration: none; 
  display: block; 
  margin-bottom: 6px; 
}
.footer-col a:hover { color: #fff; }
.footer-bottom {
  text-align: center;
  margin-top: 30px;
  border-top: 1px solid #444;
  padding-top: 10px;
  font-size: 0.9rem;
}
.footer-ssn-link {
  display: block; /* Permite que el logo ocupe el ancho definido */
  margin-top: 15px;
}
.footer-ssn-logo {
  max-width: var(--footer-logo-width); /* Usa la variable para el tamaño */
  opacity: 0.8;
  transition: opacity 0.3s ease;
}
.footer-ssn-logo:hover {
  opacity: 1;
}

/* ==== RESPONSIVE ==== */
@media (max-width: 768px) {
  .menu { 
    display: none; 
    flex-direction: column; 
    background: #1A29C7; /* Fondo azul como el logo */
    position: absolute;
    top: 75px; /* Posición debajo del header, ajustada */
    right: 20px; /* Alineado a la derecha */
    width: max-content; /* Ancho basado en el contenido */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    gap: 0; /* Eliminamos el gap para controlar el espaciado con padding */
    border-radius: 8px; /* Bordes redondeados */
    overflow: hidden; /* Asegura que los hijos respeten el borde redondeado */
  }
  .menu.open { display: flex; }
  .menu-toggle { display: block; color: #333; }
  .menu a {
    color: #fff; /* Texto blanco para contraste */
    padding: 15px 20px; /* Añadimos padding para mejor toque */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Separador sutil */
  }
  .menu a:last-child {
    border-bottom: none; /* Quitamos el borde del último elemento */
  }
  .hero h1 { font-size: 2.2rem; }
  .hero p { font-size: 1rem; }
  .wrap { padding: 60px 15px; }
  .slider-arrow {
    font-size: 1.5rem; padding: 8px 12px;
  }
  html {
    scroll-padding-top: 80px; /* Espacio para el header en móvil */
  }
  .header-inner { padding: 10px 20px; }
  #site-header .logo img {
    height: 60px; /* Altura del logo para móvil */
    width: auto; /* Mantiene la proporción en móvil */
  }
  .servicios-grid,
  .beneficios-grid {
    grid-template-columns: 1fr; /* Una sola columna en móviles */
  }
  .quienes-somos-cards {
    grid-template-columns: 1fr; /* Una sola columna en móviles */
  }
  .contact-container {
    grid-template-columns: 1fr; /* Apila las columnas en móvil */
  }
  .contact-info {
    min-height: 300px;
  }
  .reseña-container {
    grid-template-columns: 1fr;
  }
  .contact-info::before {
    border-radius: 10px 10px 0 0;
  }
  .footer-col {
    text-align: center; /* Centra el contenido de las columnas del footer */
  }
  .footer-col a {
    display: inline-block;
  } /* Ajuste para enlaces en móvil */
  #cobertura .wrap > p,
  #cobertura .wrap > ul {
    padding-left: 15px;
    padding-right: 15px;
  }
}

  /* Ajuste para enlaces en móvil */
}

/* ==== ANIMACIONES ON SCROLL ==== */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reseña-col.animate-on-scroll:nth-child(2) { transition-delay: 0.1s; }
.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==== RESEÑA ==== */
.reseña-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 40px;
  align-items: start;
}
.reseña-col {
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
  padding: 30px;
  border-radius: 8px;
  transition: background 0.3s ease;
}
.reseña-col:hover {
  background: rgba(255, 255, 255, 0.15);
}
.reseña-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 40px;
  align-items: start;
}
.reseña-col {
  text-align: center;
}
.reseña-col i {
  font-size: 3rem;
  color: #fff;
  margin-bottom: 15px;
}
.reseña-col h3 {
  margin-bottom: 10px;
  color: #fff;
}
.reseña-col p {
  font-size: 0.95rem;
  color: #eee;
}
#reseña {
  position: relative;
  background: url('../imagenes/reseña.jpg') center center/cover no-repeat;
  background-attachment: fixed;
  color: #fff;
}
#reseña::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(23, 37, 91, 0.6); /* Capa azul oscura para legibilidad */
  z-index: 1;
}
#reseña .wrap {
  position: relative;
  z-index: 2;
}
#reseña h2 {
  color: #fff;
}

/* Retraso escalonado para elementos en una grilla */
.servicios-grid .animate-on-scroll:nth-child(2), .beneficios-grid .animate-on-scroll:nth-child(2), .quienes-somos-cards .animate-on-scroll:nth-child(2), .ramos-grid .animate-on-scroll:nth-child(2) { transition-delay: 0.1s; }
.servicios-grid .animate-on-scroll:nth-child(3), .beneficios-grid .animate-on-scroll:nth-child(3), .quienes-somos-cards .animate-on-scroll:nth-child(3), .ramos-grid .animate-on-scroll:nth-child(3) { transition-delay: 0.2s; }
.servicios-grid .animate-on-scroll:nth-child(4), .beneficios-grid .animate-on-scroll:nth-child(4), .quienes-somos-cards .animate-on-scroll:nth-child(4), .ramos-grid .animate-on-scroll:nth-child(4) { transition-delay: 0.3s; }
.ramos-grid .animate-on-scroll:nth-child(5) { transition-delay: 0.1s; }
.ramos-grid .animate-on-scroll:nth-child(6) { transition-delay: 0.2s; }
.ramos-grid .animate-on-scroll:nth-child(7) { transition-delay: 0.3s; }
.ramos-grid .animate-on-scroll:nth-child(8) { transition-delay: 0.4s; }
.ramos-grid .animate-on-scroll:nth-child(9) { transition-delay: 0.1s; }

/* ==== RAMOS ==== */
.ramos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}
.ramo-card {
  background: #fff;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ramo-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.ramo-card h3 {
  color: #1A29C7;
  margin-bottom: 10px;
  font-size: 1.1rem;
}
/* Las reglas .bg-light .ramo-card ya no son necesarias para #liquidaciones */
/* ya que la clase bg-light fue eliminada de esa sección en index.php */

/* Estilos para la sección liquidaciones con fondo */
#liquidaciones {
  position: relative;
  background: url('../imagenes/liquidaciones.jpg') center center/cover no-repeat;
  background-attachment: fixed;
  /* color: #fff;  Eliminamos el color global para que las tarjetas puedan tener su propio color de texto */
}
#liquidaciones::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(175, 136, 73, 0.6); 
  
  z-index: 1;
}

#liquidaciones .wrap { position: relative; z-index: 2; }
#liquidaciones h2 { color: #fff; /* El título principal de la sección sigue siendo blanco */ }

/* Estilos específicos para las tarjetas dentro de la sección de liquidaciones */
#liquidaciones .ramo-card {
  background: rgba(255, 255, 255, 0.8); /* Fondo semi-transparente blanco */
  backdrop-filter: blur(8px); /* Efecto de desenfoque (glassmorphism) */
  -webkit-backdrop-filter: blur(8px); /* Compatibilidad con Safari */
  border: 1px solid rgba(255, 255, 255, 0.3); /* Borde sutil para el efecto */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Sombra ajustada */
  text-align: center; /* Centra todo el texto dentro de la tarjeta */
}
#liquidaciones .ramo-card h3 {
  color: #0B132B; /* Azul marino oscuro del logo para los títulos de las tarjetas */
}
#liquidaciones .ramo-card p {
  color: #333; /* Texto oscuro estándar para las tarjetas */
  /* text-align: justify; ya no es necesario, hereda el centrado de la tarjeta */
}

div#map-canvas.i4ewOd-UzWXSb div {
  display: none;
}