/* Variables de Color (Paleta Avalian) */
:root {
  --verde-avalian: #00966b;
  --verde-oscuro: #007a55;
  --texto-oscuro: #333333;
  --blanco: #ffffff;
  --gris-claro: #f4f4f4;
}

/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}

/* --- HEADER: Base con transición --- */
.header {
  background-color: var(--blanco);
  padding: 15px 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1000;
  /* Transición suave para todos los cambios (fondo, padding, sombra) */
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* --- MEJORA: Efecto Cristal (Glassmorphism) al hacer Scroll --- */
.header.scrolled {
  background-color: rgba(255, 255, 255, 0.75); /* Fondo blanco con transparencia */
  backdrop-filter: blur(12px); /* El desenfoque clave que da el efecto cristal */
  -webkit-backdrop-filter: blur(12px); /* Soporte necesario para Safari */
  
  /* Detalles Premium */
  padding: 8px 50px; /* El menú se vuelve un poco más delgado al bajar */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* Un borde sutil que parece el borde del cristal */
}

.logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--texto-oscuro);
}

.logo span {
  color: var(--verde-avalian);
  font-weight: 400;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 20px;
}

.nav-links a {
  text-decoration: none;
  color: var(--texto-oscuro);
  font-weight: 500;
  transition: color 0.3s;
}

/* --- Animación Premium para los enlaces del Navbar --- */
.nav-links a:not(.btn-nav-contacto) {
    position: relative;
    padding-bottom: 5px; /* Espacio para la línea animada */
}

/* Creamos la línea invisible en el centro */
.nav-links a:not(.btn-nav-contacto)::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: var(--verde-avalian);
    transition: all 0.3s ease-in-out;
    transform: translateX(-50%); /* Asegura que crezca desde el centro */
}

/* Al pasar el mouse, la línea crece al 100% */
.nav-links a:not(.btn-nav-contacto):hover::after {
    width: 100%;
}

/* --- Botón Destacado de Contacto en el Navbar --- */
.btn-nav-contacto {
    background-color: var(--verde-avalian);
    color: var(--blanco) !important; /* Forzamos el color blanco */
    padding: 10px 25px;
    border-radius: 30px;
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 150, 107, 0.2);
}

.btn-nav-contacto:hover {
    background-color: var(--verde-oscuro);
    color: var(--blanco) !important;
    transform: translateY(-2px); /* Se levanta un poquito */
    box-shadow: 0 6px 15px rgba(0, 150, 107, 0.4);
}

.nav-links a:hover {
  color: var(--verde-avalian);
}

/* Botones */
.btn-primary {
  display: inline-block;
  background-color: var(--verde-avalian);
  color: var(--blanco);
  padding: 12px 25px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 700;
  transition: background 0.3s;
  border: 2px solid var(--verde-avalian);
}

.btn-primary:hover {
  background-color: var(--verde-oscuro);
}

.btn-outline {
  background-color: transparent;
}

.btn-outline:hover {
  background-color: var(--verde-avalian);
}

/* =========================================
   CARRUSEL FLUIDO (Para imágenes con texto)
   ========================================= */
.carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: var(--gris-claro);
}

.carousel {
    position: relative;
    width: 100%;
}

.slide {
    /* Las imágenes inactivas flotan ocultas */
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    visibility: hidden; /* Evita que estorben si no están activas */
}

.slide.active {
    /* ¡LA MAGIA ESTÁ AQUÍ! 
       La imagen activa le da la altura exacta a todo el contenedor automáticamente */
    position: relative; 
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.slide-img {
    width: 100%;
    height: auto; /* Mantiene la proporción perfecta, cero recortes */
    display: block; /* Elimina márgenes fantasma debajo de la imagen */
}

/* Controles del Carrusel */
.prev-btn, .next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4); /* Fondo oscurecido para que se vea sobre fondos blancos */
    color: white;
    border: none;
    font-size: 2rem;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 10;
    transition: 0.3s;
    border-radius: 5px;
}

.prev-btn:hover, .next-btn:hover {
    background: var(--verde-avalian);
}

.prev-btn { left: 20px; }
.next-btn { right: 20px; }

/* Ajuste sutil para las flechas en celular */
@media (max-width: 768px) {
    .prev-btn, .next-btn {
        font-size: 1.2rem;
        padding: 5px 10px;
    }
    .prev-btn { left: 10px; }
    .next-btn { right: 10px; }
}

/* Sección Avalian Corporativo */
.avalian-corporativo {
  position: relative;
  width: 100%;
  height: 400px;
  background-image: url("https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80");
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(
    255,
    255,
    255,
    0.85
  ); /* Un overlay blanco transparente para replicar tu imagen */
}

.corporativo-content {
  position: relative;
  z-index: 2;
  color: var(--texto-oscuro);
}

.heart-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 15px;
  stroke: var(--texto-oscuro);
}

.corporativo-content h2 {
  font-size: 2rem;
  margin-bottom: 10px;
}

