/* Hero con la portada nueva */
.hero{
  position: relative;
  min-height: 60vh; /* puedes subir/bajar según te guste */
  background: url('../images/hero/banner-completo-1600x400.png') center top / cover no-repeat;
}

/* Barra de menú pegada al borde inferior del hero */
.menu-hero.menu-bar{
  position:absolute;
  left:0; right:0; bottom:0;
  display:flex; justify-content:center; gap:48px; /* separa los rótulos */
  padding:14px 20px;
  background: var(--color-primario);          /* verde institucional */
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Estilo de los textos del menú (blanco, con tipografía CaldasCamina) */
.menu-hero.menu-bar a{
  color:#fff;
  font-family: var(--font-principal);
  font-size: 1.05rem;
  letter-spacing: .5px;
  font-weight: 700;
  text-transform: none; /* el arte usa minúsculas con acentos */
}

/* Responsivo: en móvil apilamos y reducimos separación */
@media (max-width: 960px){
  .menu-hero.menu-bar{ gap:24px; padding:12px 12px; }
  .menu-hero.menu-bar a{ font-size: .98rem; }
}
@media (max-width: 640px){
  .menu-hero.menu-bar{ flex-wrap:wrap; gap:16px; }
  .menu-hero.menu-bar a{ font-size: .95rem; }
}

/* AAtajos cuadriculados simples */
.grid-atajos{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
}
.grid-atajos .atajo{
  background:#fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding:16px; text-align:center; font-family: var(--font-principal); font-weight:700;
}
.grid-atajos .atajo a{ display:block; color: var(--color-secundario); }
@media (max-width: 960px){ .grid-atajos{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 560px){ .grid-atajos{ grid-template-columns:1fr; } }

/* Sección leyenda de entrada */
.leyenda-entrada {
  text-align: center;
  padding: 40px 20px 24px;
  max-width: 900px;
  margin: 0 auto;
}

.leyenda-entrada h2 {
  font-family: var(--font-principal);
  color: #54add3;              /* azul institucional */
  font-size: 1.8rem;
  line-height: 1.4;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.leyenda-entrada p {
  font-family: var(--font-secundaria);
  color: #4e2d0b;              /* marrón suave del texto */
  font-size: 1rem;
  line-height: 1.6;
  max-width: 750px;
  margin: 0 auto;
}

/* Ajuste responsive */
@media (max-width: 720px) {
  .leyenda-entrada h2 {
    font-size: 1.4rem;
  }
  .leyenda-entrada p {
    font-size: 0.95rem;
    padding: 0 10px;
  }
}
/* --- Animación de aparición --- */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Leyenda con animación */
.leyenda-entrada {
  text-align: center;
  padding: 40px 20px 24px;
  max-width: 900px;
  margin: 0 auto;
  opacity: 0;                      /* oculta inicialmente */
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Cuando entra en pantalla */
.leyenda-entrada.visible {
  animation: fadeInUp 1s ease forwards;
}

/* Título y párrafo */
.leyenda-entrada h2 {
  font-family: var(--font-principal);
  color: #54add3;
  font-size: 1.8rem;
  line-height: 1.4;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.leyenda-entrada p {
  font-family: var(--font-secundaria);
  color: #4e2d0b;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 750px;
  margin: 0 auto;
}

/* Responsive */
@media (max-width: 720px) {
  .leyenda-entrada h2 { font-size: 1.4rem; }
  .leyenda-entrada p { font-size: 0.95rem; padding: 0 10px; }
}
/* ===== Sección 20 años (como la segunda imagen) ===== */
.aniversario { padding: 56px 20px; background:#fff; }

.anv-grid{
  display:grid;
  grid-template-columns: 1.25fr 1fr;   /* mapa más ancho que la derecha */
  gap: 36px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

/* IZQUIERDA: mapa + párrafo debajo */
.anv-map{ width:100%; height:auto; display:block; }
.anv-lead{
  margin-top: 16px;
  font-family: var(--font-secundaria);
  color: #4e2d0b;
  font-size: 1rem;
  line-height: 1.65;
}

/* DERECHA: logo 20 años arriba + banda amarilla debajo */
.anv-right{ display:flex; flex-direction:column; gap:18px; }
.anv-20{
  max-width: 360px;       /* ajústalo si tu imagen es más pequeña/grande */
  width: 100%;
  margin-left: auto;      /* lo pega al borde derecho como en la imagen */
  height: auto;
  display:block;
}
.anv-note{
  background: url('../images/secciones/contenedor_amarillo.png') center/cover no-repeat;
  border-radius: 28px;
  padding: 26px 28px;
}
.anv-note p{
  margin:0;
  color:#4e2d0b;
  font-family: var(--font-secundaria);
  line-height:1.65;
  font-size:1rem;
}

/* Animación sutil al aparecer (opcional) */
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }
.anv-map, .anv-20, .anv-note, .anv-lead{ animation: fadeUp .8s ease both; }

/* Responsive */
@media (max-width: 1080px){
  .anv-grid{ grid-template-columns: 1.1fr .9fr; gap:28px; }
  .anv-20{ max-width: 320px; }
}
@media (max-width: 880px){
  .anv-grid{ grid-template-columns: 1fr; }
  .anv-right{ align-items: center; }
  .anv-20{ margin: 0 auto; max-width: 300px; }
  .anv-note{ width:100%; max-width: 720px; }
  .anv-lead{ text-align:center; }
}
/* === SECCIÓN TARJETAS DE ACCESO === */
.tarjetas-acceso {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  padding: 40px 20px 80px;
  background: #fff;
}

/* Cada tarjeta */
.tarjeta {
  flex: 1 1 320px;
  max-width: 400px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tarjeta img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 28px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

/* Efecto hover */
.tarjeta:hover {
  transform: translateY(-6px);
}
.tarjeta:hover img {
  box-shadow: 0 10px 24px rgba(0,0,0,0.15);
}

/* Responsive */
@media (max-width: 960px) {
  .tarjetas-acceso {
    gap: 20px;
  }
}
@media (max-width: 640px) {
  .tarjeta {
    flex: 1 1 100%;
    max-width: 360px;
  }
}
/* Estado inicial: ocultas y un poco abajo */
.tarjetas-acceso .tarjeta{
  opacity: 0;
  transform: translateY(24px);
}

/* Animación de entrada */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tarjetas-acceso .tarjeta.visible{
  animation: fadeUp .8s ease forwards;
}

/* Respeto a usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  .tarjetas-acceso .tarjeta{ opacity: 1; transform: none; }
  .tarjetas-acceso .tarjeta.visible{ animation: none; }
}

/* === TARJETAS APILADAS (siempre vertical) === */
.tarjetas-acceso{
  display: flex;
  flex-direction: column;      /* <-- clave: apilar */
  align-items: center;         /* centrar el conjunto */
  gap: 28px;
  padding: 40px 20px 80px;
  background: #fff;
}

.tarjetas-acceso .tarjeta {
  width: 100%;                /* ocupa todo el ancho disponible */
  max-width: 1200px;          /* pero no más de 1200px */
  opacity: 0;
  transform: translateY(24px);
  transition: transform .3s ease, box-shadow .3s ease;
}

.tarjetas-acceso .tarjeta img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 28px;
  box-shadow: none;        /* 🔹 sin sombra externa */
}


/* Hover opcional */
.tarjetas-acceso .tarjeta:hover{
  transform: translateY(-6px);
}

/* Animación on-scroll que ya tenías */
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
.tarjetas-acceso .tarjeta.visible{ animation: fadeUp .8s ease forwards; }
/* --- NUESTRA EVOLUCIÓN --- */
.nuestra-evolucion{
  padding: 32px 20px 72px;
  text-align: center;
  background: #fff;
}

.titulo-evolucion{
  font-family: var(--font-principal);
  text-transform: uppercase;
  font-weight: 800;
  color: #5f972c;                          /* verde institucional */
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: .5px;
  margin: 0 0 16px;
  /* borde blanco alrededor del texto (fallback + stroke) */
  text-shadow: 0 2px 0 #fff, 0 -2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff,
               1.5px 1.5px 0 #fff, -1.5px -1.5px 0 #fff;
  -webkit-text-stroke: 4px #fff;           /* navegadores WebKit */
  paint-order: stroke fill;
}

.evolucion-card {
  position: relative;
  margin: 0 auto;
  max-width: 1100px;
  border-radius: 28px;
  overflow: hidden;              /* 🔹 elimina el marco blanco */
  background: none;              /* 🔹 sin fondo */
  box-shadow: none;              /* 🔹 sin sombra */
}

.evolucion-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;              /* la imagen ya tiene borde natural */
}

/* Animación de entrada */
.revela{ opacity: 0; transform: translateY(24px); }
.revela.visible{ animation: fadeUp .8s ease forwards; }
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }

@media (max-width: 720px){
  .titulo-evolucion{ -webkit-text-stroke: 3px #fff; }
}
/* --- Enlace de la imagen (NUESTRA EVOLUCIÓN) --- */
.evolucion-link {
  display: block;
  width: 100%;
  border-radius: 28px;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}

/* Efecto al pasar el mouse */
.evolucion-link:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}
/* === PIE DE PÁGINA VERDE (temporal) === */
.footer-verde {
  background-color: #5f972c;          /* verde institucional */
  color: #fff;
  text-align: center;
  padding: 18px 10px;
  font-family: var(--font-principal);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  margin-top: 48px;
}
/* === Hero específico para la página /caja/ === */
.hero.hero-caja {
  background: url('../images/banners/caja/banner-caja.png') center top / cover no-repeat;
  min-height: 100vh;  /* ocupa toda la pantalla, asegura que el footer quede al final */
}

/* Opcional: marcar el enlace activo de la tira verde */
.menu-hero.menu-bar a[href*="caja"] {
  text-decoration: underline;
  text-underline-offset: 6px;
}
/* --- Footer móvil tipo app (fijo al viewport) --- */
.menu-footer-movil {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;

  display: flex;
  justify-content: space-around;
  align-items: center;
  background: var(--color-primario);
  padding: 10px 8px;
  border-top: 2px solid rgba(255,255,255,.2);

  /* Safe area (iPhone notch) */
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

.menu-footer-movil a {
  color: #fff;
  font-family: var(--font-principal);
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
}

.menu-footer-movil a.activo {
  color: #ffeb3b; /* enlace activo */
}

/* Mostrar solo en pantallas móviles */
@media (min-width: 960px) {
  .menu-footer-movil { display: none; }
}

/* Evitar que el footer tape el contenido en móvil */
@media (max-width: 959px) {
  body { padding-bottom: 72px; } /* ajusta al alto real del footer */
}
/* ===== Ajuste de portada de la sección Caja (match maqueta) ===== */
.caja-hero{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px 0 8px;
  text-align: center;
}
.caja-hero_media img{
  width: min(620px, 92vw);  /* similar al ancho de la maqueta */
  height: auto;
  display: block;
  margin: 0 auto;
}
.caja-hero_texto{
  max-width: 820px;         /* ancho de columna de texto como en la imagen */
  margin: 0 auto;
}
.caja-hero_texto p{
  margin: 0 0 10px 0;
  line-height: 1.45;
}
/* Footer fijo para versión móvil */
.footer-movil-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;
  background-color: #5f972c; /* color institucional */
  box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.15);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Contenedor interno */
.footer-movil-inner {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 60px;
}

/* Ítems del menú */
.footer-movil-inner .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: white;
  font-size: 12px;
}

.footer-movil-inner .nav-item img {
  width: 22px;
  height: 22px;
  margin-bottom: 3px;
}

/* Espacio inferior del contenido principal para no taparlo */
body.has-footer-movil {
  padding-bottom: calc(65px + env(safe-area-inset-bottom, 0));
}
.footer-movil-inner .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: white;
  font-size: 13px;
}

.footer-movil-inner .emoji {
  font-size: 28px;   /* antes 22px — ahora más grande */
  line-height: 1.2;
  margin-bottom: 3px;
}

.footer-movil-inner .nav-item.activo {
  font-weight: bold;
  opacity: 0.9;
}