/* --- ESTILOS GENERALES --- */
:root {
 --blue-primary: #2468c0;
 --blue-dark: #2468c0;
 --green-main: #00A650;
 --green-light: #029c17;
 --green-text: #007c3c;
 --text-gray: #000000;
 --text-light-gray: #888;
 --bg-gray: #f9f9f9;
 --white: #fff;
 --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

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

body {
 font-family: var(--font-main);
 color: var(--text-gray);
 line-height: 1.6;
 background-color: var(--white);
 overflow-x: hidden; /* Evita scrolls raros */
}

.container {
 width: 90%;
 max-width: 1200px;
 margin: 0 auto;
}

.green-text {
 color: var(--green-text) !important;
 font-weight: bold;
}

.blue-text {
  color: var(--blue-primary) !important;
  font-weight: bold;
}

/* --- ESTILOS HEADER (Sección 1) --- */
header {
 padding: 15px 0;
 background: var(--white);
 border-bottom: 1px solid #eee;
}

.header-content {
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.logo {
 height: 60px; /* Ajusta según tu logo */
}

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

.nav-menu a {
 text-decoration: none;
 color: #033c6b;
 font-weight: 500;
 font-size: 0.95rem;
 position: relative;
 transition: color 0.3s;
}

.nav-menu a:hover,
.nav-menu a.active {
 color: var(--green-main);
}

.nav-menu a.active::after {
 content: '';
 position: absolute;
 width: 100%;
 height: 3px;
 background: var(--green-main);
 bottom: -10px;
 left: 0;
 border-radius: 2px;
}

.call-action {
 background-color: var(--green-main);
 color: var(--white);
 padding: 10px 20px;
 border-radius: 5px;
 display: flex;
 align-items: center;
 gap: 10px;
 font-weight: bold;
}

/* --- ESTILOS HERO & FORMULARIO (La Magia Aquí) --- */
.hero-section {
 position: relative;
 padding: 120px 0;
 /* LA CLAVE: Fondo alineado a la derecha */
 background-image: url('img/im3.png.png'); /* Pon tu foto aquí */
 background-repeat: no-repeat;
 background-position: center right; /* ¡Importante! Desde la derecha */
 background-size: cover; /* Ajusta para llenar, pero alineado a la derecha */
}

/* Capa de overlay si la imagen es muy brillante */


.hero-layout {
    display: flex;
  justify-content: flex-start; /* Fuerza todo el contenido al inicio (izquierda) */
  align-items: center;
  gap: 40px;
  width: 80%; /* Ocupa todo el ancho disponible */
  max-width: none; /* Quitamos el límite de 1200px */
  margin: 0;       /* Eliminamos el margen auto que centraba */
  padding: 0 140px; /* Padding general para que no pegue a los bordes */
}

/* Izquierda: Texto */
/* Ajuste específico para que cada bloque ocupe el 50% pero sea flexible */
.hero-text-content {
  flex: 0 0 40%; /* Ajusta este porcentaje si quieres el texto más ancho o angosto */
  text-align: left !important;
  margin-left: 0; /* Asegura que no tenga margen izquierdo */
}

.hero-form-container {
  flex: 0 0 40%; /* El formulario ocupará el 40% del ancho */
  display: flex;
  justify-content: center; /* Centra el formulario dentro de su bloque del 40% */
}


.welcome-tag {
  display: inline-block;
  padding: 8px 16px;
  /* Fondo verde muy clarito */
  background-color: #e8f5e9; 
  /* Borde verde principal */
 
  /* Texto en el verde principal para que resalte */
  color: var(--green-main);       
  border-radius: 10px;
  font-weight: bold;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.main-title {
 font-size: 2.7rem;
 font-weight: 800;
 margin-bottom: 20px;
 line-height: 1.2;
}

.hero-description {
 font-size: 1rem;
 margin-bottom: 40px;
}

/* 1. Mantenemos el contenedor horizontal */
.features-list {
  display: flex;
  flex-direction: row; /* Horizontal */
  gap: 30px; 
  margin-top: 30px;
}

/* 2. Ajustamos los ítems para que el icono esté a la izquierda y el texto a la derecha */
.feature-item {
  display: flex;
  flex-direction: row; /* Icono y texto uno al lado del otro */
  align-items: center; /* Alinea verticalmente el icono con el texto */
  gap: 15px; /* Espacio entre icono y texto */
  flex: 1; /* Distribuye el espacio equitativamente */
}

/* 3. Aseguramos que el contenedor del texto dentro del item no se rompa */
.feature-item > div {
  text-align: left; /* Asegura que el texto dentro del beneficio esté a la izquierda */
}

.icon-circle {
 width: 60px;
 height: 50px;
 border-radius: 10%;
 color: var(--white);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1rem;
}

.icon-circle.green { background-color: var(--green-main); }
.icon-circle.blue { background-color: #3b5998; } /* Ajuste de color */

.feature-item div p {
 font-size: 0.85rem;
 color: var(--text-light-gray);
}

/* Derecha: Formulario */
.hero-form-container {
  display: flex;
  justify-content: center; /* Esto ya centra el formulario horizontalmente */
  align-items: center;
  padding-right: 1px; /* Un poco de aire a la derecha */
}

.contact-form {
  background: var(--white);
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.15); /* Sombra un poco más marcada para que resalte */
  width: 90%; 
  max-width: 400px; /* Un poco más estrecho para que el centrado sea más visual */
}

.contact-form h3 {
 text-align: center;
 color: var(--blue-dark);
 margin-bottom: 30px;
 font-size: 1.3rem;
}

.input-group {
 position: relative;
 margin-bottom: 15px;
}

.input-icon {
 position: absolute;
 left: 15px;
 top: 50%;
 transform: translateY(-50%);
 color: var(--text-light-gray);
 font-size: 0.9rem;
}

.contact-form input {
 width: 100%;
 padding: 12px 15px 12px 45px; /* Padding extra a la izquierda para el icono */
 border: 1px solid #ddd;
 border-radius: 5px;
 font-size: 0.9rem;
}

.submit-btn {
 width: 100%;
 padding: 12px;
 background: var(--green-light);
 color: var(--white);
 border: none;
 border-radius: 5px;
 font-size: 1rem;
 font-weight: bold;
 cursor: pointer;
 transition: background 0.3s;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 margin-top: 20px;
}

.submit-btn:hover {
 background: var(--green-main);
}

.secure-text {
 text-align: center;
 font-size: 0.8rem;
 color: var(--text-light-gray);
 margin-top: 15px;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 5px;
}

/* --- ESTILOS ALIANZAS --- */
.aliados-section {
 padding: 60px 0;
 background-color: var(--white);
 border-top: 1px solid #eee;
}

.aliados-content h2 {
 text-align: center;
 color: var(--blue-dark);
 margin-bottom: 40px;
 font-size: 1.3rem;
}

.aliados-carousel {
 display: flex;
 justify-content: space-between;
 align-items: center;
 position: relative;
 flex-wrap: wrap; /* Para móviles */
 gap: 20px;
}

.aliados-carousel img {
 max-height: 35px;
 filter: grayscale(100%);
 opacity: 0.7;
 transition: filter 0.3s, opacity 0.3s;
}

.aliados-carousel img:hover {
 filter: grayscale(0%);
 opacity: 1;
}

.carousel-nav button {
 background: none;
 border: 1px solid #ccc;
 border-radius: 50%;
 width: 30px;
 height: 30px;
 color: #aaa;
 cursor: pointer;
}

/* --- ESTILOS FOOTER (Sección 4) --- */
footer {
 background-color: var(--blue-dark);
 color: rgba(255, 255, 255, 0.8);
 padding: 40px 0;
}

.footer-content {
 display: grid;
 grid-template-columns: repeat(4, 1fr); /* 4 columnas */
 gap: 30px;
 text-align: center;
}

.benefit-card i {
 font-size: 2rem;
 color: var(--green-main);
 margin-bottom: 15px;
}

.benefit-card strong {
 color: var(--white);
 display: block;
 margin-bottom: 10px;
 font-size: 0.95rem;
}

.benefit-card p {
 font-size: 0.8rem;
}

/* --- RESPONSIVO --- */
@media (max-width: 992px) {
 .hero-layout {
 grid-template-columns: 1fr; /* Una columna */
 text-align: center;
 }
 .hero-text-content {
 margin-bottom: 20px;
 }
 .features-list {
 align-items: center;
 }
 .header-content {
 flex-direction: column;
 gap: 15px;
 }
 .nav-menu ul {
 gap: 10px;
 font-size: 0.8rem;
 }
 .hero-section {
 background-position: center top; /* Mejor en móvil */
 }
 .footer-content {
 grid-template-columns: repeat(2, 1fr);
 }
}

@media (max-width: 600px) {
 .footer-content {
 grid-template-columns: 1fr;
 }
}



/* parte dos de la pagina*/

.prestamos-section {
  padding: 80px 0;
  background-color: #fafafa;
}

.prestamos-layout {
  display: flex;
  align-items: center;
  gap: 30px;
}

.prestamos-text { flex: 1; }

.prestamos-box {
  flex: 1;
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.box-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  font-weight: 500;
}

.green-icon { color: var(--green-main); margin-right: 15px; width: 25px; }

.prestamos-image { flex: 1; text-align: right; }
.prestamos-image img { width: 180%; border-radius: 20px; }


/* parte dos de la pagina*/

.beneficios-grid-section {
  padding: 60px 0;
  background-color: #fcfcfc;
}

.section-title {
  text-align: center;
  color: var(--blue-dark);
  margin-bottom: 40px;
  font-size: 1.5rem;
}

.beneficios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Tres columnas */
  gap: 20px;
}

.grid-item {
  background: white;
  padding: 30px;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.grid-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.grid-item i {
  font-size: 1.8rem;
  color: var(--green-main);
  margin-bottom: 15px;
  display: block;
}

.grid-item strong {
  display: block;
  font-size: 1rem;
  color: var(--blue-dark);
  margin-bottom: 10px;
}

.grid-item p {
  font-size: 0.9rem;
  color: var(--text-gray);
  line-height: 1.4;
}

/* Ajuste para tablet */
@media (max-width: 992px) {
  .beneficios-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Ajuste para móvil */
@media (max-width: 600px) {
  .beneficios-grid {
    grid-template-columns: 1fr;
  }
}



                                                                                     /* CONVENIOS*/


.convenios-section { padding: 80px 0; background-color: #fcfcfc; }

.convenio-titulo { 
  text-align: center; color: var(--blue-dark); 
  margin-bottom: 40px; font-size: 1.4rem;
}

.convenio-titulo i { color: var(--green-main); margin-right: 10px; }

.convenios-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 20px;
  background: white;
  padding: 40px;
  border-radius: 20px;
  border: 1px solid #eee;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  margin-bottom: 50px;
}

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

/* Contenedor circular */
.circle-container {
  width: 90px;
  height: 90px;
  background-color: white;
  border: 1px solid #f0f0f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px auto;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  overflow: hidden;
}

/* Imagen dentro del círculo */
.circle-container img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

.logo-item p { 
  font-size: 0.70rem; /* Ajustado para textos largos */
  font-weight: bold; 
  color: var(--blue-dark); 
  line-height: 1.2;
}

/* Ajuste responsivo */
@media (max-width: 992px) {
  .convenios-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
  .convenios-grid { grid-template-columns: repeat(2, 1fr); }
}




/* mapa de cada lugar */


.ubicacion-section { padding: 80px 0; background-color: #fafafa; }

.ubicacion-layout { display: flex; gap: 50px; align-items: flex-start; }

.lista-oficinas { flex: 1; }

.oficina-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.oficina-item i { color: var(--green-main); margin-top: 5px; font-size: 1.2rem; }

.oficina-item strong { display: block; color: var(--blue-dark); font-size: 1.1rem; }

.oficina-item p { font-size: 0.9rem; color: #666; margin: 0; line-height: 1.4; }

/* Mapa y Caja de contacto */
.mapa-container { 
  flex: 1; 
  background: white; 
  padding: 20px; 
  border-radius: 20px; 
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.mapa-img { width: 100%; border-radius: 15px; margin-bottom: 20px; }

.contacto-box { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding: 10px; 
}

.btn-contacto { 
  background: var(--green-main); 
  color: white; 
  padding: 10px 20px; 
  border: none; 
  border-radius: 5px; 
  cursor: pointer; 
}

/* Ocultar todos los mapas por defecto */
.mapa-box { display: none; }
/* Solo mostrar el que tenga la clase active */
.mapa-box.active { display: block; animation: fadeIn 0.5s; }

.oficina-item { cursor: pointer; transition: 0.3s; }
.oficina-item:hover { background: #f9f9f9; transform: translateX(5px); }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }



/* Selecciona tu logo específicamente */
.header-content .logo {
  height: 100px; /* Ajusta este valor al tamaño que quieras (ej: 70px, 80px) */
  width: auto;   /* Esto mantiene la proporción original y no deforma la imagen */
  display: block; /* Ayuda a controlar mejor el espaciado */
}

/* Asegura que el contenedor del logo sea flexible */
.header-content {
  display: flex;
  align-items: center; /* Mantiene el logo alineado verticalmente con el menú */
  justify-content: space-between; /* Separa logo de menú */
  height: 80px; /* El header debe ser un poco más alto que el logo */
}

html {
  scroll-behavior: smooth;
}


.pensionado-tag {
  display: inline-block;
  padding: 6px 14px; /* Un poco más pequeño que el de bienvenida para que combine */
  background-color: #d5f5d4be; /* Un verde claro más definido */
  color: #029c17; /* Un verde oscuro intenso para la letra */
  
  border-radius: 10px;
  font-weight: 800; /* Letra un poco más gruesa para que se lea mejor */
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#seccion-soluciones {
  font-size: 2.7rem; /* Puedes ajustar este número (ej: 2.5rem, 3.5rem) */
  line-height: 1.2; /* Ajusta la altura de línea para que no se vea apretado */
  margin-bottom: 30px; /* Separación con el párrafo de abajo */
}


/* 1. Estilo para la etiqueta "ESTAMOS UBICADOS" */
.lista-oficinas .tag {
  display: inline-block;
  padding: 8px 16px;
  background-color: #e8f5e9; /* El fondo verde clarito */
  color: var(--green-main);  /* Texto verde oscuro */

  border-radius: 10px;
  font-weight: bold;
  font-size: 0.9rem;
  text-transform: uppercase;
  margin-bottom: 15px; /* Separación con el título */
}

/* 2. Estilo para el título "Estamos cerca de ti" */
.lista-oficinas h2 {
  font-size: 2.8rem; /* Tamaño grande y llamativo */
  line-height: 1.2;
  margin-bottom: 10px;
  color: #333; /* O el color que uses para tus títulos */
}

/* 3. Ajuste para el párrafo si lo necesitas */
.lista-oficinas p {
  font-size: 1.1rem;
  color: #666;
}


/* --- DISEÑO RESPONSIVO PARA CELULARES --- */
@media (max-width: 768px) {
    /* Ocultar el menú largo y el logo en header si es necesario */
    .header-content {
        flex-direction: column;
        text-align: center;
    }

    .nav-menu ul {
        flex-direction: column;
        gap: 10px;
        padding: 10px 0;
    }

    /* Hero Section: Que el formulario quede debajo del texto */
    .hero-layout {
        flex-direction: column;
    }

    .hero-text-content {
        width: 100%;
        text-align: center;
    }

    .hero-form-container {
        width: 100%;
        margin-top: 30px;
    }

    /* Prestamos Section */
    .prestamos-layout {
        flex-direction: column;
    }

    .prestamos-image {
        order: -1; /* Mueve la imagen arriba en móviles */
    }

    /* Grid de Beneficios */
    .beneficios-grid {
        grid-template-columns: 1fr; /* Una sola columna */
    }

    /* Convenios: Ajustar logos */
    .convenios-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 logos por fila */
    }

    /* Ubicación: Mapa debajo de la lista */
    .ubicacion-layout {
        flex-direction: column;
    }

    .mapa-container {
        width: 100%;
        margin-top: 20px;
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
    }
}


img {
    max-width: 130%;
    height: auto;
}


@media (max-width: 768px) {
    /* Ajuste del Header */
    .header-content {
        height: auto; /* Permitir que crezca según el contenido */
        padding: 10px 0;
    }
    
    .logo {
        height: 50px; /* Logo más pequeño en celular para que no estorbe */
        margin-bottom: 10px;
    }

    .nav-menu ul {
        flex-direction: column;
        gap: 8px;
    }

    .call-action {
        margin-top: 10px;
        width: 100%;
        justify-content: center;
    }
}


@media (max-width: 768px) {
    .hero-layout {
        width: 100% !important; /* Forzar ancho total */
        padding: 0 15px !important; /* Padding pequeño para que no toque los bordes */
        flex-direction: column;
    }

    .hero-form-container, .hero-text-content {
        width: 100% !important; /* Que ambos ocupen todo el ancho */
        flex: none;
    }

    .contact-form {
        width: 100% !important; /* Formulario al 100% */
        max-width: none;
        padding: 20px;
    }
    
    /* Asegurar que los inputs no tengan padding horizontal excesivo */
    .contact-form input {
        width: 100%;
        padding: 12px 12px 12px 40px; /* El padding a la izquierda mantiene el icono */
        box-sizing: border-box;
    }
}


@media (max-width: 768px) {
    .hero-section {
        padding: 40px 0; /* Menos padding para que el contenido suba */
        background-size: cover;
        background-position: center; /* Centrar la imagen en celular */
    }
}