:root{
  /* Morados */
  --purple:      #765d9d;   /* color base pedido */
  --purple-soft: #8e75b4;
  --purple-deep: #4d3a6b;
  --purple-ink:  #3a2a56;

  /* Oro */
  --gold:        #e8c766;
  --gold-light:  #f7e0a3;
  --gold-dim:    #c9a227;
  --gold-deep:   #a8811a;
  --gold-soft:   #f0e2b8;

  /* Superficies */
  --ink:    #3a2a56;
  --black:  #765d9d;   /* fondo base        */
  --black2: #8069a6;   /* sección alterna   */
  --black3: #8a74b0;   /* tarjetas          */
  --black4: #9481ba;   /* tarjetas activas  */

  /* Texto */
  --text:       #ffffff;
  --text-muted: #e2d9f2;
  --text-dim:   rgba(255,255,255,.58);

  /* Bordes */
  --border:        rgba(255,255,255,.16);
  --border-strong: rgba(255,255,255,.28);
  --border-gold:   rgba(232,199,102,.45);

  /* Cristal */
  --glass:      rgba(118,93,157,.86);
  --glass-soft: rgba(255,255,255,.08);

  /* Formas */
  --radius:      10px;
  --radius-lg:   18px;
  --radius-pill: 999px;

  /* Sombras (moradas, no negras) */
  --shadow:      0 10px 28px rgba(45,28,72,.28);
  --shadow-lg:   0 24px 60px rgba(45,28,72,.42);
  --shadow-gold: 0 14px 36px rgba(201,162,39,.30);

  /* Movimiento */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-back: cubic-bezier(.34,1.56,.64,1);

  --maxw:  1200px;
  --nav-h: 108px;
}

/* ═══════════════════════ 2 · BASE ═══════════════════════ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 16px);
  font-size:18px;
  -webkit-text-size-adjust:100%;
  background:#765d9d;
}

body{
  font-family:'Playfair Display',Georgia,serif;
  color:var(--text);
  line-height:1.7;
  /* 'clip' en vez de 'hidden': 'hidden' convierte el body en contenedor de
     scroll y rompería el position:sticky del hero. */
  overflow-x:hidden;
  overflow-x:clip;
  position:relative;
  min-height:100vh;
  background:#765d9d;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{ text-decoration:none; color:inherit }
ul{ list-style:none }
img{ max-width:100%; display:block }
button{ cursor:pointer }

input,select,textarea,button{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.05rem;
}

::selection{ background:rgba(232,199,102,.35); color:#fff }

::-webkit-scrollbar{ width:10px }
::-webkit-scrollbar-track{ background:#6a538e }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--gold),var(--gold-dim));
  border-radius:10px;
  border:2px solid #6a538e;
}
::-webkit-scrollbar-thumb:hover{ background:var(--gold-light) }

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

/* Al saltar a una sección por anclaje, el menú fijo no debe tapar el título.
   El desplazamiento reserva la altura real de la barra más un respiro. */
section[id],
div[id],
header[id],
footer[id],
h1[id],h2[id],h3[id],h4[id],
[id^="contacto"]{ scroll-margin-top:calc(var(--nav-h) + 28px) }

/* ═══════════════════════ 3 · LAYOUT ═══════════════════════ */
.container{ max-width:var(--maxw); margin:0 auto; padding:0 1.5rem }
.container--narrow{ max-width:860px }

.section{ padding:6rem 0; background:transparent; position:relative }
.section--cream{ background:var(--black2) }
.section--gallery{ padding-bottom:4.5rem; overflow:hidden }

.section__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:3.2rem;
}
.section__head.center{
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.7rem;
}

.divider{
  text-align:center;
  padding:1.4rem 0;
  color:var(--gold);
  font-size:.9rem;
  letter-spacing:.7rem;
  opacity:.7;
  position:relative;
  overflow:hidden;
}

/* ═══════════════════════ COSTURA ENTRE SECCIONES ═══════════════════════
   Donde cambia el tono de fondo hay un corte seco. Esta línea fina dorada
   —con un halo suave y un rombo en el centro— lo convierte en una costura
   intencionada. Va entre dos <section>, nunca dentro.
   ==================================================================== */
.seam{
  position:relative;
  z-index:3;
  height:1px;
  pointer-events:none;
}

/* La línea, que se desvanece hacia los dos extremos */
.seam::before{
  content:'';
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background:linear-gradient(90deg,
    rgba(232,199,102,0)    0%,
    rgba(232,199,102,.16)  7%,
    rgba(232,199,102,.42) 30%,
    rgba(247,224,163,.90) 50%,
    rgba(232,199,102,.42) 70%,
    rgba(232,199,102,.16) 93%,
    rgba(232,199,102,0)  100%);
}

/* Halo alrededor de la línea: es lo que evita que el cambio de tono se vea
   como un tajo. Muy bajito de opacidad, solo un susurro. */
.seam::after{
  content:'';
  position:absolute;
  left:0; right:0; top:0;
  height:30px;
  transform:translateY(-15px);
  background:linear-gradient(180deg,
    rgba(232,199,102,0)    0%,
    rgba(232,199,102,.05) 42%,
    rgba(247,224,163,.10) 50%,
    rgba(232,199,102,.05) 58%,
    rgba(232,199,102,0)  100%);
}

/* El rombo central */
.seam__dot{
  position:absolute;
  z-index:2;
  left:50%; top:0;
  width:9px; height:9px;
  margin:-4px 0 0 -4px;
  transform:rotate(45deg);
  background:linear-gradient(135deg,var(--gold-light),var(--gold) 55%,var(--gold-dim));
  box-shadow:0 0 14px rgba(232,199,102,.55), 0 0 36px rgba(232,199,102,.22);
  animation:seamPulse 5s ease-in-out infinite;
}

@keyframes seamPulse{
  0%, 100% { box-shadow:0 0 14px rgba(232,199,102,.50), 0 0 36px rgba(232,199,102,.20) }
  50%      { box-shadow:0 0 20px rgba(232,199,102,.80), 0 0 52px rgba(232,199,102,.34) }
}

/* ═══════════════════════ 4 · TIPOGRAFÍA ═══════════════════════ */
.section__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.85rem;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.84rem;
  font-weight:700;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:.7rem;
}
.section__eyebrow::before{
  content:'';
  width:30px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold));
}
.section__head.center .section__eyebrow::after{
  content:'';
  width:30px;
  height:1px;
  background:linear-gradient(270deg,transparent,var(--gold));
}

.section__title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(1.9rem,4.2vw,3rem);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.015em;
  color:#fff;
}

.section__lead{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.24rem;
  font-weight:400;
  line-height:1.85;
  color:var(--text-muted);
  max-width:640px;
}

.link-all{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.86rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  border-bottom:1px solid var(--border-gold);
  padding-bottom:3px;
  white-space:nowrap;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.link-all span{ display:inline-block; transition:transform .25s var(--ease-back) }
.link-all:hover{ color:var(--gold-light); border-color:var(--gold-light) }
.link-all:hover span{ transform:translateX(6px) }

/* ═══════════════════════ 5 · BOTONES ═══════════════════════ */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.9rem 2rem;
  border-radius:var(--radius-pill);
  border:1.5px solid transparent;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  overflow:hidden;
  isolation:isolate;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),
             background-color .3s var(--ease),color .3s var(--ease),
             border-color .3s var(--ease);
}
.btn::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
  transform:translateX(-130%);
  transition:transform .65s var(--ease);
}
.btn:hover::after{ transform:translateX(130%) }
.btn:active{ transform:scale(.97) }

