/* ═══════════════════════════════════════════════════════════
   OYAGUE & MENDOZA — base.css
   Variables, reset, tipografía, layout base, cursor, animaciones
   Reemplaza: styles.css + dark-theme.css (variables/reset)
═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@300;400;500;600;700&family=Dancing+Script:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap');

/* ══════════════════════════════════════════════════════════
   VARIABLES — paleta unificada
══════════════════════════════════════════════════════════ */
:root {
  /* ─ Verde corporativo ─ */
  --green:     #95BB30;
  --green-lt:  #CEE632;
  --green-dk:  #6a8f1a;
  --green-xs:  #3d5a0a;
  --green-bg:  #f4f9e8;
  --green-mid: #4a7010;
  --oro:        #95BB30;
  --oro-claro:  #CEE632;
  --oro-oscuro: #6a8f1a;
  --oro-palido: #f4f9e8;

  /* ─ Beige / cálidos ─ */
  --beige-1:   #FBF9F4;
  --beige-2:   #f5efe4;
  --beige-3:   #F0EDE4;
  --beige-4:   #EDE8DC;
  --warm-dark: #1E1A12;
  --cream:     #F5F2EC;
  --cream-2:   #EDE8DF;
  --blanco:    #f5f2ec;
  --blanco-50: rgba(245,242,236,.5);
  --blanco-30: rgba(245,242,236,.3);
  --blanco-15: rgba(245,242,236,.15);
  --blanco-08: rgba(245,242,236,.08);
  --blanco-04: rgba(245,242,236,.04);

  /* ─ Oscuros ─ */
  --dark:   #0e0e0c;
  --dark-2: #161614;
  --dark-3: #1e1e1a;
  --dark-4: #252520;
  --negro-1: #050505;
  --negro-2: #0a0a0a;
  --negro-3: #111111;
  --negro-4: #181818;
  --negro-5: #1f1f1f;
  --negro-6: #282828;

  /* ─ Neutros ─ */
  --gray:     #8A8880;
  --white:    #FFFFFF;
  --dark-txt: #1A1A18;
  --mid-txt:  #5A5853;
  --soft-txt: #8A8880;

  /* ─ Tipografía ─ */
  --font-main:    'Dosis', sans-serif;
  --font-display: 'Cormorant Garamond', serif;
  --font-sans:    'Dosis', sans-serif;
  --font-serif:   'Cormorant Garamond', serif;

  /* ─ Layout ─ */
  --radius:     6px;
  --shadow:     0 4px 32px rgba(0,0,0,.12);
  --shadow-sm:  0 2px 12px rgba(0,0,0,.06);
  --shadow-md:  0 8px 40px rgba(0,0,0,.10);
  --shadow-lg:  0 20px 60px rgba(0,0,0,.14);
  --transition: .35s cubic-bezier(.4,0,.2,1);
}

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

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

body {
  font-family: var(--font-main);
  background-color: var(--beige-1);
  color: var(--dark-txt);
  overflow-x: hidden;
  line-height: 1.65;
  font-weight: 400;
  cursor: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Textura de ruido sutil */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1000;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .025;
  pointer-events: none;
}

h1, h2, h3, h4 { font-family: var(--font-serif); line-height: 1.15; font-weight: 300; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { cursor: pointer; }

/* ══════════════════════════════════════════════════════════
   LAYOUT BASE
══════════════════════════════════════════════════════════ */
.container { max-width: 1320px; margin: 0 auto; padding: 0 36px; }

@media (max-width: 1100px) { .container { padding: 0 24px; } }
@media (max-width: 640px)  { .container { padding: 0 16px; } }

/* ══════════════════════════════════════════════════════════
   ANIMACIONES SCROLL
══════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .85s ease, transform .85s ease;
}
.reveal.visible { opacity: 1; transform: none; }

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .85s ease, transform .85s ease;
}
.reveal-left.visible { opacity: 1; transform: none; }

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .85s ease, transform .85s ease;
}
.reveal-right.visible { opacity: 1; transform: none; }

.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }

/* ══════════════════════════════════════════════════════════
   CURSOR PERSONALIZADO
══════════════════════════════════════════════════════════ */
.cursor {
  position: fixed;
  width: 10px; height: 10px;
  background: var(--oro);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width .3s, height .3s, background .3s;
  mix-blend-mode: difference;
}

.cursor-ring {
  position: fixed;
  width: 36px; height: 36px;
  border: 1.5px solid rgba(149,187,48,.45);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: transform .18s ease, width .4s, height .4s, border-color .3s;
}

body.cursor-hover .cursor  { width: 18px; height: 18px; background: var(--oro-claro); }
body.cursor-hover .cursor-ring { width: 54px; height: 54px; border-color: var(--oro-claro); }

/* ══════════════════════════════════════════════════════════
   SCROLLBAR
══════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--beige-3); }
::-webkit-scrollbar-thumb { background: var(--green-dk); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--green); }

/* ══════════════════════════════════════════════════════════
   SECTION HEADERS (globales)
══════════════════════════════════════════════════════════ */
.section-header { text-align: center; margin-bottom: 56px; }
.section-header.light .section-title,
.section-header.light .section-eyebrow { color: var(--white); }

.section-eyebrow {
  font-family: var(--font-main);
  font-size: .85rem; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--green-dk); margin-bottom: 10px; display: block;
}

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 300; margin-bottom: 10px;
  color: var(--dark-txt); letter-spacing: -.01em;
}
.section-title em { font-style: italic; color: var(--green-dk); }

.section-sub {
  color: var(--mid-txt);
  max-width: 480px; margin: 8px auto 0; font-size: .95rem;
}

/* Eyebrow decorado con líneas */
.section-eyebrow-decorated {
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  color: var(--green-dk);
  font-family: var(--font-main); font-size: .85rem; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase;
  margin-bottom: 14px;
}
.section-eyebrow-decorated::before,
.section-eyebrow-decorated::after {
  content: '';
  display: inline-block; width: 32px; height: 1px;
  background: var(--green); opacity: .55; flex-shrink: 0;
}
.section-eyebrow-decorated.light { color: rgba(206,230,50,.8); }
.section-eyebrow-decorated.light::before,
.section-eyebrow-decorated.light::after { background: var(--green-lt); opacity: .5; }

.eyebrow-line {
  display: inline-block; width: 32px; height: 1.5px;
  background: var(--green); vertical-align: middle; margin-right: 12px;
}

/* Tipografía serif reutilizable */
.serif-title {
  font-family: var(--font-serif);
  font-weight: 300; letter-spacing: -.022em; line-height: 1.08;
}
.serif-accent {
  font-family: var(--font-serif);
  font-style: italic; font-weight: 300; color: var(--green-dk);
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE BASE
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body { cursor: auto; }
  .cursor, .cursor-ring { display: none; }
}