.corporativo-content p {
  margin-bottom: 25px;
  font-size: 1.1rem;
  color: #555;
}
/* --- Sección Beneficios (Tarjetas) --- */
.beneficios {
  padding: 80px 20px;
  background-color: var(--gris-claro);
  text-align: center;
}

.seccion-titulo {
  margin-bottom: 50px;
}

.seccion-titulo h2 {
  font-size: 2.5rem;
  color: var(--verde-avalian);
  margin-bottom: 10px;
}

.seccion-titulo p {
  font-size: 1.1rem;
  color: var(--texto-oscuro);
}

.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.card {
  background-color: var(--blanco);
  padding: 40px 20px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 150, 107, 0.1);
}

.card-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px auto;
  color: var(--verde-avalian);
}

.card h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: var(--texto-oscuro);
}

.card p {
  color: #666;
  line-height: 1.6;
}

/* --- Footer --- */
.footer {
  background-color: var(--texto-oscuro);
  color: var(--blanco);
  padding: 60px 20px 20px 20px;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto 40px auto;
}

.footer-col h4 {
  font-size: 1.2rem;
  margin-bottom: 20px;
  color: var(--verde-avalian);
  position: relative;
  padding-bottom: 10px;
}

.footer-col h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 2px;
  background-color: var(--verde-avalian);
}

.footer-col p {
  line-height: 1.8;
  color: #ccc;
  margin-bottom: 10px;
}

.footer-col ul {
  list-style: none;
}

.footer-col ul li {
  margin-bottom: 15px;
}

.footer-col ul li a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-col ul li a:hover {
  color: var(--verde-avalian);
  padding-left: 5px; /* Pequeño efecto de movimiento al pasar el mouse */
}

.footer-bottom {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #888;
  font-size: 0.9rem;
}
/* --- Sección Planes --- */
.planes-seccion {
  padding: 80px 20px;
  background-color: var(--blanco);
  text-align: center;
}

.planes-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center; /* Centra las tarjetas verticalmente */
}

.plan-card {
  background-color: var(--blanco);
  border: 1px solid #eaeaea;
  border-radius: 10px;
  padding: 40px 30px;
  transition: 0.3s;
  position: relative;
}

.plan-card:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.plan-card h3 {
  font-size: 1.8rem;
  color: var(--verde-oscuro);
  margin-bottom: 10px;
}

.plan-desc {
  color: #666;
  margin-bottom: 25px;
  min-height: 45px;
}

.plan-features {
  list-style: none;
  text-align: left;
  margin-bottom: 30px;
}

.plan-features li {
  margin-bottom: 15px;
  color: var(--texto-oscuro);
  font-size: 0.95rem;
}

/* Plan Destacado (Hace que el del medio resalte) */
.plan-card.destacado {
  border: 2px solid var(--verde-avalian);
  transform: scale(1.05); /* Lo hace un poquito más grande */
  box-shadow: 0 15px 30px rgba(0, 150, 107, 0.15);
}

.plan-card.destacado .badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--verde-avalian);
  color: var(--blanco);
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: bold;
}

/* --- Sección Contacto --- */
.contacto-seccion {
  padding: 80px 20px;
  background-color: var(--gris-claro);
}

.contacto-container {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  background-color: var(--blanco);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.contacto-info {
  flex: 1;
  min-width: 300px;
  background-color: var(--verde-avalian);
  color: var(--blanco);
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contacto-info h2 {
  font-size: 2.2rem;
  margin-bottom: 20px;
}

.contacto-info p {
  font-size: 1.1rem;
  line-height: 1.6;
}

.contacto-form {
  flex: 1.5;
  min-width: 300px;
  padding: 50px;
}

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

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
  color: var(--texto-oscuro);
  font-size: 0.9rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
  transition: border-color 0.3s;
  font-family: "Roboto", sans-serif;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--verde-avalian);
}

.btn-submit {
  width: 100%;
  font-size: 1.1rem;
  cursor: pointer;
  border: none;
  padding: 15px;
}
/* Agrega esto bien arriba en tu CSS, debajo del selector de root o asterisco (*) */
html {
  scroll-behavior: smooth; /* ¡Magia pura con una sola línea de código! */
}

/* Modifica o reemplaza tus estilos antiguos de .logo por estos: */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none; /* Quitamos el subrayado porque ahora es un link */
}

.logo-img {
  height: 45px; /* Altura perfecta para un header moderno */
  width: auto;
  object-fit: contain;
}

.logo-text {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--texto-oscuro);
  border-left: 2px solid var(--verde-avalian); /* Una rayita separadora elegante */
  padding-left: 12px;
}
/* --- Utilidades --- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- Animaciones (Fade Up) --- */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s ease-out,
    transform 0.8s ease-out;
}

.fade-up.visible {
  opacity: 0;
  transform: translateY(0);
}

/* --- Página: Quiénes Somos --- */
.about-hero {
  background-color: var(--verde-avalian);
  color: var(--blanco);
  padding: 80px 20px;
  text-align: center;
}

.about-hero h1 {
  font-size: 3rem;
  margin-bottom: 15px;
}

.about-hero p {
  font-size: 1.2rem;
  opacity: 0.9;
}

