/* ============================================================
   18. PASADA DE MÓVIL  ·  Android + iPhone
   ============================================================ */

/* --- 1. altura real de la barra, medida por JS --- */
html{scroll-padding-top:calc(var(--tb, 96px) + 14px)}
.hero{padding-top:calc(var(--tb, 96px) + 26px)}
@media(max-width:860px){
  html{scroll-padding-top:calc(var(--tb, 116px) + 12px)}
  .hero{padding-top:calc(var(--tb, 116px) + 22px)}
}
.drawer{max-height:calc(100dvh - var(--tb, 116px)); overflow-y:auto; -webkit-overflow-scrolling:touch}

/* --- 2. respaldo si el navegador no entiende color-mix (iOS 15 y anteriores) --- */
@supports not (color-mix(in srgb, red, blue)){
  body[data-mundo="dulce"] .m1{background:linear-gradient(150deg,#E8496E,#1A1108)}
  body[data-mundo="dulce"] .m2{background:linear-gradient(160deg,#D9942F,#17100A)}
  body[data-mundo="dulce"] .m3{background:linear-gradient(140deg,#F79BB0,#150F09)}
  body[data-mundo="dulce"] .m4{background:linear-gradient(165deg,#C4506B,#1C1209)}
  body[data-mundo="dulce"] .m5{background:linear-gradient(145deg,#EFC07A,#191007)}
  body[data-mundo="dulce"] .m6{background:linear-gradient(155deg,#8E3F55,#120C07)}
  body[data-mundo="pelu"] .m1{background:linear-gradient(150deg,#17A398,#101A18)}
  body[data-mundo="pelu"] .m2{background:linear-gradient(160deg,#D9942F,#17100A)}
  body[data-mundo="pelu"] .m3{background:linear-gradient(140deg,#79D8CD,#0F1614)}
  body[data-mundo="pelu"] .m4{background:linear-gradient(165deg,#3A8C86,#121918)}
  body[data-mundo="pelu"] .m5{background:linear-gradient(145deg,#EFC07A,#191007)}
  body[data-mundo="pelu"] .m6{background:linear-gradient(155deg,#1C6F69,#0D1211)}
  .shell .promo{border-color:rgba(150,86,15,.45); background:rgba(255,255,255,.5)}
  .shell .paso.on{border-color:rgba(150,86,15,.5)}
  .shell .day:hover:not(:disabled),.shell .slot:hover:not(:disabled){background:#FFF6E6}
  .chat__head{background:linear-gradient(140deg, rgba(242,172,94,.18), transparent)}
  .card:hover{border-color:rgba(150,86,15,.45)}
}
/* respaldo de aspect-ratio */
@supports not (aspect-ratio: 1){
  .card__media{height:0; padding-bottom:75%}
  .day{height:42px}
}

/* --- 3. teléfonos: espaciado y densidad --- */
@media(max-width:600px){
  .wrap{width:min(100% - 24px, var(--max))}
  section{padding:40px 0}
  .shell{padding:18px 16px; border-radius:20px}
  .hero .shell{padding:22px 18px}
  h1{line-height:1.06}
  h2,h3,h4{overflow-wrap:break-word}
  .world__head{margin-bottom:20px}
  .world__head h2{max-width:none}
  .rail{margin-top:26px}
  .ofertas{margin-top:22px}
  .chip{padding:13px 15px}
  .steps{grid-template-columns:1fr !important; gap:16px}
  .duo{gap:30px}
  .promos{gap:12px}
  .foot{padding:38px 0 26px}
  .legal{padding:16px 0 34px; font-size:.76rem}
}

/* --- 4. reserva de cita en pantalla estrecha --- */
@media(max-width:600px){
  .paso__h{padding:14px 14px; gap:10px}
  .paso__c{padding:0 10px 16px}
  /* El calendario tiene 7 columnas fijas: si las casillas no pueden
     encogerse, no caben en el teléfono y se salen por la derecha.
     Al quitarles el alto mínimo, se ajustan solas y siguen cuadradas. */
  /* En el teléfono el calendario aprovecha casi todo el ancho: con menos
     relleno a los lados, las casillas pasan de 33 a ~40 px y se pueden
     tocar con el dedo sin fallar. */
  .cal{padding:11px 6px}
  .cal__dow,.cal__grid{gap:3px}
  .day{min-height:0; font-size:.8rem; border-radius:9px}
  .cal__nota{font-size:.72rem; line-height:1.4}
  .opts{display:grid; grid-template-columns:1fr 1fr; gap:8px}
  #extras.opts{grid-template-columns:1fr}
  .opt{flex:none}
  .opt span{padding:12px 10px; font-size:.86rem; justify-content:flex-start}
  .slots{grid-template-columns:repeat(3,1fr); gap:7px}
  .slot{font-size:.79rem; padding:11px 4px}
  .sub{margin:16px 0 9px}
}
@media(max-width:360px){
  /* teléfonos estrechos: una sola columna, nada se sale */
  .opts{grid-template-columns:1fr}
  .svc-list{grid-template-columns:1fr}
  /* el nombre del servicio y su precio se reparten en dos líneas si hace falta */
  .svc > span{flex-wrap:wrap; gap:6px; padding:12px 13px}
  .svc b{overflow-wrap:anywhere}
  .svc > span > *{min-width:0}
  .slots{grid-template-columns:repeat(2,1fr)}
  .day{min-height:0; font-size:.76rem}
}

/* la barra de resumen no debe tapar el contenido */
body.cita-visible{padding-bottom:86px}
@media(min-width:1001px){body.cita-visible{padding-bottom:0}}
@media(max-width:1000px){
  body.cita-visible .chat{bottom:calc(96px + env(safe-area-inset-bottom))}
}

/* --- 5. mapa legible en el teléfono --- */
@media(max-width:640px){
  .mapa svg text{font-size:15px}
  .mapa svg .mt-name{font-size:17px}
  .mapa svg .mt-addr{font-size:11px}
  .mapa svg .mt-park{font-size:13px}
  .mapa__pie{font-size:.76rem; line-height:1.4; align-items:flex-start}
  .mapa__pie i{margin-top:5px}
}

/* --- 6. iPhone: alturas reales y zona segura --- */
.chat{max-height:min(540px, calc(100dvh - 130px))}
.chat-fab{bottom:calc(18px + env(safe-area-inset-bottom))}
@media(max-width:520px){
  .chat{bottom:calc(82px + env(safe-area-inset-bottom)); max-height:calc(100dvh - 170px)}
  .chat-fab{bottom:calc(16px + env(safe-area-inset-bottom))}
}
body.cita-visible .chat-fab{bottom:calc(96px + env(safe-area-inset-bottom))}
.drawer{padding-bottom:calc(20px + env(safe-area-inset-bottom))}

/* --- 7. táctil: sin hover pegado, con respuesta al pulsar --- */
*{-webkit-tap-highlight-color:transparent}
@media(hover:none){
  .card:hover{transform:none; box-shadow:0 8px 20px -14px rgba(70,44,16,.55)}
  .app:hover{transform:none}
  .oferta:hover{transform:none}
  .social a:hover{transform:none}
  .btn--solid:hover,.shell .btn--solid:hover{transform:none}
  .btn:active,.shell .btn:active{transform:scale(.97)}
  .card:active{transform:scale(.99)}
  .day:active,.slot:active,.opt span:active,.svc span:active{filter:brightness(1.08)}
  .btn:hover::after{animation:none}
}

/* --- 8. nada se desborda a lo ancho --- */
html,body{max-width:100%; overflow-x:hidden}
img,svg,video{max-width:100%}
.oferta h4,.card__body h4,.svc b{overflow-wrap:break-word}
.rail__title{flex-wrap:wrap}


/* ============================================================
   19. FUERA LA BARRA FLOTANTE DE RESUMEN EN MÓVIL
   El resumen pasa a ser una tarjeta más, debajo de los pasos
   ============================================================ */
.resumen__mini{display:none !important}
@media(max-width:1000px){
  .resumen, .shell .resumen{
    position:static !important; transform:none !important; bottom:auto !important;
    left:auto !important; right:auto !important; z-index:auto !important;
    margin-top:14px; padding:20px !important; border-radius:var(--r-md) !important;
    border:1px solid color-mix(in srgb, var(--vv) 35%, transparent) !important; border-bottom-width:1px !important;
    background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.62)) !important;
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
    box-shadow:none !important; transition:none !important;
  }
  .resumen h3{display:block !important}
  .resumen > p{display:block !important}
  .res-row{display:flex !important}
  .res-total{display:flex !important}
  .resumen__pie{display:block !important}
  .resumen .btn, .shell .resumen .btn{width:100% !important; margin-top:14px !important; padding:14px 20px !important}
  .shell .resumen h3{color:var(--pt)}
  .shell .resumen > p,.shell .resumen .res-row span,.shell .resumen .resumen__pie{color:var(--pm)}
  .shell .resumen .res-row strong{color:var(--pt)}
  .shell .resumen .res-total .t{color:var(--pa)}
}
@supports not (color-mix(in srgb, red, blue)){
  @media(max-width:1000px){ .resumen,.shell .resumen{border-color:rgba(150,86,15,.4) !important} }
}
/* ya no hace falta reservar espacio ni mover el chat */
body.cita-visible{padding-bottom:0 !important}
body.cita-visible .chat-fab{bottom:calc(18px + env(safe-area-inset-bottom)) !important}
@media(max-width:520px){ body.cita-visible .chat-fab{bottom:calc(16px + env(safe-area-inset-bottom)) !important} }
@media(max-width:1000px){ body.cita-visible .chat{bottom:calc(82px + env(safe-area-inset-bottom)) !important} }


/* --- día y hora elegidos: dorado más marcado --- */
.shell .day.sel, .shell .slot.sel{
  background:linear-gradient(150deg,#F7C578 0%,#E5A143 45%,#C8801F 100%) !important;
  color:#150D04 !important; font-weight:700 !important; border-color:#B0701A !important;
  box-shadow:0 6px 16px -8px rgba(180,115,25,.9) !important; text-shadow:none !important}
.shell .day.sel::after{background:#150D04 !important}

/* --- botón inactivo: gris neutro, sin latido ni verde apagado --- */
.btn--wa:disabled, .shell .btn--wa:disabled,
.btn--solid:disabled, .shell .btn--solid:disabled{
  background:rgba(120,110,100,.16) !important;
  color:#6E665D !important;
  border:1px solid rgba(90,80,70,.22) !important;
  box-shadow:none !important; animation:none !important; opacity:1 !important;
  text-shadow:none !important}
.btn--wa:disabled svg, .shell .btn--wa:disabled svg{opacity:.5}


/* notas de la sección de delivery */
.notas{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:10px}
.notas li{position:relative; padding-left:20px; font-size:.92rem; line-height:1.5; color:var(--pm)}
.notas li::before{content:''; position:absolute; left:0; top:.58em; width:7px; height:7px; border-radius:50%;
  background:linear-gradient(145deg,#F7C578,#D9942F)}
/* cierre de pedidos personalizados */
.cierre{margin-top:22px; padding:15px 18px; border-radius:14px; font-size:.9rem; line-height:1.55;
  color:var(--pt) !important; font-weight:500;
  border:1px dashed rgba(150,86,15,.42); background:rgba(255,255,255,.5)}
@media(max-width:600px){
  .notas li{font-size:.89rem}
  .cierre{padding:13px 15px; font-size:.87rem}
}