/* ============================================================
   ANDRÓMEDA · Hoja de estilos de marca
   Sobre Bootstrap 5.3.8 — sobrescribe tokens y componentes
   ============================================================ */

:root{
  --noche:#101827;
  --cosmos:#04080F;
  --oro:#C9A46A;
  --oro-luz:#F0DCAE;
  --bronce:#B7884C;
  --oro-oscuro:#8A6A2F;
  --champagne:#E8DED0;
  --estelar:#FAF7F2;
  --nebulosa:#6E7688;

  --ff-display:'Cormorant Garamond', Georgia, serif;
  --ff-text:'Jost','Century Gothic',sans-serif;
  --ff-logo:'Cinzel', Georgia, serif;

  --bs-body-bg:var(--noche);
  --bs-body-color:rgba(250,247,242,.82);
  --bs-body-font-family:var(--ff-text);
  --bs-border-radius:0;
  --bs-link-color:var(--oro);
  --bs-link-hover-color:var(--oro-luz);
}

*{ border-radius:0 !important; }

html{ scroll-behavior:smooth; scroll-padding-top:76px; }
body{
  font-family:var(--ff-text);
  font-weight:300;
  font-size:1rem;
  line-height:1.75;
  background:var(--noche);
  color:rgba(250,247,242,.82);
  overflow-x:hidden;
}
img{ max-width:100%; }
::selection{ background:var(--oro); color:var(--noche); }

/* ---------- Tipografía ---------- */
h1,h2,h3,.display-serif{ font-family:var(--ff-display); font-weight:300; letter-spacing:.01em; }
h1{ font-size:clamp(2.75rem,7vw,5.25rem); line-height:1.05; }
h2{ font-size:clamp(2rem,4vw,3.15rem); line-height:1.14; }
p{ margin-bottom:1rem; }

.eyebrow{
  font-family:var(--ff-text); font-weight:400; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.42em; color:var(--oro);
  display:block; margin-bottom:1.25rem;
}
.ritual-tag{
  font-family:var(--ff-text); font-weight:300; font-size:.68rem;
  text-transform:uppercase; letter-spacing:.26em; color:var(--oro);
}
.lead-brand{ font-size:1.05rem; line-height:1.85; max-width:58ch; }
.quote{
  font-family:var(--ff-display); font-style:italic; font-weight:300;
  font-size:clamp(1.25rem,2.4vw,1.75rem); line-height:1.5; color:var(--oro-luz);
}
.price{ font-family:var(--ff-display); font-size:1.45rem; color:var(--estelar); }
.note{ font-size:.78rem; line-height:1.7; color:var(--nebulosa); letter-spacing:.02em; }

/* ---------- Fondos y elementos gráficos ---------- */
.bg-noche{ background:var(--noche); }
.bg-cosmos{ background:var(--cosmos); }
.bg-estelar{ background:var(--estelar); color:rgba(26,34,51,.8); }
.bg-champagne{ background:var(--champagne); color:rgba(26,34,51,.8); }