/* Perfil del Abogado */
.perfil-martin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 50px;
  padding: 80px 20px;
}

.perfil-img {
  flex: 1;
  min-width: 300px;
}

.perfil-img img {
  width: 100%;
  border-radius: 15px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.perfil-texto {
  flex: 1.5;
  min-width: 300px;
}

.perfil-texto h2 {
  font-size: 2.5rem;
  color: var(--verde-oscuro);
  margin-bottom: 5px;
}

.perfil-texto .cargo {
  display: inline-block;
  background-color: var(--gris-claro);
  color: var(--verde-avalian);
  padding: 5px 15px;
  border-radius: 20px;
  font-weight: bold;
  margin-bottom: 25px;
  font-size: 0.9rem;
}

.perfil-texto p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--texto-oscuro);
  margin-bottom: 20px;
}

/* Sección Nuestro Equipo */
.equipo-seccion {
  background-color: var(--gris-claro);
  padding: 80px 20px;
  text-align: center;
}

.equipo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  margin-top: 40px;
}

.equipo-card {
  background-color: var(--blanco);
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.equipo-card:hover {
  transform: translateY(-10px);
}

.equipo-card img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%; /* Hace la foto redonda */
  margin-bottom: 20px;
  border: 4px solid var(--verde-avalian);
}

.equipo-card h3 {
  font-size: 1.4rem;
  color: var(--texto-oscuro);
  margin-bottom: 5px;
}

.equipo-card .rol {
  color: var(--verde-avalian);
  font-weight: bold;
  margin-bottom: 15px;
}

.equipo-card .bio {
  color: #666;
  line-height: 1.6;
  font-size: 0.95rem;
}
/* --- Página: Planes Oficiales Avalian --- */

.planes-hero {
  padding: 60px 20px;
  background-color: var(--gris-claro);
  text-align: center;
  border-bottom: 1px solid #eaeaea;
}

.planes-hero h1 {
  font-size: 2.5rem;
  color: var(--verde-avalian);
  margin-bottom: 10px;
}

.text-center {
  text-align: center;
}

.planes-oficiales-seccion {
  padding: 80px 20px;
}

.planes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 50px 40px; /* Espacio vertical de 50px, horizontal de 40px */
}

.plan-oficial-card {
  display: flex;
  flex-direction: column;
  text-align: left;
}

