/* ============================================================
   CASA CALYPSO · sitio público
   Paleta terrosa tropical: barro, arena, palma, ocre.
   ============================================================ */

:root{
  --crema:#FDF8F1;
  --arena:#F4E9DA;
  --arena-2:#EADCC8;
  --barro:#B4623C;
  --barro-osc:#96502F;
  --arcilla:#7E4128;
  --palma:#5F7D4F;
  --ocre:#C9903D;
  --carbon:#2C231C;
  --tinta:#4A3B30;
  --linea:rgba(126,65,40,.18);
  --sombra:0 18px 50px -22px rgba(70,40,24,.45);
  --sombra-sm:0 8px 26px -14px rgba(70,40,24,.4);
  --r:18px;
  --r-lg:28px;
  --max:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:86px}
body{
  font-family:"Outfit",system-ui,sans-serif;
  color:var(--tinta);
  background:var(--crema);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif;color:var(--carbon);font-weight:600;line-height:1.12;letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,5.4vw,4.1rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.7rem)}
h3{font-size:1.3rem}

.kicker{
  font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--barro);font-weight:600;margin-bottom:.7rem;
  display:flex;align-items:center;gap:.6rem;
}
.kicker::before{content:"";width:26px;height:1px;background:var(--barro);opacity:.6}

/* ---------- botones ---------- */
.btn{
  font-family:inherit;font-size:.95rem;font-weight:600;
  border:none;border-radius:999px;padding:.85rem 1.6rem;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  text-decoration:none;transition:transform .18s,box-shadow .18s,background .18s,color .18s;
}
.btn-sm{padding:.6rem 1.15rem;font-size:.88rem}
.btn-sol{background:var(--barro);color:#fff;box-shadow:var(--sombra-sm)}
.btn-sol:hover{background:var(--barro-osc);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--arcilla);border:1.5px solid var(--linea)}
.btn-ghost:hover{border-color:var(--barro);color:var(--barro)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* ---------- placeholder de foto ---------- */
.ph{
  position:relative;width:100%;height:100%;min-height:150px;
  border-radius:inherit;
  background:
    repeating-linear-gradient(45deg,rgba(180,98,60,.055) 0 12px,transparent 12px 24px),
    var(--arena);
  border:1.5px dashed rgba(126,65,40,.3);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.5rem;text-align:center;padding:1.2rem;color:var(--arcilla);
}
.ph svg{width:30px;height:30px;opacity:.5}
.ph b{font-size:.8rem;font-weight:600;letter-spacing:.02em}
.ph span{
  font-size:.72rem;opacity:.75;font-family:ui-monospace,"Courier New",monospace;
  background:rgba(255,255,255,.6);padding:.15rem .5rem;border-radius:6px;
  word-break:break-all;
}
/* el hueco de foto de un cuarto también toma su color, así que sigue al que
   se elija en el panel en vez de quedarse con uno fijo */
.banda .ph,.detalle .ph{
  background:
    repeating-linear-gradient(45deg,var(--c-12) 0 12px,transparent 12px 24px),
    var(--crema);
  border-color:var(--c-30);
  color:var(--c);
}
.banda .ph span,.detalle .ph span{background:rgba(255,255,255,.75)}

/* ---------- splash ----------
   Foto de la bahía a pantalla completa, velo cálido encima y la placa
   al centro. Al terminar, todo se levanta y descubre el sitio.
   Nunca usa el atributo hidden: con display:flex de por medio no haría nada. */
.splash{
  position:fixed;inset:0;z-index:300;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--carbon);
  transition:transform .9s cubic-bezier(.7,0,.2,1),opacity .9s ease;
}
.splash.fuera{transform:translateY(-101%);opacity:.4}
.splash-foto{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  animation:splash-zoom 6s ease-out both;
}
.splash-velo{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 50% 45%,rgba(44,35,28,.35) 0%,rgba(44,35,28,.82) 70%),
    linear-gradient(180deg,rgba(126,65,40,.45),rgba(44,35,28,.75));
}
.splash-in{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:1.4rem;
  padding:1.5rem;text-align:center;
}
.splash-logo{
  width:clamp(160px,30vw,230px);height:auto;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.5));
  animation:splash-logo 1.3s cubic-bezier(.2,.8,.25,1) both;
}
.splash-lema{
  font-family:"Outfit",sans-serif;font-weight:500;
  font-size:clamp(.72rem,2vw,.84rem);
  letter-spacing:.34em;text-transform:uppercase;
  color:rgba(253,248,241,.85);
  animation:splash-lema 1.2s ease .55s both;
}
/* barra de carga finita abajo */
.splash-barra{
  position:absolute;left:50%;bottom:12%;transform:translateX(-50%);
  width:min(160px,40vw);height:2px;border-radius:2px;
  background:rgba(253,248,241,.22);overflow:hidden;z-index:2;
}
.splash-barra i{
  display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--ocre),var(--crema));
}
@keyframes splash-zoom{ from{transform:scale(1.16)} to{transform:scale(1)} }
@keyframes splash-logo{
  from{opacity:0;transform:translateY(26px) scale(.94)}
  to{opacity:1;transform:none}
}
@keyframes splash-lema{
  from{opacity:0;letter-spacing:.18em}
  to{opacity:1;letter-spacing:.34em}
}
@media (prefers-reduced-motion:reduce){
  .splash-foto,.splash-logo,.splash-lema{animation:none}
  .splash{transition:opacity .4s ease}
  .splash.fuera{transform:none;opacity:0;visibility:hidden}
}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem clamp(1rem,4vw,2.6rem);
  background:rgba(253,248,241,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s;
}
.nav.scrolled{border-bottom-color:var(--linea);box-shadow:0 6px 24px -20px rgba(70,40,24,.7)}
.nav-brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.nav-mark{
  width:38px;height:38px;border-radius:12px;flex:none;
  background:linear-gradient(140deg,var(--barro),var(--ocre));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:"Fraunces",serif;font-weight:700;font-size:1.05rem;
  overflow:hidden;
}
/* con logo de verdad no queremos el cuadro de color ni recortarlo:
   la placa se ve entera sobre el fondo del sitio */
