/* ═══════════════════════════════════════════════════════════════════════
   NH MAISON · sitio-web/experiencia-xv.css  (Fase 90)
   Página «NH MAISON Experiencia XV». Se apoya en cuenta.css (colores,
   tarjetas, botones, formularios) y en paginas.css (barra y submenú).
   ═══════════════════════════════════════════════════════════════════════ */
:root{ --plum:#702F4F; --plum-deep:#5A2440; --blush:#F3E6EC; --ok-soft:#E6F0E7; }

.xv main{padding-top:clamp(14px,3vw,30px)}
.xv .shell{--maxw:1180px}
.xv h2.sec{font-family:var(--font-display);font-weight:400;font-size:clamp(1.7rem,4.4vw,2.6rem);color:var(--plum);line-height:1.08;margin:.3rem 0 .5rem}
.xv .sec-lede{color:var(--taupe);font-size:.92rem;max-width:60ch}
.xv section{scroll-margin-top:140px}
.xv .bloque{margin-top:clamp(28px,6vw,64px)}

/* ── Portada ─────────────────────────────────────────────────────────── */
.xv-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(18px,4vw,48px);align-items:center}
.xv-hero h1{font-family:var(--font-display);font-weight:300;font-size:clamp(2.4rem,7vw,4.6rem);line-height:.98;color:var(--plum);margin:.5rem 0 .9rem}
.xv-hero h1 em{font-style:italic;color:var(--gold-deep)}
.xv-hero .lede{font-size:clamp(.92rem,1.6vw,1.02rem);color:var(--taupe);max-width:46ch;line-height:1.7}
.xv-datos{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.1rem 0 1.3rem}
.xv-dato{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .85rem;border-radius:99px;font-size:.72rem;letter-spacing:.06em;
  background:rgba(255,255,255,.66);border:1px solid rgba(192,161,108,.32);color:var(--espresso)}
