/* =====================================================================
   Campaña de Útiles Escolares 2026 — Costa Rica Indígena
   Sistema de diseño extraído directamente del sitio real
   (costaricaindigena.org) para continuidad visual total.
   ===================================================================== */

:root{
  /* --- Paleta institucional (valores exactos tomados de costaricaindigena.org) --- */
  --verde:        #345137;   /* verde institucional primario */
  --verde-oscuro: #1a291c;   /* hover de botones y links */
  --dorado:       #ffcd05;   /* acento fuerte, números de contadores */
  --dorado-2:     #fcb424;   /* acento secundario */
  --gris-boton:   #504e4a;   /* botón secundario */
  --negro-titulo: #0a0500;   /* color de encabezados */
  --texto:        #111518;   /* texto de cuerpo */
  --crema:        #fbf6ed;   /* fondo de tarjetas */
  --borde-claro:  #edeff2;
  --gris-medio:   #c3c4c6;
  --blanco:       #ffffff;

  /* --- Tipografía --- */
  --font-titulos: 'Righteous', cursive, sans-serif;
  --font-cuerpo:  'Poppins', sans-serif;
  --font-numeros: 'Yeseva One', serif;

  /* --- Radios y sombras (el sitio usa radios pequeños, nada de "pill") --- */
  --radio-boton: 3px;
  --radio-tarjeta: 5px;
  --sombra-suave: 0 20px 80px 0 rgba(193, 199, 212, 0.3);

  --ancho-maximo: 1290px;
}

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

html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body{
  margin: 0;
  font-family: var(--font-cuerpo);
  font-size: 16px;
  line-height: 1.65;
  color: var(--texto);
  background: var(--blanco);
  overflow-x: hidden;
}

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

a{ color: var(--verde); text-decoration: none; }
a:hover{ color: var(--verde-oscuro); }

h1, h2, h3, h4{
  font-family: var(--font-titulos);
  font-weight: 400;
  color: var(--negro-titulo);
  line-height: 1.35;
  margin: 0 0 20px;
}
h1{ font-size: 40px; }
h2{ font-size: 34px; }
h3{ font-size: 26px; }
h4{ font-size: 20px; }

p{ margin: 0 0 1.2em; }
p:last-child{ margin-bottom: 0; }

.contenedor{
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 0 24px;
}

section{ padding: 90px 0; }
section[id]{ scroll-margin-top: 96px; }

/* Foco visible accesible en toda la página */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline: 3px solid var(--dorado-2);
  outline-offset: 2px;
}

/* --- Idiomas: ES visible por defecto (marcado en el HTML con el atributo
   `hidden` en cada elemento data-lang="en"). script.js alterna la
   propiedad `.hidden` de cada elemento al cambiar de idioma. La regla
   [hidden] con !important garantiza que gane sobre cualquier otro
   `display` definido en este archivo (inline-block, flex, etc). --- */
[hidden]{ display: none !important; }

