/* ============================================================
   Hotel Boost CR — DEMOSTRACIÓN del motor de reservas
   Hereda todo de styles.css (Manrope/Inter, navy/blue/cyan, corte diagonal,
   regla de medición). Lo único propio es el ámbar de «demostración»: un
   color que NO está en la marca, a propósito, pero usado como ACENTO,
   no como cartel de obra — la franja de aviso es parte del producto,
   no una alarma pegada encima.
   Móvil primero.
   ============================================================ */

:root{
  --demo:#F59E0B;
  --demo-ink:#3B2A05;
  --demo-soft:#FFF6E4;
  --ok:#16A34A;
  --no:#DC2626;
}

/* ---------- cinta de demostración: pegada arriba, siempre visible ----------
   Antes era una franja naranja a rayas diagonales (cartel de obra) MÁS un
   segundo cartel idéntico repetido adentro de la caja del motor. Ahora es
   UNA sola franja, oscura como el resto de la marca, con textura de
   «reglilla» (el mismo lenguaje de .ticks que usa el sitio para el Hotel
   Boost Score) y un acento ámbar puntual — se lee como parte del producto,
   no como una advertencia de obra en construcción. */
.demobar{
  position:sticky;top:0;z-index:80;
  background:
    repeating-linear-gradient(90deg,rgba(245,158,11,.16) 0 1px,transparent 1px 12px),
    var(--navy);
  color:rgba(255,255,255,.86);
  border-bottom:1px solid rgba(245,158,11,.55);
}
.demobar__in{
  max-width:var(--maxw);margin:0 auto;padding:8px var(--pad);
  display:flex;align-items:flex-start;gap:10px;
}
.demobar p{font-size:.75rem;line-height:1.4;font-weight:500}
.demobar b{font-weight:800;color:#fff}
.demobar__dot{
  flex:none;width:8px;height:8px;margin-top:5px;border-radius:50%;
  background:var(--demo);box-shadow:0 0 0 3px rgba(245,158,11,.28);
  animation:demopulse 1.8s ease-in-out infinite;
}
@keyframes demopulse{50%{box-shadow:0 0 0 6px rgba(245,158,11,0)}}
@media (prefers-reduced-motion:reduce){.demobar__dot{animation:none}}
@media (max-width:480px){.demobar p{font-size:.688rem}}

/* en esta página la barra que manda es la de demostración */
body.is-demo .nav{position:static}

/* ---------- encabezado ---------- */
.mdhero__kicker{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.mdhero__kicker .bar{width:34px;height:2px;background:var(--demo);flex:none}
.mdhero h1{font-size:clamp(2.1rem,7.4vw,4rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.mdhero__sub{margin-top:20px;max-width:60ch;color:rgba(255,255,255,.82);font-size:1.031rem}
.mdhero__sub b{color:#fff}
.mdhero__facts{display:grid;gap:10px;margin:30px 0 32px}
.mdhero__facts li{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  padding:12px 14px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%);
}
.mdhero__facts b{display:block;font-family:var(--f-display);font-size:1rem}
.mdhero__facts span{font-size:.813rem;color:rgba(255,255,255,.6)}
@media (min-width:760px){.mdhero__facts{grid-template-columns:repeat(3,1fr);gap:14px}}

/* ---------- pasos: stepper con línea de progreso, no chips sueltos ---------- */
.pasos{
  display:flex;align-items:flex-start;margin-bottom:22px;padding:0;
}
.paso{
  position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:.688rem;font-weight:700;letter-spacing:.03em;color:var(--gray);
  text-align:center;padding:0;
}
.paso:not(:first-child)::before{
  content:"";position:absolute;top:13px;left:-50%;width:100%;height:2px;
  background:var(--line);z-index:0;
}
.paso.is-done::before,.paso.is-on::before{background:var(--blue)}
.paso__n{
  position:relative;z-index:1;flex:none;
  width:26px;height:26px;display:grid;place-content:center;
  background:#fff;color:var(--gray);border:2px solid var(--line);border-radius:50%;
  font-size:.75rem;font-weight:800;
  transition:background-color .18s ease-out,border-color .18s ease-out,color .18s ease-out;
}
.paso.is-on{color:var(--ink)}
.paso.is-on .paso__n{background:var(--blue);border-color:var(--blue);color:#fff}
.paso.is-done{color:var(--ok)}
.paso.is-done .paso__n{background:var(--ok);border-color:var(--ok);color:#fff}
@media (max-width:420px){.paso{font-size:.625rem}}

/* ---------- caja del motor ---------- */
.motor{
  position:relative;background:#fff;border:1px solid var(--line);
  box-shadow:0 18px 44px -30px rgba(11,29,58,.45);
  padding:0 0 clamp(20px,4vw,30px);
  overflow:hidden;
}
.pane{display:none;padding:clamp(24px,4vw,34px) clamp(18px,4vw,34px) 0}
.pane.is-on{display:block}
#pane1{max-width:none}
#pane3,#pane4,#pane5{max-width:880px}
.motor__h{font-size:clamp(1.25rem,4.4vw,1.75rem);margin-bottom:16px}
.motor__res{color:var(--gray);font-size:.875rem;margin-bottom:18px}
.volver{
  background:none;border:0;padding:0 0 12px;cursor:pointer;
  font-family:var(--f-text);font-size:.813rem;font-weight:600;color:var(--blue);
}

/* ---------- formularios ---------- */
.mform label{display:block;font-size:.75rem;font-weight:600;color:var(--gray);margin-bottom:12px}
.mform input,.mform select{
  display:block;width:100%;margin-top:6px;
  font-family:var(--f-text);font-size:1rem;color:var(--ink);
  padding:13px 12px;border:1px solid var(--line);background:#fff;
  border-radius:0;-webkit-appearance:none;appearance:none;
  transition:border-color .15s ease-out,box-shadow .15s ease-out;
}
.mform select{background-image:linear-gradient(45deg,transparent 50%,var(--gray) 50%),linear-gradient(135deg,var(--gray) 50%,transparent 50%);background-position:calc(100% - 18px) 22px,calc(100% - 13px) 22px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.mform input:hover,.mform select:hover{border-color:#B7C2D0}
.mform input:focus,.mform select:focus{outline:2px solid var(--cyan);outline-offset:1px;border-color:var(--cyan)}

/* icono del selector de fecha nativo, re-teñido al azul de marca en vez del
   gris del sistema operativo — para que no se sienta un control «crudo». */
.mform input[type="date"]{cursor:pointer;color-scheme:light}
.mform input[type="date"]::-webkit-calendar-picker-indicator{
  cursor:pointer;opacity:.6;padding:3px;border-radius:0;
  filter:invert(28%) sepia(84%) saturate(3000%) hue-rotate(212deg) brightness(97%) contrast(101%);
  transition:opacity .15s ease-out;
}
.mform input[type="date"]:hover::-webkit-calendar-picker-indicator,
.mform input[type="date"]:focus::-webkit-calendar-picker-indicator{opacity:1}

.mform__row2,.mform__row3{display:grid;gap:0}
@media (min-width:620px){
  .mform__row2{grid-template-columns:1fr 1fr;gap:16px}
  .mform__row3{grid-template-columns:repeat(3,1fr);gap:16px}
}
.mform__go{width:100%;justify-content:center;margin-top:6px}
@media (min-width:620px){.mform__go{width:auto}}
.mform__hint{margin-top:14px;font-size:.75rem;color:var(--gray);line-height:1.5}

/* buscador como una barra de motor real (Booking/Expedia), no un formulario
   apilado con medio panel vacío al lado en pantallas anchas. */
@media (min-width:960px){
  #pane1 .mform{
    display:grid;grid-template-columns:repeat(5,1fr) auto;gap:14px;
  }
  #pane1 .mform__row2,#pane1 .mform__row3{display:contents}
  #pane1 .mform label{margin-bottom:0}
  #pane1 .mform__go{margin-top:0;align-self:end;white-space:nowrap;height:50px}
  #pane1 .mform__hint{grid-column:1/-1}
}

/* ---------- opciones de cuarto ---------- */
.opts{display:grid;gap:16px}
@media (min-width:860px){.opts{grid-template-columns:1fr 1fr}}
.opt{
  position:relative;border:1px solid var(--line);
  padding:20px 18px 18px;display:flex;flex-direction:column;gap:10px;
  background:#fff;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);
  transition:transform .18s cubic-bezier(.23,1,.32,1),box-shadow .18s cubic-bezier(.23,1,.32,1),border-color .18s ease-out;
}
@media (hover:hover){
  .opt:hover{transform:translateY(-3px);box-shadow:0 18px 36px -24px rgba(11,29,58,.4)}
}
.opt--no{opacity:.62;background:#FAFBFD}
.opt__top{display:flex;align-items:center;gap:12px}
.opt__art{
  flex:none;width:48px;height:48px;display:grid;place-content:center;color:#fff;
  background:linear-gradient(135deg,var(--navy),var(--blue));
  clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);
}
/* el mismo medallón lleva el ícono del cuarto Y el color de la política de
   cancelación — un solo elemento hace las dos cosas, en vez de sumarle a la
   tarjeta una franja de color aparte. */
.opt--flex .opt__art{background:linear-gradient(135deg,var(--navy),var(--ok))}
.opt--nr .opt__art{background:linear-gradient(135deg,var(--navy),var(--demo))}
.opt__art svg{width:22px;height:22px}
.opt__top__txt{flex:1;min-width:0;display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.opt h3{font-size:1.063rem;letter-spacing:-.02em}
.opt__pax{font-size:.688rem;font-weight:700;color:var(--gray);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.opt__plan{font-size:.813rem;color:var(--gray)}
.opt__precio{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:2px}
.opt__total{font-family:var(--f-display);font-weight:800;font-size:1.625rem;letter-spacing:-.03em}
.opt__noche{font-size:.75rem;color:var(--gray)}
.opt__muestra{font-size:.625rem;font-weight:800;letter-spacing:.14em;color:#92700B;background:var(--demo-soft);padding:3px 7px;align-self:flex-start}
.opt__motivo{font-size:.75rem;color:var(--no);font-weight:600}
.opt .btn{margin-top:4px;width:100%;justify-content:center;font-size:.875rem;padding:12px 18px}

/* la opción más barata disponible: el dato ya lo calcula y ordena el motor
   (pintarOpciones ordena por vendible+precio), acá solo se hace visible. */
.opt[data-primera="1"]{
  border-color:var(--blue);padding-top:36px;
  box-shadow:0 18px 36px -26px rgba(29,107,255,.55);
}
.opt[data-primera="1"] .opt__art{background:linear-gradient(135deg,var(--blue),var(--cyan))}
.opt[data-primera="1"]::after{
  content:"Precio más bajo disponible";
  position:absolute;top:0;right:0;
  background:var(--blue);color:#fff;
  font-size:.563rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 10px 5px 14px;
  clip-path:polygon(12px 0,100% 0,100% 100%,0 100%);
}

/* ---------- elegido (paso 3) ---------- */
.elegido{
  background:#F4F7FB;border:1px solid rgba(29,107,255,.22);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
  padding:14px 16px;margin-bottom:18px;font-size:.875rem;line-height:1.6;
}
.elegido b{font-family:var(--f-display);letter-spacing:-.02em}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============================================================
   PAGO — checkout de verdad: resumen + formulario de tarjeta.
   Antes esta pantalla era un cartel ámbar + una tarjeta decorativa +
   dos radios sueltos en el medio; ahora es el mismo vocabulario que
   una pasarela real (Booking/ONVO), con el aviso de demostración
   reducido a una etiqueta de esquina — el mismo dispositivo que ya
   usan .fin::after y .opt[data-primera]::after, no uno nuevo.
   ============================================================ */
.checkout{display:grid;gap:18px;margin-bottom:6px}
@media (min-width:900px){
  .checkout{grid-template-columns:.85fr 1.15fr;align-items:start;gap:26px}
}

/* ---------- resumen de la reserva ---------- */
.ordercard{background:#F4F7FB;border:1px solid rgba(29,107,255,.22);padding:20px 20px 22px}
@media (min-width:900px){.ordercard{position:sticky;top:92px}}
.ordercard__hotel{font-size:1.063rem;margin:6px 0 16px;letter-spacing:-.02em}
.ordercard__hotel span{font-weight:400;font-size:.75rem;color:var(--gray);letter-spacing:0}
.ordercard__rows{display:grid;gap:0;margin-bottom:14px}
.ordercard__row{display:flex;justify-content:space-between;gap:14px;padding:8px 0;
  border-bottom:1px dotted rgba(29,107,255,.22);font-size:.813rem}
.ordercard__row span:first-child{color:var(--gray);flex:none}
.ordercard__row span:last-child{font-weight:600;text-align:right;overflow-wrap:anywhere}
.ordercard__total{display:flex;align-items:baseline;justify-content:space-between;
  padding-top:8px;border-top:1px solid rgba(29,107,255,.3)}
.ordercard__total span{font-size:.688rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gray)}
.ordercard__total b{font-family:var(--f-display);font-size:1.75rem;font-weight:800;
  letter-spacing:-.02em;color:var(--ink)}
.ordercard__muestra{display:inline-block;margin-top:12px;font-size:.625rem;font-weight:800;
  letter-spacing:.14em;color:#92700B;background:var(--demo-soft);padding:3px 7px}

/* ---------- formulario de pago ---------- */
.paycard{position:relative;background:#fff;border:1px solid var(--line);padding:22px 20px 20px;overflow:hidden}
.paycard::after{
  content:"MODO DEMOSTRACIÓN";position:absolute;top:0;right:0;
  font-size:.5rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:var(--demo);color:var(--demo-ink);padding:5px 10px 5px 14px;
  clip-path:polygon(12px 0,100% 0,100% 100%,0 100%);
}
.paycard__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}
.paycard__head .label{margin:0}
.paycard__lock{width:16px;height:16px;color:var(--gray);flex:none}

/* segmentado: reemplaza los dos radios sueltos */
.payresult{border:0;padding:0;margin:0 0 20px}
.payresult__leg{font-size:.688rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gray);padding:0;margin-bottom:8px}
.payresult__opts{display:flex;border:1px solid var(--line);overflow:hidden}
.payresult__opt{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;
  padding:11px 6px;font-size:.813rem;font-weight:700;color:var(--gray);cursor:pointer;
  transition:background-color .15s ease-out,color .15s ease-out;
}
.payresult__opt:first-child{border-right:1px solid var(--line)}
.payresult__opt svg{width:14px;height:14px;flex:none}
.payresult__opt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.payresult__opt.is-on{background:var(--ink);color:#fff}

/* campos de tarjeta, de muestra y no editables (readonly) */
.payform{display:grid;gap:14px;margin-bottom:20px}
.payform__f{display:block;font-size:.75rem;font-weight:600;color:var(--gray)}
.payform__f>span:first-child{display:block;margin-bottom:6px}
.payform__f input{
  display:block;width:100%;font-family:var(--f-text);font-size:.938rem;color:var(--ink-mute);
  padding:12px;border:1px solid var(--line);background:#FAFBFD;border-radius:0;
  cursor:default;-webkit-appearance:none;appearance:none;letter-spacing:.02em;
}
.payform__row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.payform__innum{position:relative;display:block}
.payform__innum input{padding-right:66px}
.payform__brands{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  display:flex;gap:6px;color:var(--gray)}
.payform__brands svg{width:22px;height:15px}

.paybtn{width:100%;justify-content:center;gap:10px}
.paybtn svg{width:18px;height:18px;flex:none}
.paysec{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;
  font-size:.688rem;color:var(--gray)}
.paysec svg{width:13px;height:13px;flex:none}

/* ---------- el cerrojo: se ofrece, no se impone ---------- */
.cerrojo{margin-top:20px;border-top:1px solid var(--line);padding-top:14px}
.cerrojo summary{
  cursor:pointer;font-family:var(--f-display);font-size:.875rem;color:var(--ink-mute);
  list-style:none;display:flex;align-items:center;gap:9px;
}
.cerrojo summary::-webkit-details-marker{display:none}
.cerrojo summary::before{content:"+";flex:none;width:14px;font-weight:800;color:var(--blue)}
.cerrojo[open] summary::before{content:"–"}
.cerrojo ul{display:grid;gap:8px;margin-top:12px}
.cerrojo li{position:relative;padding-left:22px;font-size:.75rem;color:var(--gray);line-height:1.5}
.cerrojo li::before{
  content:"";position:absolute;left:0;top:5px;width:12px;height:12px;
  background:var(--ok);
  clip-path:polygon(0 0,100% 0,100% 70%,70% 100%,0 100%);
}

/* ---------- resultado ----------
   Mismo dispositivo de la cinta «Precio más bajo disponible»: una etiqueta
   de esquina cortada en diagonal, no una barra de color en un lado — es
   el vocabulario que ya usa esta página para marcar un estado, reutilizado
   en vez de inventar un tercer patrón distinto. */
.fin{
  position:relative;border:1px solid var(--line);padding:22px 18px 18px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);
}
.fin--ok{border-color:rgba(22,163,74,.32)}
.fin--no{border-color:rgba(220,38,38,.32)}
.fin::after{
  position:absolute;top:0;right:0;color:#fff;
  font-size:.563rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px 5px 14px;
  clip-path:polygon(12px 0,100% 0,100% 100%,0 100%);
}
.fin--ok::after{content:"Aprobado";background:var(--ok)}
.fin--no::after{content:"Rechazado";background:var(--no)}
.fin h3{font-size:1.375rem;margin-bottom:10px}
.fin__linea{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px dotted var(--line);font-size:.875rem}
.fin__linea span:last-child{font-weight:600;text-align:right;overflow-wrap:anywhere}
.fin__linea span:first-child{flex:none}
.fin__aviso{
  margin-top:18px;background:var(--demo-soft);border:1px solid var(--demo);
  color:var(--demo-ink);padding:14px 16px;font-size:.813rem;line-height:1.55;
}
.fin__aviso b{display:block;margin-bottom:4px}
.fin__canal{
  margin-top:14px;font-size:.75rem;color:var(--demo-ink);line-height:1.5;
  background:var(--demo-soft);border:1px solid var(--demo);padding:10px 12px;
}

/* ---------- estados ---------- */
.motor__err{margin:0 clamp(18px,4vw,34px);background:#FEF2F2;border:1px solid var(--no);color:#7F1D1D;padding:13px 15px;font-size:.813rem}
.motor__load{display:flex;gap:7px;justify-content:center;padding:26px}
.motor__load[hidden]{display:none} /* [hidden] solo, sin esto la regla de arriba le gana y los puntos quedan visibles siempre */
.motor__load span{width:9px;height:9px;background:var(--blue);animation:mload 1s ease-in-out infinite}
.motor__load span:nth-child(2){animation-delay:.15s}
.motor__load span:nth-child(3){animation-delay:.3s}
@keyframes mload{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){.motor__load span{animation:none;opacity:.6}}

/* ---------- qué está pasando ---------- */
.md2__grid{display:grid;gap:16px}
@media (min-width:760px){.md2__grid{grid-template-columns:1fr 1fr}}
.md2__c{background:#fff;border:1px solid var(--line);padding:20px 18px}
.md2__c h3{font-size:1.063rem;margin-bottom:8px;letter-spacing:-.02em}
.md2__c p{font-size:.875rem;color:var(--gray);line-height:1.6}
.md2__c--warn{border-color:var(--demo);background:var(--demo-soft)}
.md2__c--warn p{color:var(--demo-ink)}
.md2__pie{margin-top:24px;font-size:.938rem}
.md2__pie a{color:var(--blue);font-weight:600}