/* =========================================================================
   NineGrace — sistema de diseño  ·  "Museo Nocturno Cinemático"
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Inter:wght@300;400;500&display=swap');

:root {
  --negro: #050506;
  --negro-2: #0a0a0c;
  --negro-3: #070708;
  --hueso: #f4efe6;
  --texto: #ece9e2;
  --tenue: #9a968d;
  --oro: #d9c089;
  --oro-claro: #e9d6a3;
  --verde-wa: #1faf5a;
  --verde-wa-2: #27c468;
  /* tinte dinámico que el JS cambia según la obra visible */
  --tinte: #1d7a78;
  --max: 1180px;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--negro);
  color: var(--texto);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---- utilidades ---- */
.serif { font-family: var(--serif); }
.gold { color: var(--oro); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.kick {
  font-size: 11px; letter-spacing: .4em; text-transform: uppercase;
  color: var(--tenue);
}
.center { text-align: center; }

.btn {
  display: inline-block; font-family: var(--sans); font-size: 14px;
  letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  padding: 14px 30px; border-radius: 32px; border: 1px solid var(--oro);
  color: var(--oro); background: transparent; transition: .35s;
}
.btn:hover { background: var(--oro); color: #1a1a1a; }
.btn-wa {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--verde-wa); color: #fff; border: none;
  font-family: var(--sans); font-size: 15px; letter-spacing: .04em;
  padding: 15px 30px; border-radius: 34px; cursor: pointer; transition: .3s;
}
.btn-wa:hover { background: var(--verde-wa-2); transform: translateY(-2px); }

/* reveal al hacer scroll */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in { opacity: 1; transform: none; }

/* =========================== NAV =========================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 32px;
  background: linear-gradient(var(--negro) 10%, transparent);
  transition: background .4s, padding .4s;
}
.nav.scrolled { background: rgba(5,5,6,.86); backdrop-filter: blur(8px); padding: 10px 32px; }
.nav .brand { font-family: var(--serif); font-size: 24px; font-weight: 500; color: var(--oro); letter-spacing: .14em; }
.nav .links a { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: #cfcbc2; margin-left: 28px; transition: color .3s; }
.nav .links a:hover { color: var(--oro); }
.nav .burger { display: none; background: none; border: none; color: var(--oro); font-size: 26px; cursor: pointer; }

/* =========================== HERO =========================== */
.hero {
  position: relative; min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 90px 24px 60px;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--tinte) 28%, #0a1014) 0%, #0a1014 45%, var(--negro) 82%);
  transition: background 1.2s ease;
}
.hero__art { max-height: 52vh; filter: drop-shadow(0 0 60px color-mix(in srgb, var(--tinte) 55%, transparent)); animation: float 7s ease-in-out infinite; will-change: transform; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
.hero h1 { font-family: var(--serif); font-size: clamp(40px, 8vw, 72px); font-weight: 500; color: var(--oro-claro); letter-spacing: .16em; margin-top: 14px; }
.hero p { font-family: var(--serif); font-style: italic; font-size: clamp(16px, 2.4vw, 21px); color: #c4c0b7; margin-top: 6px; max-width: 600px; }
.scrollcue { position: absolute; bottom: 26px; font-size: 11px; letter-spacing: .3em; color: #7a7a7a; animation: pulse 2.4s infinite; }
@keyframes pulse { 0%,100% { opacity: .25; } 50% { opacity: 1; } }

/* ======================= MANIFIESTO ======================= */
.manif { padding: clamp(80px,14vh,150px) 24px; text-align: center; background: var(--negro-3); }
.manif .big { font-family: var(--serif); font-size: clamp(22px, 3.4vw, 32px); line-height: 1.5; max-width: 820px; margin: 22px auto; font-weight: 300; }
.manif .sign { font-family: var(--serif); font-size: 22px; color: var(--oro); margin-top: 26px; }

/* ======================== GALERÍA ======================== */
.gal { padding: clamp(80px,12vh,120px) 0 clamp(90px,14vh,140px); background: var(--negro); }
.gal h2 { font-family: var(--serif); text-align: center; font-size: clamp(34px,6vw,46px); font-weight: 400; margin: 6px 0 0; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 50px; }
.card {
  background: var(--hueso); border-radius: 5px; overflow: hidden; cursor: pointer;
  box-shadow: 0 10px 30px #0008; transition: transform .45s, box-shadow .45s;
}
.card:hover { transform: translateY(-10px); box-shadow: 0 24px 54px #000, 0 0 42px color-mix(in srgb, var(--oro) 30%, transparent); }
.card .ph { height: 300px; overflow: hidden; background: var(--hueso); display: flex; align-items: center; justify-content: center; }
.card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.card:hover .ph img { transform: scale(1.07); }
.card .meta { padding: 16px 18px; background: var(--negro-2); }
.card .meta .t { font-family: var(--serif); font-size: 22px; color: var(--texto); }
.card .meta .p { font-size: 12px; letter-spacing: .12em; color: var(--oro); margin-top: 4px; }
.tag { display: inline-block; font-size: 10px; letter-spacing: .15em; padding: 3px 9px; border: 1px solid color-mix(in srgb, var(--oro) 40%, transparent); color: var(--oro); border-radius: 20px; margin-top: 9px; }
.tag.sold { border-color: #a8555544; color: #cc8877; }
.card--all { display: flex; align-items: center; justify-content: center; background: var(--negro-2); color: var(--oro); font-family: var(--serif); font-size: 26px; min-height: 340px; }

/* ======================= CINEMÁTICA ======================= */
.cine {
  min-height: 92vh; display: flex; align-items: center; justify-content: center; gap: 60px;
  flex-wrap: wrap; padding: 90px 24px;
  background: linear-gradient(125deg, var(--tinte) 0%, color-mix(in srgb, var(--tinte) 60%, #000) 60%, var(--oro) 130%);
  transition: background 1s ease;
}
.cine__art { max-height: 62vh; filter: drop-shadow(0 25px 45px #0007); }
.cine__tx { max-width: 380px; }
.cine__tx h3 { font-family: var(--serif); font-size: clamp(30px,5vw,42px); font-weight: 500; color: #fff; line-height: 1.15; }
.cine__tx p { margin-top: 16px; color: #f4e7d2; line-height: 1.75; }

/* ====================== CÓMO COMPRAR ====================== */
.how { padding: clamp(80px,12vh,120px) 24px; text-align: center; background: var(--negro-3); }
.how h2 { font-family: var(--serif); font-size: clamp(30px,5vw,40px); font-weight: 400; margin-bottom: 50px; }
.steps { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; max-width: 1000px; margin: 0 auto; }
.step { max-width: 250px; }
.step .n { font-family: var(--serif); font-size: 46px; color: var(--oro); }
.step h4 { font-size: 14px; letter-spacing: .18em; text-transform: uppercase; margin: 10px 0 8px; }
.step p { font-size: 14px; color: var(--tenue); line-height: 1.6; }

/* ====================== FICHA DE OBRA ====================== */
.ficha { padding: 120px 24px 110px; background: var(--negro); }
.ficha__wrap { display: flex; gap: 56px; max-width: 1060px; margin: 0 auto; flex-wrap: wrap; align-items: center; justify-content: center; }
.ficha__img { background: var(--hueso); border-radius: 5px; overflow: hidden; box-shadow: 0 20px 55px #000; }
.ficha__img img { max-width: 460px; width: 100%; }
.ficha__panel { max-width: 400px; flex: 1 1 320px; }
.ficha__panel .t { font-family: var(--serif); font-size: clamp(32px,5vw,42px); margin: 6px 0 0; }
.ficha__panel .d { color: var(--tenue); line-height: 1.75; margin: 14px 0 26px; font-size: 15px; }
.opts { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 20px; }
.opts button {
  background: transparent; border: 1px solid #444; color: #cfcbc2;
  padding: 10px 18px; border-radius: 30px; font-family: var(--sans); font-size: 13px;
  cursor: pointer; transition: .3s;
}
.opts button:hover { border-color: var(--oro); color: var(--oro); }
.opts button.on { border-color: var(--oro); color: #1a1a1a; background: var(--oro); }
.price { font-family: var(--serif); font-size: 36px; color: #fff; margin: 6px 0 22px; }
.estado { font-size: 12px; letter-spacing: .14em; color: #7fd6a0; margin-top: 16px; }
.estado.sold { color: #cc8877; }
.volver { display: inline-block; margin-top: 28px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--tenue); }
.volver:hover { color: var(--oro); }

/* ===================== SOBRE GRACIA ===================== */
.sobre { padding: 140px 24px 100px; max-width: 820px; margin: 0 auto; }
.sobre h1 { font-family: var(--serif); font-size: clamp(36px,7vw,58px); font-weight: 500; color: var(--oro-claro); text-align: center; letter-spacing: .1em; }
.sobre .lead { font-family: var(--serif); font-style: italic; font-size: clamp(18px,2.6vw,24px); text-align: center; color: #c4c0b7; margin: 16px 0 50px; }
.sobre p { color: #cfcbc2; margin-bottom: 20px; line-height: 1.85; }
.sobre .firma { font-family: var(--serif); font-size: 26px; color: var(--oro); text-align: center; margin-top: 40px; }

/* ========================= FOOTER ========================= */
footer { padding: 72px 24px 52px; background: var(--negro-3); text-align: center; border-top: 1px solid #ffffff10; }
footer .brand { font-family: var(--serif); font-size: 30px; color: var(--oro); display: block; margin-bottom: 18px; letter-spacing: .14em; }
footer .soc a { color: #cfcbc2; margin: 0 14px; font-size: 13px; letter-spacing: .12em; transition: color .3s; }
footer .soc a:hover { color: var(--oro); }
footer .wa { display: inline-block; margin-top: 22px; color: #7fd6a0; font-size: 14px; }
footer .fine { margin-top: 28px; color: #5a5a5a; font-size: 11px; letter-spacing: .05em; }

/* ======================= RESPONSIVE ======================= */
@media (max-width: 880px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .nav .links { position: fixed; inset: 0 0 0 auto; width: 70%; max-width: 280px; flex-direction: column;
    background: rgba(8,8,10,.97); backdrop-filter: blur(10px); padding: 90px 28px; transform: translateX(100%);
    transition: transform .4s; display: flex; }
  .nav .links.open { transform: none; }
  .nav .links a { margin: 0 0 22px; font-size: 15px; }
  .nav .burger { display: block; z-index: 70; }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; }
  .cine { gap: 30px; }
  .steps { gap: 36px; }
  .ficha { padding: 100px 20px 80px; }
}

/* ================== MOVIMIENTO REDUCIDO ================== */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero, .cine { transition: none; }
}