/* Visual del hero: agenda de reservas real (HTML/CSS/JS). Todo con prefijo .hp-. Demo de producto. */
.hpv{container-type:inline-size;width:100%;font-family:Manrope,system-ui,sans-serif;color:#0A0B10;--hp-t:#0A0B10;--hp-p:#A3EFF4;--hp-l:#A3EFF4;--hp-c:#A3EFF4;--hp-r:#A3EFF4}
:where(.hpv) *{box-sizing:border-box;margin:0;padding:0}
:where(.hpv) button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;text-align:left}
.hpv button:focus-visible{outline:2px solid #0E7C86;outline-offset:2px}
.hp-win{font-size:clamp(11px,1.8cqi,15px);background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.9);border-radius:1.6em;box-shadow:0 2.4em 5em -1.6em rgba(10,11,16,.28),0 .4em 1.2em rgba(10,11,16,.06);overflow:hidden}
.hp-bar{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:1em 1.4em;border-bottom:1px solid rgba(10,11,16,.07)}
.hp-brand{font-weight:700;font-size:1.05em;letter-spacing:-.01em;display:flex;align-items:center;gap:.6em}
.hp-brand i{width:.7em;height:.7em;border-radius:50%;background:var(--hp-p)}
.hp-tag{font-size:.78em;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#0E7C86;background:rgba(163,239,244,.16);padding:.45em .9em;border-radius:99px}
.hp-body{display:grid;grid-template-columns:1.12fr .88fr}
.hp-main{padding:1.5em 1.5em 1.6em;display:flex;flex-direction:column;gap:1.35em}
.hp-h{font-size:.76em;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6B6A66;margin-bottom:.7em;display:flex;gap:.7em;align-items:center}
.hp-h b{width:1.7em;height:1.7em;border-radius:50%;background:var(--hp-t);color:#fff;display:grid;place-items:center;font-size:.95em;letter-spacing:0}
.hp-svs{display:grid;gap:.5em}
.hp-sv{display:flex;align-items:center;gap:.9em;padding:.55em .8em .55em .55em;border-radius:1em;border:1px solid rgba(10,11,16,.1);background:#fff;transition:border-color .25s,box-shadow .25s,background .25s}
.hp-sv:hover{border-color:rgba(163,239,244,.7)}
.hp-sv img{width:3em;height:3em;border-radius:.7em;object-fit:cover;flex:none}
.hp-sv span{flex:1;font-weight:600;font-size:1.02em;line-height:1.2}
.hp-sv small{display:block;font-weight:500;font-size:.82em;color:#6B6A66;margin-top:.15em}
.hp-sv[aria-pressed=true]{border-color:var(--hp-t);box-shadow:0 0 0 1px var(--hp-t);background:linear-gradient(0deg,rgba(163,239,244,.14),rgba(163,239,244,.14)),#fff}
.hp-days{display:grid;grid-template-columns:repeat(5,1fr);gap:.5em}
.hp-day{display:flex;flex-direction:column;align-items:center;gap:.1em;padding:.6em 0;border-radius:.9em;border:1px solid rgba(10,11,16,.1);background:#fff;text-align:center!important;transition:.25s}
.hp-day small{font-size:.8em;font-weight:600;color:#6B6A66}.hp-day b{font-size:1.25em;font-weight:700;letter-spacing:-.02em}
.hp-day:hover{border-color:rgba(163,239,244,.7)}
.hp-day[aria-pressed=true]{background:var(--hp-t);border-color:var(--hp-t);color:#fff}.hp-day[aria-pressed=true] small{color:rgba(255,255,255,.75)}
.hp-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em}
.hp-slot{padding:.75em 0;border-radius:.9em;border:1px solid rgba(10,11,16,.1);background:#fff;font-weight:600;text-align:center!important;font-variant-numeric:tabular-nums;transition:.25s}
.hp-slot:hover:not(:disabled){border-color:rgba(163,239,244,.7)}
.hp-slot:disabled{cursor:default;color:#B8B5AE;background:rgba(10,11,16,.03);text-decoration:line-through;border-color:transparent}
.hp-slot[aria-pressed=true]{background:var(--hp-p);border-color:var(--hp-p);color:var(--hp-t)}
/* panel derecho: pantalla editorial */
.hp-sum{display:flex;flex-direction:column;background:var(--hp-t);color:#fff;min-height:100%}
.hp-ph{position:relative;flex:1;min-height:17em;overflow:hidden}
.hp-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.hp-ph img.on{opacity:1}
.hp-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,16,.1) 30%,rgba(10,11,16,.82))}
.hp-ph h3{position:absolute;z-index:1;left:1.1em;right:1em;bottom:.85em;font-size:2.7em;line-height:.93;font-weight:700;letter-spacing:-.04em}
.hp-ph em{position:absolute;z-index:1;left:1.4em;top:1.3em;font-style:normal;font-size:.74em;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:rgba(255,255,255,.9);color:var(--hp-t);padding:.45em .8em;border-radius:99px}
.hp-rows{padding:1.1em 1.4em .2em;display:grid;gap:.2em}
.hp-rows div{display:flex;justify-content:space-between;gap:1em;padding:.55em 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:.95em}
.hp-rows dt{color:rgba(255,255,255,.62)}.hp-rows dd{font-weight:600;text-align:right;transition:color .3s}
.hp-rows dd.hp-pop{color:var(--hp-c)}
.hp-cta{margin:1em 1.4em 1.4em;padding:1em 1.2em;border-radius:99px;background:#fff;color:var(--hp-t)!important;font-weight:700;display:flex;justify-content:space-between;align-items:center;transition:background .3s,opacity .3s}
.hp-cta:disabled{opacity:.45;cursor:default}
.hp-cta:hover:not(:disabled){background:var(--hp-c)}
.hp-cta.ok{background:var(--hp-c)}
.hp-note{font-size:.72em;color:#6B6A66;padding:0 1.9em 1.2em;grid-column:1/-1}
/* compacto: movil o contenedor estrecho */
@container (max-width:560px){
 .hp-win{font-size:clamp(10.5px,3.1cqi,13px);border-radius:1.4em}
 .hp-body{grid-template-columns:1fr}
 .hp-sum{order:-1}
 .hp-ph{min-height:0;flex:none;height:9.5em}
 .hp-ph h3{font-size:2em}
 .hp-main{padding:1.1em 1.1em 1.2em;gap:1em}
 .hp-svs{grid-template-columns:repeat(3,1fr)}
 .hp-sv{flex-direction:column;align-items:flex-start;padding:.5em;gap:.5em}
 .hp-sv img{width:100%;height:3.4em}
 .hp-sv span{font-size:.92em}.hp-sv small{font-size:.9em}
 .hp-slots{grid-template-columns:repeat(6,1fr)}
 .hp-slot{padding:.7em 0}
 .hp-rows{display:none}
 .hp-cta{margin:0;border-radius:0;padding:1em 1.2em}
 .hp-sum .hp-sumline{display:block}
}
.hp-sumline{display:none;padding:.9em 1.2em;font-weight:600;font-size:.98em;background:var(--hp-t);color:#fff}
@media (prefers-reduced-motion:reduce){.hpv *{transition:none!important}}

/* colocacion en el hero real */
#hero-vis{position:absolute;z-index:4;right:var(--pad,5vw);bottom:clamp(40px,6vh,72px);width:min(32vw,520px)}
@media (max-width:900px){#hero-vis{left:16px;right:16px;width:auto;bottom:12px;max-height:30vh;overflow:hidden}#hero-vis .hp-sum{display:none}#hero-vis .hp-body{grid-template-columns:1fr}}