/* ===========================================================================
   Glaciar Perito Moreno — style.css
   Paleta "hielo" (azul/celeste). Diseño editorial-educativo, diferenciado del
   resto de la red. Sobre Bootstrap 5.3 (se carga antes).
   =========================================================================== */
:root{
  /* Azules del hielo */
  --ice-950:#07263c;   /* texto fuerte / fondos oscuros */
  --ice-900:#0b3a5e;
  --ice-700:#155e86;
  --ice-600:#1877a6;   /* primario */
  --ice-500:#2a93c4;
  --ice-400:#5bb4de;   /* celeste */
  --ice-300:#9ad4ef;
  --ice-200:#c7e8f8;
  --ice-100:#e4f3fc;
  --ice-050:#f1f8fd;   /* fondo de página */
  --glacier-white:#fbfdff;
  --ink:#16313f;       /* cuerpo de texto */
  --ink-soft:#4a6472;  /* texto secundario */
  --line:#d6e6f0;
  --accent:#0fb0c9;    /* cian grieta, para detalles */
  --sun:#f3b64a;       /* cálido puntual (CTA, destellos) */

  --font-head:"Fraunces", Georgia, "Times New Roman", serif;
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --maxread:68ch;
  --radius:16px;
  --shadow:0 1px 2px rgba(11,58,94,.06), 0 10px 30px -12px rgba(11,58,94,.22);
  --shadow-sm:0 1px 2px rgba(11,58,94,.08), 0 4px 14px -8px rgba(11,58,94,.18);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--ice-050);
  line-height:1.72;
  font-size:1.04rem;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto}
.img-responsive{max-width:100%;height:auto;display:block;margin:0 auto}

h1,h2,h3,h4{font-family:var(--font-head);color:var(--ice-900);line-height:1.2;letter-spacing:-.01em;font-weight:600}
a{color:var(--ice-700);text-underline-offset:2px;text-decoration-color:var(--ice-300)}
a:hover{color:var(--ice-600)}
.container{max-width:1120px}

/* ---------- Navbar + mega-menú ---------- */
.site-nav{
  background:rgba(251,253,255,.92);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--line);
  padding-top:.4rem;padding-bottom:.4rem;
  position:relative;z-index:1050;
}
.site-nav .navbar-brand img{height:40px;width:auto}
.site-nav .nav-link{color:var(--ice-900);font-weight:500;padding:.5rem .85rem;border-radius:10px}
.site-nav .nav-link:hover{color:var(--ice-600);background:var(--ice-100)}
.site-nav .nav-link.active{color:var(--ice-600)}
.site-nav .dropdown-menu{
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  padding:.5rem;margin-top:.5rem;min-width:250px;
}
.site-nav .dropdown-menu li{list-style:none;margin:0;padding:0}
.site-nav .dropdown-item{border-radius:9px;padding:.5rem .75rem;color:var(--ice-900);white-space:normal;font-weight:500}
.site-nav .dropdown-item:hover,.site-nav .dropdown-item:focus{background:var(--ice-100);color:var(--ice-700)}
.site-nav .dropdown-item.active{background:var(--ice-100);color:var(--ice-700)}
.site-nav .dropdown-item.ver-todos{border-top:1px solid var(--line);margin-top:.35rem;padding-top:.6rem;color:var(--ice-600);font-weight:600;border-radius:0}

/* ---------- Breadcrumb ---------- */
.breadcrumb-wrap{background:transparent;padding:.9rem 0 0}
.breadcrumb{margin:0;font-size:.86rem}
.breadcrumb-item a{color:var(--ink-soft);text-decoration:none}
.breadcrumb-item.active{color:var(--ink-soft)}
.breadcrumb-item+.breadcrumb-item::before{color:var(--ice-300)}

