/* ============================================================
   Ex Alumnos CASJT — hoja de estilos compartida
   Usada por index.html, historia.html, organizacion.html
   ============================================================ */

:root{
  --verde: #16362A;
  --verde-oscuro: #0A1F17;
  --vino: #6E1B27;
  --vino-oscuro: #43101A;
  --oro: #C9A24B;
  --oro-claro: #E4CD8F;
  --crema: #F3ECDD;
  --texto-claro: #F6F1E6;
  --texto-oscuro: #201B12;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*{ box-sizing: border-box; margin:0; padding:0; }

html{ scroll-behavior: smooth; }

body{
  background: var(--verde-oscuro);
  color: var(--texto-claro);
  font-family: var(--font-body);
  line-height: 1.65;
  overflow-x: hidden;
}

/* ---------- LANGUAGE TOGGLE ---------- */
body[data-lang="es"] .lang-en{ display:none; }
body[data-lang="en"] .lang-es{ display:none; }

a, button{ font-family: inherit; }
a:focus-visible, button:focus-visible{
  outline: 3px solid var(--oro);
  outline-offset: 3px;
}

/* ---------- NAV ---------- */
#siteNav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.2rem;
  background: rgba(10,31,23,0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(201,162,75,0.18);
}
#siteNav .brand{
  font-family: var(--font-display);
  font-weight:700;
  color: var(--crema);
  font-size: 0.95rem;
  white-space:nowrap;
  text-decoration:none;
}
#siteNav .navlinks{
  display:flex;
  gap: 1.1rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
}
#siteNav .navlinks a{
  color: rgba(246,241,230,0.75);
  text-decoration:none;
  white-space:nowrap;
}
#siteNav .navlinks a:hover, #siteNav .navlinks a.activo{ color: var(--oro-claro); }

.nav-social{
  display:flex;
  align-items:center;
  gap: 0.85rem;
  flex-shrink:0;
}
.nav-social a{
  color: rgba(246,241,230,0.75);
  font-size: 1.05rem;
  line-height:1;
  transition: color 0.2s ease, transform 0.2s ease;
}
.nav-social a:hover{ color: var(--oro-claro); transform: translateY(-1px); }

#langToggle{
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--oro);
  color: var(--oro-claro);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  flex-shrink:0;
}
#langToggle:hover{ background: rgba(0,0,0,0.6); transform: translateY(-1px); }

@media (max-width: 720px){
  #siteNav .navlinks{ display:none; }
}

section[id]{ scroll-margin-top: 66px; }

section{
  position: relative;
  width: 100%;
  padding: 6.5rem 1.5rem;
}

.wrap{
  max-width: 780px;
  margin: 0 auto;
}

h1,h2,h3{ font-family: var(--font-display); line-height: 1.15; }

/* ---------- HERO ---------- */
.hero{
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201,162,75,0.14), transparent 60%),
    linear-gradient(180deg, var(--verde-oscuro) 0%, var(--verde) 100%);
  padding: 5rem 1.5rem 2rem;
}

.hero .kicker{
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--oro-claro);
  margin-bottom: 1.4rem;
}

.hero h1{
  font-size: clamp(2.6rem, 9vw, 5.2rem);
  font-weight: 900;
  color: var(--crema);
  letter-spacing: 0.01em;
}

.hero .sub{
  margin-top: 1.4rem;
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  color: var(--oro-claro);
  max-width: 32ch;
  margin-left:auto; margin-right:auto;
}

.hero .microcopy{
  margin-top: 1.2rem;
  font-size: 0.92rem;
  color: rgba(246,241,230,0.7);
  max-width: 38ch;
  margin-left:auto; margin-right:auto;
}

.hero-ctas{
  margin-top: 2rem;
  display:flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  justify-content:center;
}

