:root{
  --gold:#E9B65A; --gold-deep:#B98A3E; --bg:#0A0A0A; --bg2:#141210;
  --ink:#F5F1E8; --muted:#BFB6A4; --line:#2B2620;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Montserrat',sans-serif;line-height:1.6}
h1,h2,h3{font-family:'Playfair Display',serif;font-weight:500}
.script{font-family:'Great Vibes',cursive;color:var(--gold)}
a{color:var(--gold);text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:0 22px}
.btn{display:inline-block;padding:13px 30px;border:1px solid var(--gold);color:var(--gold);
  letter-spacing:2px;font-size:13px;text-transform:uppercase;transition:.3s;cursor:pointer;background:none;font-family:'Montserrat',sans-serif}
.btn:hover{background:var(--gold);color:#0A0A0A}
.btn.solid{background:var(--gold);color:#0A0A0A;font-weight:600}
.btn.solid:hover{background:var(--gold-deep);border-color:var(--gold-deep)}
.sub{font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--muted)}
.sect{padding:85px 0}
.sect-title{text-align:center;margin-bottom:50px}
.sect-title h2{font-size:34px;color:var(--gold)}
.sect-title .rule{width:70px;height:1px;background:var(--gold);margin:16px auto 0}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(10,10,10,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.navin{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:44px}
.brand span{font-family:'Playfair Display',serif;font-size:18px;letter-spacing:1px}
.brand span b{color:var(--gold);font-weight:500}
.navlinks{display:flex;gap:28px;font-size:12px;letter-spacing:2px;text-transform:uppercase}
.navlinks a{color:var(--ink)}
.navlinks a:hover{color:var(--gold)}
@media(max-width:760px){.navlinks{display:none}}

/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(ellipse at 50% 30%, #17130c 0%, var(--bg) 65%);padding-top:64px}
.hero img{width:min(430px,80vw)}
.hero h1{font-size:clamp(26px,4vw,40px);margin-top:8px;font-weight:400}
.hero p.tag{color:var(--muted);margin:14px 0 34px;letter-spacing:3px;text-transform:uppercase;font-size:13px}
.heroBtns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* SERVICIOS */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px}
.card{background:var(--bg2);border:1px solid var(--line);padding:38px 32px;text-align:center;transition:.3s}
.card:hover{border-color:var(--gold);transform:translateY(-4px)}
.card .ico{font-size:34px;color:var(--gold)}
.card h3{color:var(--gold);font-size:22px;margin:14px 0 6px}
.card ul{list-style:none;margin-top:14px}
.card li{padding:9px 0;border-bottom:1px dashed var(--line);font-size:14px;color:var(--muted);display:flex;justify-content:space-between;gap:12px}
.card li:last-child{border-bottom:none}
.card li b{color:var(--ink);font-weight:500}
.note-precios{text-align:center;color:var(--muted);font-size:12px;margin-top:26px;letter-spacing:1px}

/* GALERIA */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;grid-auto-flow:dense}
.gitem{aspect-ratio:9/5;overflow:hidden;border:1px solid var(--line);position:relative;background:#000}
.gitem.vid{grid-column:1/-1;aspect-ratio:auto}
@media(min-width:700px){.gitem.vid{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}}
.gitem img,.gitem video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.gitem:hover img,.gitem:hover video{transform:scale(1.06)}
.gitem::after{content:'✦';position:absolute;right:10px;bottom:6px;color:var(--gold);opacity:.85;font-size:15px;text-shadow:0 0 6px rgba(0,0,0,.8)}
.gitem.vid::before{content:'VIDEO';position:absolute;left:10px;top:8px;z-index:2;color:#0A0A0A;background:var(--gold);
  font-size:9px;letter-spacing:2px;padding:2px 8px;font-weight:600}

/* AGENDA */
.agenda{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:start}
@media(max-width:860px){.agenda{grid-template-columns:1fr}}
.panel{background:var(--bg2);border:1px solid var(--line);padding:28px}
.calhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.calhead h3{color:var(--gold);font-size:20px;text-transform:capitalize}
.calnav{display:flex;gap:8px}
.calnav button{background:none;border:1px solid var(--line);color:var(--gold);width:34px;height:34px;cursor:pointer;font-size:16px}
.calnav button:hover{border-color:var(--gold)}
.dow,.days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.dow div{text-align:center;font-size:11px;letter-spacing:1px;color:var(--muted);padding:6px 0;text-transform:uppercase}
.day{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1px solid transparent;cursor:pointer;font-size:14px;position:relative;border-radius:2px}
.day:hover:not(.off):not(.past){border-color:var(--gold)}
.day.off,.day.past{color:#4a453c;cursor:default}
.day.today{border-color:var(--line)}
.day.sel{background:var(--gold);color:#0A0A0A;font-weight:600}
.day .dots{display:flex;gap:3px;position:absolute;bottom:6px}
.day .dot{width:5px;height:5px;border-radius:50%;background:var(--gold)}
.day.sel .dot{background:#0A0A0A}
.leyenda{display:flex;gap:22px;margin-top:16px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.leyenda span{display:flex;align-items:center;gap:7px}
.leyenda .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);display:inline-block}
.leyenda .sq{width:10px;height:10px;border:1px solid var(--gold);display:inline-block}

.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:10px;margin-top:8px}
.slot{padding:10px 4px;text-align:center;border:1px solid var(--line);cursor:pointer;font-size:13px;border-radius:2px}
.slot:hover:not(.busy){border-color:var(--gold);color:var(--gold)}
.slot.busy{color:#5a5348;cursor:not-allowed;background:repeating-linear-gradient(45deg,transparent,transparent 6px,#17130c 6px,#17130c 12px)}
.slot.busy small{display:block;font-size:9px;letter-spacing:1px;color:var(--gold-deep)}
.slot.sel{background:var(--gold);color:#0A0A0A;font-weight:600;border-color:var(--gold)}
.slothint{color:var(--muted);font-size:13px;margin:14px 0 8px}

form label{display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin:16px 0 6px}
form input[type=text],form input[type=tel],form select{width:100%;background:var(--bg);border:1px solid var(--line);
  color:var(--ink);padding:12px 14px;font-family:'Montserrat',sans-serif;font-size:14px}
form input:focus,form select:focus{outline:none;border-color:var(--gold)}
.resumen{border:1px dashed var(--gold);padding:14px;margin-top:18px;font-size:13px;color:var(--muted);display:none}
.resumen b{color:var(--gold)}
.upl{border:1px dashed var(--line);padding:18px;text-align:center;cursor:pointer;color:var(--muted);font-size:13px;margin-top:6px}
.upl:hover{border-color:var(--gold);color:var(--gold)}
.upl img{max-width:100%;max-height:150px;margin-top:12px;border:1px solid var(--line)}
.formBtns{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.okmsg{display:none;margin-top:16px;border:1px solid var(--gold);padding:14px;color:var(--gold);font-size:13px}

.proximas{margin-top:34px}
.proximas h3{color:var(--gold);font-size:19px;margin-bottom:14px}
.cita{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.cita .fecha{color:var(--gold);font-weight:500;min-width:130px}
.cita .quien{color:var(--muted)}
.demo-note{margin-top:20px;font-size:11px;color:#6e675a;letter-spacing:1px}

/* CONTACTO */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px;text-align:center}
.cbox{border:1px solid var(--line);padding:34px 20px}
.cbox .t{color:var(--gold);letter-spacing:3px;font-size:12px;text-transform:uppercase;margin-bottom:10px}
.qrbox .qr{width:170px;border-radius:12px;transition:transform .35s, box-shadow .35s}
.qrbox .qr:hover{transform:scale(1.07);box-shadow:0 6px 30px rgba(233,182,90,.35)}
.qrhint{margin-top:8px;font-size:11px;letter-spacing:2px;color:var(--muted);text-transform:uppercase}
footer{border-top:1px solid var(--line);padding:34px 0;text-align:center;color:var(--muted);font-size:12px;letter-spacing:2px}
footer img{height:56px;margin-bottom:12px;opacity:.9}

.wa-float{position:fixed;right:22px;bottom:22px;z-index:60;width:56px;height:56px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(0,0,0,.5);
  animation:waPulse 2.6s ease-out infinite}
.wa-float svg{width:30px;height:30px;fill:#fff}

/* ══════════ ANIMACIONES Y EFECTOS ══════════ */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes floatyRot{0%,100%{transform:rotate(-28deg) translateY(0)}50%{transform:rotate(-22deg) translateY(-18px)}}
@keyframes glowPulse{0%,100%{filter:drop-shadow(0 0 14px rgba(233,182,90,.20))}50%{filter:drop-shadow(0 0 38px rgba(233,182,90,.55))}}
@keyframes twinkle{0%,100%{opacity:.12;transform:scale(.6)}50%{opacity:1;transform:scale(1.2)}}
@keyframes shimmer{0%{background-position:-150% 0}100%{background-position:150% 0}}
@keyframes blinkEye{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.15)}}
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}75%{box-shadow:0 0 0 20px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@keyframes riseFade{0%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-70px) scale(.4)}}
@keyframes scrollHint{0%,100%{transform:translate(-50%,0);opacity:.9}50%{transform:translate(-50%,10px);opacity:.4}}

.hero{position:relative;overflow:hidden}
.hero .heroInner{position:relative;z-index:2}
.hero img.logoMain{animation:floaty 6.5s ease-in-out infinite,glowPulse 5s ease-in-out infinite}
.star{position:absolute;color:var(--gold);pointer-events:none;user-select:none;z-index:1;
  animation:twinkle var(--d,3s) ease-in-out var(--dl,0s) infinite}
.luna-dec{position:absolute;border-radius:50%;pointer-events:none;z-index:1;opacity:.5;
  box-shadow:16px 12px 0 0 rgba(233,182,90,.45);animation:floatyRot 9s ease-in-out infinite}
.brand img{animation:glowPulse 6s ease-in-out infinite}
.scrollHint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;color:var(--gold);
  font-size:22px;animation:scrollHint 2s ease-in-out infinite}

/* ojo que parpadea (ornamento de secciones) */
.ojoWrap{display:flex;justify-content:center;margin-top:14px}
.ojoWrap svg{width:120px;height:34px;overflow:visible}
.ojoWrap .ojoG{transform-origin:50% 55%;animation:blinkEye 5.5s ease-in-out infinite}
.ojoWrap path,.ojoWrap line{stroke:var(--gold);stroke-width:2;fill:none;stroke-linecap:round}

/* línea con destello */
.sect-title .rule{background:linear-gradient(90deg,rgba(233,182,90,.15),var(--gold),rgba(233,182,90,.15));
  background-size:200% 100%;animation:shimmer 3.2s linear infinite;height:1px}

/* aparición al hacer scroll */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease;transition-delay:var(--rd,0s)}
.reveal.on{opacity:1;transform:none}

/* brillo que recorre los botones */
.btn{position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transition:left .5s ease}
.btn:hover::after{left:130%}

/* chispas al hacer clic */
.spark{position:fixed;z-index:99;color:var(--gold);pointer-events:none;font-size:15px;
  animation:riseFade 1s ease-out forwards;text-shadow:0 0 8px rgba(233,182,90,.9)}

/* tarjetas y galería con glow */
.card:hover{box-shadow:0 8px 34px rgba(233,182,90,.12)}
.gitem:hover{border-color:var(--gold);box-shadow:0 6px 30px rgba(233,182,90,.18)}
.day.sel{box-shadow:0 0 14px rgba(233,182,90,.55)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}