/* ============ TOKENS ============ */
:root{
  --gold:        oklch(0.82 0.115 86);
  --gold-deep:   oklch(0.70 0.115 80);
  --gold-soft:   oklch(0.82 0.115 86 / .14);

  --bg:          oklch(0.145 0.008 262);
  --surface:     oklch(0.185 0.010 262);
  --surface-2:   oklch(0.225 0.012 262);
  --ink:         oklch(0.965 0.004 90);
  --muted:       oklch(0.735 0.010 100);
  --line:        oklch(1 0 0 / .09);
  --scrim:       oklch(0.10 0.01 262 / .62);

  --shadow: 0 24px 60px -28px oklch(0 0 0 / .7);

  --z-sticky: 100;
  --z-fab: 300;
  --z-pop: 320;

  --ease: cubic-bezier(.16,1,.3,1);
  --wrap: 1140px;
  --r: 16px;

  color-scheme: dark;
}

[data-theme="light"]{
  --gold:        oklch(0.60 0.105 74);
  --gold-deep:   oklch(0.52 0.105 70);
  --gold-soft:   oklch(0.60 0.105 74 / .12);

  --bg:          oklch(0.975 0.006 95);
  --surface:     oklch(0.995 0.003 95);
  --surface-2:   oklch(0.945 0.008 95);
  --ink:         oklch(0.205 0.012 262);
  --muted:       oklch(0.435 0.012 262);
  --line:        oklch(0.20 0.02 262 / .12);
  --scrim:       oklch(0.10 0.01 262 / .48);

  --shadow: 0 24px 55px -30px oklch(0.3 0.02 262 / .35);
  color-scheme: light;
}

/* ============ BASE ============ */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Manrope", system-ui, sans-serif;
  font-size:clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  line-height:1.65;
  overflow-x:hidden;
  transition:background .4s var(--ease), color .4s var(--ease);
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.15rem, 4vw, 2.5rem); }
.gold{ color:var(--gold); }

h1,h2,h3{ font-family:"Marcellus", Georgia, serif; font-weight:400; line-height:1.08; letter-spacing:-0.01em; text-wrap:balance; }

.skip{ position:absolute; left:-999px; top:0; background:var(--gold); color:#1a1400; padding:.7rem 1.1rem; border-radius:0 0 10px 0; z-index:400; }
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:"Manrope", sans-serif; font-weight:700; font-size:.95rem;
  padding:.85rem 1.4rem; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform .35s var(--ease), background .3s var(--ease), color .3s, border-color .3s, box-shadow .3s;
  white-space:nowrap;
}
.btn--lg{ padding:1.05rem 1.9rem; font-size:1.02rem; }
.btn--full{ width:100%; }
.btn--gold{
  background:linear-gradient(135deg, var(--gold), var(--gold-deep));
  color:#1c1602; border-color:oklch(0.9 0.09 90 / .4);
  box-shadow:0 12px 30px -14px var(--gold-deep);
}
.btn--gold:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -14px var(--gold-deep); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }
.ico-wa{ width:1.2em; height:1.2em; flex:none; }

/* ============ NAV ============ */
.nav{
  position:sticky; top:0; z-index:var(--z-sticky);
  background:color-mix(in oklch, var(--bg) 78%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.nav__inner{ display:flex; align-items:center; gap:1.5rem; height:70px; }
.brand{ display:inline-flex; align-items:center; gap:.6rem; color:var(--ink); }
.brand__mark{ width:auto; height:46px; flex:none; object-fit:contain; filter:drop-shadow(0 3px 6px oklch(0 0 0 / .35)); }
.brand__mark--lg{ height:64px; margin-bottom:.4rem; }
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__text strong{ font-family:"Marcellus", serif; font-weight:400; font-size:1.18rem; letter-spacing:.16em; }
.brand__text em{ font-style:normal; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-top:.25rem; }
.nav__links{ display:flex; gap:1.8rem; margin-left:auto; font-size:.93rem; font-weight:600; }
.nav__links a{ color:var(--muted); transition:color .25s; position:relative; }
.nav__links a:hover{ color:var(--ink); }
.nav__actions{ display:flex; align-items:center; gap:.7rem; }

.theme-toggle{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); cursor:pointer; display:grid; place-items:center;
  transition:border-color .3s, transform .3s var(--ease);
}
.theme-toggle:hover{ border-color:var(--gold); transform:rotate(-18deg); }
.theme-toggle svg{ width:20px; height:20px; }
.icon-sun{ display:none; }
[data-theme="light"] .icon-sun{ display:block; }
[data-theme="light"] .icon-moon{ display:none; }

/* Botón de idioma */
.lang-toggle{
  height:42px; padding:0 .9rem; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); cursor:pointer;
  font-family:"Manrope", sans-serif; font-weight:700; font-size:.85rem; letter-spacing:.06em;
  transition:border-color .3s, color .3s;
}
.lang-toggle:hover{ border-color:var(--gold); color:var(--gold); }