/* ---------- Hero / banner ---------- */
.banner{position:relative}
.banner .container{position:relative;z-index:1}
body.home .banner{
  background:
    linear-gradient(90deg, rgba(7,38,60,.85) 0%, rgba(7,38,60,.6) 36%, rgba(7,38,60,.2) 68%, rgba(7,38,60,.05) 100%),
    linear-gradient(0deg, rgba(7,38,60,.5), rgba(7,38,60,0) 42%),
    url("../img/glaciar-perito-moreno-hero.jpg") center/cover no-repeat,
    var(--ice-900);
  color:#eaf6ff;
  padding:5.4rem 0 4.4rem;
  overflow:hidden;
}
body.home .banner h1{color:#fff;font-size:clamp(2.2rem,5vw,3.4rem);max-width:17ch;text-shadow:0 2px 20px rgba(7,38,60,.6)}
body.home .banner .lead{color:#eaf6ff;max-width:60ch;font-size:1.18rem;text-shadow:0 1px 12px rgba(7,38,60,.55)}
body.home .banner .lead strong{color:#fff}
body.home .banner a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.6)}

body.interior .banner{
  background:linear-gradient(180deg, var(--ice-100), var(--ice-050));
  border-bottom:1px solid var(--line);
  padding:2.2rem 0 1.6rem;
}
body.interior .banner h1{font-size:clamp(1.9rem,3.6vw,2.7rem);max-width:20ch}
body.interior .banner .lead{color:var(--ink-soft);max-width:var(--maxread);font-size:1.16rem;margin-top:.4rem}

/* ---------- Cuerpo del artículo ---------- */
main{padding-bottom:3rem}
.after-banner{padding-top:1.8rem}
article p,article ul,article ol{max-width:var(--maxread)}
article h2{
  font-size:clamp(1.5rem,2.4vw,1.95rem);margin:2.2rem 0 .8rem;padding-top:.4rem;
  position:relative;
}
article h2::before{
  content:"";display:block;width:46px;height:4px;border-radius:3px;margin-bottom:.7rem;
  background:linear-gradient(90deg,var(--accent),var(--ice-400));
}
article h3{font-size:1.22rem;margin:1.5rem 0 .5rem;color:var(--ice-700)}
article p{margin:0 0 1rem}
article strong{color:var(--ice-900)}
.lead{font-size:1.18rem;line-height:1.7}

/* Listas bonitas */
article ul:not(.breadcrumb):not(.navbar-nav){list-style:none;padding-left:0}
article ul:not(.breadcrumb):not(.navbar-nav)>li{position:relative;padding-left:1.5rem;margin:.35rem 0}
article ul:not(.breadcrumb):not(.navbar-nav)>li::before{
  content:"";position:absolute;left:.15rem;top:.62em;width:.5rem;height:.5rem;border-radius:50%;
  background:var(--ice-400);box-shadow:0 0 0 3px var(--ice-100);
}

/* ---------- Datos rápidos (ficha) ---------- */
.datos-rapidos{
  background:var(--glacier-white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:1.1rem 1.3rem;margin:1.6rem 0;
}
.datos-rapidos .dr-title{
  font-family:var(--font-body);font-size:.74rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .6rem;
}
.datos-rapidos dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem 1.4rem;margin:0}
.datos-rapidos dt{font-size:.8rem;color:var(--ink-soft);margin:0}
.datos-rapidos dd{margin:.05rem 0 0;font-family:var(--font-head);font-weight:600;font-size:1.28rem;color:var(--ice-900)}
.datos-rapidos dd small{font-family:var(--font-body);font-weight:400;font-size:.8rem;color:var(--ink-soft);display:block}

/* ---------- Figuras y diagramas ---------- */
figure.foto-contenido,figure.diagrama{margin:1.8rem 0;max-width:820px}
figure.foto-contenido img{border-radius:var(--radius);box-shadow:var(--shadow-sm)}
figure.diagrama{
  background:var(--glacier-white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:1.2rem;
}
figure.diagrama svg{display:block;width:100%;height:auto}
figcaption{font-size:.86rem;color:var(--ink-soft);margin-top:.6rem;line-height:1.5}
figure.diagrama figcaption{padding:0 .2rem}

/* ---------- Aside / nota al margen ---------- */
.nota{
  border-left:4px solid var(--ice-400);background:var(--ice-100);
  border-radius:0 12px 12px 0;padding:.9rem 1.1rem;margin:1.5rem 0;max-width:var(--maxread);
}
.nota p:last-child{margin-bottom:0}
.nota .nota-t{font-weight:600;color:var(--ice-700);display:block;margin-bottom:.2rem}

/* Alerta de dato sensible/actual (retroceso) */
.aviso-actual{
  border:1px solid #f0c98a;background:linear-gradient(180deg,#fff8ec,#fffdf8);
  border-radius:var(--radius);padding:1rem 1.2rem;margin:1.6rem 0;max-width:var(--maxread);
}
.aviso-actual .nota-t{color:#b5791b}

/* ---------- Término del glosario ---------- */
.termino{
  border-bottom:1px dotted var(--accent);cursor:help;font-weight:500;color:var(--ice-700);
  text-decoration:none;
}

/* ---------- Línea de tiempo (rupturas) ---------- */
.timeline{list-style:none;padding-left:0;margin:1.4rem 0;max-width:var(--maxread)}
.timeline>li{position:relative;padding:.1rem 0 1rem 1.8rem;border-left:2px solid var(--ice-200);margin-left:.4rem}
.timeline>li::before{content:"";position:absolute;left:-7px;top:.35rem;width:12px;height:12px;border-radius:50%;background:var(--ice-500);box-shadow:0 0 0 4px var(--ice-100)}
.timeline>li::marker{content:none}
.timeline .t-year{font-family:var(--font-head);font-weight:600;color:var(--ice-900)}

/* ---------- FAQ ---------- */
.faq{margin-top:2.4rem}
.faq .accordion{--bs-accordion-border-color:var(--line);--bs-accordion-border-radius:12px;max-width:860px}
.faq .accordion-item{border:1px solid var(--line);border-radius:12px !important;margin-bottom:.6rem;overflow:hidden}
.faq .accordion-button{font-weight:600;color:var(--ice-900);background:var(--glacier-white)}
.faq .accordion-button:not(.collapsed){color:var(--ice-700);background:var(--ice-100);box-shadow:none}
.faq .accordion-button:focus{box-shadow:0 0 0 .2rem rgba(42,147,196,.25)}
.faq .accordion-body{color:var(--ink)}

/* ---------- Home: tarjetas de secciones ---------- */
.secciones{margin:2.4rem 0 1rem}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.2rem}
.sec-card{
  display:flex;flex-direction:column;background:var(--glacier-white);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1.4rem;text-decoration:none;color:inherit;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.sec-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--ice-300);color:inherit}
.sec-card .sec-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--ice-100);color:var(--ice-600);margin-bottom:.8rem}
.sec-card h3{margin:0 0 .3rem;font-size:1.18rem}
.sec-card p{margin:0;color:var(--ink-soft);font-size:.96rem;max-width:none}
.sec-card .sec-mas{margin-top:.8rem;font-weight:600;color:var(--ice-600);font-size:.92rem}