.btn--gold,
.btn--brown{
  background:linear-gradient(135deg,var(--gold-light) 0%,var(--gold) 46%,var(--gold-dim) 100%);
  color:#3a2a0c;
  border-color:transparent;
  box-shadow:0 10px 26px rgba(45,28,72,.35);
}
.btn--gold:hover,
.btn--brown:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 44px rgba(45,28,72,.45),0 0 0 1px rgba(247,224,163,.5);
}

.btn--outline,
.btn--outline-white{
  background:rgba(255,255,255,.10);
  color:var(--gold-light);
  border-color:var(--border-gold);
  backdrop-filter:blur(6px);
}
.btn--outline:hover,
.btn--outline-white:hover{
  background:var(--gold);
  color:#3a2a0c;
  border-color:var(--gold);
  transform:translateY(-3px);
  box-shadow:var(--shadow-gold);
}

.btn--full{ width:100% }
.btn--lg{ padding:1.05rem 2.6rem; font-size:.95rem }

/* ═══════════════════════ 6 · NAVEGACIÓN ═══════════════════════
   Barra flotante: no llega a los bordes laterales y las esquinas de abajo
   van redondeadas, como si estuviera recortada. El contenedor .nav solo
   reserva la franja superior; el cristal vive en .nav__inner.            */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:200;
  padding:0 clamp(.7rem,2.2vw,1.75rem);
  background:transparent;
  border:0;
  pointer-events:none;
  animation:navIn .7s var(--ease) both;
}

.nav__inner{
  pointer-events:auto;
  max-width:var(--maxw);
  margin:0 auto;
  height:var(--nav-h);
  padding:0 1.75rem;
  display:flex;
  align-items:center;
  gap:1.5rem;
  background:var(--glass);
  backdrop-filter:blur(12px) saturate(1.3);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);
  border:1px solid var(--border);
  border-top:0;
  border-radius:0 0 32px 32px;
  box-shadow:0 18px 40px rgba(45,28,72,.34);
  transition:background .4s var(--ease),border-color .4s var(--ease),
             box-shadow .4s var(--ease);
}
.nav.scrolled .nav__inner{ box-shadow:0 24px 52px rgba(45,28,72,.45) }

/* Transparente sobre el hero (solo portada) */
.nav--over .nav__inner{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-color:transparent;
  box-shadow:none;
}
.nav--over.scrolled .nav__inner{
  background:var(--glass);
  backdrop-filter:blur(12px) saturate(1.3);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);
  border-color:var(--border);
  box-shadow:0 24px 52px rgba(45,28,72,.45);
}

.nav__logo{
  display:flex;
  align-items:center;
  flex-shrink:0;
  transition:transform .3s var(--ease);
}
.nav__logo:hover{ transform:scale(1.04) }
.nav__logo img{
  height:84px;
  width:auto;
  object-fit:contain;
  /* El logo es violeta oscuro: el halo claro lo despega del fondo morado.
     Antes había tres drop-shadow apilados sobre un elemento dentro de una
     barra fija: son tres desenfoques que el navegador re-rasteriza cada vez
     que la barra cambia. Uno solo da el mismo efecto y cuesta la tercera
     parte. */
  filter:
    brightness(1.08)
    drop-shadow(0 0 10px rgba(255,255,255,.8));
}

.nav__links{
  display:flex;
  align-items:center;
  gap:1.8rem;
  margin-left:auto;
}
.nav__links a{
  position:relative;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.88rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.78);
  padding:.4rem 0;
  transition:color .25s var(--ease);
}
.nav__links a::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:0; height:1.5px;
  background:var(--gold);
  transition:width .35s var(--ease);
}
.nav__links a:hover,
.nav__links a.active{ color:var(--gold) }
.nav__links a:hover::after,
.nav__links a.active::after{ width:100% }
.nav__links-login{ display:none }

/* Acceso al panel */
.nav__cta{
  margin-left:.2rem;
  padding:.62rem 1.6rem;
  font-size:.78rem;
  flex-shrink:0;
}
.nav__login{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.62rem 1.5rem;
  border:1.5px solid rgba(255,255,255,.4);
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.12);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#fff;
  white-space:nowrap;
  flex-shrink:0;
  transition:all .3s var(--ease);
}
.nav__login:hover{
  background:var(--gold);
  border-color:var(--gold);
  color:#3a2a0c;
  transform:translateY(-2px);
  box-shadow:var(--shadow-gold);
}
.nav__login .ri{ width:.95rem; height:.95rem; color:currentColor }

.nav__burger{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  padding:.5rem;
  margin-left:auto;
}
.nav__burger span{
  display:block;
  width:26px;
  height:2px;
  border-radius:2px;
  background:#fff;
  transition:transform .35s var(--ease),opacity .25s var(--ease);
}
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

/* ═══════════════════════ 7 · REVEALS ═══════════════════════ */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale{
  opacity:0;
  will-change:transform,opacity;
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.reveal{ transform:translateY(42px) }
.reveal-left{ transform:translateX(-52px) }
.reveal-right{ transform:translateX(52px) }
.reveal-scale{ transform:scale(.9) }

.reveal.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible{ opacity:1; transform:none }

.stagger-1{ transition-delay:.08s }
.stagger-2{ transition-delay:.16s }
.stagger-3{ transition-delay:.24s }
.stagger-4{ transition-delay:.32s }
.stagger-5{ transition-delay:.40s }
.stagger-6{ transition-delay:.48s }

/* ═══════════════════════ 8 · ESTADÍSTICAS ═══════════════════════ */
.stats-bar{
  position:relative;
  padding:2.8rem 0;
  background:var(--black2);
  border-top:1px solid var(--border-gold);
  border-bottom:1px solid var(--border-gold);
  overflow:hidden;
}
.stats-bar__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2rem;
  text-align:center;
}
.stat-item strong{
  display:block;
  font-family:'Playfair Display',Georgia,serif;
  font-size:2.35rem;
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.02em;
  background:linear-gradient(180deg,#fffbe8,var(--gold) 55%,var(--gold-dim));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.stat-item span{
  display:block;
  margin-top:.35rem;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.stat-item .ri{ display:none }

/* ═══════════════════════ 9 · TARJETAS ═══════════════════════ */
.cards-grid{
  display:grid;
  /* min(320px,100%): con minmax(320px,1fr) la pista no podía bajar de 320 px y
     en móvil (contenedor de 269 px) desbordaba 27 px → scroll lateral. */
  grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));
  gap:2rem;
}

.card{
  position:relative;
  background:var(--black3);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  cursor:pointer;
  box-shadow:var(--shadow);
  transform-style:preserve-3d;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),
             border-color .45s var(--ease),background .45s var(--ease);
}
.card:hover{
  background:var(--black4);
  border-color:var(--border-gold);
  box-shadow:var(--shadow-lg);
  transform:translateY(-8px);
}
.card:focus{ outline:2px solid var(--gold); outline-offset:3px }