/* Simulación de la Credencial Plástica */
.credencial-mockup {
  width: 100%;
  height: 140px;
  border-radius: 15px;
  margin-bottom: 30px;
  position: relative;
  padding: 20px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.logo-credencial {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 1.5rem;
}

.nombre-plan-cred {
  font-weight: bold;
  font-size: 1.2rem;
  letter-spacing: 1px;
}

/* Colores Específicos por Plan (Textos y Gradientes de tarjetas) */
/* Cerca (Verde Claro) */
.color-cerca {
  color: #a3cf62;
}
.theme-cerca {
  background: linear-gradient(135deg, #c4e589 0%, #87b841 100%);
}
.btn-cerca {
  border: 2px solid #a3cf62;
  color: #a3cf62;
}
.btn-cerca:hover {
  background-color: #a3cf62;
  color: white;
}

/* Integral (Verde Avalian) */
.color-integral {
  color: #00966b;
}
.theme-integral {
  background: linear-gradient(135deg, #00b380 0%, #007a55 100%);
}
.btn-integral {
  border: 2px solid #00966b;
  color: #00966b;
}
.btn-integral:hover {
  background-color: #00966b;
  color: white;
}

/* Hoy (Morado) */
.color-hoy {
  color: #8b51a5;
}
.theme-hoy {
  background: linear-gradient(135deg, #a76fc2 0%, #6d3a82 100%);
}
.btn-hoy {
  border: 2px solid #8b51a5;
  color: #8b51a5;
}
.btn-hoy:hover {
  background-color: #8b51a5;
  color: white;
}

/* Superior (Gris Oscuro) */
.color-superior {
  color: #4a4a4a;
}
.theme-superior {
  background: linear-gradient(135deg, #6b6b6b 0%, #333333 100%);
}
.btn-superior {
  border: 2px solid #4a4a4a;
  color: #4a4a4a;
}
.btn-superior:hover {
  background-color: #4a4a4a;
  color: white;
}

/* Selecta (Azul Marino) */
.color-selecta {
  color: #294b81;
}
.theme-selecta {
  background: linear-gradient(135deg, #3d67a8 0%, #1a325c 100%);
}
.btn-selecta {
  border: 2px solid #294b81;
  color: #294b81;
}
.btn-selecta:hover {
  background-color: #294b81;
  color: white;
}

/* Textos de la tarjeta */
.plan-oficial-card h3 {
  font-size: 2rem;
  margin-bottom: 5px;
}

.plan-oficial-card h4 {
  font-size: 1.1rem;
  margin-bottom: 20px;
  font-weight: 700;
}

.plan-oficial-card p {
  color: #888;
  line-height: 1.6;
  margin-bottom: 30px;
  flex-grow: 1; /* Hace que el botón quede siempre abajo aunque el texto sea corto */
}

/* Botón Saber Más */
.btn-saber-mas {
  display: inline-block;
  padding: 10px 30px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  width: max-content;
  background-color: transparent;
}
/* --- Variable de Color (Asegúrate de tenerla) --- */
:root {
  --rojo-lasegunda: #e30613;
  --rojo-oscuro-lasegunda: #a3040ce6;
}
/* --- Sección Alianza Premium La Segunda (Estilo Sutil) --- */
.alianza-lasegunda-premium {
  position: relative;
  padding: 100px 20px;
  /* Color rojo sólido, uniforme y sutil (ya no es un degradado) */
  background-color: var(--rojo-oscuro-lasegunda);
  color: var(--blanco);
  overflow: hidden;
}

/* Posicionamiento del nuevo logo en la esquina */
.logo-lasegunda-corner {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 80px; /* Tamaño discreto pero visible */
  height: auto;
  z-index: 3;
  opacity: 0.9; /* Un poco de transparencia para que se integre mejor */
}

/* ... (El resto del CSS de esta sección: .decoracion-franja, .alianza-container-premium, etc. se mantiene igual que en el paso anterior) ... */
.decoracion-franja {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.08);
  z-index: 1;
}

.franja-1 {
  width: 300px;
  height: 40px;
  top: 30px;
  left: -50px;
}
.franja-2 {
  width: 500px;
  height: 60px;
  bottom: 50px;
  right: -100px;
}

.alianza-container-premium {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  flex-wrap: wrap;
}

.alianza-content-premium {
  flex: 1;
  min-width: 350px;
}

.badge-blanco {
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--blanco);
  padding: 6px 15px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: bold;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 25px;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.alianza-content-premium h2 {
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 20px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.bajada-premium {
  font-size: 1.2rem;
  line-height: 1.7;
  margin-bottom: 35px;
  opacity: 0.9;
}

.btn-lasegunda-blanco {
  display: inline-block;
  background-color: var(--blanco);
  color: var(--rojo-lasegunda);
  padding: 15px 35px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-lasegunda-blanco:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  background-color: var(--gris-claro);
}

.servicios-grid-premium {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(130px, 1fr)
  ); /* Ajusté un poco el mínimo para que entren mejor */
  gap: 20px;
  min-width: 300px;
}

.servicio-box {
  background-color: var(--blanco);
  border-radius: 15px;
  padding: 20px 15px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s;
}

.servicio-box:hover {
  transform: translateY(-5px);
}

.icono-servicio-rojo {
  width: 40px;
  height: 40px;
  stroke: var(--rojo-lasegunda);
  margin-bottom: 15px;
}

.servicio-box span {
  display: block;
  color: var(--texto-oscuro);
  font-weight: 700;
  font-size: 0.9rem;
}
/* --- Botón Flotante de WhatsApp --- */
.whatsapp-flotante {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #25d366; /* Verde oficial de WhatsApp */
  color: white;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
  z-index: 1000;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  animation: pulse-wa 2s infinite; /* Efecto de latido */
}

.whatsapp-flotante:hover {
  transform: scale(1.1); /* Se agranda un poquito al pasar el mouse */
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
  animation: none; /* Quitamos el latido al poner el mouse encima */
}

/* Animación de latido (Pulse) */
@keyframes pulse-wa {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}
/* --- Ocultamos el botón hamburguesa en la PC --- */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--verde-avalian);
}

/* =========================================
   DISEÑO RESPONSIVE (MÓVILES Y TABLETS)
   ========================================= */
@media (max-width: 768px) {
    
  /* Ajustes del menú para móvil */
    .nav-links a:not(.btn-nav-contacto)::after {
        display: none; /* Apagamos la animación de la rayita en celulares */
    }

    .btn-nav-contacto {
        margin: 15px 20px;
        text-align: center;
        display: block; /* Para que el botón ocupe todo el ancho disponible */
    }
    /* --- Header y Menú Hamburguesa --- */
    .header {
        padding: 15px 20px; /* Menos espacio a los costados */
        position: relative; /* Necesario para que el menú se despliegue debajo */
    }

    .menu-toggle {
        display: block; /* Mostramos las 3 rayitas en celular */
    }

    .nav-menu {
        display: none; /* Ocultamos los links por defecto */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--blanco);
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        border-top: 1px solid #eee;
    }

    /* Esta clase se la agregaremos con JavaScript al hacer clic */
    .nav-menu.active {
        display: block;
    }

    .nav-links {
        flex-direction: column; /* Ponemos los links uno abajo del otro */
        gap: 0;
        padding: 10px 0;
    }

    .nav-links li {
        text-align: center;
    }

    .nav-links a {
        display: block;
        padding: 15px 20px;
        border-bottom: 1px solid #f4f4f4;
    }

    /* --- Carrusel (Corrigiendo textos gigantes) --- */
    .slide-content {
        padding: 15px;
        max-width: 90%;
    }

    .slide-content h2 {
        font-size: 2rem; /* Achicamos el título */
        margin-bottom: 10px;
    }

    .slide-content p {
        font-size: 1rem; /* Achicamos la bajada */
        margin-bottom: 20px;
    }

    /* Achicamos las flechas del carrusel */
    .prev-btn, .next-btn {
        font-size: 1.2rem;
        padding: 8px 12px;
    }
    .prev-btn { left: 10px; }
    .next-btn { right: 10px; }

    /* --- Textos de La Segunda Seguros --- */
    .alianza-lasegunda-premium {
        padding: 60px 20px;
    }

    .alianza-content-premium h2 {
        font-size: 2rem; /* Achicamos el título para que entre en pantalla */
    }
    
    .bajada-premium {
        font-size: 1rem;
    }
}
/* --- Títulos Globales para las nuevas páginas --- */
.pagina-hero {
    padding: 60px 20px;
    background-color: var(--gris-claro);
    text-align: center;
    border-bottom: 1px solid #eaeaea;
}

.pagina-hero h1 {
    font-size: 2.5rem;
    color: var(--verde-avalian);
    margin-bottom: 10px;
}

/* --- Sección Testimonios (Estilo Google Reviews) --- */
.testimonios-seccion {
    padding: 80px 20px;
    background-color: var(--blanco);
}

.testimonios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.review-card {
    background-color: var(--blanco);
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.review-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    position: relative;
}

.review-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    font-weight: bold;
}

.review-info h4 {
    margin: 0;
    font-size: 1rem;
    color: #202124; /* Color de texto de Google */
}

.review-fecha {
    font-size: 0.85rem;
    color: #70757a;
}

/* Ícono simulado de Google */
.google-icon {
    position: absolute;
    right: 0;
    top: 5px;
    font-weight: 900;
    color: #4285F4; /* Azul Google */
    font-family: Arial, sans-serif;
    font-size: 1.2rem;
}

.review-estrellas {
    color: #fbbc04; /* Amarillo exacto de las estrellas de Google */
    font-size: 1.2rem;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.review-texto {
    color: #3c4043;
    line-height: 1.6;
    font-size: 0.95rem;
}
/* --- Redes Sociales en el Footer --- */
.social-links {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-links a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1); /* Fondo semi-transparente */
    border-radius: 50%; /* Hace que sean círculos perfectos */
    color: var(--blanco);
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-links a svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

/* Efecto Hover: Cambia el color de fondo al Verde Avalian y hace un pequeño zoom al ícono */
.social-links a:hover {
    background-color: var(--verde-avalian);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 150, 107, 0.4);
}

.social-links a:hover svg {
    transform: scale(1.1);
}

/* --- Formulario de Contacto La Segunda (Estilo Rojo) --- */
.contacto-lasegunda-seccion {
    padding: 80px 20px;
    background-color: var(--blanco); /* Fondo blanco para separar de la sección superior */
}

.contacto-lasegunda-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    background-color: var(--blanco);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 1px solid #eaeaea;
}

