/*
Theme Name: Ejercicio1
Theme URI: https://tusitio.com
Author: Jenyfer Nicolas Miguel Álvarez
Description: Tema hecho desde cero para el proyecto 20 Para Mi Casa
Version: 1.0
License: GPLv2 or later
Text Domain: Ejercicio1
*/
:root {
  /* Paleta de colores */
  --green-strong: #b8d185;   /* Verde kima */
  --green-medium: #246256;   /* Verde */ 
  --green-dark: #133e3b;     /* Verde oscuro: botones principales */
  --gray-light: #D9D9D9;     /* Gris claro: fondos alternos */
  --black-strong: #0D0D0D;   /* Negro: texto principal, footer */

  /* Colores extra de apoyo */
  --white: #FFFFFF;
  --text-muted: #667a78;

  /* Espaciado y radios */
  --radius: 12px;
  --max: 1100px;
}



*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'DM Sans', sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}
body {
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
}

/* Header */
header {
  background: var(--green-medium);
  color: var(--white);
  position: sticky;
  top: 0;
  z-index: 100000; /* 🔹 ahora el header está sobre todo */
  border-bottom: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
}

.nav {
  max-width: var(--max);
  margin: auto;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 0.3px;
}

.logo-img {
  height: clamp(50px, 8vw, 60px);
  width: auto;
  display: block;
}

nav a {
  text-decoration: none;
  color: var(--white);
  font-weight: 600;
  margin-left: 18px;
  position: relative;
  transition: color 0.3s ease;
  
}

nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background: var(--green-strong);
  transition: width 0.3s ease;
}

nav a:hover::after {
  width: 100%;
  background: var(--green-strong);
}

/* ---------- Botón Hamburguesa con Tache ---------- */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 22px;
  cursor: pointer;
  position: relative;
  z-index: 10001;
}

/* Barras */
.menu-toggle .bar {
  height: 3px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

/* Tache ✖️ */
.menu-toggle .close {
  position: fixed;
  top: 18px;
  right: 20px;
  font-size: 36px;
  color: #fff;
  font-weight: bold;
  line-height: 1;
  display: none;
  cursor: pointer;
  opacity: 0;
  z-index: 99999 !important; 
  transition: opacity 0.3s ease;
}

/* Cuando el menú está activo */
.menu-toggle.active .bar {
  opacity: 0;
  visibility: 
}
.menu-toggle.active .close {
 display: block;
  opacity: 1;
  pointer-events: auto;
}

/* Mostrar solo en móvil */
@media (max-width: 768px) {
  .menu-toggle {
    display: flex;
  }

  nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    background: rgba(10, 30, 25, 0.97);
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: translateY(-100%);
    transition: transform 0.4s ease;
    z-index: 20000;
  }

  nav.active {
    transform: translateY(0);
  }

  nav a {
    color: #fff;
    font-size: 1.4rem;
    margin: 18px 0;
    text-decoration: none;
    font-weight: 700;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
    transition: transform 0.3s ease, color 0.3s ease;
  }

  nav a:hover {
    color: var(--green-strong);
    transform: scale(1.05);
  }
}

/* En pantallas grandes: oculta el botón */
@media (min-width: 769px) {
  .menu-toggle {
    display: none;
  }
}


/* Animación bounce */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px); /* sube */
  }
  60% {
    transform: translateY(-5px);  /* rebote pequeño */
  }
}

/* Aplica la animación al botón CTA */
.hero-overlay .cta {
  display: inline-block;
  background: var(--green-dark);
  color: #fff;
  padding: 12px 24px;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 8px;
  border: 2px solid var(--green-dark);
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
  
  /* Animación */
  animation: bounce 2s infinite;
}

.hero-overlay .cta:hover {
  background: var(--green-strong);
  color: #fff;
  border-color: var(--green-strong);
  transform: scale(1.05);
  transition: background 0.3s ease, transform 0.3s ease;
} 


/* Hero */
.hero{max-width:var(--max); margin:28px auto; padding:16px 20px; display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:center}
.hero-left h1{font-size:clamp(28px,4vw,44px); margin:0; line-height:1.05}
.lead{color:var(--muted); margin-top:8px}
.cta {
  display: inline-block;
  margin-top: 18px;
  background: var(--green-dark);
  color: #fff;
  padding: 14px 26px;       
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.80rem;          
  border: 2px solid var(--green-dark);
  transition: background 0.3s, color 0.3s, transform 0.2s;
}

.cta:hover {
  transform: translateY(-2px);
}
@media (max-width: 768px) {
  .cta {
    font-size: 1.1rem;
    padding: 16px 24px;
  }
}


/* Hero con Swiper */
.hero-banner,
.hero-banner .swiper,
.hero-banner .swiper-wrapper,
.hero-banner .swiper-slide {
  height: 60vh;  
  min-height: 500px;
}

.hero-slide {
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100vh;
  position: relative; 
}


.hero-overlay {
  background: rgba(0,0,0,0.45); 
  color: #fff;
  padding: 30px 40px;
  border-radius: 12px;
  text-align: center;

  /* Centrado absoluto */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.hero-overlay h1 {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 800;
  margin: 0 0 10px;
}

.hero-overlay h2 {
  font-size: clamp(18px, 3vw, 28px);
  font-weight: 600;
  margin: 0 0 20px;
}

.hero-card {
  background: transparent; 
  box-shadow: none;         
  border-radius: 0;       
  padding: 0;              
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-card img {
  width: 80%;          
  max-width: 280px;    
  height: auto;
  object-fit: contain;   
  display: block;
}

.hero-overlay h2 {
  margin-top: 8px; /* ajusta si quieres más o menos separación del h1 */
  line-height: 1.2; /* compacta las líneas */
}

.hero-overlay h2 p {
  margin: 0;          /* elimina los márgenes por defecto */
  padding: 0;
}

/* ===== Flechas del carrusel hero ===== */
.hero-banner .swiper-button-next,
.hero-banner .swiper-button-prev {
  color: #fff;                 /* color blanco */
  text-shadow: 0 3px 8px rgba(0,0,0,0.5);
  width: 48px;
  height: 48px;
}

.hero-banner .swiper-button-next::after,
.hero-banner .swiper-button-prev::after {
  font-size: 28px;             /* tamaño del ícono */
  font-weight: bold;
}

.hero-banner .swiper-button-next {
  right: 25px;
}

.hero-banner .swiper-button-prev {
  left: 25px;
}

/* Opcional: efecto hover */
.hero-banner .swiper-button-next:hover,
.hero-banner .swiper-button-prev:hover {
  transform: scale(1.15);
  transition: transform 0.2s ease;
}


/* Sections */
.section{max-width:var(--max); margin:36px auto; padding:0 20px}
.two-cols{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:center}
.hero-figure{width:100%; height:220px; object-fit:cover; border-radius:10px}s
.muted{color:var(--muted)}

/* Ajuste del logo en el hero */
.hero-card .logo-img {
  width: 120px;      /* 👈 Cambia este valor para hacerlo más chico (por ejemplo 90px o 100px) */
  height: auto;
  display: block;
  margin: 0 auto;    /* centra el logo dentro de la tarjeta */
}



/* ==========================
   Sección SOBRE
   ========================== */
.expanded-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr; /* texto izquierda, imagen derecha */
  gap: 32px;
  align-items: center;
}

.expanded-left {
  padding-right: 8px;
}

.expanded-title {
  margin: 0 0 12px;
  font-size: clamp(22px, 2.6vw, 30px);
  color: var(--ink-2);
  font-weight: 700;
}

.expanded-title span {
  color: var(--green-dark);
}

.expanded-right {
  position: relative;
  width: 100%;
  height: 100%;
}

.expanded-full-img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* Mantiene proporciones sin deformar */
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* ===== Íconos dentro de la sección ===== */
.sobre-icons {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: nowrap;
  margin-top: 20px;
}

.sobre-item {
  flex: 1;
  background: #f7fbfa;
  border-radius: 14px;
  padding: 18px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.sobre-item:hover {
  transform: translateY(-5px);
}

.sobre-item img {
  width: 55px;
  height: 55px;
  margin-bottom: 10px;
}

/* ==========================
   RESPONSIVO
   ========================== */

/* 🔹 Tablets (pantallas medianas) */
@media (max-width: 992px) {
  .expanded-grid {
    grid-template-columns: 1fr; /* Apila el texto y la imagen */
    gap: 28px;
  }

  .expanded-right {
    order: -1; /* Muestra la imagen arriba en móviles/tablets */
  }

  .expanded-full-img {
    max-height: 380px;
    object-fit: cover;
  }

  .sobre-icons {
    flex-wrap: wrap; /* permite que se acomoden en 2 filas si no caben */
    justify-content: center;
    gap: 16px;
  }

  .sobre-item {
    flex: 1 1 calc(45% - 10px);
  }
}
/* ===== Justificar solo el texto general de la sección SOBRE ===== */
#sobre p {
  text-align: justify;
  text-justify: inter-word; /* mejora la distribución entre palabras */
}

/* 🔹 Excepción: los textos dentro de las tarjetas NO se justifican */
.sobre-item p {
  text-align: center;
  text-justify: auto;
}


/* 🔹 Móviles pequeños */
@media (max-width: 600px) {
  .expanded-full-img {
    max-height: 300px;
  }

  .sobre-item {
    flex: 1 1 100%;
  }

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

  .expanded-left p {
    text-align: justify;
  }
}


/* ===========================
   HERO SOLO PARA HOME
   =========================== */
.hero-home {
  grid-template-columns: 1.2fr 0.8fr;
  margin: 0 auto;
  padding: 60px 20px 20px; /* 🔹 menos espacio inferior */
}

.hero-home .hero-left h1 {
  font-size: clamp(32px, 4vw, 46px);
  color: var(--green-dark);
  font-weight: 900;
  margin-bottom: 10px;
}

.hero-home .lead {
  font-size: 1.15rem;
  line-height: 1.7;
  color: #333;
  max-width: 520px;
}

.hero-home .lead strong {
  color: var(--green-strong);
  font-weight: 800;
}

/* Logo del hero */
.hero-home .logo-img {
  max-width: 220px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Ajuste responsive */
@media (max-width: 768px) {
  .hero-home {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 40px 20px 10px;
  }

  .hero-home .logo-img {
    margin-top: 20px;
  }
}


/* ===========================
   SECCIÓN PASOS HOME
   =========================== */
.pasos-home {
  background: #fff;
  padding: 80px 20px;
  text-align: center;
}

.pasos-container {
  max-width: var(--max);
  margin: 0 auto;
}

.pasos-home h2 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--green-dark);
  margin-bottom: 10px;
}