.xv-dato svg{width:15px;height:15px;stroke:var(--gold-deep);fill:none;stroke-width:1.5;flex:none}
.xv-cta{display:flex;flex-wrap:wrap;gap:.6rem}
.clay--plum{background:linear-gradient(145deg,#8A3D63,#5A2440);color:#fff;border-color:rgba(255,255,255,.3)}
.clay--plum:hover{color:#fff}

.xv-fotos{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:.7rem;align-items:end}
.xv-fotos img{width:100%;height:auto;border-radius:var(--r-xl);object-fit:cover;aspect-ratio:3/4;box-shadow:0 30px 60px -30px rgba(59,46,37,.5);display:block}
.xv-fotos img:nth-child(1){margin-bottom:12%}

/* Contador de cupo */
.cupo{margin-top:1.2rem;padding:1rem 1.1rem;border-radius:var(--r-lg);background:rgba(255,255,255,.72);border:1px solid rgba(192,161,108,.3);
  box-shadow:var(--glass-shadow);max-width:430px}
.cupo__top{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap}
.cupo__n{font-family:var(--font-display);font-size:2.6rem;line-height:.9;color:var(--plum)}
.cupo__txt{font-size:.82rem;color:var(--espresso)}
.cupo__vivo{margin-left:auto;display:inline-flex;align-items:center;gap:.35rem;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ok)}
.cupo__vivo i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(78,122,85,.5);animation:latido 2s infinite}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(78,122,85,.45)}70%{box-shadow:0 0 0 7px rgba(78,122,85,0)}100%{box-shadow:0 0 0 0 rgba(78,122,85,0)}}
.cupo__puntos{display:grid;grid-template-columns:repeat(12,1fr);gap:5px;margin-top:.75rem}
.cupo__puntos span{height:8px;border-radius:99px;background:rgba(192,161,108,.22)}
.cupo__puntos span.t{background:linear-gradient(90deg,#8A3D63,#5A2440)}
.cupo__nota{font-size:.7rem;color:var(--mist);margin-top:.55rem}
.cupo--lleno .cupo__n{color:var(--alert)}

/* ── Cómo es tu cita ─────────────────────────────────────────────────── */
.pilares{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin-top:1rem}
.pilar{padding:1.1rem 1rem;border-radius:var(--r-lg);background:rgba(255,255,255,.6);border:1px solid rgba(192,161,108,.2)}
.pilar b{display:block;font-family:var(--font-display);font-weight:400;font-size:1.9rem;line-height:1;color:var(--gold-deep)}
.pilar h3{font-family:var(--font-display);font-weight:500;font-size:1.08rem;color:var(--espresso);margin:.35rem 0 .25rem}
.pilar p{font-size:.78rem;color:var(--taupe);line-height:1.55}

/* ── Vestidos ────────────────────────────────────────────────────────── */
.vestidos{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:clamp(12px,2vw,20px);margin-top:1.2rem}
.vcard{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;background:rgba(255,255,255,.75);
  border:1px solid rgba(192,161,108,.22);box-shadow:var(--glass-shadow);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.vcard:hover{transform:translateY(-6px);box-shadow:0 30px 50px -28px rgba(59,46,37,.5)}
.vcard__foto{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:var(--sand);border:0;padding:0;cursor:pointer;width:100%}
.vcard__foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.vcard:hover .vcard__foto img{transform:scale(1.045)}
.vcard__tag{position:absolute;top:.7rem;left:.7rem;font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;padding:.38rem .65rem;border-radius:99px;
  background:rgba(90,36,64,.88);color:#fff}
.vcard__body{padding:.9rem 1rem 1rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.vcard__body h3{font-family:var(--font-display);font-weight:500;font-size:1.3rem;color:var(--plum);line-height:1.1}
.vcard__color{font-size:.7rem;color:var(--mist);letter-spacing:.04em}
.precio{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin-top:.15rem}
.precio b{font-family:var(--font-display);font-weight:500;font-size:1.35rem;color:var(--espresso)}
.precio s{font-size:.8rem;color:var(--mist)}
.precio .consultar{font-size:.76rem;color:var(--gold-deep);letter-spacing:.02em}
.vcard__acc{display:flex;gap:.45rem;margin-top:auto;padding-top:.6rem}
.vcard__acc .clay{flex:1;padding:.72rem .5rem;font-size:.56rem;letter-spacing:.12em;white-space:nowrap}

/* Ficha (modal) */
.ficha{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:1vw;pointer-events:none}
.ficha__velo{position:absolute;inset:0;background:rgba(45,35,28,.5);opacity:0;transition:opacity .35s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ficha__caja{position:relative;width:min(1080px,100%);max-height:94vh;overflow:auto;border-radius:var(--r-xl);background:var(--porcelain);
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);opacity:0;transform:translateY(16px) scale(.98);transition:opacity .35s,transform .45s var(--ease)}
.ficha.is-open{pointer-events:auto}
.ficha.is-open .ficha__velo{opacity:1}
.ficha.is-open .ficha__caja{opacity:1;transform:none}
.ficha__galeria{background:var(--sand);display:grid;grid-template-rows:1fr auto}
.ficha__galeria .principal{width:100%;height:auto;max-height:82vh;object-fit:cover;display:block;aspect-ratio:3/4}
.ficha__tiras{display:flex;gap:.4rem;padding:.5rem;background:rgba(255,255,255,.5)}
.ficha__tiras button{width:56px;height:72px;border-radius:10px;overflow:hidden;border:2px solid transparent;padding:0;cursor:pointer;background:none}
.ficha__tiras button.is-on{border-color:var(--plum)}
.ficha__tiras img{width:100%;height:100%;object-fit:cover;display:block}
.ficha__info{padding:clamp(18px,3vw,34px);display:flex;flex-direction:column;gap:.7rem}
.ficha__info h3{font-family:var(--font-display);font-weight:400;font-size:clamp(1.8rem,4vw,2.4rem);color:var(--plum);line-height:1.05}
.ficha__info p{font-size:.9rem;line-height:1.7;color:var(--taupe)}
.ficha__info ul{list-style:none;padding:0;display:grid;gap:.35rem}
.ficha__info li{font-size:.82rem;color:var(--espresso);padding-left:1.1rem;position:relative}
.ficha__info li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.ficha__cerrar{position:absolute;top:.7rem;right:.7rem;z-index:2;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.92);box-shadow:0 4px 14px rgba(0,0,0,.15);font-size:1.3rem;line-height:1;color:var(--espresso)}
.ficha__acc{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto}
.ficha__acc .clay{flex:1 1 180px}
.nota-foto{font-size:.68rem!important;color:var(--mist)!important}

/* ── Reservar ────────────────────────────────────────────────────────── */
.reserva{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(14px,2.5vw,26px);margin-top:1.2rem;align-items:start}
.paso{display:flex;align-items:center;gap:.6rem;margin:1.2rem 0 .7rem}
.paso:first-child{margin-top:0}
.paso span{width:1.8rem;height:1.8rem;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-size:1rem;color:#fff;
  background:linear-gradient(145deg,#8A3D63,#5A2440);flex:none}
.paso h3{font-family:var(--font-display);font-weight:500;font-size:1.25rem;color:var(--espresso)}
.dias{display:flex;gap:.5rem;flex-wrap:wrap}
.dia{flex:1 1 150px;text-align:left;padding:.8rem 1rem;border-radius:var(--r-md);cursor:pointer;font:inherit;color:var(--espresso);
  background:rgba(255,255,255,.7);border:1.5px solid rgba(192,161,108,.3);transition:border-color .25s,background .25s}
.dia b{display:block;font-family:var(--font-display);font-weight:500;font-size:1.2rem}
.dia b::first-letter{text-transform:uppercase}
.dia small{font-size:.68rem;color:var(--mist)}
.dia.is-on{border-color:var(--plum);background:var(--blush)}
.horarios{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.5rem}
.hora{padding:.75rem .6rem;border-radius:var(--r-md);cursor:pointer;font:inherit;text-align:center;color:var(--espresso);
  background:rgba(255,255,255,.75);border:1.5px solid rgba(192,161,108,.3);transition:all .25s}
.hora b{display:block;font-size:.95rem;font-weight:500}
.hora small{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ok)}
.hora:hover:not(:disabled){border-color:var(--plum)}
.hora.is-on{border-color:var(--plum);background:linear-gradient(145deg,#8A3D63,#5A2440);color:#fff}
.hora.is-on small{color:#F3D9E6}
.hora:disabled{cursor:not-allowed;opacity:.55;background:repeating-linear-gradient(135deg,rgba(234,221,203,.5) 0 6px,rgba(255,255,255,.4) 6px 12px)}
.hora:disabled small{color:var(--mist)}
.hora.recien{animation:recien 1.2s}
@keyframes recien{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 4px rgba(164,86,75,.35)}}
.resumen{position:sticky;top:110px}
.resumen h3{font-family:var(--font-display);font-weight:400;font-size:1.4rem;color:var(--plum);margin-bottom:.6rem}
.resumen dl{display:grid;grid-template-columns:auto 1fr;gap:.45rem .9rem;font-size:.84rem}
.resumen dt{font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);padding-top:.2rem}
.resumen dd{margin:0;color:var(--espresso)}
.resumen .vacio{color:var(--mist)}
.check{display:flex;gap:.6rem;align-items:flex-start;font-size:.78rem;color:var(--taupe);margin-top:1rem;line-height:1.5}
.check input{margin-top:.2rem;width:18px;height:18px;accent-color:var(--plum);flex:none}
.check a{color:var(--gold-deep)}
.err{color:var(--alert);font-size:.8rem;margin-top:.7rem}
.aviso{padding:.8rem 1rem;border-radius:var(--r-md);font-size:.82rem;line-height:1.55;margin-top:.8rem}
.aviso--info{background:rgba(192,161,108,.12);color:var(--espresso)}
.aviso--alerta{background:rgba(164,86,75,.1);color:var(--alert)}
.aviso--ok{background:var(--ok-soft);color:#2F5A36}

/* Confirmación */
.confirmacion{text-align:center;padding:clamp(22px,4vw,44px)}
.confirmacion .sello{width:64px;height:64px;margin:0 auto .8rem;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(145deg,#8A3D63,#5A2440);color:#fff;font-size:1.8rem}
.confirmacion h3{font-family:var(--font-display);font-weight:400;font-size:clamp(1.7rem,4vw,2.3rem);color:var(--plum)}
.folio{display:inline-block;margin:.9rem 0 .4rem;padding:.7rem 1.3rem;border-radius:var(--r-md);border:1.5px dashed var(--gold);
  font-family:var(--font-display);font-size:clamp(1.8rem,6vw,2.6rem);letter-spacing:.14em;color:var(--espresso);background:#fff}
.confirmacion .det{color:var(--taupe);font-size:.92rem;line-height:1.7}
.confirmacion .acciones{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;margin-top:1.2rem}

/* Mi reservación */
.mi{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(14px,2.5vw,26px);margin-top:1.2rem;align-items:start}
.estado{display:inline-block;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;padding:.35rem .7rem;border-radius:99px}
.estado--confirmada{background:var(--ok-soft);color:#2F5A36}
.estado--cancelada{background:rgba(164,86,75,.12);color:var(--alert)}
.estado--asistio{background:rgba(192,161,108,.18);color:var(--gold-deep)}
.estado--no_asistio{background:rgba(116,107,95,.15);color:var(--mist)}
.mi-card h3{font-family:var(--font-display);font-weight:400;font-size:1.6rem;color:var(--plum);margin:.4rem 0}
.mi-card .acciones{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.confirma-cancel{margin-top:.9rem;padding:.9rem 1rem;border-radius:var(--r-md);background:rgba(164,86,75,.08);border:1px solid rgba(164,86,75,.25)}
.clay--rojo{background:linear-gradient(145deg,#B76A5E,#8E4237);color:#fff}

.faq details{border-bottom:1px solid rgba(192,161,108,.25);padding:.85rem 0}
.faq summary{cursor:pointer;font-family:var(--font-display);font-size:1.15rem;color:var(--espresso);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::after{content:"+";color:var(--gold-deep);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{font-size:.86rem;color:var(--taupe);line-height:1.7;margin-top:.5rem}

.barra-movil{display:none}
.toast-xv{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translate(-50%,30px);opacity:0;z-index:90;
  padding:.8rem 1.2rem;border-radius:99px;background:var(--espresso);color:#fff;font-size:.82rem;transition:all .35s;max-width:92vw;text-align:center;pointer-events:none}
.toast-xv.is-on{opacity:1;transform:translate(-50%,0)}

@media (max-width:900px){
  .xv-hero{grid-template-columns:1fr}
  .xv-fotos{order:-1}
  .pilares{grid-template-columns:1fr 1fr}
  .reserva,.mi{grid-template-columns:1fr}
  .resumen{position:static}
  .ficha{padding:0;align-items:end}
  .ficha__caja{grid-template-columns:1fr;max-height:94vh;border-radius:var(--r-xl) var(--r-xl) 0 0}
  .ficha__galeria .principal{max-height:58vh}
  .barra-movil{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;gap:.6rem;align-items:center;
    padding:.65rem var(--gutter) calc(.65rem + env(safe-area-inset-bottom));background:rgba(251,247,241,.96);
    -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-top:1px solid rgba(192,161,108,.25)}
  .barra-movil .clay{flex:1}
  .barra-movil small{font-size:.7rem;color:var(--espresso);line-height:1.25}
  .barra-movil small b{font-family:var(--font-display);font-size:1.15rem;color:var(--plum)}
  .xv main{padding-bottom:84px}
}
@media (max-width:520px){
  .pilar{padding:.9rem .85rem}
  .pilar b{font-size:1.6rem}
  .vcard__tag{font-size:.5rem;letter-spacing:.12em;max-width:calc(100% - 1.4rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .vestidos{grid-template-columns:1fr 1fr;gap:10px}
  .vcard__body{padding:.7rem .7rem .8rem}
  .vcard__body h3{font-size:1.08rem}
  .vcard__acc{flex-direction:column}
  .horarios{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){ .cupo__vivo i{animation:none} .vcard,.vcard__foto img{transition:none} }

/* ── Fase 91 · Calendario embebido ──────────────────────────────────── */
.calendario{display:grid;gap:.8rem}
.cal{padding:.9rem 1rem 1rem;border-radius:var(--r-lg);background:rgba(255,255,255,.7);border:1px solid rgba(192,161,108,.28)}
.cal__mes{font-family:var(--font-display);font-size:1.25rem;color:var(--plum);text-align:center;margin-bottom:.55rem}
.cal__mes::first-letter{text-transform:uppercase}
.cal__semana,.cal__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
.cal__semana span{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);padding:.2rem 0}
.cal__d{display:grid;place-items:center;align-content:center;min-height:44px;border-radius:12px;font-size:.82rem;color:rgba(110,95,79,.42)}
.cal__d--vacio{visibility:hidden}
button.cal__d{font:inherit;cursor:pointer;border:1.5px solid var(--plum);background:#fff;color:var(--plum);padding:.25rem 0;gap:.05rem;
  box-shadow:0 6px 16px -10px rgba(90,36,64,.6);transition:transform .2s,background .2s}
button.cal__d b{font-family:var(--font-display);font-size:1.2rem;font-weight:500;line-height:1}
button.cal__d small{font-size:.52rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ok)}
button.cal__d:hover{transform:translateY(-1px)}
button.cal__d.is-on{background:linear-gradient(145deg,#8A3D63,#5A2440);color:#fff;border-color:transparent}
button.cal__d.is-on small{color:#F3D9E6}
button.cal__d.cal__d--lleno{border-color:rgba(164,86,75,.4);color:var(--alert)}
button.cal__d.cal__d--lleno small{color:var(--alert)}
.field input[aria-invalid="true"]{border-color:var(--alert)!important;box-shadow:0 0 0 3px rgba(164,86,75,.15)!important}
@media (max-width:520px){ .cal{padding:.7rem .5rem .8rem} .cal__d{min-height:40px;font-size:.74rem} button.cal__d b{font-size:1.05rem} button.cal__d small{font-size:.46rem} }