.bg-estelar h1,.bg-estelar h2,.bg-estelar h3,
.bg-champagne h1,.bg-champagne h2,.bg-champagne h3{ color:#1A2233; }
.bg-estelar .eyebrow,.bg-champagne .eyebrow,
.bg-estelar .ritual-tag,.bg-champagne .ritual-tag,
.bg-estelar .quote,.bg-champagne .quote{ color:var(--oro-oscuro); }
.bg-estelar .price,.bg-champagne .price{ color:#1A2233; }
.bg-estelar .note,.bg-champagne .note{ color:rgba(26,34,51,.55); }

.section{ position:relative; padding:clamp(4.5rem,9vw,8rem) 0; overflow:hidden; }
.stars{
  position:absolute; inset:0; pointer-events:none;
  background:url('../img/stars.svg') center/cover no-repeat; opacity:.4;
}
.stars--soft{ opacity:.22; }
.neb{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 82% 12%, rgba(201,164,106,.16), rgba(201,164,106,0) 45%),
    radial-gradient(circle at 8% 92%, rgba(201,164,106,.10), rgba(201,164,106,0) 42%);
}
.section > .container,.section > .container-fluid{ position:relative; z-index:2; }

.divider{
  width:190px; height:14px; margin:1.5rem 0;
  background:url('../img/divider.svg') left center/contain no-repeat;
}
.divider--center{ margin-left:auto; margin-right:auto; background-position:center; }
.hair{ height:1px; background:rgba(201,164,106,.3); margin:2rem 0; border:0; opacity:1; }
.bg-estelar .hair,.bg-champagne .hair{ background:rgba(26,34,51,.15); }

/* ---------- Botones ---------- */
.btn{
  font-family:var(--ff-text); font-weight:500; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.22em;
  padding:.95rem 2.1rem; border-width:1px; transition:all .35s ease;
}
.btn-oro{ background:var(--oro); border-color:var(--oro); color:var(--noche); }
.btn-oro:hover,.btn-oro:focus{ background:var(--oro-luz); border-color:var(--oro-luz); color:var(--noche); }
.btn-linea{ background:transparent; border-color:rgba(201,164,106,.6); color:var(--estelar); }
.btn-linea:hover{ background:rgba(201,164,106,.12); border-color:var(--oro); color:var(--estelar); }
.bg-estelar .btn-linea,.bg-champagne .btn-linea{ color:#1A2233; border-color:rgba(138,106,47,.5); }
.btn-ghost{
  background:none; border:0; padding:0; color:var(--oro);
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  border-bottom:1px solid rgba(201,164,106,.45);
}
.btn-ghost:hover{ color:var(--oro-luz); border-color:var(--oro-luz); }

/* ---------- Header ---------- */
.navbar-andromeda{
  background:transparent; transition:background .4s ease, backdrop-filter .4s ease, border-color .4s;
  border-bottom:1px solid transparent; padding:1rem 0; z-index:1040;
}
.navbar-andromeda.scrolled{
  background:rgba(4,8,15,.92); backdrop-filter:blur(10px);
  border-bottom-color:rgba(201,164,106,.25); padding:.55rem 0;
}
.navbar-brand-andromeda{
  font-family:var(--ff-logo); font-size:1.05rem; letter-spacing:.42em;
  color:var(--oro); text-decoration:none;
}
.navbar-brand-andromeda:hover{ color:var(--oro-luz); }
.navbar-andromeda .nav-link{
  font-family:var(--ff-text); font-weight:300; font-size:.68rem;
  text-transform:uppercase; letter-spacing:.22em;
  color:rgba(250,247,242,.75); padding:.5rem .85rem !important;
}
.navbar-andromeda .nav-link:hover,.navbar-andromeda .nav-link.active{ color:var(--oro); }
.navbar-toggler{ border:1px solid rgba(201,164,106,.5); padding:.4rem .6rem; }
.navbar-toggler:focus{ box-shadow:none; }
.navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23C9A46A' stroke-width='1.5' stroke-linecap='round' d='M4 8h22M4 15h22M4 22h22'/%3e%3c/svg%3e");
}
.offcanvas-andromeda{ background:var(--cosmos); border-left:1px solid rgba(201,164,106,.25); }
.offcanvas-andromeda .nav-link{
  font-family:var(--ff-display); font-size:1.6rem; letter-spacing:.04em;
  text-transform:none; color:var(--estelar); padding:.6rem 0 !important;
}
.offcanvas-andromeda .nav-link:hover{ color:var(--oro); }
.btn-close-oro{
  filter:invert(72%) sepia(35%) saturate(500%) hue-rotate(2deg) brightness(95%);
}

/* ---------- Hero ---------- */
#hero{ position:relative; height:100svh; min-height:600px; }
#hero .carousel,#hero .carousel-inner,#hero .carousel-item{ height:100%; }
#hero .carousel-item img{ width:100%; height:100%; object-fit:cover; }
#hero .carousel-item::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(4,8,15,.62) 0%,rgba(4,8,15,.30) 45%,rgba(4,8,15,.88) 100%);
}
.carousel-fade .carousel-item{ transition:opacity 1.2s ease; }
.hero-content{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 1.25rem;
}
.hero-content h1{ color:var(--estelar); margin:.5rem 0 0; }
.hero-sub{ max-width:36rem; color:rgba(250,247,242,.86); font-size:1.02rem; }
.hero-indicators{ position:absolute; bottom:8.5rem; left:50%; transform:translateX(-50%); z-index:6; display:flex; gap:.65rem; }
.hero-indicators button{
  width:34px; height:1px; border:0; background:rgba(250,247,242,.3); padding:0;
  transition:background .4s;
}
.hero-indicators button.active{ background:var(--oro); }
.scroll-hint{
  position:absolute; bottom:2.4rem; left:50%; transform:translateX(-50%); z-index:6;
  font-size:.6rem; letter-spacing:.34em; text-transform:uppercase; color:rgba(250,247,242,.45);
  text-align:center;
}
.scroll-hint span{ display:block; width:1px; height:38px; background:var(--oro); margin:.6rem auto 0; animation:pulseLine 2.6s ease-in-out infinite; }
@keyframes pulseLine{ 0%,100%{opacity:.15; transform:scaleY(.6); transform-origin:top;} 50%{opacity:.9; transform:scaleY(1); transform-origin:top;} }

