/* ============================================================
   GERJ Constructora — Design System Tokens
   Para cambiar la paleta: editar SOLO los 5 hex de "Paleta base".
   Los derivados se calculan a partir de ellos y no requieren edición.
   ============================================================ */

:root {
  /* Paleta base (5 tokens editables por el cliente) */
  --primary:      #A62445;
  --primary-dark: #8C394E;
  --cream:        #F2F2E9;
  --cream-alt:    #F2CEAE;
  --ink:          #0D0D0D;

  /* Derivados */
  --primary-darker: #5C1830;
  --primary-pale:   #F5E1E7;
  --ink-muted:      #4D4D4D;
  --ink-light:      #808080;
  --hero-bg:        var(--primary);
  --border-soft:    #D9D4C9;
}

/* ── Tailwind custom color fallbacks ────────────────────────────────────
   When the Tailwind CDN config fails to load, these ensure custom color
   classes still apply. When Tailwind loads correctly, Tailwind's injected
   <style> overrides these (it comes later in the cascade).
   ──────────────────────────────────────────────────────────────────────── */
.bg-primary           { background-color: var(--primary) }
.bg-primary-dark      { background-color: var(--primary-dark) }
.bg-primary-pale      { background-color: var(--primary-pale) }
.bg-cream             { background-color: var(--cream) }
.bg-cream-alt         { background-color: var(--cream-alt) }
.bg-ink               { background-color: var(--ink) }
.text-primary         { color: var(--primary) }
.text-cream           { color: var(--cream) }
.text-cream-alt       { color: var(--cream-alt) }
.text-ink             { color: var(--ink) }
.text-ink-muted       { color: var(--ink-muted) }
.text-ink-light       { color: var(--ink-light) }
.border-primary       { border-color: var(--primary) }
.border-cream-alt     { border-color: var(--cream-alt) }
.hover\:bg-primary-dark:hover  { background-color: var(--primary-dark) }
.hover\:text-primary:hover     { color: var(--primary) }
.hover\:bg-cream:hover         { background-color: var(--cream) }

/* ── Base ── */
*,*::before,*::after { box-sizing: border-box }
html { scroll-behavior: smooth }
body { font-family: 'Inter', system-ui, sans-serif; color: var(--ink); background: var(--cream) }

/* ── Hero ── */
/* Para cambiar la foto: reemplaza recursos/hero.jpg, o edita --hero-image aquí */
:root { --hero-image: url('../recursos/hero.jpg'); }
.hero-bg {
  background:
    linear-gradient(rgba(13,13,13,.50), rgba(92,24,48,.60)),
    var(--hero-image) center / cover no-repeat;
}

/* ── Photo-background sections (same overlay technique as hero) ── */
.bg-photo {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.bg-photo-servicios {
  background-image:
    linear-gradient(rgba(13,13,13,.30), rgba(92,24,48,.45)),
    url('../recursos/fondo-servicios.jpg');
}
.bg-photo-cta {
  background-image:
    linear-gradient(rgba(13,13,13,.55), rgba(92,24,48,.70)),
    url('../recursos/fondo-cta.jpg');
}
.bg-photo-mision {
  background-image:
    linear-gradient(rgba(13,13,13,.30), rgba(92,24,48,.45)),
    url('../recursos/fondo-mision.jpg');
}

/* ── Project image placeholder ── */
.project-img {
  background-color: var(--primary-darker);
  position: relative;
  overflow: hidden;
}

/* ── Scroll reveal ── */
.reveal          { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1) }
.reveal.from-left  { transform: translateX(-32px) }
.reveal.from-right { transform: translateX(32px) }
.reveal.fade-only  { transform: none }
.reveal.visible    { opacity: 1; transform: none }
.delay-1 { transition-delay: .12s }
.delay-2 { transition-delay: .24s }
.delay-3 { transition-delay: .36s }
.delay-4 { transition-delay: .48s }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none } }