.nav-mark:has(img){background:none;border-radius:0;width:42px;height:42px}
.nav-mark img{width:100%;height:100%;object-fit:contain}
.nav-name{font-family:"Fraunces",serif;font-size:1.15rem;font-weight:600;color:var(--carbon)}
.nav-links{display:flex;gap:1.6rem}
.nav-links a{
  color:var(--tinta);text-decoration:none;font-size:.94rem;font-weight:500;
  position:relative;padding:.2rem 0;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:0;height:1.5px;
  background:var(--barro);transition:width .25s;
}
.nav-links a:hover::after{width:100%}
.nav-right{display:flex;align-items:center;gap:.6rem}
.nav-burger{display:none;background:none;border:none;color:var(--carbon);cursor:pointer;padding:.3rem}

/* ---------- hero ---------- */
.hero{
  max-width:var(--max);margin:0 auto;
  padding:clamp(2.5rem,6vw,5rem) clamp(1rem,4vw,2.6rem) clamp(2rem,4vw,3rem);
  display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,5vw,4rem);align-items:center;
}
.hero-text h1{margin-bottom:1.1rem}
.hero-sub{font-size:1.06rem;max-width:44ch;color:var(--tinta);opacity:.9}
.hero-dots{display:flex;gap:.55rem;margin-top:2rem;flex-wrap:wrap}
.hero-dot{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.82rem;font-weight:600;color:var(--c);text-decoration:none;
  background:var(--c-12);border-radius:999px;padding:.4rem .9rem;
  transition:background .2s;
}
.hero-dot:hover{background:var(--c-30)}
.hero-dot i{width:9px;height:9px;border-radius:50%;display:block;background:var(--c)}
.hero-art{position:relative}
.hero-frame{
  border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3.2;
  box-shadow:var(--sombra);position:relative;background:var(--arena);
}
.hero-frame img{width:100%;height:100%;object-fit:cover}
.hero-frame::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);pointer-events:none;
}
.hero-tag{
  position:absolute;left:-18px;bottom:-18px;
  background:var(--carbon);color:var(--crema);
  border-radius:16px;padding:.85rem 1.3rem;box-shadow:var(--sombra);
  display:flex;flex-direction:column;line-height:1.2;
}
.hero-tag-n{font-family:"Fraunces",serif;font-size:1.5rem;color:#fff}
.hero-tag span:last-child{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7}

/* ---------- barra de disponibilidad ---------- */
.dispo-wrap{max-width:var(--max);margin:0 auto;padding:1.5rem clamp(1rem,4vw,2.6rem) 0}
.dispo{
  background:#fff;border-radius:var(--r);box-shadow:var(--sombra);
  padding:1.1rem;display:grid;grid-template-columns:1fr 1fr .7fr auto;gap:.9rem;align-items:end;
  border:1px solid var(--linea);
}
.dispo-f{display:flex;flex-direction:column;gap:.3rem}
.dispo-f label,.fld label{
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--barro);
}
.dispo input,.dispo select,.fld input,.fld select,.fld textarea{
  font-family:inherit;font-size:.98rem;color:var(--carbon);
  border:1.5px solid var(--linea);border-radius:12px;padding:.7rem .85rem;
  background:var(--crema);width:100%;
}
.dispo input:focus,.dispo select:focus,.fld input:focus,.fld textarea:focus,.fld select:focus{
  outline:none;border-color:var(--barro);background:#fff;
}
.dispo-hint{font-size:.85rem;color:var(--arcilla);opacity:.8;margin-top:.7rem;text-align:center}

