/* ─────────────────────────────────────────────
   styles.css — slobodanivanovic.com
   Paleta unificada, extraída de la portada de YO SOY
   Crema como base · dorado como acento · marino solo como tinta
   ───────────────────────────────────────────── */
:root {
  --crema: #F9F0E6;          /* fondo (exacto portada) */
  --crema-alta: #FFFBF4;     /* tarjetas */
  --crema-borde: #EADCC6;    /* bordes suaves */
  --dorado: #D5A548;         /* acento (exacto portada) */
  --dorado-hover: #C6952F;   /* dorado más profundo para hover */
  --dorado-suave: rgba(213,165,72,0.10);
  --dorado-tinta: #96701F;   /* dorado legible para texto pequeño */
  --marino: #0E223A;         /* tinta de texto (exacto portada) */
  --marino-suave: rgba(14,34,58,0.68);
  --marino-tenue: rgba(14,34,58,0.45);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  background: var(--crema);
  color: var(--marino);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
}

::selection { background: var(--dorado); color: var(--crema); }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--dorado-tinta);
  outline-offset: 3px;
}

/* ── NAV ─────────────────────────────────────── */
nav.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.3rem 4vw;
  background: rgba(249,240,230,0);
  transition: background 0.4s, box-shadow 0.4s;
}
nav.site-nav.scrolled {
  background: rgba(249,240,230,0.96);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--crema-borde);
}
/* El nombre, como en la portada: sans geométrica, mayúsculas espaciadas */
.nav-logo {
  font-family: 'Jost', sans-serif;
  font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--marino); text-decoration: none;
  transition: color 0.3s;
}
.nav-logo:hover { color: var(--dorado-tinta); }
.nav-links { display: flex; align-items: center; gap: 2.3rem; list-style: none; }
.nav-links a {
  font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--marino-suave); text-decoration: none; transition: color 0.3s;
}
.nav-links a:hover { color: var(--dorado-tinta); }
.nav-cta {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--dorado); color: var(--marino);
  padding: 0.6rem 1.4rem; text-decoration: none;
  border: 1px solid var(--dorado); font-weight: 500;
  transition: all 0.3s;
}
.nav-cta:hover { background: var(--dorado-hover); border-color: var(--dorado-hover); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }
.hamburger span { width: 24px; height: 1.5px; background: var(--marino); transition: all 0.3s; }

/* Menú móvil */
.mobile-menu {
  display: none;
  position: fixed; top: 0; right: -100%; bottom: 0; width: 78%;
  background: var(--crema-alta);
  z-index: 200; padding: 6rem 3rem;
  flex-direction: column; gap: 2.2rem;
  transition: right 0.4s cubic-bezier(.25,.46,.45,.94);
  border-left: 1px solid var(--crema-borde);
}
.mobile-menu.open { right: 0; display: flex; }
.mobile-menu a {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.55rem; font-weight: 400;
  color: var(--marino); text-decoration: none; transition: color 0.3s;
}
.mobile-menu a:hover { color: var(--dorado-tinta); }
.mobile-close {
  position: absolute; top: 1.5rem; right: 2rem;
  font-size: 1.5rem; color: var(--marino); cursor: pointer;
  background: none; border: none; font-family: 'Cormorant Garamond', serif;
}
.overlay { display: none; position: fixed; inset: 0; background: rgba(14,34,58,0.25); z-index: 150; }
.overlay.open { display: block; }

/* ── BOTONES ─────────────────────────────────── */
.btn-primary {
  display: inline-block; padding: 1rem 2.4rem;
  background: var(--dorado); color: var(--marino);
  font-family: 'Jost', sans-serif; font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  transition: all 0.3s;
}
.btn-primary:hover { background: var(--dorado-hover); transform: translateY(-2px); }
.btn-outline {
  display: inline-block; padding: 1rem 2.4rem;
  background: transparent; border: 1px solid var(--dorado);
  color: var(--dorado-tinta); font-family: 'Jost', sans-serif;
  font-size: 0.78rem; font-weight: 400; letter-spacing: 0.18em;
  text-transform: uppercase; text-decoration: none; transition: all 0.3s;
}
.btn-outline:hover { background: var(--dorado-suave); }

/* ── SECCIONES ───────────────────────────────── */
section { padding: clamp(4rem, 6vw, 5.5rem) 8vw; }
.section-tag {
  font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--dorado-tinta); margin-bottom: 1.2rem;
  display: flex; align-items: center; gap: 1rem;
}
.section-tag::before { content: ''; width: 30px; height: 1px; background: var(--dorado); }
.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 400;
  line-height: 1.12; color: var(--marino); margin-bottom: 1.4rem;
}
.section-title em { font-style: italic; color: var(--dorado-tinta); }
.section-body {
  font-size: 1rem; line-height: 1.85; color: var(--marino-suave); max-width: 580px;
}

/* ── ÓRBITAS (motivo de la portada) ──────────── */
.orbitas { position: absolute; pointer-events: none; }

/* ── FORMULARIOS ─────────────────────────────── */
.form-group { margin-bottom: 1.2rem; }
.form-label {
  display: block; font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--marino-tenue); margin-bottom: 0.5rem;
}
.form-input {
  width: 100%; padding: 0.9rem 1.2rem;
  background: var(--crema-alta); border: 1px solid var(--crema-borde);
  color: var(--marino); font-family: 'Jost', sans-serif; font-size: 0.9rem;
  outline: none; transition: border-color 0.3s;
}
.form-input:focus { border-color: var(--dorado); }
.form-input::placeholder { color: var(--marino-tenue); }
textarea.form-input { resize: vertical; min-height: 120px; }
select.form-input option { background: var(--crema-alta); }
.form-submit {
  width: 100%; padding: 1rem; background: var(--dorado);
  border: 1px solid var(--dorado); color: var(--marino);
  font-family: 'Jost', sans-serif; font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: all 0.3s;
}
.form-submit:hover { background: var(--dorado-hover); border-color: var(--dorado-hover); }

/* ── FOOTER ──────────────────────────────────── */
footer {
  background: var(--crema);
  border-top: 1px solid var(--crema-borde);
  padding: 3rem 8vw;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 2rem;
}
.footer-logo {
  font-family: 'Jost', sans-serif; font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--marino); text-decoration: none;
}
.footer-tagline { font-size: 0.72rem; letter-spacing: 0.15em; color: var(--marino-tenue); margin-top: 0.4rem; }
.footer-links { display: flex; gap: 2rem; list-style: none; flex-wrap: wrap; }
.footer-links a {
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--marino-suave); text-decoration: none; transition: color 0.3s;
}
.footer-links a:hover { color: var(--dorado-tinta); }
.footer-closing { font-family: 'Cormorant Garamond', serif; font-size: 0.9rem; font-style: italic; color: var(--dorado-tinta); }
.footer-copy { font-size: 0.7rem; color: var(--marino-tenue); }

/* ── ANIMACIONES ─────────────────────────────── */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ── RESPONSIVE BASE ─────────────────────────── */
@media (max-width: 900px) {
  .nav-links, nav.site-nav .nav-cta { display: none; }
  .hamburger { display: flex; }
  footer { flex-direction: column; text-align: center; }
  .footer-links { justify-content: center; }
}