/* ============================================================
   LUXOR STUDIO — Base: tokens, tipografía, botones, animación
   ============================================================ */

:root{
  /* Negros */
  --ink-900:#040404;
  --ink-850:#070707;
  --ink-800:#0b0b0c;
  --ink-700:#121214;
  --ink-600:#1a1a1d;
  --ink-500:#242428;

  /* Oro (tomado del logo) */
  --gold-900:#6d5215;
  --gold-700:#a8802a;
  --gold-500:#c9962f;
  --gold-400:#d9b355;
  --gold-300:#e8c766;
  --gold-100:#f7e9b0;
  --gold-grad:linear-gradient(135deg,#8a6a1f 0%,#c9962f 18%,#f2dc96 42%,#f7e9b0 52%,#d9b355 66%,#a8802a 84%,#7d5f1c 100%);
  --gold-line:linear-gradient(90deg,transparent,rgba(201,150,47,.75),rgba(247,233,176,.9),rgba(201,150,47,.75),transparent);

  /* Plata */
  --silver-100:#f2f4f6;
  --silver-300:#c9ccd1;
  --silver-500:#9aa0a8;
  --silver-700:#6a6f77;

  --text:#e9e9ec;
  --text-dim:#a2a5ab;
  --text-faint:#6d7076;

  --line:rgba(201,150,47,.18);
  --line-soft:rgba(255,255,255,.07);
  --glass:rgba(255,255,255,.035);
  --glass-2:rgba(255,255,255,.055);

  --ok:#5cc98a;
  --warn:#e8b752;
  --bad:#e0655f;

  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px;
  --shadow:0 24px 60px -20px rgba(0,0,0,.9);
  --shadow-gold:0 18px 50px -22px rgba(201,150,47,.55);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --f-display:'Cinzel','Playfair Display',Georgia,'Times New Roman',serif;
  --f-sans:'Jost','Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --nav-h:78px;
  --wrap:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink-900);color:var(--text);
  font-family:var(--f-sans);font-size:16px;line-height:1.65;
  font-weight:300;letter-spacing:.012em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.no-scroll{overflow:hidden}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none;padding:0}
::selection{background:rgba(201,150,47,.32);color:#fff}

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--ink-850)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--gold-700),var(--gold-900));border-radius:20px}
::-webkit-scrollbar-thumb:hover{background:var(--gold-500)}

/* ---------- Tipografía ---------- */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.12;margin:0;letter-spacing:.02em}
.display{
  font-family:var(--f-display);text-transform:uppercase;
  letter-spacing:.14em;line-height:1.05;
}
.gold-text{
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.shimmer{
  background:linear-gradient(100deg,#8a6a1f 0%,#c9962f 20%,#f7e9b0 38%,#fffbe9 46%,#f7e9b0 54%,#c9962f 72%,#8a6a1f 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:shimmer 7s linear infinite;
}
@keyframes shimmer{0%{background-position:180% 0}100%{background-position:-80% 0}}

.eyebrow{
  font-size:.68rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold-400);font-weight:400;display:inline-flex;align-items:center;gap:.9em;
}
.eyebrow::before,.eyebrow::after{content:'';width:34px;height:1px;background:var(--gold-line)}
.eyebrow.solo::after{display:none}

.lead{color:var(--text-dim);font-size:1.05rem;line-height:1.85;font-weight:300}
.muted{color:var(--text-faint)}
.rule{height:1px;background:var(--gold-line);border:0;margin:0}

/* ---------- Layout ---------- */
.wrap{width:min(var(--wrap),92vw);margin-inline:auto}
.section{padding:clamp(64px,9vw,130px) 0;position:relative}
.section-head{text-align:center;margin-bottom:clamp(34px,5vw,64px)}
.section-head h2{
  font-size:clamp(1.9rem,4.6vw,3.35rem);text-transform:uppercase;
  letter-spacing:.1em;margin:.5rem 0 .8rem;
}
.section-head .lead{max-width:63ch;margin:0 auto}

/* ---------- Botones ---------- */
.btn{
  --bg:transparent;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.95em 2.1em;border-radius:100px;
  font-size:.74rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--line);overflow:hidden;isolation:isolate;
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .45s,color .35s;
  white-space:nowrap;
}
.btn::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--gold-grad);opacity:0;transition:opacity .45s var(--ease-out);
}
.btn:hover{transform:translateY(-2px);border-color:transparent;box-shadow:var(--shadow-gold)}
.btn:hover::after{opacity:1}
.btn:hover{color:#140f02}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.35;pointer-events:none}

.btn-gold{border-color:transparent;color:#140f02}
.btn-gold::after{opacity:1}
.btn-gold:hover{filter:brightness(1.12)}

.btn-ghost{border-color:rgba(255,255,255,.16);color:var(--silver-300)}
.btn-sm{padding:.62em 1.35em;font-size:.66rem;letter-spacing:.16em}
.btn-block{width:100%}

.link-gold{
  color:var(--gold-400);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  border-bottom:1px solid rgba(201,150,47,.35);padding-bottom:2px;transition:.3s;
}
.link-gold:hover{color:var(--gold-100);border-color:var(--gold-300)}

/* ---------- Superficies ---------- */
.card{
  background:linear-gradient(160deg,var(--glass),rgba(255,255,255,.012));
  border:1px solid var(--line-soft);border-radius:var(--r-lg);
  position:relative;overflow:hidden;
  transition:border-color .5s var(--ease),transform .5s var(--ease-out),box-shadow .5s var(--ease-out);
}
.card:hover{border-color:var(--line);box-shadow:var(--shadow)}
.card-gold-top::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--gold-line);
  opacity:.6;transition:opacity .5s;
}
.card:hover.card-gold-top::before{opacity:1}