.card__img{ position:relative; height:230px; overflow:hidden; background:var(--purple-deep) }
.card__img img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease);
}
.card:hover .card__img img{ transform:scale(1.07) }
.card__img::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.30) 50%,transparent 60%);
  transform:translateX(-110%);
  transition:transform .7s var(--ease);
  pointer-events:none;
}
.card:hover .card__img::after{ transform:translateX(110%) }

.card__badge{
  position:absolute;
  top:.95rem; left:.95rem;
  z-index:2;
  padding:.35rem 1rem;
  border-radius:var(--radius-pill);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.card__badge--compra{
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  color:#3a2a0c;
  box-shadow:0 4px 14px rgba(45,28,72,.35);
}
.card__badge--alquiler{
  background:rgba(60,42,90,.72);
  color:var(--gold-light);
  border:1px solid var(--border-gold);
  backdrop-filter:blur(6px);
}

.card__estado{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  padding:.45rem 1.15rem;
  border-radius:var(--radius-pill);
  font-family:'Playfair Display',Georgia,serif;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
  pointer-events:none;
}
.card__estado--vendida{ background:rgba(224,82,82,.9); color:#fff }
.card__estado--rebajada{ background:rgba(245,158,11,.92); color:#3a2a0c }

.card__fav{
  position:absolute;
  top:.95rem; right:.95rem;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid var(--border-gold);
  background:rgba(60,42,90,.6);
  backdrop-filter:blur(6px);
  transition:transform .25s var(--ease-back),border-color .25s var(--ease),background .25s var(--ease);
}
.card__fav:hover{ transform:scale(1.15); border-color:var(--gold); background:rgba(60,42,90,.85) }
.card__fav .ri{ color:var(--gold) }

.card__photo-count{
  position:absolute;
  bottom:.75rem; right:.75rem;
  z-index:2;
  padding:.22rem .7rem;
  border-radius:var(--radius-pill);
  background:rgba(60,42,90,.75);
  backdrop-filter:blur(6px);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.72rem;
  font-weight:700;
  color:#fff;
}

.card__reserva{
  position:absolute;
  bottom:.75rem; left:.75rem;
  z-index:2;
  padding:.26rem .75rem;
  border-radius:var(--radius-pill);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  pointer-events:none;
}
.card__reserva--ocupado{ background:rgba(224,82,82,.9); color:#fff }
.card__reserva--proximo{ background:rgba(245,158,11,.92); color:#3a2a0c }

.card__body{ padding:1.5rem }
.card__title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.26rem;
  font-weight:700;
  letter-spacing:.005em;
  color:#fff;
  margin-bottom:.45rem;
}
.card__loc{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.04rem;
  letter-spacing:.03em;
  color:var(--text-muted);
  margin-bottom:1rem;
}
.card__feats{
  display:flex;
  flex-wrap:wrap;
  gap:.9rem;
  padding-top:.95rem;
  border-top:1px solid var(--border);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1rem;
  letter-spacing:.03em;
  color:var(--text-muted);
}
.card__feat{ display:inline-flex; align-items:center; gap:.3rem }

/* Pista de a dónde lleva la tarjeta (los servicios van a su categoría) */
.card__go{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin-top:1.1rem;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  transition:color .3s var(--ease);
}
.card__go span{ display:inline-block; transition:transform .35s var(--ease-back) }
.card:hover .card__go{ color:var(--gold-light) }
.card:hover .card__go span{ transform:translateX(5px) }

.card__price{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  margin-bottom:.3rem;
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.55rem;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--gold);
}
.card__price-original{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.98rem;
  font-weight:400;
  color:var(--text-dim);
  text-decoration:line-through;
}
.card__price-new{ font-size:1.5rem; font-weight:700; color:#ffd166 }
.card__price-sub{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.82rem;
  font-weight:400;
  color:var(--text-dim);
}

/* ═══════════════════════ 10 · CÓMO TRABAJAMOS ═══════════════════════ */
.how-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
}
.how-card{
  position:relative;
  padding:2.8rem 2.2rem;
  text-align:center;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--black3);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:transform .45s var(--ease),border-color .45s var(--ease),
             box-shadow .45s var(--ease),background .45s var(--ease);
}
.how-card::before{
  content:'';
  position:absolute;
  top:0; left:50%;
  width:60%; height:2px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:0;
  transition:opacity .45s var(--ease);
}
.how-card:hover{
  transform:translateY(-10px);
  background:var(--black4);
  border-color:var(--border-gold);
  box-shadow:var(--shadow-lg);
}
.how-card:hover::before{ opacity:1 }

.how-card__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:74px; height:74px;
  margin:0 auto 1.4rem;
  border:1px solid var(--border-gold);
  border-radius:50%;
  background:radial-gradient(circle at 50% 30%,rgba(232,199,102,.22),rgba(60,42,90,.35) 72%);
  transition:transform .45s var(--ease-back),border-color .45s var(--ease);
}
.how-card:hover .how-card__icon{ transform:translateY(-4px) scale(1.06); border-color:var(--gold) }
.how-card__icon .ri{ width:2rem; height:2rem; color:var(--gold) }

.how-card__num{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:.5rem;
}
.how-card h3{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.42rem;
  font-weight:700;
  letter-spacing:.005em;
  color:#fff;
  margin-bottom:.7rem;
}
.how-card p{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.12rem;
  line-height:1.8;
  letter-spacing:.02em;
  color:var(--text-muted);
}

/* ═══════════════════════ 11 · MARQUESINA ═══════════════════════ */
.marquee{
  position:relative;
  overflow:hidden;
  padding:.6rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquee + .marquee{ margin-top:1.4rem }

.marquee__track{
  display:flex;
  width:max-content;
  animation:marqueeSlide 62s linear infinite;
}
.marquee--rev .marquee__track{ animation-direction:reverse; animation-duration:78s }
.marquee:hover .marquee__track{ animation-play-state:paused }

.marquee__group{
  display:flex;
  gap:1.4rem;
  padding-right:1.4rem;
}
.marquee__item{
  position:relative;
  flex:0 0 auto;
  width:300px;
  height:380px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--black4);
  box-shadow:var(--shadow);
  transition:transform .5s var(--ease),border-color .5s var(--ease),
             box-shadow .5s var(--ease);
}
.marquee__item img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease);
}
.marquee__item:hover{
  transform:translateY(-8px) scale(1.02);
  border-color:var(--gold);
  box-shadow:var(--shadow-lg);
}
.marquee__item:hover img{ transform:scale(1.08) }