.btn-primary, .btn-secondary{
  display:inline-block;
  text-decoration:none;
  font-weight:700;
  font-size: 0.95rem;
  padding: 0.85rem 1.7rem;
  border-radius: 999px;
  transition: transform 0.2s ease;
}
.btn-primary{ background: var(--oro); color: var(--verde-oscuro); }
.btn-secondary{ background: transparent; color: var(--oro-claro); border: 1px solid rgba(201,162,75,0.55); }
.btn-primary:hover, .btn-secondary:hover{ transform: translateY(-2px); }

.hero .fecha{
  margin-top: 2.6rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: rgba(246,241,230,0.6);
}

.scrollcue{
  margin-top: 2.2rem;
  font-size: 0.85rem;
  color: rgba(246,241,230,0.55);
  animation: bob 2s ease-in-out infinite;
}

@keyframes bob{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(8px); }
}

/* ---------- ACT LABELS ---------- */
.acto-label{
  display:inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--oro);
  border: 1px solid rgba(201,162,75,0.4);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  margin-bottom: 1.6rem;
}

.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.in{
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .scrollcue{ animation:none !important; }
}

p{ margin-bottom: 1.1rem; font-size: 1.05rem; color: rgba(246,241,230,0.92); }

/* Enlaces de texto dentro de párrafos (no botones): color discreto acorde a la paleta,
   en vez del azul por defecto del navegador */
.wrap a:not(.cta-btn):not(.btn-primary):not(.btn-secondary){
  color: var(--oro-claro);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wrap a:not(.cta-btn):not(.btn-primary):not(.btn-secondary):hover{ color: var(--oro); }
.wrap a:not(.cta-btn):not(.btn-primary):not(.btn-secondary):visited{ color: var(--oro-claro); }
.s-cream a:not(.cta-btn):not(.btn-primary):not(.btn-secondary),
.s-transparencia a:not(.cta-btn):not(.btn-primary):not(.btn-secondary){
  color: var(--vino-oscuro);
}
.s-cream a:not(.cta-btn):not(.btn-primary):not(.btn-secondary):hover,
.s-transparencia a:not(.cta-btn):not(.btn-primary):not(.btn-secondary):hover{ color: var(--vino); }
.lead{ font-size: 1.25rem; font-family: var(--font-display); color: var(--crema); }
.fuente{ font-size: 0.78rem; color: rgba(246,241,230,0.5); margin-top:-0.6rem; }

h2.titulo{ font-size:clamp(1.8rem,5vw,2.6rem); color:var(--crema); margin-bottom:1.4rem; }

/* ---------- SECTION BACKGROUNDS (color narrative) ---------- */
.s-quepaso{ background: var(--vino-oscuro); }
.s-enjuego{ background: linear-gradient(180deg, var(--vino-oscuro) 0%, var(--verde) 100%); }
.s-historia{ background: var(--verde); }
.s-humanas{ background: linear-gradient(180deg, var(--verde) 0%, var(--vino-oscuro) 100%); }
.s-plan{ background: linear-gradient(180deg, var(--vino-oscuro) 0%, var(--verde) 100%); }
.s-organiza{ background: var(--verde); }
.s-impacto{ background: var(--verde); }
.s-ayudar{ background: var(--verde-oscuro); text-align:center; }
.s-final{ background: var(--verde-oscuro); text-align:center; }
.s-cream{ background: var(--crema); color: var(--texto-oscuro); }

.s-transparencia{ background: var(--crema); color: var(--texto-oscuro); }
.s-transparencia p, .s-cream p{ color: rgba(32,27,18,0.85); }
.s-transparencia .lead, .s-cream .lead{ color: var(--vino-oscuro); }
.s-transparencia .acto-label, .s-cream .acto-label{ color: var(--vino-oscuro); border-color: rgba(110,27,39,0.35); }
.s-transparencia .fuente, .s-cream .fuente{ color: rgba(32,27,18,0.55); }

/* ---------- STATS / TIMELINE ---------- */
.linea-tiempo{
  margin: 2.5rem 0;
  border-left: 2px solid rgba(201,162,75,0.35);
  padding-left: 1.6rem;
}
.hito{ margin-bottom: 1.6rem; position: relative; }
.hito::before{
  content:'';
  position:absolute;
  left: -1.85rem;
  top: 0.3rem;
  width: 10px; height:10px;
  border-radius:50%;
  background: var(--oro);
}
.hito .anio{
  font-family: var(--font-display);
  font-weight:700;
  color: var(--oro-claro);
  display:block;
  margin-bottom:0.15rem;
}

.stat-row{
  display:flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin: 2.2rem 0 0.5rem;
}
.stat{
  flex: 1 1 150px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(201,162,75,0.25);
  border-radius: 10px;
  padding: 1.2rem 1rem;
  text-align:center;
}
.stat .num{
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--oro);
  display:block;
}
.stat .lbl{ font-size: 0.8rem; color: rgba(246,241,230,0.7); margin-top:0.3rem; }