.pasos-home h2 span {
  color: var(--green-strong);
}

.pasos-intro {
  max-width: 620px;
  margin: 0 auto 40px;
  color: #333;
  font-size: 1.1rem;
  line-height: 1.6;
}

/* === GRID === */
.pasos-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
}

/* === TARJETA === */
.paso-card {
  background: #E7F2EE; /* 🌿 Verde claro más neutral (nuevo) */
  border: 2px solid #246458; /* Verde institucional */
  border-radius: 16px;
  padding: 32px 24px;
  width: 280px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.05);
  transition: all 0.35s ease, box-shadow 0.4s ease, border-color 0.3s ease;
}

/* Brillo animado */
.paso-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.25) 0%, transparent 70%);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.4s ease, transform 0.4s ease;
}


/* Hover: se eleva y cambia de color (ahora azul oscuro) */
.paso-card:hover {
  transform: translateY(-8px) scale(1.02);
  background: #133B5E; /* 💙 Azul institucional */
  border-color: #0F304A; /* Azul más profundo */
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12);
  color: #fff;
}

.paso-card:hover::before {
  opacity: 1;
  transform: scale(1);
}

/* Iconos y texto en hover */
.paso-card:hover .paso-icon,
.paso-card:hover h3,
.paso-card:hover p {
  color: #fff;
}

/* === ICONO === */
.paso-icon {
  font-size: 2.5rem;
  margin-bottom: 14px;
  color: #133B5E; /* Azul oscuro en lugar de verde */
}

/* === TÍTULO === */
.paso-card h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
}

/* === TEXTO === */
.paso-card p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #1C3D4E; /* Azul-grisáceo para contraste suave */
}


/* Botón principal */
.btn-principal {
  display: inline-block;
  position: relative;
  overflow: hidden;
  padding: 16px 44px;
  background: #133B5E; /* azul institucional */
  color: #fff;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  font-size: 1.5rem;
  transition: all 0.3s ease;
}

/* Texto dentro del botón */
.btn-principal span {
  position: relative;
  z-index: 2;
}

/* Efecto de brillo animado */
.btn-principal::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.6),
    transparent
  );
  transition: all 0.6s ease;
  border-radius: 50px;
  z-index: 1;
}

.btn-principal:hover::before {
  left: 100%;
}

.btn-principal:hover {
  background: #246458; /* verde institucional al pasar el mouse */
  border-color: #FFFFFF;
  transform: scale(1.05);
}

/* === CONTENEDOR DEL BOTÓN === */
.pasos-boton {
  margin-top: 80px; /* 🔹 separa más el botón de las tarjetas */
  text-align: center;
  position: relative;
  transition: margin-top 0.4s ease;
}
@media (max-width: 768px) {
  .btn-principal {
    font-size: 1.15rem;
    padding: 16px 40px;
  }
}




/* === RESPONSIVE === */
@media (max-width: 768px) {
  .pasos-grid {
    flex-direction: column;
    align-items: center;
  }
  
  /* ===== Animación de entrada tipo fade-up (AOS) ===== */
[data-aos] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-aos].aos-animate {
  opacity: 1;
  transform: translateY(0);
}


  .paso-card {
    width: 90%;
    max-width: 340px;
  }

  .btn-principal {
    width: 80%;
  }
}

/* ===== Fila inferior: imagen izquierda y texto derecha ===== */
.more-two-cols {
  display: flex;
  align-items: center;
  gap: 40px; /* más separación visual */
  max-width: 1100px;
  margin: 0 auto;
  padding: 50px 20px; /* más aire arriba y abajo */
}

.more-left {
  flex: 0 0 45%; /* Imagen MÁS GRANDE (antes 35%) */
}

.more-left-img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.more-right {
  flex: 0 0 55%; /* Texto ajustado a proporción */
  font-size: 1.2rem; /* un poquito más grande */
  line-height: 1.75;
  text-align: justify;
}