/* ═══════════════════════ 12 · TESTIMONIOS ═══════════════════════ */
.testi-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
}
.testi-card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:2.4rem 2rem;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--black3);
  box-shadow:var(--shadow);
  transition:transform .45s var(--ease),border-color .45s var(--ease),
             box-shadow .45s var(--ease),background .45s var(--ease);
}
.testi-card::before{
  content:'\201C';
  position:absolute;
  top:.4rem; right:1.4rem;
  font-family:'Playfair Display',Georgia,serif;
  font-size:5rem;
  line-height:1;
  color:var(--gold);
  opacity:.28;
  pointer-events:none;
}
.testi-card:hover{
  transform:translateY(-8px);
  background:var(--black4);
  border-color:var(--border-gold);
  box-shadow:var(--shadow-lg);
}
.testi-card__stars{
  font-size:.95rem;
  letter-spacing:.3em;
  color:var(--gold);
  margin-bottom:1.1rem;
}
.testi-card blockquote{
  flex:1;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.2rem;
  font-style:italic;
  font-weight:400;
  line-height:1.9;
  color:var(--text-muted);
  margin-bottom:1.6rem;
}
.testi-card figcaption{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  padding-top:1.2rem;
  border-top:1px solid var(--border);
}
.testi-card figcaption strong{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.12rem;
  font-weight:700;
  color:#fff;
}
.testi-card figcaption span{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold);
}

/* ═══════════════════════ 13 · FAQ ═══════════════════════ */
.faq{ display:flex; flex-direction:column; gap:.85rem }
.faq__item{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--black3);
  overflow:hidden;
  transition:border-color .35s var(--ease),background .35s var(--ease);
}
.faq__item[open]{ border-color:var(--border-gold); background:var(--black4) }
.faq__item:hover{ border-color:var(--border-gold) }

.faq__item summary{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:1.35rem 1.7rem;
  cursor:pointer;
  list-style:none;
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.16rem;
  font-weight:600;
  color:#fff;
  transition:color .25s var(--ease);
}
.faq__item summary::-webkit-details-marker{ display:none }
.faq__item summary::after{
  content:'';
  flex:0 0 auto;
  width:11px; height:11px;
  border-right:1.8px solid var(--gold);
  border-bottom:1.8px solid var(--gold);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .35s var(--ease);
}
.faq__item[open] summary{ color:var(--gold) }
.faq__item[open] summary::after{ transform:rotate(225deg) translateY(-2px) }
.faq__item summary:hover{ color:var(--gold) }

.faq__item p{
  padding:0 1.7rem 1.5rem;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.14rem;
  line-height:1.9;
  color:var(--text-muted);
  animation:faqIn .4s var(--ease) both;
}

/* ═══════════════════════ 14 · CTA ═══════════════════════ */
.cta-full{
  position:relative;
  padding:7.5rem 0;
  overflow:hidden;
  isolation:isolate;
}
.cta-full__bg{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.06);
  will-change:transform;
}
.cta-full__overlay{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(74% 94% at 14% 50%,rgba(77,58,107,.94) 0%,rgba(77,58,107,.70) 52%,rgba(118,93,157,.76) 100%),
    linear-gradient(90deg,rgba(60,42,90,.90),rgba(118,93,157,.5));
}
.cta-full__content{ position:relative; z-index:1; max-width:620px; color:#fff }
.cta-full__content .section__eyebrow{ color:var(--gold-light) }
.cta-full__content .section__eyebrow::before{
  background:linear-gradient(90deg,transparent,var(--gold-light));
}
.cta-full__content h2{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(1.9rem,4.2vw,3rem);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.015em;
  margin-bottom:1.1rem;
}
.cta-full__content p{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.26rem;
  font-weight:400;
  line-height:1.85;
  color:rgba(255,255,255,.85);
  margin-bottom:2.2rem;
}

/* ═══════════════════════ 15 · CONTACTO Y FORMULARIOS ═══════════════════════ */
.contact-wrap{
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:4.5rem;
  align-items:start;
}
.contact-left__sub{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.22rem;
  font-weight:400;
  line-height:1.9;
  color:var(--text-muted);
  margin:.6rem 0 2rem;
}
.contact-details{
  display:flex;
  flex-direction:column;
  gap:1.05rem;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.16rem;
  letter-spacing:.02em;
  color:var(--text);
}
.contact-details li{ display:flex; align-items:center; gap:.75rem }
.contact-details .ri{ width:1.1rem; height:1.1rem; flex-shrink:0; color:var(--gold) }

.contact-badges{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:2.2rem;
}
.contact-badges span{
  padding:.42rem 1rem;
  border:1px solid var(--border-gold);
  border-radius:var(--radius-pill);
  background:rgba(232,199,102,.12);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.84rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold-light);
}

.contact-form{
  padding:2.6rem;
  border:1px solid var(--border-gold);
  border-radius:var(--radius-lg);
  background:var(--black3);
  box-shadow:var(--shadow);
  transition:box-shadow .4s var(--ease);
}
.contact-form:hover{ box-shadow:var(--shadow-lg) }

.form-row.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.form-group{
  display:flex;
  flex-direction:column;
  gap:.45rem;
  margin-bottom:1.35rem;
}
.form-group label{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
}
/* Marca de campo obligatorio */
.form-group label .req{ color:#e05252; margin-left:.15em }
/* Nota corta bajo un campo (p. ej. por qué pedimos el teléfono) */
.form-hint{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.92rem;
  line-height:1.5;
  color:rgba(226,217,242,.62);
}
.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  padding:.85rem 1.05rem;
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  background:rgba(60,42,90,.35);
  color:var(--text);
  outline:none;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),
             background .25s var(--ease);
}
.form-group input::placeholder,
.form-group textarea::placeholder{ color:rgba(226,217,242,.6) }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color:var(--gold);
  background:rgba(60,42,90,.55);
  box-shadow:0 0 0 3px rgba(232,199,102,.18);
}
.form-group select option{ background:#4d3a6b; color:#fff }
.form-group textarea{ resize:vertical; min-height:120px; line-height:1.7 }

.form-ok{
  margin-top:1rem;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1rem;
  font-weight:700;
  color:var(--gold-light);
  animation:faqIn .4s var(--ease) both;
}

/* ═══════════════════════ 16 · PAGE HERO ═══════════════════════ */
.page-hero{
  position:relative;
  display:flex;
  align-items:flex-end;
  height:400px;
  overflow:hidden;
  isolation:isolate;
}
.page-hero--short{ height:320px }
.page-hero__img{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.08);
  will-change:transform;
}
.page-hero__overlay{
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,
    rgba(118,93,157,.70) 0%,
    rgba(118,93,157,.32) 42%,
    rgba(60,42,90,.88) 100%);
}
.page-hero__content{
  position:relative;
  z-index:1;
  padding-bottom:2.8rem;
  color:#fff;
}
.page-hero__content h1{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(2rem,5vw,3.4rem);
  font-weight:900;
  line-height:1.08;
  letter-spacing:-.02em;
  margin-bottom:.35rem;
}
.page-hero__content p{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1rem;
  letter-spacing:.04em;
  color:rgba(255,255,255,.88);
}

.breadcrumb{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.86rem;
  letter-spacing:.06em;
  color:rgba(255,255,255,.85);
  margin-bottom:.7rem;
}
.breadcrumb a{ color:var(--gold-light); transition:color .25s var(--ease) }
.breadcrumb a:hover{ color:#fff }

/* ═══════════════════════ 17 · LISTADOS Y FILTROS ═══════════════════════ */
.listing-layout{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:2.5rem;
  align-items:start;
}
.filters{
  position:sticky;
  top:calc(var(--nav-h) + 18px);
  padding:1.9rem;
  border:1px solid var(--border-gold);
  border-radius:var(--radius-lg);
  background:var(--black3);
  box-shadow:var(--shadow);
  transition:box-shadow .35s var(--ease);
}
.filters:hover{ box-shadow:var(--shadow-lg) }

.filters__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.8rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--border);
}
.filters__head h3{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.12rem;
  font-weight:700;
  letter-spacing:.01em;
  color:#fff;
}
.filters__reset{
  background:none;
  border:none;
  padding:0;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--text-muted);
  text-decoration:underline;
  transition:color .25s var(--ease);
}
.filters__reset:hover{ color:var(--gold) }