/* ---------- Tarjetas ---------- */
.card-linea{
  border:1px solid rgba(201,164,106,.3); background:transparent;
  padding:1.9rem; height:100%; transition:border-color .35s, background .35s, transform .35s;
}
.card-linea:hover{ border-color:rgba(201,164,106,.65); background:rgba(201,164,106,.05); }
.bg-estelar .card-linea,.bg-champagne .card-linea{ border-color:rgba(26,34,51,.16); }
.bg-estelar .card-linea:hover,.bg-champagne .card-linea:hover{ border-color:rgba(138,106,47,.5); background:rgba(201,164,106,.06); }
.card-fill{ background:rgba(201,164,106,.07); border:1px solid rgba(201,164,106,.3); padding:1.9rem; height:100%; }
.marco-doble{ border:1px solid rgba(201,164,106,.45); padding:6px; }
.marco-doble > *{ border:1px solid rgba(201,164,106,.35); padding:1.9rem; height:100%; }
.step-num{ font-family:var(--ff-display); font-size:2.4rem; line-height:1; color:rgba(201,164,106,.5); }
.card-linea h3{ font-family:var(--ff-text); font-weight:500; font-size:.82rem; letter-spacing:.24em; text-transform:uppercase; color:var(--estelar); margin:.85rem 0 .6rem; }
.bg-estelar .card-linea h3,.bg-champagne .card-linea h3{ color:#1A2233; }
.card-linea p{ font-size:.86rem; line-height:1.7; margin:0; }

/* ---------- Tratamientos ---------- */
.nav-colecciones{ border:0; gap:.25rem; margin-bottom:2.75rem; flex-wrap:wrap; }
.nav-colecciones .nav-link{
  border:0 !important; background:none; color:rgba(250,247,242,.55);
  font-family:var(--ff-text); font-weight:400; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.26em; padding:.6rem 1.1rem;
  border-bottom:1px solid transparent !important;
}
.nav-colecciones .nav-link:hover{ color:var(--oro); }
.nav-colecciones .nav-link.active{ color:var(--oro); border-bottom-color:var(--oro) !important; background:none; }
.trat{ border:1px solid rgba(201,164,106,.28); padding:1.75rem; height:100%; display:flex; flex-direction:column; transition:border-color .35s,background .35s; }
.trat:hover{ border-color:rgba(201,164,106,.6); background:rgba(201,164,106,.04); }
.trat h3{ font-family:var(--ff-display); font-weight:400; font-size:1.3rem; text-transform:uppercase; letter-spacing:.1em; color:var(--estelar); margin-bottom:.35rem; }
.trat .para{ font-size:.84rem; color:rgba(250,247,242,.7); margin:.9rem 0 1.2rem; flex:1; }
.badge-hero{ font-size:.55rem; letter-spacing:.24em; text-transform:uppercase; color:var(--oro); border:1px solid rgba(201,164,106,.5); padding:.2rem .55rem; }

/* ---------- Formulario ---------- */
.form-andromeda .form-label{
  font-family:var(--ff-text); font-weight:400; font-size:.63rem;
  text-transform:uppercase; letter-spacing:.24em; color:var(--oro); margin-bottom:.5rem;
}
.form-andromeda .form-control,
.form-andromeda .form-select{
  background:transparent; border:0; border-bottom:1px solid rgba(201,164,106,.35);
  color:var(--estelar); font-family:var(--ff-text); font-weight:300; font-size:.95rem;
  padding:.55rem 0; box-shadow:none;
}
.form-andromeda .form-select{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23C9A46A' stroke-width='1.2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-position:right .1rem center; background-size:14px;
}
.form-andromeda .form-control:focus,
.form-andromeda .form-select:focus{
  background:transparent; border-bottom-color:var(--oro); color:var(--estelar); box-shadow:none;
}
.form-andromeda .form-control::placeholder{ color:rgba(250,247,242,.28); }
.form-andromeda option{ background:var(--noche); color:var(--estelar); }
.form-andromeda optgroup{ background:var(--cosmos); color:var(--oro); font-family:var(--ff-text); }
.form-andromeda .form-check-input{ background-color:transparent; border-color:rgba(201,164,106,.5); margin-top:.35rem; }
.form-andromeda .form-check-input:checked{ background-color:var(--oro); border-color:var(--oro); }
.form-andromeda .form-check-label{ font-size:.78rem; color:rgba(250,247,242,.65); }
.invalid-msg{ display:none; color:#E39B94; font-size:.72rem; letter-spacing:.02em; margin-top:.35rem; }
.is-invalid ~ .invalid-msg{ display:block; }
.form-andromeda .is-invalid{ border-bottom-color:#E39B94 !important; }

/* ---------- Mirror ---------- */
.dropzone{
  border:1px dashed rgba(201,164,106,.5); background:rgba(201,164,106,.03);
  padding:3.5rem 1.5rem; text-align:center; cursor:pointer; transition:all .3s;
}
.dropzone:hover,.dropzone.drag{ border-color:var(--oro); background:rgba(201,164,106,.08); }
.compare{ position:relative; overflow:hidden; user-select:none; touch-action:none; }
.compare img{ display:block; width:100%; }
.compare .after{ position:absolute; inset:0; overflow:hidden; width:50%; }
.compare .after img{ position:absolute; top:0; left:0; height:100%; width:auto; max-width:none; }
.compare .handle{ position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--oro); cursor:ew-resize; }
.compare .handle::after{
  content:''; position:absolute; top:50%; left:50%; width:38px; height:38px;
  transform:translate(-50%,-50%); border:1px solid var(--oro); border-radius:50% !important;
  background:rgba(4,8,15,.7);
}
.compare .tag{ position:absolute; bottom:.75rem; font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(250,247,242,.8); }

/* ---------- Agenda ---------- */
.agenda-frame{ width:100%; min-height:700px; border:0; background:var(--cosmos); }
@media (max-width:767.98px){ .agenda-frame{ min-height:640px; } }

/* ---------- WhatsApp flotante ---------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:1050;
  display:flex; align-items:center; gap:.6rem;
  background:rgba(4,8,15,.92); border:1px solid rgba(201,164,106,.6);
  border-radius:999px !important; padding:.7rem; text-decoration:none;
  box-shadow:0 8px 28px rgba(0,0,0,.45); transition:all .35s ease;
}
.wa-float svg{ width:26px; height:26px; flex:none; }
.wa-float span{
  max-width:0; overflow:hidden; white-space:nowrap; opacity:0;
  font-size:.7rem; letter-spacing:.16em; color:var(--estelar); transition:all .4s ease;
}
.wa-float:hover span{ max-width:190px; opacity:1; padding-right:.6rem; }
.wa-float:hover{ border-color:var(--oro); }
.wa-float.raised{ bottom:96px; }
@keyframes waPulse{ 0%,92%,100%{transform:scale(1);} 96%{transform:scale(1.06);} }
.wa-float{ animation:waPulse 6s ease-in-out infinite; }

/* ---------- Footer ---------- */
.footer{ background:var(--cosmos); padding:4.5rem 0 2rem; position:relative; }
.footer a{ color:rgba(250,247,242,.6); text-decoration:none; font-size:.68rem; text-transform:uppercase; letter-spacing:.2em; }
.footer a:hover{ color:var(--oro); }
.footer-logo{ font-family:var(--ff-logo); font-size:1.4rem; letter-spacing:.42em; color:var(--oro); }
.footer-tag{ font-size:.65rem; letter-spacing:.34em; text-transform:uppercase; color:rgba(250,247,242,.55); }

/* ---------- Animación de entrada ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s ease, transform .9s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  .wa-float{ animation:none; }
  .scroll-hint span{ animation:none; }
}

/* ---------- Modal ---------- */
.modal-andromeda .modal-content{ background:var(--cosmos); border:1px solid rgba(201,164,106,.4); color:var(--estelar); }
.modal-andromeda .modal-header{ border-bottom:1px solid rgba(201,164,106,.25); }
.modal-andromeda .modal-footer{ border-top:1px solid rgba(201,164,106,.25); }
.modal-andromeda table{ width:100%; font-size:.85rem; }
.modal-andromeda th{ font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--oro); padding:.5rem .4rem; border-bottom:1px solid rgba(201,164,106,.35); text-align:right; }
.modal-andromeda th:first-child{ text-align:left; }
.modal-andromeda td{ padding:.5rem .4rem; border-bottom:1px solid rgba(250,247,242,.1); text-align:right; }
.modal-andromeda td:first-child{ text-align:left; }

/* ============================================================
   COLECCIONES · Fondo dinámico por pestaña
   Fondos tomados de la jerarquía del brand book:
   Essential → Blanco Estelar · Signature → Negro Cósmico
   Repair → Champagne Perla  · Enhanced → Azul Noche
   ============================================================ */

#colecciones{
  /* Estado por defecto: ESSENTIAL (fondo claro) */
  --sec-bg:        var(--estelar);
  --sec-fg:        #1A2233;
  --sec-fg-soft:   rgba(26,34,51,.72);
  --sec-oro:       var(--oro-oscuro);
  --sec-line:      rgba(26,34,51,.16);
  --sec-line-hi:   rgba(138,106,47,.55);
  --sec-hover:     rgba(201,164,106,.08);
  --sec-fill:      rgba(201,164,106,.10);
  --sec-stars:     0;
  --sec-div:       brightness(.72) saturate(1.15);

  background-color: var(--sec-bg);
  color: var(--sec-fg-soft);
  transition: background-color .8s ease, color .8s ease;
}

