@font-face{font-family:'Outfit';src:url('/fonts/Outfit-Regular.woff2') format('woff2'),url('/fonts/Outfit-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Outfit';src:url('/fonts/Outfit-Bold.woff2') format('woff2'),url('/fonts/Outfit-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{--bg:#f2f4f0;--soft:#eaeee8;--card:#ffffff;--card2:#f6f8f4;--line:#e6ebe3;--tx:#131a15;--mut:#69756c;
--acc:#16a34a;--acc2:#0d7a38;--accd:#e3f3e9;--teal:#0d9488;--star:#f59e0b;--rad:20px;font-size:16px;
--ink:#101a13;--shadow-s:0 1px 2px rgba(15,25,18,.04),0 6px 18px rgba(15,25,18,.05);
--shadow-m:0 2px 6px rgba(15,25,18,.05),0 14px 34px rgba(15,25,18,.09);
--shadow-l:0 10px 24px rgba(15,25,18,.12),0 28px 64px rgba(15,25,18,.16)}
*{box-sizing:border-box;margin:0;padding:0}
/* que [hidden] gane SIEMPRE: las clases con display propio (.btn, .mfbadge…) lo pisaban */
[hidden]{display:none!important}
/* Foco visible con teclado (sin él, quien navega con tabulador no sabe dónde está).
   :focus-visible no aparece al tocar con el dedo ni al hacer clic con el ratón. */
:where(a,button,summary,select,input,textarea,[tabindex]):focus-visible{outline:3px solid rgba(22,163,74,.55);outline-offset:2px;border-radius:10px}
/* Transición suave entre páginas (Chrome/Edge y Safari 18.2+, también dentro de la app):
   cambiar de pantalla se siente como en una app nativa. Sin soporte, no hace nada. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
html{scroll-behavior:smooth}
::selection{background:var(--accd);color:var(--acc2)}
@media(min-width:641px){.hide-l{display:none!important}}
.sportbar{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:57px;z-index:40}
.sportbar-in{display:flex;gap:.5rem;overflow-x:auto;padding:.7rem 1rem;max-width:1180px;margin:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sportbar-in::-webkit-scrollbar{display:none}
.sport{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:.15rem;
  min-width:74px;padding:.5rem .6rem;border:1.5px solid var(--line);border-radius:14px;
  background:var(--bg);text-decoration:none;color:var(--tx);transition:.15s}
.sport:hover{border-color:var(--acc);transform:translateY(-2px)}
.sport .ic{font-size:1.35rem;line-height:1}
.sport .lb{font-size:.74rem;font-weight:600;white-space:nowrap}
.sport .n{font-size:.66rem;color:var(--mut)}
@media(max-width:640px){.sport{min-width:66px;padding:.45rem .5rem}.sport .ic{font-size:1.2rem}.sportbar{position:static}}
/* Quien activa "reducir movimiento" en su sistema no recibe animaciones:
   requisito de accesibilidad (y de mareo real en transiciones largas). */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
html{overflow-x:clip}
@supports not (overflow-x:clip){html,body{overflow-x:hidden}}
body{background:var(--bg);color:var(--tx);font:400 1rem/1.55 'Outfit',system-ui,-apple-system,sans-serif;
min-height:100vh;display:flex;flex-direction:column}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:
radial-gradient(700px 460px at 90% -10%, rgba(22,163,74,.05), transparent 70%)}
a{color:var(--acc2);text-decoration:none;transition:color .15s}
.wrap{width:min(1080px,100% - 2rem);margin-inline:auto}
/* botón-icono circular flotante (volver, favorito, campana, filtros) */
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;
border-radius:50%;background:var(--card);border:0;color:var(--tx);cursor:pointer;font:inherit;font-size:1.05rem;
box-shadow:var(--shadow-s);transition:transform .15s,box-shadow .2s;position:relative;text-decoration:none}
.iconbtn:hover{box-shadow:var(--shadow-m)}
.iconbtn:active{transform:scale(.94)}
.iconbtn svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.iconbtn .idot{position:absolute;top:2px;right:2px;min-width:17px;height:17px;border-radius:99px;background:#ef4444;
color:#fff;font-size:.62rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--card)}
nav{position:sticky;top:0;z-index:50;background:rgba(242,244,240,.88);backdrop-filter:blur(14px) saturate(1.3);
border-bottom:1px solid rgba(230,235,227,.7)}
nav .wrap{display:flex;align-items:center;gap:.55rem;padding:.75rem 0}
.logo{font-weight:700;font-size:1.15rem;color:var(--tx);display:flex;align-items:center;gap:.45rem;white-space:nowrap}
.logo .bolt{color:var(--acc);filter:drop-shadow(0 0 7px rgba(22,163,74,.75));transition:filter .25s}
.logo:hover .bolt{filter:drop-shadow(0 0 12px rgba(22,163,74,1))}
.logo .mark{width:28px;height:28px;flex:none;filter:drop-shadow(0 3px 6px rgba(13,122,56,.28));transition:transform .25s}
.logo:hover .mark{transform:scale(1.06) rotate(-3deg)}
@media(max-width:560px){.logo .suf{display:none}.hide-s{display:none!important}}
nav .sp{flex:1}
.navme{display:flex;align-items:center;gap:.45rem;padding:.25rem .7rem .25rem .3rem;border:1px solid var(--line);
border-radius:99px;font-weight:700;font-size:.88rem;color:var(--tx);transition:border-color .2s,box-shadow .2s;white-space:nowrap}
.navme:hover{border-color:var(--acc);box-shadow:0 0 0 3px rgba(22,163,74,.12)}
@media(max-width:560px){.navme .nm{display:none}.navme{padding:.2rem}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;background:var(--acc);
color:#fff;font-weight:700;border:0;border-radius:999px;padding:.62rem 1.25rem;cursor:pointer;font:inherit;font-size:.95rem;
white-space:nowrap;box-shadow:0 2px 10px rgba(22,163,74,.25);transition:box-shadow .22s,transform .15s,filter .2s}
.btn:hover{box-shadow:0 6px 22px rgba(22,163,74,.4);transform:translateY(-1px)}
.btn.ink{background:var(--ink);box-shadow:0 4px 16px rgba(16,26,19,.28)}
.btn.ink:hover{box-shadow:0 8px 26px rgba(16,26,19,.4)}
.btn:active,.toolbtn:active{transform:translateY(1px) scale(.98)}
/* feedback táctil: en iOS no hay hover, las tarjetas responden al dedo y los botones pequeños llegan a los 44px de Apple */
*{-webkit-tap-highlight-color:transparent}
.card:active,.mini:active,.profe-c:active,.cen:active,.zona:active,.sport:active,.fchip:active,.etab:active,.citem:active,.hitem:active{transform:scale(.98);transition:transform .08s ease}
@media(pointer:coarse){.btn.sm{min-height:44px;padding:.55rem .95rem}.cal-nav,.ckb{width:40px;height:40px}}
.btn.ghost{background:var(--card);color:var(--tx);border:1px solid var(--line);box-shadow:var(--shadow-s)}
.btn.ghost:hover{border-color:var(--acc);color:var(--acc2);box-shadow:0 0 0 3px rgba(22,163,74,.1),0 4px 16px rgba(22,163,74,.12)}
.btn.sm{padding:.38rem .85rem;font-size:.85rem;border-radius:999px}
.btn.danger{background:#fff;border:1px solid #f1c8c8;color:#b91c1c;box-shadow:none}
.btn.danger:hover{box-shadow:0 0 0 3px rgba(185,28,28,.1)}
main{flex:1;padding:1.6rem 0 3rem}
.hero{padding:2.6rem 0 1.5rem;position:relative}
.hero h1{font-size:clamp(1.7rem,4.6vw,2.7rem);line-height:1.12;font-weight:700;letter-spacing:-.02em}
.hero h1 span{background:linear-gradient(92deg,var(--acc),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--mut);margin-top:.6rem;max-width:52ch;font-size:1.05rem}
.filters{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:.6rem;background:var(--card);
border:0;border-radius:22px;padding:.9rem;margin:1.3rem 0 1.7rem;box-shadow:var(--shadow-s)}
label.f{display:flex;flex-direction:column;gap:.25rem;font-size:.76rem;color:var(--mut);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
select,input,textarea{background:#fff;border:1px solid var(--line);color:var(--tx);border-radius:10px;
padding:.55rem .7rem;font:inherit;font-size:.95rem;width:100%;transition:border-color .2s,box-shadow .2s}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(22,163,74,.14)}
.filters .btn{align-self:end}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:1.05rem}
.card{background:var(--card);border:0;border-radius:22px;overflow:hidden;
display:flex;flex-direction:column;box-shadow:var(--shadow-s);
transition:transform .25s cubic-bezier(.2,.7,.3,1.2),box-shadow .25s;animation:fadeUp .45s ease both}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.card .im{aspect-ratio:16/9;overflow:hidden;position:relative}
.card .im::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,30,18,.28));
opacity:0;transition:opacity .3s}
.card:hover .im::after{opacity:1}
.card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.6,.3,1)}
.card:hover img{transform:scale(1.06)}
.card .ph{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;font-size:3rem;
background:linear-gradient(135deg,#e3f4e9,#f6fbf7)}
.card .bd{padding:.95rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
/* .card de solo texto (sin cuerpo .bd): garantiza padding sin tocar las tarjetas con imagen.
   :where() mantiene la especificidad baja para que los overrides por página sigan ganando. */
.card:where(:not(:has(.bd))){padding:1rem}
.card h3{font-size:1.07rem;line-height:1.3;color:var(--tx)}
.chips{display:flex;flex-wrap:wrap;gap:.35rem}
.chip{display:inline-flex;align-items:center;gap:.28rem;font-size:.74rem;font-weight:700;padding:.2rem .6rem;border-radius:99px;background:var(--accd);color:var(--acc2)}
.ico{width:1.1em;height:1.1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.17em}
.emptyic{line-height:0;margin-bottom:.5rem}.emptyic .ico{width:36px;height:36px;color:var(--acc);stroke-width:1.7}
.chip.gray{background:#eef1ee;color:var(--mut)}
.lvl{font-size:.72rem;font-weight:700;padding:.2rem .55rem;border-radius:99px;color:#fff;background:var(--lc);
white-space:nowrap;box-shadow:0 1px 4px color-mix(in srgb,var(--lc) 40%,transparent)}
.lvl.dim{background:transparent;color:var(--lc);border:1.5px solid var(--lc);box-shadow:none}
.vtick{display:inline-flex;vertical-align:-3px;margin-left:.15rem;
filter:drop-shadow(0 1px 2px rgba(13,148,71,.35))}
.vtick svg{width:17px;height:17px}
.meta{color:var(--mut);font-size:.87rem}
.stars{color:var(--star);letter-spacing:.05em;text-shadow:0 0 12px rgba(245,158,11,.35)}
.rate-line{display:flex;align-items:center;gap:.4rem;font-size:.87rem;color:var(--mut)}
.av{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-weight:700;
flex:none;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.18);transition:transform .2s,box-shadow .2s;overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
a:hover>.av,.person:hover .av{transform:scale(1.1);box-shadow:0 0 0 3px rgba(22,163,74,.25)}
.th{width:90px;height:56px;border-radius:10px;object-fit:cover;background:linear-gradient(135deg,#e3f4e9,#f6fbf7);
display:flex;align-items:center;justify-content:center;font-size:1.6rem;flex:none}
.chathd .th{width:54px;height:36px;border-radius:8px;font-size:1.1rem}
.citem .th{width:64px;height:42px;border-radius:9px;font-size:1.2rem}
.avrow{display:flex;align-items:center}
.avrow .av{margin-right:-9px}
.avrow .more{margin-left:14px;font-size:.83rem;color:var(--mut)}
.price{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:.5rem}
.price b{font-size:1.3rem;color:var(--tx);letter-spacing:-.01em}
.empty{text-align:center;color:var(--mut);padding:3rem 1rem;border:0;border-radius:22px;background:var(--card);box-shadow:var(--shadow-s)}
.avisame{display:flex;flex-direction:column;gap:.55rem;background:var(--card2);border-radius:18px;padding:1rem;margin-top:1rem;text-align:left}
.avisame .avm-t{font-size:1rem;color:var(--tx)}
.avisame .avm-sel,.avisame .avm-row{display:flex;gap:.5rem;flex-wrap:wrap}
.avisame .avm-sel select{flex:1 1 150px;width:auto}
.avisame .avm-row input{flex:1 1 190px;width:auto}
.avisame .avm-row .btn{flex:none}
.avisame .avm-legal{font-size:.8rem;color:var(--mut)}
.empty .avisame{max-width:520px;margin:1.2rem auto 0}
.coldstart{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:center;background:var(--card);border-radius:24px;padding:1.4rem;box-shadow:var(--shadow-s)}
.coldstart h2{font-size:clamp(1.3rem,3.2vw,1.7rem);letter-spacing:-.02em}
.coldstart p{color:var(--mut);margin-top:.4rem}
.coldstart .avisame{margin-top:0}
@media(max-width:760px){.coldstart{grid-template-columns:1fr;padding:1.1rem}}
.detail{display:grid;grid-template-columns:1.4fr 1fr;gap:1.4rem;align-items:start;margin-top:1rem}
.detail>*{min-width:0}
.detail .ph,.detail .imbig{border-radius:var(--rad);border:1px solid var(--line);box-shadow:0 8px 30px rgba(23,42,31,.1)}
.detail .ph{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;font-size:4rem;background:linear-gradient(135deg,#e3f4e9,#f6fbf7)}
.detail .imbig{width:100%;aspect-ratio:16/9;object-fit:cover}
.panel{background:var(--card);border:0;border-radius:22px;padding:1.2rem;
box-shadow:var(--shadow-s);transition:box-shadow .25s}
.panel:hover{box-shadow:var(--shadow-m)}
.panel h2{font-size:1.15rem;margin-bottom:.7rem}
.kv{display:flex;gap:.5rem;padding:.42rem 0;border-bottom:1px solid var(--line);font-size:.92rem}
.kv:last-of-type{border-bottom:0}
.kv b{min-width:7.5rem;color:var(--mut);font-weight:700}
.form{display:flex;flex-direction:column;gap:.7rem;margin-top:.6rem}
.note{font-size:.85rem;color:var(--mut);background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:.6rem .75rem}
.note b{color:var(--acc2)}
.msg{display:none;border-radius:10px;padding:.6rem .8rem;font-size:.9rem;font-weight:700}
.msg.ok{display:block;background:var(--accd);color:var(--acc2)}
.msg.err{display:block;background:#fdecec;color:#b91c1c}
.tabs{display:flex;gap:.5rem;margin-bottom:1rem}
.tabs button{flex:1;background:#fff;border:1px solid var(--line);color:var(--mut);padding:.55rem;border-radius:10px;
font:inherit;font-weight:700;cursor:pointer;transition:all .2s}
.tabs button.on{background:var(--accd);border-color:var(--acc);color:var(--acc2);box-shadow:0 0 0 3px rgba(22,163,74,.1)}
.rolepick{display:flex;gap:.5rem}
.rolepick label{flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;border:1px solid var(--line);
border-radius:10px;padding:.55rem;font-weight:700;font-size:.92rem;cursor:pointer;transition:all .2s;background:#fff}
.rolepick input{display:none}
.rolepick label:has(input:checked){background:var(--accd);border-color:var(--acc);color:var(--acc2);box-shadow:0 0 0 3px rgba(22,163,74,.12)}
.auth{max-width:430px;margin:2rem auto}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.mylist{display:flex;flex-direction:column;gap:.8rem;margin-top:1rem}
.myitem{background:var(--card);border:0;border-radius:18px;padding:.9rem;display:flex;gap:.9rem;
align-items:center;flex-wrap:wrap;box-shadow:var(--shadow-s);transition:box-shadow .2s;animation:fadeUp .4s ease both}
.myitem:hover{box-shadow:var(--shadow-m)}
.myitem .th{width:96px;height:58px;border-radius:10px;object-fit:cover;background:linear-gradient(135deg,#e3f4e9,#f6fbf7);
display:flex;align-items:center;justify-content:center;font-size:1.6rem;flex:none}
.myitem .inf{flex:1;min-width:180px}
.myitem .inf h3{font-size:1rem}
.myitem .inf .meta{font-size:.83rem}
.myitem .acts{display:flex;gap:.4rem;flex-wrap:wrap}
.off{opacity:.55}
.bk{font-size:.85rem;color:var(--mut);width:100%;background:var(--soft);border-radius:10px;padding:.5rem .7rem;margin-top:.3rem}
.bk table{width:100%;border-collapse:collapse}
.bk td,.bk th{text-align:left;padding:.25rem .4rem;border-bottom:1px solid var(--line);font-size:.82rem}
.bk th{color:var(--acc2);font-weight:700}
.people{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.6rem}
.person{display:flex;align-items:center;gap:.45rem;background:#fff;border:1px solid var(--line);
border-radius:99px;padding:.25rem .85rem .25rem .3rem;font-size:.87rem;font-weight:700;color:var(--tx);
transition:border-color .2s,box-shadow .2s,transform .15s}
a.person:hover{border-color:var(--acc);box-shadow:0 0 0 3px rgba(22,163,74,.12),0 4px 14px rgba(22,163,74,.15);transform:translateY(-1px);color:var(--acc2)}
.review{border:1px solid var(--line);border-radius:var(--rad);padding:.85rem .95rem;background:var(--card);
display:flex;flex-direction:column;gap:.3rem;box-shadow:0 1px 3px rgba(23,42,31,.05);transition:box-shadow .25s,border-color .25s;animation:fadeUp .45s ease both}
.review:hover{border-color:rgba(22,163,74,.35);box-shadow:0 8px 22px rgba(22,163,74,.1)}
.review .hd{display:flex;align-items:center;gap:.55rem}
.review .hd .who{font-weight:700;font-size:.92rem}
.review .hd .when{color:var(--mut);font-size:.78rem;margin-left:auto}
.review p{color:var(--mut);font-size:.9rem}
.reviews{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;margin-top:.8rem}
/* perfil */
.phead{display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap;background:var(--card);border:0;
border-radius:24px;padding:1.3rem;box-shadow:var(--shadow-s);animation:fadeUp .4s ease both}
.phead .who h1{font-size:1.45rem;line-height:1.2}
.pstats{display:flex;gap:1.4rem;margin-top:.45rem;flex-wrap:wrap}
.pstats b{font-size:1.15rem;color:var(--acc2)}
.pstats span{font-size:.82rem;color:var(--mut);display:block}
.switch{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.9rem;font-weight:700;color:var(--mut)}
.switch input{display:none}
.switch .tr{width:42px;height:24px;border-radius:99px;background:#d7e0d9;position:relative;transition:background .2s;flex:none}
.switch .tr::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;
box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .2s}
.switch input:checked+.tr{background:var(--acc)}
.switch input:checked+.tr::after{left:21px}
/* fila de acciones del perfil (editar / verificación / cerrar sesión) */
.pacts{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:480px){
.pacts{width:100%}
.pacts .btn{flex:1;justify-content:center}
}
.hist{display:flex;flex-direction:column;gap:.7rem;margin-top:.8rem}
.hitem{display:flex;gap:.8rem;align-items:center;background:var(--card);border:0;border-radius:18px;
padding:.75rem .85rem;box-shadow:var(--shadow-s);transition:box-shadow .2s,transform .15s;animation:fadeUp .4s ease both}
a.hitem:hover{box-shadow:var(--shadow-m);transform:translateY(-2px)}
.hitem .th{width:86px;height:52px;border-radius:9px;object-fit:cover;flex:none;background:linear-gradient(135deg,#e3f4e9,#f6fbf7);
display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.hitem .inf{flex:1;min-width:0}
.hitem .inf h3{font-size:.98rem;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hitem .inf .meta{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hitem .when{font-size:.78rem;color:var(--mut);white-space:nowrap}
/* móvil: grid miniatura|texto, y la fecha de reserva + Cancelar bajan a su propia fila */
@media(max-width:560px){
.hitem{display:grid;grid-template-columns:86px 1fr auto;align-items:center;gap:.4rem .8rem}
.hitem>a{display:contents!important}
.hitem .th{grid-row:1;grid-column:1}
.hitem .inf{grid-row:1;grid-column:2/4}
.hitem .when{grid-row:2;grid-column:1/3;font-size:.72rem;white-space:normal}
.hitem>.btn{grid-row:2;grid-column:3;justify-self:end}
}
/* chat */
.chatlist{display:flex;flex-direction:column;gap:.6rem;margin-top:.8rem}
.citem{display:flex;gap:.8rem;align-items:center;background:var(--card);border:0;
border-radius:18px;padding:.75rem .9rem;box-shadow:var(--shadow-s);transition:box-shadow .2s,transform .15s;animation:fadeUp .35s ease both}
a.citem:hover{box-shadow:var(--shadow-m);transform:translateY(-2px)}
.citem .inf{flex:1;min-width:0}
.citem .inf b{display:block;color:var(--tx)}
.citem .inf span{font-size:.84rem;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.chatbox{display:flex;flex-direction:column;height:min(64vh,640px);background:var(--card);border:1px solid var(--line);
border-radius:var(--rad);box-shadow:0 8px 30px rgba(23,42,31,.09);overflow:hidden}
.chathd{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;border-bottom:1px solid var(--line);background:rgba(238,248,241,.6)}
.chathd b{font-size:1rem}
.chatms{flex:1;overflow-y:auto;padding:.9rem;display:flex;flex-direction:column;gap:.25rem}
.bub{max-width:74%;padding:.45rem .75rem;border-radius:14px;font-size:.93rem;line-height:1.4;
box-shadow:0 1px 2px rgba(0,0,0,.08);word-wrap:break-word;animation:fadeUp .25s ease both}
.bub.me{align-self:flex-end;background:linear-gradient(135deg,#1cb45f,#0d9447);color:#fff;border-bottom-right-radius:4px}
.bub.them{align-self:flex-start;background:var(--card2);border:1px solid var(--line);border-bottom-left-radius:4px}
.bub .bwho{display:block;font-size:.72rem;font-weight:700;color:var(--acc2);margin-bottom:.1rem}
.bub .bt{display:block;font-size:.66rem;opacity:.65;text-align:right;margin-top:.1rem}
.chatin{display:flex;gap:.5rem;padding:.7rem;border-top:1px solid var(--line);background:rgba(255,255,255,.7)}
.chatin input{flex:1}
/* calendario */
.cal{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:.8rem;max-width:340px;
box-shadow:0 4px 18px rgba(23,42,31,.07)}
.cal-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.cal-hd b{font-size:.95rem}
.cal-nav{background:var(--soft);border:1px solid var(--line);border-radius:8px;width:30px;height:30px;cursor:pointer;
font-size:1rem;color:var(--acc2);font-weight:700;transition:all .2s}
.cal-nav:hover{border-color:var(--acc);box-shadow:0 0 0 3px rgba(22,163,74,.12)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}
.cal-dow{font-size:.68rem;font-weight:700;color:var(--mut);padding:.2rem 0;text-transform:uppercase}
.cal-day{position:relative;font-size:.85rem;padding:.34rem 0;border-radius:8px;color:var(--tx);transition:all .15s}
.cal-day.past{color:#c3cdc5}
.cal-day:not(.past){cursor:default}
.cal-day.has{font-weight:700;color:var(--acc2)}
.cal-day.has::after{content:'';position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
width:5px;height:5px;border-radius:50%;background:var(--acc);box-shadow:0 0 6px rgba(22,163,74,.8)}
.cal-day.today{outline:1.5px solid var(--acc);outline-offset:-1.5px}
.cal-day.sel{background:var(--acc);color:#fff!important;box-shadow:0 2px 10px rgba(22,163,74,.4)}
.cal-day.sel::after{background:#fff}
.cal.pick .cal-day:not(.past):hover{background:var(--accd)}
.cal.pick .cal-day:not(.past){cursor:pointer}
.sess-list{display:flex;flex-direction:column;gap:.4rem;margin-top:.6rem}
.sess{display:flex;align-items:center;gap:.6rem;background:var(--soft);border:1px solid var(--line);
border-radius:10px;padding:.4rem .7rem;font-size:.9rem;font-weight:700}
/* carrusel de fechas de la ficha de clase (estilo Playtomic) */
.dchips{display:flex;gap:.5rem;margin-top:.6rem;overflow-x:auto;padding:.6rem .6rem .4rem .15rem;
-webkit-overflow-scrolling:touch;scrollbar-width:none}
.dchips::-webkit-scrollbar{display:none}
.dchip{flex:none;width:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.12rem;
background:var(--card);border:0;border-radius:16px;padding:.65rem .25rem;text-align:center}
.dchip{font:inherit;cursor:pointer;position:relative;border:0;background:var(--card);box-shadow:var(--shadow-s);transition:.18s}
.dchip:disabled{opacity:.6;cursor:default}
.dchip.sel{background:var(--ink);box-shadow:0 8px 20px rgba(16,26,19,.28);transform:translateY(-2px)}
.dchip.sel .dd,.dchip.sel .dh,.dchip.sel .dm{color:#fff}
.dchip.sel .dm{opacity:.75}
.dchip.sel::after{content:"✓";position:absolute;top:-7px;right:-7px;width:19px;height:19px;border-radius:99px;
  background:var(--acc);color:#fff;font-size:.7rem;font-weight:800;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(22,163,74,.5)}
.dchip.more{cursor:default;pointer-events:none}
#multidlg{border:none;border-radius:18px;padding:1.3rem;max-width:340px;width:90%;
  box-shadow:0 24px 60px rgba(0,0,0,.28)}
#multidlg::backdrop{background:rgba(23,42,31,.45);backdrop-filter:blur(2px)}
.dchip .dd{font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--mut);text-transform:uppercase;white-space:nowrap}
.dchip .dh{font-size:1.08rem;font-weight:700;color:var(--tx);line-height:1.15}
.dchip .dm{font-size:.72rem;color:var(--mut);white-space:nowrap}

.dchip.on:not(.sel) .dd,.dchip.on:not(.sel) .dh{color:var(--acc2)}
.dchip.more{opacity:.6}
/* ===== Panel de clases del profe (cupos / niveles / horario) ===== */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin:.3rem 0 1.1rem}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.85rem 1rem;
box-shadow:0 2px 10px rgba(23,42,31,.05)}
.kpi b{display:block;font-size:1.5rem;font-weight:700;color:var(--acc2);line-height:1.1}
.kpi span{font-size:.78rem;color:var(--mut)}
.boardbar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.boardbar .sp{flex:1}
.fchip{border:1px solid var(--line);background:#fff;border-radius:99px;padding:.34rem .8rem;font:inherit;
font-size:.85rem;font-weight:700;color:var(--tx);cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:.35rem}
.fchip:hover{border-color:var(--acc)}
.fchip.on{background:var(--accd);border-color:var(--acc);color:var(--acc2)}
.fchip .dot{width:9px;height:9px;border-radius:50%;background:var(--fc,#94a3b8)}
.viewseg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.viewseg button{border:0;background:#fff;font:inherit;font-weight:700;font-size:.85rem;padding:.4rem .8rem;cursor:pointer;color:var(--mut)}
.viewseg button.on{background:var(--accd);color:var(--acc2)}
.board{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.55rem;align-items:start}
.bcol{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:.5rem;min-height:64px}
.bcol.today{border-color:var(--acc);box-shadow:0 0 0 2px rgba(22,163,74,.12)}
.bcol h4{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);text-align:center;margin-bottom:.45rem}
.bcol h4 b{color:var(--acc2)}
.bcol .empt{font-size:.74rem;color:#c3cdc5;text-align:center;padding:.6rem 0}
.gcard{position:relative;background:#fff;border:1px solid var(--line);border-left:4px solid var(--gc,#94a3b8);
border-radius:11px;padding:.5rem .55rem;margin-bottom:.5rem;cursor:pointer;transition:transform .12s,box-shadow .15s;animation:fadeUp .35s ease both}
.gcard:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(23,42,31,.12)}
.gcard.off{opacity:.5}
.gcard .gt{font-weight:700;font-size:.8rem;color:var(--acc2)}
.gcard .gn{font-size:.86rem;font-weight:700;line-height:1.2;margin:.1rem 0 .15rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gcard .gm{font-size:.74rem;color:var(--mut);display:flex;gap:.3rem;flex-wrap:wrap;align-items:center}
.gcard .glock{position:absolute;top:.45rem;right:.45rem;font-size:.72rem}
.occ{height:6px;border-radius:99px;background:#e6ece8;overflow:hidden;margin:.3rem 0 .15rem}
.occ i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--acc),var(--teal))}
.occ.full i{background:linear-gradient(90deg,#ef4444,#f59e0b)}
.wbadge{background:#fff7ed;color:#b45309;border:1px solid #fed7aa;border-radius:99px;padding:.05rem .4rem;font-size:.68rem;font-weight:700}
.noslot{display:flex;flex-direction:column;gap:.5rem;margin-top:.6rem}
/* planificador de horario semanal (form de crear clase) */
.flab{display:block;font-size:.76rem;color:var(--mut);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.35rem}
.segmode{display:flex;gap:.35rem;background:var(--soft);border:1px solid var(--line);border-radius:11px;padding:.25rem;margin-bottom:.6rem}
.segmode button{flex:1;padding:.5rem .4rem;border:0;border-radius:8px;background:none;font:inherit;font-size:.85rem;font-weight:650;color:var(--mut);cursor:pointer}
.segmode button.on{background:var(--card);color:var(--tx);box-shadow:0 2px 8px rgba(23,42,31,.1)}
.daychips{display:flex;gap:.4rem;flex-wrap:wrap}
.daychip{width:42px;height:42px;border:1.5px solid var(--line);background:var(--card);border-radius:11px;
font:inherit;font-weight:700;font-size:.92rem;color:var(--mut);cursor:pointer;transition:all .15s}
.daychip:active{transform:scale(.94)}
.daychip.on{border-color:var(--acc);background:var(--accd);color:var(--acc2)}
/* modal de gestión de grupo */
.gmodal{position:fixed;inset:0;z-index:300;background:rgba(10,20,14,.5);backdrop-filter:blur(3px);
display:flex;align-items:flex-end;justify-content:center;padding:0;animation:fadeUp .2s ease both}
@media(min-width:640px){.gmodal{align-items:center;padding:1rem}}
.gsheet{background:#fff;width:100%;max-width:580px;max-height:92vh;overflow-y:auto;border-radius:18px 18px 0 0;
box-shadow:0 -10px 40px rgba(0,0,0,.3);animation:mcIn .3s cubic-bezier(.2,.9,.3,1.1) both}
@media(min-width:640px){.gsheet{border-radius:18px}}
.gsheet .ghd{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);padding:1rem 1.1rem .7rem;z-index:2}
.gsheet .ghd .gx{position:absolute;top:.8rem;right:.9rem;background:var(--soft);border:0;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:.9rem}
.gsheet .gbody{padding:.9rem 1.1rem 1.4rem}
.gtabs{display:flex;gap:.4rem;margin:.6rem 0 0}
.gtabs button{flex:1;border:1px solid var(--line);background:#fff;border-radius:9px;font:inherit;font-weight:700;
font-size:.82rem;padding:.45rem;cursor:pointer;color:var(--mut)}
.gtabs button.on{background:var(--accd);border-color:var(--acc);color:var(--acc2)}
.grow{display:flex;align-items:center;gap:.6rem;padding:.5rem .2rem;border-bottom:1px solid var(--line);font-size:.9rem}
.grow .ge{color:var(--mut);font-size:.8rem}
.grow .gact{margin-left:auto;display:flex;gap:.35rem}
.ckb{width:30px;height:30px;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;font-size:.85rem;color:var(--mut);transition:all .15s}
.ckb:hover{border-color:var(--acc)}
.ckb.on.ok{background:var(--accd);border-color:var(--acc);color:var(--acc2)}
.ckb.on.bad{background:#fdecec;border-color:#f1c8c8;color:#b91c1c}
.ckb.on.warn{background:#fff7ed;border-color:#fed7aa;color:#b45309}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
/* panel de cobros */
.paycard{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:.8rem;
box-shadow:0 2px 10px rgba(23,42,31,.05);overflow:hidden;animation:fadeUp .35s ease both}
.paycard .phd{display:flex;align-items:center;gap:.7rem;padding:.8rem .9rem;background:linear-gradient(135deg,var(--soft),#fff);border-bottom:1px solid var(--line);flex-wrap:wrap}
.paycard .pwho{min-width:0;flex:1}
.paycard .pwho b{display:block;line-height:1.2}
.paycard .pwho span{font-size:.8rem;color:var(--mut)}
.paycard .ptot{text-align:right}
.paycard .ptot b{display:block;font-size:1.25rem;color:#b45309;line-height:1}
.paycard .ptot span{font-size:.72rem;color:var(--mut)}
.paycard .pitems{padding:.2rem .9rem .5rem}
.paycard .grow{font-size:.9rem}
.incmonth{margin-bottom:1.1rem}
.incmh{display:flex;justify-content:space-between;align-items:baseline;padding:.3rem .2rem;border-bottom:2px solid var(--line);margin-bottom:.2rem}
.incmh b{font-size:1.02rem}.incmh span{font-weight:700;color:var(--acc2)}
.inctable{display:flex;flex-direction:column}
.incrow{display:grid;grid-template-columns:84px 1fr auto auto 22px;gap:.6rem;align-items:center;
padding:.5rem .2rem;border-bottom:1px solid var(--line);font-size:.9rem}
.incrow .icd{color:var(--mut);font-size:.8rem}
.incrow .icn i{display:block;font-style:normal;color:var(--mut);font-size:.78rem}
.incrow .icm{font-size:.8rem;color:var(--mut);white-space:nowrap}
.incrow .ica{color:var(--acc2);white-space:nowrap}
.incrow .undo{background:none;border:0;color:var(--mut);cursor:pointer;font-size:.95rem;border-radius:6px;padding:.1rem .3rem}
.incrow .undo:hover{background:var(--soft);color:#b91c1c}
@media(max-width:600px){.incrow{grid-template-columns:1fr auto auto;row-gap:.15rem}.incrow .icd{grid-column:1/-1;order:-1}.incrow .undo{display:none}}
.incchart{display:flex;align-items:flex-end;gap:.5rem;height:150px;padding:1.4rem .4rem .2rem;margin-bottom:1rem;
background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 2px 10px rgba(23,42,31,.05)}
.cbar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:.25rem;min-width:0}
.cbar i{width:100%;max-width:46px;border-radius:7px 7px 0 0;background:linear-gradient(180deg,var(--acc),var(--teal));transition:height .4s cubic-bezier(.2,.8,.3,1)}
.cbar i.now{background:linear-gradient(180deg,#f59e0b,#0d9488)}
.cbar .cval{font-size:.72rem;font-weight:700;color:var(--acc2);white-space:nowrap}
.cbar .clab{font-size:.7rem;color:var(--mut)}
@media(max-width:760px){
  .kpis{grid-template-columns:1fr 1fr}
  .board{grid-template-columns:1fr;gap:0}
  .bcol{background:transparent;border:0;padding:0;box-shadow:none;min-height:0}
  .bcol.nofill{display:none}
  .bcol.today{box-shadow:none}
  .bcol h4{text-align:left;font-size:.82rem;margin:.7rem 0 .4rem;border-top:1px solid var(--line);padding-top:.7rem}
  .bcol.today h4{color:var(--acc2)}
}
.sess .dur{color:var(--mut);font-weight:400;font-size:.8rem}
.sess .x{margin-left:auto;background:none;border:0;color:#b91c1c;cursor:pointer;font-size:1rem;padding:.1rem .3rem;border-radius:6px}
.sess .x:hover{background:#fdecec}
.bio{color:var(--mut);font-size:.95rem;max-width:60ch;margin-top:.4rem;white-space:pre-line}
.sportpick{display:flex;flex-wrap:wrap;gap:.4rem}
.sportpick label{display:inline-flex;align-items:center;gap:.3rem;border:1px solid var(--line);border-radius:99px;
padding:.3rem .7rem;font-size:.84rem;font-weight:700;cursor:pointer;background:#fff;transition:all .15s}
.sportpick input{display:none}
.sportpick label:has(input:checked){background:var(--accd);border-color:var(--acc);color:var(--acc2)}
/* mapas + ubicación */
.gmap{width:100%;height:300px;border-radius:22px;border:0;box-shadow:var(--shadow-s);background:var(--soft)}
.gmap.tall{height:460px}
/* pin de clase estilo app: squircle blanco con el emoji del deporte */
@keyframes pinIn{from{opacity:0;transform:translate(-50%,-58%) scale(.5)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.gpin{position:absolute;transform:translate(-50%,-50%);width:46px;height:46px;border:0;padding:0;margin:0;
border-radius:15px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
box-shadow:0 2px 6px rgba(10,25,15,.14),0 10px 26px rgba(10,25,15,.22);animation:pinIn .35s cubic-bezier(.2,.9,.3,1.3) both;
transition:transform .18s cubic-bezier(.2,.9,.3,1.3),box-shadow .2s}
.gpin span{font-size:1.35rem;line-height:1;pointer-events:none}
.gpin::after{content:'';position:absolute;left:50%;bottom:-5px;transform:translateX(-50%) rotate(45deg);
width:10px;height:10px;background:#fff;border-radius:2px;z-index:-1;box-shadow:3px 3px 6px rgba(10,25,15,.12)}
.gpin:hover,.gpin.on{transform:translate(-50%,-56%) scale(1.14);box-shadow:0 4px 10px rgba(10,25,15,.16),0 18px 40px rgba(10,25,15,.3);z-index:999!important}
/* burbuja de grupo: número de clases en la zona; tocar = acercar */
.gpin.cl{border-radius:50%;background:var(--ink,#101a13);width:44px;height:44px}
.gpin.cl::after{display:none}
.gpin.cl .n{color:#fff;font-weight:800;font-size:.95rem;font-family:inherit;pointer-events:none}
.gpin.cl::before{content:'';position:absolute;inset:-6px;border-radius:50%;background:rgba(16,26,19,.16);z-index:-1}
.gpin.ph{padding:3px}
.gpin.ph img{width:100%;height:100%;border-radius:12px;object-fit:cover;pointer-events:none;display:block}
.gpin.ph .pe{position:absolute;right:-7px;bottom:-7px;width:22px;height:22px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:.78rem;box-shadow:0 2px 6px rgba(10,25,15,.22)}
.ph.logo{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e3f4e9,#f6fbf7)}
.ph.logo img{width:36%;max-width:170px;aspect-ratio:1;height:auto;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 10px 30px rgba(15,25,18,.18)}
/* autocompletado de dirección propio: dropdown pegado al input, nunca a pantalla completa */
.pacwrap{position:relative;display:block}
.pacdrop{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:60;background:var(--card);
border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(23,42,31,.16);overflow:hidden}
.pacdrop[hidden]{display:none}
.pacrow{display:flex;flex-direction:column;justify-content:center;gap:.1rem;min-height:44px;width:100%;
padding:.45rem .75rem;border:0;border-bottom:1px solid var(--line);background:none;font:inherit;font-weight:400;
text-align:left;cursor:pointer;text-transform:none;letter-spacing:normal}
.pacrow:last-child{border-bottom:0}
.pacrow b{font-size:.9rem;color:var(--tx);line-height:1.25}
.pacrow .meta{font-size:.78rem}
.pacrow:active,.pacrow.sel{background:var(--accd)}
.maptools{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:0 0 1rem}
.maptools .sp{flex:1}
.toolbtn{display:inline-flex;align-items:center;gap:.4rem;background:#fff;border:1px solid var(--line);color:var(--tx);
font:inherit;font-weight:700;font-size:.88rem;padding:.5rem .85rem;border-radius:10px;cursor:pointer;transition:all .2s}
.toolbtn:hover{border-color:var(--acc);color:var(--acc2);box-shadow:0 0 0 3px rgba(22,163,74,.1)}
.toolbtn.on{background:var(--accd);border-color:var(--acc);color:var(--acc2)}
.dist{font-size:.8rem;font-weight:700;color:var(--teal)}
.loc-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.7rem}
/* hoja inferior del mapa (al tocar un pin) — estilo app */
@keyframes mcIn{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
@keyframes shIn{from{transform:translateY(102%)}to{transform:none}}
@keyframes shBack{from{opacity:0}to{opacity:1}}
.msheet-wrap{position:fixed;inset:0;z-index:260;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.msheet-back{position:absolute;inset:0;background:rgba(12,20,15,.3);pointer-events:auto}
.msheet{position:relative;pointer-events:auto;width:100%;max-width:460px;background:#fff;
border-radius:28px 28px 0 0;padding:1rem 1.15rem calc(1.05rem + env(safe-area-inset-bottom,0px));
box-shadow:0 -18px 60px rgba(10,25,15,.3);text-align:center}
@media(min-width:640px){
  .msheet-wrap{align-items:flex-end;padding:1.2rem}
  .msheet{border-radius:28px;padding-bottom:1.15rem}
}
.msheet-wrap.out .msheet{transition:transform .2s ease,opacity .2s ease;transform:translateY(30px);opacity:0}
.msheet-wrap.out .msheet-back{transition:opacity .2s ease;opacity:0}
.msheet .msh-grab{display:block;width:44px;height:5px;border-radius:99px;background:#e2e7e1;margin:0 auto .75rem}
.msheet .msh-ic{width:58px;height:58px;border-radius:18px;background:#fff;margin:-2.8rem auto .5rem;
display:flex;align-items:center;justify-content:center;font-size:1.7rem;
box-shadow:0 3px 8px rgba(10,25,15,.1),0 14px 34px rgba(10,25,15,.18);position:relative}
.msheet .msh-ic img{width:100%;height:100%;object-fit:cover;border-radius:18px}
.msheet h3{font-size:1.15rem;line-height:1.3;margin:0 0 .15rem}
.msheet h3 a{color:var(--tx)}
.msheet .msh-sub{font-size:.9rem;color:var(--mut)}
.msheet .msh-sub b{color:var(--tx)}
.msheet .msh-who{display:flex;align-items:center;justify-content:center;gap:.45rem;margin-top:.5rem;font-size:.87rem;color:var(--mut)}
.msheet .msh-who .avrow .av{margin-right:-9px;width:28px;height:28px;font-size:.7rem}
.msheet .msh-card{background:var(--card2);border-radius:16px;padding:.7rem .9rem;margin-top:.75rem;text-align:left;
display:flex;flex-direction:column;gap:.3rem}
.msheet .msh-row{display:flex;align-items:center;gap:.5rem;font-size:.9rem}
.msheet .msh-row b{margin-left:auto;white-space:nowrap}
.msheet .msh-acts{display:flex;gap:.6rem;margin-top:.9rem}
.msheet .msh-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:50px;
border-radius:999px;font:inherit;font-weight:700;font-size:.98rem;cursor:pointer;text-decoration:none;
transition:transform .15s,box-shadow .2s,filter .15s}
.msheet .msh-btn.ghost{background:#fff;color:var(--tx);border:1.5px solid var(--line)}
.msheet .msh-btn.ghost:hover{border-color:#c9d2c9}
.msheet .msh-btn.dark{background:var(--ink);color:#fff;border:0;box-shadow:0 10px 26px rgba(16,26,19,.3)}
.msheet .msh-btn.dark:hover{transform:translateY(-1px);filter:brightness(1.12)}
.pgbanner{border-radius:var(--rad);padding:.85rem 1rem;font-weight:700;margin-bottom:1rem;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.pgbanner.ok{background:var(--accd);color:var(--acc2);border:1px solid var(--acc)}
.pgbanner.info{background:var(--soft);color:var(--mut);border:1px solid var(--line)}
.succ{background:var(--accd);border:1px solid var(--acc);border-radius:var(--rad);padding:1rem;margin-top:.4rem}
.succ h3{color:var(--acc2);font-size:1.05rem;margin-bottom:.4rem}
/* pago exprés (Apple Pay / Google Pay) */
#xwrap{display:none;margin-bottom:.4rem}
#xpay{min-height:44px}
.ordiv{display:flex;align-items:center;gap:.7rem;color:var(--mut);font-size:.8rem;font-weight:700;
text-transform:uppercase;letter-spacing:.06em;margin:.7rem 0 .4rem}
.ordiv::before,.ordiv::after{content:'';flex:1;height:1px;background:var(--line)}
/* popup tarjeta demo (clases de pago) */
.demobar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem;
background:linear-gradient(135deg,#eef2ff,#f5f3ff);border:1px solid #c7d2fe;border-radius:12px;
padding:.6rem .85rem;font-size:.9rem;color:#3730a3;box-shadow:0 6px 22px rgba(79,70,229,.12);animation:fadeUp .4s ease both}
.demobar .dico{font-size:1.1rem}
.tcardno{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:700;letter-spacing:.04em;
background:#fff;border:1px solid #c7d2fe;border-radius:8px;padding:.25rem .55rem;color:#1e1b4b}
.copybtn{background:#4f46e5;color:#fff;border:0;border-radius:8px;padding:.3rem .7rem;font:inherit;font-weight:700;
font-size:.82rem;cursor:pointer;transition:filter .15s,transform .1s}
.copybtn:hover{filter:brightness(1.1)}.copybtn:active{transform:scale(.96)}
.copybtn.done{background:var(--acc)}
.demox{margin-left:auto;background:none;border:0;color:#6366f1;cursor:pointer;font-size:1rem;line-height:1;padding:.2rem .35rem;border-radius:6px}
.demox:hover{background:rgba(99,102,241,.12)}
.demobar .sep{opacity:.55}
.pac-container{z-index:9999}
footer{border-top:1px solid var(--line);padding:1.2rem 0;color:var(--mut);font-size:.85rem;background:var(--soft)}
footer .wrap{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
footer .sp{flex:1}
footer .flogo{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:var(--tx)}
h2.sec{font-size:1.25rem;margin:1.4rem 0 .8rem}
/* ===================== LANDING ===================== */
.lhero{padding:2.2rem 0 .5rem}
.lhero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:2.2rem;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:700;color:var(--acc2);
background:var(--accd);border:1px solid rgba(22,163,74,.25);padding:.32rem .8rem;border-radius:99px;text-transform:uppercase;letter-spacing:.04em}
.lhero h1{font-size:clamp(2rem,5.2vw,3.4rem);line-height:1.05;font-weight:700;letter-spacing:-.025em;margin:.9rem 0 .7rem;text-wrap:balance}
.lhero h1 span{background:linear-gradient(92deg,var(--acc),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.lhero .lead{color:var(--mut);font-size:1.12rem;max-width:48ch}
.searchbar{display:flex;gap:.5rem;background:#fff;border:1px solid var(--line);border-radius:14px;padding:.55rem;
margin-top:1.3rem;box-shadow:0 12px 36px rgba(23,42,31,.12);flex-wrap:wrap}
.searchbar select{border:0;box-shadow:none;flex:1;min-width:130px;font-weight:600;background:transparent}
.searchbar input{border:0;box-shadow:none;flex:2 1 180px;min-width:0;background:transparent;font-weight:500}
.searchbar select:focus,.searchbar input:focus{box-shadow:none}
.searchbar .btn{flex:none}
.hero-cta{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap;align-items:center}
.trustline{display:flex;gap:.7rem;align-items:center;margin-top:1.3rem;color:var(--mut);font-size:.9rem;flex-wrap:wrap}
.trustline .avrow .av{margin-right:-9px}
.collage{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr);gap:.7rem;height:450px}
.collage figure{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 10px 30px rgba(23,42,31,.13)}
.collage figure:nth-child(1){grid-row:span 2}
.collage figure:nth-child(4){grid-row:span 2}
.collage img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.6,.3,1)}
.collage figure:hover img{transform:scale(1.07)}
.collage figcaption{position:absolute;left:.5rem;bottom:.5rem;background:rgba(10,30,18,.72);color:#fff;
font-size:.72rem;font-weight:700;padding:.2rem .6rem;border-radius:99px;backdrop-filter:blur(4px)}
.statsband{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:2rem 0;padding:1.4rem;
background:linear-gradient(135deg,var(--soft),#fff);border:1px solid var(--line);border-radius:var(--rad);box-shadow:0 4px 22px rgba(23,42,31,.06)}
.stat{text-align:center}
.stat b{display:block;font-size:1.95rem;font-weight:700;color:var(--acc2);line-height:1}
.stat span{font-size:.84rem;color:var(--mut)}
.lsec{margin:2.8rem 0}
.lsec-h{text-align:center;max-width:62ch;margin:0 auto 1.5rem}
.lsec-h h2{font-size:clamp(1.5rem,3.4vw,2.15rem);font-weight:700;letter-spacing:-.02em}
.lsec-h p{color:var(--mut);margin-top:.4rem}
/* ===== buscador de mapa estilo app: mapa limpio + search píldora flotante ===== */
.mapsearch{position:relative;border-radius:26px;overflow:hidden;border:0;box-shadow:var(--shadow-m)}
.mapsearch .gmap{height:min(72vh,640px);border:0;border-radius:0;box-shadow:none}
@media(max-width:640px){.mapsearch{border-radius:22px}.mapsearch .gmap{height:74vh}}
.msbar{position:absolute;top:.85rem;left:.85rem;right:.85rem;z-index:6;display:flex;flex-direction:column;gap:.55rem;pointer-events:none}
.msbar>*{pointer-events:auto}
.mstop{display:flex;gap:.55rem;align-items:center}
.msearch{flex:1;display:flex;align-items:center;gap:.55rem;background:#fff;border-radius:999px;
min-height:50px;padding:0 .6rem 0 1.05rem;box-shadow:0 3px 8px rgba(10,25,15,.08),0 14px 34px rgba(10,25,15,.14)}
.msearch svg{width:19px;height:19px;stroke:var(--mut);fill:none;stroke-width:2;stroke-linecap:round;flex:none}
.msearch input{border:0;background:none;box-shadow:none;padding:.6rem 0;font-size:.98rem;font-weight:500;width:100%}
.msearch input:focus{box-shadow:none;outline:none}
.msearch input::placeholder{color:#9aa59d}
.mfilter{width:50px;height:50px;flex:none;border:0;border-radius:50%;background:#fff;cursor:pointer;color:var(--tx);
display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(10,25,15,.08),0 14px 34px rgba(10,25,15,.14);
transition:transform .15s,background .2s,color .2s}
.mfilter svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.mfilter:active{transform:scale(.94)}
.mfilter.on{background:var(--ink);color:#fff}
.sportscroll{display:flex;gap:.45rem;overflow-x:auto;max-width:100%;padding:.2rem .1rem .35rem;
scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sportscroll::-webkit-scrollbar{display:none}
.spchip{flex:none;display:inline-flex;align-items:center;gap:.35rem;border:0;background:#fff;border-radius:999px;
padding:.5rem .95rem;font:inherit;font-size:.86rem;font-weight:700;color:var(--tx);cursor:pointer;white-space:nowrap;
box-shadow:0 2px 6px rgba(10,25,15,.07),0 8px 20px rgba(10,25,15,.1);transition:all .15s}
.spchip:hover{transform:translateY(-1px)}
.spchip.on{background:var(--ink);color:#fff}
/* panel de filtros desplegable (cerca de mí / ciudad / radio) */
.mspanel{background:#fff;border-radius:20px;box-shadow:0 6px 16px rgba(10,25,15,.1),0 22px 50px rgba(10,25,15,.2);
padding:.9rem 1rem;display:flex;flex-direction:column;gap:.75rem;animation:mcIn .25s ease both}
.mspanel[hidden]{display:none}
.mspanel .msrow{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.mspanel select{border:1px solid var(--line);border-radius:12px;flex:1;min-width:150px;font-weight:600}
.msnearbtn{background:#fff}
.mscount{position:absolute;bottom:.85rem;left:50%;transform:translateX(-50%);z-index:5;background:var(--ink);color:#fff;
border:0;border-radius:999px;padding:.55rem 1.1rem;font-weight:700;font-size:.88rem;white-space:nowrap;
box-shadow:0 12px 30px rgba(10,25,15,.35)}
.mscount a{margin-left:.55rem;color:#7ee2a0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:1.5rem;text-align:center;
box-shadow:0 2px 10px rgba(23,42,31,.05);transition:transform .25s,box-shadow .25s,border-color .25s;animation:fadeUp .5s ease both}
.step:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(22,163,74,.13);border-color:rgba(22,163,74,.4)}
.step .ic{width:58px;height:58px;margin:0 auto .8rem;border-radius:17px;display:flex;align-items:center;justify-content:center;
font-size:1.7rem;color:var(--acc2);background:linear-gradient(135deg,var(--accd),#fff);border:1px solid var(--line)}
.step h3{font-size:1.1rem;margin-bottom:.3rem}
.step p{color:var(--mut);font-size:.92rem}
.citychips{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.citychip{display:inline-flex;align-items:center;gap:.4rem;background:var(--card);border:1px solid var(--line);
border-radius:99px;padding:.5rem 1rem;font-weight:700;color:var(--tx);transition:all .2s}
.citychip:hover{border-color:var(--acc);color:var(--acc2);box-shadow:0 4px 16px rgba(22,163,74,.14);transform:translateY(-2px)}
.citychip .n{color:var(--mut);font-weight:400;font-size:.82rem}
.ctaband{background:linear-gradient(135deg,#0d7a38,#0d9488);color:#fff;border-radius:var(--rad);padding:2.3rem;
display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;box-shadow:0 18px 46px rgba(13,122,56,.3);position:relative;overflow:hidden}
.ctaband::after{content:'';position:absolute;right:-50px;top:-50px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.08)}
.ctaband .t{flex:1;min-width:240px;position:relative;z-index:1}
.ctaband h2{font-size:1.7rem;color:#fff;letter-spacing:-.02em}
.ctaband p{opacity:.93;margin-top:.4rem;max-width:54ch}
.ctaband .btn{background:#fff;color:var(--acc2);position:relative;z-index:1}
.ctaband .btn:hover{box-shadow:0 8px 28px rgba(0,0,0,.24)}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:1rem}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:1.15rem;
box-shadow:0 2px 10px rgba(23,42,31,.05);display:flex;flex-direction:column;gap:.5rem;transition:box-shadow .25s,border-color .25s;animation:fadeUp .5s ease both}
.tcard:hover{box-shadow:0 12px 28px rgba(22,163,74,.1);border-color:rgba(22,163,74,.3)}
.tcard p{color:var(--tx);font-size:.96rem;line-height:1.5}
.tcard .who{display:flex;align-items:center;gap:.5rem;margin-top:auto}
.tcard .who b{font-size:.9rem;display:block}
.tcard .who span{font-size:.78rem;color:var(--mut)}
@media(max-width:860px){
  .lhero-grid{grid-template-columns:1fr}
  .collage{height:220px}
  .searchbar .btn{flex:1 1 100%;justify-content:center}
  .statsband{grid-template-columns:repeat(2,1fr);gap:.6rem;padding:1.1rem}
  .steps{grid-template-columns:1fr}
  .ctaband{padding:1.6rem}.ctaband h2{font-size:1.4rem}
  .mapsearch .gmap{height:460px}
  .msbar{top:.5rem;left:.5rem;right:.5rem}
}
/* catálogo: buscador compacto + filtros plegados + atajos de un toque */
.qbar{display:flex;gap:.5rem;align-items:flex-start;flex-wrap:wrap;margin:1rem 0 .7rem}
.qsearch{flex:1 1 260px;display:flex;align-items:center;gap:.5rem;background:#fff;border-radius:999px;min-height:48px;
padding:0 .5rem 0 1rem;box-shadow:var(--shadow-s)}
.qsearch svg{width:19px;height:19px;stroke:var(--mut);fill:none;stroke-width:2;stroke-linecap:round;flex:none}
.qsearch input{border:0;background:none;box-shadow:none;padding:.6rem 0;font-weight:500}
.qsearch input:focus{box-shadow:none}
.qmore{position:relative}
.qmore summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;min-height:48px;padding:0 1.05rem;
background:#fff;border-radius:999px;font-weight:700;font-size:.92rem;box-shadow:var(--shadow-s);user-select:none}
.qmore summary::-webkit-details-marker{display:none}
.qmore summary svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.qmore[open] summary{background:var(--ink);color:#fff}
.qmore .qn{background:var(--acc);color:#fff;border-radius:99px;font-size:.72rem;min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.qpanel{display:flex;gap:.6rem;align-items:flex-end;flex-wrap:wrap;background:#fff;border-radius:18px;padding:.9rem;margin-top:.5rem;box-shadow:var(--shadow-m)}
.qpanel .f{flex:1 1 150px}
@media(min-width:700px){.qpanel{position:absolute;right:0;top:100%;z-index:30;width:420px}}
.qchips{display:flex;gap:.45rem;overflow-x:auto;padding:.1rem .1rem .5rem;margin-bottom:.4rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.qchips::-webkit-scrollbar{display:none}
.qchip{flex:none;display:inline-flex;align-items:center;gap:.3rem;background:#fff;border-radius:999px;padding:.5rem .95rem;
font-size:.88rem;font-weight:700;color:var(--tx);box-shadow:var(--shadow-s);white-space:nowrap}
.qchip.on{background:var(--ink);color:#fff}
.card.pg-off{display:none}
@media(max-width:560px){
.grid.compact{grid-template-columns:1fr;gap:.7rem}
.grid.compact .card{flex-direction:row;border-radius:18px;min-height:128px}
.grid.compact .card .im,.grid.compact .card .ph{flex:0 0 112px;aspect-ratio:auto;font-size:2.2rem}
.grid.compact .card .im img{height:100%}
.grid.compact .card .bd{padding:.7rem .8rem;gap:.28rem;min-width:0}
.grid.compact .card h3{font-size:.98rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.grid.compact .card .chips .chip.gray,.grid.compact .card .avrow{display:none}
.grid.compact .card .price{padding-top:.15rem}
.grid.compact .card .price b{font-size:1.1rem}
}
/* barra de ubicación del catálogo (plegable: ubicación + radio) */
.locbar{background:var(--card);border:0;border-radius:22px;
padding:.2rem 1.1rem;margin:.2rem 0 1rem;box-shadow:var(--shadow-s)}
.locbar summary{list-style:none;cursor:pointer;font-weight:700;padding:.75rem 0;display:flex;align-items:center;gap:.4rem}
.locbar summary::-webkit-details-marker{display:none}
.locbar summary::after{content:'';margin-left:auto;width:9px;height:9px;border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:rotate(45deg);transition:transform .2s}
.locbar[open] summary::after{transform:rotate(-135deg)}
.locbar[open]{padding-bottom:1rem}
.locbar h2{font-size:1.05rem;margin-bottom:.75rem;display:flex;align-items:center;gap:.4rem}
.locrow{display:flex;gap:.7rem;align-items:flex-end;flex-wrap:wrap}
.locrow+.locrow{margin-top:.85rem}
.locor{color:var(--mut);font-weight:700;padding-bottom:.55rem}
.radwrap{flex:1;min-width:220px}
.slider{-webkit-appearance:none;appearance:none;width:100%;height:7px;border-radius:99px;
background:linear-gradient(90deg,var(--acc),var(--teal));outline:none;margin-top:.5rem;cursor:pointer}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;
border:3px solid var(--acc);box-shadow:0 2px 8px rgba(22,163,74,.45);cursor:pointer}
.slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--acc);cursor:pointer}
.locstatus{margin-top:.8rem;font-size:.92rem;color:var(--mut);font-weight:600}
.locstatus b{color:var(--acc2)}
/* ===== "Llévate la app": hoja inferior para quien entra desde el navegador del móvil ===== */
@keyframes apFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}
.apppromo{position:fixed;inset:0;z-index:320;display:flex;align-items:flex-end;justify-content:center}
.apppromo .ap-back{position:absolute;inset:0;background:rgba(12,20,15,.46);backdrop-filter:blur(5px);animation:shBack .3s ease both}
.ap-sheet{position:relative;width:100%;max-width:480px;background:#fff;border-radius:32px 32px 0 0;
padding:0 1.35rem calc(1.15rem + env(safe-area-inset-bottom,0px));text-align:center;
box-shadow:0 -24px 80px rgba(10,25,15,.4);animation:shIn .45s cubic-bezier(.2,.9,.3,1.04) both}
.ap-sheet::before{content:'';position:absolute;left:0;right:0;top:0;height:150px;border-radius:32px 32px 0 0;
background:radial-gradient(120% 100% at 50% 0%,#d3efdd 0%,rgba(255,255,255,0) 100%);pointer-events:none}
.apppromo.out .ap-sheet{transition:transform .22s ease,opacity .22s ease;transform:translateY(40px);opacity:0}
.apppromo.out .ap-back{transition:opacity .22s ease;opacity:0}
.ap-x{position:absolute;top:.9rem;right:.9rem;z-index:3;width:36px;height:36px;border:0;border-radius:50%;
background:rgba(16,26,19,.08);color:var(--tx);font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
/* la caja mide lo mismo que la imagen (270px): asoma 90px por encima de la hoja
   y el texto empieza justo debajo del móvil, sin solaparse */
.ap-hero{position:relative;z-index:2;height:270px;margin:-90px auto 0;display:flex;justify-content:center;align-items:flex-start;
filter:drop-shadow(0 26px 34px rgba(10,25,15,.38))}
.ap-hero img{height:270px;width:auto;animation:apFloat 6s ease-in-out infinite}
.ap-eyebrow{margin-top:.2rem}
.ap-eyebrow{display:inline-flex;align-items:center;gap:.3rem;margin-top:.6rem;font-size:.74rem;font-weight:800;letter-spacing:.06em;
text-transform:uppercase;color:var(--acc2);background:var(--accd);border-radius:999px;padding:.3rem .75rem}
.ap-sheet h2{font-size:1.55rem;line-height:1.15;letter-spacing:-.02em;margin:.55rem 0 .35rem}
.ap-sub{color:var(--mut);font-size:.95rem;max-width:34ch;margin:0 auto}
.ap-stores{display:flex;gap:.55rem;margin-top:1.05rem}
.ap-store{flex:1;display:flex;align-items:center;justify-content:center;gap:.6rem;min-height:58px;
background:#0b0f0d;color:#fff;border-radius:16px;padding:.5rem .8rem;text-decoration:none;text-align:left;
box-shadow:0 10px 26px rgba(11,15,13,.3);transition:transform .15s,filter .15s}
.ap-store:active{transform:scale(.97)}
.ap-store svg{width:26px;height:26px;flex:none}
.ap-store span{display:flex;flex-direction:column;line-height:1.05}
.ap-store small{font-size:.62rem;font-weight:600;letter-spacing:.03em;opacity:.8;text-transform:uppercase}
.ap-store b{font-size:1.02rem;font-weight:700;white-space:nowrap}
.ap-store.alt{background:#fff;color:var(--tx);border:1.5px solid var(--line);box-shadow:none}
.ap-web{margin-top:.85rem;background:none;border:0;color:var(--mut);font:inherit;font-size:.9rem;font-weight:600;
text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:.5rem}
@media(max-width:760px){
  .filters{grid-template-columns:1fr 1fr}
  .filters .btn{grid-column:1/-1}
  .detail{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .reviews{grid-template-columns:1fr}
}