*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#120b10;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:#fff}.hair-kiosk{position:fixed;inset:0;background:#130b12}.loading-screen{height:100vh;display:grid;place-items:center;text-align:center}.slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}.slide.active{opacity:1}.slide-bg{position:absolute;inset:0;z-index:0}.slide-bg img{width:100%;height:100%;object-fit:cover;object-position:center}.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(24,10,20,.28) 0%,rgba(24,10,20,.05) 45%,rgba(24,10,20,.55) 100%);z-index:1}.salon-logo{position:absolute;left:4vw;top:5vh;z-index:4;width:250px;max-width:28vw;background:rgba(24,10,20,.55);border:1px solid rgba(255,255,255,.22);border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.25)}.tag{position:absolute;right:4vw;top:5vh;z-index:4;background:rgba(24,10,20,.72);border-radius:999px;padding:12px 22px;font-weight:900}.panel{position:absolute;right:5vw;bottom:10vh;width:min(430px,34vw);z-index:3;background:rgba(24,10,20,.58);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.18);border-radius:24px;padding:22px 24px;box-shadow:0 20px 60px rgba(0,0,0,.30)}.badge{display:inline-flex;gap:7px;align-items:center;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:1000;background:rgba(255,255,255,.11);border-radius:999px;padding:6px 12px;color:#ffd8e4}.badge::before{content:"";width:9px;height:9px;border-radius:50%;background:#2ce879}.panel h1{font-size:42px;line-height:.98;letter-spacing:-.045em;margin:14px 0 8px}.panel p{font-size:17px;line-height:1.28;margin:0 0 14px;color:#ffe9ef}.price{display:inline-flex;background:linear-gradient(135deg,#f16d92,#ffbf74);color:#22111d;border-radius:999px;padding:11px 18px;font-size:22px;font-weight:1000}.services-list{position:absolute;left:4vw;bottom:5vh;z-index:4;display:grid;grid-template-columns:repeat(3, minmax(190px, 1fr));gap:14px;max-width:800px}.mini{background:rgba(24,10,20,.62);border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:14px}.mini h3{margin:0 0 6px;color:#ffd8e4;text-transform:uppercase;letter-spacing:.13em;font-size:13px}.mini p{margin:0;font-size:16px;font-weight:900}.qr{position:absolute;right:4vw;top:12vh;z-index:5;background:#fff;border-radius:16px;padding:10px;box-shadow:0 12px 40px rgba(0,0,0,.25)}.qr img{width:120px;height:120px;display:block}.progress{position:absolute;left:0;bottom:0;height:5px;background:linear-gradient(90deg,#f16d92,#2456d9,#18e3ff);z-index:6;animation:bar var(--slide-duration,8s) linear infinite}.mobile-landing{min-height:100dvh;overflow:auto;background:linear-gradient(160deg,#20111d,#472136 55%,#fff1f5);padding:20px;color:#fff}.mobile-card{max-width:620px;margin:0 auto 20px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.18);border-radius:28px;padding:22px;backdrop-filter:blur(16px)}.mobile-card img{max-width:220px}.service-row{display:block;background:#fff;color:#25131f;border-radius:18px;margin:12px 0;padding:16px;text-decoration:none}.booking-form input,.booking-form select,.booking-form textarea{width:100%;margin:8px 0 14px;border:0;border-radius:14px;padding:13px}.booking-form button{width:100%;border:0;border-radius:16px;background:#f16d92;color:#fff;font-weight:1000;padding:15px}@keyframes bar{from{width:0}to{width:100%}}@media(max-width:700px){.salon-logo{width:170px;max-width:55vw;top:18px;left:18px}.tag{right:18px;top:18px;font-size:13px}.qr{right:18px;top:74px}.qr img{width:86px;height:86px}.panel{width:auto;left:18px;right:18px;bottom:24px;padding:16px;border-radius:20px}.panel h1{font-size:28px}.panel p{font-size:14px}.price{font-size:18px;padding:9px 14px}.services-list{display:none}}

/* Mobile interactive client view */
body.mobile-user-page{height:auto;min-height:100%;overflow:auto;background:#20111d;color:#fff}
body.mobile-user-page .mobile-landing{height:auto;min-height:100dvh;overflow:visible;background:linear-gradient(145deg,#170b14 0%,#32182a 45%,#ffeaf0 100%);padding:18px 16px 28px;color:#fff;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}
.mobile-index{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:720px;margin:0 auto 14px;padding:8px;background:rgba(20,9,17,.78);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.12);border-radius:18px;box-shadow:0 16px 40px rgba(0,0,0,.22)}
.mobile-index a{display:flex;align-items:center;justify-content:center;min-height:40px;border-radius:13px;text-decoration:none;color:#ffeaf0;font-weight:900;font-size:14px;background:rgba(255,255,255,.08)}
.mobile-index a:active,.mobile-index a:hover{background:linear-gradient(135deg,#f16d92,#7d5cff);color:#fff}
.mobile-hero-card,.mobile-card{max-width:720px;margin:0 auto 16px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:28px;padding:20px;backdrop-filter:blur(16px);box-shadow:0 20px 70px rgba(0,0,0,.25)}
.mobile-hero-card{background:linear-gradient(155deg,rgba(45,18,37,.92),rgba(117,42,85,.72));padding:22px}
.mobile-hero-top{display:flex;gap:16px;align-items:center}.mobile-hero-top img{width:130px;max-width:38vw;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.mobile-kicker,.mobile-section-title span{display:inline-block;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:1000;color:#ffbfd0;margin-bottom:8px}.mobile-hero-card h1{font-size:34px;line-height:1;margin:0 0 8px;letter-spacing:-.04em}.mobile-hero-card p{margin:0;color:#ffe7ef;line-height:1.35}.mobile-phone{margin-top:14px!important;font-size:14px}.mobile-actions{display:grid;gap:10px;margin-top:18px}.mobile-main-button,.mobile-link-button{display:flex;justify-content:center;align-items:center;text-align:center;text-decoration:none;border:0;border-radius:16px;padding:14px 16px;font-weight:1000}.mobile-main-button{background:linear-gradient(135deg,#f16d92,#ffbf74);color:#21111c}.mobile-main-button.alt{background:linear-gradient(135deg,#7d5cff,#23d3ff);color:#fff}.mobile-link-button{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#fff}.mobile-message{margin-top:14px;border-radius:16px;padding:13px 14px;font-weight:900}.mobile-message.success{background:rgba(42,220,120,.18);color:#bdfbd5}.mobile-message.error{background:rgba(255,90,90,.18);color:#ffd1d1}.mobile-section-title h2{font-size:28px;margin:0 0 8px;letter-spacing:-.03em}.mobile-section-title p{margin:0 0 14px;color:#ffe4ee;line-height:1.38}.mobile-price-list{max-height:58dvh;overflow:auto;padding-right:4px;scroll-behavior:smooth}.service-row-card{margin:0 0 10px}.service-row-card a{display:grid;gap:4px;background:#fff;color:#25131f;border-radius:18px;margin:0;padding:15px 16px;text-decoration:none;border:1px solid rgba(255,255,255,.25)}.service-row-card span{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:#b04465;font-weight:1000}.service-row-card strong{font-size:18px;line-height:1.1}.service-row-card small{color:#5b4550}.service-row-card b{justify-self:start;margin-top:6px;border-radius:999px;background:#20111d;color:#fff;padding:8px 12px;font-size:15px}.selected-service-note{background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:12px;margin-bottom:14px}.booking-form label{display:block;margin:0 0 10px;font-weight:900;color:#ffe7ef}.booking-form input,.booking-form select,.booking-form textarea{width:100%;margin:7px 0 0;border:0;border-radius:14px;padding:13px 14px;font:inherit;color:#25131f;background:#fff}.booking-form textarea{min-height:92px;resize:vertical}.mobile-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.booking-form button{width:100%;border:0;border-radius:16px;background:linear-gradient(135deg,#f16d92,#7d5cff);color:#fff;font-weight:1000;padding:15px;margin-top:4px;font-size:17px;box-shadow:0 14px 34px rgba(241,109,146,.24)}
@media(max-width:520px){body.mobile-user-page .mobile-landing{padding:12px 10px 22px}.mobile-index{border-radius:16px}.mobile-index a{font-size:13px;min-height:38px}.mobile-hero-top{align-items:flex-start}.mobile-hero-top img{width:108px}.mobile-hero-card h1{font-size:27px}.mobile-hero-card,.mobile-card{border-radius:22px;padding:16px}.mobile-price-list{max-height:62dvh}.mobile-form-grid{grid-template-columns:1fr}}

/* v58: el kiosko de TV no muestra cajas fijas de servicios; el indice interactivo vive en cliente.php */
.hair-kiosk .services-list{display:none!important}

/* v60: la vista cliente debe tener scroll real; el kiosko de TV sigue fijo */
html.mobile-user-html{height:auto!important;min-height:100%!important;overflow-y:auto!important;overflow-x:hidden!important;background:#20111d!important;scroll-behavior:smooth}
html.mobile-user-html body.mobile-user-page{height:auto!important;min-height:100%!important;overflow-y:auto!important;overflow-x:hidden!important;position:relative!important;-webkit-overflow-scrolling:touch;overscroll-behavior-y:auto}
html.mobile-user-html body.mobile-user-page .mobile-landing{height:auto!important;min-height:100dvh!important;overflow:visible!important;padding-bottom:80px!important}
html.mobile-user-html body.mobile-user-page .mobile-card,
html.mobile-user-html body.mobile-user-page .mobile-hero-card{overflow:visible}
html.mobile-user-html body.mobile-user-page .mobile-price-list{max-height:none!important;overflow:visible!important;padding-right:0}
html.mobile-user-html body.mobile-user-page .mobile-index{top:8px}


/* v89: cliente móvil con barras del navegador y menú fijo */
html.mobile-user-html,
body.mobile-user-page{
  background:var(--mobile-bars-color,#20111d)!important;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
body.mobile-user-page::after{
  content:"";
  position:fixed;
  left:0;right:0;bottom:0;
  height:env(safe-area-inset-bottom,0px);
  background:var(--mobile-bars-color,#20111d);
  z-index:9999;
  pointer-events:none;
}
html.mobile-user-html body.mobile-user-page .mobile-index{
  position:sticky!important;
  top:env(safe-area-inset-top,0px)!important;
  z-index:999!important;
  background:color-mix(in srgb, var(--mobile-bars-color,#20111d) 86%, #000 14%)!important;
}
#inicio,#tarifas,#reservas{scroll-margin-top:84px}

/* v90: cliente móvil con menú fijo real */
html.mobile-user-html,
body.mobile-user-page{
  min-height:100dvh!important;
  overflow-y:auto!important;
  background:var(--mobile-bars-color,#20111d)!important;
}
.mobile-index{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  z-index:99999!important;
  padding-top:calc(10px + env(safe-area-inset-top,0px))!important;
  background:color-mix(in srgb, var(--mobile-bars-color,#20111d) 88%, #000 12%)!important;
}
.mobile-landing{padding-top:calc(70px + env(safe-area-inset-top,0px))!important}
#inicio,#tarifas,#reservas{scroll-margin-top:calc(90px + env(safe-area-inset-top,0px))!important}
body.mobile-user-page::after{background:var(--mobile-bars-color,#20111d)!important}
.mobile-whatsapp-link{display:flex;align-items:center;justify-content:center;min-height:42px;border-radius:14px;background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;text-decoration:none;font-weight:950;margin-top:8px}

/* v91: QR usuario peluqueria - menú realmente fijo arriba */
html.mobile-user-html,
html.mobile-user-html body.mobile-user-page{
  height:auto!important;
  min-height:100dvh!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  background:var(--mobile-bars-color,#20111d)!important;
  scroll-behavior:smooth;
}
body.mobile-user-page .mobile-index{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  max-width:none!important;
  margin:0!important;
  border-radius:0 0 18px 18px!important;
  z-index:2147483000!important;
  padding:calc(10px + env(safe-area-inset-top,0px)) 10px 10px!important;
  background:color-mix(in srgb, var(--mobile-bars-color,#20111d) 90%, #000 10%)!important;
  box-shadow:0 10px 30px rgba(0,0,0,.28)!important;
}
body.mobile-user-page .mobile-landing{
  padding-top:calc(78px + env(safe-area-inset-top,0px))!important;
}
#inicio,#tarifas,#reservas{scroll-margin-top:calc(92px + env(safe-area-inset-top,0px))!important;}

/* v120: soporte de video en diapositivas del kiosko */
.slide-bg video,
.slide-bg iframe,
.slide-video-embed,
.slide-poster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.slide-bg video,
.slide-poster{
  object-fit:cover;
  object-position:center;
}
.slide-video-embed{z-index:1;background:#120b10;overflow:hidden;pointer-events:none;}
.slide-video-embed iframe{border:0;display:block;transform:scale(1.02);transform-origin:center;}
.slide.active .slide-video-embed + *,
.slide.active .slide-video-embed{opacity:1;}


/* v121: poster visible hasta que el video carga y recorte tipo cover para Vimeo/YouTube */
.slide-bg{overflow:hidden;background:#120b10;}
.slide-poster.media-poster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:1;
  opacity:1;
  transition:opacity .45s ease;
}
.slide-video.media-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:2;
  opacity:0;
  transition:opacity .45s ease;
  background:#120b10;
}
.slide-video.media-video.is-ready{opacity:1;}
.slide-video-embed{
  z-index:2!important;
  background:transparent!important;
  opacity:0;
  transition:opacity .45s ease;
}
.slide-video-embed.is-ready{opacity:1;}
.slide-video-embed iframe{
  position:absolute;
  top:50%!important;
  left:50%!important;
  width:max(100vw,177.78vh)!important;
  height:max(100vh,56.25vw)!important;
  min-width:100vw!important;
  min-height:100vh!important;
  border:0!important;
  display:block!important;
  transform:translate(-50%,-50%) scale(1.18)!important;
  transform-origin:center center!important;
  pointer-events:none!important;
}
@supports (width: 100dvw){
  .slide-video-embed iframe{
    width:max(100dvw,177.78dvh)!important;
    height:max(100dvh,56.25dvw)!important;
    min-width:100dvw!important;
    min-height:100dvh!important;
  }
}


/* VIVEO review 2026-06-03: evitar oscurecimiento global de fotos reales en kiosko */
.hair-kiosk .slide::after{background:linear-gradient(90deg,rgba(24,10,20,.08) 0%,rgba(24,10,20,.01) 45%,rgba(24,10,20,.12) 100%)!important;}
.hair-kiosk .slide-bg img{filter:saturate(1.06) contrast(1.02) brightness(1.03)!important;}