/* ==========================================================================
   Claretianas Latinoamérica — sitio público
   Recreación en CSS real (con :hover, media queries, etc.) del prototipo
   Claude Design (Sitio Claretianas.dc.html). Paleta y tipografía tomadas
   1:1 del prototipo; los "style-hover" inline del prototipo se vuelven
   clases con :hover reales.
   ========================================================================== */

:root{
  --primary:#8F1A2F;
  --primary-dark:#5e0f1d;
  --primary-fg:#ffffff;
  --foreground:#2a060c;
  --muted:#7a4550;
  --secondary:#fbebec;
  --card:#ffffff;
  --border: rgba(143,26,47,.16);
  --font-display:'Fraunces', serif;
  --font-body:'Inter', system-ui, sans-serif;
  --header-h: 160px;
  --header-h-scrolled: 84px;
}

*, *::before, *::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--foreground);
  background:#ffffff;
}

a{ color:var(--primary); }
a:hover{ color:var(--primary-dark); }

img{ display:block; max-width:100%; }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:16px; top:-60px; z-index:100;
  background:#fff; color:var(--primary); padding:10px 16px; border-radius:4px;
  font-weight:600; text-decoration:none; transition:top .2s ease;
}
.skip-link:focus{ top:16px; }

@keyframes cloudsDrift{ from{ background-position-x:0 } to{ background-position-x:-1200px } }

/* — header — */
.site-header{
  position:fixed; inset-inline:0; top:0; z-index:50;
  height:var(--header-h); transition:height .4s ease; overflow:visible;
}
.site-header.is-scrolled{ height:var(--header-h-scrolled); }

.site-header__clouds{
  position:absolute; left:0; top:100%; width:200%; height:130px;
  transform:translateY(-52%); pointer-events:none; z-index:1;
}
.site-header__bg{ position:absolute; inset:0; background:#ffffff; z-index:2; }

.site-header__inner{
  position:relative; z-index:3; max-width:1280px; height:100%;
  margin:0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:0 24px;
}

.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand__mark{ width:56px; height:56px; flex:none; border-radius:22%; object-fit:cover; }
.brand__name{ font-family:var(--font-display); font-size:22px; font-weight:600; line-height:1.1; color:var(--primary); }
.brand__tag{ font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--primary); opacity:.7; }

.main-nav{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.main-nav a{
  border-radius:999px; padding:8px 14px; font-size:14px; font-weight:500;
  color:var(--primary); opacity:.85; text-decoration:none; transition:background .2s ease, opacity .2s ease;
}
.main-nav a:hover{ background:rgba(143,26,47,.08); opacity:1; }

.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:999px; border:1px solid var(--border);
  background:#fff; color:var(--primary); cursor:pointer;
}

/* — hero — */
.hero{
  position:relative; display:flex; min-height:100vh; align-items:flex-end;
  overflow:hidden; padding-bottom:96px; padding-top:220px;
}
.hero__photo{
  position:absolute; inset:0; width:100%; height:112%; object-fit:cover;
  will-change:transform;
}
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(143,26,47,.95), rgba(143,26,47,.55) 55%, rgba(143,26,47,.7));
}
.hero__inner{
  position:relative; max-width:1280px; margin:0 auto; width:100%; padding:0 24px; color:#fff;
}
.hero__content{ max-width:640px; }
.hero__eyebrow{
  margin-bottom:24px; display:flex; align-items:center; gap:12px;
  font-size:12px; font-weight:600; letter-spacing:.35em; text-transform:uppercase; color:rgba(255,255,255,.8);
}
.hero__eyebrow-line{ height:1px; width:48px; background:rgba(255,255,255,.6); }
.hero h1{
  font-family:var(--font-display); font-size:64px; font-weight:600; line-height:1.05; margin:0;
}
.hero h1 em{ font-style:normal; color:rgba(255,255,255,.9); }
.hero p{ margin-top:24px; max-width:520px; font-size:18px; color:rgba(255,255,255,.85); }
.hero__actions{ margin-top:40px; display:flex; gap:16px; flex-wrap:wrap; }