/* ===== Responsivo real para la sección "more-two-cols" ===== */
@media (max-width: 1024px) {
  .more-two-cols {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .more-left-img {
    max-width: 90%;
    margin: 0 auto;
    display: block;
  }

  .more-right {
    padding: 18px 14px;
  }
}

@media (max-width: 600px) {
  .more-two-cols {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .more-right {
    font-size: 0.95rem;
    padding: 16px 12px;
  }
}

/* ===== Responsive ===== */

/* 🔹 Tablets medianas */
@media (max-width: 1024px) {
  .more-two-cols {
    grid-template-columns: 1fr; /* apila imagen y texto */
    gap: 24px;
  }

  .more-left-img {
    max-width: 90%;
    margin: 0 auto;
  }

  .more-right {
    padding: 18px 14px;
  }

  .galeria-pequena {
    margin-top: 24px;
  }

  .galeria-fotos {
    flex-wrap: wrap;
  }

  .foto-item {
    flex: 1 1 calc(50% - 8px);
  }
}

/* 🔹 Móviles pequeños */
@media (max-width: 600px) {
  .more-two-cols {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .more-right {
    font-size: 0.95rem;
    padding: 16px 12px;
  }

  .galeria-fotos {
    flex-direction: column;
  }

  .foto-item {
    flex: 1 1 100%;
  }
}

/* Beneficios */
.section-title {
  text-align: center;
  margin-bottom: 28px;
  font-size: 28px;
  font-weight: 700;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  max-width: var(--max);
  margin: auto;
  padding: 0 20px;
}


.benefit-img {
  height: 100px;         
  width: auto;        
  object-fit: contain;
  display: block;
  margin: 0 auto;        
  background: #fff;
  border-radius: 10px;
  padding: 10px;
}

.benefit-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; 
  text-align: center;
  gap: 12px; 
  min-height: 220px;
}

.benefit-card img {
  height: 80px;
  width: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Flechas del carrusel de beneficios (sin fondo circular) */
.beneficiosSwiper .swiper-button-next,
.beneficiosSwiper .swiper-button-prev {
  color: var(--green-dark);     /* solo el color de la flecha */
  background: none;             /* quita el círculo */
  box-shadow: none;             /* sin sombra */
  width: auto;
  height: auto;
  top: 40%;                     /* súbelas un poco */
  transform: translateY(-50%);
  transition: all 0.3s ease;
}

.beneficiosSwiper .swiper-button-next:hover,
.beneficiosSwiper .swiper-button-prev:hover {
  color: var(--green-medium);   /* un verde más claro al pasar el mouse */
  transform: translateY(-50%) scale(1.2);
}

.beneficiosSwiper .swiper-button-next::after,
.beneficiosSwiper .swiper-button-prev::after {
  font-size: 24px;              /* tamaño de la flecha */
  font-weight: bold;
}


/* ===========================
   SECCIÓN NÚMEROS / ESTADÍSTICAS
=========================== */
.stats-section {
  background: #f8fbfc;
  padding: 90px 20px;
  text-align: center;
}

.stats-section h2 {
  font-size: 2rem;
  font-weight: 800;
  color: #133B5E;
  margin-bottom: 50px;
}

/* Contenedor principal */
.stats-container {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}

/* Tarjetas individuales */
.stat-card {
  background: #ffffff;
  border: 2px solid #133B5E;
  border-radius: 18px;
  padding: 36px 28px;
  width: 260px;
  box-shadow: 0 8px 18px rgba(19, 59, 94, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(19, 59, 94, 0.2);
}

/* Iconos */
.stat-icon {
  font-size: 2.8rem;
  color: #133B5E;
  margin-bottom: 12px;
}

/* Número principal */
.stat-number {
  font-size: 2.8rem;
  font-weight: 800;
  color: #133B5E;
  margin-bottom: 6px;
  line-height: 1;
  transition: color 0.3s ease;
}

/* Pequeños subtítulos */
.stat-label {
  color: #246458;
  font-weight: 500;
  font-size: 1rem;
  margin-bottom: 8px;
}

.stat-sub {
  color: #1C3D4E;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.stat-sub-label {
  color: #133B5E;
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: -6px;
}

.stat-list {
  text-align: left;
  margin: 10px auto 0;
  padding: 0;
  list-style: none;
  color: #133B5E;
  font-size: 0.95rem;
}

.stat-list li {
  margin: 4px 0;
  padding-left: 4px;
  border-left: 3px solid #246458;
}

.stat-number.small {
  font-size: 1.6rem;
  color: #246458;
}

/* Responsive */
@media (max-width: 768px) {
  .stats-container {
    flex-direction: column;
    align-items: center;
  }
  .stat-card {
    width: 90%;
    max-width: 340px;
  }
}

/* === Animación de pulso al finalizar === */
@keyframes pulseGlow {
  0% {
    text-shadow: 0 0 0 rgba(36,100,88,0);
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 12px rgba(36,100,88,0.6), 0 0 20px rgba(19,59,94,0.4);
    transform: scale(1.05);
  }
  100% {
    text-shadow: 0 0 0 rgba(36,100,88,0);
    transform: scale(1);
  }
}

.stat-number.glow {
  animation: pulseGlow 1.2s ease-out;
}

/* ===========================
   SECCIÓN IMPACTO / NÚMEROS (más compacta)
=========================== */
.impacto-section {
  position: relative;
  background: 
    linear-gradient(180deg, rgba(19, 59, 94, 0.7) 0%, rgba(36, 100, 88, 0.7) 100%),
    url('https://ubu.cma.mybluehost.me/website_bca47f0c/wp-content/themes/Ejercicio1/assets/img/fondocasas1.png') center/cover no-repeat;
  width: 100%;
  padding: 60px 0;              /* 🔹 antes 100px → ahora más bajo */
  color: #fff;
  text-align: center;
  overflow: hidden;
}

/* Contenedor centrado y angosto */
.impacto-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Título */
.impacto-section h2 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 30px;
  color: #fff;
}

/* Grid de ítems */
.impacto-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 50px;
}

/* Cada ítem */
.impacto-item {
  flex: 1 1 200px;
  max-width: 220px;
  transition: transform 0.3s ease;
}

.impacto-item:hover {
  transform: translateY(-6px);
}

/* Íconos */
.impacto-item i {
  font-size: 2.4rem;
  color: #C3E2DD;
  margin-bottom: 10px;
  transition: transform 0.3s ease;
}

.impacto-item:hover i {
  transform: scale(1.1);
}

/* Números animados */
.counter {
  font-size: 2.6rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
  text-shadow: 0 0 8px rgba(255,255,255,0.25);
}

.counter.glow {
  animation: pulseGlow 1.4s ease-out;
}

@keyframes pulseGlow {
  0% { text-shadow: 0 0 0 rgba(255,255,255,0); transform: scale(1); }
  50% { text-shadow: 0 0 14px rgba(255,255,255,0.8), 0 0 24px rgba(255,255,255,0.4); transform: scale(1.05); }
  100% { text-shadow: 0 0 0 rgba(255,255,255,0); transform: scale(1); }
}

/* Texto */
.impacto-item p {
  font-size: 0.95rem;
  font-weight: 500;
  color: #EAF3F1;
  line-height: 1.4;
}

.sub {
  display: block;
  margin-top: 4px;
  font-size: 0.85rem;
  color: #C3E2DD;
}

/* === RESPONSIVE === */
@media (max-width: 900px) {
  .impacto-section {
    padding: 50px 0;   /* 🔹 más bajo también en móvil */
  }

  .impacto-grid {
    flex-direction: column;
    align-items: center;
    gap: 35px;
  }

  .counter {
    font-size: 2.2rem;
  }
}


/* =============================
   Testimonios
============================= */
.testimonials {
  background: var(--green-dark);
  color: #e8fffb;
  padding: 60px 0;
}

.t-wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.t-title {
  font-size: 28px;
  margin-bottom: 40px;
  font-weight: 700;
}

/* === Contenedor horizontal === */
.t-row {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 24px;
  flex-wrap: nowrap; /* 3 horizontales */
}

/* === Tarjeta === */
.t-item {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  padding: 24px;
  width: 30%;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: flex-start;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.t-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* === Imagen circular pequeña === */
.avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 16px;
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* === Texto === */
.quote {
  font-style: italic;
  line-height: 1.5;
  color: #e8fffb;
  margin-bottom: 12px;
  font-size: 16px;
}

/* === Nombre === */
.name {
  font-weight: 600;
  color: #b8d185;
  font-size: 16px;
  margin-top: auto;
}

/* === Responsivo === */
@media (max-width: 1024px) {
  .t-row {
    flex-wrap: wrap;
  }
  .t-item {
    width: 45%;
  }
}

@media (max-width: 768px) {
  .t-row {
    flex-wrap: wrap;
  }
  .t-item {
    width: 90%;
  }
}
.testimonios-preview {
  position: relative;
  background-image: url('https://ubu.cma.mybluehost.me/website_bca47f0c/wp-content/themes/Ejercicio1/assets/img/fondocasas1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 40px 0; /* Un poco de espacio arriba y abajo */
}

.video-thumb {
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-thumb video {
  width: 45%;           /* 👈 reduce el tamaño del video */
  max-width: 600px;     /* límite superior */
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}




/* Botón circular tipo play */
.btn-reproducir {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(19, 62, 59, 0.85);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  font-size: 1.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.btn-reproducir:hover {
  background: #1f5c52;
  transform: translate(-50%, -50%) scale(1.1);
}

/* Ocultar el botón mientras se reproduce */
.video-thumb.playing .btn-reproducir {
  opacity: 0;
  pointer-events: none;
}

/* ===== Footer ===== */
footer {
  background: var(--green-strong);  /* verde principal */
  color: #0D0D0D;                     /* texto blanco para mejor contraste */
  margin-top: 0;
  width: 100%;
  max-width: 100% !important; /* 🔥 FORZAMOS ANCHO COMPLETO */
  padding: 0;
}

.footer-grid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 22px 20px;
  display: grid;
  grid-template-columns: 1.4fr 1.1fr 1.1fr 0.8fr 0.8fr;
  gap: 30px; /* ajusta si quieres más o menos espacio uniforme */
}


.foot-title {
  font-weight: 800;
  margin-bottom: 8px;
  color: #0D0D0D;
}

/* Enlaces del footer */
.foot-col a {
  display: block;
  color: #0D0D0D;
  text-decoration: none;
  padding: 6px 0;
  transition: color 0.3s ease;
}

/* Hover en enlaces → verde oscuro */
.foot-col a:hover {
  color: var(--white);
}

/* Barra inferior (copyright) */
.copyright-bar {
  background: var(--green-dark);   /* tono más oscuro */
  text-align: center;
  padding: 12px 20px;
}

.copyright-bar p {
  margin: 0;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
}
.social-icons {
  display: flex;
  flex-direction: column; /* 👈 siempre vertical */
  gap: 1px; /* espacio entre íconos */
  align-items: flex-start; /* alineados a la izquierda */
}

.social-icons a {
  color: #000; /* 👈 color negro */
  font-size: 20px; /* tamaño de iconos */
  transition: transform 0.3s ease, color 0.3s ease;
}

.social-icons a:hover {
  transform: scale(1.2); /* pequeño zoom */
  color: var(--white); 
}

/* ===== Accesos Rápidos en dos columnas ===== */
.accesos-dos-columnas .accesos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 🔹 Dos columnas */
  gap: 12px 20px; /* 🔹 Espacio entre filas y columnas */
}

.accesos-dos-columnas a {
  display: block;
  color: #0D0D0D;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}

.accesos-dos-columnas a:hover {
  color: var(--white);
}

/* 🔹 En pantallas pequeñas, vuelve a una sola columna */
@media (max-width: 700px) {
  .accesos-dos-columnas .accesos-grid {
    grid-template-columns: 1fr;
  }
}




/* Responsive */
@media (max-width:800px){
  .footer-grid {
    grid-template-columns:1fr 1fr;
  }
}


@media (max-width:740px){
  .hero-card { padding:8px }
  .footer-grid { grid-template-columns:1fr }
}



  .sobre-fotos {
    flex-direction: column; /* fotos en columna */
  }



.hero-img {
  width: 100%;
  height: auto;    
  border-radius: 10px;
  display: block;
}


.small{font-size:.9rem; color:var(--muted)}


/* ===== HERO SOBRE NOSOTROS ===== */
.sobre-hero {
  position: relative;
  background: 
    linear-gradient(180deg, rgba(19,59,94,0.55), rgba(36,100,88,0.55)),
    url('<?php echo get_template_directory_uri(); ?>/assets/img/fondo6new.jpg');
  background-size: cover; /* ✅ llena el fondo sin distorsionar */
  background-position: center center; /* ✅ centra la imagen */
  background-repeat: no-repeat;
  height: 60vh; /* ✅ altura moderada */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}

/* Texto del hero */
.sobre-hero h1 {
  font-size: 2.8rem;
  font-weight: 800;
  margin: 0;
  text-align: center;
  color: #fff;
  text-shadow: 0 3px 8px rgba(0,0,0,0.4); /* 💫 da contraste sin recuadro */
}


@media (max-width: 768px) {
  .sobre-hero {
    height: 45vh;
    background-attachment: scroll;
  }
  .sobre-hero h1 {
    font-size: 2rem;
    padding: 14px 22px;
  }
}


/* Intro */
.sobre-container {
  max-width: var(--max);
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px;
  align-items: center;
  margin: 80px auto;
  padding: 0 20px;
}
.sobre-text p { margin-bottom: 18px; color: #333; font-size: 1.05rem; }
.sobre-img img { width: 100%; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.1); }

/* ===== SECCIÓN MISIÓN Y VISIÓN ===== */
.mv-section {
  background: #f5faf9;
  padding: 60px 20px;
  text-align: center;
}

.mv-container {
  max-width: var(--max);
  margin: 0 auto;
}

.mv-container h2 {
  color: #133B5E;
  font-size: 2rem;
  margin-bottom: 40px;
  font-weight: 800;
}

/* ===== Justificar texto en SOBRE-INTRO ===== */
.sobre-intro p {
  text-align: justify;
  text-justify: inter-word;
}

/* ===== Justificar texto en MISIÓN y VISIÓN ===== */
.mv-section p {
  text-align: justify;
  text-justify: inter-word;
}


/* === GRID EN DOS COLUMNAS === */
.mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: stretch;
  justify-content: center;
}

/* === TARJETAS === */
.mv-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #fff;
  border: 2px solid #246458;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  transition: all 0.35s ease;
  text-align: left;
  height: 100%;
  color: #133B5E;
}

/* Íconos */
.mv-card i {
  font-size: 2.6rem;
  flex-shrink: 0;
  color: #246458;
  transition: color 0.3s ease;
}

/* Texto */
.mv-card h3 {
  font-size: 1.3rem;
  margin-bottom: 8px;
  font-weight: 700;
}

.mv-card p {
  margin: 0;
  line-height: 1.6;
  font-size: 1.05rem;
  color: #333;
}

/* === HOVER: se pinta azul oscuro === */
.mv-card:hover {
  background: #133B5E;
  border-color: #133B5E;
  color: #fff;
  transform: translateY(-6px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}

.mv-card:hover i {
  color: #fff;
}

.mv-card:hover p {
  color: #fff;
}

/* === ALINEACIÓN === */
.mv-card:first-child {
  justify-self: end; /* Izquierda */
}

.mv-card:last-child {
  justify-self: start; /* Derecha */
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .mv-grid {
    grid-template-columns: 1fr;
  }

  .mv-card {
    justify-self: center;
    flex-direction: column;
    text-align: center;
    width: 90%;
  }

  .mv-card i {
    margin-bottom: 10px;
  }
}

/* ===== GALERÍA HORIZONTAL MEJORADA (con efecto 3D) ===== */
.mv-gallery {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-top: 30px;
  margin-bottom: 60px;
  padding: 0 40px;
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
  perspective: 1000px; /* 🔹 Necesario para el efecto 3D */
}

.mv-gallery img {
  width: 33.333%;
  height: 280px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  transition: transform 0.6s ease, box-shadow 0.6s ease, filter 0.6s ease;
  transform-origin: center center;
  will-change: transform, filter;
}

/* 🔹 Efecto 3D al pasar el mouse */
.mv-gallery img:hover {
  transform: perspective(800px) scale(1.1) rotateX(3deg) rotateY(-3deg);
  box-shadow: 0 18px 28px rgba(0, 0, 0, 0.2);
  filter: brightness(1.1) contrast(1.05);
  z-index: 3;
}

/* 🔹 Animación AOS suave (ya activada en tu JS) */
.mv-gallery img[data-aos] {
  opacity: 0;
  transform: scale(0.95);
  transition: all 0.8s ease;
}
.mv-gallery img.aos-animate {
  opacity: 1;
  transform: scale(1);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .mv-gallery {
    flex-direction: column;
    gap: 16px;
    padding: 0 20px;
  }

  .mv-gallery img {
    width: 100%;
    height: 220px;
  }
}

/* ===== SECCIÓN OBJETIVO — FORZAR FULL WIDTH ===== */
section.sobre-objetivo {
  position: relative;
  background: linear-gradient(180deg, #133B5E 0%, #246458 100%);
  color: #fff;
  text-align: center;
  padding: 80px 20px;
  border-radius: 0;
  box-sizing: border-box;
  
  /* 🔹 Truco para romper el contenedor central */
  width: 100vw;
  max-width: 100vw !important;
  margin-left: 50%;
  transform: translateX(-50%);
}

.sobre-objetivo-content {
  max-width: 800px;
  margin: 0 auto;
}

.sobre-objetivo h2 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 20px;
}

.sobre-objetivo p {
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 16px;
}

/* Responsive */
@media (max-width: 768px) {
  section.sobre-objetivo {
    padding: 60px 16px;
  }
  .sobre-objetivo h2 {
    font-size: 1.7rem;
  }
  .sobre-objetivo p {
    font-size: 1rem;
  }
}


/* FAQ */
.faq-section { background: #f9fdfc; padding: 80px 20px; }
.faq-title { text-align: center; color: #133B5E; font-size: 2rem; margin-bottom: 40px; font-weight: 800; }
.faq-item { border-bottom: 2px solid #e0f2ee; margin-bottom: 14px; }
.faq-question {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font-size: 1.05rem;
  padding: 14px;
  cursor: pointer;
  color: #133B5E;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  transition: color 0.3s ease;
}
.faq-question:hover { color: #246458; }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  color: #444;
  padding: 0 14px;
}
.faq-item.active .faq-answer {
  max-height: 200px;
  padding: 10px 14px 14px;
}
.faq-icon { font-weight: 800; }
.faq-item.active .faq-icon { transform: rotate(45deg); color: #246458; transition: 0.3s; }

/* Responsive */
@media (max-width: 900px) {
  .sobre-container { grid-template-columns: 1fr; text-align: center; }
  .sobre-img img { max-width: 90%; margin: 0 auto; }
  .mv-grid { flex-direction: column; }
  .gallery-grid { flex-direction: column; }
}


/* Hero aplicar */
.apply-hero {
  height: 50vh;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.apply-overlay {
  background: rgba(0,0,0,0.45);
  color: #fff;
  padding: 30px 40px;
  border-radius: 12px;
  text-align: center;
}

.apply-overlay h1 {
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 700;
  margin: 0;
}
/* ===== HERO SOBRE NOSOTROS ===== */
.sobre-hero {
  position: relative;
  width: 100%;
  height: 65vh;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.sobre-hero-overlay {
  background: rgba(0, 0, 0, 0.45); /* 🔹 Fondo semitransparente para contraste */
  padding: 40px 60px;
  border-radius: 12px;
  text-align: center;
  color: #fff;
  max-width: 800px;
}

.sobre-hero h1 {
  font-size: 2.8rem;
  font-weight: 800;
  margin: 0;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
}

/* 🔹 Ajuste responsive */
@media (max-width: 768px) {
  .sobre-hero {
    height: 50vh;
    background-attachment: scroll;
  }
  .sobre-hero-overlay {
    padding: 24px 30px;
  }
  .sobre-hero h1 {
    font-size: 1.9rem;
  }
}


/* ===== Preguntas Frecuentes (Acordeón) ===== */
.faq-section {
  padding: 60px 20px;
  background-color: #f8f9f8;
}

.faq-title {
  color: var(--green-dark);
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
}

.faq-item {
  max-width: 900px;
  margin: 0 auto 15px auto;
  background: #fff;
  border-radius: 12px;
  border-left: 5px solid var(--green-dark);
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  outline: none;
  padding: 20px 25px;
  font-size: 1.25rem; /* <-- AUMENTADO */
  color: var(--green-dark);
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background 0.3s;
}

.faq-question:hover {
  background-color: rgba(184, 209, 133, 0.15);
}

.faq-icon {
  font-size: 1.4rem;
  font-weight: bold;
  transition: transform 0.3s;
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
}

/* Animación suave al abrir el acordeón */
.faq-answer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 25px;
  color: #333;
  line-height: 1.6;
  transition: all 0.4s ease;
}

.faq-item.active .faq-answer {
  max-height: 250px; /* o ajusta según la cantidad de texto */
  opacity: 1;
  padding: 15px 25px 25px 25px;
}



/* ===== Ajuste de texto e imágenes para secciones tipo "Cómo aplicar" ===== */
.aplicar-section {
  max-width: var(--max);
  margin: 40px auto;
  padding: 20px;
}

.aplicar-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr; /* texto más ancho que la imagen */
  gap: 20px;
  align-items: center;
  margin-bottom: 40px;
}

.aplicar-grid img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Alineación y formato de texto */
.aplicar-section p {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 10px;
}

.aplicar-section ul {
  margin-top: 8px;
  padding-left: 20px;
}

.aplicar-section li {
  margin-bottom: 6px;
  line-height: 1.6;
}

/* Títulos */
.aplicar-section h3 {
  color: var(--green-dark);
  font-weight: 700;
  margin-bottom: 12px;
}

/* Versión responsiva */
@media (max-width: 900px) {
  .aplicar-grid {
    grid-template-columns: 1fr; /* se apilan en pantallas pequeñas */
  }
  .aplicar-grid img {
    max-width: 90%;
    margin: 10px auto;
    display: block;
  }
}

/* ===== SECCIÓN CÓMO APLICAR ===== */
.aplicar-section {
  background: #fff;
  padding: 80px 20px;
  text-align: center;
  overflow: hidden;
}

/* Intro */
.aplicar-intro {
  max-width: 800px;
  margin: 0 auto 40px auto;
}

.aplicar-intro h2 {
  color: var(--green-dark);
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 12px;
}

.aplicar-intro p {
  color: #333;
  font-size: 1.1rem;
}

/* Imagen principal */
.aplicar-hero img {
  width: 100%;
  max-width: 1000px;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  margin: 40px auto;
  display: block;
}



/* ===== REQUISITOS ===== */
.apply-requisitos {
  background: #b8d185; /* Fondo verde */
  padding: 40px 20px;
  border-radius: 16px;
  max-width: 1100px;
  margin: 40px auto;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.requisitos-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}

.requisitos-texto {
  flex: 1;
  min-width: 280px;
}

.requisitos-texto h2 {
  color: var(--green-dark);
  font-size: 1.8rem;
  margin-bottom: 16px;
}

.requisitos-texto ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.requisitos-texto li {
  margin-bottom: 12px;
  line-height: 1.6;
  font-size: 1.5rem; /* ← más grande */
}


.requisitos-texto li strong {
  color: var(--green-dark);
}

/* Imagen a la derecha */
.requisitos-imagen {
  flex: 0 0 260px;
  display: flex;
  justify-content: center;
}

.requisitos-imagen img {
  width: 100%;
  max-width: 260px;  /* 🔹 límite de tamaño */
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}

.requisitos-imagen img:hover {
  transform: scale(1.05);
}

/* RESPONSIVO */
@media (max-width: 800px) {
  .requisitos-content {
    flex-direction: column;
    text-align: center;
  }

  .requisitos-imagen {
    margin-top: 20px;
  }

  .requisitos-imagen img {
    max-width: 80%;
  }
}


/* Contacto */
/* --- Ajuste del formulario junto al mapa --- */
.two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

/* Cada campo uno debajo del otro */
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1.5rem;     /* antes 0.95rem */
  font-family: inherit;
}
.contact-form label {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1c1c1c;
  margin-top: 4px;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  font-size: 1.5rem;
  opacity: 0.75;
}


/* Botón bonito verde */
.contact-form button,
.contact-form input[type="submit"] {
  width: 100%;
  background: var(--green-dark);
  color: #fff;
  font-weight: 700;
  padding: 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}

.contact-form button:hover,
.contact-form input[type="submit"]:hover {
  background: var(--green-dark);
  transform: scale(1.02);
}

/* === Botón Enviar === */
.btn-enviar {
  background: var(--green-dark, #133e3b);
  color: #fff;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
.btn-enviar:hover {
  background: #236a61;
}

/* Leaflet: texto del popup/tooltip (Estas aqui) */
.leaflet-popup-content,
.leaflet-tooltip {
  font-size: 1.5rem !important;
  line-height: 1.4;
}

.leaflet-popup-content-wrapper {
  border-radius: 10px;
}


/* === Mensaje de resultado === */
.mensaje-exito {
  background-color: #b8d185;
  color: #133e3b;
  padding: 12px 16px;
  border-radius: 10px;
  margin-top: 15px;
  text-align: center;
  font-weight: 600;
  animation: aparecer 0.4s ease-in-out;
}

@keyframes aparecer {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}


/* Mapa responsivo */
#map {
  width: 100%;
  height: 400px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

/* En pantallas pequeñas: formulario arriba, mapa abajo */
@media (max-width: 800px) {
  .two-cols {
    grid-template-columns: 1fr;
  }
  
  .two-cols {
    grid-template-columns: 1fr;
  }

  .contact-form input,
  .contact-form textarea {
    font-size: 1.1rem;
    padding: 16px;
  }

  .contact-form label {
    font-size: 1.05rem;
  }

  .leaflet-popup-content,
  .leaflet-tooltip {
    font-size: 1.05rem !important;
  }
}



/* ======================
   Estilos Calculadora Unificada y Responsiva
   ====================== */
.calc-section {
  max-width: var(--max);
  margin: 40px auto;
  padding: 20px;
  text-align: center;
}

.calc-intro {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 24px;
}

.calc-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
  margin-bottom: 20px;
}

.calc-controls,
.calc-results {
  background: #fff;
  padding: 24px;
  border-radius: 14px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
  text-align: left;
}

.calc-controls h3,
.calc-results h3 {
  color: var(--green-dark);
  margin-bottom: 16px;
  font-size: 1.3rem;
}

.calc-controls label {
  font-weight: 600;
  margin-top: 12px;
  display: block;
}

.calc-controls select {
  width: 100%;
  padding: 10px;
  margin-top: 6px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

.calc-controls button {
  width: 100%;
  margin-top: 20px;
  padding: 12px;
  background: var(--green-dark);
  color: #fff;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.3s;
}

.calc-controls button:hover {
  background: var(--green-strong);
}

.calc-results p {
  margin: 10px 0;
  font-size: 1rem;
}

.calc-message {
  margin-top: 18px;
  font-weight: 600;
  color: var(--green-dark);
  background: rgba(3, 140, 62, 0.08);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}

.calc-note {
  font-size: 0.95rem;
  color: #444;
  margin-top: 20px;
  text-align: center;
  font-style: italic;
}

/* ======================
    Responsivo sin alterar diseño
   ====================== */
@media (max-width: 900px) {
  .calc-wrap {
    grid-template-columns: 1fr;   
    gap: 20px;
  }

  .calc-controls,
  .calc-results {
    text-align: center;          
    width: 100%;
  }

  .calc-controls label {
    text-align: left;
  }

  .calc-controls select {
    max-width: 300px;
    margin: 0 auto;
  }

  .calc-controls button {
    max-width: 300px;
    margin: 20px auto 0;
  }
}

@media (max-width: 480px) {
  .calc-section {
    padding: 10px;
  }

  .calc-controls,
  .calc-results {
    padding: 18px;
  }

  .calc-controls h3,
  .calc-results h3 {
    font-size: 1.2rem;
  }

  .calc-intro {
    font-size: 1rem;
  }
}
/* ==========================
   Carrusel Tips de Ahorro (3 por vista, sin puntos)
   ========================== */

.tips-ahorro {
  width: 100%;
  background: transparent;
  padding: 90px 0;
  text-align: center;
  position: relative;
}

.tips-titulo {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--green-dark);
  margin-bottom: 60px;
}

/* Swiper contenedor */
.tipsSwiper {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px;
  background: transparent !important;
  overflow: hidden;
  position: relative;
}

/* Tarjetas */
.tip-card {
  background: #fff;
  border-radius: 20px;
  padding: 40px 32px;
  text-align: left;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transition: all 0.4s ease;
  height: 100%;
}

.tip-card:hover {
  background: #e9f5f0;
  transform: translateY(-10px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.15);
}

.tip-card h3 {
  font-size: 1.3rem;
  color: var(--green-strong);
  margin-bottom: 10px;
  transition: color 0.3s ease;
}

.tip-card:hover h3 {
  color: var(--green-dark);
}

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

/* Iconos circulares */
.tip-icon {
  background: var(--green-strong);
  color: white;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: transform 0.6s ease;
}

.tip-card:hover .tip-icon {
  transform: rotate(360deg) scale(1.1);
  background: var(--green-dark);
}

/* ==========================
   FLECHAS PLANAS VERDES (sin círculos)
   ========================== */
.tipsSwiper .swiper-button-prev,
.tipsSwiper .swiper-button-next {
  background: none !important;       /* elimina el círculo de fondo */
  border: none !important;           /* sin borde */
  width: auto !important;
  height: auto !important;
  box-shadow: none !important;
  color: var(--green-strong) !important; /* flecha verde */
  opacity: 1 !important;
  top: 50%;
  transform: translateY(-50%);
  transition: color 0.3s ease, transform 0.3s ease;
}

/* Íconos de flechas ← y → */
.tipsSwiper .swiper-button-prev::after,
.tipsSwiper .swiper-button-next::after {
  font-size: 34px !important;        /* tamaño visible y limpio */
  font-weight: 900 !important;
  color: var(--green-strong) !important; /* verde principal */
  background: none !important;       /* sin fondo */
  border: none !important;
  box-shadow: none !important;
}

/* Hover */
.tipsSwiper .swiper-button-prev:hover::after,
.tipsSwiper .swiper-button-next:hover::after {
  color: var(--green-dark) !important; /* más oscuro al pasar el mouse */
  transform: scale(1.15);
}

/* Posición */
.tipsSwiper .swiper-button-prev {
  left: 15px !important;
}

.tipsSwiper .swiper-button-next {
  right: 15px !important;
}

/* ==========================
   Fondo de Tips de Ahorro - versión total sin recortes
   ========================== */
.tips-ahorro {
  position: relative;
  background-image: url('https://ubu.cma.mybluehost.me/website_bca47f0c/wp-content/themes/Ejercicio1/assets/img/fondocasas1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 90px 0;
  text-align: center;

  /* 🔹 Estas líneas hacen que el fondo abarque toda la pantalla */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  overflow: hidden;
  z-index: 1;
}

/* Mantiene el contenido centrado y bien alineado */
.tipsSwiper {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}



.tips-titulo {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--green-dark);
  margin-bottom: 60px;
}

/* Responsive */
@media (max-width: 768px) {
  .tipsSwiper .swiper-button-prev {
    left: 8px !important;
  }
  .tipsSwiper .swiper-button-next {
    right: 8px !important;
  }
}


/* ==========================
   Banner Frase - 20 Para Mi Casa
   ========================== */
.banner-frase {
  position: relative;
  width: 100%;
  height: 450px;
  background-image: url("https://ubu.cma.mybluehost.me/website_bca47f0c/wp-content/themes/Ejercicio1/assets/img/calculadora.jpg");

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 90px; /* ✅ añade espacio entre banner y beneficios */
}


.banner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45); /* 🔹 oscurece un poco para mejor contraste */
}

.banner-contenido {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* ✅ centra en ambos ejes */
  text-align: center;
  color: #fff;
  z-index: 2;
  max-width: 90%;
  width: 100%;
  padding: 0 20px;
  animation: fadeInUp 1.2s ease-in-out;
}

.banner-contenido h2 {
  font-size: 2.8rem;
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.banner-contenido p {
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 2px;
  color: #f1f1f1;
}

/* 📱 Responsive */
@media (max-width: 768px) {
  .banner-contenido h2 {
    font-size: 2rem;
  }

  .banner-contenido p {
    font-size: 1.1rem;
    letter-spacing: 1px;
  }
}


.planes {
  margin: 40px auto;
  max-width: var(--max);
  padding: 0 20px;
}

.planes h2 {
  text-align: left;
  font-size: 1.8rem;
  margin-bottom: 16px;
  color: var(--black-strong);
}

.planes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.plan-box {
  background: var(--green-medium);
  color: #fff;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

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

.plan-box h3 {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;              
  padding: 0;
}

.plan-box h3 + h3 {
  margin-top: 2px;         
  font-weight: 500;         
  font-size: 1rem;
  color: rgba(255,255,255,0.9);
  font-style: italic;
}


.plan-box p {
  margin: 8px 0;
  line-height: 1.5;
}

.plan-box p:first-of-type {
  margin-top: 20px;           
}

.plan-box ul {
  margin: 12px 0;
  padding-left: 18px;
}

.plan-box li {
  margin-bottom: 6px;
}

.plan-box .nota {
  margin-top: 12px;
  font-style: italic;
  opacity: 0.9;
}

/* ======================
   Etapas del Ahorro con Flechas Curvas
   ====================== */
.etapas {
  max-width: var(--max);
  margin: 60px auto;
  text-align: center;
  padding: 20px;
}

.etapas h2 {
  color: var(--green-dark);
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.etapas p {
  color: #333;
  font-size: 1.05rem;
  margin-bottom: 40px;
}

.timeline {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  position: relative;
}

/* Cada etapa */
.etapa {
  flex: 1;
  min-width: 240px;
  position: relative;
  z-index: 1;
}

/* Número circular */
.etapa-num {
  width: 42px;
  height: 42px;
  background: var(--green-dark);
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 auto -20px auto;
  z-index: 2;
  position: relative;
}

/* Tarjeta */
.etapa-card {
  background: #f8f8f8;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}

.etapa-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* 🔹 Ajuste de tamaño y espaciado entre "Meta" y cantidad */
.etapa-card h3 {
  font-size: 1.2rem;          /* Más pequeño */
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 2px;         /* Casi sin espacio */
  line-height: 1.2;
}

.etapa-card h3 span {
  font-size: 1rem;            /* Cantidad más pequeña */
  font-weight: 500;
  display: inline-block;
  margin-left: 4px;           /* Espacio mínimo entre texto y número */
  color: #333;
}


.etapa-card h4 {
  font-size: 1.1rem;
  color: #222;
  margin-bottom: 10px;
  font-weight: 700;
}

.etapa-card p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #444;
}

.etapa-icon {
  font-size: 2rem;
  margin-top: 12px;
}

/* Colores alternados */
.etapa-verde {
  background: #e8f6e9;
}

.etapa-azul {
  background: #e5f6f8;
}

/* ========= FLECHAS CURVAS ENTRE ETAPAS ========= */
/* Flechas curvas más arriba */
.etapa:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 30px;                     
  right: -10%;
  width: 90px;                     /* Un poco más larga */
  height: 30px;                    /* Curva más amplia */
  border-top: 3px dashed var(--green-dark);
  border-right: 3px dashed var(--green-dark);
  border-top-right-radius: 80px;
  transform: rotate(10deg);
  opacity: 0.8;
  z-index: 0;
}

/* Ajuste alternado (segunda, cuarta, etc.) */
.etapa:nth-child(even)::after {
  top: 60px;                     
  transform: rotate(-10deg) scaleY(-1);
}


/* Responsivo */
@media (max-width: 900px) {
  .timeline {
    flex-direction: column;
    align-items: center;
  }

  .etapa {
    width: 90%;
  }

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

  /* 🔹 Ocultar flechas en móvil */
  .etapa::after {
    display: none;
  }
}


/* ===============================
   Transición suave entre secciones
   =============================== */
#content {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#content.loaded {
  opacity: 1;
  transform: translateY(0);
}


/* ==========================
   Sección Dónde Deposito (ajustada)
   ========================== */
.deposito {
  background: #fff;
  max-width: var(--max);
  margin: 60px auto;
  padding: 40px 20px;
}

.deposito-title {
  text-align: center;
  color: var(--green-dark);
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.deposito-intro {
  text-align: center;
  color: var(--text-muted);
  font-size: 1.05rem;
  max-width: 700px;
  margin: 0 auto 40px;
}

/* Contenedor principal */
.deposito-grid {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Caja de cada opción */
.deposito-box {
  background: #f8fdf9;
  border-left: 5px solid var(--green-strong);
  border-radius: 12px;
  padding: 20px 30px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
}

/* Fila texto + logos */
.deposito-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: center;
  gap: 30px;
}

/* Texto */
.deposito-texto h3 {
  color: var(--green-dark);
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.deposito-texto ul {
  margin: 10px 0 0 20px;
  color: #444;
  line-height: 1.6;
}

.deposito-texto ul li {
  margin-bottom: 6px;
}

/* Logos agrupados (OpenPay, 7Eleven, etc.) */
.deposito-logos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 30px;
  justify-items: center;
  align-items: center;
}

.logo-deposito {
  width: 100px;
  height: auto;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.logo-deposito.grande {
  grid-column: span 2;
  width: 160px;
}

.logo-deposito:hover {
  transform: scale(1.05);
}

/* Imagen OXXO sola */
.deposito-imagen {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-oxxo {
  width: 180px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.1));
  transition: transform 0.3s ease;
}

.logo-oxxo:hover {
  transform: scale(1.05);
}

/* Imagen SPEI */
.logo-spei {
  width: 100%;
  max-width: 280px; /* controla el tamaño */
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.1));
  transition: transform 0.3s ease;
}

.logo-spei:hover {
  transform: scale(1.03);
}

/* Responsive */
@media (max-width: 900px) {
  .deposito-row {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }

  .deposito-logos {
    grid-template-columns: repeat(2, 1fr);
  }

  .logo-oxxo {
    width: 140px;
  }
}

@media (max-width: 768px) {

  /* 1) Evita que los li se acomoden raro en movil */
  .ahorro-consejos li{
    display: block;      /* antes flex */
    text-align: left;
    line-height: 1.7;
  }

  /* 2) Si usas iconos en li, separalos bien */
  .ahorro-consejos li i{
    display: inline-block;
    margin-right: 10px;
    vertical-align: top;
  }

  /* 3) Baja un poco el patron para que no "ensucie" el texto */
  .ahorro-consejos::before{
    opacity: 0.35;       /* antes 1 */
    filter: brightness(0.95) contrast(1.1) saturate(1.0);
    background-size: 260px;
  }
}

/* Botón de depósito responsivo */
.btn-deposito {
  display: inline-block;
  padding: 14px 22px;
  background-color: #236a61; /* verde branding */
  color: #fff;
  font-weight: 600;
  border-radius: 12px;
  text-decoration: none;
  margin-top: 18px;
  font-size: 18px;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  text-align: center;
}

/* Hover en desktop */
.btn-deposito:hover {
  background-color: #133e3b;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

/*  Responsive: móvil */
@media (max-width: 768px) {
  .btn-deposito {
    width: 100%;
    padding: 16px 0;
    font-size: 17px;
    border-radius: 10px;
  }
}

/* Pantallas muy pequeñas (Huawei, iPhone SE, etc.) */
@media (max-width: 450px) {
  .btn-deposito {
    font-size: 16px;
    padding: 15px 0;
  }
}



/* ===========================
   HERO: SECCIÓN METAS
=========================== */
.metas-hero {
  position: relative;
  background-image: url('https://ubu.cma.mybluehost.me/website_bca47f0c/wp-content/themes/Ejercicio1/assets/img/metas.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 35%; /* 🔹 mueve la imagen hacia abajo para mostrar la cara */
  height: 65vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}

/* Overlay oscuro */
.metas-hero-overlay {
  background: rgba(0, 0, 0, 0.45);
  padding: 40px 80px;
  border-radius: 12px;
}

.metas-hero h1 {
  font-size: 2.8rem;
  font-weight: 800;
  margin: 0;
  color: #fff;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
  .metas-hero {
    height: 50vh;
    background-position: center 40%;
  }

  .metas-hero-overlay {
    padding: 25px 40px;
  }

  .metas-hero h1 {
    font-size: 2rem;
  }
}

/* ===========================
   INTRODUCCIÓN A METAS
=========================== */
.metas-intro {
  background: #ffffff;
  padding: 80px 20px;
}

.metas-intro-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 50px;
  align-items: center;
}

.metas-intro-text h2 {
  color: var(--green-dark);
  font-size: 2.1rem;
  font-weight: 800;
  margin-bottom: 16px;
}

.metas-intro-text p {
  color: #333;
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 16px;
}

.metas-intro-img img {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

/* 🔹 Efecto hover suave en la imagen */
.metas-intro-img:hover img {
  transform: scale(1.05);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.15);
}

/* Responsivo */
@media (max-width: 900px) {
  .metas-intro-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }

  .metas-intro-text h2 {
    font-size: 1.8rem;
  }

  .metas-intro-img img {
    width: 90%;
    margin: 0 auto;
  }
}

/* ===========================
   AJUSTE ESPACIO ENTRE METAS-INTRO Y ETAPAS
=========================== */

/* 🔹 Reduce el espacio inferior de la introducción */
.metas-intro {
  padding-bottom: 40px; /* antes 80px */
  margin-bottom: 0;
}

/* 🔹 Reduce el espacio superior de la sección de etapas */
.etapas.section {
  margin-top: 0;
  padding-top: 40px; /* antes era más alto */
}

/* 🔹 (opcional) si quieres que el texto quede aún más junto a las tarjetas */
.etapas h1 {
  margin-top: 0;
  padding-top: 0;
}

/* ===========================
   SECCIÓN IMPORTANTE DINÁMICA (CON EFECTO FLOTANTE)
=========================== */

.ahorro-nota {
  background: #c6db95; /* verde más suave */
  border-radius: 16px;
  padding: 50px 30px;
  margin-top: 60px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}

.ahorro-nota:hover {
  transform: translateY(-4px);
}

.ahorro-nota h3 {
  color: var(--green-dark);
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 16px;
}

.ahorro-nota .intro {
  font-size: 1.1rem;
  color: #1c1c1c;
  margin-bottom: 30px;
}

.ahorro-consejos {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 30px 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  background-color: #ffffff;
}

.ahorro-consejos::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 200%;
  height: 200%;
  background-image:
    linear-gradient(
      rgba(255,255,255,0.35),
      rgba(255,255,255,0.4)
    ),
    url("https://ubu.cma.mybluehost.me/website_bca47f0c/wp-content/themes/Ejercicio1/assets/img/fondocasas1.png");
  background-repeat: repeat;
  background-size: 350px; /* 🔹 Tamaño grande de techos */
  background-position: center;
  opacity: 1; /* 🔹 Totalmente visible */
  filter: brightness(0.85) contrast(1.3) saturate(1.2); /* 🔹 Más color y contraste */
  animation: moverPatron 45s linear infinite alternate;
  z-index: 0;
}

/* 🔹 Movimiento sutil pero visible */
@keyframes moverPatron {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-50px, -35px) scale(1.05); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Asegura que el contenido esté sobre el fondo */
.ahorro-consejos > * {
  position: relative;
  z-index: 2;
}



/* Hover general */
.ahorro-consejos:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.ahorro-consejos h4 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 16px;
}

.ahorro-consejos ul {
  list-style: none;
  text-align: left;
  padding-left: 0;
}

.ahorro-consejos li {
  display: flex;
  align-items: flex-start;
  font-size: 1.5rem; /* antes 1rem */
  line-height: 1.7;
  color: #333;
  margin-bottom: 14px;
  gap: 10px;
  transition: color 0.3s ease, transform 0.3s ease;
}


.ahorro-consejos li i {
  color: var(--green-dark);
  font-size: 1.1rem;
  transition: color 0.3s ease;
}

.ahorro-consejos li:hover {
  color: var(--green-medium);
  transform: translateX(5px);
}

.ahorro-consejos li:hover i {
  color: var(--green-strong);
}

/* Nota final */
.calc-note {
  font-size: 0.95rem;
  color: #2b2b2b;
  font-style: italic;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .ahorro-nota {
    padding: 40px 20px;
  }

  .ahorro-nota h3 {
    font-size: 2rem;
  }

  .ahorro-nota .intro {
    font-size: 1.1rem;
  }

  .ahorro-consejos h4 {
    font-size: 1.4rem;
  }

  .ahorro-consejos li {
    font-size: 1rem;
  }
}


/* ===== ELIMINA POR COMPLETO EL ESPACIO ENTRE HERO Y TARJETAS ===== */

/* Quita margen inferior del hero */
.apply-hero {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Elimina padding/margin heredado de contenedores WordPress */
.aplicar-section,
.entry-content > section,
.wp-block-group,
.wp-block-group__inner-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Ajusta la sección de tarjetas para unirse directamente al hero */
.modelo-section {
  margin-top: 0 !important;
  padding-top: 70px;
  width: 100%;
  background: linear-gradient(180deg, #ecf9f5 0%, #e2f4ef 100%);
  border-radius: 0;
}

/* Previene espacios colapsados entre secciones */
section + section {
  margin-top: 0 !important;
}

/* ===== SECCIÓN TARJETAS FULL WIDTH REAL ===== */
.modelo-section {
  position: relative;
  width: 100vw;              /* ocupa todo el ancho visible */
  left: 50%;
  right: 50%;
  background: transparent; 
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 80px 40px;
  text-align: center;
  box-sizing: border-box;
  border-radius: 0;
  margin-top: 0 !important;
  overflow: hidden;
  z-index: 0;
}


/* 🔹 Elimina espacio entre hero y tarjetas */
.apply-hero {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Tarjetas */
.modelo {
  padding: 60px 0;
  background: transparent; 
  text-align: center;
}

.modelo h2 {
  color: var(--green-dark);
  font-weight: 800;
  margin-bottom: 30px;
}

.modelo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  max-width: var(--max);
  margin: auto;
  padding: 0 20px;
}

.modelo-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.modelo-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.modelo-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.modelo-card h3 {
  margin-top: 16px;
  color: var(--green-dark);
  font-weight: 700;
}

.modelo-card p {
  color: #444;
  font-size: 1rem;
  padding: 0 16px 20px;
}


.card-content {
  padding: 22px 20px 26px;
}

.card-content h4 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 8px;
}

.card-content p {
  font-size: 0.98rem;
  color: #333;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 900px) {
  .modelo-cards {
    flex-direction: column;
    align-items: center;
  }

  .modelo-card {
    width: 90%;
    max-width: 400px;
  }
}

/* ===== GALERÍA DE DOS IMÁGENES (HORIZONTAL) ===== */
.aplicar-dos-img {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  margin: 50px auto 60px;
  max-width: 1100px;
  padding: 0 20px;
}

.aplicar-dos-img img {
  width: 50%;
  height: 320px;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.aplicar-dos-img img:hover {
  transform: scale(1.04);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* Responsive */
@media (max-width: 900px) {
  .aplicar-dos-img {
    flex-direction: column;
    gap: 20px;
  }

  .aplicar-dos-img img {
    width: 100%;
    height: 240px;
  }
}


/* =============================
   Restauración Total de Tipografía 20 Para Mi Casa
   ============================= */



/* Tamaños de encabezados como antes */
h1 {
    font-size: 48px !important;
    font-weight: 700 !important;
}

h2 {
    font-size: 36px !important;
    font-weight: 700 !important;
}

h3 {
    font-size: 26px !important;
    font-weight: 600 !important;
}

h4 {
    font-size: 22px !important;
    font-weight: 600 !important;
}

/* Párrafos */
p {
    font-size: 18px !important;
}

/* Menú del header */
header nav a {
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* Botón principal del slide */
.hero-btn, .slider-btn, .btn-enviar {
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* Cuadros de 1-2-3 pasos */
.pasos-card h3,
.pasos-card h4,
.modelo-card h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
}

.pasos-card p,
.modelo-card p {
    font-size: 16px !important;
}

/* Título “¿Cómo puedes formar parte…?” */
.pregunta-titulo {
    font-size: 32px !important;
    font-weight: 700 !important;
}

.pregunta-titulo span {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #7fae4b !important;
}

/* Footer */
footer {
    font-size: 15px !important;
}

footer h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
}

footer p,
footer a {
    font-size: 15px !important;
}

/* TÍTULO PRINCIPAL DEL SLIDER – TAMAÑO ORIGINAL */
.hero-slide h1,
.slider h1,
.slide h1 {
    font-size: 64px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -1px !important;
    color: #ffffff !important;
}
/* SUBTÍTULO DEL SLIDER */
.hero-slide p,
.slider p,
.slide p {
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #ffffff !important;
}
/* BOTÓN DEL SLIDER – TAMAÑO ORIGINAL */
.hero-slide .btn,
.hero-slide a.btn,
.slider .btn,
.slide .btn,
.hero-slide button,
.slider button,
.slide button {
    font-size: 40px !important;
    font-weight: 700 !important;
    padding: 16px 32px !important;
    border-radius: 10px !important;
}

/* Forzar tamaño más grande en preguntas FAQ */
.faq-item .faq-question {
  font-size: 1.55rem !important;
}


/* ===== Restaurar color correcto del hover en el menú ===== */
header nav a {
    color: #ffffff !important;
}

header nav a:hover {
    color: var(--green-strong) !important; /* verde lima */
}

header nav a::after {
    background: var(--green-strong) !important;
}

header nav a:hover::after {
    width: 100% !important;
}

/* FORZAR TAMANO DEL CTA EN HERO */
.hero-overlay .cta,
.hero-banner .cta,
.swiper .cta {
  font-size: 1.5rem !important;
  padding: 14px 26px !important;
}