/* ═══════════════════════════════════════
   BASE.CSS — Variables, Reset, Tipografía
   Para cambiar colores: edita :root
═══════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400;1,500&family=Jost:wght@200;300;400;500&display=swap');

/* ── VARIABLES ── */
:root {
  --black:   #0a0a0a;   /* negro puro                  */
  --dark:    #111111;   /* negro profundo              */
  --mid:     #1a1a1a;   /* negro medio                 */
  --green:   #243b17;   /* verde bosque del logo       */
  --border:  rgba(255,255,255,0.10);
  --muted:   rgba(255,255,255,0.62);
  --subtle:  rgba(255,255,255,0.78);
  --white:   #f5f2ee;
  --accent:  #c8a535;   /* dorado cálido del logo      */
}

/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html  { scroll-behavior: smooth; }
body  {
  font-family: 'Jost', sans-serif;
  background: var(--black);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── INTRO / SPLASH ── */
#intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 1s ease, visibility 1s ease;
}
#intro.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}

/* Logo fade-in + scale suave */
.intro-logo {
  width: clamp(220px, 35vw, 420px);
  height: auto;
  opacity: 0;
  transform: scale(0.92);
  animation: introLogoIn 1.2s cubic-bezier(.16,1,.3,1) 0.2s forwards;
}

@keyframes introLogoIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* Track de la barra */
.intro-loader {
  width: clamp(180px, 28vw, 320px);
  height: 1px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
  opacity: 0;
  animation: introTrackIn 0.4s ease 0.9s forwards;
}

@keyframes introTrackIn {
  to { opacity: 1; }
}

/* Barra de progreso dorada */
.intro-loader-bar {
  height: 100%;
  width: 0;
  background: var(--accent);
  animation: introBarFill 1.6s cubic-bezier(.4,0,.2,1) 1s forwards;
}

@keyframes introBarFill {
  0%   { width: 0%; }
  60%  { width: 75%; }
  100% { width: 100%; }
}

/* ── PASSWORD GATE ── */
#password-gate {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
#password-gate.visible {
  opacity: 1;
  visibility: visible;
}
#password-gate.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.pg-box {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  padding: 0 2rem;
}

.pg-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--white);
  line-height: 1.1;
}
.pg-title em { font-style: italic; color: var(--accent); }

.pg-subtitle {
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.pg-input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  margin-top: 0.5rem;
  transition: border-color 0.3s;
}
.pg-input-wrap:focus-within { border-color: var(--accent); }

#pg-input {
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Jost', sans-serif;
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: 0.4em;
  color: var(--white);
  padding: 1rem 1.5rem;
  width: 14rem;
  text-align: center;
}
#pg-input::placeholder { color: rgba(255,255,255,0.2); letter-spacing: 0.3em; }

#pg-btn {
  background: transparent;
  border: none;
  border-left: 1px solid var(--border);
  color: var(--accent);
  font-size: 1.2rem;
  padding: 1rem 1.2rem;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
#pg-btn:hover { background: var(--accent); color: var(--black); }

.pg-error {
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #c0392b;
  opacity: 0;
  transition: opacity 0.3s;
  margin-top: 0.2rem;
}
.pg-error.show { opacity: 1; }

/* ── TIPOGRAFÍA BASE ── */
h1, h2, h3, h4 {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  line-height: 1.1;
}

/* ── UTILIDADES ── */
.container    { max-width: 1280px; margin: 0 auto; padding: 0 5vw; }
.container-sm { max-width: 800px;  margin: 0 auto; padding: 0 5vw; }

.label {
  font-family: 'Jost', sans-serif;
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
}

.divider {
  height: 1px;
  background: var(--border);
}

/* ── ANIMACIONES ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleX {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.fade-up    { animation: fadeUp 1s cubic-bezier(.16,1,.3,1) forwards; opacity: 0; }
.fade-up-d1 { animation: fadeUp 1s cubic-bezier(.16,1,.3,1) .15s forwards; opacity: 0; }
.fade-up-d2 { animation: fadeUp 1s cubic-bezier(.16,1,.3,1) .3s  forwards; opacity: 0; }
.fade-up-d3 { animation: fadeUp 1s cubic-bezier(.16,1,.3,1) .5s  forwards; opacity: 0; }
.fade-in    { animation: fadeIn 1.2s ease forwards; opacity: 0; }

/* ── SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(.16,1,.3,1),
              transform 0.9s cubic-bezier(.16,1,.3,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }