/* =========================================================
   MUSICAL BOXES 2.0 · ESTILO COMÚN
   Especificación de la solicitud: fondo tinta; beige para logo, líneas,
   botones y titulares; blanco roto para el texto. Sin otros colores.
   Tipografías de la marca (carpeta TIPOGRAFIA del entregable): Inter (titulares
   finos y texto) y Space Mono (etiquetas). Servidas desde /fonts, sin Google.
   ========================================================= */
@font-face{font-family:"Inter MB";src:url(/fonts/inter-thin.woff2) format("woff2");font-weight:100 199;font-display:swap}
@font-face{font-family:"Inter MB";src:url(/fonts/inter-light.woff2) format("woff2");font-weight:200 399;font-display:swap}
@font-face{font-family:"Inter MB";src:url(/fonts/inter-regular.woff2) format("woff2");font-weight:400 499;font-display:swap}
@font-face{font-family:"Inter MB";src:url(/fonts/inter-medium.woff2) format("woff2");font-weight:500 599;font-display:swap}
@font-face{font-family:"Inter MB";src:url(/fonts/inter-bold.woff2) format("woff2");font-weight:600 900;font-display:swap}
@font-face{font-family:"Space Mono MB";src:url(/fonts/space-mono.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --tinta:#161614; --tinta-2:#161614; --tinta-3:#161614; /* tinta del manual tal y como se ve su muestra (el texto dice #1A1814, la muestra CMYK se ve #161614) */
  --beige:#D9C9A4; --blanco:#FBFAF6; /* colores del manual de marca: beige #D9C9A4 · blanco roto #FBFAF6 · tinta #161614 */
  --b70:rgba(251,250,246,.72); --b45:rgba(251,250,246,.48); --b20:rgba(251,250,246,.18); --b08:rgba(251,250,246,.07);
  --l:rgba(217,201,164,.32); --l-soft:rgba(217,201,164,.16); --beige-08:rgba(217,201,164,.08);
  --display:"Inter MB","Inter",system-ui,sans-serif;
  --sans:"Inter MB","Inter",Arial,"Helvetica Neue",sans-serif;
  --mono:"Space Mono MB",ui-monospace,monospace;
  --ease:cubic-bezier(.23,1,.32,1); /* ease-out fuerte: entradas, respuestas de la interfaz (también --ease-out) */
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); /* in-out: lo que se mueve dentro de la pantalla */
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{background:var(--tinta);color:var(--blanco);font-family:var(--sans);font-size:calc(16px * var(--k-txt,1));line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
:focus-visible{outline:1px solid var(--beige);outline-offset:3px}
.wrap{width:min(1240px,100% - 32px);margin-inline:auto}
.narrow{width:min(860px,100% - 32px);margin-inline:auto}

/* tipografía */
h1,h2,h3,.display{font-family:var(--display);font-weight:var(--peso-tit,200);letter-spacing:-.045em;line-height:.98;color:var(--beige)}
h1{font-size:calc(clamp(2.8rem,8vw,6rem) * var(--k-tit,1))}
h2{font-size:calc(clamp(2.2rem,5.6vw,4.6rem) * var(--k-tit,1))}
h3{font-size:calc(clamp(1.4rem,2.4vw,1.9rem) * var(--k-tit,1));letter-spacing:-.025em;line-height:1.1}
p{color:var(--b70)}
b,strong{color:var(--blanco);font-weight:700}
.mono,.lbl{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase}
.lbl{color:var(--b45)}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:640px}
.num{font-family:var(--mono);font-size:.8125rem;color:var(--beige);letter-spacing:.08em}

/* banner editable y modo prueba */
.banner{background:var(--beige);color:var(--tinta);text-align:center;padding:.55rem 16px;font-family:var(--mono);font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase}
.banner b{color:var(--tinta)}

/* navegación */
.nav{position:sticky;top:0;z-index:60;background:rgba(22,22,20,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--l-soft)}
.nav .wrap{height:68px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.7rem;color:var(--beige)}
.iso{display:block;width:58px;aspect-ratio:484/251.5;background:url(../assets/isotipo-beige.svg) center/contain no-repeat}
.brand b{font-family:var(--display);font-weight:300;letter-spacing:-.02em;font-size:1.05rem;color:var(--beige)}
.links{display:flex;gap:1.6rem;align-items:center}
.links a{position:relative;color:var(--b70);transition:color .3s}
.links a:hover,.links a.on{color:var(--beige)}
.links a.on::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--beige)}
.nav-r{display:flex;gap:.6rem;align-items:center}
.burger{display:none;width:42px;height:42px;border:1px solid var(--l);border-radius:50%;color:var(--beige)}
@media(max-width:1240px){
  .links{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:var(--tinta);border-bottom:1px solid var(--l-soft);padding:.5rem 16px 1rem}
  .links.open{display:flex}
  .links a{padding:.8rem 0;width:100%;border-bottom:1px solid var(--b08)}
  .links a.on::after{display:none}
  .burger{display:grid;place-items:center}
  .nav-r a.btn-line{display:none}
}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.95rem 1.5rem;border-radius:999px;font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;transition:background .18s,color .18s,border-color .18s,opacity .18s,scale .14s cubic-bezier(.23,1,.32,1);white-space:nowrap}
.btn:active{scale:.97} /* el botón se hunde al pulsar: la web «escucha» (scale va aparte del transform del efecto magnético) */
.btn-beige{background:var(--beige);color:var(--tinta)}
.btn-beige:hover{background:var(--blanco)}
.btn-line{border:1px solid var(--beige);color:var(--beige)}
.btn-line:hover{background:var(--beige);color:var(--tinta)}
.btn-ghost{color:var(--b70);padding-inline:.4rem}
.btn-ghost:hover{color:var(--beige)}
.btn-sm{padding:.6rem 1rem;font-size:.8125rem}
.btn-lg{padding:1.15rem 2rem;font-size:.8rem}
.btn[disabled],.btn.off{opacity:.35;pointer-events:none}
.btn .arr{transition:transform .3s var(--ease)}
@media (hover:hover) and (pointer:fine){.btn:hover .arr{transform:translateX(4px)}}
.row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}

/* secciones */
section{padding:clamp(70px,10vw,130px) 0;border-top:1px solid var(--l-soft)}
section.first{border-top:0}
.alt{background:var(--tinta);border-top:1px solid var(--l-soft);border-bottom:1px solid var(--l-soft)} /* fondo siempre tinta #161614 (manual de marca) */
.sec-head{display:grid;grid-template-columns:auto 1fr;gap:1rem 3rem;align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.sec-head .num{align-self:start;padding-top:.7rem}
.sec-head p{grid-column:2;max-width:620px;font-size:1.05rem}
@media(max-width:700px){.sec-head{grid-template-columns:1fr}.sec-head p{grid-column:1}}

/* rejillas y tarjetas */
.grid{display:grid;gap:1px;background:var(--l-soft);border:1px solid var(--l-soft);border-radius:8px;overflow:hidden}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
.cell{background:var(--tinta);padding:clamp(20px,2.6vw,34px);display:flex;flex-direction:column;gap:.7rem}
.alt .cell{background:var(--tinta)}
.cell.hl{background:var(--beige-08)}
.cell .price{font-family:var(--display);font-weight:200;font-size:clamp(2.2rem,4vw,3.2rem);letter-spacing:-.04em;line-height:1;color:var(--beige)}
.cell .price small{font-size:.32em;letter-spacing:0;color:var(--b45);font-family:var(--sans);font-weight:400;margin-left:.3rem}
.cell .grow{flex:1}
.card{border:1px solid var(--l-soft);border-radius:8px;padding:clamp(18px,2.4vw,30px);background:var(--tinta)}
.alt .card{background:var(--tinta)}
.chip{display:inline-block;border:1px solid var(--l);border-radius:999px;padding:.32rem .75rem;font-family:var(--mono);font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--beige)}
.chip.solid{background:var(--beige);color:var(--tinta);border-color:var(--beige)}
.chip.dim{color:var(--b45);border-color:var(--b20)}
ul.list{list-style:none}
ul.list li{display:grid;grid-template-columns:9rem 1fr;gap:1rem;padding:.8rem 0;border-top:1px solid var(--l-soft)}
ul.list li:last-child{border-bottom:1px solid var(--l-soft)}
@media(max-width:480px){ul.list li{grid-template-columns:1fr;gap:.2rem}}
ul.checks{list-style:none;display:grid;gap:.5rem}
ul.checks li{padding-left:1.4rem;position:relative;color:var(--b70)}
ul.checks li::before{content:"";position:absolute;left:0;top:.62em;width:.7rem;height:1px;background:var(--beige)}

/* conmutador DJ / Production */
.toggle{display:inline-flex;border:1px solid var(--l);border-radius:999px;padding:4px;gap:2px}
.toggle button{padding:.6rem 1.15rem;border-radius:999px;font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--b70);transition:background .3s,color .3s}
.toggle button.on{background:var(--beige);color:var(--tinta)}
.bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.8rem}

/* formularios */
.f{display:grid;gap:.4rem}
.f input,.f select,.f textarea{width:100%;background:transparent;border:1px solid var(--l);padding:.8rem .95rem;outline:none;color:var(--blanco);border-radius:8px;transition:border-color .25s,box-shadow .25s}
.f select{background:var(--tinta)}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--beige);box-shadow:0 0 0 3px var(--beige-08)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 1.6rem}
.form .full{grid-column:1/-1}
@media(max-width:620px){.form{grid-template-columns:1fr}}
.err{color:var(--beige);font-family:var(--mono);font-size:.8125rem;letter-spacing:.04em}
.note{border:1px solid var(--l);border-radius:8px;padding:1rem 1.2rem;color:var(--b70);font-size:.95rem}
.note b{color:var(--beige)}
.note.warn{border-color:var(--beige);background:var(--beige-08)}

/* tablas */
.table{width:100%;border-collapse:collapse;font-size:.95rem}
.table th{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--b45);text-align:left;font-weight:400;padding:.7rem .6rem;border-bottom:1px solid var(--l)}
.table td{padding:.75rem .6rem;border-bottom:1px solid var(--b08);color:var(--b70);vertical-align:top}
.table td b{font-weight:400}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* hero */
.hero{padding:clamp(50px,9vw,120px) 0 clamp(50px,7vw,90px)}
.hero .iso{width:min(240px,50vw);margin-bottom:clamp(24px,4vw,40px)}
.hero h1{max-width:12ch}
.hero .lead{margin-top:1.4rem}
.hero .row{margin-top:2.2rem}
.photo{border-radius:6px;overflow:hidden;position:relative}
.photo img{width:100%;height:100%;object-fit:cover}
.photo .cap{position:absolute;left:12px;bottom:10px;font-family:var(--mono);font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blanco);background:rgba(22,22,20,.6);padding:.25rem .5rem;border-radius:4px}
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,80px);align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}

/* pasos */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--l-soft);border:1px solid var(--l-soft);border-radius:8px;overflow:hidden;counter-reset:s}
@media(max-width:960px){.steps{grid-template-columns:1fr}}
.steps>div{background:var(--tinta);padding:1.5rem 1.3rem;counter-increment:s}
.alt .steps>div{background:var(--tinta)}
.steps>div::before{content:"";display:block;width:10px;height:10px;border-radius:50%;background:var(--beige);margin-bottom:1rem}
.steps h3{font-size:1.25rem;margin-bottom:.4rem}
.steps p{font-size:.94rem}

/* calendario de reservas */
.days{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.6rem;scrollbar-width:thin}
.days button{flex:none;min-width:72px;border:1px solid var(--l-soft);border-radius:8px;padding:.6rem .5rem;text-align:center;color:var(--b70);transition:border-color .2s,background .2s}
.days button b{display:block;font-family:var(--display);font-weight:200;font-size:1.6rem;color:var(--beige);letter-spacing:-.04em;line-height:1.1}
.days button span{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase}
.days button.on{border-color:var(--beige);background:var(--beige-08)}
.slots{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
@media(max-width:700px){.slots{grid-template-columns:repeat(4,1fr)}}
.slot{border:1px solid var(--l-soft);border-radius:6px;padding:.7rem .3rem;text-align:center;font-family:var(--mono);font-size:.78rem;color:var(--blanco);transition:background .2s,border-color .2s}
.slot:hover{border-color:var(--beige)}
.slot.busy{color:var(--b20);border-style:dashed;cursor:not-allowed;text-decoration:line-through}
.slot.past{color:var(--b20);cursor:not-allowed}
.slot.sel{background:var(--beige);color:var(--tinta);border-color:var(--beige)}
.slot.in{background:var(--beige-08);border-color:var(--beige)}
.legend{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:.9rem}
.legend span{display:inline-flex;align-items:center;gap:.45rem}
.legend i{width:14px;height:14px;border-radius:3px;border:1px solid var(--l-soft);display:inline-block}
.legend i.s{background:var(--beige);border-color:var(--beige)}
.legend i.b{border-style:dashed}

/* agenda del panel */
.agenda{display:grid;grid-template-columns:52px repeat(var(--cols,7),minmax(110px,1fr));min-width:820px}
.agenda .hd{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--b45);padding:.5rem .4rem;border-bottom:1px solid var(--l)}
.agenda .hr{font-family:var(--mono);font-size:.66rem;color:var(--b45);padding:.2rem .3rem;height:30px;border-top:1px solid var(--b08)}
.agenda .col{position:relative;border-left:1px solid var(--b08)}
.agenda .col .ln{height:30px;border-top:1px solid var(--b08)}
.ev{position:absolute;left:3px;right:3px;border-radius:4px;padding:.25rem .4rem;font-size:.7rem;line-height:1.25;overflow:hidden;cursor:pointer}
.ev.dj{background:var(--beige);color:var(--tinta)}
.ev.prod{background:transparent;border:1px solid var(--beige);color:var(--beige)}
.ev.blk{background:repeating-linear-gradient(45deg,var(--b08) 0 6px,transparent 6px 12px);border:1px dashed var(--b45);color:var(--b70)}

/* asientos membresía */
.seats{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;max-width:440px}
.seats i{aspect-ratio:1.6;border-radius:50%;border:1px solid var(--beige)}
.seats i.taken{background:var(--beige)}

/* modal */
.modal{position:fixed;inset:0;z-index:100;background:rgba(10,9,8,.72);display:none;align-items:center;justify-content:center;padding:16px}
.modal.open{display:flex}
.sheet{background:var(--tinta-2);border:1px solid var(--l);border-radius:10px;width:min(560px,100%);max-height:92vh;max-height:92dvh;overflow:auto;padding:clamp(22px,3vw,34px);position:relative}
.sheet .x{position:absolute;right:14px;top:10px;font-size:1.6rem;color:var(--b45)}
.sheet h3{margin:.5rem 0 1rem}
.sum{display:grid;gap:.1rem;margin:1rem 0}
.sum div{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--b08)}
.sum div:last-child{border:0;font-weight:700}
.sum div span:last-child{color:var(--blanco)}

/* código de entrada */
.pin{font-family:var(--mono);font-size:clamp(2rem,6vw,3rem);letter-spacing:.3em;color:var(--beige)}

/* aviso flotante */
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(140%);z-index:120;background:var(--beige);color:var(--tinta);padding:.8rem 1.2rem;border-radius:999px;font-family:var(--mono);font-size:.8125rem;letter-spacing:.04em;transition:transform .45s var(--ease);max-width:calc(100% - 32px);text-align:center;visibility:hidden}
.toast.on{transform:translateX(-50%) translateY(0);visibility:visible}

/* pie */
footer{border-top:1px solid var(--l-soft);padding:clamp(50px,7vw,80px) 0 28px;margin-top:auto}
footer .logo{display:block;width:min(220px,50vw);aspect-ratio:490/431.5;background:var(--beige);-webkit-mask:url(../assets/logo-tinta.svg) center/contain no-repeat;mask:url(../assets/logo-tinta.svg) center/contain no-repeat}
footer .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;align-items:start}
@media(max-width:820px){footer .cols{grid-template-columns:1fr 1fr}}
footer p{font-size:.94rem;margin-top:.4rem}
footer .legal{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:3rem;padding-top:1.2rem;border-top:1px solid var(--b08);color:var(--b45)}
footer .legal button{color:var(--beige);text-decoration:underline;text-underline-offset:3px;font-family:var(--mono);font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase}

.hide{display:none!important}
.mt1{margin-top:1rem}.mt2{margin-top:2rem}.mt3{margin-top:3rem}
.muted{color:var(--b45)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}
@media(max-width:480px){.brand b{display:none}}

/* trampa para bots: invisible para personas */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
/* aviso de instalar la app */
.install{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:110;display:flex;gap:.9rem;align-items:flex-start;background:var(--tinta-2);border:1px solid var(--beige);border-radius:12px;padding:1rem;max-width:520px;margin-inline:auto;box-shadow:0 10px 40px rgba(22,22,20,.5)}
/* modo app: respeta la muesca y la barra del iPhone */
/* Zona segura (notch / Dynamic Island): todo empieza debajo; una franja tinta fija tapa la zona del reloj y la batería.
   El banner de pruebas y el menú quedan siempre visibles por debajo, también al hacer scroll. */
body{padding-top:env(safe-area-inset-top)}
body::before{content:"";position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top);background:var(--tinta);z-index:200;pointer-events:none}
.nav{top:env(safe-area-inset-top)}
@media (display-mode: standalone){footer{padding-bottom:calc(28px + env(safe-area-inset-bottom))}}

/* pasos del alta */
.pasos{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.4rem}
.pasos span{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .8rem .4rem .45rem;border:1px solid var(--l-soft);border-radius:999px;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--b45)}
.pasos i{font-style:normal;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;border:1px solid currentColor;font-size:.62rem}
.pasos .on{color:var(--tinta);background:var(--beige);border-color:var(--beige)}
.pasos .done{color:var(--beige);border-color:var(--l)}

/* ventana de registro / entrada */
.auth-registro .log,.auth-entrar .reg{display:none}
.auth-registro,.auth-entrar{border:0;background:none;overflow:visible;border-radius:0}
.auth-registro .cell,.auth-entrar .cell{padding:0;background:none}
.sheet .grid{background:none}
@media(max-width:620px){.nav-r .hide-s{display:none}.nav-r .btn-sm{padding:.55rem .8rem}}

/* fotos */
figure[data-foto]{position:relative;overflow:hidden;border-radius:6px;background:var(--tinta-2);margin:0}
/* las fotos respetan la separación que se les pone (antes margin:0 la anulaba y chocaban con los botones) */
figure[data-foto].mt1{margin-top:1rem}figure[data-foto].mt2{margin-top:clamp(1.75rem,3vw,2.5rem)}figure[data-foto].mt3{margin-top:clamp(2.5rem,5vw,4rem)}
figure[data-foto] picture,figure[data-foto] img{display:block;width:100%;height:100%;object-fit:cover}
/* Safari pinta el texto alternativo mientras la foto carga: se oculta (sigue disponible para lectores de pantalla y SEO) */
figure[data-foto] img,.galeria img,.cell img,.obra-foto img,.eq-polas img,.eq-pose img{color:transparent;font-size:0;line-height:0}
figure[data-foto] .cap{position:absolute;left:12px;bottom:10px;font-family:var(--mono);font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blanco);background:rgba(22,22,20,.6);padding:.25rem .5rem;border-radius:4px}
.banda{width:100%;border-radius:0!important}
.galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:820px){.galeria{grid-template-columns:repeat(2,1fr)}}
.galeria figure{cursor:zoom-in}
.cell figure[data-foto]{margin:-1px -1px .6rem;border-radius:4px}

/* preguntas frecuentes */
.faq{border-top:1px solid var(--l-soft)}
.faq details{border-bottom:1px solid var(--l-soft)}
.faq summary{cursor:pointer;list-style:none;padding:1.2rem 2.4rem 1.2rem 0;position:relative;font-family:var(--display);font-weight:300;font-size:clamp(1.1rem,1.8vw,1.35rem);color:var(--blanco);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:50%;transform:translateY(-50%);font-family:var(--mono);color:var(--beige);font-size:1.3rem;transition:transform .2s var(--ease-out)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{padding:0 0 1.4rem;max-width:760px}

/* aviso de cookies */
.cookies{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:115;max-width:560px;background:var(--tinta-2);border:1px solid var(--l);border-radius:12px;padding:1rem 1.1rem;box-shadow:0 10px 40px rgba(22,22,20,.5);display:grid;gap:.8rem}
.cookies p{font-size:.9rem}

/* selector de idioma y enlaces legales */
.lang{display:inline-grid;place-items:center;min-width:40px;height:34px;padding:0 .5rem;border:1px solid var(--l-soft);border-radius:999px;color:var(--b70);font-size:.8125rem}
.lang:hover{color:var(--beige);border-color:var(--beige)}
.legal-links{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:2.4rem;color:var(--b45)}
.legal-links a,.legal-links button{color:var(--b45);font:inherit;letter-spacing:inherit;text-transform:inherit}
.legal-links a:hover,.legal-links button:hover{color:var(--beige)}

/* =========================================================
   TODOS LOS DISPOSITIVOS: móvil pequeño, móvil, tablet, iPad, portátil y pantallas grandes
   ========================================================= */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{overflow-x:clip;max-width:100%}
img,video,canvas,svg{max-width:100%}
a,button,[role=button],input,select,textarea,label{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.solo-s{display:none}
/* en pantallas táctiles nada depende del ratón */
@media (hover:none){.cell:hover::before,.card:hover::before{opacity:0}.galeria figure:hover::after{opacity:0}}
/* botones y enlaces cómodos al dedo (mínimo 44 px) */
@media (pointer:coarse){.btn{min-height:44px}.btn-sm{min-height:40px}.lang{min-height:40px;min-width:44px}.links a{min-height:44px;display:flex;align-items:center}}
/* móviles */
@media (max-width:620px){.nav .wrap{gap:.5rem}.nav-r{gap:.4rem}.brand .iso{width:44px!important}}
@media (max-width:480px){.nav-r [data-auth="entrar"]{display:none}.solo-s{display:flex}.lang{min-width:38px;padding:0 .4rem}.btn{padding:.9rem 1.2rem}}
/* móviles muy pequeños (iPhone SE, 320–360 px) */
@media (max-width:360px){.nav-r .btn-sm{padding:.5rem .65rem;font-size:.68rem;letter-spacing:.05em}.burger{width:38px;height:38px}}
/* móvil en horizontal: la portada no ocupa más que la pantalla */
@media (max-height:500px) and (orientation:landscape){.hero.vivo,.hero.foto{min-height:auto;padding-top:96px;padding-bottom:36px}.scroll-cue{display:none}}
/* app instalada en iPhone: respetar la isla y la barra de inicio */
@media (display-mode: standalone){body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}}

/* =========================================================
   TARIFAS · tabla de precios pensada para vender
   ========================================================= */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
@media(max-width:1100px){.plans{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.plans{grid-template-columns:1fr}}
.plans-4{grid-template-columns:repeat(4,minmax(0,1fr))}@media(max-width:1200px){.plans-4{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.plans-4{grid-template-columns:1fr}}
.plan{position:relative;display:flex;flex-direction:column;gap:.9rem;padding:clamp(22px,2.4vw,30px);border:1px solid var(--l-soft);border-radius:14px;background:var(--tinta);
  transition:transform .3s var(--ease),border-color .25s var(--ease),box-shadow .3s var(--ease)}
.plan .btn{margin-top:auto;width:100%}
.plan-top{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap}
.plan-for{color:var(--b70);font-size:.95rem;line-height:1.45;margin:0;min-height:2.9em}
.plan-price{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.plan-price b{font-family:var(--display);font-weight:200;font-size:clamp(2.6rem,4.2vw,3.4rem);letter-spacing:-.04em;line-height:1;color:var(--beige)}
.plan-price small{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--b70)}
.plan-total{margin:0;font-size:.9rem;color:var(--b70)}
.save{color:var(--beige);font-weight:500}
.ticks{list-style:none;margin:.2rem 0 .6rem;padding:0;display:grid;gap:.5rem}
.ticks li{position:relative;padding-left:1.5rem;font-size:.95rem}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:.8rem;height:.4rem;border-left:1.5px solid var(--beige);border-bottom:1.5px solid var(--beige);transform:translateY(-50%) rotate(-45deg)}
.plan.pop{border-color:var(--beige);background:linear-gradient(180deg,rgba(217,201,164,.09),rgba(217,201,164,.02) 60%,transparent),var(--tinta);box-shadow:0 30px 80px -40px rgba(217,201,164,.35)}
.badge{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;background:var(--beige);color:var(--tinta);border-radius:999px;padding:.35rem .7rem}
@media (hover:hover){.plan:hover{transform:translateY(-6px);border-color:var(--l)}.plan.pop:hover{border-color:var(--beige)}}
@media(min-width:1101px){.plan.pop{transform:translateY(-10px)}.plan.pop:hover{transform:translateY(-16px)}}
.seg{display:flex;border:1px solid var(--l);border-radius:999px;padding:3px;gap:2px}
.seg button{flex:1;padding:.5rem .4rem;border-radius:999px;font-family:var(--mono);font-size:.8125rem;letter-spacing:.06em;color:var(--b70);transition:background .2s var(--ease),color .2s var(--ease)}
.seg button.on{background:var(--beige);color:var(--tinta)}
.trust{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:center}
.trust li{display:flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--b70)}
.trust .ico{display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--beige);border-radius:50%;color:var(--beige);font-size:.7rem}
/* calculadora */
.calc{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(20px,4vw,56px);align-items:center;border:1px solid var(--l-soft);border-radius:14px;padding:clamp(22px,3.5vw,44px);background:var(--tinta)}
@media(max-width:820px){.calc{grid-template-columns:1fr}}
.calc-n{display:flex;align-items:baseline;gap:.7rem;margin:.6rem 0 1.2rem}
.calc-n b{font-family:var(--display);font-weight:200;font-size:clamp(3.4rem,7vw,5.6rem);letter-spacing:-.04em;line-height:.9;color:var(--beige);font-variant-numeric:tabular-nums}
.calc-n span{color:var(--b70)}
.calc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;touch-action:pan-y}
.calc input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--l);border-radius:2px}
.calc input[type=range]::-moz-range-track{height:2px;background:var(--l)}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-12px;border-radius:50%;background:var(--beige);box-shadow:0 0 0 6px rgba(217,201,164,.15);transition:box-shadow .3s}
.calc input[type=range]::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:50%;background:var(--beige)}
.calc input[type=range]:active::-webkit-slider-thumb{box-shadow:0 0 0 12px rgba(217,201,164,.18)}
.calc-ticks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.66rem;color:var(--b70);margin-top:.3rem}
.calc-out{border-left:1px solid var(--l-soft);padding-left:clamp(20px,3vw,40px)}
@media(max-width:820px){.calc-out{border-left:0;border-top:1px solid var(--l-soft);padding:24px 0 0}}
.calc-out h3{margin:0}
.calc-big{display:flex;align-items:baseline;gap:.5rem;margin:.6rem 0}
.calc-big b{font-family:var(--display);font-weight:200;font-size:clamp(2.6rem,5vw,3.8rem);letter-spacing:-.04em;color:var(--beige)}
.calc-big small{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--b70)}
.save-big{margin:0;font-size:1.05rem}.save-big b{color:var(--beige)}
/* barras de ahorro */
.bars{display:grid;gap:.75rem}
.bar-row{display:grid;grid-template-columns:12.5rem 1fr 5.5rem 4rem;gap:1rem;align-items:center;font-size:.95rem}
.bar-t{height:6px;border-radius:6px;background:var(--b08,rgba(251,250,246,.08));overflow:hidden}
.bar-t i{display:block;height:100%;width:var(--w);border-radius:6px;background:linear-gradient(90deg,var(--beige),rgba(217,201,164,.55));transform-origin:left;animation:barra 1.2s var(--ease) both}
.bar-row b{font-weight:500;color:var(--beige);font-variant-numeric:tabular-nums;text-align:right}
.bar-row em{font-style:normal;font-family:var(--mono);font-size:.8125rem;color:var(--beige);text-align:right}
@keyframes barra{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:620px){.bar-row{grid-template-columns:1fr auto auto;gap:.4rem .8rem}.bar-t{grid-column:1/-1;order:3}}
/* cierre */
.cierre{text-align:center}.cierre .row{justify-content:center}
.cierre h2{max-width:18ch;margin-inline:auto}

/* panel: cabecera y pie propios */
.nav-panel .brand b{display:inline!important;font-family:var(--mono);font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--beige)}
.footer-panel{padding:28px 0 calc(28px + env(safe-area-inset-bottom));border-top:1px solid var(--l-soft);margin-top:4rem}
.footer-panel .legal{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--b45);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase}

/* marca: disco en beige + nombre en blanco roto (assets/nombre*.png, sacados del logotipo oficial) */
/* nombre «MUSICAL BOXES · MUSIC STUDIOS» en beige, como el logotipo enviado; en la portada va solo, sin disco */
.brand .nombre{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(3px,.35vw,5px);width:clamp(150px,14vw,200px);transition:opacity .3s}
.brand .nombre i{display:block}
.brand .nombre .n1{width:100%;aspect-ratio:1945/224;background:var(--beige);-webkit-mask:url(../assets/nombre-solo.png) left center/contain no-repeat;mask:url(../assets/nombre-solo.png) left center/contain no-repeat}
/* «MUSIC STUDIOS» en blanco roto, de la M a la L de MUSICAL, pegado debajo */
.brand .nombre .n2{width:56.98%;aspect-ratio:778/52;background:var(--blanco);-webkit-mask:url(../assets/nombre-studios-2.png) left center/contain no-repeat;mask:url(../assets/nombre-studios-2.png) left center/contain no-repeat}
.brand:hover .nombre{opacity:.85}
@media(max-width:480px){.brand .nombre{width:128px}.nav .wrap{gap:.4rem}.nav-r{gap:.35rem}.nav-r .btn-sm{padding:.5rem .7rem}.burger{width:40px;height:40px}}@media(max-width:360px){.brand .nombre{width:104px}.lang{min-width:32px;padding:0 .3rem;font-size:.62rem}.nav-r .btn-sm{padding:.45rem .55rem;font-size:.62rem;letter-spacing:.04em}.burger{width:36px;height:36px}}
.marca-pie{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.marca-pie .iso{width:min(150px,40vw)}
.nombre-pie{display:block;width:min(240px,62vw);aspect-ratio:1945/373;background:var(--blanco);-webkit-mask:url(../assets/nombre.png) left center/contain no-repeat;mask:url(../assets/nombre.png) left center/contain no-repeat}

/* tarifas: elección de estudio, siempre visible */
.estudio-op{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:.8rem}
@media(max-width:700px){.estudio-op{grid-template-columns:1fr}}
.estudio{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;text-align:left;padding:18px 22px;border:1px solid var(--l-soft);border-radius:14px;background:var(--tinta);transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
.estudio:hover{border-color:var(--l)}
.estudio.on{border-color:var(--beige);background:linear-gradient(180deg,rgba(217,201,164,.08),rgba(217,201,164,.02)),var(--tinta)}
.estudio-check{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--l);position:relative;transition:border-color .3s}
.estudio.on .estudio-check{border-color:var(--beige)}
.estudio.on .estudio-check::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--beige);animation:pop .35s var(--ease)}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.estudio-txt b{display:block;font-family:var(--display);font-weight:300;font-size:1.35rem;letter-spacing:-.03em;color:var(--beige)}
.estudio-txt small{display:block;color:var(--b70);font-size:.86rem;margin-top:.15rem}
.estudio-precio{display:flex;align-items:baseline;gap:.3rem;white-space:nowrap}
.estudio-precio b{font-family:var(--display);font-weight:200;font-size:1.6rem;color:var(--beige);letter-spacing:-.04em}
.estudio-precio small{font-family:var(--mono);font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--b70)}
.seg-box button{font-size:.8125rem}
.seg-fijo{justify-content:center;padding:.55rem .4rem}.seg-fijo span{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--beige)}
@media(max-width:520px){.estudio{grid-template-columns:auto 1fr;padding:16px 18px;row-gap:.5rem}.estudio-precio{grid-column:2}.estudio-txt b{font-size:1.25rem}}
.links a{white-space:nowrap}@media(min-width:961px) and (max-width:1100px){.links{gap:1.1rem}}

/* logo completo oficial, abajo del todo de cada página (beige, como en el manual) */
.logo-final{display:flex;justify-content:center;padding:clamp(56px,9vw,110px) 0 clamp(24px,4vw,40px)}
.logo-final .logo{width:min(560px,86vw)}

/* =========================================================
   MISMA ESCALA EN TODAS LAS PÁGINAS
   Todas las cabeceras con foto miden lo mismo y todos los títulos usan el mismo tamaño.
   ========================================================= */
.hero.foto{min-height:0!important;height:auto} /* empieza arriba como la portada: disco, etiqueta, título */
.hero.foto h1,.hero.vivo h1{max-width:12ch}

/* pie: recursos descargables (guías y normas) */
.recursos{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.6rem;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--l-soft);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase}
.recursos .lbl{color:var(--beige);margin-right:.4rem}
.recursos a{color:var(--b70);transition:color .3s}.recursos a:hover{color:var(--beige)}

/* disco animado arriba de cada página, igual que en la portada */
.cabecera{padding-top:clamp(50px,9vw,120px)!important}
.disc + .lbl,.disc + span.lbl{display:block;margin-top:clamp(24px,4vw,40px)}
.disc + div > .lbl:first-child,.disc + .bar{margin-top:clamp(24px,4vw,40px)}
.hero.foto .disc,.cabecera .disc{width:min(300px,62vw)}

/* Ofertas extra de cada box (videoset, producción) */
/* Tarjeta regalo, videoset y cobro (código de descuento + saldo) */
.regalo-vista{border-color:var(--beige);max-width:380px;background:var(--tinta)}
.regalo-vista .price{font-size:clamp(2.4rem,6vw,3.4rem)}
#rgImportes{flex-wrap:wrap;border-radius:22px}
#rgImportes button{min-width:72px}
.cobro summary{cursor:pointer;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--beige);list-style:none}
.cobro summary::-webkit-details-marker{display:none}
.cobro summary::before{content:"+ "}
.cobro[open] summary::before{content:"− "}

/* Leyendas del manual de marca (Auger Mono, beige) */
.leyendas{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.6rem;margin:2.2rem 0 0;color:var(--beige);font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase}
#vsPrecio,.regalo-vista .price{font-family:var(--display);font-weight:200;color:var(--beige);font-size:clamp(2.4rem,5vw,3.4rem);letter-spacing:-.04em;line-height:1}
#vsPrecio small{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--beige)}

/* Todos los campos de texto, dentro o fuera de .f: rectángulo completo, no solo la línea */
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=date],input[type=search],input[type=url],input:not([type]),select,textarea{border:1px solid var(--l);border-radius:8px;padding:.8rem .95rem;background:transparent;color:var(--blanco);outline:none;transition:border-color .25s,box-shadow .25s}
input[type=text]:focus,input[type=email]:focus,input[type=tel]:focus,input[type=password]:focus,input[type=number]:focus,input[type=date]:focus,input[type=search]:focus,input[type=url]:focus,input:not([type]):focus,select:focus,textarea:focus{border-color:var(--beige);box-shadow:0 0 0 3px var(--beige-08)}
select{background:var(--tinta)}
input::placeholder,textarea::placeholder{color:var(--b45)}
.cobro{border:1px solid var(--l-soft);border-radius:10px;padding:1rem}
.cobro .cb-lab{color:var(--beige);display:block}
.calc-ops{display:grid;gap:6px}
.calc-op{display:grid;grid-template-columns:1fr auto 4.5rem;align-items:baseline;gap:.8rem;padding:.55rem .8rem;border:1px solid var(--l-soft);border-radius:8px;color:var(--b70);transition:background .35s var(--ease),color .35s var(--ease),border-color .35s}
.calc-op b{font-weight:400;color:var(--blanco);font-variant-numeric:tabular-nums}.calc-op small{font-family:var(--mono);font-size:.66rem;text-align:right}
.calc-op.on{background:var(--beige);border-color:var(--beige);color:var(--tinta)}.calc-op.on b{color:var(--tinta)}
.vs-home .split{align-items:center}
.vs-lista{list-style:none;display:grid;gap:.6rem}.vs-lista li{padding-left:1.6rem;position:relative}.vs-lista li::before{content:"";position:absolute;left:.15rem;top:.6em;width:6px;height:6px;background:var(--beige);transform:rotate(45deg)}
.vs-compra{border:1px solid var(--l);border-radius:14px;padding:clamp(22px,3vw,36px)}
#hVsPrecio,#hAsPrecio{font-family:var(--display);font-weight:200;color:var(--beige);font-size:clamp(3rem,6vw,4.4rem);letter-spacing:-.04em;line-height:1}
#hVsPrecio small,#hAsPrecio small{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--beige);margin-left:.4rem}

/* Canje de tarjeta regalo: tan, tan, tan… ¡pum! */
.rg-ov{position:fixed;inset:0;z-index:200;background:rgba(22,22,20,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:24px 16px;opacity:0;transition:opacity .35s}
.rg-ov.on{opacity:1}.rg-ov.fuera{opacity:0}
.rg-stage{position:relative;width:220px;height:260px}
.rg-caja{position:absolute;left:50%;bottom:0;width:170px;transform:translateX(-50%);animation:rg-tan .62s ease-in-out 3 .1s;transform-origin:50% 100%}
.rg-cuerpo{position:relative;height:130px;background:var(--beige);border-radius:0 0 10px 10px}
.rg-cinta{position:absolute;left:50%;top:0;bottom:0;width:26px;transform:translateX(-50%);background:var(--tinta)}
.rg-tapa{position:relative;height:42px;margin:0 -10px 4px;background:var(--beige);border-radius:8px;transition:transform .7s cubic-bezier(.2,1.6,.4,1),opacity .7s}
.rg-tapa::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:26px;transform:translateX(-50%);background:var(--tinta)}
.rg-lazo{position:absolute;left:50%;top:-30px;width:70px;height:34px;transform:translateX(-50%)}
.rg-lazo::before,.rg-lazo::after{content:"";position:absolute;top:0;width:32px;height:30px;border:7px solid var(--beige);border-radius:50% 50% 8px 50%}
.rg-lazo::before{left:0;transform:rotate(-20deg)}.rg-lazo::after{right:0;transform:scaleX(-1) rotate(-20deg)}
.rg-importe{position:absolute;left:50%;top:40%;transform:translate(-50%,40px) scale(.4);opacity:0;text-align:center;white-space:nowrap;transition:transform .8s cubic-bezier(.2,1.5,.4,1) .15s,opacity .4s .15s;z-index:2}
.rg-importe b{display:block;font-family:var(--display);font-weight:200;font-size:clamp(3.6rem,14vw,5.4rem);letter-spacing:-.04em;line-height:1;color:var(--beige)}
.rg-importe span{color:var(--blanco)}
.rg-chispas{position:absolute;left:50%;top:45%;width:0;height:0}
.rg-chispas i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--beige);opacity:0}
.rg-pie{text-align:center;opacity:0;transform:translateY(12px);transition:opacity .5s .9s,transform .5s .9s}
.rg-ov.abierto .rg-caja{animation:none}
.rg-ov.abierto .rg-tapa{transform:translateY(-150px) rotate(-28deg);opacity:0}
.rg-ov.abierto .rg-importe{transform:translate(-50%,-110px) scale(1);opacity:1}
.rg-ov.abierto .rg-chispas i{animation:rg-pum calc(var(--d)*1s) ease-out forwards}
.rg-ov.abierto .rg-pie{opacity:1;transform:none}
@keyframes rg-tan{0%,100%{transform:translateX(-50%) rotate(0)}20%{transform:translateX(-50%) rotate(-7deg) scale(1.03)}45%{transform:translateX(-50%) rotate(6deg)}70%{transform:translateX(-50%) rotate(-3deg)}}
@keyframes rg-pum{0%{opacity:1;transform:rotate(var(--a)) translateY(0)}100%{opacity:0;transform:rotate(var(--a)) translateY(-150px)}}
@media(prefers-reduced-motion:reduce){.rg-caja,.rg-tapa,.rg-importe,.rg-pie{animation:none!important;transition:none!important}}

/* vista previa del panel: el texto que se está editando se marca */
.mb-foco{outline:2px dashed var(--beige);outline-offset:6px;border-radius:4px;transition:outline-color .3s}
.mb-vista .toast,.mb-vista #pwaBar{display:none!important}

/* Reservar: selector de servicio */
.serv-op{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.serv-op button{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;text-align:left;padding:14px 16px;border:1px solid var(--l-soft);border-radius:10px;min-height:64px;transition:border-color .25s,background .25s}
.serv-op button b{font-weight:400;font-family:var(--display);font-size:1.1rem;color:var(--blanco)}
.serv-op button small{font-size:.8rem;color:var(--b70);line-height:1.35}
.serv-op button.on{border-color:var(--beige);background:var(--beige-08)}.serv-op button.on b{color:var(--beige)}
.serv-op button:focus-visible{outline:2px solid var(--beige);outline-offset:2px}
@media(max-width:720px){.serv-op{grid-template-columns:1fr}}
.acepto a{color:var(--beige)}

/* Pie centrado con iconos de redes */
footer .cols{text-align:center;justify-items:center}
footer .cols>div{display:flex;flex-direction:column;align-items:center}
footer .legal-links,footer .leyendas,footer .legal{justify-content:center;text-align:center}
footer .redes{display:flex;justify-content:center;gap:14px;margin:28px 0 8px}
footer .redes a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--l);border-radius:50%;color:var(--beige);transition:background .25s,color .25s}
footer .redes a:hover,footer .redes a:focus-visible{background:var(--beige);color:var(--tinta)}
footer .redes svg{width:20px;height:20px}
footer .logo-final{display:flex;justify-content:center;width:100%}footer .logo-final .logo{margin-inline:auto}
@media(max-width:820px){footer .cols{grid-template-columns:1fr}}

/* Cabecera con sesión: nombre, horas y saldo */
.saldo-resumen{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin-top:.6rem;font-size:.8rem;color:var(--beige)}.saldo-resumen span+span::before{content:"·";margin-right:.9rem;color:var(--l)}
.saldo-chip{display:inline-flex;align-items:center;gap:.55rem;padding:.45rem .8rem;border:1px solid var(--l);border-radius:999px;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--b70);white-space:nowrap;min-height:40px}
.saldo-chip b{font-weight:400;color:var(--blanco)}.saldo-chip span{color:var(--beige)}
@media(max-width:520px){.saldo-chip b{display:none}.saldo-chip{padding:.4rem .6rem;gap:.4rem}}

/* Mapa de la portada: se carga al pedirlo */
.mapa{position:relative;width:100%;aspect-ratio:16/9;max-height:520px;border:1px solid var(--l);border-radius:14px;overflow:hidden;background:var(--tinta)}
@media(max-width:620px){.mapa{aspect-ratio:4/5}}
.mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) contrast(.95)}
.mapa-tapa{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;gap:.4rem}
.mapa-tapa p{max-width:460px;color:var(--b70);font-size:.92rem}
.mapa-img{padding:0;justify-content:flex-end}.mapa-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:invert(.92) hue-rotate(180deg) sepia(.15) contrast(.9)}
.mapa-pin{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--beige);box-shadow:0 0 0 6px rgba(217,201,164,.25),0 0 0 14px rgba(217,201,164,.12)}
.mapa-info{position:relative;width:100%;padding:16px;background:linear-gradient(transparent,rgba(22,22,20,.92) 40%);display:flex;flex-direction:column;align-items:center;gap:.5rem}.mapa-info p{color:var(--blanco)}
.mapa-attr{position:absolute;right:8px;bottom:4px;font-size:.6rem;color:var(--b70)}
.mapa.con-google .mapa-tapa{display:none}
.cell .price small.desde{margin:0 .35rem 0 0;font-family:var(--mono);font-size:.3em;letter-spacing:.08em;text-transform:uppercase}
.seg button small{display:block;font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;opacity:.8;margin-top:.1rem}
.seg button{min-height:44px}

/* Fichas técnicas desplegables (Los boxes) */
details.tec{border:1px solid var(--l-soft);border-radius:10px;padding:0 16px}
details.tec summary{cursor:pointer;list-style:none;padding:14px 28px 14px 0;position:relative;font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--beige);min-height:44px}
details.tec summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);transition:transform .3s}
details.tec[open] summary::after{transform:translateY(-50%) rotate(45deg)}
details.tec summary:focus-visible{outline:2px solid var(--beige);outline-offset:4px}
details.tec .list{padding-bottom:12px}
.vs-boxes{border-color:var(--beige)}

/* ---------- Tarifas 2 (15/10/2026): selector de estudio + tabla única de precios ---------- */
.box-sw{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.box-sw button{display:grid;grid-template-columns:1fr auto;grid-template-areas:"n p" "d p";gap:.15rem 1rem;align-items:center;text-align:left;padding:18px 22px;border:1px solid var(--l-soft);border-radius:14px;background:var(--tinta);color:var(--blanco);transition:border-color .35s var(--ease),background .35s var(--ease)}
.box-sw button b{grid-area:n;font-family:var(--display);font-weight:400;font-size:1.25rem;letter-spacing:-.02em}
.box-sw button>small{grid-area:d;color:var(--b70);font-size:.88rem}
.box-sw-p{grid-area:p;font-family:var(--display);font-weight:300;font-size:1.35rem;color:var(--beige);white-space:nowrap}
.box-sw-p small{font-family:var(--mono);font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--b70)}
.box-sw button.on{border-color:var(--beige);background:linear-gradient(180deg,rgba(217,201,164,.10),rgba(217,201,164,.02)),var(--tinta)}
.box-sw button:not(.on):hover{border-color:var(--l)}
.box-sw button:focus-visible{outline:2px solid var(--beige);outline-offset:3px}
@media(max-width:640px){.box-sw{grid-template-columns:1fr}.box-sw button{padding:14px 16px}}

.tp{border:1px solid var(--l-soft);border-radius:14px;overflow:hidden}
.tp-head,.tp-fila{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr) minmax(0,.9fr) minmax(0,1.2fr) minmax(0,1.1fr) auto;gap:1rem;align-items:center;padding:14px 22px}
.tp-head{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--b45);border-bottom:1px solid var(--l-soft)}
.tp-grupo+.tp-grupo{border-top:1px solid var(--l-soft)}
.tp-cab{padding:20px 22px 6px}
.tp-cab h3{font-family:var(--display);font-weight:400;font-size:1.15rem;letter-spacing:-.01em;color:var(--beige)}
.tp-cab p{color:var(--b70);font-size:.9rem;margin-top:.2rem;max-width:62ch}
.tp-fila{border-top:1px solid var(--b08)}
.tp-cab+.tp-fila{border-top:0}
.tp-fila.pop{background:linear-gradient(90deg,rgba(217,201,164,.09),transparent 70%)}
.tp-op{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .6rem}
.tp-op b{font-weight:500;font-size:1.02rem}
.tp-op small{flex-basis:100%;color:var(--b70);font-size:.84rem}
.tp-op .badge{order:2}
.tp-total b{font-family:var(--display);font-weight:300;font-size:1.45rem;letter-spacing:-.03em;color:var(--blanco);font-variant-numeric:tabular-nums}
.tp-hora b{font-weight:400;font-variant-numeric:tabular-nums}
.tp-ahorro{display:flex;flex-direction:column;line-height:1.3}
.tp-ahorro small,.tp-extra{color:var(--b70);font-size:.86rem}
.tp-k{display:none}
.tp-cta .btn{white-space:nowrap}
@media(max-width:900px){
  .tp-head{display:none}
  .tp-fila{grid-template-columns:1fr 1fr;gap:.6rem 1rem;padding:16px 18px}
  .tp-op,.tp-cta{grid-column:1/-1}
  .tp-cta .btn{width:100%;justify-content:center}
  .tp-k{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--b45);margin-bottom:.15rem}
  .tp-cab{padding:18px 18px 4px}
}
.tp-pasos{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:p;padding:0}
.tp-pasos li{counter-increment:p;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"n t" "n d";gap:.15rem .9rem;align-items:start}
.tp-pasos li::before{content:"";grid-area:n;width:10px;height:10px;margin-top:.45rem;border-radius:50%;background:var(--beige)} /* sin números: un punto, como los pasos del inicio */
.tp-pasos b{grid-area:t;font-weight:500}
.tp-pasos span{grid-area:d;color:var(--b70);font-size:.9rem}
@media(max-width:760px){.tp-pasos{grid-template-columns:1fr}}

.serv{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:820px){.serv{grid-template-columns:1fr}}
.serv-card{display:flex;flex-direction:column;gap:.9rem;padding:clamp(22px,2.6vw,32px);border:1px solid var(--l-soft);border-radius:14px;background:var(--tinta)}
.serv-card h3{font-family:var(--display);font-weight:300;font-size:clamp(1.5rem,2.4vw,1.9rem);letter-spacing:-.02em}
.serv-card .row{margin-top:auto}
.serv-nota{font-size:.88rem}
.serv-suma{display:grid;gap:.45rem;border:1px solid var(--l-soft);border-radius:10px;padding:14px 16px}
.serv-suma div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;color:var(--b70)}
.serv-suma b{font-weight:400;color:var(--blanco);font-variant-numeric:tabular-nums}
.serv-suma small{font-family:var(--mono);font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--b45);margin-left:.35rem}
.serv-suma .tot{border-top:1px solid var(--l-soft);padding-top:.55rem;color:var(--blanco)}
.serv-suma .tot b{font-family:var(--display);font-weight:300;font-size:1.5rem;color:var(--beige)}
.enlace{color:var(--beige);text-decoration:underline;text-underline-offset:3px}
.tp-base .tp-hora,.tp-base .tp-ahorro{visibility:hidden}
@media(max-width:900px){.tp-base .tp-hora,.tp-base .tp-ahorro{display:none}}

/* ---------- Boxes 2 (15/10/2026) ---------- */
.bx-elige{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:820px){.bx-elige{grid-template-columns:1fr}}
.bx-card{display:flex;flex-direction:column;border:1px solid var(--l-soft);border-radius:14px;overflow:hidden;background:var(--tinta);color:var(--blanco);text-decoration:none;transition:border-color .4s var(--ease),transform .5s var(--ease)}
.bx-card figure{aspect-ratio:16/10;border-radius:0}
.bx-card-txt{display:flex;flex-direction:column;gap:.8rem;padding:clamp(20px,2.6vw,30px);flex:1}
.bx-card h3{font-family:var(--display);font-weight:300;font-size:clamp(1.8rem,3vw,2.4rem);letter-spacing:-.03em}
.bx-card p{color:var(--b70)}
.bx-precio{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .5rem;margin-top:auto;padding-top:.6rem;border-top:1px solid var(--l-soft)}
.bx-precio b{font-family:var(--display);font-weight:300;font-size:1.9rem;letter-spacing:-.03em;color:var(--beige)}
.bx-precio small{font-family:var(--mono);font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--b70)}
.bx-precio span{flex-basis:100%;color:var(--b70);font-size:.9rem}
.bx-mas{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--beige)}
@media (hover:hover){.bx-card:hover{border-color:var(--l);transform:translateY(-4px)}}
.bx-card:focus-visible{outline:2px solid var(--beige);outline-offset:3px}
.bx-serv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:1100px){.bx-serv{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.bx-serv{grid-template-columns:1fr}}
.bx-serv .serv-card h3{font-size:clamp(1.25rem,1.8vw,1.5rem)}
.bx-serv .plan-price b{font-size:clamp(1.8rem,2.6vw,2.2rem)}

/* ---------- Boxes 3 (15/10/2026): una pestaña por sala ---------- */
.ancla{position:absolute;margin-top:-90px}
.bx-tabs{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--l-soft);border-radius:14px;padding:6px;gap:6px;margin-bottom:clamp(28px,4vw,48px)}
.bx-tabs button{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:16px 12px;border-radius:10px;color:var(--b70);transition:background .35s var(--ease),color .35s var(--ease)}
.bx-tabs button b{font-family:var(--display);font-weight:400;font-size:clamp(1.2rem,2.2vw,1.6rem);letter-spacing:-.02em;color:inherit}
.bx-tabs button small{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase}
.bx-tabs button.on{background:var(--beige);color:var(--tinta)}
.bx-tabs button:not(.on):hover{color:var(--blanco);background:var(--beige-08)}
.bx-tabs button:focus-visible{outline:2px solid var(--beige);outline-offset:2px}
.bx-panel{display:grid;grid-template-columns:1.15fr 1fr;grid-template-areas:"g i" "f f" "x x";gap:clamp(24px,4vw,56px)}
.bx-panel[hidden]{display:none}
.bx-galeria{grid-area:g;display:grid;gap:10px;align-content:start}
.bx-principal{aspect-ratio:4/3;border-radius:14px!important}
.bx-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.bx-mini figure{aspect-ratio:1;border-radius:10px;cursor:zoom-in}
.bx-info{grid-area:i}
.bx-info h2{font-size:clamp(2.2rem,4.2vw,3.4rem)}
.bx-tit{font-family:var(--display);font-weight:300;font-size:clamp(1.2rem,2vw,1.5rem);color:var(--beige);margin-top:.3rem}
.bx-ficha{grid-area:f;border-top:1px solid var(--l-soft);padding-top:clamp(24px,3vw,36px)}
.bx-eq{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 28px}
.bx-eq li{display:flex;flex-direction:column;gap:.25rem}
.bx-eq b{font-weight:500;color:var(--blanco)}
.bx-eq span{color:var(--b70);font-size:.92rem;line-height:1.45}
.bx-nota{margin-top:1.4rem;font-size:.9rem}
.bx-extra{grid-area:x;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:1000px){.bx-eq{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.bx-panel{grid-template-columns:1fr;grid-template-areas:"g" "i" "f" "x"}.bx-extra{grid-template-columns:1fr}}
@media(max-width:520px){.bx-eq{grid-template-columns:1fr}.bx-tabs button{padding:12px 6px}}

/* ---------- Tarifas 3 (15/10/2026): una casilla por sala ---------- */
.tc-dos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,28px);align-items:start}
@media(max-width:860px){.tc-dos{grid-template-columns:1fr}}
.tc{border:1px solid var(--l);border-radius:16px;overflow:hidden;background:var(--tinta)}
.tc figure{aspect-ratio:16/9;border-radius:0}
.tc-cuerpo{display:flex;flex-direction:column;padding:clamp(22px,2.8vw,34px)}
.tc h3{font-family:var(--display);font-weight:300;font-size:clamp(2rem,3.4vw,2.8rem);letter-spacing:-.03em;margin-top:.3rem}
.tc-desc{color:var(--b70);margin-top:.35rem}
.tc-hora{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-top:1.4rem}
.tc-hora b{font-family:var(--display);font-weight:200;font-size:clamp(2.8rem,4.6vw,3.6rem);letter-spacing:-.04em;line-height:1;color:var(--beige)}
.tc-hora small{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--b70)}
.tc-cta{margin-top:1.2rem;width:100%;justify-content:center}
.tc-sub{color:var(--b45);font-size:.85rem;margin-top:.6rem;text-align:center}
.tc-grupo{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:1.8rem 0 .4rem;padding-bottom:.5rem;border-bottom:1px solid var(--l-soft)}
.tc-grupo small{color:var(--b45);font-size:.82rem}
.tc-fila{display:grid;grid-template-columns:1fr auto 1.4rem;align-items:center;gap:1rem;width:100%;text-align:left;padding:.85rem .6rem;border-bottom:1px solid var(--b08);color:var(--blanco);border-radius:8px;transition:background .3s var(--ease)}
.tc-fila:hover{background:var(--beige-08)}
.tc-fila:focus-visible{outline:2px solid var(--beige);outline-offset:1px}
.tc-n{display:flex;flex-direction:column}
.tc-n b{font-weight:500}
.tc-n small{color:var(--b70);font-size:.82rem}
.tc-fila.pop .tc-n small{color:var(--beige)}
.tc-p{display:flex;flex-direction:column;align-items:flex-end}
.tc-p b{font-family:var(--display);font-weight:300;font-size:1.3rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tc-p small{color:var(--b45);font-size:.8rem;font-variant-numeric:tabular-nums}
.tc-go{color:var(--beige);opacity:.5;transition:opacity .3s,transform .3s var(--ease)}
@media (hover:hover) and (pointer:fine){.tc-fila:hover .tc-go{opacity:1;transform:translateX(3px)}}

/* Cabecera mínima (Tarifas y Boxes): solo el disco animado; el contenido empieza enseguida */
.hero-min{padding:clamp(28px,4vw,52px) 0 0}
.hero-min .disc{width:min(210px,48vw)}
.hero-min+section{padding-top:clamp(28px,4vw,52px)}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hero-min,.hero-min+section{border-top:0;border-bottom:0}

/* Título arriba y disco animado a la derecha, a la misma altura (Tarifas y Boxes) */
main>section:first-child{padding-top:clamp(28px,4vw,56px)}
.tit-disco{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:clamp(16px,4vw,56px);margin-bottom:clamp(28px,4vw,52px)}
.tit-disco .sec-head{margin-bottom:0}
.tit-disco .disc{width:clamp(110px,18vw,230px)}
@media(max-width:700px){.tit-disco .sec-head{grid-template-columns:1fr}.tit-disco .sec-head p{grid-column:1}}

/* ---------- Tarifas 4 (15/10/2026): tres formas de venir ---------- */
.fv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
@media(max-width:900px){.fv{grid-template-columns:1fr}}
.fv-c{display:flex;flex-direction:column;gap:.8rem;padding:clamp(22px,2.6vw,32px);border:1px solid var(--l-soft);border-radius:16px;background:var(--tinta);transition:border-color .35s var(--ease)}
.fv-c.pop{border-color:var(--beige);background:linear-gradient(180deg,rgba(217,201,164,.10),rgba(217,201,164,.02) 60%,transparent),var(--tinta)}
.fv-c.abierto{border-color:var(--beige)}
.fv-p{display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;margin-top:.4rem}
.fv-p b{font-family:var(--display);font-weight:200;font-size:clamp(2.6rem,4vw,3.4rem);letter-spacing:-.04em;line-height:1;color:var(--beige);font-variant-numeric:tabular-nums}
.fv-p small{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--b70)}
.fv-ahorro{align-self:flex-start;font-family:var(--mono);font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta);background:var(--beige);border-radius:999px;padding:.3rem .7rem}
.fv-ahorro.neutro{background:transparent;color:var(--b70);border:1px solid var(--l);}
.fv-nota{color:var(--b70);font-size:.95rem;margin-bottom:.4rem}
.fv-c .btn{margin-top:auto;width:100%;justify-content:center}
.fv-det{margin-top:16px;border:1px solid var(--beige);border-radius:16px;padding:clamp(20px,2.6vw,32px);background:var(--tinta);animation:fadein .4s var(--ease)}
.fv-det[hidden]{display:none}
.fv-dh h3{font-family:var(--display);font-weight:300;font-size:clamp(1.4rem,2.2vw,1.8rem);letter-spacing:-.02em}
.fv-dh p{color:var(--b70);font-size:.92rem;margin:.3rem 0 1rem}
.fv-ref,.fv-f{display:grid;grid-template-columns:minmax(110px,1.1fr) minmax(0,2fr) minmax(120px,auto) 1.4rem;align-items:center;gap:1rem}
.fv-ref{padding:.5rem .6rem;color:var(--b45);font-size:.85rem}
.fv-ref span:last-child{grid-column:3/5;text-align:right;font-variant-numeric:tabular-nums}
.fv-ref .fv-barra i{background:var(--b20)}
.fv-f{width:100%;text-align:left;padding:.85rem .6rem;border-top:1px solid var(--b08);border-radius:8px;color:var(--blanco);transition:background .3s var(--ease)}
.fv-f:hover{background:var(--beige-08)}
.fv-f:focus-visible{outline:2px solid var(--beige);outline-offset:1px}
.fv-f.pop .fv-fn small{color:var(--beige)}
.fv-fn{display:flex;flex-direction:column}
.fv-fn b{font-weight:500;font-size:1.05rem}
.fv-fn small{color:var(--b70);font-size:.82rem}
.fv-barra{display:block;height:8px;border-radius:99px;background:var(--b08);overflow:hidden}
.fv-barra i{display:block;height:100%;border-radius:99px;background:var(--beige);transition:width .6s var(--ease)}
.fv-fp{display:flex;flex-direction:column;align-items:flex-end}
.fv-fp b{font-family:var(--display);font-weight:300;font-size:1.25rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fv-fp small{color:var(--b45);font-size:.8rem;font-variant-numeric:tabular-nums}
.fv-fp em{font-style:normal;color:var(--beige)}
@media (hover:hover) and (pointer:fine){.fv-f:hover .tc-go{opacity:1;transform:translateX(3px)}}
@media(max-width:620px){
  .fv-ref,.fv-f{grid-template-columns:1fr auto;grid-template-areas:"n p" "b b";gap:.5rem 1rem}
  .fv-fn{grid-area:n}.fv-fp{grid-area:p}.fv-f .fv-barra{grid-area:b}.fv-f .tc-go{display:none}
  .fv-ref{grid-template-areas:"n p" "b b"}.fv-ref span:first-child{grid-area:n}.fv-ref span:last-child{grid-area:p;grid-column:auto}.fv-ref .fv-barra{grid-area:b}
}

/* Cabecera de las demás páginas (15/10/2026): título arriba y disco animado a la derecha, a la misma altura */
.cabecera{padding-top:clamp(28px,4vw,56px)!important}
.cabecera>.wrap{position:relative}
.cabecera>.wrap>.disc{position:absolute;top:0;right:0;width:clamp(96px,16vw,220px);margin:0}
.cabecera>.wrap>.disc~.lbl,.cabecera>.wrap>.disc~h1,.cabecera>.wrap>.disc~.lead,.cabecera #anon>.lbl,.cabecera #anon>h1,.cabecera #acct>.bar{padding-right:calc(clamp(96px,16vw,220px) + 20px)}
@media(max-width:600px){.cabecera>.wrap>.disc~.lead{padding-right:0}}

/* ---------- Membresía 2 (15/10/2026) ---------- */
.mem-cab h1{font-size:clamp(2.6rem,6vw,5rem);max-width:14ch}
.mem-cab .lead{max-width:56ch}
.mem-plazas{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.mem-plazas p{color:var(--beige);margin:0}
.mem-precio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px);align-items:center;border:1px solid var(--beige);border-radius:18px;padding:clamp(24px,4vw,52px);background:linear-gradient(135deg,rgba(217,201,164,.12),rgba(217,201,164,.02) 55%,transparent),var(--tinta)}
@media(max-width:860px){.mem-precio{grid-template-columns:1fr}}
.mem-cifra{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin:.6rem 0}
.mem-cifra b{font-family:var(--display);font-weight:200;font-size:clamp(3.6rem,8vw,6.4rem);letter-spacing:-.04em;line-height:.9;color:var(--beige)}
.mem-cifra small{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--b70)}
.mem-incluye{color:var(--b70);font-size:1.05rem;max-width:34ch}
.mem-compara{display:grid;gap:.9rem}
.mc-f{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.5fr) auto;align-items:center;gap:1rem;color:var(--b70);font-size:.92rem}
.mc-f b{font-family:var(--display);font-weight:300;font-size:1.3rem;color:var(--blanco);font-variant-numeric:tabular-nums;white-space:nowrap}
.mc-f b small{font-size:.8125rem;color:var(--b45);margin-left:.15rem}
.mc-f .fv-barra{height:10px}
.mc-f:not(.on) .fv-barra i{background:var(--b20)}
.mc-f.on{color:var(--blanco)}.mc-f.on b{color:var(--beige);font-size:1.6rem}
.mc-ahorro{margin-top:.4rem;color:var(--b70);font-size:.95rem}
.mc-ahorro b{color:var(--beige)}
@media(max-width:560px){.mc-f{grid-template-columns:1fr auto;grid-template-areas:"n p" "b b";gap:.4rem 1rem}.mc-f>span:first-child{grid-area:n}.mc-f .fv-barra{grid-area:b}.mc-f b{grid-area:p}}
.mem-ben{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:1000px){.mem-ben{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.mem-ben{grid-template-columns:1fr}}
.mb-c{display:flex;flex-direction:column;gap:.5rem;padding:clamp(22px,2.6vw,32px);border:1px solid var(--l-soft);border-radius:16px;background:var(--tinta);transition:border-color .4s var(--ease),transform .5s var(--ease)}
@media (hover:hover){.mb-c:hover{border-color:var(--beige);transform:translateY(-4px)}}
.mb-n{font-family:var(--display);font-weight:200;font-size:clamp(2.4rem,4vw,3.2rem);letter-spacing:-.04em;line-height:1;color:var(--beige)}
.mb-c p{color:var(--b70);font-size:.95rem;margin-top:.3rem}
/* Agenda del panel: videoset y grabación asistida se ven distintos */
.ev.vs{background:#B23A3A;color:#FBFAF6;border:0}
.ev.as{box-shadow:inset 3px 0 0 #6FA8DC}

/* Dónde estamos: mapa con marcas exactas (scripts/mapa.mjs) + ficha + parkings */
.ubica{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;align-items:start}
@media(max-width:900px){.ubica{grid-template-columns:1fr}}
.mapa2{position:relative;aspect-ratio:4/3;border:1px solid var(--l);border-radius:14px;overflow:hidden;background:var(--tinta)}
.mapa2 img{position:absolute;inset:0;width:100%;height:100%;filter:invert(.92) hue-rotate(180deg) sepia(.15) contrast(.9) brightness(.95)}
.mk{position:absolute;transform:translate(-50%,-50%);font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;line-height:1;text-decoration:none;z-index:1}
.mk-p{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#2f6fd6;color:#fff;font-weight:700;box-shadow:0 2px 10px rgba(0,0,0,.45);transition:transform .2s}
@media (hover:hover) and (pointer:fine){.mk-p:hover,.mk-p:focus-visible{transform:translate(-50%,-50%) scale(1.15)}}
.mk-bus{padding:5px 7px;border-radius:6px;background:var(--blanco);color:var(--tinta);font-weight:700;box-shadow:0 2px 10px rgba(0,0,0,.45)}
.mk-mb{display:flex;align-items:center;gap:8px;transform:translate(-11px,-50%);z-index:2}
.mk-mb i{position:relative;width:22px;height:22px;flex:none;border-radius:50%;background:var(--beige);border:3px solid var(--tinta)}
.mk-mb i::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid var(--beige);animation:mbOnda 2s ease-out infinite}
.mk-mb b{padding:7px 10px;border-radius:999px;background:var(--beige);color:var(--tinta);font-size:.78rem;white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.5)}
@keyframes mbOnda{from{transform:scale(.6);opacity:.9}to{transform:scale(1.8);opacity:0}}
@media(prefers-reduced-motion:reduce){.mk-mb i::after{animation:none}}
@media(max-width:520px){.mk-p{width:24px;height:24px;font-size:.6rem}.mk-mb b{font-size:.68rem;padding:5px 8px}.mk-bus{font-size:.56rem;padding:4px 5px}}
.mapa2 .mapa-attr{position:absolute;left:8px;bottom:4px;font-size:.6rem;color:var(--b70)}
.ubica-info{display:flex;flex-direction:column;gap:14px}
.ubica-dir,.ubica-pk{border:1px solid var(--l);border-radius:14px;padding:18px;background:var(--beige-08)}
.ubica-calle{font-family:var(--display);font-size:1.7rem;line-height:1.05;color:var(--beige);margin:.5rem 0 .7rem}
.ubica-calle span{display:block;font-family:var(--sans);font-size:.9rem;color:var(--b70);margin-top:.35rem}
.ubica-ref{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.35rem;font-size:.9rem}
.ubica-ref li::before{content:"→ ";color:var(--beige)}
.ubica-pk ol{list-style:none;padding:0;margin:.6rem 0;display:grid;gap:6px}
.ubica-pk a{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;padding:8px;border-radius:10px;color:var(--blanco);text-decoration:none;transition:background .2s}
.ubica-pk a:hover,.ubica-pk li:target a{background:var(--beige-08)}
.ubica-pk b{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;background:#2f6fd6;color:#fff;font-family:var(--mono);font-size:.68rem}
.ubica-pk em{font-style:normal;font-family:var(--mono);font-size:.7rem;color:var(--beige);white-space:nowrap}
.ubica-nota{color:var(--b70);font-size:.72rem}

/* Cierre de la portada: «Ya estamos abiertos» con estado en vivo */
.abiertos-caja{position:relative;display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:center;padding:clamp(24px,5vw,56px);border:1px solid var(--l);border-radius:20px;overflow:hidden;background:radial-gradient(120% 140% at 100% 0%,rgba(217,201,164,.16),transparent 60%),var(--tinta)}
@media(max-width:820px){.abiertos-caja{grid-template-columns:1fr}}
.abiertos-tit{font-size:clamp(2.6rem,7vw,5.2rem);margin:.4rem 0 .8rem}
.abiertos-vivo{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--l);border-radius:999px;font-family:var(--mono);font-size:.8125rem;letter-spacing:.04em;color:var(--blanco)}
.abiertos-vivo i{width:9px;height:9px;border-radius:50%;background:var(--b70)}
.abiertos-vivo.on i{background:#4cd27a;box-shadow:0 0 0 0 rgba(76,210,122,.6);animation:latido 1.8s infinite}
@keyframes latido{70%{box-shadow:0 0 0 9px rgba(76,210,122,0)}100%{box-shadow:0 0 0 0 rgba(76,210,122,0)}}
@media(prefers-reduced-motion:reduce){.abiertos-vivo.on i{animation:none}}
.abiertos-pasos{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;counter-reset:none}
@media(max-width:520px){.abiertos-pasos{grid-template-columns:1fr}}
.abiertos-pasos li{display:flex;flex-direction:column;gap:.35rem;padding:12px 14px;border:1px solid var(--l-soft);border-radius:12px;font-size:.9rem}
.abiertos-pasos b{font-family:var(--mono);font-size:.8125rem;color:var(--beige)}
.abiertos-cifra{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3rem}
.abiertos-cifra b{font-family:var(--display);font-weight:200;font-size:clamp(5rem,16vw,11rem);line-height:.85;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px var(--beige)}
.abiertos-cifra span{color:var(--beige);font-size:1rem}.abiertos-cifra .mono{font-size:.75rem;color:var(--b70);letter-spacing:.1em}
@media(max-width:820px){.abiertos-cifra{flex-direction:row;justify-content:flex-start;gap:14px;text-align:left}.abiertos-cifra b{font-size:4.2rem}}
.abiertos-txt{text-align:left;display:flex;flex-direction:column;align-items:flex-start}
.abiertos-txt .lbl{display:block}
.mapa2 .mapa-attr{right:auto}
.abiertos-pasos{align-self:stretch}
.pk-tag{display:inline-block;margin-left:4px;padding:2px 6px;border-radius:5px;font-style:normal;font-family:var(--mono);font-size:.8125rem;letter-spacing:.04em;vertical-align:middle}
.pk-tag.pago{background:rgba(217,201,164,.18);color:var(--beige)}.pk-tag.gratis{background:rgba(76,210,122,.16);color:#7fe0a2}
.mk-p.de-pago,.ubica-pk b.de-pago{background:#d6862f}

/* Cuenta: rectángulo de saldo bajo Reservar/Salir */
.saldo-caja{border:1px solid var(--l);border-radius:16px;padding:16px 18px;background:var(--beige-08)}
.saldo-cs{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:.7rem}
.saldo-c{display:flex;flex-direction:column;gap:.25rem;padding:12px 14px;border:1px solid var(--l-soft);border-radius:12px;background:var(--tinta);color:var(--blanco);text-decoration:none;transition:border-color .2s}
.saldo-c:hover{border-color:var(--beige)}
.saldo-c b{font-family:var(--display);font-weight:300;font-size:1.9rem;line-height:1;letter-spacing:-.03em;color:var(--beige)}
.saldo-c span{font-family:var(--mono);font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--b70)}
.saldo-c.vacio b{color:var(--b45)}
.saldo-mas{display:inline-block;margin-top:.8rem;font-size:.85rem;color:var(--beige)}
@media(max-width:520px){.saldo-cs{grid-template-columns:1fr 1fr}.saldo-c b{font-size:1.6rem}}

/* Ventana de acceso: un formulario y abajo el cambio registro / entrar */
.auth-caja{transition:opacity .18s ease,transform .18s ease}
.auth-caja.fuera{opacity:0;transform:translateY(6px)}
.auth-sw{margin:1.4rem 0 0;padding-top:1.1rem;border-top:1px solid var(--l-soft);text-align:center;color:var(--b70);font-size:.92rem}
.auth-sw button{background:none;border:0;padding:0 0 1px;margin-left:.25rem;color:var(--beige);font:inherit;cursor:pointer;border-bottom:1px solid var(--beige)}
.auth-sw button:hover{opacity:.8}
/* Membresía: contador de plazas legible en móvil */
.mem-plazas .seats{flex:1 1 240px;width:100%;min-width:200px}

/* Cuenta: aviso de identidad que se va solo */
.aviso-ok{position:relative;padding-right:44px;transition:opacity .4s,transform .4s}
.aviso-ok.fuera{opacity:0;transform:translateY(-6px)}
.aviso-x{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--beige);font-size:1.3rem;cursor:pointer;line-height:1}
/* Cuenta: tarjetas de reserva */
#next{gap:12px!important}
.resv{display:grid;grid-template-columns:auto 1fr auto auto;gap:18px;align-items:center;padding:16px 18px;border:1px solid var(--l);border-radius:16px;background:linear-gradient(135deg,rgba(217,201,164,.07),transparent 60%),var(--tinta)}
.resv-fecha{display:flex;flex-direction:column;align-items:center;justify-content:center;width:68px;height:76px;border-radius:12px;background:var(--beige);color:var(--tinta);line-height:1}
.resv-fecha b{font-family:var(--display);font-weight:300;font-size:2rem;letter-spacing:-.04em;margin:.12rem 0}
.resv-fecha span{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase}
.resv-info h3{font-size:1.5rem;margin:.25rem 0 .1rem}
.resv-info p{margin:0;font-size:.92rem}
.resv-estado{display:inline-flex;align-items:center;gap:6px;margin-top:.5rem;font-size:.8125rem;color:var(--b70)}
.resv-estado::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--b45)}
.resv-estado.ok::before{background:#4cd27a}.resv-estado.medio::before{background:#e0a84a}.resv-estado.no::before{background:#d66a5a}
.resv-codigo{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:.2rem;max-width:230px}
.resv-codigo .pin{font-size:1.8rem;letter-spacing:.22em;line-height:1.1}
.resv-codigo small{font-size:.8125rem;color:var(--b70)}
.resv-acc{display:flex;flex-direction:column;gap:6px}
.resv-vacio{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:18px;border:1px dashed var(--l);border-radius:16px}
.resv-vacio p{margin:0}
@media(max-width:760px){
  .resv{grid-template-columns:auto 1fr;gap:12px 14px;padding:14px}
  .resv-codigo{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:space-between;max-width:none;text-align:left;padding:12px 14px;border-radius:12px;background:var(--beige-08)}
  .resv-codigo .lbl{width:100%}
  .resv-acc{grid-column:1/-1;flex-direction:row}
  .resv-acc .btn{flex:1;justify-content:center}
  .resv-fecha{width:58px;height:66px}.resv-fecha b{font-size:1.7rem}
  .resv-info h3{font-size:1.3rem}
}
/* ventana de acceso: los campos no se salen por la derecha en móvil */
#mbModal .sheet input,#mbModal .sheet select{max-width:100%;box-sizing:border-box}
#mbModal .form{min-width:0}#mbModal .form .f{min-width:0}
/* Membresía: el disco va en la misma fila que «Tu estudio, todo el mes.», centrado con el título */
.mem-tit{display:flex;align-items:center;gap:clamp(14px,3vw,36px)}
.mem-tit h1{margin:0;flex:0 1 auto}
.mem-tit .disc{position:static;flex:0 0 auto;width:clamp(96px,17vw,220px);margin:0}
/* Barra fija en móvil: fondo sólido y tapa la zona de la hora/batería (nada se ve pasar por detrás) */
.nav{top:0;background:var(--tinta);padding-top:env(safe-area-inset-top)}
html{background:var(--tinta)}

/* Cabeceras: etiqueta y título a la izquierda, disco a la derecha centrado con ellos; el resto debajo con aire */
.cab-fila{display:flex;align-items:center;justify-content:space-between;gap:clamp(14px,3vw,36px)}
.cab-fila>div{min-width:0}
.cab-fila .disc{position:static;flex:0 0 auto;width:clamp(96px,17vw,220px);margin:0}
.cab-fila h1{padding-right:0}
.cabecera .cab-fila+.lead,.cabecera .mem-tit+.lead{margin-top:clamp(14px,2vw,22px)}

/* ---------- Reservar: ventana de reserva (pasos a la izquierda, resumen fijo a la derecha) ---------- */
.rsv{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
.rsv-pasos{display:grid;gap:14px;min-width:0}
.rsv-paso{padding:22px 24px;border:1px solid var(--l-soft);border-radius:18px;background:linear-gradient(160deg,rgba(217,201,164,.05),transparent 55%),var(--tinta);min-width:0}
.rsv-cab{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.rsv-cab b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--beige);font-family:var(--mono);font-size:.8125rem;font-weight:400;color:var(--beige)}
.rsv-cab span{font-family:var(--display);font-weight:300;font-size:1.25rem;letter-spacing:-.02em;color:var(--blanco)}
.rsv-box{margin-bottom:0;padding-top:16px;border-top:1px solid var(--b08)}
.rsv-resumen{position:sticky;top:96px;display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid var(--beige);border-radius:20px;background:radial-gradient(120% 90% at 100% 0%,rgba(217,201,164,.12),transparent 60%),var(--tinta);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.rsv-resumen .sum{margin:.2rem 0}
.rsv-resumen .sum div:last-child{font-weight:400}
.rsv-resumen .sum .sum-total{padding-top:.9rem;align-items:baseline}
.rsv-resumen .sum .sum-total>span:last-child{font-family:var(--display);font-weight:300;font-size:1.9rem;letter-spacing:-.03em;color:var(--beige)}
.rsv-resumen #go{width:100%;justify-content:center}
.rsv-pol{margin:0;font-size:.8rem;line-height:1.5;color:var(--b70)}
.rsv-seguro{margin:0;font-size:.8125rem;color:var(--b45);text-align:center}
.rsv-quien{margin:0;font-size:.88rem;color:var(--b70)}.rsv-quien b{color:var(--beige);font-weight:400}
.rsv .days button{border-radius:12px;min-width:66px}
.rsv .slots{gap:8px}
.rsv-barra{display:none}
@media(max-width:980px){
  .rsv{grid-template-columns:1fr}
  .rsv-resumen{position:static;box-shadow:none}
  .rsv-barra{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:50;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 18px;border:1px solid var(--beige);border-radius:999px;background:rgba(22,22,20,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.5);transition:transform .35s var(--ease,ease),opacity .35s}
  .rsv-barra small{display:block;font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--b70)}
  .rsv-barra b{font-family:var(--display);font-weight:300;font-size:1.1rem;color:var(--beige)}
  .rsv-barra.oculta{transform:translateY(140%);opacity:0;pointer-events:none}
}
@media(max-width:600px){.rsv-paso{padding:18px 16px}.rsv-resumen{padding:20px 18px}}

/* Reservar: «Estudio» encima del selector y selector a todo el ancho; precio debajo */
.rsv-box{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.rsv-box>div{display:flex;flex-direction:column;gap:10px;width:100%}
.rsv-box .toggle{display:grid;grid-template-columns:1fr 1fr;width:100%;margin:0}
.rsv-box .toggle button{justify-content:center;text-align:center}
.rsv-box #priceLbl{margin:0}
/* Reservar: botón «Otra fecha» con calendario */

/* ---------- Reservar como asistente: una ventana por paso ---------- */
.rsv.asis{grid-template-columns:minmax(0,1fr);max-width:780px;margin-inline:auto}
.rsv.asis[data-paso="3"]{grid-template-columns:minmax(0,1fr) 360px;max-width:1140px}
.rsv.asis .rsv-prog{grid-column:1/-1;display:flex;flex-direction:column;gap:10px}
.rsv-prog-barra{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.rsv-prog-barra i{height:3px;border-radius:3px;background:var(--b20);transition:background .4s}
.rsv-prog-barra i.on{background:var(--beige)}
.rsv.asis .rsv-paso{display:none}
.rsv.asis .rsv-paso.activo{display:block;animation:pasoEntra .5s var(--ease,cubic-bezier(.2,.7,.2,1)) both}
.rsv.asis .rsv-paso.activo.atras{animation-name:pasoVuelve}
@keyframes pasoEntra{from{opacity:0;transform:translateX(32px)}to{opacity:1;transform:none}}
@keyframes pasoVuelve{from{opacity:0;transform:translateX(-32px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.rsv.asis .rsv-paso.activo{animation:none}}
.rsv.asis .rsv-resumen{display:none}
.rsv.asis[data-paso="3"] .rsv-resumen{display:flex;animation:pasoEntra .5s .08s var(--ease,cubic-bezier(.2,.7,.2,1)) both}
.rsv-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--b08)}
.rsv-nav .btn[disabled]{opacity:.45;cursor:not-allowed}
.rsv-dur{margin-top:18px;max-width:280px}
.rsv.asis[data-paso="3"]~.rsv-barra{display:none}
@media(max-width:980px){.rsv.asis[data-paso="3"]{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.rsv-nav .btn{flex:1;justify-content:center}.rsv-nav>span:empty{display:none}}
/* Barra en móvil: «Entrar» al lado de «Registrarse», todo compacto para que quepa */
@media (max-width:480px){
  .nav-r [data-auth="entrar"]{display:inline-flex}
  .nav .wrap{gap:.5rem}
  .nav-r{gap:.35rem}
  .nav-r .btn-sm{padding:.55rem .7rem;font-size:.8125rem;letter-spacing:.06em}
  .nav-r .lang{min-width:32px;padding:0 .3rem}
  .nav-r .burger{width:36px;height:36px}
  #links .solo-s[data-auth="entrar"]{display:none}
}
@media (max-width:360px){.brand .nombre{transform:scale(.88);transform-origin:left center}}
/* el idioma va siempre en la barra (también en móvil); el menú lleva solo las páginas */
@media (max-width:360px){
  .brand .nombre{transform:scale(.8)}
  .nav-r .btn-sm{padding:.5rem .55rem;font-size:.56rem;letter-spacing:.04em}
  .nav-r .burger{width:32px;height:32px}
}
/* «Entrar» del menú móvil: es una acción (abre la ventana de acceso), no un enlace. Botón con el mismo aspecto que los
   enlaces del menú: así el navegador no enseña «…/#» abajo a la izquierda al pasar por encima */
.links .link-boton{position:relative;color:var(--b70);transition:color .3s;background:none;border:0;padding:0;cursor:pointer;text-align:left;min-height:44px;align-items:center;white-space:nowrap}
.links .link-boton:hover{color:var(--beige)}
@media(max-width:1240px){.links .link-boton{display:flex;padding:.8rem 0;width:100%;border-bottom:1px solid var(--b08)}}
/* Banner (20/10/2026): franja de aviso debajo del menú. El menú queda fijo arriba (con el margen de la muesca del
   iPhone siempre igual: sin saltos) y el banner se va al bajar. En el móvil, compacto (antes 2 líneas grandes). */
.banner{position:relative;z-index:1;line-height:1.45;padding:.5rem 16px;border-bottom:1px solid rgba(22,22,20,.12)}
@media(max-width:640px){.banner{font-size:.8125rem;letter-spacing:.035em;padding:.42rem 14px}}

/* Reservar · elegir estudio con foto y precio por hora a la vista (20/10/2026) */
.box-fotos,.rsv-box>.box-fotos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.box-fotos button{display:grid;grid-template-columns:1fr;grid-template-areas:"f" "t" "p";gap:.55rem;align-items:start;text-align:left;padding:10px 10px 14px;border:1px solid var(--l-soft);border-radius:12px;background:var(--tinta);transition:border-color .25s,background .25s;min-width:0}
.box-fotos button:hover{border-color:var(--l)}
.box-fotos button.on{border-color:var(--beige);background:linear-gradient(180deg,rgba(217,201,164,.10),rgba(217,201,164,.02)),var(--tinta)}
.box-fotos button:focus-visible{outline:2px solid var(--beige);outline-offset:3px}
.box-fotos figure{grid-area:f;margin:0;border-radius:8px;overflow:hidden;aspect-ratio:16/10;background:var(--b08)}
.box-fotos figure img{width:100%;height:100%;object-fit:cover;display:block}
.box-fotos .bf-txt{grid-area:t;display:grid;gap:.15rem;padding-left:4px;min-width:0}
.box-fotos .bf-txt b{font-weight:400;font-size:1.05rem;color:var(--blanco)}
.box-fotos .bf-txt small{color:var(--b70);font-size:.82rem}
.box-fotos .bf-precio{grid-area:p;display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .7rem;padding:0 4px}
.box-fotos .bf-precio b{font-family:var(--display);font-weight:300;font-size:1.6rem;letter-spacing:-.03em;color:var(--beige);line-height:1}
.box-fotos .bf-precio b small{font-family:var(--mono);font-size:.8125rem;letter-spacing:.04em;color:var(--b70);margin-left:2px}
.box-fotos .bf-precio span{font-family:var(--mono);font-size:.8125rem;letter-spacing:.05em;text-transform:uppercase;color:var(--b45)}
@media(max-width:640px){.box-fotos,.rsv-box>.box-fotos{grid-template-columns:1fr}.box-fotos button{grid-template-columns:118px 1fr;grid-template-areas:"f t" "f p";align-items:center;gap:.35rem .8rem;padding:8px}.box-fotos figure{aspect-ratio:4/3}.box-fotos .bf-precio b{font-size:1.35rem}}

/* Reservar · calendario del mes (sustituye a la tira de días) */
.days.cal{display:block;overflow:visible;padding:0;max-width:440px}
.cal-cab{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.6rem}
.cal-cab b{font-weight:400;color:var(--blanco)}
.days.cal .cal-nav{min-width:44px;width:44px;height:44px;border-radius:50%;font-size:1.3rem;line-height:1;padding:0;color:var(--beige)}
.days.cal .cal-nav:disabled{opacity:.3;cursor:not-allowed}
.cal-sem,.cal-dias{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-sem span{text-align:center;font-family:var(--mono);font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--b45);padding:.2rem 0}
.days.cal .cal-dias button{min-width:0;height:44px;padding:0;border-radius:8px;font-family:var(--mono);font-size:.85rem;color:var(--blanco);border:1px solid var(--l-soft)}
.days.cal .cal-dias button:hover:not(:disabled){border-color:var(--beige)}
.days.cal .cal-dias button.hoy{border-color:var(--l)}
.days.cal .cal-dias button.hoy::after{content:"";display:block;width:4px;height:4px;border-radius:50%;background:var(--beige);margin:2px auto 0}
.days.cal .cal-dias button.on{background:var(--beige);color:var(--tinta);border-color:var(--beige)}
.days.cal .cal-dias button:disabled{color:var(--b20);border-color:transparent;cursor:not-allowed}
.cal-rapido{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}
.days.cal .cal-rapido button{min-width:0;padding:.45rem .9rem;border-radius:999px;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase}
.days.cal .cal-rapido button.on{border-color:var(--beige);background:var(--beige-08);color:var(--beige)}
.cal-rapido .muted{font-size:.85rem}

/* Reservar · recomendación de packs (discreta, solo si sale a cuenta) */
.rsv-sugerencia{margin-top:.6rem;padding:.7rem .85rem;border:1px dashed var(--l);border-radius:8px;font-size:.86rem;color:var(--b70);line-height:1.5}
.rsv-sugerencia b{color:var(--beige);font-weight:400}
.rsv-sugerencia a{color:var(--beige);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* verificación desde el ordenador: QR para hacerla con el móvil */
.verif-qr{display:grid;grid-template-columns:1fr auto;gap:clamp(20px,3vw,40px);align-items:center}
.vq-pasos{margin:0;padding-left:1.2em;display:grid;gap:.45rem;color:var(--b70)}
.vq-pasos li::marker{color:var(--beige);font-family:var(--mono)}
.vq-estado{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--beige)}
.vq-codigo{width:clamp(180px,20vw,230px);aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--blanco);display:grid;place-items:center}
.vq-codigo:empty{background:linear-gradient(90deg,rgba(251,250,246,.06),rgba(251,250,246,.14),rgba(251,250,246,.06));background-size:200% 100%;animation:vqCarga 1.2s linear infinite}
.vq-codigo svg{width:100%;height:100%;display:block}
@keyframes vqCarga{to{background-position:-200% 0}}
@media (max-width:899px){.verif-qr{grid-template-columns:1fr}}
.rsv-extras{justify-self:start;margin-top:.2rem;font-size:.86rem;color:var(--beige);text-decoration:underline;text-underline-offset:3px;text-align:left}
.rsv-sugerencia .link-boton{color:var(--beige);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;font-size:inherit}
.rsv-solicitud{margin-top:.6rem;padding:.8rem .9rem;border:1px dashed var(--beige);border-radius:8px;display:grid;gap:.6rem;font-size:.9rem;color:var(--b70)}
.rsv-solicitud .btn{justify-self:start}
/* Membresía: barra fija en el móvil para contratar sin bajar (aparece tras la cabecera) */
.mem-barra{display:none}
@media (max-width:760px){
  .mem-barra{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:70;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 18px;border:1px solid var(--beige);border-radius:999px;background:rgba(22,22,20,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.5);transform:translateY(140%);opacity:0;pointer-events:none;transition:transform .35s var(--ease,ease),opacity .35s}
  .mem-barra.ver{transform:none;opacity:1;pointer-events:auto}
  .mem-barra small{display:block;font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--b70)}
  .mem-barra b{font-family:var(--display);font-weight:300;font-size:1.1rem;color:var(--beige)}
}

/* =========================================================
   PANTALLAS COMPLETAS (23/10/2026): cada sección principal ocupa al menos la pantalla útil (bajo el menú) y centra su
   contenido; si tiene más, crece. svh: la altura con las barras del móvil visibles, así no salta al aparecer o esconderse.
   ========================================================= */
/* solo la portada (primera sección, la que se queda fija y la siguiente tapa) ocupa la pantalla entera; el resto mide
   lo que su contenido, sin huecos vacíos (24/10/2026: en Nosotros e Inicio quedaban media pantalla en blanco) */
main[data-apilar]>:is(section,header):first-child:not([data-noapilar]):not(:has(.legal-doc)){min-height:calc(100vh - var(--nav-h,64px));min-height:calc(100svh - var(--nav-h,64px));display:grid;align-content:center;box-sizing:border-box}
main[data-apilar]>:is(section,header)>*{min-width:0}
/* en pantallas de ordenador y tablet horizontal, lo principal de cada pantalla cabe sin bajar */
@media (min-width:1000px){
  main[data-apilar]>:is(section,header):not(.hero):not(:has(.legal-doc)){padding-top:clamp(48px,7vh,90px);padding-bottom:clamp(48px,7vh,90px)}
  main[data-apilar]>.hero{padding-top:clamp(28px,6vh,80px);padding-bottom:clamp(28px,6vh,80px)}
  main[data-apilar]>.hero .disc{width:min(300px,30vh)}
  main[data-apilar]>.hero h1{font-size:min(calc(clamp(2.8rem,8vw,7rem) * var(--k-tit,1)),12vh)}
  /* Inicio · Dos boxes: las dos salas enteras (foto, precio y botones) en una pantalla */
  .inicio-boxes .cell>a{display:block;align-self:stretch}
  .inicio-boxes .cell figure[data-foto]{aspect-ratio:auto!important;width:auto;height:clamp(150px,24vh,300px);height:clamp(150px,24svh,300px)}
  .inicio-boxes .sec-head{margin-bottom:clamp(16px,3vh,32px)}
  .inicio-boxes .cell{padding:clamp(16px,2.2vh,26px) clamp(18px,2vw,28px);gap:.35rem}
  .inicio-boxes .cell h3{font-size:clamp(1.4rem,2.2vw,1.9rem)}
  .inicio-boxes .cell p.grow{font-size:.95rem;line-height:1.5}
  .inicio-boxes .cell .price{font-size:clamp(1.8rem,3.6vh,2.6rem)}
  /* Los boxes: título, selector y sala con su precio y botón a la vista */
  .bx-sec .tit-disco{margin-bottom:clamp(18px,3vh,36px)}
  .bx-sec .tit-disco .disc{width:clamp(110px,12vw,180px)}
  .bx-tabs{margin-bottom:clamp(18px,3vh,32px)}
  .bx-tabs button{flex-direction:row;justify-content:center;align-items:baseline;gap:.8rem;padding:12px}
  .bx-principal{aspect-ratio:16/11;max-height:54vh;max-height:54svh}
  .bx-info .lead{font-size:1.05rem}
}

/* Inicio · Dos boxes en móvil: fotos apaisadas (antes casi cuadradas) para que cada sala quepa en una pantalla */
@media (max-width:999px){.inicio-boxes .cell figure[data-foto]{aspect-ratio:16/10!important}}
/* móvil y tablet: márgenes entre secciones algo menores (antes 70px fijos arriba y abajo) */
@media (max-width:999px){main[data-apilar]>:is(section,header):not(.hero):not(:first-child):not(:has(.legal-doc)){padding-top:clamp(44px,6.5vh,64px);padding-bottom:clamp(44px,6.5vh,64px)}}
/* portátiles con poca altura (≤780px): título y fotos de «Dos boxes» algo menores para que entre entero */
@media (min-width:1000px) and (max-height:780px){
  .inicio-boxes .sec-head h2{font-size:clamp(2.4rem,8vh,3.6rem)}
  .inicio-boxes .cell figure[data-foto]{height:clamp(140px,21vh,260px);height:clamp(140px,21svh,260px)}
}

/* =========================================================
   SUPERFICIES DEL NAVEGADOR (26/10/2026): selección, cursor de texto, barra de scroll y controles con la paleta
   ========================================================= */
::selection{background:var(--beige);color:var(--tinta)}
html{scrollbar-color:rgba(217,201,164,.32) var(--tinta);accent-color:var(--beige)}
input,textarea,[contenteditable]{caret-color:var(--beige)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--tinta)}
::-webkit-scrollbar-thumb{background:rgba(217,201,164,.28);border-radius:10px;border:2px solid var(--tinta)}
::-webkit-scrollbar-thumb:hover{background:rgba(217,201,164,.5)}
a{text-underline-offset:.22em;text-decoration-thickness:1px}
.table td,.cell .price,.bx-precio b,.plan-price b{font-variant-numeric:tabular-nums}
/* en pantallas táctiles el «hover» se queda pegado tras tocar: ahí los botones vuelven a su estado normal */
@media (hover:none){.btn-beige:hover{background:var(--beige)}.btn-line:hover{background:transparent;color:var(--beige)}.btn-ghost:hover{color:var(--b70)}.btn:hover .arr{transform:none}}
/* la etiqueta va DEBAJO del titular, como subtítulo (antes encima, como «antetítulo»): el titular manda */
.lbl.sub{display:block;margin-top:.5rem}
.hero-pie{display:block;margin-top:clamp(22px,3.5vh,36px)}

/* =========================================================
   PULIDO PROFESIONAL (26/10/2026, impeccable + design-taste): sin numeración de sección (el orden lo dan la posición
   y el tamaño, y los titulares se alinean al margen), etiquetas como frase legible, nada que se lea por debajo de
   13 px, párrafos de 45–75 caracteres por línea, superficies por tono y no por degradados o sombras en reposo
   ========================================================= */
.sec-head .num{display:none}
.sec-head{grid-template-columns:1fr}
.sec-head p{grid-column:1}
.lbl{font-family:var(--sans);font-size:.875rem;letter-spacing:0;text-transform:none;color:var(--b70)}
.banner{font-family:var(--sans);font-size:.875rem;letter-spacing:0;text-transform:none}
main p{max-width:65ch}
main td p{max-width:none}
.abiertos-caja{background:rgba(251,250,246,.035)}
.mk-mb b{box-shadow:none}
.cell-tit{font-family:var(--sans);font-size:1.05rem;font-weight:400;letter-spacing:-.01em;color:var(--blanco)}
/* la letra pequeña de los precios («IVA incluido», «/h de técnico») en la letra de texto: una sola voz por línea */
#hVsPrecio small,#hAsPrecio small,#vsPrecio small,.plan-price small,.bx-precio small,.estudio-precio small,.mem-cifra small,.fv-p small,.tc-hora small,.serv-suma small,.box-sw-p small,.calc-big small{font-family:var(--sans);text-transform:none;letter-spacing:0}

main .num{display:none} /* sin numeración de sección en ninguna página */
.nav{border-bottom-color:transparent} /* el menú se separa por tono, sin línea */
.mem-precio{background:rgba(217,201,164,.06)}
.plan.pop{background:rgba(217,201,164,.06)}
.box-sw button.on{background:rgba(217,201,164,.07)}
.cell-tit{font-size:1.3rem}
.tit-pag{font-size:calc(clamp(2.4rem,5.4vw,4.6rem) * var(--k-tit,1));line-height:1}
/* Membresía: portada con la foto del estudio a la derecha (antes un tercio de pantalla vacío) */
.mem-cab-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:center}
.mem-cab-foto{aspect-ratio:4/5;max-height:72vh;max-height:72svh;width:100%;border-radius:14px!important}
@media(max-width:900px){.mem-cab-grid{grid-template-columns:1fr}.mem-cab-foto{aspect-ratio:16/10;max-height:none}}
/* Nosotros en el móvil: el titular de entrada en 2–3 líneas, no 4 */
@media(max-width:600px){.cabecera h1{font-size:clamp(2rem,8.6vw,2.6rem)}}

/* =========================================================
   INICIO COMO RECORRIDO (27/10/2026): abiertos arriba, los boxes en una pantalla fija que cambia de foto al bajar,
   y un calculador en vez de cuatro tarjetas de texto
   ========================================================= */
/* «No hace falta que nos llames»: lo primero tras la portada, con los cuatro pasos en una línea */
.abiertos{position:relative}
.ab-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 48px;flex-wrap:wrap}
.ab-cab .abiertos-tit{margin:0}
.ab-sub{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:1rem;color:var(--b70);max-width:none}
.ab-linea{position:relative;height:2px;margin-top:clamp(32px,6vh,56px);background:rgba(251,250,246,.12);border-radius:2px;overflow:hidden}
.ab-linea i{position:absolute;inset:0;background:var(--beige);transform-origin:0 50%;transform:scaleX(1)}
.ab-pasos{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0;padding:0}
.ab-pasos li{position:relative;padding-top:26px}
.ab-pt{position:absolute;top:-6px;left:0;width:10px;height:10px;border-radius:50%;border:1px solid var(--beige);background:var(--tinta);transition:background .25s var(--ease-out),transform .25s var(--ease-out)}
.ab-pasos li.on .ab-pt,html:not(.gs) .ab-pt{background:var(--beige);transform:scale(1.2)}
.ab-pasos h3{font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:400;letter-spacing:-.01em}
.ab-pasos p{margin-top:.35rem;font-size:.95rem}
@media(max-width:760px){.ab-pasos{grid-template-columns:1fr 1fr;row-gap:28px;margin-top:36px}.ab-linea{display:none}.ab-pt{top:4px;background:var(--beige)}.ab-pasos li{padding-top:0;padding-left:22px}}

/* Los boxes: pantalla fija; al bajar cambian las fotos (3 de cada sala) y el texto de la sala; después la página sigue */
.historia{position:relative;height:340vh;height:340svh;padding:0!important;border:0;background:var(--tinta)}
.hist-pin{position:sticky;top:var(--nav-h,64px);height:calc(100vh - var(--nav-h,64px));height:calc(100svh - var(--nav-h,64px));overflow:hidden;display:grid;align-items:end}
.hist-fotos{position:absolute;inset:0}
.historia .hist-f{position:absolute;inset:0;margin:0;border-radius:0!important;aspect-ratio:auto!important;opacity:0;transition:opacity .7s var(--ease-in-out)}
.hist-f.on{opacity:1}
.hist-f img{transform:scale(1.08);transition:transform 2.4s var(--ease-out)}
.hist-f.on img{transform:scale(1)}
.hist-pin::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(22,22,20,.88) 0%,rgba(22,22,20,.55) 38%,rgba(22,22,20,0) 68%)} /* velo neutro para leer sobre la foto */
.hist-txt{position:relative;z-index:2;height:100%;display:grid;align-items:end;padding-bottom:clamp(36px,9vh,96px)}
.hist-p{font-family:var(--display);font-weight:200;font-size:clamp(2rem,3.4vw,2.8rem);letter-spacing:-.03em;color:var(--blanco);line-height:1}
.hist-p small{font-family:var(--sans);font-size:.875rem;color:var(--b70);letter-spacing:0;margin-left:.4rem}
.hist-c{grid-area:1/1;max-width:540px;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .45s var(--ease-out),transform .55s var(--ease-out),visibility 0s .45s}
.hist-c.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--ease-out) .12s,transform .55s var(--ease-out) .12s,visibility 0s}
.hist-c h3{font-family:var(--display);font-weight:200;font-size:calc(clamp(3rem,7vw,6rem) * var(--k-tit,1));line-height:.95;letter-spacing:-.04em;color:var(--beige)}
.hist-l{margin-top:1rem;font-size:clamp(1rem,1.3vw,1.15rem);color:var(--blanco);max-width:42ch}
.hist-p{margin-top:1.2rem}
.hist-marcas{position:absolute;right:clamp(16px,4vw,56px);top:50%;transform:translateY(-50%);display:grid;gap:18px}
.hist-marcas span{display:grid;gap:8px}
.hist-marcas i{display:block;width:3px;height:22px;border-radius:2px;background:rgba(251,250,246,.25);transition:background .3s var(--ease-out),height .3s var(--ease-out)}
.hist-marcas i.on{background:var(--beige);height:34px}
@media(max-width:760px){
  .historia{height:300vh;height:300svh}
  .hist-pin::after{background:linear-gradient(0deg,rgba(22,22,20,.96) 0%,rgba(22,22,20,.86) 40%,rgba(22,22,20,.45) 66%,rgba(22,22,20,0) 86%)}
  .hist-marcas{top:auto;bottom:auto;top:18px;right:16px;transform:none;grid-auto-flow:column}
  .hist-marcas span{grid-auto-flow:column}
  .hist-marcas i{width:18px;height:3px}.hist-marcas i.on{height:3px;width:30px}
}
/* sin el recorrido (sin JS o con «reducir movimiento»): las dos salas una junto a otra, con su foto */
.historia:not(.vivo){height:auto}
.historia:not(.vivo) .hist-pin{position:relative;top:0;height:auto;display:block;padding:clamp(48px,8vh,96px) 0}
.historia:not(.vivo) .hist-pin::after,.historia:not(.vivo) .hist-marcas{display:none}
.historia:not(.vivo) .hist-fotos{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;width:min(1240px,calc(100% - 32px));margin:0 auto 24px}
.historia:not(.vivo) .hist-f{position:relative;opacity:1;aspect-ratio:16/10!important;border-radius:6px!important}
.historia:not(.vivo) .hist-f:not(:nth-child(1)):not(:nth-child(4)){display:none}
.historia:not(.vivo) .hist-txt{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-bottom:0}
.historia:not(.vivo) .hist-c{grid-area:auto;opacity:1;visibility:visible;transform:none}
@media(max-width:760px){.historia:not(.vivo) .hist-fotos,.historia:not(.vivo) .hist-txt{grid-template-columns:1fr}}

/* Calculador: eliges sala y horas al mes; las barras comparan lo que pagas al mes */
.calcu-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:center}
.calcu-box{display:inline-grid;grid-template-columns:1fr 1fr;padding:5px;gap:5px;border:1px solid var(--l);border-radius:999px}
.calcu-box button{padding:.6rem 1.1rem;border-radius:999px;color:var(--b70);font-size:.95rem;transition:background .2s var(--ease-out),color .2s var(--ease-out)}
.calcu-box button[aria-checked="true"]{background:var(--beige);color:var(--tinta)}
.calcu-h{display:flex;align-items:baseline;gap:.6rem;color:var(--b70)}
.calcu-h b{font-family:var(--display);font-weight:200;font-size:clamp(3.6rem,7vw,5.6rem);line-height:1;letter-spacing:-.04em;color:var(--beige);font-variant-numeric:tabular-nums;min-width:2ch}
#calcuH{width:100%;margin-top:.6rem;accent-color:var(--beige);height:28px;cursor:grab}
#calcuH:active{cursor:grabbing}
.calcu-dp{font-size:.95rem}
.co{padding:18px 0;border-top:1px solid var(--l-soft)}
.co:last-child{border-bottom:1px solid var(--l-soft)}
.co-fila{display:flex;align-items:baseline;gap:12px}
.co-t{font-weight:400;font-size:1.1rem;color:var(--blanco)}
.co-tag{font-size:.8125rem;padding:.2rem .6rem;border-radius:999px;background:var(--beige);color:var(--tinta);opacity:0;transform:scale(.95);transition:opacity .2s var(--ease-out),transform .2s var(--ease-out)}
.co.mejor .co-tag{opacity:1;transform:none}
.co-mes{margin-left:auto;font-family:var(--display);font-weight:300;font-size:clamp(1.4rem,2.2vw,1.9rem);letter-spacing:-.03em;color:var(--blanco);font-variant-numeric:tabular-nums}
.co-mes small{font-family:var(--sans);font-size:.8125rem;color:var(--b70);margin-left:.3rem;letter-spacing:0}
.co.mejor .co-mes{color:var(--beige)}
.co-barra{height:6px;margin:12px 0 10px;border-radius:6px;background:rgba(251,250,246,.07);overflow:hidden}
.co-barra i{display:block;height:100%;border-radius:6px;background:rgba(251,250,246,.28);transform-origin:0 50%;transition:transform .45s var(--ease-out),background .25s var(--ease-out)}
.co.mejor .co-barra i{background:var(--beige)}
.co-pie{justify-content:space-between;font-size:.875rem;color:var(--b70)}
.co-h{font-variant-numeric:tabular-nums}
@media(max-width:860px){.calcu-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.co-barra i,.co-tag,.hist-f,.hist-f img,.hist-c{transition:none}}

/* cambio de sala en el recorrido: selector arriba (la pastilla se desliza a la sala), titular que sube desde su
   máscara y la primera foto de cada sala entra con una cortina (no con un fundido): se nota que cambias de box */
.hist-sel-wrap{position:absolute;top:clamp(16px,3vh,32px);left:0;right:0;z-index:3;pointer-events:none}
.hist-sel{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:rgba(22,22,20,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(251,250,246,.14);pointer-events:auto}
.hist-sel button{position:relative;z-index:1;padding:.55rem 1.1rem;border-radius:999px;font-size:.9rem;color:var(--b70);transition:color .25s var(--ease-in-out)}
.hist-sel-ind{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--beige);transition:transform .45s var(--ease-in-out)}
.historia[data-sala="prod"] .hist-sel-ind{transform:translateX(100%)}
.historia[data-sala="dj"] .hist-sel [data-ir="dj"],.historia[data-sala="prod"] .hist-sel [data-ir="prod"]{color:var(--tinta)}
.hist-c h3{overflow:hidden;padding-bottom:.06em}
.hist-c h3 span{display:inline-block;transform:translateY(105%);transition:transform .35s var(--ease-out)}
.hist-c.on h3 span{transform:none;transition:transform .8s var(--ease-out) .12s}
@keyframes histCortina{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
.historia .hist-f.cortina{z-index:1;opacity:1;transition:none;animation:histCortina .9s var(--ease-in-out) both}
.historia:not(.vivo) .hist-sel-wrap{display:none}
.historia:not(.vivo) .hist-c h3 span{transform:none}
@media(prefers-reduced-motion:reduce){.historia .hist-f.cortina{animation:none}.hist-c h3 span{transition:none}}
@media(max-width:760px){.hist-marcas{display:none}}

/* =========================================================
   SELLO DE PRECIO (27/10/2026): el precio va marcado en un redondel, como una etiqueta de estudio
   ========================================================= */
.sello{display:inline-grid;place-content:center;justify-items:center;text-align:center;width:clamp(124px,12vw,156px);aspect-ratio:1;border-radius:50%;border:1px solid var(--beige);background:rgba(22,22,20,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--blanco);padding:12px;gap:2px}
.sello b{font-family:var(--display);font-weight:200;font-size:clamp(2rem,3vw,2.6rem);line-height:1;letter-spacing:-.04em;color:var(--beige);font-variant-numeric:tabular-nums}
.sello small{font-size:.8125rem;color:var(--b70)}
.sello span{font-size:.75rem;line-height:1.3;color:var(--b70);max-width:12ch}

/* =========================================================
   LOS BOXES COMO RECORRIDO: entrada con dos accesos, un capítulo por sala (foto a pantalla completa con su sello,
   el equipo pieza a pieza con la foto que cambia, y para qué es ideal)
   ========================================================= */
.bx-ir{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(24px,4vh,40px)}
.bx-ir a{position:relative;display:block;border-radius:16px;overflow:hidden;aspect-ratio:16/9;color:var(--blanco);text-decoration:none;isolation:isolate}
.bx-ir figure{position:absolute!important;inset:0;margin:0;aspect-ratio:auto!important;border-radius:0!important;z-index:-1}
.bx-ir figure img{transition:transform .6s var(--ease-out)}
.bx-ir a::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(22,22,20,.85),rgba(22,22,20,0) 60%)}
.bx-ir span{position:absolute;left:clamp(16px,2vw,28px);bottom:clamp(14px,2vw,24px);display:grid;gap:2px}
.bx-ir b{font-family:var(--display);font-weight:300;font-size:clamp(1.6rem,2.6vw,2.4rem);letter-spacing:-.03em;color:var(--beige)}
.bx-ir small{font-size:.875rem;color:var(--b70)}
.bx-ir .arr{position:absolute;right:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,26px);font-style:normal;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(251,250,246,.4);transition:transform .25s var(--ease-out),background .25s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.bx-ir a:hover figure img{transform:scale(1.04)}.bx-ir a:hover .arr{transform:translateY(3px);background:var(--beige);color:var(--tinta)}}
@media(max-width:700px){.bx-ir{grid-template-columns:1fr}}

.bx-cap{padding:0!important;border:0;background:var(--tinta);scroll-margin-top:var(--nav-h,64px)}
.bx-hero{position:relative;min-height:calc(100vh - var(--nav-h,64px));min-height:calc(100svh - var(--nav-h,64px));display:grid;align-items:end;overflow:hidden;isolation:isolate}
.bx-cap .bx-hero-f{position:absolute;inset:0;margin:0;aspect-ratio:auto!important;border-radius:0!important;z-index:-2}
.bx-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(22,22,20,.9) 0%,rgba(22,22,20,.55) 40%,rgba(22,22,20,.1) 75%),linear-gradient(0deg,rgba(22,22,20,.6),rgba(22,22,20,0) 40%)}
.bx-hero-txt{padding-bottom:clamp(40px,10vh,110px)}
.bx-hero-txt h2{font-size:calc(clamp(3.2rem,8vw,6rem) * var(--k-tit,1));line-height:.95;letter-spacing:-.04em;color:var(--beige)}
.bx-hero-txt .bx-tit{font-family:var(--display);font-weight:300;font-size:clamp(1.3rem,2.2vw,1.8rem);color:var(--blanco);margin-top:.6rem}
.bx-hero-txt .lead{max-width:52ch;color:var(--blanco)}
.bx-hero .sello{position:absolute;right:clamp(16px,6vw,96px);bottom:clamp(40px,10vh,110px)}
@media(max-width:760px){
  .bx-hero::after{background:linear-gradient(0deg,rgba(22,22,20,.96) 0%,rgba(22,22,20,.82) 45%,rgba(22,22,20,.2) 80%)}
  .bx-hero .sello{top:24px;bottom:auto;right:16px;width:112px}
  .bx-hero .sello b{font-size:1.7rem}
}
/* el equipo, pieza a pieza: la foto se queda fija y cambia según la pieza que tienes delante */
.bx-eqx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);padding-top:clamp(64px,12vh,140px);padding-bottom:clamp(48px,8vh,96px)}
.bx-eqx-fotos{position:sticky;top:calc(var(--nav-h,64px) + 24px);height:calc(100vh - var(--nav-h,64px) - 48px);height:calc(100svh - var(--nav-h,64px) - 48px);border-radius:16px;overflow:hidden}
.bx-cap .bx-eqx-f{position:absolute;inset:0;margin:0;aspect-ratio:auto!important;border-radius:0!important;opacity:0;transition:opacity .6s var(--ease-in-out)}
.bx-cap .bx-eqx-f.on{opacity:1}
.bx-eqx-f img{transform:scale(1.06);transition:transform 1.6s var(--ease-out)}
.bx-eqx-f.on img{transform:none}
.bx-eqx-tit{font-family:var(--display);font-weight:200;font-size:calc(clamp(2rem,4vw,3.4rem) * var(--k-tit,1));letter-spacing:-.03em;line-height:1.05;color:var(--beige)}
.bx-eqx-lista{list-style:none;margin:clamp(24px,5vh,48px) 0 0;padding:0}
.bx-eqx-lista li{min-height:34vh;min-height:34svh;display:flex;flex-direction:column;justify-content:center;gap:.4rem;padding:1rem 0 1rem 24px;border-left:2px solid rgba(251,250,246,.1);opacity:.35;transition:opacity .35s var(--ease-out),border-color .35s var(--ease-out)}
.bx-eqx-lista li b{font-family:var(--display);font-weight:300;font-size:clamp(1.5rem,2.6vw,2.2rem);letter-spacing:-.02em;color:var(--blanco)}
.bx-eqx-lista li span{font-size:clamp(1rem,1.3vw,1.15rem);color:var(--b70);max-width:44ch}
.bx-eqx-lista li.on{opacity:1;border-left-color:var(--beige)}
html:not(.gs) .bx-eqx-lista li{opacity:1}
@media(max-width:860px){
  .bx-eqx{grid-template-columns:1fr;gap:0}
  .bx-eqx-fotos{z-index:2;top:var(--nav-h,64px);height:36vh;height:36svh;border-radius:0 0 14px 14px;margin:0 calc(-1 * var(--pad,16px))}
  .bx-eqx-lista li{min-height:26vh;min-height:26svh}
}
.bx-cierre{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,72px);padding-bottom:clamp(64px,10vh,120px);align-items:start}
.bx-ideal h3{font-family:var(--display);font-weight:300;font-size:clamp(1.6rem,2.6vw,2.2rem);color:var(--beige)}
.bx-cierre .bx-extra{display:grid;gap:16px}
@media(max-width:860px){.bx-cierre{grid-template-columns:1fr}}