/* chips de público */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0 0}
.chips .chip{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:#eaf6ff;padding:.3rem .8rem;border-radius:999px;font-size:.86rem}

/* ---------- Interlinking "Seguir leyendo" ---------- */
.interlinking{
  margin:2.6rem 0 0;background:var(--ice-100);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.2rem 1.4rem;max-width:860px;
}
.interlinking h2{margin:0 0 .6rem;font-size:1.2rem}
.interlinking h2::before{display:none}
.interlinking ul{list-style:none;padding:0;margin:0}
.interlinking li{padding:.3rem 0;border-bottom:1px dashed var(--ice-200)}
.interlinking li:last-child{border-bottom:0}
.interlinking a{font-weight:600}

/* ---------- CTA visita ---------- */
.cta-visita{
  background:linear-gradient(160deg,var(--ice-700),var(--ice-500));color:#fff;border-radius:var(--radius);
  padding:1.6rem 1.8rem;margin:2.2rem 0;box-shadow:var(--shadow);max-width:860px;
}
.cta-visita h2{color:#fff;margin-top:0}.cta-visita h2::before{background:rgba(255,255,255,.7)}
.cta-visita p{color:#e8f5ff;max-width:none}
.btn-hielo{display:inline-block;background:#fff;color:var(--ice-700);font-weight:600;border-radius:999px;padding:.6rem 1.3rem;text-decoration:none;margin-top:.4rem}
.btn-hielo:hover{color:var(--ice-900);transform:translateY(-1px)}

/* ---------- Footer ---------- */
.site-footer{background:var(--ice-950);color:#c4dcec;margin-top:2rem}
.site-footer a{color:#c4dcec;text-decoration:none}
.site-footer a:hover{color:#fff}
.site-footer .foot-title{font-family:var(--font-head);color:#fff;font-size:1.05rem;margin:0 0 .6rem}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{padding:.18rem 0;font-size:.92rem}
.foot-brand p{font-size:.92rem;color:#9fc2d6;max-width:40ch}
.social a{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.08);margin-right:.4rem;color:#c4dcec}
.social a:hover{background:var(--ice-600);color:#fff}
.footer-bottom{background:#05192a;font-size:.84rem;color:#7fa6bd}

/* ---------- Responsive ---------- */
@media (max-width:991.98px){
  .site-nav .dropdown-menu{box-shadow:none;border:0;padding:.25rem .25rem .75rem;min-width:100%}
  body.home .banner{padding:3rem 0 2.4rem}
}
@media (max-width:575.98px){
  body{font-size:1.01rem}
  .datos-rapidos dl{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Galería + lightbox ---------- */
.galeria-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:1.6rem 0}
.galeria-grid a{display:block;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm);line-height:0;background:var(--ice-100)}
.galeria-grid img{width:100%;height:175px;object-fit:cover;transition:transform .35s ease}
.galeria-grid a:hover img{transform:scale(1.07)}
.lb{position:fixed;inset:0;background:rgba(7,38,60,.93);display:none;align-items:center;justify-content:center;z-index:2000}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:84vh;border-radius:10px;box-shadow:0 14px 50px rgba(0,0,0,.55)}
.lb figcaption{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:#eaf6ff;font-size:.95rem;padding:0 1rem}
.lb-btn{position:absolute;background:rgba(255,255,255,.15);border:0;color:#fff;width:48px;height:48px;border-radius:50%;font-size:1.7rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.lb-btn:hover{background:rgba(255,255,255,.3)}
.lb-close{top:16px;right:16px}
.lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.lb-next{right:16px;top:50%;transform:translateY(-50%)}
@media (max-width:575.98px){.galeria-grid img{height:135px}.lb-prev{left:6px}.lb-next{right:6px}.lb-btn{width:42px;height:42px}}