/* ══════════════════════════════════════
   base.css
   Variables, reset global, tipografía
══════════════════════════════════════ */

/* ── Variables ── */
:root {
  /* Colores principales */
  --c-verde:        #1b5e20;
  --c-verde-med:    #2e7d32;
  --c-verde-vivo:   #388e3c;
  --c-verde-light:  #e8f5e9;
  --c-azul:         #1a56db;
  --c-azul-dark:    #1040b0;
  --c-azul-light:   #e3f2fd;
  --c-dorado:       #f59e0b;
  --c-dorado-pale:  #fff8e1;
  --c-naranja:      #f97316;
  --c-rojo:         #b71c1c;

  /* Grises */
  --c-gris-1:       #f8f9fa;
  --c-gris-2:       #e9ecef;
  --c-gris-3:       #ced4da;
  --c-gris-txt:     #6c757d;
  --c-negro:        #0d1117;
  --c-blanco:       #ffffff;

  /* Tipografía */
  --f-display:      'Nunito', sans-serif;
  --f-body:         'IBM Plex Sans', sans-serif;

  /* Espaciado */
  --sp-xs:   .4rem;
  --sp-sm:   .8rem;
  --sp-md:   1.2rem;
  --sp-lg:   2rem;
  --sp-xl:   3rem;
  --sp-2xl:  4rem;
  --sp-3xl:  6rem;

  /* Radio */
  --r-sm:    4px;
  --r-md:    8px;
  --r-lg:    12px;
  --r-xl:    16px;
  --r-full:  9999px;

  /* Sombras */
  --shadow-sm:  0 1px 4px  rgba(0,0,0,.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:  0 8px 30px rgba(0,0,0,.13);
  --shadow-xl:  0 16px 48px rgba(0,0,0,.16);

  /* Transiciones */
  --t-fast:   .15s ease;
  --t-base:   .25s ease;
  --t-slow:   .45s ease;

  /* Ancho máximo */
  --max-w:    1200px;
}

/* ── Reset ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-negro);
  background: var(--c-blanco);
  overflow-x: hidden;
}

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

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: var(--f-body);
  cursor: pointer;
}

ul, ol { list-style: none; }

input, textarea, select {
  font-family: var(--f-body);
}

/* ── Container ── */
.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--sp-lg);
}

/* ── Topbar ── */
.topbar {
  background: var(--c-verde);
  color: rgba(255,255,255,.82);
  font-size: .7rem;
  padding: 5px var(--sp-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: .02em;
  gap: 1rem;
}
.topbar a {
  color: rgba(255,255,255,.82);
  transition: color var(--t-fast);
}
.topbar a:hover { color: #fff; text-decoration: underline; }
.topbar-right {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ── Sección helpers ── */
.section-kicker {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-azul);
  margin-bottom: .3rem;
  display: block;
}
.section-kicker--light { color: rgba(255,255,255,.55); }

.section-title {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 900;
  color: var(--c-negro);
  margin-bottom: var(--sp-md);
  line-height: 1.15;
}
.section-title span  { color: var(--c-azul); }
.section-title--white { color: #fff; }
.section-title--white span { color: var(--c-dorado); }

.section-nav {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--sp-lg);
  gap: 1rem;
}
.section-nav__title {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  font-weight: 900;
  color: var(--c-negro);
}
.ver-todas {
  font-size: .8rem;
  font-weight: 700;
  color: var(--c-azul);
  white-space: nowrap;
  transition: color var(--t-fast);
}
.ver-todas:hover { color: var(--c-azul-dark); text-decoration: underline; }

/* ── Reveal animation ── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Ticker ── */
.ticker {
  background: var(--c-dorado-pale);
  border-bottom: 1px solid #ffe082;
  padding: 8px var(--sp-lg);
  display: flex;
  align-items: center;
  gap: 1rem;
  overflow: hidden;
}
.ticker-badge {
  background: var(--c-dorado);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 3px 10px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  flex-shrink: 0;
}
.ticker-track-wrap { overflow: hidden; flex: 1; }
.ticker-track {
  display: flex;
  gap: 3rem;
  white-space: nowrap;
  animation: tickScroll 30s linear infinite;
}
.ticker-item {
  font-size: .78rem;
  color: #5d4037;
  font-weight: 500;
  flex-shrink: 0;
}
@keyframes tickScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Search overlay ── */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  padding-top: 100px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base);
}
.search-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.search-overlay-inner {
  max-width: 640px;
  width: 90%;
  margin-inline: auto;
  display: flex;
  gap: .75rem;
}
.search-overlay-input {
  flex: 1;
  padding: 14px 20px;
  font-size: 1.1rem;
  border: none;
  border-radius: var(--r-lg);
  outline: none;
  font-family: var(--f-body);
}
.search-overlay-close {
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.3);
  color: #fff;
  font-size: 1.1rem;
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  transition: background var(--t-fast);
}
.search-overlay-close:hover { background: rgba(255,255,255,.25); }