/* en el recorrido del inicio el precio también va en su sello */
.hist-c .sello{margin-top:1.2rem;background:rgba(22,22,20,.5)}
/* Tarifas · escalera de precios: barras que crecen una tras otra (cuanto más corta, más barata la hora) */
.esc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px)}
.esc h3{font-family:var(--display);font-weight:300;font-size:clamp(1.4rem,2.2vw,1.9rem);color:var(--beige);margin-bottom:1rem}
.esc-barras{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.esc-barras li{display:grid;grid-template-columns:7.5em 1fr auto 3.4em;align-items:center;gap:12px}
.esc-t{font-size:.95rem;color:var(--b70)}
.esc-b{height:10px;border-radius:10px;background:rgba(251,250,246,.06);overflow:hidden}
.esc-b i{display:block;height:100%;border-radius:10px;background:var(--beige);transform-origin:0 50%;transform:scaleX(var(--s))}
.esc-barras li:first-child .esc-b i{background:rgba(251,250,246,.3)}
html.gs .esc-barras:not(.in) .esc-b i{transform:scaleX(0)}
.esc-barras.in .esc-b i{transition:transform .9s var(--ease-out) calc(var(--i) * 80ms)}
.esc-barras b{font-family:var(--display);font-weight:300;font-size:1.3rem;color:var(--blanco);font-variant-numeric:tabular-nums;white-space:nowrap}
.esc-barras b small{font-family:var(--sans);font-size:.8125rem;color:var(--b70);margin-left:2px}
.esc-barras em{font-style:normal;font-size:.875rem;color:var(--beige);text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:860px){.esc-grid{grid-template-columns:1fr}.esc-barras li{grid-template-columns:6.5em 1fr auto 3em;gap:8px}}
@media(prefers-reduced-motion:reduce){.esc-barras .esc-b i{transition:none!important;transform:scaleX(var(--s))!important}}

/* =========================================================
   LOS BOXES (28/10/2026): las dos salas a la vez en la primera vista; al pulsar una, se ensancha y su
   información se abre debajo (la otra se estrecha y se apaga). En móvil, una encima de otra.
   ========================================================= */
.bx-elegir{padding:0!important;border:0;min-height:calc(100vh - var(--nav-h,64px));min-height:calc(100svh - var(--nav-h,64px));display:flex;flex-direction:column}
.bx-elegir-cab{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(20px,4vh,40px) 0 clamp(16px,3vh,28px)}
.bx-elegir-cab .tit-pag{font-size:calc(clamp(2.2rem,4.6vw,3.8rem) * var(--k-tit,1))}
.bx-elegir-cab p{margin-top:.3rem;color:var(--b70)}
.bx-elegir-cab .disc{width:clamp(90px,10vw,150px)}
.bx-tiles{flex:1;display:flex;gap:10px;padding:0 10px 10px;min-height:440px}
.bx-tile{position:relative;flex:1 1 0;min-width:0;border-radius:18px;overflow:hidden;isolation:isolate;text-align:left;color:var(--blanco);cursor:pointer;transition:flex-grow .6s var(--ease-in-out),opacity .4s var(--ease-out)}
.bx-tile figure{position:absolute!important;inset:0;margin:0;aspect-ratio:auto!important;border-radius:0!important;z-index:-2}
.bx-tile figure img{transition:transform .9s var(--ease-out),filter .4s var(--ease-out)}
.bx-tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(22,22,20,.88) 0%,rgba(22,22,20,.35) 45%,rgba(22,22,20,.05) 75%)}
.bx-tile-txt{position:absolute;left:clamp(18px,3vw,40px);bottom:clamp(18px,4vh,40px);display:grid;gap:.3rem}
.bx-tile-txt b{font-family:var(--display);font-weight:200;font-size:calc(clamp(2.4rem,5vw,4.6rem) * var(--k-tit,1));line-height:.95;letter-spacing:-.04em;color:var(--beige)}
.bx-tile-txt small{font-size:1rem;color:var(--b70)}
.bx-tile-ver{display:inline-flex;align-items:center;gap:.5rem;margin-top:.8rem;width:max-content;padding:.7rem 1.2rem;border-radius:999px;background:var(--beige);color:var(--tinta);font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;transition:scale .14s var(--ease-out)}
.bx-tile:active .bx-tile-ver{scale:.97}
.bx-tile .sello{position:absolute;top:clamp(16px,3vh,32px);right:clamp(16px,2.4vw,32px)}
.bx-tile:focus-visible{outline:2px solid var(--beige);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.bx-tile:hover figure img{transform:scale(1.04)}}
/* sala elegida: se ensancha; la otra se estrecha y se apaga (sigue siendo pulsable para cambiar) */
.bx-tiles[data-abierta="dj"] .bx-tile[data-sala="dj"],.bx-tiles[data-abierta="prod"] .bx-tile[data-sala="prod"]{flex-grow:1.7}
.bx-tiles[data-abierta="dj"] .bx-tile[data-sala="prod"],.bx-tiles[data-abierta="prod"] .bx-tile[data-sala="dj"]{opacity:.55}
.bx-tiles:not([data-abierta=""]) .bx-tile[aria-expanded="false"] figure img{filter:grayscale(.6)}
.bx-tile[aria-expanded="true"] .bx-tile-ver{background:transparent;color:var(--beige);box-shadow:inset 0 0 0 1px var(--beige)}
@media(max-width:760px){
  .bx-tiles{flex-direction:column;padding:0 16px 16px}
  .bx-tile{min-height:0}
  .bx-tiles[data-abierta="dj"] .bx-tile[data-sala="dj"],.bx-tiles[data-abierta="prod"] .bx-tile[data-sala="prod"]{flex-grow:1.4}
  .bx-tile .sello{width:100px;top:14px;right:14px}.bx-tile .sello b{font-size:1.6rem}.bx-tile .sello span{display:none}
  .bx-tile-txt b{font-size:2.4rem}
}
/* información de la sala elegida */
.bx-detalle{padding-top:clamp(40px,7vh,80px)!important}
.bx-detalle:not(:has(.bx-det:not([hidden]))){display:none}
.bx-det{scroll-margin-top:calc(var(--nav-h,64px) + 16px)}
@keyframes bxDetEntra{from{opacity:0;transform:translateY(24px)}}
.bx-det.entra{animation:bxDetEntra .55s var(--ease-out)}
.bx-det-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:start}
.bx-det-info h2{font-size:calc(clamp(2.6rem,5vw,4.4rem) * var(--k-tit,1));color:var(--beige);line-height:1}
.bx-det-info .bx-tit{font-family:var(--display);font-weight:300;font-size:clamp(1.3rem,2vw,1.7rem);color:var(--blanco);margin-top:.5rem}
.bx-det-fotos{display:grid;gap:10px}
.bx-det-fotos .bx-principal{aspect-ratio:4/3!important;border-radius:14px!important}
.bx-det-fotos .bx-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.bx-det-fotos .bx-mini figure{aspect-ratio:1!important;border-radius:10px!important}
.bx-det-eq{margin-top:clamp(48px,8vh,88px)}
.bx-det-eq h3,.bx-ideal h3{font-family:var(--display);font-weight:300;font-size:clamp(1.6rem,2.6vw,2.2rem);color:var(--beige)}
.bx-eq-grid{list-style:none;padding:0;margin:1.4rem 0 1rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,56px)}
.bx-eq-grid li{display:grid;grid-template-columns:9.5em 1fr;gap:12px;padding:14px 0;border-top:1px solid var(--l-soft)}
.bx-eq-grid b{font-weight:400;color:var(--blanco)}
.bx-eq-grid span{color:var(--b70)}
.bx-detalle .bx-cierre{margin-top:clamp(40px,7vh,72px);padding-bottom:0}
@media(max-width:900px){.bx-det-top{grid-template-columns:1fr}.bx-det-fotos{order:-1}.bx-eq-grid{grid-template-columns:1fr}.bx-eq-grid li{grid-template-columns:8em 1fr}}
@media(prefers-reduced-motion:reduce){.bx-tile,.bx-tile figure img{transition:none}.bx-det.entra{animation:none}}

/* submenú de «Los boxes» (DJ Box / Production Box): en el ordenador se despliega al pasar o al llegar con el
   teclado (180 ms, desde arriba a la izquierda); en el menú del móvil, las dos salas debajo, siempre a la vista */
.con-sub{position:relative;display:inline-flex}
.sub-menu{position:absolute;top:calc(100% + 14px);left:-14px;z-index:70;display:grid;min-width:210px;padding:8px;border-radius:14px;background:var(--tinta);border:1px solid var(--l);box-shadow:0 18px 40px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(-4px) scale(.98);transform-origin:top left;transition:opacity .18s var(--ease-out),transform .18s var(--ease-out),visibility 0s .18s}
.con-sub::before{content:"";position:absolute;top:100%;left:-14px;right:-14px;height:18px}
.con-sub:hover .sub-menu,.con-sub:focus-within .sub-menu{opacity:1;visibility:visible;transform:none;transition:opacity .18s var(--ease-out),transform .18s var(--ease-out),visibility 0s}
.links .sub-menu a{padding:.65rem .85rem;border-radius:8px;font-family:var(--sans);font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--blanco);border:0;width:auto}
.links .sub-menu a::after{display:none}
.links .sub-menu a:hover,.links .sub-menu a:focus-visible{background:rgba(217,201,164,.1);color:var(--beige)}
@media(max-width:1240px){
  .con-sub{display:block;width:100%}
  .con-sub::before{display:none}
  .sub-menu{position:static;opacity:1;visibility:visible;transform:none;min-width:0;padding:0 0 .4rem 1rem;background:none;border:0;box-shadow:none;transition:none}
  .links .sub-menu a{padding:.55rem 0;border-bottom:0;color:var(--b70)}
}

/* fichas de sala: «Ideal para» y lo propio de cada sala, sin heredar zonas de rejilla de la versión anterior */
.bx-cierre .bx-ideal,.bx-cierre .bx-extra{grid-area:auto}
/* las dos salas, más encuadradas: dentro de los márgenes de la página y algo más bajas */
.bx-elegir{min-height:0}
.bx-tiles{flex:none;width:min(1240px,100% - 32px);margin:0 auto;padding:0 0 clamp(24px,5vh,56px);gap:16px;height:clamp(420px,62vh,620px);height:clamp(420px,62svh,620px);min-height:0}
.bx-tile-txt b{font-size:calc(clamp(2.2rem,4vw,3.6rem) * var(--k-tit,1))}
.bx-tile .sello{width:clamp(108px,10vw,132px)}
.bx-tile .sello b{font-size:clamp(1.7rem,2.4vw,2.2rem)}
@media(max-width:760px){.bx-tiles{height:auto;width:auto;margin:0 16px;padding-bottom:24px}.bx-tile{height:clamp(220px,34svh,300px);flex:none}.bx-tiles[data-abierta] .bx-tile{flex-grow:0}}

/* =========================================================
   JERARQUÍA DE TÍTULOS (28/10/2026): los titulares grandes siguen finos (estilo de la marca, se regula en el panel:
   Textos → Letras); todos los títulos pequeños y medianos van en Inter Medium, iguales en toda la web; las etiquetas
   vuelven a la mono de la marca en mayúsculas (13 px)
   ========================================================= */
main h3,main .card h3,main .cell h3,.serv-card h3,.bx-det-eq h3,.bx-ideal h3,.esc h3,.ab-pasos h3,.cell-tit,.co-t,.bx-eq-grid b,.faq summary,.tp-pasos b,.mb-c b:not(.mb-n){font-weight:500;letter-spacing:-.02em}
.bx-tit,.bx-det-info .bx-tit{font-weight:400}
.historia .hist-c h3{font-weight:200;letter-spacing:-.04em} /* el nombre de la sala en el recorrido es un titular grande */
.lbl{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--b70)}
.lbl.sub{margin-top:.6rem}
/* Nosotros: el texto principal, primero y en grande; sus palabras se encienden al bajar (sin bloquear el scroll) */
.manifiesto-sec{padding-top:clamp(32px,6vh,72px)!important;padding-bottom:clamp(48px,9vh,110px)!important}
.manifiesto{font-family:var(--display);font-weight:300;font-size:clamp(1.7rem,3.4vw,3rem);line-height:1.18;letter-spacing:-.025em;color:var(--blanco);max-width:30ch}
@media(max-width:600px){.manifiesto{font-size:1.6rem}}
/* Inicio · Grabamos por ti, en corto: foto apaisada, título, precio y reservar (los detalles, en Los boxes) */
.vs-corto .serv-foto{aspect-ratio:16/9!important}
.vs-corto .serv-card{gap:.3rem}

/* =========================================================
   MÓVIL (28/10/2026): nada se sale de la pantalla. El menú de arriba encoge sus botones en lugar de empujar el de
   menú fuera (pasaba de 375 a 430 px: casi todos los iPhone); la barra de Membresía y las polaroids, dentro.
   ========================================================= */
@media(max-width:480px){
  .nav .wrap{gap:8px}
  .brand{min-width:0;flex:0 1 auto}
  .brand b,.brand .brand-t{font-size:1.05rem}
  .nav-r{gap:6px;min-width:0;flex:0 1 auto}
  .nav-r .btn-sm{padding:.5rem .7rem;font-size:.64rem;letter-spacing:.04em}
  .burger{width:38px;height:38px;flex:none}
}
@media(max-width:360px){.nav-r .btn-sm{padding:.45rem .55rem;font-size:.6rem;letter-spacing:.02em}}
.mem-barra{box-sizing:border-box;max-width:calc(100vw - 24px)}
.mem-barra>*{min-width:0}
@media(max-width:700px){.eq-pola{width:clamp(84px,24vw,120px)}.eq-pola.q1{--dx:-80px}.eq-pola.q3{--dx:80px}.eq-polas{overflow:clip}}
html,body{max-width:100%}
/* avisos (toast): caja con esquinas suaves; con texto largo ya no se deforman en un óvalo */
.toast{border-radius:14px;max-width:min(520px,calc(100vw - 32px));line-height:1.4;font-family:var(--sans);letter-spacing:0;font-size:.9rem;padding:.75rem 1.1rem}
/* Los boxes: texto a la izquierda (nombre, para quién, descripción breve y botón) y el sello del precio a la derecha */
.bx-tile-txt{right:clamp(150px,13vw,190px)}
.bx-tile-desc{display:block;margin-top:.35rem;max-width:38ch;font-size:.95rem;line-height:1.45;color:var(--blanco);opacity:.85}
.bx-tile .sello{top:auto;bottom:clamp(18px,4vh,40px);right:clamp(16px,2.4vw,32px)}
@media(max-width:760px){
  .bx-tile-txt{right:16px;left:16px;bottom:16px}
  .bx-tile-desc{font-size:.85rem;max-width:none;display:block}
  .bx-tile .sello{top:14px;bottom:auto;right:14px}
  .bx-tile{height:clamp(260px,40svh,340px)}
}
/* acceso rápido a «Entrar» en el móvil (el registro va primero y es largo) */
.ya-cuenta{display:none}
@media(max-width:860px){.ya-cuenta{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:1.2rem;padding:.8rem 1rem;border-radius:12px;background:rgba(217,201,164,.1);color:var(--blanco);font-size:.95rem;text-align:left}.ya-cuenta b{color:var(--beige);font-weight:500}}

/* Inicio: la cinta de marcas va pegada arriba de «No hace falta que nos llames» (misma sección, sin hueco) y, en el
   móvil, asoma ya en la primera pantalla: la portada se ajusta a su contenido en vez de ocupar toda la pantalla */
@media(max-width:760px){
  main[data-apilar]>.hero:first-child{min-height:0!important;display:block;padding-top:28px!important;padding-bottom:28px!important}
  .hero.vivo .disc,.hero .disc{width:min(150px,40vw)!important}
  .hero .lbl{margin-top:14px!important}
  .hero h1{margin-top:.4rem}
  .hero .lead{font-size:1rem;margin-top:.8rem}
  .hero .row{margin-top:1.2rem}
}
@media(min-width:761px) and (max-height:960px){
  main[data-apilar]>.hero:first-child:has(>.marq){padding-top:clamp(20px,4vh,48px)!important;padding-bottom:clamp(20px,4vh,48px)!important}
  main[data-apilar]>.hero:first-child:has(>.marq) .disc{width:min(300px,24vh)}
  main[data-apilar]>.hero:first-child:has(>.marq) h1{font-size:min(calc(clamp(2.8rem,8vw,7rem) * var(--k-tit,1)),10.5vh)}
  main[data-apilar]>.hero:first-child:has(>.marq) .lead{margin-top:clamp(.8rem,2vh,1.4rem)}
  main[data-apilar]>.hero:first-child:has(>.marq) .row{margin-top:clamp(1rem,3vh,2rem)}
}
/* (móvil: la portada vuelve a quedarse fija y «No hace falta que nos llames» entra por encima al bajar, como en ordenador) */
/* Precio de cada box: placa de cristal arriba a la derecha (Los boxes e inicio). Cifra grande y fina, «/ hora»
   pegado a la cifra y el detalle en mono bajo un filete; sin círculos. */
.bx-tile .sello,.hist-c .sello{display:inline-flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;column-gap:.4rem;row-gap:0;width:auto!important;max-width:220px;aspect-ratio:auto;border-radius:16px;padding:12px 16px 11px;text-align:right;
  border:1px solid rgba(232,220,196,.26);background:linear-gradient(160deg,rgba(30,29,26,.62),rgba(14,14,13,.42));backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 14px 34px -16px rgba(0,0,0,.7)}