/* ---------- EARTHQUAKE CARDS ---------- */
.sismo-box{ display:flex; gap: 1rem; margin: 2rem 0; flex-wrap: wrap; }
.sismo-card{
  flex:1 1 160px;
  background: rgba(0,0,0,0.22);
  border-left: 3px solid var(--oro);
  padding: 1.1rem 1.2rem;
  border-radius: 6px;
}
.sismo-card .mag{ font-family: var(--font-display); font-size: 1.8rem; color: var(--crema); font-weight:700; }
.sismo-card .det{ font-size: 0.85rem; color: rgba(246,241,230,0.7); margin-top:0.2rem;}

/* ---------- PENDING / IN-PROGRESS NOTICES (public-facing) ---------- */
.placeholder{
  border: 1.5px dashed rgba(246,241,230,0.35);
  border-radius: 10px;
  padding: 1.4rem;
  font-size: 0.92rem;
  color: rgba(246,241,230,0.75);
  margin: 1.2rem 0;
}
.s-transparencia .placeholder, .s-cream .placeholder{ border-color: rgba(32,27,18,0.25); color: rgba(32,27,18,0.75); }
.tag-pend{
  display:inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vino-oscuro);
  background: var(--oro-claro);
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  margin-bottom: 0.6rem;
}

/* ---------- TESTIMONIOS ---------- */
.testimonio{
  background: rgba(0,0,0,0.2);
  border-radius: 10px;
  padding: 1.5rem 1.6rem;
  margin: 1.4rem 0;
}
.testimonio .quien{ font-family: var(--font-display); color: var(--oro-claro); margin-top: 0.8rem; font-size: 0.95rem; }

/* ---------- GALLERY ---------- */
.galeria{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin: 2rem 0; }
.galeria .cel.grande{ grid-column: span 2; aspect-ratio: 16/9; }
.galeria .cel{
  aspect-ratio: 1/1;
  background: rgba(0,0,0,0.22);
  border: 1px dashed rgba(246,241,230,0.3);
  border-radius: 8px;
  display:flex; align-items:center; justify-content:center;
  font-size: 0.7rem; color: rgba(246,241,230,0.45);
  text-align:center; padding: 0.5rem;
  overflow:hidden;
}
.galeria .cel img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- PLAN / ROADMAP PHASES ---------- */
.fases{ display:flex; flex-direction:column; gap: 0.9rem; margin: 2rem 0; }
.fase{
  display:flex; gap: 1rem; align-items:flex-start;
  background: rgba(0,0,0,0.18);
  border-left: 3px solid var(--oro);
  border-radius: 6px;
  padding: 1rem 1.2rem;
}
.fase .n{ font-family: var(--font-display); font-weight:800; color: var(--oro); font-size:1.3rem; }
.fase p{ margin:0; font-size:0.95rem; }
.s-cream .fase{ background: rgba(0,0,0,0.05); border-left-color: var(--vino); }
.s-cream .fase p{ color: rgba(32,27,18,0.85); }

/* ---------- Q&A ---------- */
.qa{ margin: 2rem 0; display:flex; flex-direction:column; gap: 1.1rem; }
.qa-item .q{
  font-family: var(--font-display);
  font-weight:700;
  color: var(--vino-oscuro);
  margin-bottom: 0.3rem;
  font-size: 1.02rem;
}
.qa-item .a{ font-size: 0.95rem; color: rgba(32,27,18,0.85); margin-bottom:0; }

