@import url('https://fonts.googleapis.com/css2?family=Gasoek+One&family=Poppins:wght@400;600;700;800;900&display=swap');

/* ==================== TOKENS ==================== */
:root{
  --teal:#025E73; --navy:#022840; --bg:#cfd2d4;
  --nav-h:72px; --line:#025E73;
  --stem:66px; --year-gap:12px;
}

/* ==================== BASE ==================== */
*{box-sizing:border-box}
html,body{
  height:100%; margin:0; background:var(--bg);
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,'Helvetica Neue',sans-serif;
  overflow-x:hidden;        /* sin scroll horizontal */
  overflow-y:auto;          /* evita cortes verticales */
}

/* ==================== NAVBAR ==================== */
.navbar{
  position:relative; z-index:5; width:100%; min-height:var(--nav-h);
  background:rgba(232,239,243,.95); border-bottom:1px solid rgba(0,0,0,.06);
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; flex-wrap:wrap; gap:10px;
}
.brand{
  font-family:'Gasoek One',cursive; letter-spacing:0.11em; color:var(--teal);
  font-size:clamp(22px,2.6vw,36px); white-space:nowrap; text-decoration:none;
}
.navlinks{ display:flex; gap:28px; align-items:center; justify-content:flex-end; flex:1; flex-wrap:wrap; }
.navbtn{
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
  border:0; border-radius:999px; padding:12px 22px; font-weight:900; letter-spacing:.06em;
  background:#f4f7f9; color:var(--teal);
  box-shadow:0 6px 16px rgba(0,0,0,.10), inset 0 0 0 3px rgba(2,40,64,.15);
}
.navbtn.is-active{ background:var(--teal); color:#e9f3f6; box-shadow:0 8px 20px rgba(2,94,115,.35); }

@media (max-width:900px){
  .navlinks{ gap:14px; }
  .navbtn{ padding:10px 16px; font-size:.9rem; }
}
@media (max-width:620px){
  .navbar{ row-gap:10px; justify-content:center; }
  .navlinks{ order:2; width:100%; justify-content:center; }
  .navbtn{ padding:8px 14px; font-size:.85rem; }
  .brand{ order:1; width:100%; text-align:left; }
}
.brand:focus{outline:none;}
.brand:focus-visible{outline:3px solid rgba(2,94,115,.45); outline-offset:2px;}

/* ==================== PAGE & LANGS ==================== */
.page{ width:min(1180px,94vw); margin:22px auto 40px; position:relative; }
.langs-wrap{ display:block; margin:12px 0 10px; }
.langs{
  list-style:none; display:flex; flex-wrap:wrap; gap:36px;
  align-items:center; justify-content:center; padding:0; margin:0 6px;
}
.langs li.w100{ flex:1 0 100%; display:flex; justify-content:center; margin-top:8px; }

.lang{
  appearance:none; border:0; background:transparent; color:var(--navy);
  font-weight:900; letter-spacing:.02em; font-size:clamp(18px,2.2vw,28px); cursor:pointer;
  font-family:'Poppins',sans-serif; position:relative; transition:color .12s ease, text-shadow .12s ease;
}
.lang:hover{ color:var(--teal); }
.lang.is-active{ color:var(--accent, #FF3366); text-shadow:0 1px 0 rgba(0,0,0,.03); }
.lang:focus-visible{ outline:3px solid rgba(2,94,115,.45); outline-offset:2px; }

/* ==================== LEYENDA (OCULTA) ==================== */
.legend{ display:none !important; }
.dot{ width:12px; height:12px; border-radius:50%; background:#FF3366; box-shadow:0 0 0 3px rgba(2,40,64,.15) inset; }

/* ==================== MAPA (vista general) ==================== */
.map-wrap{
  width:clamp(280px, 92vw, 1200px);
  margin:24px auto 20px;
  padding:0 10px;
  display:flex; justify-content:center; align-items:center;
}
.map-stage{
  position:relative;
  width:100%;
  aspect-ratio:16/9;               /* mantiene alto consistente */
  max-height:calc(100vh - 280px);  /* bajo header + idiomas */
  margin:0 auto;
  border:none; box-shadow:none; background:transparent;
}
.map-stage img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:center center; transform:none !important;
}
.map-stage img.loading{ opacity:.35; filter:grayscale(.3) contrast(.9); }

/* ==================== ACTIONS / PILLS ==================== */
.actions{ display:flex; justify-content:flex-start; padding:16px 6px 0; }
.pill{
  display:inline-flex; align-items:center; justify-content:center; padding:10px 18px; border-radius:999px;
  border:0; background:#f4f7f9; color:var(--teal); font-weight:900; letter-spacing:.06em;
  box-shadow:0 6px 16px rgba(0,0,0,.10), inset 0 0 0 3px rgba(2,40,64,.15); cursor:pointer;
}
.pill:hover{ box-shadow:0 8px 20px rgba(2,94,115,.28), inset 0 0 0 3px rgba(2,40,64,.15); }
.pill--ghost{ background:transparent; color:var(--navy); border:3px solid rgba(2,40,64,.25); }

/* ==================== AVISO (tooltip) ==================== */
#btnAviso{ position:fixed; left:24px; bottom:24px; z-index:50; }
.aviso-tip{
  position:fixed; left:24px; bottom:110px; width:min(560px,92vw);
  background:#244654; border-radius:18px; padding:20px;
  border:3px solid rgba(2,40,64,.35); color:#f9fcfe; box-shadow:0 10px 28px rgba(0,0,0,.25);
  font-size:15px; line-height:1.6; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .15s ease, transform .15s ease, visibility 0s linear .15s; z-index:30; pointer-events:auto;
}
.aviso-tip.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
.aviso-tip h4{
  margin:0 0 12px; font-family:'Gasoek One'; letter-spacing:.015em; font-size:20px; color:#fff; font-weight:10; text-align: center;-webkit-text-stroke:0.6px #000;
}
.aviso-tip p{
  margin:0; color:#f1f5f8; white-space:pre-line; letter-spacing:.015em; -webkit-text-stroke:0.4px #000;
}

/* (Compat) si existiera un <dialog id="modalAviso">, lo ocultamos */
#modalAviso{ display:none !important; }
#modalAviso::backdrop{ background:transparent !important; }

/* ==================== LANG DOCK ==================== */
.lang-dock{
  position:absolute; left:20px; top:12px; width:min(320px, 28vw);
  background:#eef3f6; border:3px solid rgba(2,40,64,.25); border-radius:14px;
  overflow:hidden; box-shadow:0 12px 24px rgba(0,0,0,.18); z-index:2; display:none;
}
.lang-dock.is-visible{ display:block; }
.lang-dock .dock-title{
  background:#244654; color:#fff; font-weight:900; letter-spacing:.03em;
  padding:10px 12px; font-size:15px; font-family:'Poppins',sans-serif;
}
.lang-dock img{ display:block; width:100%; height:auto; }
@media (max-width:860px){
  .lang-dock{ left:12px; top:10px; width:min(260px, 42vw); }
}

/* ==================== VISTA DETALLE ==================== */
.lang-detail{ width:clamp(280px,92vw,1200px); margin:120px auto 20px; }

.detail-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:28px;
  align-items:center;              /* centra verticalmente los items (video vs col derecha) */
  justify-items:center;            /* centra cada columna en X */
  width:clamp(280px, 92vw, 1200px);
  margin:24px auto 20px;
}

.detail-video{
  width:85%;
  max-width:860px;

  align-self:center;               /* asegura centrado vertical del video */
  justify-self:center;
}
.detail-video video{
  width:100%; height:100%;
  border-radius:14px; box-shadow:0 10px 22px rgba(0,0,0,.28);
}

/* Columna derecha: texto arriba, mapa debajo y centrado */
.detail-info{
  display:grid;
  grid-template-rows:auto auto;
  row-gap:26px;
  align-items:start;               /* texto arriba, mapa no se pega al fondo */
  justify-items:center;            /* centra contenido horizontalmente */
  text-align:center;
}

/* Wrapper mapa centrado */
.detail-map{ width:100%; display:flex; justify-content:center; }
.detail-map img{
  width:min(82%, 680px);
  height:auto;
  display:block;
  margin-inline:auto;              /* centra la imagen en su contenedor */
  box-shadow:none; border-radius:12px;
}

/* ===== Responsive detalle ===== */
@media (max-width:900px){
  .detail-grid{ grid-template-columns:1fr; gap:20px; align-items:start; }
  .detail-video{ width:92%; max-width:760px; align-self:start; }
  .detail-info p{ max-width:720px; padding:0 8px; }
  .detail-map img{ width:82%; }
}

/* ==================== UTIL ==================== */
.is-hidden{ display:none !important; }