.filter-group{ margin-bottom:1.5rem }
.filter-label{
  display:block;
  margin-bottom:.6rem;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
}
.filter-group select,
.filter-group input[type="text"]{
  width:100%;
  padding:.68rem .95rem;
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  background:rgba(60,42,90,.35);
  color:var(--text);
  outline:none;
  font-size:.94rem;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.filter-group select:focus,
.filter-group input[type="text"]:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(232,199,102,.18);
}
.filter-group select option{ background:#4d3a6b; color:#fff }

.radio-group,
.check-group{ display:flex; flex-direction:column; gap:.6rem }
.radio-group label,
.check-group label{
  display:flex;
  align-items:center;
  gap:.55rem;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.94rem;
  color:var(--text);
  cursor:pointer;
}
input[type="range"]{ width:100%; accent-color:var(--gold) }
.range-labels{
  display:flex;
  justify-content:space-between;
  margin-top:.35rem;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.75rem;
  color:var(--text-muted);
}

.pill-group{ display:flex; flex-wrap:wrap; gap:.45rem }
.pill{
  padding:.38rem .9rem;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-pill);
  background:transparent;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--text-muted);
  transition:all .25s var(--ease);
}
.pill:hover,
.pill.active{
  background:var(--gold);
  border-color:var(--gold);
  color:#3a2a0c;
}
.pill:active{ transform:scale(.94) }

.results__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.6rem;
}
.results__bar span{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.94rem;
  letter-spacing:.05em;
  color:var(--text-muted);
}
.results__bar select{
  padding:.55rem .9rem;
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  background:var(--black3);
  color:var(--text);
  outline:none;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.9rem;
}
.results__bar select option{ background:#4d3a6b }

.empty-state{ text-align:center; padding:5rem 2rem }
.empty-state span{ display:block; font-size:3rem; margin-bottom:1rem }
.empty-state p{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.14rem;
  letter-spacing:.03em;
  color:var(--text-muted);
  margin-bottom:1.6rem;
}

/* ═══════════════════════ 18 · SUBIDA POR PASOS ═══════════════════════ */
.upload-wrap{ max-width:760px; margin:0 auto }

.steps-bar{
  display:flex;
  align-items:center;
  gap:.3rem;
  margin-bottom:3rem;
  padding:1.3rem 1.8rem;
  border:1px solid var(--border-gold);
  border-radius:var(--radius-lg);
  background:var(--black3);
  box-shadow:var(--shadow);
}
.step-dot{ display:flex; align-items:center; gap:.55rem; flex:1 }
.step-dot__circle{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:36px; height:36px;
  border:1px solid var(--border-strong);
  border-radius:50%;
  background:rgba(60,42,90,.35);
  font-family:'Playfair Display',Georgia,serif;
  font-size:.86rem;
  font-weight:700;
  color:var(--text-muted);
  transition:all .45s var(--ease-back);
}
.step-dot span{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-muted);
  transition:color .3s var(--ease);
}
.step-dot.active .step-dot__circle{
  background:var(--gold);
  border-color:var(--gold);
  color:#3a2a0c;
  transform:scale(1.14);
  box-shadow:0 0 0 5px rgba(232,199,102,.20);
}
.step-dot.active span{ color:var(--gold) }
.step-dot.done .step-dot__circle{
  background:var(--gold-dim);
  border-color:var(--gold-dim);
  color:#fff;
}
.step-dot__line{ flex:1; height:1px; margin:0 .45rem; background:var(--border-strong) }

.form-step{ display:none }
.form-step.active{ display:block; animation:stepIn .45s var(--ease) both }

.step-title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.75rem;
  font-weight:700;
  letter-spacing:-.01em;
  color:#fff;
  margin-bottom:1.7rem;
}
.step-sub{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1rem;
  color:var(--text-muted);
  margin-bottom:1.5rem;
}
.form-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:2.2rem;
  padding-top:1.6rem;
  border-top:1px solid var(--border);
}
.char-count{
  display:block;
  margin-top:.35rem;
  text-align:right;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.76rem;
  color:var(--text-muted);
}

.check-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.65rem }
.check-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.45rem;
  padding:.95rem .55rem;
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  background:rgba(60,42,90,.28);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.82rem;
  text-align:center;
  color:var(--text-muted);
  cursor:pointer;
  transition:all .25s var(--ease);
}
.check-card input{ display:none }
.check-card:hover{ transform:translateY(-3px); border-color:var(--border-gold) }
.check-card:has(input:checked){
  border-color:var(--gold);
  background:rgba(232,199,102,.14);
  color:var(--gold-light);
  font-weight:700;
  animation:scaleIn .3s var(--ease-back) both;
}

.drop-zone{
  padding:3.2rem 2rem;
  border:1.5px dashed var(--border-gold);
  border-radius:var(--radius-lg);
  background:rgba(60,42,90,.28);
  text-align:center;
  cursor:pointer;
  transition:all .35s var(--ease);
}
.drop-zone:hover,
.drop-zone.dragover{
  border-color:var(--gold);
  background:rgba(232,199,102,.10);
  transform:scale(1.015);
}
.drop-zone__icon{ font-size:2.6rem; margin-bottom:.9rem }
.drop-zone p{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.95rem;
  color:var(--text-muted);
  margin-bottom:.35rem;
}
.drop-zone p span{ color:var(--gold-light); font-weight:700; text-decoration:underline }
.drop-zone__hint{ font-size:.8rem }

.photo-preview{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.1rem }
.photo-thumb{
  position:relative;
  width:104px; height:84px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  animation:scaleIn .3s var(--ease-back) both;
}
.photo-thumb img{ width:100%; height:100%; object-fit:cover }
.photo-thumb__del{
  position:absolute;
  top:4px; right:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:21px; height:21px;
  border:none;
  border-radius:50%;
  background:rgba(60,42,90,.9);
  color:#ff9d9d;
  font-size:.66rem;
}
.photo-thumb:first-child::after{
  content:'Основна';
  position:absolute;
  bottom:0; left:0; right:0;
  padding:2px;
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  color:#3a2a0c;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.62rem;
  font-weight:700;
  text-align:center;
}

.check-inline{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  margin-top:1rem;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.92rem;
  color:var(--text-muted);
  cursor:pointer;
}
.check-inline a{ color:var(--gold-light); text-decoration:underline }

.success-screen{ padding:5rem 2rem; text-align:center }
.success-screen__icon{ font-size:4rem; margin-bottom:1.2rem }
.success-screen h2{
  font-family:'Playfair Display',Georgia,serif;
  font-size:2.1rem;
  font-weight:700;
  color:#fff;
  margin-bottom:.8rem;
}
.success-screen p{
  font-family:'Cormorant Garamond',Georgia,serif;
  color:var(--text-muted);
  margin-bottom:2rem;
}
.success-screen__btns{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center }