/* ---------- ROLES TABLE ---------- */
.roles-tabla{ width:100%; border-collapse:collapse; margin: 1.8rem 0; font-size:0.92rem; }
.roles-tabla th, .roles-tabla td{ text-align:left; padding: 0.7rem 0.8rem; border-bottom: 1px solid rgba(0,0,0,0.12); vertical-align:top; }
.roles-tabla th{ font-family: var(--font-display); color: var(--vino-oscuro); font-size:0.85rem; text-transform:uppercase; letter-spacing:0.04em; }
.roles-tabla td:first-child{ font-weight:600; white-space:nowrap; }

/* ---------- IMPACTO: LO PERDIDO / TIERS DE DONACIÓN ---------- */
.impacto-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.9rem;
  margin: 1.6rem 0 0.5rem;
}
.impacto-grid .stat .num{ font-size: 1.7rem; }

.perdida-libros{
  background: rgba(110,27,39,0.28);
  border-left: 3px solid var(--vino);
  border-radius: 8px;
  padding: 1rem 1.3rem;
  margin: 1.2rem 0 1.4rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--crema);
}
.otras-perdidas{ display:flex; flex-wrap:wrap; gap: 0.6rem; margin: 0.4rem 0 1.4rem; }
.chip{
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(201,162,75,0.3);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  color: rgba(246,241,230,0.85);
}
.impacto-hero{
  display:flex;
  align-items:center;
  gap: 1.4rem;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(201,162,75,0.3);
  border-radius: 12px;
  padding: 1.4rem 1.6rem;
  margin: 1.8rem 0;
}
.impacto-hero .num{
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  color: var(--oro);
  line-height:1;
}
.impacto-hero .txt{ font-size: 0.98rem; }
.impacto-hero .txt .nota{ display:block; font-size:0.78rem; color: rgba(246,241,230,0.55); margin-top:0.3rem; font-style: italic; }

.subtitulo{
  font-family: var(--font-display);
  color: var(--oro-claro);
  font-size: 1.25rem;
  margin: 2.2rem 0 0.6rem;
}
.s-cream .subtitulo{ color: var(--vino-oscuro); }

.tiers{ display:flex; flex-direction:column; gap: 0.8rem; margin: 1.4rem 0; }
.tier-card{
  display:flex;
  align-items:center;
  gap: 1.2rem;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(201,162,75,0.3);
  border-radius: 10px;
  padding: 1rem 1.3rem;
}
.tier-card .monto{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--oro);
  min-width: 78px;
}
.tier-card .item{ font-size: 0.98rem; color: rgba(246,241,230,0.92); }
.tier-card.pendiente .monto, .tier-card.pendiente .item{ color: rgba(246,241,230,0.5); font-style: italic; }

@media (max-width: 560px){
  .impacto-hero{ flex-direction:column; text-align:center; }
}

/* ---------- FOTOS REALES ---------- */
.foto-single{
  margin: 1.8rem 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(201,162,75,0.3);
}
.foto-single img{ width:100%; display:block; max-height: 480px; object-fit: cover; }
.foto-single .cap{
  font-size: 0.78rem;
  color: rgba(246,241,230,0.65);
  padding: 0.6rem 0.9rem;
  background: rgba(0,0,0,0.28);
}
.s-cream .foto-single .cap, .s-transparencia .foto-single .cap{ background: rgba(0,0,0,0.06); color: rgba(32,27,18,0.65); }

.foto-par{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  margin: 1.8rem 0;
}
.foto-par figure{ margin:0; border-radius:10px; overflow:hidden; border:1px solid rgba(201,162,75,0.3); }
.foto-par img{ width:100%; height: 230px; object-fit:cover; display:block; }
.foto-par figcaption{
  font-size: 0.75rem;
  text-align:center;
  padding: 0.5rem;
  background: rgba(0,0,0,0.28);
  color: rgba(246,241,230,0.7);
}
@media (max-width: 560px){ .foto-par{ grid-template-columns: 1fr; } }