/* ---------- secciones ---------- */
.section{max-width:var(--max);margin:0 auto;padding:clamp(3.5rem,8vw,6rem) clamp(1rem,4vw,2.6rem)}
.sec-head{max-width:60ch;margin-bottom:2.6rem}
.sec-sub{font-size:1rem;opacity:.85;margin-top:.7rem}

/* ---------- bandas de habitaciones ----------
   Cada banda hereda el color de su cuarto por la variable --c (la pone el JS
   con el color que tenga en el panel). De ahí lo toman el título, el precio,
   las amenidades, el botón y el fondo: eso es lo que hace que el cuarto azul
   se vea azul y el rojo, rojo. */
.bandas{display:flex;flex-direction:column;gap:clamp(2rem,4vw,3.4rem)}
.banda{
  display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;
  position:relative;
  background:var(--c-06);
  border:1px solid var(--c-12);
  border-radius:var(--r-lg);
  padding:clamp(1.2rem,3vw,2rem);
}
.banda::before{                       /* filo de color en el canto */
  content:"";position:absolute;left:0;top:22px;bottom:22px;width:5px;
  border-radius:0 5px 5px 0;background:var(--c);
}
.banda:nth-child(even)::before{left:auto;right:0;border-radius:5px 0 0 5px}
.banda:nth-child(even) .banda-art{order:2}
.banda-art{position:relative}
.banda-foto{
  border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;
  box-shadow:var(--sombra);background:var(--arena);
  outline:3px solid var(--c-30);outline-offset:-3px;
}
.banda-foto img{width:100%;height:100%;object-fit:cover}
.banda-info .banda-nom{display:flex;align-items:center;gap:.7rem;margin-bottom:.5rem}
.banda-punto{width:14px;height:14px;border-radius:50%;flex:none;background:var(--c)}
.banda-info h3{color:var(--c);font-size:1.5rem}
.banda-precio{
  font-family:"Fraunces",serif;font-size:1.7rem;color:var(--c);
  margin:.9rem 0 .2rem;
}
.banda-precio small{font-family:"Outfit",sans-serif;font-size:.82rem;font-weight:500;opacity:.6;letter-spacing:.04em;color:var(--tinta)}
.banda-alta{font-size:.82rem;opacity:.7;margin-bottom:1rem}
.banda-rating{font-size:.86rem;font-weight:700;color:var(--c);margin-bottom:.6rem}
.banda-rating span{font-weight:500;opacity:.7;color:var(--tinta)}
.banda-airbnb{margin-top:.9rem;font-size:.86rem}
.banda-airbnb a{color:var(--c);text-decoration:none;font-weight:600}
.banda-airbnb a:hover{text-decoration:underline}
.banda-btns .btn svg{width:18px;height:18px}
.banda-meta{display:flex;flex-wrap:wrap;gap:1.1rem;margin:1rem 0 1.2rem;padding:.9rem 0;border-top:1px solid var(--c-12);border-bottom:1px solid var(--c-12)}
.banda-meta span{display:flex;align-items:center;gap:.45rem;font-size:.88rem;font-weight:500}
.banda-meta svg{width:19px;height:19px;color:var(--c)}
.amen{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.4rem}
.amen li{
  list-style:none;font-size:.82rem;padding:.32rem .8rem;border-radius:999px;
  background:var(--c-12);color:var(--c);font-weight:600;
}
.banda-btns{display:flex;gap:.7rem;flex-wrap:wrap}
/* el botón de cada cuarto va en su color, no en el terracota del sitio */
.banda-info .btn-sol{background:var(--c)}
.banda-info .btn-sol:hover{background:var(--c);filter:brightness(.88)}
.banda-info .btn-ghost{border-color:var(--c-30);color:var(--c)}
.banda-info .btn-ghost:hover{border-color:var(--c);color:var(--c)}
.detalle{background:var(--c-06)}
.detalle .banda-meta{margin-top:0}