/* Botón hamburguesa (solo móvil) */
.nav__toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); cursor:pointer; padding:0 11px;
  transition:border-color .3s;
}
.nav__toggle:hover{ border-color:var(--gold); }
.nav__toggle-bar{ display:block; height:2px; width:100%; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease), opacity .2s; }
.nav.open .nav__toggle-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.open .nav__toggle-bar:nth-child(2){ opacity:0; }
.nav.open .nav__toggle-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============ HERO ============ */
.hero{ position:relative; min-height:min(92vh, 780px); display:flex; align-items:flex-end; overflow:hidden; }
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; animation:heroZoom 14s var(--ease) forwards; }
@keyframes heroZoom{ from{ transform:scale(1.08); } to{ transform:scale(1); } }
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, var(--scrim) 0%, transparent 32%, var(--scrim) 72%, var(--bg) 100%),
             linear-gradient(90deg, var(--scrim), transparent 65%);
}
.hero__content{ position:relative; z-index:2; padding-block:clamp(2.5rem, 6vw, 5rem); color:oklch(0.98 0.01 95); }
[data-theme="light"] .hero__content{ color:oklch(0.98 0.01 95); }
.hero__eyebrow{ font-size:.8rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:1rem; }
.hero__title{ font-size:clamp(2.6rem, 7vw, 5.2rem); max-width:16ch; text-shadow:0 2px 30px oklch(0 0 0 / .5); }
.hero__lead{ margin-top:1.2rem; max-width:52ch; font-size:clamp(1.02rem, 2vw, 1.2rem); color:oklch(0.92 0.01 95); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.9rem; }
.hero__trust{ list-style:none; display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:2rem; font-size:.86rem; color:oklch(0.9 0.01 95); }
.hero__trust li{ position:relative; padding-left:1.1rem; }
.hero__trust li::before{ content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--gold); }

/* ============ SECTION SHELL ============ */
.section{ padding-block:clamp(3.8rem, 9vw, 7rem); }
.section--tint{ background:var(--surface); border-block:1px solid var(--line); }
.section__head{ max-width:60ch; margin-bottom:clamp(2.2rem, 5vw, 3.4rem); }
.section__title{ font-size:clamp(2rem, 4.5vw, 3.3rem); }
.section__sub{ margin-top:.9rem; color:var(--muted); font-size:1.05rem; max-width:52ch; text-wrap:pretty; }

/* ============ SERVICIOS ============ */
.services{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.3rem; }
.svc{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:transform .4s var(--ease), border-color .4s, box-shadow .4s; }
.section--tint .svc{ background:var(--bg); }
.svc:hover{ transform:translateY(-6px); border-color:color-mix(in oklch, var(--gold) 45%, var(--line)); box-shadow:var(--shadow); }
.svc__media{ position:relative; aspect-ratio:16/11; overflow:hidden; }
.svc__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.svc:hover .svc__media img{ transform:scale(1.06); }
.svc__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, oklch(0.1 0.01 262 / .55)); }
.svc__num{ position:absolute; left:1rem; bottom:.8rem; z-index:1; font-family:"Marcellus", serif; font-size:1.15rem; color:var(--gold); letter-spacing:.1em; text-shadow:0 2px 8px oklch(0 0 0 / .6); }
.svc__body{ padding:clamp(1.4rem, 3vw, 1.8rem); display:flex; flex-direction:column; flex:1; }
.svc h3{ font-size:1.5rem; }
.svc__tag{ color:var(--gold); font-weight:600; font-size:.9rem; margin:.3rem 0 .7rem; }
.svc__body p:last-child{ color:var(--muted); font-size:.97rem; }

