/* ════════════════════════════════════════
   Alojamiento Local — Main CSS
   Identidad: negro, dorado, crema — Cormorant Garamond + Jost
   No se carga en la página del panel.
════════════════════════════════════════ */

:root {
  --negro:   #1a1a1a;
  --dorado:  #c9a96e;
  --crema:   #f8f5f0;
  --gris:    #888;
  --borde:   #e0ddd8;
  --serif:   'Cormorant Garamond', Georgia, serif;
  --sans:    'Jost', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--serif);
  color: var(--negro);
  background: #fff;
  line-height: 1.7;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 300; letter-spacing: 1px; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* ── Header ── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px; height: 72px;
  background: rgba(26,26,26,0.97); backdrop-filter: blur(8px);
}
.site-logo {
  font-family: var(--serif); font-size: 22px; font-weight: 300;
  letter-spacing: 5px; text-transform: uppercase; color: var(--dorado); text-decoration: none;
}
.site-nav { display: flex; gap: 36px; list-style: none; }
.site-nav a {
  font-family: var(--sans); font-size: 11px; font-weight: 400;
  letter-spacing: 3px; text-transform: uppercase;
  color: rgba(255,255,255,0.7); text-decoration: none; transition: color .2s;
}
.site-nav a:hover { color: var(--dorado); }

/* ── Hero ── */
.hero {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--negro); text-align: center; padding: 100px 24px 60px; position: relative;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 50%, rgba(201,169,110,.08) 0%, transparent 70%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; max-width: 700px; }
.hero-eyebrow {
  font-family: var(--sans); font-size: 11px; letter-spacing: 6px;
  text-transform: uppercase; color: var(--dorado); margin-bottom: 24px;
  opacity: 0; animation: fadeUp .8s .2s forwards;
}
.hero-titulo {
  font-size: clamp(52px, 10vw, 96px); font-weight: 300; letter-spacing: 8px;
  text-transform: uppercase; color: #fff; line-height: 1; margin-bottom: 24px;
  opacity: 0; animation: fadeUp .8s .4s forwards;
}
.hero-subtitulo {
  font-size: 18px; font-weight: 300; color: rgba(255,255,255,.55);
  font-style: italic; margin-bottom: 48px;
  opacity: 0; animation: fadeUp .8s .6s forwards;
}
.hero-cta {
  display: inline-block; font-family: var(--sans); font-size: 11px;
  letter-spacing: 4px; text-transform: uppercase; color: var(--dorado);
  border: 1px solid var(--dorado); padding: 16px 40px; text-decoration: none;
  transition: background .3s, color .3s;
  opacity: 0; animation: fadeUp .8s .8s forwards;
}
.hero-cta:hover { background: var(--dorado); color: var(--negro); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Sección reservas ── */
.seccion { padding: 100px 48px; background: var(--crema); }
.seccion-inner { max-width: 760px; margin: 0 auto; }
.seccion-header { text-align: center; margin-bottom: 60px; }
.eyebrow {
  font-family: var(--sans); font-size: 10px; letter-spacing: 5px;
  text-transform: uppercase; color: var(--dorado); display: block; margin-bottom: 16px;
}
.seccion-header h2 { font-size: clamp(32px, 5vw, 52px); font-weight: 300; letter-spacing: 2px; }
.divider { width: 48px; height: 1px; background: var(--dorado); margin: 20px auto 0; }

/* ── Footer ── */
.site-footer {
  background: var(--negro); color: rgba(255,255,255,.4);
  text-align: center; padding: 40px 24px;
  font-family: var(--sans); font-size: 12px; letter-spacing: 2px;
}

/* ── Login WP estilizado ── */
body.login { background: var(--negro); }
body.login #login h1 a {
  font-family: var(--serif); color: var(--dorado);
  letter-spacing: 4px; text-transform: uppercase;
  font-size: 24px; font-weight: 300; text-decoration: none;
  background: none; width: auto; height: auto;
  text-indent: 0; box-shadow: none;
}
body.login #loginform { border: 1px solid #333; background: #222; color: #ccc; }
body.login .login label { color: #aaa; }
body.login #wp-submit {
  background: var(--dorado); border: none; color: var(--negro);
  font-family: var(--sans); letter-spacing: 2px;
  text-transform: uppercase; font-size: 12px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .site-header { padding: 0 20px; }
  .site-nav { display: none; }
  .seccion { padding: 80px 24px; }
}