#colecciones[data-coleccion="signature"]{
  --sec-bg:      var(--cosmos);
  --sec-fg:      var(--estelar);
  --sec-fg-soft: rgba(250,247,242,.80);
  --sec-oro:     var(--oro);
  --sec-line:    rgba(201,164,106,.32);
  --sec-line-hi: rgba(201,164,106,.75);
  --sec-hover:   rgba(201,164,106,.07);
  --sec-fill:    rgba(201,164,106,.09);
  --sec-stars:   .5;
  --sec-div:     none;
}

#colecciones[data-coleccion="repair"]{
  --sec-bg:      var(--champagne);
  --sec-fg:      #1A2233;
  --sec-fg-soft: rgba(26,34,51,.74);
  --sec-oro:     var(--oro-oscuro);
  --sec-line:    rgba(26,34,51,.18);
  --sec-line-hi: rgba(138,106,47,.55);
  --sec-hover:   rgba(255,255,255,.35);
  --sec-fill:    rgba(255,255,255,.42);
  --sec-stars:   0;
  --sec-div:     brightness(.72) saturate(1.15);
}

#colecciones[data-coleccion="enhanced"]{
  --sec-bg:      var(--noche);
  --sec-fg:      var(--estelar);
  --sec-fg-soft: rgba(250,247,242,.80);
  --sec-oro:     var(--oro);
  --sec-line:    rgba(201,164,106,.28);
  --sec-line-hi: rgba(201,164,106,.65);
  --sec-hover:   rgba(201,164,106,.06);
  --sec-fill:    rgba(201,164,106,.08);
  --sec-stars:   .28;
  --sec-div:     none;
}