.btn-pill{
  display:inline-flex; align-items:center; gap:8px; border-radius:999px;
  padding:12px 24px; font-size:14px; font-weight:600; text-decoration:none;
  transition:background .2s ease;
}
.btn-pill--solid{ background:#fff; color:var(--primary); }
.btn-pill--solid:hover{ background:var(--secondary); }
.btn-pill--outline{ border:1px solid rgba(255,255,255,.7); color:#fff; }
.btn-pill--outline:hover{ background:rgba(255,255,255,.1); }

.icon{ width:16px; height:16px; display:inline-block; vertical-align:middle; }
.icon-sm{ width:14px; height:14px; }
.icon-lg{ width:24px; height:24px; }
.icon-xl{ width:80px; height:80px; }

/* — sections — */
.section{ padding:96px 24px; opacity:0; transform:translateY(32px); transition:opacity .7s ease, transform .7s ease; }
.section.is-visible{ opacity:1; transform:translateY(0); }
.section--tint{ background:var(--secondary); }
.section__inner{ max-width:1280px; margin:0 auto; }
.eyebrow{
  margin-bottom:12px; display:flex; align-items:center; gap:12px;
  font-size:12px; font-weight:600; letter-spacing:.35em; text-transform:uppercase; color:var(--primary);
}
.eyebrow-line{ height:1px; width:40px; background:var(--primary); }
.section h2{
  max-width:640px; font-family:var(--font-display); font-size:44px; font-weight:600; margin:0 0 40px;
}
.section-lead{ max-width:640px; font-size:18px; color:var(--muted); margin:0 0 48px; }

/* — quiénes somos — */
.quienes-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(380px,1fr)); gap:48px; align-items:center; }
.quienes-copy{ display:flex; flex-direction:column; gap:24px; font-size:18px; line-height:1.7; color:var(--muted); }
.quienes-copy p{ margin:0; }
.quienes-copy strong{ color:var(--foreground); }
.stats-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding-top:24px; }
.stat{ border-left:2px solid var(--primary); padding-left:16px; }
.stat__value{ font-family:var(--font-display); font-size:30px; font-weight:600; color:var(--primary); }
.stat__label{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }

.figure{ position:relative; }
.figure img{ width:100%; aspect-ratio:4/5; object-fit:cover; box-shadow:0 24px 48px -12px rgba(42,6,12,.35); }
.figure__accent{ position:absolute; bottom:-24px; right:-24px; width:180px; height:180px; border:2px solid var(--primary); z-index:-1; }
.figure__accent-2{ position:absolute; left:-24px; top:-24px; width:110px; height:110px; background:rgba(143,26,47,.08); z-index:-1; }

/* — misión — */
.mission-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
.mission-card{
  position:relative; overflow:hidden; border-radius:4px; border:1px solid var(--border);
  background:var(--card); padding:32px; box-shadow:0 1px 2px rgba(42,6,12,.05);
  transition:transform .25s ease, box-shadow .25s ease;
}
.mission-card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -12px rgba(42,6,12,.15); }
.mission-card__icon{
  margin-bottom:24px; display:flex; height:56px; width:56px; align-items:center; justify-content:center;
  border-radius:999px; background:rgba(143,26,47,.1); color:var(--primary);
}
.mission-card h3{ font-family:var(--font-display); font-size:22px; font-weight:600; margin:0 0 12px; }
.mission-card p{ margin:0; color:var(--muted); }