.pill{
  display:inline-flex;align-items:center;gap:.45em;
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.42em .9em;border-radius:100px;
  border:1px solid var(--line);color:var(--gold-400);
  background:rgba(201,150,47,.07);white-space:nowrap;
}
.pill-plain{color:var(--silver-500);border-color:var(--line-soft);background:rgba(255,255,255,.03)}
.pill-ok{color:var(--ok);border-color:rgba(92,201,138,.3);background:rgba(92,201,138,.08)}
.pill-bad{color:var(--bad);border-color:rgba(224,101,95,.3);background:rgba(224,101,95,.08)}
.pill-warn{color:var(--warn);border-color:rgba(232,183,82,.3);background:rgba(232,183,82,.08)}

/* ---------- Formularios ---------- */
.field{display:block;margin-bottom:1.05rem}
.field > span{
  display:block;font-size:.63rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:.55rem;
}
.input,.select,.textarea{
  width:100%;background:rgba(255,255,255,.04);
  border:1px solid var(--line-soft);border-radius:var(--r-sm);
  padding:.85em 1em;font-size:.92rem;font-weight:300;
  transition:border-color .3s,background .3s,box-shadow .3s;
}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--gold-500);background:rgba(201,150,47,.06);
  box-shadow:0 0 0 3px rgba(201,150,47,.12);
}
.input::placeholder,.textarea::placeholder{color:var(--text-faint)}
.textarea{resize:vertical;min-height:96px}
.select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold-500) 50%),linear-gradient(135deg,var(--gold-500) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(1.15em),calc(100% - 15px) calc(1.15em);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.select option{background:var(--ink-700);color:var(--text)}
.err{color:var(--bad);font-size:.78rem;margin-top:.4rem;display:block}

/* ---------- Animaciones de entrada ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.09s}.reveal-d2{transition-delay:.18s}
.reveal-d3{transition-delay:.27s}.reveal-d4{transition-delay:.36s}
.reveal-d5{transition-delay:.45s}.reveal-d6{transition-delay:.54s}

@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes zoomIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes pulseGold{
  0%,100%{box-shadow:0 0 0 0 rgba(201,150,47,.4)}
  70%{box-shadow:0 0 0 14px rgba(201,150,47,0)}
}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* ---------- Placa dorada para cortes sin foto ---------- */
.noimg{
  position:relative;width:100%;height:100%;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(201,150,47,.16),transparent 60%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 2px,transparent 2px 9px),
    var(--ink-700);
  display:grid;place-items:center;text-align:center;padding:1.4rem;
}
.noimg .crown{width:44px;height:44px;opacity:.6;margin:0 auto .7rem}
.noimg span{
  font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-700);
}

/* ---------- Utilidades ---------- */
.flex{display:flex}.between{justify-content:space-between}.center{align-items:center}
.gap-s{gap:.5rem}.gap-m{gap:1rem}.gap-l{gap:1.6rem}
.wrapf{flex-wrap:wrap}
.tc{text-align:center}.tr{text-align:right}
.hide{display:none!important}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mono{font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* ---------- Recorte del logo ----------
   El JPEG del logo trae bastante margen negro alrededor.
   .lmark lo recorta para que la marca llene su caja. */
.lmark{position:relative;overflow:hidden;display:block;flex:0 0 auto}
.lmark img{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:162%;max-width:none;height:auto;
}