html,body{
  height:100%;
  margin:0;
  font-family: "Fredoka", sans-serif;
  transition:background 1s ease;
}

/* Contenedor con marco */
#map-container{
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
}


#map{
  height:100%;
  width:100%;
  border-radius:20px;
  box-shadow:0 0 25px rgba(0,0,0,0.2);
  z-index:1;
  position:relative;
  overflow:hidden;
  opacity:.95;
}

.meta-map{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.postal-map-info{
  display: flex;
  flex-direction: column;
}

    a.cta{
        text-align: center;
    }

/* POPUPS */
.place-popup{
  display:flex;flex-direction: column;
}
.place-popup img{
  max-height:150px;object-fit:cover;border-radius:6px;
  border:2px solid #fff;
  box-shadow:0 0 6px rgba(255,255,255,0.5);
}
.place-popup .meta h4{margin:0;font-size:14px;}


/* 📱 En pantallas pequeñas: la leyenda se esconde casi por completo */
@media (max-width: 978px) {
    #map-container{
        height: 90vh;
    }
}

@keyframes blinkZoom {
  0% {
    opacity: 0.7;
    scale: .8;               
  }
  50% {
    opacity: 1;
    scale: 1.15;
  }
  100% {
    opacity: 0.7;
    scale: .8;
  }
}

/* Sombras */
.shadow-blue.marker-icon {
  text-shadow: 0 0 6px #0ea4e9a7, 0 0 10px #0ea4e9a7;
}

/* Animación solo en el icono, no en el contenedor Leaflet */
.marker-icon {
  animation: blinkZoom 1.2s infinite ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  will-change: scale, opacity;
}