/* ---------- servicios ---------- */
.servicios{background:var(--arena);padding:clamp(3rem,6vw,4.5rem) 0}
.serv-grid{
  max-width:var(--max);margin:0 auto;padding:0 clamp(1rem,4vw,2.6rem);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.6rem 2rem;
}
.serv{display:flex;gap:.9rem;align-items:flex-start}
.serv-ico{
  width:44px;height:44px;border-radius:13px;flex:none;
  background:#fff;color:var(--barro);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--sombra-sm);
}
.serv h3{font-size:1.02rem;margin-bottom:.2rem}
.serv p{font-size:.88rem;opacity:.8;line-height:1.5}

/* ---------- la casa ---------- */
.casa-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.casa-frame{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/3.6;box-shadow:var(--sombra);background:var(--arena)}
.casa-frame img{width:100%;height:100%;object-fit:cover}
.casa-text p{margin-bottom:1rem;opacity:.9}
.datos{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1.8rem;padding-top:1.6rem;border-top:1px solid var(--linea)}
.dato-n{font-family:"Fraunces",serif;font-size:1.7rem;color:var(--barro);line-height:1}
.dato-l{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin-top:.3rem}

/* ---------- experiencias ---------- */
.exps{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.6rem}
.exp{
  background:#fff;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--linea);box-shadow:var(--sombra-sm);
  display:flex;flex-direction:column;transition:transform .22s,box-shadow .22s;
}
.exp:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.exp-foto{aspect-ratio:16/10;background:var(--arena)}
.exp-foto img{width:100%;height:100%;object-fit:cover}
.exp-body{padding:1.3rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.exp-dur{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--palma);font-weight:600}
.exp p{font-size:.9rem;opacity:.85;flex:1}
.exp-pie{display:flex;align-items:baseline;justify-content:space-between;padding-top:.6rem;border-top:1px solid var(--linea)}
.exp-precio{font-family:"Fraunces",serif;font-size:1.25rem;color:var(--carbon)}
.exp-pie small{font-size:.76rem;opacity:.65}

/* ---------- galería ---------- */
.mosaico{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;gap:.9rem}
.mos{border-radius:var(--r);overflow:hidden;background:var(--arena);cursor:pointer;position:relative}
.mos img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.mos:hover img{transform:scale(1.05)}
.mos:nth-child(1){grid-column:span 2;grid-row:span 2}
.mos:nth-child(6){grid-column:span 2;grid-row:span 2}

/* ---------- reseñas ---------- */
.resenas{background:var(--carbon);color:var(--arena);padding:clamp(3rem,6vw,4.5rem) 0}
.res-grid{
  max-width:var(--max);margin:0 auto;padding:0 clamp(1rem,4vw,2.6rem);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;
}
.res p{font-size:.98rem;opacity:.9;font-style:italic;margin-bottom:1rem;line-height:1.7}
.res p::before{content:"“";font-family:"Fraunces",serif;font-size:2.4rem;color:var(--ocre);display:block;line-height:.6;margin-bottom:.6rem}
.res-nom{font-weight:600;color:#fff;font-size:.92rem}
.res-org{font-size:.8rem;opacity:.6}

/* ---------- contacto ---------- */
.cont-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem)}
.cont-lista{list-style:none;margin:1.8rem 0}
.cont-lista li{display:flex;gap:.9rem;align-items:flex-start;margin-bottom:1rem}
.cont-lista svg{color:var(--barro);flex:none;margin-top:.15rem}
.cont-lista strong{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;opacity:.6;font-weight:600}
.cont-lista a{color:var(--tinta);text-decoration:none}
.cont-lista a:hover{color:var(--barro)}
.cont-form{display:flex;flex-direction:column;gap:.9rem;margin-top:1.5rem}
.fld{display:flex;flex-direction:column;gap:.3rem}
.form-ok{color:var(--palma);font-size:.9rem;font-weight:600}
.llegar{display:flex;flex-direction:column;gap:1rem;margin:1.8rem 0}
.lleg{background:var(--arena);border-radius:var(--r);padding:1.1rem 1.3rem}
.lleg h3{font-size:1rem;margin-bottom:.3rem}
.lleg p{font-size:.88rem;opacity:.85}
.mapa-ph{
  border-radius:var(--r);border:1.5px dashed rgba(126,65,40,.3);
  background:repeating-linear-gradient(45deg,rgba(180,98,60,.055) 0 12px,transparent 12px 24px),var(--arena);
  min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.6rem;color:var(--arcilla);font-size:.85rem;text-align:center;padding:1.2rem;
}