.contacto-lasegunda-info {
    flex: 1;
    min-width: 300px;
    background-color: var(--rojo-oscuro-lasegunda); /* El rojo sutil y elegante */
    color: var(--blanco);
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contacto-lasegunda-info h2 {
    font-size: 2.2rem;
    margin-bottom: 20px;
}

.contacto-lasegunda-info p {
    font-size: 1.1rem;
    line-height: 1.6;
}

.contacto-lasegunda-form {
    flex: 1.5;
    min-width: 300px;
    padding: 50px;
}

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

.form-group-lasegunda label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: var(--texto-oscuro);
    font-size: 0.9rem;
}

.form-group-lasegunda input,
.form-group-lasegunda select,
.form-group-lasegunda textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    transition: border-color 0.3s;
    font-family: 'Roboto', sans-serif;
}

/* El borde se pinta de rojo al escribir en el campo */
.form-group-lasegunda input:focus,
.form-group-lasegunda select:focus,
.form-group-lasegunda textarea:focus {
    outline: none;
    border-color: var(--rojo-oscuro-lasegunda); 
}

/* Botón de Enviar Formulario */
.btn-lasegunda-submit {
    width: 100%;
    font-size: 1.1rem;
    cursor: pointer;
    border: none;
    padding: 15px;
    background-color: var(--rojo-oscuro-lasegunda);
    color: var(--blanco);
    border-radius: 30px; /* Bordes redondeados para modernidad */
    font-weight: 700;
    text-transform: uppercase;
    transition: background-color 0.3s, transform 0.3s;
}

.btn-lasegunda-submit:hover {
    background-color: var(--rojo-lasegunda); /* Rojo apenas más oscuro al pasar el mouse */
    transform: translateY(-2px);
}

/* Ajuste Responsivo para Móviles */
@media (max-width: 768px) {
    .contacto-lasegunda-info, .contacto-lasegunda-form {
        padding: 30px 20px;
    }
}

/* --- Botones de Contacto en Tarjetas de Equipo --- */
.equipo-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #eaeaea; /* Línea sutil separadora */
}

.btn-asesoramiento {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1; /* Ocupa todo el espacio sobrante */
    background-color: var(--verde-avalian);
    color: var(--blanco);
    padding: 10px 15px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    transition: background-color 0.3s, transform 0.3s;
}

