/* Aislamiento del pie: las reglas generales de cada página no cambian B. */
#maqueta-footer.footer-b,#maqueta-footer.footer-b :where(*){box-sizing:border-box;border-radius:0!important;letter-spacing:-.5px}
#maqueta-footer.footer-b :where(*){margin:0;padding:0;font:inherit;text-transform:none}
/* Diseño B aprobado. Un solo estilo para el pie público. */
#maqueta-footer.footer-b{background:#021212;color:#f5f3f0;padding:40px 0 24px;margin:0;border:0;font:14px/1.6 var(--f-body,Arimo),Arial,sans-serif;text-align:left}
#maqueta-footer.footer-b .shell{max-width:1120px;margin:auto;padding:0 28px}
#maqueta-footer.footer-b .footgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:35px}
#maqueta-footer.footer-b .brand{font:700 24px/1.3 var(--f-title,Manrope),Arial,sans-serif;letter-spacing:-.5px}
#maqueta-footer.footer-b p{color:#b8c0bc;font-size:14px;line-height:1.6;max-width:270px;margin:12px 0}
#maqueta-footer.footer-b h3{font:600 14px/1.4 var(--f-title,Manrope),Arial,sans-serif;color:#f5f3f0;margin:0 0 16px;letter-spacing:0;text-transform:none}
#maqueta-footer.footer-b a{display:block;color:#f5f3f0;text-decoration:none;margin:8px 0;font-size:14px;line-height:1.5}
#maqueta-footer.footer-b a:hover{text-decoration:underline}
#maqueta-footer.footer-b a:focus-visible{outline:2px solid #cfa7b5;outline-offset:4px}
#maqueta-footer.footer-b .social{display:flex;flex-wrap:wrap;gap:16px;margin-top:20px}
#maqueta-footer.footer-b .social a{font-size:13px}
#maqueta-footer.footer-b .legal{border-top:1px solid #40504a;display:flex;justify-content:space-between;gap:20px;margin-top:30px;padding-top:20px;font-size:12px;color:#b8c0bc}
#maqueta-footer.footer-b .legal span:last-child{display:flex;flex-wrap:wrap;gap:20px}
#maqueta-footer.footer-b .legal a{font-size:12px;color:#b8c0bc;margin:0}
#maqueta-footer.footer-b .fiscal{max-width:1120px;margin:12px auto 0;padding:0 28px;font-size:12px}
@media(max-width:700px){#maqueta-footer.footer-b .shell{padding:0 20px}#maqueta-footer.footer-b .footgrid{grid-template-columns:1fr 1fr;gap:25px}#maqueta-footer.footer-b .footgrid>div:first-child{grid-column:1/-1}#maqueta-footer.footer-b .legal{flex-direction:column}#maqueta-footer.footer-b a{min-height:44px;padding:10px 0;margin:0}#maqueta-footer.footer-b .fiscal{padding:0 20px}}

#servicios-pie ~ #maqueta-footer.footer-b{padding:40px 0 24px}

/* Carrusel compartido: conserva estructura, controles y visibilidad existentes. */
#servicios-pie{font:16px/1.65 Arimo,Arial,Helvetica,sans-serif;letter-spacing:-.5px;color:#021212;border:0;border-radius:0!important;margin:0;text-align:left;--f-body:Arimo,Arial,Helvetica,sans-serif;--f-title:Manrope,Arial,Helvetica,sans-serif}
#servicios-pie :where(*){box-sizing:border-box;margin:0;padding:0;border-radius:0!important;font:inherit;letter-spacing:inherit;text-transform:none}
#servicios-pie{background:#D6CEC4;padding:46px 20px 8px;margin-top:0}
/* Entre la franja y el pie va la franja de abajo (nav#franja-baja), asi que el
   selector es ~ y no +. Los dos ids ganan al footer{padding;border-top} que alguna
   pagina trae en su propio estilo, que sobre el mismo gris se veia como costura. */
#servicios-pie ~ #maqueta-footer{margin-top:0;padding-top:0;border-top:0}
#servicios-pie .svp-head,#servicios-pie .svp-wrap{max-width:1140px;margin-left:auto;margin-right:auto}
#servicios-pie .svp-head{margin-bottom:22px}
#servicios-pie .svp-t{font-family:var(--f-title);font-size:1.25rem;font-weight:800;letter-spacing:-.03em;text-transform:none;line-height:1.1;color:#021212;margin:0;border-bottom:none;padding-bottom:0}
#servicios-pie .svp-wrap{position:relative}
/* El carril se desliza a mano o con las flechas, y cada tarjeta se enclava sola */
#servicios-pie .svp-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 20px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
#servicios-pie .svp-track::-webkit-scrollbar{display:none}
#servicios-pie .svp-track:focus-visible{outline:2px solid #021212;outline-offset:3px}
#servicios-pie .svp-card{flex:0 0 216px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;text-align:center;background:#ffffff;border-radius:5px!important;padding:22px 16px 18px}
#servicios-pie .svp-img{width:104px;height:104px;border-radius:5px!important;object-fit:contain;margin-bottom:14px;background:#ffffff}
/* Dos renglones reservados para el nombre, aunque solo ocupe uno: asi la fecha y
   el precio de todas las tarjetas quedan a la misma altura en la fila. */
#servicios-pie .svp-nm{font-family:var(--f-title);font-size:1rem;font-weight:800;letter-spacing:-.03em;text-transform:none;line-height:1.15;color:#021212;margin:0 0 6px;min-height:2.4em}
/* El formato de entrega, debajo del nombre y en letra pequena: el nombre es lo que
   se lee primero y las ocho tarjetas quedan con el titulo del mismo peso. */
#servicios-pie .svp-sub{display:block;font-size:0.75rem;font-weight:700;letter-spacing:0;line-height:1.3;color:#70706a}
#servicios-pie .svp-mode{font-family:var(--f-body);font-size:0.78125rem;line-height:1.4;color:#70706a;margin:0 0 12px;min-height:2.8em}
/* La proxima fecha libre, debajo del modo. Nace escondida y solo aparece cuando la
   agenda contesta con una hora de verdad, asi que una agenda caida no deja un hueco
   raro en la tarjeta. Rotulo chiquito en gris y el dia en display, en vino, igual
   que en el panel de reservar. */
#servicios-pie .svp-disp{display:flex;flex-direction:column;align-items:center;gap:2px;font-family:var(--f-body);font-size:0.6875rem;line-height:1.3;letter-spacing:-.02em;color:#70706a;margin:0 0 12px}
#servicios-pie .svp-disp[hidden]{display:none}
#servicios-pie .svp-disp-f{font-family:var(--f-title);font-size:0.8125rem;font-weight:600;letter-spacing:0;color:#3B161F;white-space:nowrap}
#servicios-pie .svp-meta{display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--f-body);font-size:0.8125rem;color:#021212;margin:0 0 16px}
#servicios-pie .svp-sep{color:#bcb8b1;user-select:none}
/* El principal pequeno de LOS TRES BOTONES (final de este archivo). Repite sus valores
   aqui porque este bloque viaja tambien dentro de la carta, que no enlaza /pie.css. */
#servicios-pie .svp-btn{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;min-height:44px;padding:10px 16px;background:#021212;color:#F5F3F0;border-radius:5px!important;font-family:var(--f-title);font-size:0.8125rem;font-weight:700;letter-spacing:.04em;line-height:1.2;text-decoration:none;transition:background-color .2s}
#servicios-pie .svp-btn:hover{background:#3B161F}
/* Las flechas, sin sombra: se separan del fondo con su raya de 1px */
#servicios-pie .svp-nav{position:absolute;top:calc(50% - 26px);transform:translateY(-50%);width:38px;height:38px;border-radius:5px!important;background:#f5f3f0;border:1px solid #bcb8b1;cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center;padding:0}
#servicios-pie .svp-nav::before{content:"";width:9px;height:9px;border-right:1.5px solid #021212;border-bottom:1.5px solid #021212}
#servicios-pie .svp-prev{left:-14px}
#servicios-pie .svp-prev::before{transform:rotate(135deg);margin-left:3px}
#servicios-pie .svp-next{right:-14px}
#servicios-pie .svp-next::before{transform:rotate(-45deg);margin-right:3px}
#servicios-pie .svp-nav[hidden]{display:none}
@media(max-width:900px){
  #servicios-pie{padding:30px 16px 4px}
  #servicios-pie .svp-nav{display:none}
  #servicios-pie .svp-track{gap:12px;scroll-padding-left:16px;padding-bottom:16px}
  /* En el telefono la tarjeta se aprieta (Mafe, 12 sep 2026): la foto mas chica y
     cada renglon con menos aire, que en vertical se hacia larguisima. Los dos
     min-height se quedan, mas justos, porque son los que mantienen alineadas la
     fecha y el precio de las ocho tarjetas de la fila. */
  #servicios-pie .svp-card{flex:0 0 172px;padding:14px 12px 12px}
  #servicios-pie .svp-img{width:66px;height:66px;margin-bottom:9px}
  #servicios-pie .svp-nm{font-size:0.9375rem;line-height:1.15;margin-bottom:4px;min-height:2.2em}
  #servicios-pie .svp-sub{font-size:0.75rem;line-height:1.2}
  #servicios-pie .svp-mode{font-size:0.75rem;line-height:1.3;margin-bottom:8px;min-height:2.6em}
  #servicios-pie .svp-disp{gap:0;font-size:0.75rem;margin-bottom:8px}
  #servicios-pie .svp-disp-f{font-size:0.8125rem}
  #servicios-pie .svp-meta{font-size:0.75rem;margin-bottom:10px}
}
@media(prefers-reduced-motion:reduce){#servicios-pie .svp-track{scroll-behavior:auto}}


#servicios-pie .svp-img{display:block;max-width:none}
#servicios-pie .svp-meta{line-height:1.65}
#servicios-pie [hidden]{display:none!important}
#servicios-pie ~ #maqueta-footer.footer-b{padding:40px 0 24px}