/* --- Todo lo de adentro hereda de las variables --- */

#colecciones h2,
#colecciones .trat h3,
#colecciones .price{
  color: var(--sec-fg);
  transition: color .8s ease;
}

#colecciones .eyebrow,
#colecciones .ritual-tag,
#colecciones .badge-hero{
  color: var(--sec-oro);
  transition: color .8s ease, border-color .8s ease;
}
#colecciones .badge-hero{ border-color: var(--sec-line-hi); }

#colecciones p,
#colecciones .para{
  color: var(--sec-fg-soft);
  transition: color .8s ease;
}
#colecciones .note{ color: var(--sec-fg-soft); opacity:.72; }

#colecciones .trat,
#colecciones .card-fill{
  border-color: var(--sec-line);
  transition: border-color .8s ease, background-color .35s ease;
}
#colecciones .card-fill{ background: var(--sec-fill); }
#colecciones .trat:hover{
  border-color: var(--sec-line-hi);
  background: var(--sec-hover);
}

#colecciones .btn-ghost{
  color: var(--sec-oro);
  border-bottom-color: var(--sec-line-hi);
}
#colecciones .btn-ghost:hover{ opacity:.75; }

#colecciones .nav-colecciones .nav-link{
  color: var(--sec-fg-soft);
  opacity:.62;
  transition: color .8s ease, opacity .3s ease, border-color .5s ease;
}
#colecciones .nav-colecciones .nav-link:hover{ opacity:1; color: var(--sec-oro); }
#colecciones .nav-colecciones .nav-link.active{
  opacity:1;
  color: var(--sec-oro);
  border-bottom-color: var(--sec-oro) !important;
}

#colecciones .divider{ filter: var(--sec-div); transition: filter .8s ease; }
#colecciones .stars{ opacity: var(--sec-stars); transition: opacity .8s ease; }

/* El contenido entrante no debe parpadear al cambiar de pestaña */
#colecciones .tab-pane.fade{ transition: opacity .45s ease; }

@media (prefers-reduced-motion: reduce){
  #colecciones,
  #colecciones *{ transition: none !important; }
}