.ruta-buttons-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-direction: column;
}
    /* ---------------------- Reset & variables ---------------------- */
    :root{
      --bg:#fff8f2;
      --accent:#b31b1b; /* rojo festival */
      --dark:#0b3a2e; /* verde oscuro */
      --gold:#f3c66a;
      --beige:#f4e7d8;
      --glass: rgba(255,255,255,0.6);
      --maxw:1200px;
      --smooth: cubic-bezier(.22,.9,.37,1);
      --shadow: 0 8px 28px rgba(13,20,30,0.12);
    }

    a{color:inherit}
    img{max-width:100%;display:block}
    .container{max-width:var(--maxw); margin:0 auto; padding:40px 20px}

        /* ---------------------- Hero full screen ---------------------- */
    header.hero{
      min-height:100vh; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden;
      color:white; text-align:center;
    }
    /* background illustration / image */
    .hero .bg{
      position:absolute; inset:0; background-image: url('src/espinosa-bg.jpeg'); background-size:cover; background-position:center; filter:contrast(.95) saturate(.9) brightness(.9);
      z-index:1; transform:scale(1.02);
    }
    /* warm overlay */
    .hero::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,5,22,0.25), rgba(8,5,22,0.35)); mix-blend-mode:multiply; z-index:2}
    /* animated snow */
    .snow{position:absolute; inset:0; pointer-events:none; z-index:6}

    .hero .content{position:relative; z-index:10; max-width:1100px; padding:80px 20px}
    .kicker{font-family: 'Great Vibes', cursive; font-size:26px; letter-spacing:1px; opacity:.95}
    h1{font-size:clamp(36px,7vw,84px); margin:14px 0 8px; line-height:1; font-weight:700; letter-spacing:-1px}
    p.lead{font-size:clamp(16px,2.2vw,22px); opacity:.95; margin:0 0 26px}
    .cta{display:inline-block; background:linear-gradient(90deg,var(--gold),#f6a33a); color:#2b1a07; padding:18px 34px; border-radius:14px; font-weight:700; text-decoration:none; box-shadow:0 12px 30px rgba(243,198,106,0.15); transform:translateY(0); transition:transform .45s var(--smooth), box-shadow .25s; cursor: pointer;}
    .cta:hover{transform:translateY(-6px); box-shadow:0 20px 40px rgba(243,198,106,0.22)}

    /* smooth entry animation */
    .reveal{opacity:0; transform: translateY(20px) scale(.995); transition: all .85s var(--smooth)}
    .reveal.on{opacity:1; transform:none}
        /* ---------------------- Program highlight band ---------------------- */
    .program-band{padding:40px 0;}
    .program-row{display:flex; gap:18px; align-items:stretch; max-width:var(--maxw); margin:0 auto; padding:20px}
    .prog-card{flex:1; border-radius:18px; padding:28px; color:white; position:relative; overflow:visible; min-height:180px}
    .prog-card .meta{display:flex; gap:10px; align-items:center; font-weight:600}
    .prog-card .title{font-size:20px; margin:10px 0 6px}
    /* asymmetry */
    .prog-card:nth-child(1){background:var(--accent); transform:skewY(-1deg) translateY(6px); box-shadow:var(--shadow)}
    .prog-card:nth-child(2){background:linear-gradient(180deg,#fff,#fff); color:#333; border:2px dashed rgba(0,0,0,0.06); transform:translateY(-12px) rotate(-1deg); box-shadow:0 18px 40px rgba(0,0,0,0.06)}
    .prog-card:nth-child(3){background:var(--dark); transform:skewY(1deg) translateY(14px); box-shadow:var(--shadow)}
    .prog-grid{display:flex; gap:14px}

    /* icons flat style */
    .icon{width:36px;height:36px;background:rgba(255,255,255,0.12);border-radius:8px;display:inline-flex;align-items:center;justify-content:center}
    
        /* ---------------------- Postal map section ---------------------- */
    .postal{padding:64px 20px; display:flex; justify-content:center}
    .postal-frame{width:100%; background:linear-gradient(180deg,#fff,#fffefc); border-radius:28px; padding:16px; position:relative; box-shadow:0 20px 50px rgba(12,18,20,0.08)}
    .postal-frame::before{content:''; position:absolute; left:12px; top:12px; right:12px; bottom:12px; border-radius:24px; pointer-events:none; background:radial-gradient(circle at 10% 10%, rgba(243,198,106,0.04), transparent 15%);}
    .postal-title{font-family: 'Great Vibes', cursive; margin:6px 0 12px}
    .postal-inner{display:grid; grid-template-columns:1fr 300px; gap:20px; align-items:center; min-height: 500px;}
    .map-canvas{background:#eef6f7; border-radius:14px; min-height:320px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden}
    .map-canvas img{width:100%; height:100%; object-fit:cover}
    /* decorative falling lights */
    .decor-left, .decor-right{position:absolute; top:8px; width:70px; height:100%; pointer-events:none}

    /* small helper for injected user map html */
    .map-placeholder-note{font-size:13px; color:#6b6b6b; margin-top:10px}
    
    
    /* ---------------------- Timeline ---------------------- */
    .timeline-inner{max-width:820px; margin:0 auto; position:relative}
    .timeline-line{position:absolute; left:50%; transform:translateX(-50%); width:4px; top:0; bottom:0; background:linear-gradient(#f6a33a,#b31b1b)}
    .event{position:relative; margin:36px 0; display:flex; align-items:flex-start; gap:14px; cursor:pointer}
    .event .ball{width:64px; height:64px; border-radius:50%; background:linear-gradient(180deg,#fff,#f6f6f6); box-shadow:0 8px 18px rgba(0,0,0,0.08); display:flex; align-items:center; justify-content:center; font-weight:700}
    .event .rope{width:2px; height:48px; background:repeating-linear-gradient(180deg,#bdbdbd 0 2px, transparent 2px 6px); position:absolute; left:calc(50% - 1px); top:-20px}
    .event-card{padding:18px 22px; border-radius:12px; background:white; box-shadow:var(--shadow); width:min(520px,68%); transition:transform .25s}

    /* align cards alternately */
    .event[data-side="left"]{justify-content:flex-end}
    .event[data-side="left"] .event-card{margin-right:22px}
    .event[data-side="right"]{justify-content:flex-start}
    .event[data-side="right"] .event-card{margin-left:22px}

    /* ---------------------- Kids activities ---------------------- */
    .kids{padding:60px 20px; background: linear-gradient(180deg,var(--beige),#f7efe5)}
    .kids-inner{max-width:1100px;margin:0 auto; display:flex; gap:26px; align-items:stretch}
    .kids-art{flex:1; position:relative; background:transparent}
    .kids-art img{border-radius:18px; box-shadow:var(--shadow)}
    .kids-list{flex:1; padding:20px}
    .tag-plate{display:inline-block; padding:12px 18px; border-radius:14px; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,0.06); margin:8px;}

    /* small screens */
    @media (max-width:900px){
      .postal-inner{grid-template-columns:1fr}
      .prog-card:nth-child(2){transform:none}
      .program-row{flex-direction:column}
      .timeline-line{left:20px; transform:none}
      .event .rope{left:16px}
      .event .ball{width:48px; height:48px}
      .kids-inner{
        flex-direction: column;
      }
    }



/* ---------- SECTION ---------- */
.kids-masonry-section {
  padding: 20px;
}

.kids-title {
  text-align: center;
  font-size: 30px;
  color: #d8273b;
  margin-bottom: 10px;
  font-weight: 800;
}

.kids-sub {
  text-align: center;
  margin-bottom: 35px;
  font-size: 1.15rem;
  color: #444;
}

/* ---------- MASONRY ---------- */
.kids-masonry {
  column-count: 3;
  column-gap: 22px;
}

@media(max-width: 900px) {
  .kids-masonry { column-count: 2; }
}

@media(max-width: 600px) {
  .kids-masonry { column-count: 1; }
}

/* ---------- CARD ---------- */
.kids-card {
  display: inline-block;
  background: #fff;
  break-inside: avoid;
  
  margin: 0 0 22px;
  padding: 22px;

  /* papel recortado */
  border-radius: 20px;
  clip-path: polygon(
    6% 0%, 94% 0%, 100% 6%,
    100% 92%, 94% 100%,
    6% 100%, 0% 94%,
    0% 6%
  );

  border: 4px solid rgba(220, 60, 60, 0.25);
  box-shadow:
    0 6px 12px rgba(0,0,0,0.12),
    0 0 0 6px rgba(255,240,240,0.7);

  position: relative;
  overflow: visible;

  transform: translateY(30px) scale(.98);
  opacity: 0;
  animation: appear 0.7s ease-out forwards;
}

/* ---------- Tamaños variados ---------- */
.kids-size-sm { height: auto; }
.kids-size-md { height: auto; padding: 28px; }
.kids-size-lg { height: auto; padding: 36px; }

.kids-vertical { aspect-ratio: 3/4; }
.kids-horizontal { aspect-ratio: 4/3; }
.kids-square { aspect-ratio: 1/1; }

.kids-card > * {
  pointer-events: none;
}

/* ---------- Santa Hat ---------- */
.kids-hat {
  position: absolute;
  width: 55px;
  top: -12px;
  right: -12px;
  transform: rotate(15deg);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.15));
}

/* ---------- DECORACIÓN LUMINOSA ---------- */
.kids-card::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(255,255,255,0.9), transparent);
  top: -40px;
  left: -40px;
  opacity: 0.6;
  border-radius: 50%;
}

.kids-card:hover {
  transform: translateY(-4px) scale(1.03);
  transition: 0.25s ease;
}

/* ---------- ANIMACIÓN ---------- */
@keyframes appear {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.kids-icon {
  font-size: 2.8rem;
  margin-bottom: 10px;
}

.kids-card h3 {
  font-size: 1.25rem;
  color: #c51629;
  margin-bottom: 6px;
}

.kids-info {
  font-size: 0.95rem;
  color: #333;
  margin-bottom: 14px;
}

.kids-info p {
  margin-top: 8px;
}

.kids-cta {
  display: inline-block;
  background: #d8273b;
  color: white;
  padding: 10px 18px;
  border-radius: 18px;
  text-decoration: none;
  font-size: 0.9rem;
  pointer-events: auto;
}

/* ----- WASHI TAPE / CINTA ADHESIVA ----- */

.kids-card::after {
  content: "";
  position: absolute;
  width: 85px;
  height: 28px;
  background: url("washi.png") center/cover no-repeat;
  top: -14px;
  left: 12px;
  transform: rotate(-6deg);
  opacity: 0.9;
  pointer-events: none;
}

.kids-card.tape-right::after {
  left: auto;
  right: 12px;
  transform: rotate(8deg);
}

/* ----- ROTACIÓN SUAVE PARA EFECTO REBELDE ----- */

.kids-card.rotate-l {
  transform: rotate(-4deg);
}

.kids-card.rotate-r {
  transform: rotate(4deg);
}

/* ----- NUEVOS TAMAÑOS MÁS LOCOS ----- */

/* Horizontal extragrande */
.kids-horizontal-xl {
  width: 100%;
  aspect-ratio: 5/2;
}

/* Súper estrecha vertical tipo ticket */
.kids-vertical-thin {
  aspect-ratio: 2 / 5;
}

/* Carta gigante cuadrada */
.kids-square-xl {
  aspect-ratio: 1 / 1;
  padding: 45px !important;
}

/* Mejoramos separación y evitamos solapes visuales */
.kids-card {
  transition: transform .25s ease;
}

/* Hover mantiene el tilt pero sube un poquito */
.kids-card:hover {
  transform: translateY(-4px) scale(1.03) rotate(var(--tilt, 0deg));
}

/* --- GRID PRINCIPAL --- */
.bento{
  display: grid;
  /* 3 columnas: izquierda estrecha, centro ancho, derecha alta */
  grid-template-columns: 1fr 1.6fr 1.2fr;
  /* 3 filas: top (min), medio (contenido grande), bottom bar */
  grid-template-rows: 140px 220px 86px;
  align-items: stretch;
  gap: 5px;
}

/* Estética general de cada "tarjeta" */
.box, .mini{
  border-radius: 10px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.5); /* leve sombra para sensación de relieve */
  border: 4px solid rgba(220, 60, 60, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Posicionamiento por área (ordenado para legibilidad) */
.left-top     { grid-column: 1 / 2; grid-row: 1 / 2; }
.left-mid     { grid-column: 1 / 2; grid-row: 2 / 3; }

.top-mini     { grid-column: 2 / 3; grid-row: 1 / 2; display:flex; align-items:center; justify-content:space-between; }
.center-large { grid-column: 2 / 3; grid-row: 2 / 3;   background: #1c2b61;}

/* right tall ocupa filas 1-2 (alto) */
.right-tall   { grid-column: 3 / 4; grid-row: 1 / 3; }

/* Bottom bar ocupa toda la anchura en la última fila */
.bottom-bar   { grid-column: 1 / 4; grid-row: 3 / 5; }

/* --- MINI BOXES (tres cajitas pequeñas alineadas) */
.top-mini .mini{
  flex: 1 1 0;
  height: 100%;                     /* altura de las pequeñas de la imagen */
  border-radius: 8px;
}

/* Optionally give slightly different corner rounding like the picture */
.left-top{ border-radius: 8px; }
.left-mid{ border-radius: 8px; }
.center-large{ border-radius: 8px; }
.right-tall{ border-radius: 8px; }
.bottom-bar{ border-radius: 8px; }

/* Ajustes visuales finos para que el resultado sea EXACTO */
.bento { background: transparent; }

/* Tamaños relativos mejor definidos para reproducir aspecto */
/* @media (min-width: 1000px){
  .bento{ grid-template-rows: 170px 320px 86px; }
} */

/* Contenido interno flexible */
.bento-content {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}

.box.bottom-bar .bento-content{
    flex-direction: row;
    justify-content: center;
}

/* Títulos pueden ocupar 2 líneas */
.bento-content h3 {
  margin: 0 0 4px 0;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

/* Texto flexible */
.bento-content p {
  font-size: clamp(12px, 1vw, 16px);
  margin: 0;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

/* --------------------
   LÍMITES POR TAMAÑO 
   -------------------- */

/* MINI 1 y MINI 2 (muy pequeñas) */
.top-mini .mini .bento-content p {
  -webkit-line-clamp: 1;
}
.top-mini .mini .bento-content h3 {
  -webkit-line-clamp: 1;
}

/* LEFT-TOP (pequeña pero más alta que mini) */
.left-top .bento-content h3 {
  -webkit-line-clamp: 2;
}
.left-top .bento-content p {
  -webkit-line-clamp: 2;
}

/* RIGHT-TALL (alta vertical) */
.right-tall .bento-content h3 {
  -webkit-line-clamp: 3;
}
.right-tall .bento-content p {
  -webkit-line-clamp: 5;
}

/* LEFT-MID (altura media) */
.left-mid .bento-content p {
  -webkit-line-clamp: 3;
}

/* BOTTOM BAR (horizontal grande pero baja altura) */
.bottom-bar .bento-content h3 {
  -webkit-line-clamp: 1;
}
.bottom-bar .bento-content p {
  -webkit-line-clamp: 1;
}

/* ============================================
   🎄 COLORES NAVIDEÑOS ALTERNADOS
   ============================================ */
.left-top     { background: #c7372f; color: #fff; }
.top-mini .m1 { background: #0d5a33; color: #fff; }
.top-mini .m2 { background: #c7372f; color: #fff; }
.left-mid     { background: #0d5a33; color: #fff; }
.right-tall   { background: #c7372f; color: #fff; }
.bottom-bar   { background: #0d5a33; color: #fff; }

.box, .mini {
  border: none !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}

/* Ajustar colores de texto internos para contraste */
.bento-content h3,
.bento-content p,
.bento-content strong {
  color: #fff;
}



/* ============================================
   📱 RESPONSIVE DESIGN
   ============================================ */

/* ===== Tablet (600px – 999px) ===== */
@media (max-width: 999px) and (min-width: 600px) {
  .bento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 12px;
  }

  .left-top     { grid-column: 1; }
  .top-mini .m1 { grid-column: 2; }
  .top-mini .m2 { grid-column: 1; }
  .left-mid     { grid-column: 2; }

  .top-mini {
    display: contents; /* permite colocar mini1 y mini2 en grid normal */
  }
    .box.center-large{
    display: none;
  }
}




/* ===== Mobile (< 600px) ===== */
@media (max-width: 599px) {
  .bento {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .box, .mini {
    height: auto ;
    min-height: 120px;
  }

  .top-mini{
    align-items: stretch;
  }

  .right-tall {
    min-height: 280px;
  }

  .bento-content h3 {
    font-size: 18px;
    -webkit-line-clamp: 3;
  }

  .bento-content p {
    font-size: 14px;
    -webkit-line-clamp: 3;
  }
  .box.center-large{
    display: none;
  }

}

.box.center-large svg {
  overflow:visible;
  height: 100%;
  width: 100%;
}
.box.center-large svg path {
  fill: #379157;
  stroke: #379157;
  stroke-width: .2;
  transform: scale(0);
  transform-origin: 50% 50%;
  animation: star 8s ease-in-out infinite;
  animation-delay: calc( var(--no) * .025s );
  transform-box: fill-box;
}
@keyframes star {
  0% {
    transform: scale(0);
    animation-timing-function: cubic-bezier(.74,1.72,.57,1.01)
  }
  10% {
    transform: scale(1);
  }
  65% {
    transform: translateY(0px) scale(1);
  }
  75% {
    transform: translateY(50px) scale(0);
  }
  100% {
    transform: translateY( 0px ) scale(0);
  }
}

/* Si quieres, puedes insertar contenido centrado en cada caja */
/* ejemplo (comentado): */
/*
.box::after{
  content:"";
  display:block;
  width:100%;
  height:100%;
}
*/

/* REGALO */
.present{
    background-color: #10354c;
}
.regalo {
  width: 410px;
  margin: 0 auto;
  cursor: pointer;
  padding-top: 150px;
}
.caja, .tapa {
  background:
    -webkit-radial-gradient(white 10%, transparent 15.1%),
    -webkit-radial-gradient(white 7%, transparent 15.1%),
  #f80000;
  background-position: 0 0, 25px 25px;
  background-size: 50px 50px;
  position: relative;
  margin: 0 auto;
}
.caja {
  width: 400px;
  height: 250px;
}
.tapa {
  width: 400px;
  height: 70px;
  box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
  z-index: 1;
  padding: 0 2px;
  background-color: #f80000;
  /* transiciones */
  top: 0;
  left: 0;
  transition: 
    top ease-out 0.5s,
    left ease-out 0.5s,
    transform ease-out 0.5s;
}
.caja span, .tapa span {
  position: absolute;
  display: block;
  background: rgba(239, 184, 16, 0.8);
  box-shadow: 1px 2px 3px rgba(0,0,0,0.1);
}
.caja span:first-child {
  width: 100%;
  height: 60px;
  top: 80px;
}
.caja span:last-child, .tapa span {
  width: 60px;
  height: 100%;
  left: 170px;
}
.tapa span {
  left: 172px;
}
.promo {
  font-size: 30px;
  color: wheat;
  text-align: center;
  position: relative;
  height: 0;
  top: 10px;
  transition: all ease-out 0.7s;
}
.promo p {
  font-size: 24px;
  margin: 0;
}
.promo h2 {
  font-size: 40px;
  margin: 0;
}

/* Efecto hover */
.regalo:hover .tapa {
  top: -100px;
  transform: rotateZ(10deg);
  left: 10px;
}
.regalo:hover .promo {
  top: -80px;
}

footer{
    background-color: #10354c;
    color: wheat;
}

/* Contenedor flotante del zoom */
.bento-zoom-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 9999;
}

/* Activo */
.bento-zoom-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Caja ampliada */
.bento-zoom-card {
  background: white;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  transform: scale(.6);
  transition: transform .35s ease;
  max-width: 80vw;
  max-height: 80vh;
  overflow: auto;
}

.bento-zoom-card.active {
  transform: scale(1);
}


/* En el zoom mostrar el texto completo sin line-clamp */
.bento-zoom-card .bento-content p {
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
  text-overflow: unset !important;
  max-height: none !important;
}

/* Mantener paddings y estilos del zoom */
.bento-zoom-card {
  border-radius: 18px;
  padding: 20px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
  transform: scale(.6);
  transition: transform .35s ease;
  max-width: 80vw;
  max-height: 80vh;
  overflow: auto;
  background: var(--zoom-bg, white) !important;
}