/* ---------- MURO DE AGRADECIMIENTOS / ÉCHANOS UN CUENTO (quote wall) ---------- */
.s-cuentos{ background: var(--vino-oscuro); }

.muro-grid, .cuentos-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.1rem;
  margin: 2.2rem 0 1.4rem;
  text-align:left;
}
.quote-card{
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(201,162,75,0.28);
  border-radius: 12px;
  padding: 1.4rem 1.4rem 1.2rem;
}
.quote-card::before{
  content: '\201C';
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--oro);
  opacity: 0.55;
  line-height: 1;
  display:block;
  margin-bottom: 0.1rem;
}
.quote-card p{
  font-size: 0.92rem;
  color: rgba(246,241,230,0.9);
  margin-bottom: 0;
}
.muro-cta, .cuentos-cta{
  text-align:center;
  font-size: 0.92rem;
  color: rgba(246,241,230,0.75);
  margin-top: 0.6rem;
}

/* ---------- WAYS TO HELP / CARD GRIDS (3-up) ---------- */
.ayuda-cards, .cards-3{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
  margin: 2.4rem 0 1rem;
  text-align:left;
}
.ayuda-card, .card{
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(201,162,75,0.3);
  border-radius: 12px;
  padding: 1.5rem 1.3rem;
  display:flex; flex-direction:column;
}
.ayuda-card h3, .card h3{ color: var(--oro-claro); font-size: 1.15rem; margin-bottom: 0.5rem; }
.ayuda-card p, .card p{ font-size: 0.9rem; color: rgba(246,241,230,0.8); flex-grow:1; }
.s-cream .card p{ color: rgba(32,27,18,0.8); }
.s-cream .card h3{ color: var(--vino-oscuro); }
.s-cream .card{ background: rgba(0,0,0,0.05); border-color: rgba(110,27,39,0.25); }
.ayuda-card .cta-btn, .card .cta-btn{
  align-self:flex-start;
  text-decoration:none;
  background: var(--oro);
  color: var(--verde-oscuro);
  font-weight:700;
  font-size: 0.88rem;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  margin-top: 0.6rem;
  transition: transform 0.2s ease;
}
.ayuda-card .cta-btn:hover, .card .cta-btn:hover{ transform: translateY(-2px); }

@media (max-width: 720px){
  .ayuda-cards, .cards-3{ grid-template-columns: 1fr; }
}

/* ---------- COUNTERS ---------- */
.contadores{ display:flex; justify-content:center; gap: 2.2rem; flex-wrap: wrap; margin: 2.2rem 0 1rem; }
.contador{ min-width: 130px; }
.contador .num{ font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; color: var(--oro); display:block; }
.contador .lbl{ font-size: 0.8rem; color: rgba(246,241,230,0.7); margin-top: 0.3rem; }

.canales{ margin-top: 2rem; font-size: 0.9rem; color: rgba(246,241,230,0.65); }
.canales strong, .canales a{ color: var(--oro-claro); }
.canales a{ text-decoration:underline; }
.s-cream .canales strong, .s-cream .canales a{ color: var(--vino-oscuro); }

.cierre-cita{
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  color: var(--crema);
  max-width: 60ch;
  margin: 0 auto 1.5rem;
}

footer{
  background: var(--verde-oscuro);
  padding: 3rem 1.5rem 4rem;
  text-align:center;
  font-size: 0.78rem;
  color: rgba(246,241,230,0.45);
  border-top: 1px solid rgba(201,162,75,0.2);
}
footer .draft-tag{
  display:inline-block;
  margin-bottom: 0.8rem;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vino-oscuro);
  background: var(--oro-claro);
  padding: 0.25rem 0.7rem;
  border-radius: 4px;
}

@media (max-width: 560px){
  section{ padding: 4.5rem 1.2rem; }
  .galeria{ grid-template-columns: repeat(2, 1fr); }
  .galeria .cel.grande{ grid-column: span 2; }
}