/* ═══════════════════════ 19 · DETALLE Y SIDEBAR ═══════════════════════ */
.detail-hero__title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(1.9rem,5vw,3.6rem);
  font-weight:900;
  line-height:1.08;
  letter-spacing:-.022em;
}
.detail-hero__price-original{
  margin-top:.4rem;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.15rem;
  color:rgba(255,255,255,.7);
  text-decoration:line-through;
}

.detail-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:1rem;
}
.detail-stat{
  padding:1.1rem;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--black3);
  text-align:center;
}
.detail-stat__icon{ display:flex; justify-content:center; margin-bottom:.5rem }
.detail-stat__icon .ri{ width:1.5rem; height:1.5rem; color:var(--gold) }
.detail-stat__val{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.25rem;
  font-weight:700;
  color:#fff;
}
.detail-stat__label{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.detail-section h2{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.4rem;
  font-weight:700;
  letter-spacing:.01em;
  color:#fff;
  margin-bottom:1rem;
}
.detail-desc{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.16rem;
  line-height:2;
  letter-spacing:.02em;
  color:var(--text-muted);
}

.extra-tag{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.4rem .9rem;
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.07);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.9rem;
  letter-spacing:.05em;
  color:var(--text-muted);
}
.extra-tag .ri{ width:1.05rem; height:1.05rem; flex-shrink:0 }

.sidebar-card{
  padding:1.8rem;
  border:1px solid var(--border-gold);
  border-radius:var(--radius-lg);
  background:var(--black3);
  box-shadow:var(--shadow);
}
.sidebar-card h3{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.2rem;
  letter-spacing:.01em;
  color:#fff;
}
.sidebar-price{
  font-family:'Playfair Display',Georgia,serif;
  font-size:2.1rem;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--gold);
}