.quote-banner{ margin-top:64px; overflow:hidden; border-radius:4px; background:var(--primary); color:#fff; }
.quote-banner__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.quote-banner img{ width:100%; height:100%; min-height:280px; object-fit:cover; }
.quote-banner__copy{ display:flex; flex-direction:column; justify-content:center; gap:16px; padding:56px; }
.quote-banner__kicker{ font-size:12px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.7); }
.quote-banner blockquote{ font-family:var(--font-display); font-size:28px; font-style:italic; line-height:1.35; margin:0; }
.quote-banner cite{ font-size:14px; color:rgba(255,255,255,.8); font-style:normal; }

/* — organización — */
.org-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px; }
.org-card{ border-radius:4px; border:1px solid var(--border); background:var(--card); padding:24px; transition:border-color .2s ease; }
.org-card:hover{ border-color:var(--primary); }
.org-card .icon{ color:var(--primary); margin-bottom:16px; display:block; }
.org-card__label{ font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--primary); }
.org-card__place{ margin-top:8px; font-family:var(--font-display); font-size:20px; font-weight:600; }

/* — biblioteca — */
.library-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,2fr)); gap:48px; align-items:center; }
.library-grid figure img{ width:100%; aspect-ratio:4/5; object-fit:cover; box-shadow:0 20px 40px -12px rgba(42,6,12,.25); }
.library-copy p{ font-size:18px; color:var(--muted); margin:0 0 32px; }
.library-list{ border-radius:4px; border:1px solid var(--border); background:var(--card); overflow:hidden; }
.library-item{
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px;
  border-top:1px solid var(--border); transition:background .2s ease; text-decoration:none; color:inherit;
}
.library-item:first-child{ border-top:none; }
.library-item:hover{ background:var(--secondary); }
.library-item__title{ font-weight:500; }
.library-item__tag{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.library-item .icon{ color:var(--primary); }

/* — dónde estamos — */
.where-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:40px; }
.where-copy{ display:flex; flex-direction:column; gap:24px; }
.where-copy p{ font-size:18px; color:var(--muted); margin:0; }
.where-copy a{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--primary); text-decoration:none; }
.countries-grid{
  grid-column:span 2/auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:12px; align-content:start;
}
.country-chip{
  display:flex; align-items:center; gap:8px; border-radius:4px; border:1px solid var(--border);
  background:var(--card); padding:12px 16px; font-size:14px; font-weight:500;
  transition:background .2s ease, color .2s ease; text-decoration:none; color:var(--foreground);
}
.country-chip:hover{ background:var(--primary); color:#fff; }
.country-chip:hover .icon{ color:#fff; }
.country-chip .icon{ color:var(--primary); transition:color .2s ease; flex:none; }
.country-chip__tag{
  border-radius:999px; background:rgba(143,26,47,.1); color:var(--primary); font-size:10px;
  font-weight:600; text-transform:uppercase; letter-spacing:.05em; padding:2px 8px; transition:background .2s ease, color .2s ease;
}
.country-chip:hover .country-chip__tag{ background:rgba(255,255,255,.25); color:#fff; }
a.country-chip .icon:last-child{ margin-left:auto; opacity:.6; }

/* — mapa de "Dónde Estamos" — */
.where-map-wrap{ margin-top:48px; }
.where-map{
  width:100%; height:520px; border-radius:4px; border:1px solid var(--border);
  box-shadow:0 20px 40px -12px rgba(42,6,12,.15); overflow:hidden; background:var(--secondary);
}
/* Tiles de OpenStreetMap desaturados para que no compitan con la paleta
   maroon del resto del sitio; los pines (dibujados a mano, ver map.js)
   quedan igual de nítidos porque no forman parte de esta capa. */
.where-map .leaflet-tile-pane{ filter:saturate(.5) brightness(1.04) contrast(.95); }
.where-map .leaflet-control-attribution{ font-size:10px; background:rgba(255,255,255,.85); }
.map-pin{ background:transparent; border:none; }
.map-popup{ font-family:var(--font-body); font-size:13px; line-height:1.5; }
.map-popup strong{ display:block; font-family:var(--font-display); font-size:15px; margin-bottom:2px; color:var(--foreground); }
.map-popup__tag{
  display:inline-block; margin-top:2px; border-radius:999px; background:var(--secondary); color:var(--primary);
  font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; padding:2px 8px;
}
.map-popup a{ display:inline-block; margin-top:6px; font-weight:600; color:var(--primary); text-decoration:none; }
.map-popup a:hover{ text-decoration:underline; }

/* — noticias — */
.news-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:32px; }
.news-card{
  display:flex; flex-direction:column; overflow:hidden; border-radius:4px; background:var(--card);
  box-shadow:0 1px 2px rgba(42,6,12,.06); transition:transform .25s ease, box-shadow .25s ease;
  text-decoration:none; color:inherit;
}
.news-card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -12px rgba(42,6,12,.18); }
.news-card__media{
  position:relative; height:208px; overflow:hidden; background:linear-gradient(135deg,var(--primary),rgba(143,26,47,.6));
}
.news-card__media img{ width:100%; height:100%; object-fit:cover; }
.news-card__media-icon{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:.2; }
.news-card__tag{
  position:absolute; left:16px; top:16px; border-radius:999px; background:rgba(255,255,255,.95);
  padding:4px 12px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--primary);
}
.news-card__body{ display:flex; flex:1; flex-direction:column; gap:12px; padding:24px; }
.news-card__date{ font-size:12px; color:var(--muted); }
.news-card h3{ font-family:var(--font-display); font-size:20px; font-weight:600; line-height:1.3; margin:0; }
.news-card p{ margin:0; font-size:14px; color:var(--muted); }
.news-card__more{ margin-top:auto; display:flex; align-items:center; gap:8px; padding-top:12px; font-size:14px; font-weight:600; color:var(--primary); }
.news-empty{ color:var(--muted); font-size:16px; }