/* Animación de aparición al hacer scroll */
.revelar{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.revelar.visible{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .revelar{ opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   BOTONES
   ===================================================================== */
.boton{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-cuerpo);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  padding: 14px 30px;
  border-radius: var(--radio-boton);
  border: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .15s ease;
  white-space: nowrap;
}
.boton:active{ transform: scale(0.97); }

.boton-primario{ background: var(--verde); color: var(--blanco); }
.boton-primario:hover{ background: var(--verde-oscuro); color: var(--blanco); }

.boton-secundario{ background: var(--gris-boton); color: var(--blanco); }
.boton-secundario:hover{ background: #3a3835; color: var(--blanco); }

.boton-fantasma{
  background: transparent;
  color: var(--blanco);
  border: 1.5px solid var(--blanco);
}
.boton-fantasma:hover{ background: var(--blanco); color: var(--verde); }

.boton-dorado{ background: var(--dorado); color: var(--negro-titulo); }
.boton-dorado:hover{ background: var(--dorado-2); color: var(--negro-titulo); }

.boton-bloque{ width: 100%; }

/* =====================================================================
   HEADER
   ===================================================================== */
.header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 22px 0;
  transition: background-color .3s ease, padding .3s ease, box-shadow .3s ease;
}
.header .contenedor{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.header-logo{ display: block; height: 46px; }
.header-logo img{ height: 100%; width: auto; }
.header-logo .logo-blanco{ display: block; }
.header-logo .logo-verde{ display: none; }

.header-acciones{ display: flex; align-items: center; gap: 14px; }

.toggle-idioma{
  display: flex;
  border: 1.5px solid rgba(255,255,255,.6);
  border-radius: 999px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
}
.toggle-idioma button{
  background: transparent;
  border: none;
  color: var(--blanco);
  padding: 6px 13px;
  cursor: pointer;
  font-family: var(--font-cuerpo);
  transition: background-color .2s ease, color .2s ease;
}
.toggle-idioma button[aria-pressed="true"]{
  background: var(--blanco);
  color: var(--verde);
}

.header .boton-fantasma{ font-size: 14px; padding: 10px 22px; }

/* Estado: scrolleado -> fondo blanco, logo verde, texto oscuro */
.header.header--scrolled{
  background: var(--blanco);
  box-shadow: 0 2px 18px rgba(10,5,0,.08);
  padding: 14px 0;
}
.header--scrolled .header-logo .logo-blanco{ display: none; }
.header--scrolled .header-logo .logo-verde{ display: block; }
.header--scrolled .toggle-idioma{ border-color: var(--gris-medio); }
.header--scrolled .toggle-idioma button{ color: var(--texto); }
.header--scrolled .toggle-idioma button[aria-pressed="true"]{ background: var(--verde); color: var(--blanco); }
.header--scrolled .boton-fantasma{ color: var(--verde); border-color: var(--verde); }
.header--scrolled .boton-fantasma:hover{ background: var(--verde); color: var(--blanco); }

@media (max-width: 640px){
  .header-logo{ height: 36px; }
  .header-acciones{ gap: 8px; }
  .toggle-idioma button{ padding: 6px 10px; }
  .header .boton-fantasma{ padding: 8px 16px; font-size: 13px; }
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 200px 0 120px;
  background:
    linear-gradient(rgba(10,5,0,.62), rgba(10,5,0,.68)),
    url('assets/foto-hero-nino-combo-montana.jpg') center / cover no-repeat;
}
.hero-contenido{ max-width: 720px; }
.hero-etiqueta{
  display: inline-block;
  color: var(--dorado);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 14px;
  margin-bottom: 18px;
}
.hero h1{
  color: var(--blanco);
  font-size: 48px;
  margin-bottom: 22px;
}
.hero p{
  color: rgba(255,255,255,.92);
  font-size: 18px;
  max-width: 620px;
  margin-bottom: 34px;
}
.hero-acciones{ display: flex; flex-wrap: wrap; gap: 16px; }

@media (max-width: 689px){
  .hero{ padding: 160px 0 90px; min-height: auto; }
  .hero h1{ font-size: 32px; }
  .hero p{ font-size: 16px; }
}

/* =====================================================================
   SECCIONES GENERALES DE CONTENIDO
   ===================================================================== */
.seccion-blanca{ background: var(--blanco); }
.seccion-crema{ background: var(--crema); }

.fila-dos-columnas{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 70px;
  align-items: center;
}
.fila-dos-columnas.invertido{ grid-template-columns: 1fr 1.1fr; }
.fila-dos-columnas.invertido .col-imagen{ order: 2; }

.col-imagen img{
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-suave);
}

.etiqueta-seccion{
  display: inline-block;
  color: var(--verde);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

@media (max-width: 999px){
  .fila-dos-columnas, .fila-dos-columnas.invertido{
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .fila-dos-columnas.invertido .col-imagen{ order: 0; }
  section{ padding: 64px 0; }
}

/* =====================================================================
   CONTADOR DE IMPACTO
   ===================================================================== */
.impacto{
  position: relative;
  padding: 110px 0;
  background:
    linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.78)),
    url('assets/foto-grupo-celebrando-rancho.jpg') center / cover no-repeat fixed;
  text-align: center;
}
@supports (-webkit-touch-callout: none){
  .impacto{ background-attachment: scroll; } /* iOS no soporta fixed correctamente */
}
.impacto h2{ color: var(--blanco); margin-bottom: 50px; }
.impacto-grid{
  display: flex;
  justify-content: center;
}
.impacto-item{
  position: relative;
  max-width: 480px;
}
.impacto-item::before{
  content: '';
  position: absolute;
  top: -18px; left: 50%;
  transform: translateX(-50%);
  width: 44px; height: 3px;
  background: var(--dorado);
  border-radius: 2px;
}
.impacto-numero{
  font-family: var(--font-numeros);
  font-size: 84px;
  color: var(--dorado);
  line-height: 1;
  margin-bottom: 14px;
}
.impacto-etiqueta{ color: var(--blanco); font-size: 16px; }

@media (max-width: 689px){
  .impacto-numero{ font-size: 60px; }
}

/* =====================================================================
   "POR QUÉ ESTO IMPORTA" — lista de 4 puntos con íconos de línea
   ===================================================================== */
.puntos-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px;
  margin-top: 50px;
}
.punto{
  background: var(--blanco);
  border: 1px solid var(--borde-claro);
  border-radius: var(--radio-tarjeta);
  padding: 32px;
  display: flex;
  gap: 20px;
}
.punto-icono{
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--crema);
  display: flex; align-items: center; justify-content: center;
}
.punto-icono svg{ width: 24px; height: 24px; stroke: var(--verde); }
.punto h4{ margin-bottom: 6px; }
.punto p{ font-size: 15px; color: #4b5157; }

@media (max-width: 689px){
  .puntos-grid{ grid-template-columns: 1fr; }
}

/* =====================================================================
   KIT ESCOLAR
   ===================================================================== */
.kit-resumen{
  background: var(--crema);
  border-radius: var(--radio-tarjeta);
  padding: 28px 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  margin-top: 30px;
}
.kit-precio{ text-align: center; }
.kit-precio .monto{
  font-family: var(--font-numeros);
  font-size: 38px;
  color: var(--verde);
  line-height: 1;
}
.kit-precio .monto-crc{ font-size: 14px; color: #4b5157; margin-top: 4px; }
.kit-lista{
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 8px 22px;
  flex: 1;
  min-width: 220px;
}
.kit-lista li{
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.kit-lista li::before{
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--dorado-2);
  flex-shrink: 0;
}

@media (max-width: 400px){
  .kit-resumen{ flex-direction: column; align-items: stretch; text-align: center; }
  .kit-lista{ justify-content: center; }
}

/* =====================================================================
   "IMAGINÁ ESTE MOMENTO" — bloque emocional
   ===================================================================== */
.momento{
  background: var(--verde);
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.momento-texto{
  padding: 70px 60px;
  color: var(--blanco);
}
.momento-texto h2{ color: var(--blanco); }
.momento-texto p{ color: rgba(255,255,255,.9); font-size: 17px; }
.momento-imagen{
  position: relative;
  min-height: 340px;
  background: var(--verde-oscuro);
}
.momento-imagen img{
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
}

@media (max-width: 999px){
  .momento{ grid-template-columns: 1fr; }
  .momento-texto{ padding: 50px 34px; order: 2; }
  .momento-imagen{ order: 1; min-height: 260px; }
}

/* =====================================================================
   ¿CÓMO DONAR? — métodos de pago
   ===================================================================== */
.metodos-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 50px;
}
.metodo-card{
  background: var(--blanco);
  border: 1px solid var(--borde-claro);
  border-radius: var(--radio-tarjeta);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.metodo-icono{
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--crema);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.metodo-icono svg{ width: 26px; height: 26px; stroke: var(--verde); fill: none; }
.metodo-card h4{ margin-bottom: 8px; }
.metodo-card p{ font-size: 13.5px; color: #4b5157; min-height: 42px; margin-bottom: 0; }

/* Empuja lo que sigue (número/botón) al fondo de la tarjeta, para que
   los botones de las 4 tarjetas queden alineados en la misma línea sin
   importar que el contenido de arriba tenga distinta altura. */
.metodo-accion{ margin-top: auto; padding-top: 20px; position: relative; }
.metodo-accion .boton-bloque{ white-space: normal; }

.sinpe-numero{
  font-family: var(--font-numeros);
  font-size: 26px;
  color: var(--verde);
  background: var(--crema);
  border-radius: var(--radio-boton);
  padding: 10px 14px;
  margin-bottom: 16px;
  letter-spacing: .02em;
}
.copiar-feedback{
  display: block;
  position: absolute;
  left: 0; right: 0; top: 100%;
  font-size: 12px;
  color: var(--verde);
  font-weight: 600;
  margin-top: 8px;
}

@media (max-width: 999px){
  .metodos-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .metodos-grid{ grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   SOBRE NOSOTROS (mini)
   ===================================================================== */
.sobre-nosotros{
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.sobre-nosotros .cedula{
  font-size: 13px;
  color: #6b7178;
  margin-top: 18px;
}
.sobre-fotos{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.sobre-fotos img{
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radio-tarjeta);
}

@media (max-width: 640px){
  .sobre-fotos{ grid-template-columns: 1fr; }
  .sobre-fotos img{ height: 220px; }
}

/* =====================================================================
   Utilidades responsive compartidas
   ===================================================================== */
@media (max-width: 999px){
  h1{ font-size: 34px; }
  h2{ font-size: 28px; }
}