.detail-reserva{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin-top:.6rem;
  padding:.42rem 1.05rem;
  border-radius:var(--radius-pill);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.04em;
}
.detail-reserva--ocupado{ background:rgba(224,82,82,.22); color:#ffb3b3; border:1px solid rgba(224,82,82,.5) }
.detail-reserva--proximo{ background:rgba(245,158,11,.22); color:#ffd79a; border:1px solid rgba(245,158,11,.5) }
.detail-reserva--libre{ background:rgba(74,222,128,.18); color:#a7f3c4; border:1px solid rgba(74,222,128,.45) }

/* ═══════════════════════ 20 · FOOTER ═══════════════════════ */
.footer{
  position:relative;
  padding:4.5rem 0 0;
  background:linear-gradient(180deg,#6a538e,#5b4579);
  border-top:1px solid var(--border-gold);
  color:var(--text-muted);
}
.footer::before{
  content:'';
  position:absolute;
  top:0; left:50%;
  width:min(560px,70%);
  height:2px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.footer__inner{
  display:grid;
  grid-template-columns:2.5fr 1fr 1fr 1.2fr;
  gap:3rem;
  padding-bottom:3.2rem;
}
/* La columna de marca es un contenedor de consulta: las píldoras de redes
   deciden su disposición según el ANCHO REAL de la columna, no del viewport. */
.footer__brand{ container-type:inline-size; container-name:footer-brand }
.footer__logo{
  display:block;
  margin-bottom:.7rem;
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.75rem;
  font-weight:700;
  letter-spacing:.03em;
  color:#fff;
  transition:text-shadow .35s var(--ease);
}
.footer__logo span{ color:var(--gold) }
.footer__logo:hover{ text-shadow:0 0 26px rgba(232,199,102,.55) }
.footer__brand p{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.06rem;
  line-height:1.85;
  letter-spacing:.03em;
}
.footer__social{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
  margin-top:1.4rem;
}
/* Píldoras del pie: flex + line-height:1 para que el texto (mayúsculas) quede
   ópticamente centrado y el alto sea idéntico en todas. nowrap evita que
   «ОБАДИ СЕ» se parta en dos líneas. */
.footer__social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.2rem;
  padding:.4rem .85rem;
  line-height:1;
  white-space:nowrap;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.08);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-muted);
  transition:all .3s var(--ease);
}
.footer__social a:hover{
  border-color:var(--gold);
  background:var(--gold);
  color:#3a2a0c;
  transform:translateY(-2px);
}
/* Columna estrecha: mejor una rejilla 2×2 equilibrada que dejar «EMAIL»
   solo en una segunda fila (3+1). */
@container footer-brand (max-width:430px){
  .footer__social{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
.footer__col h4{
  margin-bottom:1.1rem;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
}
.footer__col ul{ display:flex; flex-direction:column; gap:.65rem }
.footer__col a,
.footer__col li{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.06rem;
  letter-spacing:.03em;
  transition:color .25s var(--ease);
}
.footer__col a:hover{ color:var(--gold) }
.footer__bottom{
  padding:1.3rem 0;
  border-top:1px solid var(--border);
  text-align:center;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.88rem;
  letter-spacing:.05em;
  color:rgba(255,255,255,.55);
}
/* Acceso al panel de administración. Solo lo usa za-nas.html, pero vive aquí
   para no repetir estilos en el HTML. Va debajo del copyright: al ser <p> de
   bloque, el enlace cae en su propia línea, centrado. */
.footer__admin{
  display:inline-flex;
  align-items:center;
  margin-top:.9rem;
  padding:.5rem 1.15rem;
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
  text-decoration:none;
  transition:color .25s var(--ease),border-color .25s var(--ease),
             background-color .25s var(--ease);
}
.footer__admin:hover{
  color:var(--gold-light);
  border-color:var(--border-gold);
  background:rgba(255,255,255,.06);
}

/* ═══════════════════════ 21 · WHATSAPP FLOTANTE ═══════════════════════ */
.whatsapp-float{
  position:fixed;
  right:2rem;
  bottom:2rem;
  z-index:999;
  display:flex;
  align-items:center;
  width:58px;
  height:58px;
  overflow:hidden;
  border:1px solid rgba(37,211,102,.55);
  border-radius:var(--radius-pill);
  background:rgba(60,42,90,.9);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(45,28,72,.45);
  white-space:nowrap;
  transition:width .45s var(--ease),box-shadow .35s var(--ease),
             transform .35s var(--ease),border-color .35s var(--ease);
}
.whatsapp-float:hover{
  width:186px;
  transform:translateY(-3px);
  border-color:#25d366;
  box-shadow:0 16px 38px rgba(37,211,102,.35);
}
.whatsapp-float__icon{
  flex-shrink:0;
  width:58px;
  height:58px;
  padding:15px;
  color:#25d366;
}
.whatsapp-float__label{
  padding-right:1.2rem;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.06em;
  color:#25d366;
  opacity:0;
  transform:translateX(-8px);
  pointer-events:none;
  transition:opacity .28s var(--ease) .1s,transform .28s var(--ease) .1s;
}
.whatsapp-float:hover .whatsapp-float__label{ opacity:1; transform:translateX(0) }

/* ═══════════════════════ 21b · VIBER FLOTANTE Y CONTACTO DIRECTO ═══════════════════════
   Viber es el canal preferido de la agencia, así que vive por encima del
   formulario: botón flotante en todas las páginas, botón propio en el primer
   pliegue y botones «Llamar / Viber» bajo cada servicio.                     */
.viber-float{
  position:fixed;
  right:2rem;
  bottom:6.6rem;
  z-index:999;
  display:flex;
  align-items:center;
  width:58px;
  height:58px;
  overflow:hidden;
  border:1px solid rgba(139,124,255,.55);
  border-radius:var(--radius-pill);
  background:rgba(60,42,90,.9);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(45,28,72,.45);
  white-space:nowrap;
  transition:width .45s var(--ease),box-shadow .35s var(--ease),
             transform .35s var(--ease),border-color .35s var(--ease),
             background-color .35s var(--ease);
}
.viber-float:hover,
.viber-float:focus-visible{
  width:196px;
  transform:translateY(-3px);
  background:#7360f2;
  border-color:#8b7cff;
  box-shadow:0 16px 38px rgba(115,96,242,.5);
}
.viber-float__icon{
  flex-shrink:0;
  width:58px;
  height:58px;
  padding:14px;
  color:#a99bff;
  transition:color .3s var(--ease);
}
.viber-float:hover .viber-float__icon,
.viber-float:focus-visible .viber-float__icon{ color:#fff }
.viber-float__label{
  padding-right:1.2rem;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.06em;
  color:#fff;
  opacity:0;
  transform:translateX(-8px);
  pointer-events:none;
  transition:opacity .28s var(--ease) .1s,transform .28s var(--ease) .1s;
}
.viber-float:hover .viber-float__label,
.viber-float:focus-visible .viber-float__label{ opacity:1; transform:translateX(0) }

/* Botón Viber (morado de marca) y botón de llamada */
.btn--viber{
  background:linear-gradient(135deg,#9a8cff 0%,#7360f2 52%,#5b48d6 100%);
  color:#fff;
  border-color:transparent;
  box-shadow:0 10px 26px rgba(45,28,72,.38);
}
.btn--viber:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 44px rgba(45,28,72,.45),0 0 0 1px rgba(154,140,255,.65);
}
.btn--viber .btn__ico{ width:1.05em; height:1.05em; flex-shrink:0 }

.btn--call{
  background:rgba(255,255,255,.10);
  color:var(--gold-light);
  border-color:var(--border-gold);
  backdrop-filter:blur(6px);
}
.btn--call:hover{
  background:var(--gold);
  color:#3a2a0c;
  border-color:var(--gold);
  transform:translateY(-3px);
  box-shadow:var(--shadow-gold);
}
.btn--sm{ padding:.66rem 1.35rem; font-size:.74rem; letter-spacing:.14em }

/* Bloque de contacto inmediato (Viber + llamada) */
.contact-quick{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  margin:0 0 2.2rem;
}
.contact-quick__hint{
  width:100%;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.06rem;
  color:var(--text-muted);
  margin-bottom:.15rem;
}

/* Mensaje de error del formulario: dice la verdad y ofrece Viber */
.form-error{
  margin-top:1.1rem;
  padding:1.05rem 1.25rem;
  border:1px solid rgba(224,82,82,.55);
  border-radius:var(--radius);
  background:rgba(224,82,82,.16);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.06rem;
  line-height:1.7;
  color:#ffdcdc;
  animation:faqIn .4s var(--ease) both;
}
.form-error strong{ display:block; margin-bottom:.3rem; color:#ffb3b3 }
.form-error__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:.9rem;
}
.form-error__actions a{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.42rem 1rem;
  border-radius:var(--radius-pill);
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08);
  font-size:.84rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#fff;
  transition:all .3s var(--ease);
}
.form-error__actions a:hover{
  background:#7360f2;
  border-color:#8b7cff;
  transform:translateY(-2px);
}

/* Aviso cuando el enlace de Viber no encuentra app (PC sin Viber) */
.viber-fallback{
  position:fixed;
  inset:0;
  z-index:1200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
  background:rgba(24,14,40,.72);
  backdrop-filter:blur(6px);
}
.viber-fallback.is-open{ display:flex; animation:fadeIn .25s var(--ease) both }
.viber-fallback__box{
  width:min(460px,100%);
  padding:2.2rem 1.9rem;
  border:1px solid var(--border-gold);
  border-radius:var(--radius-lg);
  background:var(--black3);
  box-shadow:var(--shadow-lg);
  text-align:center;
  animation:scaleIn .3s var(--ease) both;
}
.viber-fallback__title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.5rem;
  font-weight:700;
  color:#fff;
  margin-bottom:.7rem;
}
.viber-fallback__text{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.1rem;
  line-height:1.75;
  color:var(--text-muted);
  margin-bottom:1.5rem;
}
.viber-fallback__actions{
  display:flex;
  flex-direction:column;
  gap:.65rem;
}
.viber-fallback__close{
  margin-top:1.2rem;
  background:none;
  border:0;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.86rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-dim);
  transition:color .25s var(--ease);
}
.viber-fallback__close:hover{ color:var(--gold) }

/* Enlaces de reseñas y botones del pie */
.footer__reviews{ margin-top:1.1rem }
.footer__reviews a{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.42rem 1rem;
  border:1px solid var(--border-gold);
  border-radius:var(--radius-pill);
  background:rgba(232,199,102,.12);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold-light);
  transition:all .3s var(--ease);
}
.footer__reviews a:hover{
  background:var(--gold);
  border-color:var(--gold);
  color:#3a2a0c;
  transform:translateY(-2px);
}
.footer__cta{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin-top:1.1rem;
}
.footer__col a[data-viber]{ color:#c3b8ff }
.footer__col a[data-viber]:hover{ color:#fff }

/* ═══════════════════════ 22 · ICONOS ═══════════════════════ */
.ri{
  display:inline-block;
  width:1.1em;
  height:1.1em;
  flex-shrink:0;
  vertical-align:middle;
  color:var(--gold);
  transition:color .25s var(--ease),transform .25s var(--ease);
}
.ri--lg{ width:2.2rem; height:2.2rem }
.ri--sm{ width:.9em; height:.9em }
.ri--white{ color:#fff }
.ri--muted{ color:var(--text-muted) }
.ri--dark{ color:var(--ink) }

.card__feat .ri{ width:1em; height:1em; margin-right:.15em }
.card__fav .ri.filled{ color:#ff8a8a }

/* ═══════════════════════ 23 · EFECTOS GLOBALES ═══════════════════════ */
.progress-bar{
  position:fixed;
  top:0; left:0;
  z-index:1000;
  width:0;
  height:3px;
  background:linear-gradient(90deg,var(--gold-dim),var(--gold),var(--gold-light));
  box-shadow:0 0 12px rgba(232,199,102,.6);
  transition:width .12s linear;
}

/* ═══════════════════════ KEYFRAMES ═══════════════════════ */
@keyframes navIn{ from{ transform:translateY(-100%); opacity:0 } to{ transform:translateY(0); opacity:1 } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(28px) } to{ opacity:1; transform:translateY(0) } }
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }
@keyframes scaleIn{ from{ opacity:0; transform:scale(.9) } to{ opacity:1; transform:scale(1) } }
@keyframes stepIn{ from{ opacity:0; transform:translateX(22px) } to{ opacity:1; transform:translateX(0) } }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:translateY(0) } }
@keyframes marqueeSlide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@keyframes rippleAnim{ to{ transform:scale(2.6); opacity:0 } }

/* ═══════════════════════ RESPONSIVE ═══════════════════════ */
@media (max-width:1100px){
  .nav__links{ gap:1.3rem }
  .nav__links a{ font-size:.76rem; letter-spacing:.14em }
}

@media (max-width:1024px){
  .footer__inner{ grid-template-columns:1fr 1fr; gap:2.4rem }
  .contact-wrap{ grid-template-columns:1fr; gap:2.8rem }
  .how-grid,
  .testi-grid{ grid-template-columns:1fr 1fr }
  .stats-bar__grid{ grid-template-columns:repeat(2,1fr); gap:2.2rem }
}

@media (max-width:900px){
  .listing-layout{ grid-template-columns:1fr }
  .filters{ position:static }
  .check-grid{ grid-template-columns:repeat(3,1fr) }
  .marquee__item{ width:230px; height:300px }
  .how-grid,
  .testi-grid{ grid-template-columns:1fr }
  .section{ padding:4.5rem 0 }
  .section__head{ flex-direction:column; align-items:flex-start; gap:1rem }
  .nav__login span{ display:none }
  .nav__login{ padding:.62rem 1rem }
}

@media (max-width:640px){
  :root{ --nav-h: 88px }
  html{ font-size:17px }
  .nav__links{ display:none }
  /* El contacto por Viber se mantiene visible también en móvil: es el canal
     prioritario de la agencia, por encima del formulario. */
  .nav__cta{ display:inline-flex; padding:.52rem 1.05rem; font-size:.68rem; letter-spacing:.1em }
  .nav__login{ padding:.55rem .9rem }
  .nav__burger{ display:flex }
  .nav__links.open{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:1.1rem;
    position:fixed;
    top:calc(var(--nav-h) - 1px);
    left:clamp(.7rem,2.2vw,1.75rem);
    right:clamp(.7rem,2.2vw,1.75rem);
    margin:0 auto;
    padding:2rem 1.5rem 2.4rem;
    background:rgba(77,58,107,.99);
    backdrop-filter:blur(18px);
    border:1px solid var(--border-gold);
    border-top:0;
    border-radius:0 0 26px 26px;
    animation:faqIn .35s var(--ease) both;
  }
  .nav__links.open .nav__links-login{
    display:block;
    width:100%;
    margin-top:.4rem;
    padding-top:1rem;
    border-top:1px solid var(--border);
  }
  .nav__links.open .nav__links-login a{
    display:inline-flex;
    padding:.7rem 1.5rem;
    border:1.5px solid var(--border-gold);
    border-radius:var(--radius-pill);
    color:var(--gold-light);
  }
  .nav__logo img{ height:64px }

  .stats-bar__grid{ grid-template-columns:repeat(2,1fr); gap:1.8rem }
  .stat-item strong{ font-size:1.9rem }
  .form-row.two-col{ grid-template-columns:1fr }
  .check-grid{ grid-template-columns:repeat(2,1fr) }
  .step-dot span{ display:none }
  .steps-bar{ padding:1rem; gap:.15rem }
  .contact-form{ padding:1.8rem }
  /* En móvil las etiquetas largas («Пишете ни във Viber») se partían en dos
     líneas y dejaban el botón con 92 px de alto. Reducimos relleno y cuerpo
     para que quepan en una sola línea. */
  .btn--lg{ padding:.92rem 1.15rem; font-size:.86rem }
  /* Los botones de contacto directo llevan icono + etiqueta larga: en 320 px
     necesitaban ~280 px y solo había ~269 px, así que el texto se partía.
     Un poco menos de cuerpo y de tracking los deja holgados en una línea. */
  .contact-quick .btn{ padding:.85rem .95rem; font-size:.82rem; letter-spacing:.12em }
  .page-hero{ height:280px }
  .page-hero--short{ height:240px }
  .marquee__item{ width:190px; height:250px }
  .whatsapp-float{ right:1.2rem; bottom:1.2rem; width:52px; height:52px }
  .whatsapp-float__icon{ width:52px; height:52px; padding:13px }
  .viber-float{ right:1.2rem; bottom:5.4rem; width:52px; height:52px }
  .viber-float__icon{ width:52px; height:52px; padding:12px }
  .viber-float:hover,
  .viber-float:focus-visible{ width:172px }
  .section__head{ margin-bottom:2.4rem }
  .footer__inner{ grid-template-columns:1fr; gap:2.2rem }
  .footer__cta .btn,
  .contact-quick .btn{ flex:1 1 auto; justify-content:center }
}

/* ═══════════════════════ MOVIMIENTO REDUCIDO ═══════════════════════ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-delay:0s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
  }
  .marquee__track{ animation:none !important }
  .seam__dot{ animation:none !important }
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale{ opacity:1 !important; transform:none !important }
}

/* ═══════════════════════ MARQUEE CLICKABLE ═══════════════════════ */
.marquee__item--clickable{
  cursor:pointer;
  transition:all .3s var(--ease);
}
.marquee__item--clickable:hover{
  transform:translateY(-8px) scale(1.04);
  box-shadow:var(--shadow-lg);
  z-index:10;
}
.marquee__item--clickable:active{
  transform:translateY(-6px) scale(1.02);
}

/* ═══════════════════════ LIGHTBOX INDEX ═══════════════════════ */
#marquee-lightbox {
  z-index: 99999 !important;
  position: fixed !important;
}

