:root{
  --crema:#FBF3E7;
  --crema-2:#F3E6D3;
  --terracota:#C1633A;
  --terracota-osc:#9A4A29;
  --verde:#33473A;
  --verde-osc:#22302A;
  --oro:#C9A15A;
  --texto:#2B2420;
  --texto-suave:#6B5E52;
  --blanco:#FFFDF9;
  --sombra: 0 20px 50px rgba(43,36,32,.15);
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Nunito Sans', -apple-system, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--texto);
  background:var(--crema);
  overflow-x:hidden;
}
h1,h2,h3{font-family:var(--serif); margin:0;}
p{margin:0;}
section{position:relative;}

/* ===================== SOBRE ===================== */
#sobre{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 50% 30%, #4a3428, #22150f 80%);
  transition: opacity .9s ease, visibility .9s ease;
}
#sobre.oculto{ opacity:0; visibility:hidden; pointer-events:none; }

.sobre-caja{
  position:relative;
  width:min(360px, 82vw);
  aspect-ratio: 4 / 2.7;
  background: linear-gradient(160deg, var(--crema-2), var(--crema));
  border-radius:6px;
  box-shadow: var(--sombra);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding-bottom:2rem;
}
.sobre-solapa{
  position:absolute; top:0; left:0; right:0; height:58%;
  background: linear-gradient(160deg, var(--crema), #E9D9BF);
  clip-path: polygon(0 0, 100% 0, 50% 78%);
  border-radius:6px 6px 0 0;
}
.sobre-sello{
  position:absolute; top:38%; left:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--terracota), var(--terracota-osc));
  color:var(--crema); font-family:var(--serif); font-size:.85rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 6px 14px rgba(0,0,0,.35);
  z-index:5; transition: transform .25s ease;
}
.sobre-sello:hover{ transform:translate(-50%,-50%) scale(1.08); }
.sobre-para{ font-family:var(--serif); font-style:italic; color:var(--texto-suave); font-size:.95rem; margin-top:.5rem;}
.sobre-nombre{ font-family:var(--serif); font-size:1.4rem; color:var(--texto); }

/* ===================== HERO ===================== */
#hero{
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:2rem 1.5rem;
  background: linear-gradient(180deg, var(--crema), var(--crema-2));
}
.hero-eyebrow{
  text-transform:uppercase; letter-spacing:.3em; font-size:.75rem;
  color:var(--terracota-osc); font-weight:700; margin-bottom:1rem;
}
#hero-titulo{ font-size:clamp(2rem, 6vw, 3.4rem); font-weight:600; max-width:16ch; line-height:1.15; color:var(--verde-osc);}
.hero-fechas{
  display:flex; align-items:center; gap:1.5rem; margin-top:2.5rem;
}
.hero-fecha-num{ display:block; font-family:var(--serif); font-size:1.3rem; color:var(--terracota-osc);}
.hero-fecha-label{ display:block; font-size:.75rem; letter-spacing:.15em; text-transform:uppercase; color:var(--texto-suave); margin-top:.25rem;}
.hero-fecha-sep{ color:var(--oro); font-size:1.3rem; }
.hero-scroll{ position:absolute; bottom:2.5rem; display:flex; flex-direction:column; align-items:center; gap:.5rem; opacity:.7;}
.hero-scroll span{
  width:1px; height:38px; background:var(--terracota-osc);
  animation: bajar 1.8s ease-in-out infinite;
}
.hero-scroll p{ font-size:.7rem; letter-spacing:.1em; color:var(--texto-suave);}
@keyframes bajar{ 0%{transform:scaleY(0); transform-origin:top;} 50%{transform:scaleY(1); transform-origin:top;} 50.01%{transform-origin:bottom;} 100%{transform:scaleY(0); transform-origin:bottom;} }

/* ===================== SECCIONES GENERALES ===================== */
.seccion-titulo{
  text-align:center; font-size:clamp(1.8rem,4vw,2.6rem); color:var(--verde-osc);
  padding-top:5rem; margin-bottom:.5rem;
}
.seccion-sub{ text-align:center; color:var(--texto-suave); max-width:40ch; margin:0 auto 3rem; }