.btn-asesoramiento:hover {
    background-color: var(--verde-oscuro);
    color: var(--blanco);
    transform: translateY(-2px);
}

.btn-instagram {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 2px solid var(--verde-avalian);
    color: var(--verde-avalian);
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-instagram:hover {
    background-color: var(--verde-avalian);
    color: var(--blanco);
    transform: translateY(-2px);
}
/* --- Nueva Página: Quiénes Somos --- */
.filosofia-seccion {
    padding: 80px 20px;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.filosofia-seccion h2 {
    color: var(--verde-avalian);
    font-size: 2.2rem;
    margin-bottom: 25px;
}

.filosofia-seccion p {
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--texto-oscuro);
    margin-bottom: 20px;
}

/* Sección de Gestiones (Fondo Gris) */
.gestiones-seccion {
    background-color: var(--gris-claro);
    padding: 80px 20px;
}

.gestiones-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px auto;
}

.gestiones-header h2 {
    color: var(--verde-oscuro);
    font-size: 2rem;
    margin-bottom: 15px;
}

.gestiones-header p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #555;
}

/* Grilla de Checks */
.gestiones-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto 40px auto;
}

.gestion-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: var(--blanco);
    padding: 18px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    transition: transform 0.3s ease;
}

.gestion-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.06);
}

.check-icon {
    width: 26px;
    height: 26px;
    color: var(--verde-avalian);
    flex-shrink: 0;
}

.gestion-item span {
    font-weight: 500;
    color: var(--texto-oscuro);
    font-size: 1.05rem;
}

.gestiones-footer {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--texto-oscuro);
}

.gestiones-footer strong {
    color: var(--verde-avalian);
}

/* Frase final destacada de Martín */
.frase-destacada {
    font-size: 1.3rem !important;
    color: var(--verde-avalian) !important;
    font-weight: 700;
    font-style: italic;
    margin-top: 30px !important;
    border-left: 4px solid var(--verde-avalian);
    padding-left: 15px;
    background-color: rgba(0, 150, 107, 0.05);
    padding: 15px 20px;
    border-radius: 0 8px 8px 0;
}
/* =========================================
   SECCIÓN NUESTRO SERVICIO (Animada y Premium)
   ========================================= */
   
.servicio-dinamico {
    padding: 100px 20px;
    /* 1. FONDO CON CONTRASTE: Un gris-verdoso mucho más marcado para que el blanco resalte */
    background: linear-gradient(135deg, #e4f0ec 0%, #f4f9f7 100%);
    position: relative;
    overflow: hidden;
}

/* 2. DECORACIÓN: Círculos difuminados en las esquinas para dar volumen (Opacidad subida a 0.12) */
.servicio-dinamico::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -50px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 150, 107, 0.12) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}
/* Agregamos un segundo destello abajo a la izquierda */
.servicio-dinamico::after {
    content: '';
    position: absolute;
    bottom: -150px;
    left: -100px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 150, 107, 0.08) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}
/* 3. LA CAJA: Sombras mucho más fuertes para que no parezca plana */
.servicio-soporte {
    position: relative;
    z-index: 1;
    background-color: #ffffff; /* Blanco puro para contrastar con el fondo */
    border-radius: 24px;
    padding: 60px 50px;
    /* Sombra subida al doble (0.12) para que "flote" de verdad */
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12); 
    border-top: 6px solid var(--verde-avalian); 
    max-width: 1100px;
    margin: 0 auto;
}

/* 3. MEJORA DEL TEXTO (Typography): Le damos un estilo más editorial */
.servicio-intro {
    position: relative;
    z-index: 1; /* Asegura que el texto esté por encima de la decoración */
    text-align: center;
    max-width: 900px;
    margin: 0 auto 70px auto;
}

.badge-verde {
    background-color: rgba(0, 150, 107, 0.1);
    color: var(--verde-avalian);
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 25px;
    letter-spacing: 1px;
}

.servicio-intro h2 {
    color: var(--verde-oscuro);
    font-size: 2.8rem; /* Título más grande y con más impacto */
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

/* Agregamos una línea divisoria elegante debajo del título principal */
.servicio-intro h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--verde-avalian);
    margin: 25px auto 30px auto;
    border-radius: 2px;
}

.servicio-intro .lead {
    font-size: 1.35rem; /* Texto de bajada más presente */
    color: #222; /* Más oscuro para mejor contraste */
    font-weight: 400;
    margin-bottom: 20px;
    line-height: 1.7;
}

.servicio-intro p:not(.lead) {
    font-size: 1.15rem;
    color: #555;
    line-height: 1.7;
}
.servicio-intro p {
    text-align: justify;
    /* Opcional: Esto ayuda a que los espacios entre palabras no queden tan grandes al justificar */
    hyphens: auto; 
}

/* 4. LA CAJA: La "anclamos" para que no parezca flotando aislada */
.servicio-soporte {
    position: relative;
    z-index: 1;
    background-color: var(--blanco);
    border-radius: 24px;
    padding: 60px 50px;
    /* Sombra más amplia y difuminada */
    box-shadow: 0 20px 50px rgba(0,0,0,0.06); 
    /* Esta línea superior verde "amarra" el diseño a la marca */
    border-top: 5px solid var(--verde-avalian); 
    max-width: 1100px;
    margin: 0 auto;
}