/* ---------- footer ---------- */
.foot{background:var(--arcilla);color:var(--arena);padding:clamp(2.5rem,5vw,4rem) 0 0}
.foot-grid{
  max-width:var(--max);margin:0 auto;padding:0 clamp(1rem,4vw,2.6rem) 2.5rem;
  display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2rem;
}
.foot-name{font-family:"Fraunces",serif;font-size:1.5rem;color:#fff}
.foot-lema{opacity:.75;font-size:.92rem;margin-top:.3rem}
.foot-h{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ocre);font-weight:600;margin-bottom:.7rem}
.foot-grid p,.foot-grid a{font-size:.9rem;opacity:.85;color:inherit}
.foot-grid a{text-decoration:none;display:block;margin-bottom:.3rem}
.foot-grid a:hover{opacity:1;text-decoration:underline}
.foot-bar{
  border-top:1px solid rgba(255,255,255,.14);
  padding:1.1rem clamp(1rem,4vw,2.6rem);
  max-width:var(--max);margin:0 auto;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.82rem;opacity:.7;
}
.foot-bar a{color:var(--ocre);text-decoration:none}

/* ---------- modales ---------- */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:1rem}
.modal[hidden]{display:none}
.modal-veil{position:absolute;inset:0;background:rgba(44,35,28,.62);backdrop-filter:blur(4px)}
.modal-box{
  position:relative;background:var(--crema);border-radius:var(--r-lg);
  width:min(640px,100%);max-height:92vh;overflow:auto;box-shadow:var(--sombra);
}
.modal-x{
  position:absolute;top:14px;right:14px;z-index:3;
  background:rgba(255,255,255,.9);border:1px solid var(--linea);border-radius:50%;
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--carbon);
}
.bk-head{padding:1.6rem 1.8rem 1rem;border-bottom:1px solid var(--linea)}
.bk-steps{display:flex;gap:.4rem;list-style:none;margin-top:1rem;counter-reset:s}
.bk-steps li{
  flex:1;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  font-weight:600;color:var(--arcilla);opacity:.4;
  padding-top:.6rem;border-top:3px solid var(--linea);
}
.bk-steps li.on{opacity:1;border-top-color:var(--barro);color:var(--barro)}
.bk-body{padding:1.6rem 1.8rem 1.8rem}
.bk-fechas{display:grid;grid-template-columns:1fr 1fr .7fr;gap:.9rem}
.bk-form{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.bk-form .fld:nth-child(4){grid-column:1/-1}
.bk-note{font-size:.86rem;opacity:.8;margin-top:1rem}
.bk-actions{display:flex;gap:.7rem;justify-content:flex-end;margin-top:1.6rem;flex-wrap:wrap}
.bk-opciones{display:flex;flex-direction:column;gap:.8rem}
.opt{
  display:flex;gap:1rem;align-items:center;text-align:left;width:100%;
  background:#fff;border:1.5px solid var(--linea);border-radius:var(--r);
  padding:1rem;cursor:pointer;font-family:inherit;transition:border-color .2s,box-shadow .2s;
}
.opt:hover:not(.no){border-color:var(--c)}
.opt.sel{border-color:var(--c);background:var(--c-06);box-shadow:0 0 0 3px var(--c-12)}
.opt.sel .opt-nom{color:var(--c)}
.opt.no{opacity:.5;cursor:not-allowed;background:var(--arena)}
.opt-color{width:44px;height:44px;border-radius:13px;flex:none;background:var(--c)}
.opt-body{flex:1}
.opt-nom{font-family:"Fraunces",serif;font-size:1.1rem;color:var(--carbon)}
.opt-meta{font-size:.82rem;opacity:.75}
.opt-precio{text-align:right}
.opt-precio b{font-family:"Fraunces",serif;font-size:1.2rem;color:var(--carbon);display:block}
.opt-precio small{font-size:.74rem;opacity:.65}
.bk-resumen{background:var(--arena);border-radius:var(--r);padding:1.1rem;margin-top:1.2rem;font-size:.9rem}
.bk-resumen .fila{display:flex;justify-content:space-between;padding:.28rem 0}
.bk-resumen .fila.tot{border-top:1px solid var(--linea);margin-top:.5rem;padding-top:.6rem;font-weight:700;font-size:1.05rem}
.bk-resumen .fila.tot span:last-child{font-family:"Fraunces",serif;color:var(--barro)}
.bk-terms{display:flex;gap:.6rem;align-items:flex-start;margin-top:1rem;font-size:.85rem;opacity:.9}
.bk-terms input{margin-top:.25rem;accent-color:var(--barro)}
.bk-err{color:#B03A2E;font-size:.88rem;margin-top:.8rem;font-weight:600}
.bk-done{text-align:center}
.bk-tick{
  width:64px;height:64px;border-radius:50%;background:var(--palma);color:#fff;
  display:flex;align-items:center;justify-content:center;margin:0 auto 1.2rem;
}
.bk-tick svg{width:32px;height:32px;stroke-width:2.4}
.bk-code{
  font-family:ui-monospace,"Courier New",monospace;font-size:1.6rem;letter-spacing:.15em;
  color:var(--barro);font-weight:700;margin:.8rem 0;
}
.bk-recap{background:var(--arena);border-radius:var(--r);padding:1.1rem;text-align:left;font-size:.9rem}
.bk-done .bk-actions{justify-content:center}

.lb-box{position:relative;width:min(900px,100%);max-height:90vh}
.lb-slot{border-radius:var(--r-lg);overflow:hidden;background:var(--crema);min-height:320px}
.lb-slot img{width:100%;height:auto;max-height:86vh;object-fit:contain}

/* ---------- barra móvil ---------- */
.mobile-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(253,248,241,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--linea);
  padding:.7rem clamp(1rem,4vw,2rem);
  align-items:center;justify-content:space-between;gap:1rem;
}
.mb-n{font-family:"Fraunces",serif;font-size:1.2rem;color:var(--carbon);display:block;line-height:1}
.mb-l{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;opacity:.6}

/* ---------- aparecer al hacer scroll ---------- */
.rev{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.rev.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:940px){
  .hero{grid-template-columns:1fr;gap:2.5rem}
  .hero-tag{left:auto;right:16px;bottom:-16px}
  .dispo{grid-template-columns:1fr 1fr;}
  .dispo .btn{grid-column:1/-1}
  .banda,.casa-grid,.cont-grid{grid-template-columns:1fr}
  .banda:nth-child(even) .banda-art{order:0}
  .foot-grid{grid-template-columns:1fr 1fr}
  .mosaico{grid-template-columns:repeat(2,1fr);grid-auto-rows:130px}
  .mos:nth-child(6){grid-column:span 1;grid-row:span 1}
}

@media (max-width:720px){
  html{scroll-padding-top:70px}
  .nav-links{
    position:fixed;top:66px;left:0;right:0;
    flex-direction:column;gap:0;
    background:var(--crema);border-bottom:1px solid var(--linea);
    padding:0 clamp(1rem,4vw,2rem);
    max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;
  }
  .nav-links.open{max-height:70vh;padding:.6rem clamp(1rem,4vw,2rem) 1.2rem}
  .nav-links a{padding:.75rem 0;border-bottom:1px solid var(--linea)}
  .nav-links a:last-child{border-bottom:none}
  .nav-burger{display:block}
  .nav-right .btn-sol{display:none}
  .mobile-bar{display:flex}
  body{padding-bottom:70px}
  .datos{grid-template-columns:repeat(2,1fr);gap:1.4rem}
  .bk-fechas,.bk-form{grid-template-columns:1fr}
  .bk-body,.bk-head{padding-left:1.2rem;padding-right:1.2rem}
  .bk-steps li{font-size:.62rem;letter-spacing:.02em}
  .foot-grid{grid-template-columns:1fr}
  .opt{flex-wrap:wrap}
  .opt-precio{text-align:left;width:100%;border-top:1px solid var(--linea);padding-top:.6rem}
  .opt-precio b{display:inline}
  .banda-btns .btn{flex:1}
}