/* pideME — directorio público y ficha de restaurante */
:root {
  --fondo: #f7f4ee; --tarjeta: #ffffff; --tinta: #1b1916; --suave: #6f6a62; --tenue: #a39d93; --linea: #e8e2d8;
  --marca: #e4572e; --marca-suave: #fbe3da; --ok: #1f7a4d; --ok-suave: #dff3e8; --wa: #1f7a4d;
  --radio: 18px; --sombra: 0 1px 2px rgba(27,25,22,.06), 0 8px 24px rgba(27,25,22,.07);
  --titulo: 'Bricolage Grotesque', Georgia, serif; --texto: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pie: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root { --fondo: #151412; --tarjeta: #1f1d1a; --tinta: #f3efe8; --suave: #b3ada3; --tenue: #7d776e; --linea: #2f2c28;
          --marca-suave: #3a231b; --ok: #4cc287; --ok-suave: #16301f; --wa: #1f7a4d; --sombra: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.25); }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 16px/1.5 var(--texto); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titulo); margin: 0; line-height: 1.1; letter-spacing: -.01em; }
p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }

.barra { max-width: 1180px; margin: 0 auto; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.marca { font: 800 26px var(--titulo); text-decoration: none; letter-spacing: -.02em; }
.marca b { color: var(--marca); }
.enlace-sumate { font-weight: 600; font-size: 15px; color: var(--suave); text-decoration: none; }
.enlace-sumate:hover { color: var(--tinta); }

.heroe { max-width: 1180px; margin: 0 auto; padding: 28px 20px 8px; display: grid; gap: 14px; }
.heroe h1 { font-size: clamp(38px, 7vw, 72px); font-weight: 800; max-width: 12ch; }
.heroe > p { font-size: 18px; color: var(--suave); max-width: 52ch; }
.buscador { margin-top: 8px; display: flex; align-items: center; gap: 10px; background: var(--tarjeta); border-radius: 999px; padding: 6px 8px 6px 20px;
  box-shadow: var(--sombra); max-width: 640px; border: 2px solid transparent; color: var(--suave); }
.buscador:focus-within { border-color: var(--marca); }
.buscador input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 500 17px var(--texto); color: var(--tinta); padding: 12px 0; }
.filtros { display: flex; gap: 8px; overflow-x: auto; padding: 6px 0 4px; scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.filtro { flex: none; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linea); background: var(--tarjeta); font-weight: 600; font-size: 15px; }
.filtro.etq { background: transparent; }
.filtro[aria-pressed="true"] { background: var(--tinta); color: var(--fondo); border-color: var(--tinta); }

.lista-wrap { max-width: 1180px; margin: 0 auto; padding: 14px 20px 40px; }
.conteo { color: var(--suave); font-weight: 600; min-height: 24px; margin-bottom: 8px; }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; }
.tarjeta { background: var(--tarjeta); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.tarjeta.fantasma { height: 340px; background: linear-gradient(100deg, var(--tarjeta) 30%, var(--linea) 50%, var(--tarjeta) 70%); background-size: 300% 100%; animation: brillo 1.4s linear infinite; }
@keyframes brillo { to { background-position: -150% 0; } }
.tapa { position: relative; display: block; aspect-ratio: 16 / 8; background: var(--c); overflow: hidden; }
.tapa img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.tarjeta:hover .tapa img { transform: scale(1.03); }
.tapa-letra { position: absolute; inset: 0; display: grid; place-items: center; font: 800 64px var(--titulo); color: rgba(255,255,255,.9);
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 60%); }
.sello { position: absolute; top: 12px; left: 12px; background: var(--tarjeta); color: var(--tinta); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.cuerpo { padding: 14px 16px 16px; display: grid; gap: 6px; flex: 1; align-content: start; }
.titulo { display: flex; align-items: center; gap: 10px; }
.logo { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; flex: none; margin-top: -34px; border: 3px solid var(--tarjeta); background: var(--tarjeta); }
.titulo h3 { font-size: 22px; min-width: 0; }
.titulo h3 a { text-decoration: none; }
.etiquetas { color: var(--suave); font-size: 15px; }
.estado { font-size: 14px; font-weight: 600; color: var(--suave); display: flex; align-items: center; gap: 6px; }
.estado.abierto { color: var(--ok); }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--tenue); flex: none; }
.punto.si { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-suave); }
.zona { font-size: 14px; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.servicios { display: flex; gap: 6px; flex-wrap: wrap; }
.servicios span { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--fondo); color: var(--suave); }
.acciones { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.boton-wa, .boton-sec, .boton-claro { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.boton-wa { background: var(--wa); color: #fff; flex: 1 1 auto; }
.boton-wa::before { content: ''; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2Zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.3-.4.8-1.4.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 2.9 2.9 0 0 0-.9 2.2 5.1 5.1 0 0 0 1.1 2.7 11.6 11.6 0 0 0 4.4 3.9c1.6.7 2.3.8 3.1.6a2.6 2.6 0 0 0 1.7-1.2 2.1 2.1 0 0 0 .1-1.2c0-.1-.2-.2-.4-.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2Zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.3-.4.8-1.4.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 2.9 2.9 0 0 0-.9 2.2 5.1 5.1 0 0 0 1.1 2.7 11.6 11.6 0 0 0 4.4 3.9c1.6.7 2.3.8 3.1.6a2.6 2.6 0 0 0 1.7-1.2 2.1 2.1 0 0 0 .1-1.2c0-.1-.2-.2-.4-.3Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.boton-sec { border: 1px solid var(--linea); background: var(--tarjeta); }
.boton-wa:hover { filter: brightness(1.08); }
.boton-sec:hover { border-color: var(--tenue); }
.vacio { grid-column: 1 / -1; text-align: center; color: var(--suave); padding: 40px 10px; }

.como { max-width: 1180px; margin: 0 auto; padding: 20px 20px 40px; }
.como h2 { font-size: 32px; margin-bottom: 18px; }
.como ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; counter-reset: paso; }
.como li { counter-increment: paso; background: var(--tarjeta); border-radius: var(--radio); padding: 18px; display: grid; gap: 4px; }
.como li::before { content: counter(paso); font: 800 30px var(--titulo); color: var(--marca); }
.como li b { font-size: 18px; }
.como li span { color: var(--suave); }
.sumate { max-width: 1140px; margin: 0 auto 40px; padding: 32px; border-radius: 28px; background: var(--tinta); color: var(--fondo);
  display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.sumate h2 { font-size: 34px; margin-bottom: 6px; }
.sumate p { opacity: .8; max-width: 56ch; }
.boton-claro { background: var(--marca); color: #fff; padding: 0 24px; min-height: 50px; }
.pie { text-align: center; color: var(--suave); padding: 10px 20px calc(30px + var(--pie)); font-size: 14px; }
@media (max-width: 640px) {
  .heroe { padding-top: 12px; }
  .sumate { margin: 0 16px 30px; padding: 24px; }
  .tarjetas { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Ficha ---------- */
.ficha-portada { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.ficha-portada .img { aspect-ratio: 16 / 6; border-radius: 26px; background: var(--c, var(--marca)); overflow: hidden; display: grid; place-items: center; }
.ficha-portada img { width: 100%; height: 100%; object-fit: cover; }
.ficha-portada .letra { font: 800 96px var(--titulo); color: rgba(255,255,255,.85); }
.ficha-cab { max-width: 1180px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: end; }
.ficha-cab .logo-g { width: 96px; height: 96px; border-radius: 26px; margin-top: -48px; margin-left: 18px; border: 4px solid var(--fondo); background: var(--tarjeta); object-fit: cover; }
.ficha-cab .logo-g.vacio-l { visibility: hidden; }
.ficha-cab h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 800; padding-top: 14px; }
.ficha-info { max-width: 1180px; margin: 0 auto; padding: 10px 20px 0; display: grid; gap: 8px; }
.ficha-info .desc { color: var(--suave); font-size: 17px; max-width: 70ch; }
.ficha-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.ficha-acciones .boton-wa { flex: 0 1 auto; min-width: 200px; }
.ficha-cuerpo { max-width: 1180px; margin: 0 auto; padding: 24px 20px 60px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.cats { position: sticky; top: 0; z-index: 5; background: var(--fondo); display: flex; gap: 8px; overflow-x: auto; padding: 10px 0; scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.cat-sec { padding-top: 14px; scroll-margin-top: 70px; }
.cat-sec h2 { font-size: 26px; margin-bottom: 4px; }
.cat-sec > p { color: var(--suave); margin-bottom: 8px; }
.platos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 10px; }
.plato { background: var(--tarjeta); border-radius: 16px; padding: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.plato.agotado { opacity: .55; }
.plato b { font-size: 16px; display: block; }
.plato p { color: var(--suave); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.plato .precio { font-weight: 700; margin-top: 6px; display: block; }
.plato img { width: 92px; height: 92px; border-radius: 12px; object-fit: cover; }
.lateral { display: grid; gap: 16px; position: sticky; top: 16px; }
.caja { background: var(--tarjeta); border-radius: var(--radio); padding: 18px; display: grid; gap: 10px; box-shadow: var(--sombra); }
.caja h3 { font-size: 20px; }
.caja .dir { color: var(--suave); }
.horario { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 14px; }
.horario .hoy { font-weight: 700; }
.horario .cerr { color: var(--tenue); }
.mapa { font-weight: 600; color: var(--marca); }
.barra-movil { display: none; }
@media (max-width: 900px) {
  .ficha-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: static; order: -1; }
  .ficha-cab { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ficha-cab .logo-g { width: 76px; height: 76px; margin-top: -38px; }
  .ficha-cab h1 { padding-top: 6px; }
  .ficha-portada .img { aspect-ratio: 16 / 8; border-radius: 20px; }
  .ficha-acciones { display: none; }
  .barra-movil { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 10px 16px calc(10px + var(--pie));
    background: var(--tarjeta); border-top: 1px solid var(--linea); }
  .barra-movil .boton-wa { flex: 1; }
  body.con-barra { padding-bottom: 80px; }
  .platos { grid-template-columns: minmax(0, 1fr); }
}
a.filtro { display: inline-flex; align-items: center; text-decoration: none; }
.barra-movil .boton-wa, .barra-movil .boton-sec { white-space: nowrap; padding: 0 14px; font-size: 15px; }

/* Fase 6: pedido y reserva en la web + ciudades */
.boton-pri { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  font-weight: 700; text-decoration: none; background: var(--marca); color: #fff; flex: 1 1 auto; }
.boton-pri:hover { filter: brightness(1.06); }
.ficha-acciones .boton-pri { flex: 0 1 auto; min-width: 180px; }
.barra-movil .boton-pri { flex: 1; white-space: nowrap; padding: 0 14px; font-size: 15px; }
.boton-icono-wa { flex: none; width: 44px; height: 44px; border-radius: 999px; background: var(--wa); position: relative; }
.boton-icono-wa::before { content: ''; position: absolute; inset: 12px; background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.ciudad { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0 6px 0 14px; min-height: 40px; border-radius: 999px;
  border: 1px solid var(--linea); background: var(--tarjeta); font-weight: 600; }
.ciudad[hidden] { display: none; }
.ciudad select { border: 0; background: transparent; font: inherit; color: inherit; padding: 8px 6px; cursor: pointer; }
.ciudad select:focus { outline: none; }
.ciudad:focus-within { border-color: var(--marca); }

/* =====================================================================
   Estilo A · morado + lima (reemplaza la paleta y las letras de arriba)
   ===================================================================== */
:root {
  --fondo: #f4f1ff; --tarjeta: #ffffff; --tinta: #1b0b3a; --suave: #6b5e8c; --tenue: #a69bc4; --linea: #e2dbf7;
  --marca: #7b2ff7; --marca-suave: #ece2ff; --lima: #c6f432; --profundo: #2a0b5e; --noche: #1b0b3a;
  --ok: #23893f; --ok-suave: #ddf3e2; --wa: #1b0b3a;
  --radio: 22px; --sombra: 0 6px 0 #e2dbf7;
  --titulo: 'Unbounded', 'Arial Black', system-ui, sans-serif; --texto: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --fondo: #12062a; --tarjeta: #1e0e3d; --tinta: #f1ecff; --suave: #b9acdc; --tenue: #7c6ea6; --linea: #33215e;
          --marca-suave: #2c1757; --ok: #6fdc8c; --ok-suave: #173322; --wa: #c6f432; --sombra: 0 6px 0 #0a0318; }
  .boton-icono-wa::before { background: #1b0b3a; }
}
h1, h2, h3 { letter-spacing: -.02em; }
.marca { font: 900 24px var(--titulo); display: inline-flex; align-items: center; gap: 9px; }
.marca b { color: var(--marca); }
.chispa { width: 28px; height: 28px; border-radius: 9px; background: var(--lima); position: relative; flex: none; }
.chispa::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--noche); }
.enlace-sumate { padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--linea); color: var(--tinta); font-size: 14px; }

.heroe-banda { background: var(--profundo); color: #fff; position: relative; overflow: hidden; }
.heroe-banda::after { content: ''; position: absolute; right: -90px; top: -80px; width: 360px; height: 360px; border-radius: 50%; background: var(--marca); opacity: .55; pointer-events: none; }
.heroe { position: relative; z-index: 1; padding: 34px 20px 26px; }
.heroe h1 { font-weight: 900; line-height: .98; letter-spacing: -.03em; max-width: 11ch; }
.heroe h1 em { font-style: normal; color: var(--lima); }
.heroe > p { color: #d8ccf5; }
.ciudad { background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.28); color: #fff; min-height: 46px; border-radius: 16px; }
.ciudad select option { color: #1b0b3a; }
.buscador { border-radius: 16px; box-shadow: none; max-width: none; background: #fff; color: #6b5e8c; }
.buscador input { color: #1b0b3a; }
.buscador:focus-within { border-color: var(--lima); }
.heroe .filtro { background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.25); color: #fff; }
.heroe .filtro[aria-pressed="true"] { background: var(--lima); color: var(--noche); border-color: var(--lima); }

.tarjeta { border: 1.5px solid var(--linea); }
.tapa { background: var(--c, var(--profundo)); }
.sello { background: var(--marca); color: #fff; text-transform: uppercase; letter-spacing: .04em; }
.titulo h3 { font-size: 19px; font-weight: 700; }
.servicios span { background: var(--marca-suave); color: var(--tinta); }
.boton-pri { background: var(--lima); color: var(--noche); border-radius: 14px; font-weight: 700; }
.boton-sec { border: 1.5px solid var(--tinta); border-radius: 14px; background: transparent; }
.boton-wa { background: var(--noche); border-radius: 14px; }
.boton-icono-wa { background: var(--wa); border-radius: 14px; }

.como h2, .sumate h2 { font-weight: 700; }
.como ol { background: var(--noche); color: #fff; border-radius: var(--radio); padding: 24px; gap: 18px; }
.como li { background: none; padding: 0; }
.como li::before { color: var(--lima); font-weight: 900; }
.como li span { color: #cfc3ee; }
.sumate { background: var(--marca); color: #fff; }
.sumate p { opacity: .9; }
.boton-claro { background: var(--lima); color: var(--noche); border-radius: 14px; }

/* Ficha */
.ficha-portada .img { background: var(--c, var(--profundo)); }
.ficha-cab h1 { font-weight: 900; }
.filtro { border: 1.5px solid var(--linea); }
.filtro[aria-pressed="true"] { background: var(--noche); color: #fff; border-color: var(--noche); }
.plato { border: 1.5px solid var(--linea); }
.plato .precio { color: var(--marca); }
.caja { border: 1.5px solid var(--linea); }
.mapa { color: var(--marca); }
@media (max-width: 640px) {
  .heroe-banda::after { width: 180px; height: 180px; right: -80px; top: -80px; }
  #sumate { display: none; }
}
.acciones { flex-wrap: nowrap; }
.acciones > a { flex: 1 1 auto; min-width: 0; padding: 0 12px; white-space: nowrap; }
.acciones > .boton-icono-wa { flex: none; padding: 0; }

/* ---------- Ficha: carta primero, datos al final, agregar al carrito ---------- */
.logo { position: relative; z-index: 1; }
.ficha-cuerpo { grid-template-columns: minmax(0, 1fr); }
.lateral { position: static; order: 0; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: start; margin-top: 18px; padding-top: 22px; border-top: 1.5px solid var(--linea); }
.lateral .tit-info { grid-column: 1 / -1; font-size: 26px; }
.platos { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.plato { position: relative; }
.plato-der { position: relative; flex: none; display: flex; align-items: flex-end; min-width: 40px; align-self: stretch; justify-content: flex-end; }
.plato-der img { background: #fff; object-fit: contain; }
.mas-rapido {
  position: absolute; right: -6px; bottom: -6px; height: 36px; min-width: 36px; padding: 0 8px; border-radius: 18px;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer;
  background: var(--lima); color: var(--noche); box-shadow: 0 3px 10px rgba(27,11,58,.2); border: 2px solid var(--tarjeta);
}
.mas-rapido b { font-size: 14px; }
.carrito-flot {
  position: fixed; right: 20px; bottom: 22px; z-index: 30; width: 58px; height: 58px; border-radius: 18px;
  display: grid; place-items: center; background: var(--noche); color: var(--lima); box-shadow: 0 8px 24px rgba(27,11,58,.35); text-decoration: none;
}
.burbuja-c {
  position: absolute; top: -7px; right: -7px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px;
  background: var(--lima); color: var(--noche); font-size: 13px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--fondo);
}
.aviso-f { position: fixed; left: 50%; transform: translateX(-50%); bottom: 96px; z-index: 40; background: var(--noche); color: #fff;
  padding: 10px 18px; border-radius: 12px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.25); max-width: calc(100% - 32px); }
@media (max-width: 900px) {
  .lateral { order: 0; }
  .carrito-flot { bottom: calc(84px + var(--pie)); right: 16px; }
  .aviso-f { bottom: calc(150px + var(--pie)); }
}

.sumate-acc { display: grid; gap: 8px; justify-items: center; }
.sumate-dudas { color: inherit; opacity: .85; font-weight: 600; font-size: 14px; }