.soporte-header {
    text-align: center;
    margin-bottom: 50px;
}

.soporte-header h3 {
    font-size: 2rem;
    color: var(--verde-avalian);
    margin-bottom: 15px;
    font-weight: 700;
}

.soporte-header p {
    font-size: 1.15rem;
    color: #555;
}

/* --- Grilla y Tarjetas (Mantienen su animación pero mejoramos detalles) --- */
.soporte-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
}

.soporte-card {
    background-color: var(--blanco);
    border: 1px solid #f0f0f0;
    padding: 25px 20px;
    border-radius: 16px;
    width: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.6s forwards;
}

.anim-delay-1 { animation-delay: 0.1s; }
.anim-delay-2 { animation-delay: 0.2s; }
.anim-delay-3 { animation-delay: 0.3s; }
.anim-delay-4 { animation-delay: 0.4s; }
.anim-delay-5 { animation-delay: 0.5s; }
.anim-delay-6 { animation-delay: 0.6s; }
.anim-delay-7 { animation-delay: 0.7s; }

@keyframes slideInUp {
    to { opacity: 1; transform: translateY(0); }
}

.icon-circle {
    width: 65px;
    height: 65px;
    background-color: rgba(0, 150, 107, 0.05);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--verde-avalian);
    transition: all 0.3s ease;
}

.icon-circle svg { width: 30px; height: 30px; }

.soporte-card span {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--texto-oscuro);
}

.soporte-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 150, 107, 0.12);
    border-color: rgba(0, 150, 107, 0.2);
}

.soporte-card:hover .icon-circle {
    background-color: var(--verde-avalian);
    color: var(--blanco);
    transform: scale(1.1) rotate(5deg);
}

@media (max-width: 768px) {
    .servicio-intro h2 { font-size: 2.2rem; }
    .servicio-soporte { padding: 40px 20px; }
    .soporte-card {
        width: 100%;
        flex-direction: row;
        text-align: left;
        padding: 15px 20px;
    }
}
/* --- Créditos de Desarrollo (Teorema Zero) --- */
.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px; /* Espacio entre el copyright y los créditos */
    padding: 20px 0;
}

.creditos-teorema {
    font-size: 0.85rem;
    color: #a0a0a0; /* Un gris sutil para no competir con la marca del cliente */
    margin: 0;
}

.creditos-teorema a {
    color: var(--verde-avalian); /* Usamos el verde del sitio para que combine */
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
}

.creditos-teorema a:hover {
    color: #ffffff; /* Si tu footer es oscuro, al pasar el mouse se pone blanco */
    text-decoration: underline;
}

/* --- Link de la G de Google --- */
a.google-icon {
    text-decoration: none; /* Quitamos la línea de subrayado típica de los links */
    transition: transform 0.2s ease, opacity 0.2s ease;
    display: inline-block;
}

a.google-icon:hover {
    transform: scale(1.45); /* Crece un poquito */
    opacity: 0.8;
}

/* --- Botón Ver más reseñas (Call to Action) --- */
.testimonios-cta {
    text-align: center;
    margin-top: 50px;
}

.btn-google-maps {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #ffffff;
    color: #4285F4; /* Azul Google */
    border: 2px solid #4285F4;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(66, 133, 244, 0.15);
}

.btn-google-maps svg {
    fill: #4285F4;
    transition: all 0.3s ease;
}

.btn-google-maps:hover {
    background-color: #1c6ff5;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgb(1, 78, 202);
}

.btn-google-maps:hover svg {
    fill: #ffffff; /* El ícono se vuelve blanco al pasar el mouse */
}
/* --- Banner Superior Planes --- */
.planes-hero {
    position: relative;
    width: 100%; /* Obliga a la sección a usar todo el ancho */
    max-width: 100%;
    padding: 0;
    margin: 0;
}