.bx-tile .sello b,.hist-c .sello b{font-size:clamp(2rem,2.6vw,2.5rem)!important;font-weight:200;letter-spacing:-.045em;line-height:1}
.bx-tile .sello small,.hist-c .sello small{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--b70)}
.bx-tile .sello span,.hist-c .sello span{display:block!important;flex-basis:100%;max-width:none;margin-top:9px;padding-top:8px;border-top:1px solid rgba(232,220,196,.16);font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;line-height:1.4;color:var(--b70)}
.bx-tile .sello{position:absolute;top:clamp(16px,2.4vw,28px)!important;right:clamp(16px,2.4vw,28px)!important;bottom:auto!important}
/* inicio: la tarjeta de texto ya no se desplaza entera (así la placa se ancla a la esquina); se mueven sus piezas */
.hist-c{transform:none!important}
.hist-c>:not(.sello){transform:translateY(16px);transition:transform .55s var(--ease-out)}
.hist-c.on>:not(.sello){transform:none;transition:transform .55s var(--ease-out) .12s}
.hist-c .sello{position:absolute;top:clamp(16px,3vh,32px);right:0;margin:0}
@media(max-width:760px){
  .bx-tile .sello,.hist-c .sello{padding:9px 12px 8px;border-radius:13px}
  .bx-tile .sello b,.hist-c .sello b{font-size:1.6rem!important}
  .bx-tile .sello span{display:none!important}
  .bx-tile .sello{top:12px!important;right:12px!important}
  .hist-c .sello{top:calc(clamp(16px,3vh,32px) + 58px)}
}
@media(prefers-reduced-motion:reduce){.hist-c>:not(.sello){transition:none}}
.historia:not(.vivo) .hist-c .sello{position:static;margin-top:1.2rem}
/* Opciones de radio/casilla dentro de los campos: no heredan el aspecto de caja de texto. Cada opción es una tarjeta fina */
.f input:is([type=radio],[type=checkbox]){appearance:auto;-webkit-appearance:auto;background:none;width:18px;height:18px;flex:0 0 18px;padding:0;margin:0;border:0;box-shadow:none;accent-color:var(--beige);cursor:pointer}
.f label.row:has(>input[type=radio]){align-items:center;flex-wrap:nowrap;border:1px solid var(--l);border-radius:12px;padding:.8rem 1rem;margin-top:.5rem;cursor:pointer;transition:border-color .2s ease,background-color .2s ease}
.f label.row:has(>input[type=radio]:checked){border-color:var(--beige);background:var(--beige-08)}
@media(hover:hover) and (pointer:fine){.f label.row:has(>input[type=radio]):hover{border-color:rgba(232,220,196,.5)}}
/* Botón que abre un formulario en ventana y la propia ventana */
.ventana-btn{margin-top:1.4rem}
.ventana-btn .arr{font-size:1.1em;line-height:1}
#mbModal .en-ventana{margin-top:1.4rem}
#mbModal .en-ventana .seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}#mbModal .en-ventana .seg>*{padding-inline:0;white-space:nowrap}
/* Tarjeta regalo (Tarifas): sin el formulario a la vista, texto y botón a la izquierda y la tarjeta a la derecha */
@media(min-width:900px){
  #regalo .split{grid-template-columns:1fr}
  #regalo .split>div:first-child{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);column-gap:clamp(40px,7vw,120px);align-items:start}
  #regalo .split>div:first-child>*{grid-column:1}
  #regalo .split>div:first-child>.regalo-vista{grid-column:2;grid-row:1/span 8;align-self:center;margin-top:0}
}
/* ---------- Inicio · Todo lo que ofrecemos: cada producto es una tarjeta entera clicable con su precio ---------- */
.of-cab{display:flex;justify-content:space-between;align-items:end;gap:16px 40px;flex-wrap:wrap}
.of-cab .lead{max-width:36ch;color:var(--b70)}
.of-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.of-c{position:relative;display:flex;flex-direction:column;gap:.45rem;min-height:236px;padding:clamp(20px,2.2vw,28px);border:1px solid var(--l);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0));color:var(--blanco);text-decoration:none;transition:border-color .25s ease,background-color .25s ease,transform .25s cubic-bezier(.23,1,.32,1)}
.of-c h3{font-family:var(--display);font-weight:300;font-size:clamp(1.5rem,2vw,1.85rem);letter-spacing:-.03em;line-height:1.05;color:var(--beige);margin-top:.35rem}
.of-c p{color:var(--b70);font-size:.95rem;line-height:1.45;max-width:30ch}
.of-pie{margin-top:auto;padding-top:1rem;display:flex;align-items:end;justify-content:space-between;gap:12px;border-top:1px solid rgba(232,220,196,.12)}
.of-pie b{font-family:var(--display);font-weight:200;font-size:clamp(1.9rem,2.6vw,2.4rem);letter-spacing:-.045em;line-height:1;color:var(--blanco);font-variant-numeric:tabular-nums}
.of-pie b small{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--b70);margin-left:.35rem;font-weight:400}
.of-pie b small.of-desde{display:block;margin:0 0 .35rem}
.of-ir{flex:0 0 40px;height:40px;display:grid;place-items:center;border:1px solid var(--l);border-radius:50%;color:var(--beige);transition:transform .25s cubic-bezier(.23,1,.32,1),background-color .25s ease,color .25s ease,border-color .25s ease}
.of-c:active{transform:scale(.985)}
.of-c:focus-visible,.of-regalo:focus-visible{outline:2px solid var(--beige);outline-offset:3px}
@media(hover:hover) and (pointer:fine){
  .of-c:hover{border-color:rgba(232,220,196,.45);background-color:rgba(232,220,196,.035)}
  .of-c:hover .of-ir{background:var(--beige);color:var(--tinta);border-color:var(--beige);transform:translateX(3px)}
}
/* Tarjeta regalo: franja destacada con la tarjeta dibujada */
.of-regalo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);align-items:center;gap:clamp(24px,5vw,72px);padding:clamp(24px,3.4vw,48px);border-radius:22px;border:1px solid rgba(232,220,196,.3);background:radial-gradient(120% 140% at 100% 0%,rgba(232,220,196,.12),rgba(232,220,196,0) 55%),var(--tinta-2,#1b1a18);color:var(--blanco);text-decoration:none;overflow:hidden;transition:border-color .25s ease}
.of-regalo h3{font-family:var(--display);font-weight:200;font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-.04em;line-height:1;color:var(--beige);margin-top:.6rem}
.of-regalo p{color:var(--b70);margin-top:.8rem;max-width:42ch}
.of-tarjeta{justify-self:center;width:min(100%,360px);aspect-ratio:1.586;border-radius:18px;padding:22px 24px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(135deg,#e8dcc4 0%,#cfbf9f 55%,#b9a77f 100%);color:#161614;box-shadow:0 30px 60px -28px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.5);transform:rotate(-4deg);transition:transform .45s cubic-bezier(.23,1,.32,1)}
.of-t-logo{font-family:var(--display);font-weight:400;letter-spacing:-.02em;font-size:1.05rem}
.of-tarjeta b{font-family:var(--display);font-weight:200;font-size:clamp(2.4rem,4vw,3.2rem);letter-spacing:-.05em;line-height:1}
.of-tarjeta b small{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;font-weight:400;margin-bottom:.3rem;opacity:.7}
.of-t-pie{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
@media(hover:hover) and (pointer:fine){.of-regalo:hover{border-color:rgba(232,220,196,.55)}.of-regalo:hover .of-tarjeta{transform:rotate(-1deg) translateY(-4px)}}
@media(max-width:980px){.of-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .of-grid{grid-template-columns:1fr;gap:10px}
  .of-c{min-height:0;display:grid;grid-template-columns:1fr auto;column-gap:14px;row-gap:.3rem;padding:18px}
  .of-c>*{grid-column:1}
  .of-c h3{margin-top:0;font-size:1.4rem}
  .of-c p{font-size:.88rem}
  .of-pie{grid-column:1/-1;padding-top:.8rem}
  .of-pie b{font-size:1.7rem}
  .of-regalo{grid-template-columns:1fr;padding:22px}
  .of-tarjeta{order:-1;width:min(100%,300px);transform:rotate(-3deg)}
}
@media(prefers-reduced-motion:reduce){.of-c,.of-ir,.of-tarjeta{transition:none}}
/* Marcas con las que trabajamos: dentro de la portada, justo bajo los botones; se ven al entrar en cualquier pantalla */
.hero>.marq-hero{grid-column:1/-1;margin-top:clamp(28px,5vh,56px);position:relative;z-index:2}
/* Móviles bajos (iPhone SE en Safari, Android de 360 px): la portada se ajusta a la altura para que las marcas entren al abrir */
@media(max-width:760px) and (max-height:760px){
  main[data-apilar]>.hero:first-child{padding-top:min(22px,3vh)!important;padding-bottom:min(22px,3vh)!important}
  .hero.vivo .disc,.hero .disc{width:min(150px,40vw,17vh)!important}
  .hero .lbl{margin-top:min(14px,1.6vh)!important}
  .hero h1{font-size:min(calc(clamp(2.8rem,8vw,7rem) * var(--k-tit,1)),7.4vh)!important}
  .hero .lead{font-size:.94rem;line-height:1.45;margin-top:min(.8rem,1.4vh)}
  .hero .row{margin-top:min(1.2rem,2vh)}
  .hero>.marq-hero{margin-top:min(28px,3vh)}
}
/* Portada = primera pantalla entera, con las marcas abajo y separadas del resto; «No hace falta que nos llames»
   empieza al bajar. En móvil y en ordenador. El bloque de texto queda centrado en el espacio libre. */
main[data-apilar]>.hero:first-child:has(>.marq-hero){display:flex!important;flex-direction:column;min-height:calc(100vh - var(--nav-h,64px) - var(--banner-h,0px))!important;min-height:calc(100svh - var(--nav-h,64px) - var(--banner-h,0px))!important;padding-bottom:0!important}
main[data-apilar]>.hero:first-child:has(>.marq-hero)>.wrap{margin-block:auto;width:min(1240px,100% - 32px)}
main[data-apilar]>.hero:first-child:has(>.marq-hero)>.marq-hero{margin-top:clamp(20px,4vh,48px);flex:none}
/* Barra superior en iPhone (Safari y app): el margen de la muesca solo en la barra (antes se sumaba también en la
   página y la barra «subía» ese hueco al bajar). overflow-x:clip no rompe la barra fija como hacía hidden. */
body{padding-top:0}
@supports (overflow:clip){body{overflow-x:clip}}
/* Barra móvil con idioma: todo en una línea hasta 320 px. En los más estrechos «Entrar» se quita de la barra
   (se entra desde «Registrarse» → «¿Ya tienes cuenta? Entrar») */
@media (max-width:400px){
  .brand .nombre{width:112px}
  .nav .wrap{gap:.35rem}
  .nav-r{gap:.3rem}
  .nav-r .btn-sm{padding:.5rem .55rem;font-size:.6rem;letter-spacing:.05em}
  .nav-r .lang{min-width:30px;height:32px;min-height:32px;padding:0 .25rem;font-size:.7rem}
  .nav-r .burger{width:34px;height:34px}
}
@media (max-width:345px){.nav-r [data-auth="entrar"]{display:none!important}}
/* ---------- Ventanas de «Todo lo que ofrecemos»: opciones como filas clicables con su precio ---------- */
.of-ventana h3{font-family:var(--display);font-weight:300;font-size:clamp(1.7rem,4vw,2.3rem);letter-spacing:-.035em;color:var(--beige);line-height:1.05}
.of-sala{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:1.2rem;padding:4px;border:1px solid var(--l);border-radius:999px}
.of-sala button{padding:.6rem .8rem;border-radius:999px;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--b70);transition:background-color .2s ease,color .2s ease}
.of-sala button.on{background:var(--beige);color:#161614}
.of-ops{display:grid;gap:8px}
.of-op{display:grid;grid-template-columns:1fr auto 32px;align-items:center;gap:14px;width:100%;text-align:left;padding:14px 16px;border:1px solid var(--l);border-radius:14px;color:var(--blanco);text-decoration:none;background:none;cursor:pointer;transition:border-color .2s ease,background-color .2s ease,transform .16s ease}
.of-op:active{transform:scale(.985)}
.of-op-n b{display:block;font-family:var(--display);font-weight:400;font-size:1.25rem;letter-spacing:-.02em}
.of-op-n small,.of-op-p small{display:block;color:var(--b70);font-size:.8rem;margin-top:.15rem}
.of-op-p{text-align:right}
.of-op-p b{font-family:var(--display);font-weight:300;font-size:1.35rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.of-op-p em{font-style:normal;color:var(--beige)}
.of-op-ir{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--l);border-radius:50%;color:var(--beige);transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.of-op.pop{border-color:rgba(232,220,196,.5);background:rgba(232,220,196,.05)}
@media(hover:hover) and (pointer:fine){.of-op:hover{border-color:var(--beige);background:rgba(232,220,196,.06)}.of-op:hover .of-op-ir{background:var(--beige);color:#161614;border-color:var(--beige)}}
.of-pista{font-size:.86rem;color:var(--b70)}
.of-link{color:var(--beige);text-decoration:underline;text-underline-offset:3px;font:inherit;padding:0;background:none;cursor:pointer}
.of-mem{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.of-mem>div{border:1px solid var(--l);border-radius:14px;padding:14px;text-align:center}
.of-mem b{display:block;font-family:var(--display);font-weight:300;font-size:clamp(1.3rem,4vw,1.7rem);letter-spacing:-.03em;color:var(--beige)}
.of-mem small{font-size:.75rem;color:var(--b70)}
.of-ahorro{font-size:1rem}.of-ahorro b{color:var(--beige)}
.of-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--l);padding-top:12px}
.of-total b{font-family:var(--display);font-weight:300;font-size:1.8rem;letter-spacing:-.03em}
@media(max-width:480px){.of-op{grid-template-columns:1fr auto;padding:12px 14px}.of-op-ir{display:none}.of-mem{grid-template-columns:1fr 1fr 1fr;gap:6px}.of-mem>div{padding:10px 6px}}
/* ---------- Tarifas · carta: hora suelta, packs y Day Pass con todas sus opciones a la vista y compra directa ---------- */
#formas.fv{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) minmax(0,1fr);gap:14px;align-items:start}
.tc-col{border:1px solid var(--l);border-radius:20px;padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;gap:.7rem;min-width:0;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0))}
.tc-col.pop{border-color:rgba(232,220,196,.5)}
.tc-cab{display:flex;justify-content:space-between;align-items:center;gap:10px}
.tc-col h3{font-family:var(--display);font-weight:300;font-size:clamp(1.4rem,1.9vw,1.75rem);letter-spacing:-.03em;line-height:1.1;color:var(--beige)}
.tc-precio b{font-family:var(--display);font-weight:200;font-size:clamp(2.8rem,4.4vw,3.8rem);letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.tc-precio small{display:block;margin-top:.4rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--b70)}
.tc-nota{color:var(--b70);font-size:.92rem;line-height:1.45}
.tc-btn{align-self:flex-start;margin-top:.3rem}
.tc-mem{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--l)}
.tc-mem p{margin-top:.4rem;font-size:.95rem}.tc-mem b{font-family:var(--display);font-weight:300;font-size:1.3rem;color:var(--beige)}
.tc-mem .of-link{margin-top:.4rem;font-size:.9rem}
.tc-col .of-ops{margin-top:.2rem}
@media(max-width:1100px){#formas.fv{grid-template-columns:1fr 1fr}#formas.fv>.tc-col:first-child{grid-column:1/-1}}
@media(max-width:760px){#formas.fv{grid-template-columns:1fr}#formas.fv>.tc-col:first-child{grid-column:auto}}
/* Portátiles bajos (720–760 px de alto): un punto más compacta para que, con franja de aviso, las marcas sigan entrando */
@media(min-width:761px) and (max-height:780px){
  main[data-apilar]>.hero:first-child:has(>.marq-hero) .disc{width:min(300px,19vh)}
  main[data-apilar]>.hero:first-child:has(>.marq-hero) h1{font-size:min(calc(clamp(2.8rem,8vw,7rem) * var(--k-tit,1)),9.4vh)}
  main[data-apilar]>.hero:first-child:has(>.marq-hero) .lbl{margin-top:1.2vh}
  main[data-apilar]>.hero:first-child:has(>.marq-hero)>.marq-hero{margin-top:2.5vh}
}
/* Marcas un poco más arriba (28/10): con aire debajo, para que ninguna barra del navegador (la flotante de Safari en
   iPhone, la de gestos de Android) la tape; el texto de la portada sigue centrado en el espacio que queda arriba */
main[data-apilar]>.hero:first-child:has(>.marq-hero)>.marq-hero{margin-bottom:max(calc(env(safe-area-inset-bottom) + 28px),9vh)}
@media(min-width:761px){main[data-apilar]>.hero:first-child:has(>.marq-hero)>.marq-hero{margin-bottom:max(36px,7vh)}}
/* Mi cuenta: la reserva recién hecha se ilumina un momento al llegar */
.resv.recien{animation:recien 2.4s cubic-bezier(.23,1,.32,1) both}
@keyframes recien{0%,35%{box-shadow:0 0 0 2px var(--beige),0 0 40px -8px rgba(232,220,196,.55)}100%{box-shadow:0 0 0 0 transparent}}
@media(prefers-reduced-motion:reduce){.resv.recien{animation:none;outline:2px solid var(--beige)}}
/* ---------- Mi cuenta · saldo regalo, avisos e invitar: tres tarjetas a juego con la web ---------- */
.ext-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ext{position:relative;display:flex;flex-direction:column;gap:.55rem;padding:clamp(20px,2.2vw,28px);border:1px solid var(--l);border-radius:20px;overflow:hidden;
  background:radial-gradient(120% 90% at 100% 0%,rgba(232,220,196,.08),rgba(232,220,196,0) 60%),linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0));
  transition:border-color .25s ease,transform .25s cubic-bezier(.23,1,.32,1)}
@media(hover:hover) and (pointer:fine){.ext:hover{border-color:rgba(232,220,196,.45);transform:translateY(-2px)}}
.ext-cab{display:flex;align-items:center;gap:.7rem}
.ext-ic{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:12px;background:rgba(232,220,196,.1);color:var(--beige)}
.ext-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ext-cifra{font-family:var(--display);font-weight:200;font-size:clamp(2.4rem,3.6vw,3.2rem);letter-spacing:-.05em;line-height:1;color:var(--beige);margin-top:.4rem;font-variant-numeric:tabular-nums}
.ext-cifra small{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--b70);margin-left:.45rem;font-weight:400}
.ext-txt{color:var(--b70);font-size:.9rem;line-height:1.45}
.ext-canje{display:flex;gap:.5rem;flex-wrap:nowrap;margin-top:auto}
.ext-canje input{flex:1;min-width:0;height:42px;padding:0 .9rem;border:1px solid var(--l);border-radius:999px;background:transparent;color:var(--blanco);font-family:var(--mono);font-size:.78rem;letter-spacing:.06em}
.ext-canje input:focus{outline:none;border-color:var(--beige)}
.ext-acc{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:auto}
.ext-link{color:var(--beige);font-size:.88rem;text-decoration:underline;text-underline-offset:3px}
.ext-pie{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--b70)}
@media(max-width:980px){.ext-grid{grid-template-columns:1fr 1fr}.ext-grid>.ext:last-child{grid-column:1/-1}}
@media(max-width:640px){.ext-grid{grid-template-columns:1fr}.ext-grid>.ext:last-child{grid-column:auto}}
/* Mi cuenta · tu saldo: cada pack o Day Pass en su tarjeta, con la barra de horas que quedan */
#credits.grid{gap:14px;border:0;background:none}
#credits.grid>.cell{border:1px solid var(--l);border-radius:20px;padding:clamp(20px,2.2vw,28px);background:radial-gradient(120% 90% at 100% 0%,rgba(232,220,196,.07),rgba(232,220,196,0) 60%);transition:border-color .25s ease}
#credits.grid>.cell.hl{border-color:rgba(232,220,196,.5)}
@media(hover:hover) and (pointer:fine){#credits.grid>.cell:hover{border-color:rgba(232,220,196,.45)}}
.sal-barra{height:6px;border-radius:999px;background:rgba(232,220,196,.12);overflow:hidden;margin:.7rem 0 .2rem}
.sal-barra i{display:block;height:100%;border-radius:inherit;background:var(--beige);transform-origin:0 50%;animation:salBarra 1s cubic-bezier(.23,1,.32,1) both}
@keyframes salBarra{from{transform:scaleX(0)}}
@media(prefers-reduced-motion:reduce){.sal-barra i{animation:none}}
/* ---------- Reservar en ventana (desde cualquier página) ---------- */
@media (pointer:coarse){html.rsv-bloqueo,html.rsv-bloqueo body{overflow:hidden}} /* en el ordenador no: quitar la barra movía la página */
.rsv-capa{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:clamp(0px,3vh,32px) clamp(0px,3vw,32px);background:rgba(10,10,9,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s .22s}
.rsv-capa.abierta{opacity:1;visibility:visible;transition:opacity .22s ease}
.rsv-hoja{position:relative;width:min(1100px,100%);height:min(920px,100%);background:var(--tinta);border:1px solid rgba(232,220,196,.25);border-radius:22px;overflow:hidden;
  box-shadow:0 40px 120px -30px rgba(0,0,0,.8);transform:translateY(18px);transition:transform .32s cubic-bezier(.23,1,.32,1)}
.rsv-capa.abierta .rsv-hoja{transform:none}
.rsv-frame{display:block;width:100%;height:100%;border:0;background:var(--tinta);opacity:1;transition:opacity .2s ease}
.rsv-capa.cargando .rsv-frame{opacity:0}
.rsv-x{position:absolute;top:12px;right:12px;z-index:3;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:1.5rem;line-height:1;color:var(--beige);background:rgba(22,22,20,.85);border:1px solid rgba(232,220,196,.3);cursor:pointer}
.rsv-carga{position:absolute;inset:0;display:none;place-items:center}
.rsv-capa.cargando .rsv-carga{display:grid}
.rsv-carga span{width:34px;height:34px;border-radius:50%;border:2px solid rgba(232,220,196,.2);border-top-color:var(--beige);animation:rsvGira .8s linear infinite}
@keyframes rsvGira{to{transform:rotate(360deg)}}
@media(max-width:760px){.rsv-capa{padding:0}.rsv-hoja{width:100%;height:100%;border-radius:0;border:0}.rsv-x{top:calc(10px + env(safe-area-inset-top));right:10px}}
@media(prefers-reduced-motion:reduce){.rsv-capa,.rsv-hoja{transition:none}}
/* la página de reservas dentro de la ventana: sin menú, sin pie, sin disco; empieza arriba */
html.mb-embed .nav,html.mb-embed footer,html.mb-embed .banner,html.mb-embed .install,html.mb-embed .mb-progreso,html.mb-embed .cur,html.mb-embed .disc,html.mb-embed .mb-pie-logo{display:none!important}
html.mb-embed body{padding-top:0;min-height:0}
html.mb-embed main>section:first-child{padding-top:clamp(22px,4vh,40px)!important}
/* Tarifas · tarjeta regalo con el mismo diseño que en el inicio (texto + tarjeta dibujada); el formulario, en ventana */
.of-regalo-tar{cursor:default}
.of-regalo-h{font-family:var(--display);font-weight:200;font-size:clamp(2.2rem,4.4vw,3.8rem);letter-spacing:-.045em;line-height:1;color:var(--beige);margin-top:.6rem}
.of-regalo-nota{font-size:.86rem;color:var(--b70);margin-top:.8rem}
.of-regalo-tar .ventana-btn{margin-top:1.4rem}
#regalo .split{display:block}
/* ---------- Reserva dentro de la ventana: breve, sin tener que bajar en ordenador ---------- */
html.mb-embed .cabecera{padding-bottom:0!important}
html.mb-embed .cabecera .cab-fila{margin:0}
html.mb-embed .cabecera .cab-fila .lbl{display:none}
html.mb-embed .cabecera h1{font-size:clamp(1.5rem,2.4vw,1.9rem)!important;margin:0!important;line-height:1.1;padding-right:56px}
html.mb-embed #gate.mt2{margin-top:.8rem}
html.mb-embed .rsv-quien{margin:0;font-size:.85rem}
html.mb-embed #booking.mt3{margin-top:1rem}
html.mb-embed .rsv.asis{max-width:none}
html.mb-embed .rsv.asis[data-paso="3"]{max-width:none;grid-template-columns:minmax(0,1fr) 380px}
html.mb-embed .rsv-paso{padding:18px 20px}
html.mb-embed .rsv-prog{gap:6px}
/* paso 1: los estudios con foto apaisada y baja */
html.mb-embed .box-fotos figure{aspect-ratio:21/8}
html.mb-embed .rsv-box.mt2{margin-top:.9rem}
html.mb-embed #servInfo{padding:.6rem .9rem;font-size:.86rem}
/* paso 4: primero lo que decide (total, aceptar, pagar); los extras (código, sugerencia, condiciones) debajo */
html.mb-embed .rsv-resumen{position:static;padding:18px 20px;gap:10px}
html.mb-embed .rsv-resumen>.lbl{order:0}
html.mb-embed .rsv-resumen>#sum{order:1}
html.mb-embed .rsv-resumen>#errs{order:2}
html.mb-embed .rsv-resumen>.acepto{order:3}
html.mb-embed .rsv-resumen>#go{order:4;width:100%;justify-content:center}
html.mb-embed .rsv-resumen>.rsv-seguro{order:5;font-size:.78rem}
html.mb-embed .rsv-resumen>#cbBox{order:6}
html.mb-embed .rsv-resumen>.rsv-pol{order:7;font-size:.78rem;line-height:1.45}
html.mb-embed .rsv-resumen .sum>div{padding:.45rem 0}
html.mb-embed .rsv-sugerencia{font-size:.82rem;padding:.6rem .8rem}
/* cuenta: formularios más compactos */
html.mb-embed #gate .cell{padding:18px 20px}
html.mb-embed #gate .f{margin-top:.55rem}
html.mb-embed #gate input:not([type=checkbox]):not([type=radio]){padding:.62rem .85rem}
html.mb-embed #gate h3{font-size:1.25rem}
html.mb-embed #gate .cell>p{font-size:.86rem;margin-top:.3rem}
html.mb-embed .rsv-barra{display:none!important}
@media(max-width:760px){html.mb-embed .cabecera{padding-top:14px!important}html.mb-embed .box-fotos figure{aspect-ratio:16/7}html.mb-embed .rsv-paso{padding:16px 14px}}
html.mb-embed .box-fotos figure,html.mb-embed .box-fotos figure.photo{aspect-ratio:auto!important;height:clamp(96px,17vh,150px)!important}
html.mb-embed .box-fotos figure img{height:100%!important}
@media(max-width:760px){html.mb-embed .box-fotos figure,html.mb-embed .box-fotos figure.photo{height:84px!important}}
/* Tarifas · primera pantalla: cabecera baja y selector de sala en píldora, para que la carta se vea sin bajar */
#precios{padding-top:clamp(20px,3.5vh,44px)!important}
#precios .tit-disco{align-items:center;margin-bottom:0}
#precios .tit-pag{font-size:clamp(2.6rem,5.2vw,4.4rem)!important;line-height:1}
#precios .sec-head p{margin-top:.5rem;font-size:.95rem;max-width:58ch}
#precios .tit-disco .disc{width:clamp(80px,9vw,128px)!important}
#precios .box-sw{display:inline-grid;grid-template-columns:auto auto;gap:4px;padding:4px;margin-top:clamp(14px,2.4vh,24px);border:1px solid var(--l);border-radius:999px}
#precios .box-sw button{display:flex;align-items:baseline;gap:.6rem;padding:.6rem 1.2rem;border:0;border-radius:999px;background:none}
#precios .box-sw button b{font-size:1rem}
#precios .box-sw button>small{font-size:.74rem}
#precios .box-sw button.on{background:var(--beige);color:#161614}
#precios .box-sw button.on>small{color:rgba(22,22,20,.7)}
#formas.fv.mt2{margin-top:clamp(14px,2.4vh,24px)}
#formas .tc-col{padding:clamp(18px,1.8vw,24px);gap:.55rem}
#formas .tc-col h3{font-size:clamp(1.25rem,1.6vw,1.5rem)}
#formas .tc-precio b{font-size:clamp(2.4rem,3.6vw,3.2rem)}
#formas .of-ops{gap:6px}
#formas .of-op{padding:10px 14px}
#formas .of-op-n b{font-size:1.1rem}
#formas .of-op-p b{font-size:1.2rem}
@media(max-width:640px){#precios .box-sw{display:grid;grid-template-columns:1fr 1fr;width:100%}#precios .box-sw button{justify-content:center;padding:.6rem .5rem}#precios .box-sw button>small{display:none}}
@media(min-width:900px) and (max-height:800px){
  #precios .tit-pag{font-size:clamp(2.2rem,4vw,3.2rem)!important}
  #precios .sec-head p{font-size:.86rem;margin-top:.3rem}
  #precios .tit-disco .disc{width:72px!important}
  #formas .tc-precio b{font-size:2.4rem}
  #formas .of-op{padding:8px 12px}
  #formas .tc-nota{font-size:.85rem}
}
@media(min-width:900px) and (max-height:740px){#formas .tc-col{padding:16px 18px;gap:.4rem}#formas .of-op{padding:7px 12px}#formas .of-ops{gap:5px}#precios .box-sw{margin-top:10px}#formas.fv.mt2{margin-top:12px}}
#precios .box-sw button.on b,#precios .box-sw button.on{color:#161614!important}
/* Tarjeta regalo: la caja con borde de antes (en el inicio y en Tarifas), a la derecha del texto */
.of-tarjeta-caja{justify-self:end;width:min(100%,380px);padding:clamp(22px,2.4vw,30px)}
.of-tarjeta-caja .price small{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--b70);margin-bottom:.35rem}
@media(max-width:760px){.of-tarjeta-caja{justify-self:stretch;width:100%;order:0}}
/* Membresía · ¿Es para ti?: tres perfiles de artista y las plazas limitadas */
.mem-perfiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(20px,3vw,36px)}
.mem-perfiles article{position:relative;border:1px solid var(--l);border-radius:20px;padding:clamp(22px,2.4vw,30px);background:radial-gradient(140% 100% at 100% 0%,rgba(232,220,196,.08),rgba(232,220,196,0) 55%);transition:border-color .3s ease,transform .3s cubic-bezier(.23,1,.32,1)}
.mem-perfiles h3{font-family:var(--display);font-weight:300;font-size:clamp(1.35rem,1.8vw,1.7rem);letter-spacing:-.03em;color:var(--beige);margin-top:.6rem}
.mem-perfiles p{color:var(--b70);margin-top:.6rem;font-size:.95rem;line-height:1.5}
.mem-p-n{font-family:var(--display);font-weight:200;font-size:2.4rem;letter-spacing:-.04em;color:var(--beige);opacity:.6;line-height:1}
@media(hover:hover) and (pointer:fine){.mem-perfiles article:hover{border-color:rgba(232,220,196,.5);transform:translateY(-4px)}}
.mem-escasez{margin-top:clamp(20px,3vw,32px);padding:16px 20px;border:1px dashed rgba(232,220,196,.45);border-radius:14px;color:var(--b70);font-size:.95rem}
.mem-escasez b{color:var(--beige);font-weight:500}
@media(max-width:900px){.mem-perfiles{grid-template-columns:1fr}}
.of-profes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.of-profes>div{border:1px solid var(--l);border-radius:14px;padding:12px 14px}
.of-profes b{display:block;font-weight:500;color:var(--beige);font-size:.95rem;margin-top:.2rem}
.of-profes p{font-size:.84rem;color:var(--b70);line-height:1.4;margin-top:.25rem}
.of-pn{font-family:var(--display);font-weight:200;font-size:1.3rem;color:var(--beige);opacity:.6}
@media(max-width:560px){.of-profes{gap:6px}.of-profes>div{padding:10px 11px}.of-pn{display:none}.of-profes b{font-size:.86rem;margin:0}.of-profes p{font-size:.76rem}}
.btn.mb-foco,a.btn.mb-foco{border-radius:999px;outline-offset:4px}
.of-regalo-mini .of-tarjeta{width:min(100%,280px);margin:0 auto;padding:16px 18px}.of-regalo-mini .of-tarjeta b{font-size:2.2rem}
/* Tarifas · elegir estudio: dos tarjetas finas, con punto de selección y su precio por hora */
#precios .box-sw{display:grid!important;grid-template-columns:1fr 1fr;gap:10px;padding:0;border:0;border-radius:0;max-width:760px}
#precios .box-sw button.bsw{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:12px 18px;border:1px solid var(--l);border-radius:16px;background:transparent;color:var(--blanco)!important;text-align:left;transition:border-color .2s ease,background-color .2s ease}
#precios .box-sw button.bsw.on{border-color:var(--beige);background:linear-gradient(180deg,rgba(232,220,196,.10),rgba(232,220,196,.02))}
#precios .box-sw button.bsw b{font-family:var(--display);font-weight:400;font-size:1.1rem;color:var(--blanco)!important}
#precios .box-sw button.bsw.on b{color:var(--beige)!important}
#precios .box-sw .bsw-t{display:grid;gap:.1rem;min-width:0}
#precios .box-sw .bsw-t small{font-size:.76rem;color:var(--b70)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#precios .bsw-dot{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--l);display:grid;place-items:center;flex:none}
#precios .bsw.on .bsw-dot{border-color:var(--beige)}
#precios .bsw.on .bsw-dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--beige)}
#precios .bsw-p{font-family:var(--display);font-weight:300;font-size:1.25rem;color:var(--beige);white-space:nowrap}
#precios .bsw-p small{font-size:.75rem;color:var(--b70);margin-left:.1rem}
@media(hover:hover) and (pointer:fine){#precios .box-sw button.bsw:not(.on):hover{border-color:rgba(232,220,196,.45)}}
@media(max-width:640px){#precios .box-sw button.bsw{grid-template-columns:auto 1fr;padding:10px 12px;gap:10px}#precios .bsw-p{grid-column:2;font-size:1rem}#precios .box-sw .bsw-t small{display:none}}
#precios .box-sw button.bsw{grid-template-areas:none}
#precios .box-sw .bsw-t b,#precios .box-sw .bsw-t small{grid-area:auto;text-align:left;justify-self:start}
#precios .box-sw .bsw-p{grid-area:auto}
@media(max-width:640px){#precios .box-sw button.bsw{grid-template-columns:auto 1fr auto}#precios .bsw-p{grid-column:auto}}
@media(max-width:640px){#precios .box-sw button.bsw{grid-template-columns:auto 1fr;row-gap:2px}#precios .bsw-dot{grid-row:span 2}#precios .bsw-p{grid-column:2;font-size:.95rem}#precios .box-sw button.bsw b{font-size:1rem;white-space:nowrap}}

/* ventana del equipo de cada sala */
.of-equipo .of-eq-foto{display:block;margin:0 0 1rem;border-radius:14px;overflow:hidden;aspect-ratio:16/7}
.of-equipo .of-eq-foto img{width:100%;height:100%;object-fit:cover}
.of-equipo h2{font-family:var(--display);font-weight:300;font-size:clamp(1.8rem,4vw,2.4rem);letter-spacing:-.035em;color:var(--beige)}
.of-equipo .bx-tit{color:var(--b70);margin-top:.2rem}
.of-equipo .lead{font-size:.98rem}
.of-equipo .bx-det-eq{margin-top:1.4rem}
.of-equipo .bx-det-eq h3,.of-equipo .bx-ideal h3{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--b70);font-weight:400}
.of-equipo .bx-eq-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:.7rem;padding:0;list-style:none}
.of-equipo .bx-eq-grid li{border:1px solid var(--l);border-radius:12px;padding:10px 12px;display:grid;gap:.15rem}
.of-equipo .bx-eq-grid b{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--beige);font-weight:400}
.of-equipo .bx-eq-grid span{font-size:.88rem}
.of-equipo .bx-ideal{margin-top:1.2rem}
@media(max-width:560px){.of-equipo .bx-eq-grid{grid-template-columns:1fr}}
.of-equipo .bx-eq-grid li{display:flex!important;flex-direction:column;grid-template-columns:none!important;gap:.2rem}
.of-equipo .bx-eq-grid li span{text-align:left}
.of-equipo .of-eq-foto{aspect-ratio:auto!important;height:clamp(140px,26vh,230px)!important}
/* Inicio · «Todo lo que ofrecemos» en el móvil: dos columnas, tarjetas cortas (qué es y cuánto cuesta) */
@media(max-width:760px){
  .of-cab .lead{font-size:.9rem}
  .of-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .of-c{display:flex!important;flex-direction:column;gap:.25rem;min-height:0;padding:14px 13px 12px!important;border-radius:16px}
  .of-c>*{grid-column:auto}
  .of-c .lbl{font-size:.56rem;letter-spacing:.12em}
  .of-c h3{font-size:1.12rem!important;margin-top:.15rem;line-height:1.1}
  .of-c p{display:none}
  .of-pie{margin-top:auto;padding-top:.6rem;align-items:center}
  .of-pie b{font-size:1.3rem!important}
  .of-pie b small{font-size:.52rem;margin-left:.2rem}
  .of-pie b small.of-desde{margin:0 0 .15rem}
  .of-ir{flex:0 0 28px;height:28px;font-size:.8rem}
  .of-regalo{grid-template-columns:1fr auto!important;gap:14px!important;padding:16px!important;align-items:center}
  .of-regalo .of-tarjeta{order:0!important;width:110px!important;padding:10px 11px!important;border-radius:10px;transform:rotate(-4deg)}
  .of-regalo .of-tarjeta .of-t-logo{font-size:.55rem}
  .of-regalo .of-tarjeta b{font-size:1.3rem!important}
  .of-regalo .of-tarjeta .of-t-pie{display:none}
  .of-regalo h3{font-size:1.35rem!important;margin-top:.3rem}
  .of-regalo p{display:none}
  .of-regalo .btn{margin-top:.8rem!important;padding:.6rem 1rem;font-size:.66rem}
}
/* móviles estrechos: las tarjetas de «Más que horas de estudio» no se salen (sus botones bajan de línea) */
@media(max-width:480px){.mas .grid>.card{min-width:0}.mas .card .row{flex-wrap:wrap;gap:8px}.mas .card .btn{white-space:normal;max-width:100%}}
/* Barra de arriba: sólida y nítida de arriba abajo (el desenfoque de cristal se veía irregular en el iPhone,
   sobre todo en la franja de la hora y al estirar la página) */
.nav{background:var(--tinta)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
/* Inicio · tarjeta regalo en el móvil: la tarjeta dorada arriba, entera y centrada; texto y botón debajo */
@media(max-width:760px){
  .of-regalo{grid-template-columns:1fr!important;justify-items:stretch;gap:12px!important;padding:20px 18px!important;overflow:visible}
  .of-regalo .of-tarjeta{order:-1!important;justify-self:center;width:min(220px,70%)!important;padding:14px 16px!important;border-radius:14px;transform:rotate(-3deg);margin:4px 0 6px}
  .of-regalo .of-tarjeta .of-t-logo{font-size:.7rem}
  .of-regalo .of-tarjeta b{font-size:2rem!important}
  .of-regalo .of-tarjeta .of-t-pie{display:block;font-size:.5rem}
  .of-regalo .btn{display:flex;justify-content:center;width:100%;margin-top:.9rem!important}
}
/* La sección siguiente se monta 26 px sobre la portada (esquinas redondeadas): la portada mide esos 26 px más para
   que al abrir no asome nada de «No hace falta que nos llames»; aparece al bajar. Las marcas siguen a la vista. */
main[data-apilar]>.hero:first-child:has(>.marq-hero){min-height:calc(100vh - var(--nav-h,64px) - var(--banner-h,0px) + 26px)!important;min-height:calc(100svh - var(--nav-h,64px) - var(--banner-h,0px) + 26px)!important}
main[data-apilar]>.hero:first-child:has(>.marq-hero)>.marq-hero{margin-bottom:calc(max(calc(env(safe-area-inset-bottom) + 28px),9vh) + 26px)}
@media(min-width:761px){main[data-apilar]>.hero:first-child:has(>.marq-hero)>.marq-hero{margin-bottom:calc(max(36px,7vh) + 26px)}}
@media(max-width:760px) and (max-height:600px){main[data-apilar]>.hero:first-child:has(>.marq-hero)>.marq-hero{margin-bottom:calc(18px + 26px)}}
@media(max-width:760px) and (max-height:600px){.hero.vivo .disc,.hero .disc{width:min(110px,15vh)!important}.hero h1{font-size:min(calc(clamp(2.8rem,8vw,7rem) * var(--k-tit,1)),6.6vh)!important}.hero .lead{font-size:.86rem!important;line-height:1.4}.hero .row{margin-top:.8rem!important}.hero .lbl{margin-top:8px!important}}

/* Sin saltos al cargar (CLS): mientras ui.js no ha puesto la barra, su sitio queda reservado; las páginas cortas no
   enseñan el pie arriba mientras cargan, y los precios de Tarifas tienen su alto antes de pintarse */
body:not([data-panel])>main:not([data-apilar]){min-height:calc(100vh - 69px - var(--banner-h,0px));min-height:calc(100svh - 69px - var(--banner-h,0px))}
#boxSw:empty{min-height:72px}
#formas:empty{min-height:1280px}
@media(min-width:761px){#boxSw:empty{min-height:74px}#formas:empty{min-height:861px}}
@media(min-width:1180px){#formas:empty{min-height:467px}}
/* Móviles muy estrechos (320-380 px): un botón con texto largo parte en dos líneas en vez de ensanchar su bloque */
@media(max-width:380px){main .btn{white-space:normal;max-width:100%;text-align:center;justify-content:center}main .wrap>div,main .wrap>div>*{min-width:0}}
/* Móvil en horizontal (pantalla muy baja): la portada cabe entera con la tira de marcas a la vista, como en vertical */
@media (max-height:500px) and (orientation:landscape){
  main[data-apilar]>.hero:first-child:has(>.marq-hero){padding-top:10px!important;min-height:calc(100svh - var(--nav-h,64px) - var(--banner-h,0px))!important}
  main[data-apilar]>.hero:first-child:has(>.marq-hero)>.marq-hero{margin-bottom:calc(10px + env(safe-area-inset-bottom))!important}
  .hero.vivo .disc,.hero .disc{width:min(64px,13vh)!important;margin-bottom:4px!important}
  .hero .lbl{display:none!important}
  .hero h1{font-size:min(calc(clamp(2.8rem,8vw,7rem) * var(--k-tit,1)),9.5vh)!important;margin-top:4px!important;margin-bottom:4px!important}
  .hero h1{max-width:none!important}.hero h1 br{display:none}
  .hero .lead{font-size:.8rem!important;line-height:1.35;max-width:min(64rem,92vw)!important;margin-top:4px!important}
  .hero .row{margin-top:.5rem!important}.hero .row .btn{padding-block:.55rem!important}
}

/* ---------- ventanas (registro, tarjeta regalo, presupuesto, ofertas): caben siempre en el móvil ----------
   dvh = la altura que de verdad se ve con las barras de Safari; con 92vh el final de la ventana (el botón de pago,
   «Entrar con Google») quedaba tapado por la barra. El importe y los pasos no se parten en dos líneas. */
.modal{height:100vh;height:100dvh;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))}
.sheet{max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:max(clamp(22px,3vw,34px),env(safe-area-inset-bottom))}
/* bloquear la página de detrás solo en pantallas táctiles: en el ordenador quitar la barra de desplazamiento
   ensanchaba toda la página de golpe al abrir la ventana (parecía un zoom) */
@media (pointer:coarse){html:has(.modal.open){overflow:hidden}}
html{scrollbar-gutter:stable}
#mbModal .form{grid-template-columns:minmax(0,1fr)}
@media(min-width:621px){#mbModal .form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
#mbModal .seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
#mbModal .seg button{min-width:0;padding-inline:.15rem;white-space:nowrap}
#mbModal .seg button small{white-space:nowrap}
@media(max-width:480px){
  #mbModal .pasos{flex-wrap:nowrap;gap:.25rem;margin-right:2rem}
  #mbModal .pasos span{padding:.3rem .5rem .3rem .3rem;gap:.3rem;font-size:.6rem}
  #mbModal .pasos span:not(.on){font-size:0;gap:0;padding-right:.3rem}
  #mbModal .pasos span:not(.on) i{font-size:.62rem}
}
#mbModal .btn-lg,#mbModal form .btn{max-width:100%;white-space:normal;text-align:center}
@media(max-width:360px){#mbModal .seg button{font-size:.7rem;letter-spacing:0}}

/* ---------- app instalada (iPhone): la zona del reloj y la batería es siempre un bloque sólido ----------
   Dentro de la ventana de reservas el contenido empezaba debajo del reloj y se veía pasar por detrás; ahora la ventana
   empieza justo debajo y esa franja es del mismo color que el menú. Sin rebote de la página al tirar hacia abajo. */
@media(max-width:760px){
  .rsv-capa{padding:env(safe-area-inset-top) 0 0;background:var(--tinta)}
  .rsv-x{top:10px}
}
@media (display-mode: standalone){
  html,body{overscroll-behavior-y:none}
  html{background:var(--tinta)}
  body::before{height:max(env(safe-area-inset-top),0px);background:var(--tinta);z-index:400}
}
/* dentro de la ventana de reservas la franja del reloj ya la pone la ventana: la página de dentro no suma otra */
html.mb-embed body{padding-top:0}
html.mb-embed body::before{display:none}
html.mb-embed .nav{padding-top:0}

/* ---------- menú fijo de verdad (iPhone) ----------
   «sticky» en la app instalada del iPhone se queda parado más abajo del borde y deja ver pasar la página por encima
   del menú, en la franja del reloj. Ahora el menú es «fixed» (siempre pegado al borde de la pantalla, con el relleno
   de la zona del reloj dentro) y la página deja debajo el sitio que ocupa. */
body:not([data-panel]) .nav{position:fixed;top:0;left:0;right:0;width:100%}
html:not(.mb-embed) body:not([data-panel]){padding-top:var(--nav-h,calc(69px + env(safe-area-inset-top)))}
html.mb-embed body{padding-top:0}
/* contraseñas: el ojo para ver lo que escribes, dentro del campo y con zona táctil de 44 px */
.pw-caja{position:relative;display:block}
.pw-caja>input{width:100%;padding-right:52px!important}
.pw-ojo{position:absolute;top:50%;right:4px;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;border-radius:8px;color:var(--b70);background:none;border:0;cursor:pointer}
.pw-ojo svg{width:20px;height:20px}
.pw-ojo[aria-pressed="true"]{color:var(--beige)}
.pw-ojo:focus-visible{outline:2px solid var(--beige);outline-offset:-2px}
@media(hover:hover) and (pointer:fine){.pw-ojo:hover{color:var(--beige)}}

/* ---------- ventanas sin «zoom» raro en el iPhone ----------
   1) Safari amplía la página al tocar un campo con letra de menos de 16 px (y corta los textos): en pantallas táctiles
      todos los campos van a 16 px como mínimo, aunque el panel reduzca el tamaño del texto.
   2) La ventana aparece sin escalar (ver anim.css, «VENTANAS»). */
@media (pointer:coarse){input,select,textarea{font-size:max(16px,1em)!important}}
.auth-caja.fuera{transform:none}

/* Mi cuenta · pagos e historial: dos filas con resumen; el detalle se abre en ventana, mes a mes */
.ir-filas{display:grid;gap:10px;max-width:720px}
.ir-fila{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;text-align:left;padding:1rem 1.1rem;border:1px solid var(--l);border-radius:12px;background:var(--tinta-2);color:var(--blanco);cursor:pointer;transition:border-color .2s ease}
.ir-fila b{display:block;font-weight:500}
.ir-fila small{display:block;margin-top:.15rem;color:var(--b45);font-size:.85rem}
.ir-fila .arr{color:var(--beige);flex:none}
.ir-fila:active{transform:scale(.99)}
@media(hover:hover) and (pointer:fine){.ir-fila:hover{border-color:var(--beige)}}
#mbModal .mes{border-top:1px solid var(--l-soft);margin-top:.6rem}
#mbModal .mes summary{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.9rem 0;cursor:pointer;list-style:none;font-weight:500}
#mbModal .mes summary::-webkit-details-marker{display:none}
#mbModal .mes summary::after{content:"+";color:var(--beige);margin-left:.6rem}
#mbModal .mes[open] summary::after{content:"−"}
#mbModal .mes summary .muted{margin-left:auto;font-size:.85rem;font-weight:400}
#mbModal .movs{list-style:none;margin:0 0 .6rem;padding:0}
#mbModal .movs li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.4rem .8rem;align-items:center;padding:.65rem 0;border-bottom:1px solid var(--b08)}
#mbModal .movs li:last-child{border-bottom:0}
#mbModal .movs small{display:block;color:var(--b45);font-size:.82rem;margin-top:.1rem;overflow-wrap:anywhere}
#mbModal .movs b{white-space:nowrap;font-weight:500}
@media(max-width:380px){#mbModal .movs li{grid-template-columns:minmax(0,1fr) auto}#mbModal .movs li>:last-child:not(:empty){grid-column:1/-1;justify-self:start}}
#mbModal .mes summary .muted{white-space:nowrap}

/* Entrar / registrarse con Google: botón blanco de Google (sus colores de marca), separador «o con tu email» */
.btn-google{display:flex;align-items:center;justify-content:center;gap:.7rem;width:100%;min-height:48px;margin:1rem 0 .2rem;padding:.7rem 1rem;border-radius:999px;background:#fff;color:#1f1f1f;border:1px solid #dadce0;font-family:var(--sans);font-size:1rem;font-weight:500;text-decoration:none;transition:background-color .2s ease}
.btn-google svg{width:20px;height:20px;flex:none}
.btn-google:active{transform:scale(.98)}
@media(hover:hover) and (pointer:fine){.btn-google:hover{background:#f2f2f2}}
.btn-google:focus-visible{outline:2px solid var(--beige);outline-offset:3px}
.o-sep{display:flex;align-items:center;gap:.8rem;margin:1rem 0;color:var(--b45);font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.o-sep::before,.o-sep::after{content:"";flex:1;height:1px;background:var(--l-soft)}

/* ---------- barra del móvil sin saturar (02/11/2026) ----------
   Hasta 620 px: logo, idioma, UN botón «Entrar» (con icono) y el menú. «Crear cuenta» y «Entrar» van grandes dentro
   del menú. La ventana de entrar lleva también «Regístrate» y Google. En pantallas grandes, los dos botones de siempre. */
.nav-acceder,.menu-cuenta{display:none}
@media(max-width:1240px){
  .menu-cuenta{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;padding-top:1rem}
  .menu-cuenta .btn{justify-content:center;width:100%}
}
@media(max-width:620px){
  .nav-r [data-auth]:not(.nav-acceder){display:none!important}
  .nav-r .nav-acceder{display:inline-flex!important;align-items:center;gap:.45rem;padding:.55rem .95rem!important;font-size:.75rem!important;letter-spacing:.06em!important}
  .nav-acceder svg{width:16px;height:16px;flex:none}
  .nav .wrap{gap:.6rem}
  .nav-r{gap:.5rem}
  .nav-r .burger{width:40px;height:40px}
}
@media(max-width:360px){.nav-acceder span{display:none}.nav-r .nav-acceder{padding:.55rem!important;width:40px;height:40px;justify-content:center}}
.bx-sala{margin-top:clamp(32px,5vh,56px)}
/* equipo de los boxes: cada aparato con una línea de por qué es bueno */
.bx-eq-grid .eq-desc{display:block;margin-top:.3rem;color:var(--b45);font-size:.86rem;line-height:1.45}
@media(max-width:620px){.bx-eq-grid{grid-template-columns:1fr}.bx-eq-grid li{grid-template-columns:1fr;gap:4px}.bx-eq-grid li>b{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--beige);font-weight:400}}

/* ---------- franja de la hora y la batería (Safari del iPhone) ----------
   Safari deja ver la página pasar por encima del menú, en la franja del reloj. Una banda fija, del color del menú, sube
   por encima del borde del menú y tapa esa franja (fuera de la pantalla no se ve ni molesta). */
html:not(.mb-embed) body:not([data-panel])::after{content:"";position:fixed;left:0;right:0;top:-120px;height:120px;background:var(--tinta);z-index:59;pointer-events:none}

/* ---- Profesores: página visual ---- */
.pf-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,64px);align-items:center}
.pf-hero .photo{aspect-ratio:4/5;max-height:620px}
.pf-flujo{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:clamp(10px,2vw,28px);align-items:stretch;margin-top:clamp(24px,4vw,48px)}
.pf-nodo{border:1px solid var(--l);border-radius:20px;padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:.7rem;background:radial-gradient(140% 100% at 100% 0%,var(--beige-08),transparent 60%)}
.pf-nodo.yo{border-color:var(--beige);background:var(--beige-08)}
.pf-ico{width:56px;height:56px;color:var(--beige)}
.pf-ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pf-nodo h3{font-size:clamp(1.3rem,1.8vw,1.6rem)}
.pf-flecha{align-self:center;color:var(--beige);font-family:var(--mono);font-size:1.6rem}
.pf-aviso{margin-top:clamp(20px,3vw,36px);padding:clamp(18px,2.4vw,28px);border:1px dashed var(--beige);border-radius:16px;text-align:center;font-family:var(--display);font-weight:300;font-size:clamp(1.25rem,2.4vw,1.9rem);letter-spacing:-.03em;color:var(--beige)}
.pf-reparto{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:clamp(20px,3vw,36px)}
.pf-col{border:1px solid var(--l);border-radius:20px;padding:clamp(22px,2.6vw,34px)}
.pf-col.yo{background:var(--beige-08);border-color:var(--beige)}
.pf-col ul{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.75rem}
.pf-col li{display:flex;gap:.75rem;align-items:flex-start}
.pf-col li::before{content:"✦";color:var(--beige);flex:none;line-height:1.5}
.pf-salas{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:clamp(20px,3vw,36px)}
.pf-sala .photo{aspect-ratio:4/3;margin-bottom:1rem;border-radius:16px}
.pf-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.pf-chips span{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--l);border-radius:999px;padding:.3rem .7rem;color:var(--beige)}
.pf-pasos{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1.1rem}
.pf-pasos span{border:1px solid var(--l);border-radius:999px;padding:.35rem .8rem;font-size:.88rem}
.pf-pasos i{font-style:normal;color:var(--beige)}
@media (max-width:900px){
  .pf-hero{grid-template-columns:1fr}.pf-hero .photo{aspect-ratio:16/11;max-height:none}
  .pf-flujo{grid-template-columns:1fr}.pf-flecha{transform:rotate(90deg);justify-self:center}
  .pf-reparto,.pf-salas{grid-template-columns:1fr}
}
.pf-eq{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.6rem;border-top:1px solid var(--l-soft)}
.pf-eq li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);gap:.4rem 1rem;padding:.65rem 0;border-bottom:1px solid var(--l-soft);font-size:.93rem}
.pf-eq b{font-family:var(--mono);font-weight:400;font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;color:var(--beige)}
@media (max-width:560px){.pf-eq li{grid-template-columns:1fr}}