/* ===================== LÍNEA DE TIEMPO ===================== */
#linea-tiempo{ background:var(--crema); padding-bottom:5rem;}
.tiempo-lista{
  max-width:900px; margin:0 auto; padding:2rem 1.5rem 0;
  position:relative;
}
.tiempo-lista::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:2px;
  background:linear-gradient(var(--oro), var(--terracota));
  transform:translateX(-50%);
}
.hito{
  position:relative; width:50%; padding:1.5rem 2.5rem;
  opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;
}
.hito.visible{ opacity:1; transform:none; }
.hito:nth-child(odd){ left:0; text-align:right; }
.hito:nth-child(even){ left:50%; text-align:left; }
.hito::after{
  content:""; position:absolute; top:1.7rem; width:14px; height:14px; border-radius:50%;
  background:var(--terracota); border:3px solid var(--crema); box-shadow:0 0 0 2px var(--oro);
}
.hito:nth-child(odd)::after{ right:-8px; }
.hito:nth-child(even)::after{ left:-8px; }
.hito-fecha{ font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--terracota-osc); font-weight:700;}
.hito-titulo{ font-family:var(--serif); font-size:1.25rem; margin:.35rem 0 .5rem; color:var(--verde-osc);}
.hito-texto{ color:var(--texto-suave); font-size:.95rem; line-height:1.5;}
.hito-foto{
  margin-top:.75rem; width:100%; max-width:220px; aspect-ratio:4/3; border-radius:8px;
  background:var(--crema-2); border:1.5px dashed #C9B99C;
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; color:#A6957A; text-align:center; padding:.5rem;
}
.hito:nth-child(odd) .hito-foto{ margin-left:auto; }

@media (max-width:720px){
  .tiempo-lista::before{ left:18px; }
  .hito, .hito:nth-child(even){ width:100%; left:0; text-align:left; padding-left:2.75rem; padding-right:1rem; }
  .hito:nth-child(odd)::after, .hito:nth-child(even)::after{ left:10px; }
  .hito:nth-child(odd) .hito-foto{ margin-left:0; }
}

/* ===================== MAPA ===================== */
#mapa-seccion{ background:var(--verde-osc); padding-bottom:5rem;}
#mapa-seccion .seccion-titulo, #mapa-seccion .seccion-sub{ color:var(--crema); }
#mapa-seccion .seccion-sub{ color:#C9BCA6; }
#mapa{
  width:min(1100px, 92vw); height:min(560px, 70vh); margin:0 auto;
  border-radius:12px; overflow:hidden; box-shadow:var(--sombra);
  border:4px solid var(--verde);
}
.mapa-leyenda{
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;
  max-width:900px; margin:1.5rem auto 0; padding:0 1rem;
}
.mapa-leyenda span{
  font-size:.72rem; padding:.35rem .7rem; border-radius:99px;
  background:rgba(255,255,255,.08); color:#E7DCC8; border:1px solid rgba(255,255,255,.15);
}

/* ===================== CARTA ===================== */
#carta-seccion{
  background: linear-gradient(180deg, var(--crema-2), var(--crema));
  padding: 6rem 1.5rem;
  display:flex; justify-content:center;
}
.carta-hoja{
  max-width:640px; background:var(--blanco); padding:3rem clamp(1.5rem,5vw,4rem);
  border-radius:4px; box-shadow:var(--sombra); position:relative;
}
.carta-hoja::before{
  content:""; position:absolute; top:0; left:0; right:0; height:6px;
  background:linear-gradient(90deg, var(--terracota), var(--oro));
  border-radius:4px 4px 0 0;
}
.carta-destinatario{ font-family:var(--serif); font-size:1.4rem; color:var(--terracota-osc); margin-bottom:1.5rem;}
.carta-cuerpo p{ font-family:var(--serif); font-size:1.05rem; line-height:1.85; color:var(--texto); margin-bottom:1.3rem; }
.carta-firma{ font-family:var(--serif); font-style:italic; text-align:right; color:var(--texto-suave); margin-top:1.5rem;}

/* ===================== FOOTER ===================== */
#pie{
  text-align:center; padding:3rem 1rem 4rem; background:var(--crema);
  color:var(--texto-suave);
}
#pie p:first-child{ font-family:var(--serif); font-style:italic; font-size:1.1rem; color:var(--verde-osc); margin-bottom:.4rem;}
.pie-fecha{ font-size:.75rem; letter-spacing:.05em; }

/* ===================== MODAL LUGAR ===================== */
.modal{
  position:fixed; inset:0; z-index:200; background:rgba(20,14,10,.65);
  display:flex; align-items:center; justify-content:center; padding:1.5rem;
}
.modal[hidden]{ display:none; }
.modal-caja{
  background:var(--blanco); max-width:420px; width:100%; border-radius:10px;
  padding:1.75rem; position:relative; box-shadow:var(--sombra);
}
.modal-cerrar{
  position:absolute; top:.6rem; right:.75rem; background:none; border:none;
  font-size:1.5rem; color:var(--texto-suave); cursor:pointer; line-height:1;
}
.modal-foto{
  width:100%; aspect-ratio:4/3; border-radius:8px; margin-bottom:1rem;
  background:var(--crema-2); border:1.5px dashed #C9B99C;
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; color:#A6957A; text-align:center; padding:.5rem;
}
#modal-nombre{ color:var(--verde-osc); }
.modal-region{ font-size:.8rem; color:var(--terracota-osc); text-transform:uppercase; letter-spacing:.08em; margin:.25rem 0 .9rem;}
.modal-historia{ color:var(--texto-suave); line-height:1.6; font-size:.95rem;}

/* Leaflet popup tweaks */
.leaflet-popup-content-wrapper{ border-radius:8px; font-family:var(--sans); }