/* TEAM SERE V15 · versión móvil tipo app (hasta 760 px). El escritorio y la tableta no cambian.
   Contenido a todo el ancho, barra inferior de accesos, reserva de cita como pantalla principal,
   carruseles que se deslizan con el dedo y el disco grande solo cuando se ve bien. */
.app-tabbar,.app-time{display:none}

@media (max-width:760px){
 body.theme-unified{--content-inset:20px;--app-tab:66px;--app-safe:env(safe-area-inset-bottom,0px)}

 /* 1 · Contenido a todo el ancho (el disco ya no espera en los laterales). */
 body.theme-unified.home main>.section-pad,
 body.theme-unified.home .idea-b,body.theme-unified.home .method,body.theme-unified.home .disc-lane,
 body.theme-unified.home .booking-section.disc-lane,body.theme-unified.home .contact-section,
 body.theme-unified.home .site-footer{padding-left:20px;padding-right:20px}
 body.theme-unified.home .contact-copy{width:100%}
 body.theme-unified.home main{padding-bottom:0}

 /* La fila «Tu siguiente paso» de la portada la sustituye la barra inferior. */
 body.theme-unified .unified-hero .hero-bottom{display:none}

 /* Aire entre secciones para que el disco cruce grande sin tapar nada. */
 body.theme-unified.home .idea-b{padding-bottom:64px}
 body.theme-unified.home .method{padding-top:88px;padding-bottom:64px}
 body.theme-unified.home .disc-lane{padding-top:88px;padding-bottom:64px}
 body.theme-unified.home .contact-section{padding-top:96px}

 /* 2 · Barra inferior de accesos, como en una app. */
 /* Una píldora oscura: cuatro accesos (el activo se enciende en verde, con una luz arriba)
    y el botón de reservar dentro, a la derecha, siempre a mano. Referencias: «Bottom Nav Bar»
    y «Tubelight Navbar» de 21st.dev. */
 .app-tabbar{display:flex;align-items:center;gap:2px;position:fixed;z-index:85;left:10px;right:10px;
  bottom:calc(10px + var(--app-safe));height:var(--app-tab);padding:0 7px 0 6px;border-radius:26px;
  background:#101410eb;border:1px solid #ffffff1c;box-shadow:0 1px 0 #ffffff14 inset,0 18px 38px #080b0866;
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .25s}
 .app-tabbar a{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:54px;
  border-radius:18px;color:#9ba697;font:600 9.5px/1 DM,system-ui,sans-serif;letter-spacing:.01em;text-decoration:none;-webkit-tap-highlight-color:transparent;
  transition:color .25s,background .25s,transform .15s}
 .app-tabbar a:active{transform:scale(.94)}
 .app-tabbar .app-tab-icon{display:grid;place-items:center;width:26px;height:24px}
 .app-tabbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
 .app-tabbar .app-tab-label{white-space:nowrap}
 .app-tabbar a[aria-current="true"]{color:#c7ea9a;background:#b3dd7814}
 .app-tabbar a[aria-current="true"]::before{content:'';position:absolute;top:-1px;left:50%;width:22px;height:3px;margin-left:-11px;border-radius:0 0 4px 4px;
  background:#b3dd78;box-shadow:0 0 12px 2px #b3dd7899}
 .app-tabbar a.is-main{flex:0 0 auto;flex-direction:row;gap:9px;height:48px;margin-left:4px;padding:0 16px 0 6px;border-radius:17px;
  background:#b3dd78;color:#121612;font-size:14px;font-weight:700;letter-spacing:-.01em;box-shadow:0 6px 18px #b3dd7840}
 .app-tabbar a.is-main .app-tab-icon{width:36px;height:36px;border-radius:12px;background:#121612;color:#b3dd78}
 .app-tabbar a.is-main svg{width:20px;height:20px;stroke-width:1.9}
 .app-tabbar a.is-main[aria-current="true"]{background:#c7ea9a}
 .app-tabbar a.is-main::before{display:none}
 body.app-tabbar-hidden .app-tabbar,body.menu-open .app-tabbar,body.entry-active .app-tabbar,body.appointment-open .app-tabbar,body.booking-open .app-tabbar{transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none}

 /* El sonido sube a la cabecera, junto al menú: abajo queda la barra. */
 body.theme-unified .sound{top:22px;right:84px;bottom:auto;width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;
  display:grid;place-items:center;background:transparent;border:1px solid #ffffff2e;z-index:90}
 body.theme-unified .sound .equalizer{transform:scale(.86)}
 body.theme-unified.menu-open .sound{visibility:hidden}

 /* Nada queda debajo de la barra al llegar al final. */
 body.theme-unified.home .site-footer{padding-bottom:calc(50px + var(--app-tab) + var(--app-safe))}
 body.theme-unified:not(.home) .site-footer{padding-bottom:calc(40px + var(--app-tab) + var(--app-safe))}

 /* 3 · Carruseles con el dedo: opiniones, historias y gimnasio. */
 body.theme-unified .disc-lane .reviews-grid,body.theme-unified .client-stories-grid,body.theme-unified .gym-gallery{
  display:flex;grid-template-columns:none;grid-template-rows:none;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding:0 20px;margin-left:-20px;margin-right:-20px;padding:2px 20px 6px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
 body.theme-unified .disc-lane .reviews-grid::-webkit-scrollbar,body.theme-unified .client-stories-grid::-webkit-scrollbar,body.theme-unified .gym-gallery::-webkit-scrollbar{display:none}
 body.theme-unified .disc-lane .reviews-grid>*{flex:0 0 84%;scroll-snap-align:start;margin:0}
 body.theme-unified .client-stories-grid>*{flex:0 0 72%;scroll-snap-align:start}
 body.theme-unified .gym-gallery>*{flex:0 0 78%;scroll-snap-align:start;height:auto;aspect-ratio:4/3.2;grid-row:auto;grid-column:auto}
 body.theme-unified .gym-photo>span{font-size:12px;inset:auto 14px 14px}
 .app-swipe-hint{display:flex;align-items:center;gap:8px;margin:12px 0 0;color:#5e685b;font:600 11px/1.3 DM,system-ui,sans-serif;letter-spacing:.02em}
 .app-swipe-hint::before{content:'';width:26px;height:2px;border-radius:2px;background:currentColor;opacity:.55}

 /* Retrato de Sergio y método: proporciones de pantalla de móvil. */
 body.theme-unified .sergio-image{height:auto;aspect-ratio:4/4.6}
 body.theme-unified .sergio-image img{height:100%}

 /* 4 · Reserva de cita: la pantalla principal de la app. */
 body.theme-unified .booking-card{border-radius:24px;overflow:hidden;box-shadow:0 18px 40px #171b1814}
 body.theme-unified .booking-about{padding:18px 18px 16px}
 body.theme-unified .booking-main{padding:0}
 body.theme-unified .calendar-month{padding:20px 16px 18px}
 body.theme-unified .calendar-toolbar h3{font-size:22px}
 body.theme-unified .calendar-nav button{width:44px;height:44px}
 body.theme-unified .calendar-week span{font-size:12px;font-weight:700}
 body.theme-unified .calendar-days{gap:6px 2px}
 body.theme-unified .calendar-days button{width:100%;max-width:44px;height:44px;font-size:15px;justify-self:center}
 body.theme-unified .calendar-availability-note{font-size:13px}

 /* Formulario de cita a pantalla completa, con horas para tocar y botón fijo abajo. */
 body.theme-unified .appointment-drawer{padding-bottom:0}
 body.theme-unified .appointment-drawer .appointment-close{position:sticky;top:12px;z-index:5;margin-left:auto;display:grid;place-items:center;
  width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:#121612;color:#f4f6ee;font-size:0;box-shadow:0 8px 20px #1216123d}
 body.theme-unified .appointment-drawer .appointment-close::before{content:'';width:16px;height:16px;background:center/contain no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f4f6ee' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3.5 3.5l9 9M12.5 3.5l-9 9'/%3E%3C/svg%3E")}
 body.theme-unified .appointment-drawer .time-selects{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .app-time{display:block;margin:6px 0 4px}
 .app-hours{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
 .app-hours button,.app-minutes button{min-height:46px;border-radius:14px;border:1px solid #171b1829;background:#fff;color:#171b18;
  font:600 15px/1 DM,system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
 .app-hours button:disabled{opacity:.32;text-decoration:line-through}
 .app-hours button[aria-pressed="true"],.app-minutes button[aria-pressed="true"]{background:#171b18;color:#f3f7ec;border-color:#171b18}
 .app-minutes{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:12px;border:1px solid #171b1829;border-radius:14px;overflow:hidden;background:#fff}
 .app-minutes button{border:0;border-radius:0;border-left:1px solid #171b181a}
 .app-minutes button:first-child{border-left:0}
 .app-time-label{display:block;margin:14px 0 8px;font:700 12px/1.2 DM,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#5e685b}
 .app-time-error{margin-top:10px;color:#9b2d20;font:600 13px/1.4 DM,system-ui,sans-serif}
 body.theme-unified .appointment-drawer input:not([type=checkbox]){min-height:50px;font-size:16px}
 body.theme-unified .appointment-drawer form>.cta[type=submit]{position:sticky;bottom:calc(12px + var(--app-safe));z-index:3;width:100%;justify-content:space-between;
  box-shadow:0 12px 28px #171b1838}
}

@media (max-width:760px) and (prefers-reduced-motion:reduce){.app-tabbar{transition:none}}