/* ============ ANTES / DESPUÉS ============ */
.ba{ position:relative; max-width:760px; margin-inline:auto; aspect-ratio:4/5; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); user-select:none; border:1px solid var(--line); }
@media(min-width:640px){ .ba{ aspect-ratio:16/11; } }
.ba__img--after{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba__clip{ position:absolute; inset:0; width:50%; overflow:hidden; will-change:width; }
.ba__img--before{ position:absolute; inset:0; height:100%; width:var(--ba-w, 100%); max-width:none; object-fit:cover; }
.ba__handle{ position:absolute; top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%); background:var(--gold); z-index:3; pointer-events:none; will-change:left; }
.ba__knob{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:var(--gold); color:#1c1602; display:grid; place-items:center; box-shadow:0 6px 18px -4px oklch(0 0 0 / .6); }
.ba__knob svg{ width:22px; height:22px; }
.ba__label{ position:absolute; bottom:14px; z-index:3; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:.35rem .7rem; border-radius:999px; background:oklch(0.1 0.01 262 / .6); color:#fff; backdrop-filter:blur(4px); }
.ba__label--before{ left:14px; }
.ba__label--after{ right:14px; }
.ba__range{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:4; }

/* ============ CARRUSEL GALERÍA ============ */
.carousel{ position:relative; display:flex; align-items:center; gap:.6rem; }
.carousel__track{
  display:flex; gap:1.1rem; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:.4rem .2rem 1.2rem; flex:1;
  scrollbar-width:none;
}
.carousel__track::-webkit-scrollbar{ display:none; }
.slide{
  position:relative; flex:0 0 clamp(260px, 42%, 380px); scroll-snap-align:center;
  aspect-ratio:4/3; border-radius:16px; overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.slide img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.slide:hover img{ transform:scale(1.05); }
.slide figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1.4rem .9rem .7rem;
  font-size:.82rem; font-weight:600; letter-spacing:.02em; color:#fff;
  background:linear-gradient(transparent, oklch(0.08 0.01 262 / .78));
}
.carousel__nav{
  flex:none; width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface); color:var(--ink); border:1px solid var(--line); cursor:pointer;
  transition:background .25s, color .25s, border-color .25s, transform .25s var(--ease);
}
.section--tint .carousel__nav{ background:var(--bg); }
.carousel__nav:hover{ background:var(--gold); color:#1c1602; border-color:var(--gold); transform:scale(1.06); }
.carousel__nav svg{ width:22px; height:22px; }
.carousel__nav[disabled]{ opacity:.35; pointer-events:none; }
.carousel__dots{ display:flex; justify-content:center; gap:.5rem; margin-top:.4rem; }
.carousel__dots button{ width:9px; height:9px; border-radius:50%; border:none; cursor:pointer; background:var(--line); transition:background .25s, transform .25s; }
.carousel__dots button.active{ background:var(--gold); transform:scale(1.3); }

/* ============ PRECIOS ============ */
.plans{ display:grid; grid-template-columns:repeat(auto-fit, minmax(288px, 1fr)); gap:1.2rem; align-items:stretch; }
.plan{ position:relative; background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:2rem 1.6rem; display:flex; flex-direction:column; transition:transform .4s var(--ease), border-color .4s; }
.section--tint .plan{ background:var(--bg); }
.plan:hover{ transform:translateY(-4px); }
.plan--featured{ border-color:color-mix(in oklch, var(--gold) 55%, var(--line)); background:linear-gradient(180deg, var(--gold-soft), transparent 60%); box-shadow:var(--shadow); }
.plan__flag{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg, var(--gold), var(--gold-deep)); color:#1c1602; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:.35rem .9rem; border-radius:999px; white-space:nowrap; }
.plan__top h3{ font-size:1.55rem; }
.plan__es{ color:var(--muted); font-size:.88rem; margin-top:.15rem; }
.plan__price{ font-family:"Marcellus", serif; font-size:3.2rem; line-height:1; margin:1.1rem 0 1.3rem; color:var(--ink); }
.plan__price span{ font-size:1.4rem; color:var(--gold); vertical-align:super; margin-right:.1rem; }
.plan__list{ list-style:none; display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.6rem; flex:1; }
.plan__list li{ position:relative; padding-left:1.6rem; color:var(--muted); font-size:.95rem; }
.plan__list li::before{ content:""; position:absolute; left:0; top:.45em; width:12px; height:8px; border-left:2px solid var(--gold); border-bottom:2px solid var(--gold); transform:rotate(-45deg); }
.plan__extra{ font-size:.85rem; color:var(--gold); font-weight:600; margin:-.6rem 0 1.1rem; }
.plans__note{ text-align:center; margin-top:1.8rem; color:var(--muted); font-size:.95rem; }

/* ============ CONTACTO ============ */
.contacto{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem, 5vw, 4rem); align-items:center; }
.contacto__intro .btn{ margin-top:1.6rem; }
.contacto__cards{ list-style:none; display:flex; flex-direction:column; gap:1rem; }
.ccard{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1.2rem 1.4rem; display:flex; flex-direction:column; gap:.2rem; transition:border-color .3s; }
.ccard:hover{ border-color:var(--gold); }
.ccard__k{ font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-weight:700; }
.ccard__v{ font-family:"Marcellus", serif; font-size:1.5rem; color:var(--ink); }
.ccard__v--alt{ font-size:1.2rem; color:var(--muted); }
.ccard__v--plain{ font-size:1.3rem; }
.ccard__note{ font-size:.85rem; color:var(--muted); }

/* ============ FOOTER ============ */
.footer{ background:var(--surface); border-top:1px solid var(--line); padding-block:3rem; text-align:center; }
.footer__inner{ display:flex; flex-direction:column; align-items:center; gap:.8rem; }
.brand--footer{ justify-content:center; }
.brand--footer .brand__text{ align-items:center; }
.footer__tag{ color:var(--gold); font-family:"Marcellus", serif; letter-spacing:.05em; }
.footer__copy{ color:var(--muted); font-size:.85rem; text-wrap:balance; }

/* ============ FLOATING BUTTONS ============ */
.fab{ position:fixed; right:clamp(1rem, 3vw, 1.8rem); bottom:clamp(1rem, 3vw, 1.8rem); z-index:var(--z-fab); display:flex; flex-direction:column; gap:.8rem; align-items:flex-end; }
.fab__btn{ width:58px; height:58px; border-radius:50%; display:grid; place-items:center; border:none; cursor:pointer; box-shadow:0 12px 30px -8px oklch(0 0 0 / .55); transition:transform .35s var(--ease), box-shadow .3s; color:#fff; }
.fab__btn svg{ width:30px; height:30px; }
.fab__btn:hover{ transform:scale(1.08); }
.fab__btn--wa{ background:#25D366; animation:fabPulse 2.6s ease-out infinite; }
.fab__btn--call{ background:linear-gradient(135deg, var(--gold), var(--gold-deep)); color:#1c1602; }
.fab__btn--tt{ background:#000; box-shadow:0 12px 30px -8px oklch(0 0 0 / .55), inset 0 0 0 1.6px #25F4EE, inset 0 0 0 3.2px #FE2C55; }
.fab__btn--fb{ background:#1877F2; color:#fff; }
@keyframes fabPulse{ 0%{ box-shadow:0 12px 30px -8px oklch(0 0 0 / .55), 0 0 0 0 oklch(0.72 0.17 150 / .5);} 70%{ box-shadow:0 12px 30px -8px oklch(0 0 0 / .55), 0 0 0 16px oklch(0.72 0.17 150 / 0);} 100%{ box-shadow:0 12px 30px -8px oklch(0 0 0 / .55), 0 0 0 0 oklch(0.72 0.17 150 / 0);} }
.fab__pop{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:.5rem; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.2rem; min-width:200px; z-index:var(--z-pop); transform-origin:bottom right; animation:popIn .3s var(--ease); }
.fab__pop[hidden]{ display:none; }
.fab__pop a{ display:flex; flex-direction:column; padding:.6rem .8rem; border-radius:9px; font-family:"Marcellus", serif; font-size:1.1rem; color:var(--ink); transition:background .2s; }
.fab__pop a span{ font-family:"Manrope", sans-serif; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:700; }
.fab__pop a:hover{ background:var(--surface-2); }
@keyframes popIn{ from{ opacity:0; transform:translateY(8px) scale(.96); } to{ opacity:1; transform:none; } }

/* ============ REVEAL ============ */
.js .reveal{ opacity:0; transform:translateY(22px); }
.js .reveal.in{ opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal:nth-child(2){ transition-delay:.08s; }
.reveal:nth-child(3){ transition-delay:.16s; }
.reveal:nth-child(4){ transition-delay:.24s; }
.reveal:nth-child(5){ transition-delay:.32s; }

/* ============ RESPONSIVE ============ */
@media(max-width:900px){
  .nav__toggle{ display:flex; }
  .nav__links{
    position:absolute; top:70px; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line);
    padding:.4rem clamp(1.15rem, 4vw, 2.5rem) 1rem;
    box-shadow:var(--shadow);
    transform:translateY(-10px); opacity:0; pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease);
  }
  .nav.open .nav__links{ transform:none; opacity:1; pointer-events:auto; }
  .nav__links a{ padding:.95rem .2rem; border-bottom:1px solid var(--line); font-size:1rem; }
  .nav__links a:last-child{ border-bottom:0; }
  .services{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .contacto{ grid-template-columns:1fr; }
  .slide{ flex-basis:78%; }
}
@media(max-width:520px){
  .brand__text em{ display:none; }
  .nav__cta{ display:none; }
  .carousel__nav{ display:none; }
  .slide{ flex-basis:86%; }
  .hero__trust{ gap:.9rem 1.2rem; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
  .hero__media img{ transform:none; }
}