/* — footer — */
.site-footer{ background:var(--primary); color:#fff; }
.site-footer__inner{ max-width:1280px; margin:0 auto; padding:64px 24px; }
.footer-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:48px; }
.footer-brand{ grid-column:span 2/auto; }
.footer-brand__head{ display:flex; align-items:center; gap:12px; }
.footer-brand__head img{ width:48px; height:48px; flex:none; border-radius:22%; object-fit:cover; }
.footer-brand__name{ font-family:var(--font-display); font-size:20px; font-weight:600; }
.footer-brand__tag{ font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.7); }
.footer-brand p{ margin-top:24px; max-width:380px; font-size:14px; color:rgba(255,255,255,.8); }
.footer-social{ margin-top:24px; display:flex; gap:12px; }
.footer-social a{
  display:flex; height:40px; width:40px; align-items:center; justify-content:center; border-radius:999px;
  border:1px solid rgba(255,255,255,.3); color:#fff; text-decoration:none; transition:background .2s ease, color .2s ease;
}
.footer-social a:hover{ background:#fff; color:var(--primary); }
.footer-col-title{ margin-bottom:16px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.footer-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:14px; }
.footer-list a{ color:rgba(255,255,255,.85); text-decoration:none; }
.footer-list a:hover{ color:#fff; text-decoration:underline; }
.footer-list li{ color:rgba(255,255,255,.85); }
.footer-bottom{ margin-top:48px; border-top:1px solid rgba(255,255,255,.15); padding-top:24px; text-align:center; font-size:12px; color:rgba(255,255,255,.6); }
.footer-bottom a{ color:rgba(255,255,255,.75); text-decoration:underline; text-underline-offset:2px; }
.footer-bottom a:hover{ color:#fff; }

/* — página de noticia individual — */
.article-hero{ padding:180px 24px 48px; max-width:820px; margin:0 auto; }
.article-tag{ display:inline-block; border-radius:999px; background:var(--secondary); color:var(--primary); padding:4px 14px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.article-hero h1{ font-family:var(--font-display); font-size:42px; font-weight:600; margin:16px 0 8px; line-height:1.15; }
.article-date{ font-size:13px; color:var(--muted); }
.article-media{ max-width:1000px; margin:0 auto 48px; padding:0 24px; }
.article-media img{ width:100%; max-height:480px; object-fit:cover; border-radius:4px; }
.article-body{ max-width:720px; margin:0 auto; padding:0 24px 96px; font-size:18px; line-height:1.8; color:var(--foreground); }
.article-body p{ margin:0 0 24px; }
.article-back{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--primary); text-decoration:none; margin-bottom:24px; }
.breadcrumbs{ max-width:820px; margin:140px auto 0; padding:0 24px; font-size:13px; color:var(--muted); }
.breadcrumbs a{ color:var(--muted); text-decoration:none; }
.breadcrumbs a:hover{ color:var(--primary); }

/* — contenido legal (política de privacidad, etc.) — */
.legal-body h2{ font-family:var(--font-display); font-size:26px; font-weight:600; margin:40px 0 16px; color:var(--foreground); }
.legal-body h2:first-of-type{ margin-top:8px; }
.legal-body p{ font-size:16px; line-height:1.75; }
.legal-body ul{ margin:0 0 24px; padding-left:20px; color:var(--foreground); }
.legal-body li{ margin-bottom:8px; line-height:1.6; }
.legal-body .article-back{ margin-top:16px; margin-bottom:0; }

/* — página 404 — */
.error-page{ min-height:80vh; display:flex; align-items:center; justify-content:center; padding:200px 24px 96px; text-align:center; }
.error-page__inner{ max-width:560px; }
.error-page__code{
  display:block; font-family:var(--font-display); font-size:22px; font-weight:600;
  letter-spacing:.3em; color:var(--primary); opacity:.55; margin-bottom:16px;
}
.error-page h1{ font-family:var(--font-display); font-size:38px; font-weight:600; margin:0 0 16px; }
.error-page p{ font-size:17px; color:var(--muted); margin:0 0 40px; }
.error-page__actions{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-bottom:32px; }
.btn-pill--brand{ background:var(--primary); color:#fff; }
.btn-pill--brand:hover{ background:var(--primary-dark); }
.btn-pill--brand-outline{ border:1px solid var(--primary); color:var(--primary); }
.btn-pill--brand-outline:hover{ background:var(--secondary); }
.error-page__links{ display:flex; gap:24px; flex-wrap:wrap; justify-content:center; font-size:14px; }
.error-page__links a{ color:var(--muted); text-decoration:none; }
.error-page__links a:hover{ color:var(--primary); text-decoration:underline; }

/* — listado de noticias (index) — */
.news-index{ padding:180px 24px 96px; max-width:1280px; margin:0 auto; }
.news-index h1{ font-family:var(--font-display); font-size:44px; margin:0 0 40px; }

/* — responsive — */
@media (max-width: 880px){
  .hero h1{ font-size:40px; }
  .section h2{ font-size:32px; }
  :root{ --header-h:88px; --header-h-scrolled:72px; }
  .main-nav{
    position:fixed; inset:0; top:72px; background:#fff; z-index:60;
    flex-direction:column; align-items:flex-start; gap:0; padding:16px 24px;
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
  }
  .main-nav.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .main-nav a{ width:100%; padding:14px 8px; border-bottom:1px solid var(--border); border-radius:0; }
  .nav-toggle{ display:flex; }
  .site-header__inner{ padding:0 16px; }
  .brand__mark{ width:44px; height:44px; }
  .footer-brand{ grid-column:span 1/auto; }
  .breadcrumbs{ margin-top:96px; }
  .article-hero, .news-index{ padding-top:120px; }
  .error-page{ padding-top:140px; }
  .where-map{ height:360px; }
}

@media (max-width: 560px){
  .hero h1{ font-size:32px; }
  .hero{ padding-bottom:64px; }
  .stats-row{ grid-template-columns:1fr; gap:16px; }
  .countries-grid{ grid-column:1/-1; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
}