.planes-banner {
    width: 100%;
    min-height: 550px; /* Le da una altura imponente al banner */
    
    /* Acá ponés la ruta de tu imagen HD */
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1)), url('/img/planes.png');
    background-size: cover !important;
    background-position: center 20% !important; /* Enfoca un poco más arriba para que se vean las caras */
    background-repeat: no-repeat;
    
    /* Usamos Flexbox para centrar el texto verticalmente perfecto */
    display: flex;
    align-items: center; 
    justify-content: center;
    padding-bottom: 80px; /* Deja espacio abajo para que no choque con las tarjetas */
}
.planes-banner1 {
    width: 100%;
    min-height: 550px; /* Le da una altura imponente al banner */
    
    /* Acá ponés la ruta de tu imagen HD */
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('/img/img01.png');
    background-size: cover !important;
    background-position: center 20% !important; /* Enfoca un poco más arriba para que se vean las caras */
    background-repeat: no-repeat;
    
    /* Usamos Flexbox para centrar el texto verticalmente perfecto */
    display: flex;
    align-items: center; 
    justify-content: center;
    padding-bottom: 80px; /* Deja espacio abajo para que no choque con las tarjetas */
}
.planes-banner2 {
    width: 100%;
    min-height: 550px; /* Le da una altura imponente al banner */
    
    /* Acá ponés la ruta de tu imagen HD */
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('/img/planes.png');
    background-size: cover !important;
    background-position: center 20% !important; /* Enfoca un poco más arriba para que se vean las caras */
    background-repeat: no-repeat;
    
    /* Usamos Flexbox para centrar el texto verticalmente perfecto */
    display: flex;
    align-items: center; 
    justify-content: center;
    padding-bottom: 80px; /* Deja espacio abajo para que no choque con las tarjetas */
}
.planes-banner3 {
    width: 100%;
    min-height: 550px; /* Le da una altura imponente al banner */
    
    /* Acá ponés la ruta de tu imagen HD */
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('/img/image-amma-salud.jpg');
    background-size: cover !important;
    background-position: center 20% !important; /* Enfoca un poco más arriba para que se vean las caras */
    background-repeat: no-repeat;
    
    /* Usamos Flexbox para centrar el texto verticalmente perfecto */
    display: flex;
    align-items: center; 
    justify-content: center;
    padding-bottom: 80px; /* Deja espacio abajo para que no choque con las tarjetas */
}


/* Forzamos el color blanco para que resalte sobre la foto */
.texto-blanco {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5); /* Sombrita para que se lea perfecto */
}

.planes-banner h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.planes-banner .planes-bajada {
    font-size: 1.5rem;
    font-weight: 400;
}
/* --- Ajuste del logo dentro de las credenciales de planes --- */

.credencial-mockup {
    position: relative;
    display: flex;
    align-items: flex-end; /* Manda el texto "Plan Cerca" hacia abajo */
    padding: 20px;
    height: 140px; /* Mantiene la forma rectangular de la tarjeta */
}

.logo-credencial {
    /* Posicionamos el logo arriba a la derecha de forma absoluta */
    position: absolute;
    top: 15px;
    right: 20px;
}

.logo-credencial img {
    width: 110px; /* ESTA ES LA CLAVE: Limita el ancho del logo */
    height: auto; /* Mantiene la proporción para que no se deforme */
    object-fit: contain;
}

.nombre-plan-cred {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--blanco);
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* --- TRANSICIONES GLOBALES MÁS LENTAS --- */
:root {
  --transition-slow: 1.2s cubic-bezier(0.22, 1, 0.36, 1); /* Curva elegante y lenta */
}

/* --- CARRUSEL: Transición Cinematográfica --- */
.slide {
    transition: opacity var(--transition-slow), transform var(--transition-slow) !important;
    transform: scale(1.1); /* Empieza un poco más grande */
}

.slide.active {
    transform: scale(1); /* Se asienta lentamente */
}

/* --- NUEVAS CLASES DE SCROLL NOVEDOSAS --- */

/* Revelación desde la izquierda con rotación */
.reveal-left {
    opacity: 0;
    transform: translateX(-80px) rotate(-2deg);
    transition: all var(--transition-slow);
}

/* Revelación desde la derecha con rotación */
.reveal-right {
    opacity: 0;
    transform: translateX(80px) rotate(2deg);
    transition: all var(--transition-slow);
}

/* Zoom progresivo (ideal para fotos) */
.reveal-zoom {
    opacity: 0;
    transform: scale(0.8);
    transition: all var(--transition-slow);
}

/* Clase que activa la animación (la pone el JS) */
.visible {
    opacity: 1 !important;
    transform: translateX(0) translateY(0) rotate(0) scale(1) !important;
}

/* --- EFECTO DE TEXTO ESCALONADO (Staggered) --- */
/* Esto hace que los párrafos no aparezcan todos a la vez */
.stagger-item {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease-out;
}

/* --- BARRA DE PROGRESO DE LECTURA (Más llamativa) --- */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 7px; /* Aumentamos el grosor (antes era 4px) */
    /* Degradado que va del verde Avalian a un verde más brillante/neón */
    background: linear-gradient(90deg, var(--verde-oscuro) 0%, var(--verde-avalian) 50%, #00e6a4 100%);
    /* Le damos un resplandor para que "brille" sobre fondos blancos */
    box-shadow: 0 2px 10px rgba(0, 150, 107, 0.6);
    z-index: 9999; /* Nos aseguramos de que esté por encima de absolutamente todo */
    border-radius: 0 4px 4px 0; /* Redondeamos solo la punta derecha para que quede aerodinámica */
    transition: width 0.1s ease-out; /* Hace que el avance sea ultra fluido, sin tirones */
}

/* =========================================
   MENÚ INTELIGENTE (SCROLLSPY)
   ========================================= */
.nav-links a.active-link {
    color: var(--verde-avalian);
    font-weight: bold;
}

/* Mantiene la rayita verde fija debajo del link activo (excepto en el botón de contacto) */
.nav-links a:not(.btn-nav-contacto).active-link::after {
    width: 100%;
}