#marquee-lightbox.is-open {
  display: block !important;
}


/* ═══════════════════ FIX LIGHTBOX MARQUEE ═══════════════════ */
#marquee-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 999999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#marquee-lightbox.is-open {
  display: flex;
  opacity: 1;
  align-items: center;
  justify-content: center;
}

#marquee-lightbox .lb__close {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-size: 2rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1000000;
  transition: all 0.2s;
}

#marquee-lightbox .lb__close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

#marquee-lightbox .lb__figure {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}

#marquee-lightbox .lb__img {
  max-width: 90vw;
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: opacity 0.3s;
  display: block;
}

#marquee-lightbox .lb__img.is-swapping {
  opacity: 0.3;
}

#marquee-lightbox .lb__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-size: 2.5rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  z-index: 10;
}

#marquee-lightbox .lb__btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-50%) scale(1.1);
}

#marquee-lightbox .lb__btn--prev {
  left: 2rem;
}

#marquee-lightbox .lb__btn--next {
  right: 2rem;
}

#marquee-lightbox .lb__bar {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  padding: 0.5rem 1.5rem;
  border-radius: 2rem;
  color: white;
  font-size: 1rem;
}

#marquee-lightbox .lb__counter strong {
  color: var(--gold);
}

@media (max-width: 768px) {
  #marquee-lightbox .lb__btn {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.5rem;
  }
  
  #marquee-lightbox .lb__btn--prev {
    left: 1rem;
  }
  
  #marquee-lightbox .lb__btn--next {
    right: 1rem;
  }
  
  #marquee-lightbox .lb__close {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.5rem;
    top: 1rem;
    right: 1rem;
  }
}