/* Fuente de títulos: Fraunces (SIL Open Font License 1.1, ver fuentes/OFL-Fraunces.txt), servida desde el propio sitio */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fuentes/fraunces-latin.woff2) format("woff2"); }
/* Fuente del banner principal: Bricolage Grotesque (SIL Open Font License 1.1, ver fuentes/OFL-Bricolage.txt), servida desde el propio sitio */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-stretch: 100%; font-display: swap; src: url(fuentes/bricolage-latin.woff2) format("woff2"); }
/* La Piazzeta · estilo de pizzería italiana moderna: crema, espresso y el naranja de la marca, con un toque de mantel de cuadros.
   Sin fuentes externas (carga rápida): títulos en serif del sistema y texto en sans del sistema. Todos los colores son variables. */
:root {
  --crema: #fbf4e8; --papel: #f4e6d0; --espresso: #1f1712; --cafe: #3a2a20; --suave: #6d5c52; --linea: #dcc6a5;
  --marca: #e8590c; --marca-clara: #ff8a3d; --tomate: #c8341b; --albahaca: #2f6b3a;
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --display: "Fraunces", "Rockwell Extra Bold", Rockwell, "Cooper Black", "Arial Black", system-ui, sans-serif;
  --moderna: "Bricolage Grotesque", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radio: 18px; --sombra: 0 10px 30px rgba(60, 30, 10, .10); --sombra-fuerte: 0 24px 60px rgba(40, 18, 6, .28);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 17px/1.55 var(--sans); background: var(--crema); color: var(--espresso); padding-bottom: env(safe-area-inset-bottom); }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2 { font-family: var(--serif); font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
a { color: var(--tomate); }
img, svg { display: block; max-width: 100%; }
.ayuda { color: var(--suave); font-size: 1rem; }
.saltar { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 14px; border-radius: 10px; background: var(--marca); color: #fff; }
.saltar:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--marca-clara); outline-offset: 2px; }
.sobre { font: 700 .78rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--marca); }

/* Barra superior */
:root { --alto-barra: 64px; }
.barra { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; height: var(--alto-barra); padding: 0 max(16px, env(safe-area-inset-right), calc((100vw - 1280px) / 2)) 0 max(16px, env(safe-area-inset-left), calc((100vw - 1280px) / 2)); background: rgba(31, 23, 18, .95); backdrop-filter: blur(10px); color: #fff; border-bottom: 3px solid var(--marca); }
.marca { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.marca-logo { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.marca-nombre { font: 700 1.25rem var(--serif); }
.enlaces { display: flex; gap: 24px; margin-left: auto; }
.enlaces a { color: #f3e6d6; text-decoration: none; font-weight: 600; font-size: .95rem; padding: 6px 0; border-bottom: 2px solid transparent; }
.enlaces a:hover { color: var(--marca-clara); border-bottom-color: var(--marca-clara); }
.carrito-btn, .instalar, .menu-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--marca); color: #fff; font: 700 .95rem var(--sans); cursor: pointer; }
.instalar { background: transparent; border: 1.5px solid #f3e6d6; }
.instalar[hidden] { display: none; }
.menu-btn { display: none; width: 44px; padding: 0; background: rgba(255, 255, 255, .12); font-size: 1.4rem; }
.cuenta { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #fff; color: var(--tomate); font-size: .8rem; }
.cuenta[hidden] { display: none; }
.cuenta.salto { animation: salto .4s; }
@keyframes salto { 40% { transform: scale(1.5); } }
@media (max-width: 760px) { .enlaces, .barra .instalar { display: none; } .menu-btn { display: inline-flex; } .carrito-btn { margin-left: auto; padding: 0 14px; } .carrito-texto { display: none; } }

/* Menú de navegación (cajón lateral del celular) */
dialog.cajon { inset: 0 0 0 auto; margin: 0; width: min(86vw, 340px); height: 100dvh; max-height: none; padding: 0; border-radius: 24px 0 0 24px; background: var(--espresso); color: #fff; }
dialog.cajon[open] { animation: entra .25s ease-out; }
@keyframes entra { from { transform: translateX(40px); opacity: 0; } }
.cajon-cuerpo { display: grid; align-content: start; gap: 6px; min-height: 100dvh; padding: 18px 20px 28px; }
.cajon-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font: 700 1.3rem var(--serif); }
.cajon-cerrar { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.3rem; cursor: pointer; }
.cajon a, .cajon button.cajon-enlace { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border-radius: 14px; border: 0; background: transparent; color: #f3e6d6; font: 600 1.05rem var(--sans); text-decoration: none; text-align: left; cursor: pointer; }
.cajon a:hover, .cajon button.cajon-enlace:hover { background: rgba(255, 255, 255, .1); }
.cajon .cajon-principal { margin-top: 10px; justify-content: center; background: var(--marca); color: #fff; font-weight: 700; }
.cajon .cajon-principal:hover { background: #d24e07; }
.cajon-sep { height: 1px; margin: 8px 0; background: rgba(255, 255, 255, .15); }
.cajon button[hidden] { display: none; }

/* Banner (carrusel bajo: deja ver el menú al entrar) */
main { overflow-x: clip; }
.banner { position: relative; height: clamp(230px, 40vh, 380px); background: var(--espresso); color: #fff; }
.banner-pista { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.banner-pista::-webkit-scrollbar { display: none; }
.slide { position: relative; flex: 0 0 100%; min-width: 0; scroll-snap-align: start; overflow: hidden; isolation: isolate; }
.slide-fondo { position: absolute; inset: -8%; width: 116%; height: 116%; max-width: none; object-fit: cover; filter: blur(26px) brightness(.42) saturate(1.3); z-index: -1; }
.slide-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr); align-items: center; gap: 36px; height: 100%; max-width: 1280px; margin: 0 auto; padding: 0 max(72px, env(safe-area-inset-right)) 0 max(72px, env(safe-area-inset-left)); }
.slide-texto { display: grid; gap: 10px; justify-items: start; max-width: 560px; }
.slide .sobre { color: var(--marca-clara); }
.slide h1, .slide h2 { font: 700 clamp(2rem, 4.6vw, 3.6rem)/1.04 var(--serif); letter-spacing: -.01em; }
.slide h1 em { color: var(--marca-clara); font-weight: 600; }
.slide-desc { color: #e9d9c6; font-size: 1.05rem; max-width: 40ch; }
.slide-precio { font: 700 1.1rem var(--serif); color: #ffd9b8; }
.slide-boton { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 999px; border: 0; background: var(--marca); color: #fff; font: 700 1rem var(--sans); text-decoration: none; cursor: pointer; transition: transform .15s, background .15s; }
.slide-boton:hover { background: #d24e07; transform: translateY(-1px); }
.slide-foto { height: calc(100% - 40px); width: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
.slide-texto > * { animation: sube .6s both; }
.slide-texto > :nth-child(2) { animation-delay: .08s; } .slide-texto > :nth-child(3) { animation-delay: .16s; } .slide-texto > :nth-child(4) { animation-delay: .24s; } .slide-texto > :nth-child(5) { animation-delay: .32s; }
@keyframes sube { from { opacity: 0; transform: translateY(14px); } }
.banner-flecha { position: absolute; top: 50%; z-index: 3; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .4); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; backdrop-filter: blur(4px); }
.banner-flecha:hover { background: var(--marca); }
.banner-flecha.anterior { left: max(10px, calc((100vw - 1280px) / 2 + 8px)); } .banner-flecha.siguiente { right: max(10px, calc((100vw - 1280px) / 2 + 8px)); }
.banner-puntos { position: absolute; left: 0; right: 0; bottom: 6px; z-index: 3; display: flex; justify-content: center; gap: 2px; }
.punto { width: 28px; height: 22px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.punto::before { content: ""; width: 9px; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, .5); transition: width .25s, background .25s; }
.punto[aria-current="true"]::before { width: 24px; background: var(--marca-clara); }
@media (max-width: 640px) {
  .banner { height: clamp(210px, 58vw, 260px); }
  .banner-flecha { display: none; }
  .slide-in { gap: 14px; padding: 0 16px; }
  .slide h1, .slide h2 { font-size: clamp(1.45rem, 7vw, 1.9rem); }
  .slide-desc { display: none; }
  .slide-foto { height: calc(100% - 44px); border-radius: 14px; }
  .slide-boton { min-height: 42px; padding: 0 18px; font-size: .92rem; }
}

/* Franja de datos */
.info { background: var(--cafe); color: #f3e6d6; position: relative; }
.info::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 8px; background-color: #fff; background-image: linear-gradient(90deg, rgba(200, 52, 27, .55) 50%, transparent 50%), linear-gradient(rgba(200, 52, 27, .55) 50%, transparent 50%); background-size: 16px 16px; }
.info-in { display: flex; align-items: center; gap: 8px 24px; max-width: 1280px; margin: 0 auto; padding: 12px 20px 16px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.info-in::-webkit-scrollbar { display: none; }
.info-dato { font-size: .92rem; }
.info-boton { margin-left: auto; flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; background: var(--marca); color: #fff; font: 700 .92rem var(--sans); text-decoration: none; }
.info-boton:hover { background: #d24e07; }
.estado { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); font-weight: 700; font-size: .85rem; }
.estado::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #bbb; }
.estado.abierto::before { background: #5bd18a; box-shadow: 0 0 0 4px rgba(91, 209, 138, .25); }
.estado.cerrado::before { background: #ff8a7a; }
.acciones-portada { display: flex; flex-wrap: wrap; gap: 12px; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Botones: todos del mismo tamaño y color; lo deshabilitado queda pálido */
.boton, .acciones > button, .mapa-boton, .barra-pedido { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border-radius: 999px; border: 0; background: var(--marca); color: #fff; font: 700 1rem/1.2 var(--sans); text-align: center; text-decoration: none; cursor: pointer; transition: transform .15s, background .15s; }
.boton:hover, .acciones > button:hover, .mapa-boton:hover { background: #d24e07; transform: translateY(-1px); }
button:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

/* Secciones */
.seccion { display: grid; gap: 14px; max-width: 1280px; margin: 0 auto; padding: 56px 20px 12px; }
.seccion h2 { font-size: clamp(1.9rem, 5vw, 2.8rem); }
.etiqueta { position: absolute; top: 14px; left: 14px; z-index: 1; padding: 4px 10px; border-radius: 999px; background: var(--espresso); color: #fff; font: 700 .7rem var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.menu-seccion { padding-top: 0; }
.categorias { display: flex; align-items: center; gap: 12px; position: sticky; top: calc(var(--alto-barra) - 1px); z-index: 12; margin: 0 -20px; padding: 12px 20px; background: var(--crema); box-shadow: 0 8px 12px -10px rgba(60, 30, 10, .35); }
.categorias-chips { display: flex; gap: 10px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.categorias-chips::-webkit-scrollbar { display: none; }
.buscador { flex: none; display: block; width: min(240px, 38%); }
.buscador input { height: 42px; padding: 0 14px; border-radius: 999px; }
.sin-resultados { padding: 28px 8px; color: var(--suave); text-align: center; }
.chip[aria-current="true"] { border-color: var(--marca); background: var(--marca); color: #fff; }
.chip { flex: none; padding: 9px 20px; border-radius: 999px; border: 1.5px solid var(--linea); background: var(--papel); color: var(--espresso); text-decoration: none; font-weight: 700; }
.chip:hover { border-color: var(--marca); background: var(--marca); color: #fff; }
.grupo { display: grid; gap: 18px; padding: 28px 0 22px; scroll-margin-top: calc(var(--alto-barra) + 64px); }
.grupo-cab { display: grid; gap: 6px; }
.grupo-titulo { font: 700 clamp(1.9rem, 4.6vw, 2.6rem)/1.1 var(--serif); letter-spacing: -.01em; display: flex; align-items: center; gap: 14px; }
.grupo-titulo::after { content: ""; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--linea) 0 8px, transparent 8px 14px); }
/* Todas las tarjetas del menú (pizzas, panzerotti y bebidas) son iguales: 4 por fila, la tarjeta mide lo que mide su foto */
.tarjetas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.tarjeta { position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 20px; background: var(--papel); border: 1px solid var(--linea); box-shadow: var(--sombra); transition: transform .35s, box-shadow .2s, opacity .5s; }
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-fuerte); }
.tarjeta.oculta { opacity: 0; transform: translateY(18px); }
.tarjeta-foto { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0; background: #2a1d15; overflow: hidden; }
button.tarjeta-foto { cursor: pointer; }
.tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.tarjeta:hover .tarjeta-foto img { transform: scale(1.05); }
.tarjeta-foto.sin-foto { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #fff3df, #f7e0c2); }
.tarjeta-foto.sin-foto svg { width: 72%; }
.pendiente { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tomate); color: #fff; font: 800 2.2rem/1 var(--sans); padding-top: 11px; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.pendiente.en-nota { position: static; display: inline-grid; width: 24px; height: 24px; font-size: 1.6rem; padding-top: 8px; vertical-align: middle; box-shadow: none; }
.nota-foto { color: var(--suave); font-size: .85rem; }
.tarjeta-cuerpo { display: grid; grid-template-rows: auto 1fr auto; gap: 4px; padding: 14px 16px 16px; }
.tarjeta h3 { font: 700 1.25rem/1.2 var(--serif); }
.tarjeta .ayuda { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .88rem; line-height: 1.35; }
.tarjeta .ayuda:not(:empty) { min-height: calc(3 * 1.35 * .88rem); }
.tarjeta .ayuda:empty { display: none; }
.tarjeta-pie { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 10px; }
.tarjeta .control { flex: none; }
.precio { font-weight: 800; color: var(--tomate); }
.tarjeta .precio { display: grid; font: 800 1.35rem/1.1 var(--serif); }
.tarjeta .precio small { font: 700 .68rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }
@media (max-width: 960px) { .tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tarjeta h3 { font-size: 1.05rem; }
  .tarjeta .ayuda { font-size: .8rem; -webkit-line-clamp: 2; }
  .tarjeta .ayuda:not(:empty) { min-height: calc(2 * 1.35 * .8rem); }
  .tarjeta-cuerpo { padding: 10px 10px 12px; }
  .tarjeta-pie { flex-direction: column; align-items: stretch; gap: 8px; }
  .tarjeta .precio { font-size: 1.2rem; }
  .tarjeta .agregar, .tarjeta .control { width: 100%; }
  .tarjeta .cantidad.mini { display: flex; justify-content: space-between; }
}
.agregar { min-height: 40px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--marca); color: #fff; font: 700 .92rem var(--sans); cursor: pointer; }
.agregar:hover { background: #d24e07; }

/* Cómo pedir y valores: tarjetas que muestran su detalle al pasar el mouse, enfocar o tocar */
.pasos, .valores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 10px; }
.tab-int { display: grid; align-content: start; gap: 6px; width: 100%; height: 100%; padding: 22px; border-radius: var(--radio); border: 2px solid transparent; font: inherit; text-align: left; cursor: pointer; transition: transform .2s, box-shadow .2s, border-color .2s, background .2s; }
.tab-int:hover, .tab-int[aria-expanded="true"] { transform: translateY(-4px); box-shadow: var(--sombra-fuerte); }
.pasos .tab-int { background: var(--espresso); color: #fff; }
.pasos .tab-int[aria-expanded="true"] { border-color: var(--marca-clara); background: #2b1f18; }
.pasos .numero { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--marca); font: 800 1.2rem var(--serif); }
.pasos h3 { font: 700 1.4rem var(--serif); }
.pasos p { color: #e3d3bf; font-size: 1.02rem; }
.valores .tab-int { grid-template-columns: 48px 1fr; gap: 4px 14px; align-items: center; background: var(--papel); border-color: var(--linea); color: var(--espresso); }
.valores .tab-int[aria-expanded="true"] { border-color: var(--marca); background: #fff1e4; }
.valores .icono { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: #ffe6cf; color: var(--tomate); font-size: 1.4rem; }
.valores h3 { font: 700 1.25rem var(--serif); align-self: end; }
.valores p { color: var(--suave); font-size: 1rem; }
@media (max-width: 800px) { .pasos, .valores { grid-template-columns: 1fr; } }

.detalle { margin-top: 14px; padding: 22px; min-height: 200px; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--papel); box-shadow: var(--sombra); }
.detalle.abre .detalle-cuerpo { animation: sube .35s both; }
.detalle-cuerpo { display: grid; gap: 14px; }
.detalle-titulo { font: 700 1.4rem/1.2 var(--serif); }
.boton.claro { justify-self: start; background: transparent; color: var(--marca); border: 2px solid var(--marca); }
.boton.claro:hover { background: var(--marca); color: #fff; }
.mini-tarjetas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mini-tarjeta { display: grid; gap: 2px; padding: 0 0 12px; overflow: hidden; border-radius: 14px; border: 1px solid var(--linea); background: #fff; text-align: center; font: inherit; color: var(--espresso); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.mini-tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.mini-tarjeta img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 8px; }
.mini-tarjeta strong { font: 700 1.1rem var(--serif); }
.mini-tarjeta span { color: var(--tomate); font-weight: 800; }
.mini-tarjeta em { justify-self: center; margin-top: 4px; padding: 4px 16px; border-radius: 999px; background: var(--marca); color: #fff; font-style: normal; font-weight: 700; font-size: .95rem; }
.seguir-mini { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.opcion-grande { display: grid; gap: 2px; justify-items: start; padding: 16px 18px; border-radius: 14px; border: 2px solid var(--linea); background: #fff; font: inherit; color: var(--espresso); text-align: left; cursor: pointer; transition: border-color .2s, transform .2s; }
.opcion-grande:hover { border-color: var(--marca); transform: translateY(-3px); }
.opcion-grande span { font-size: 1.8rem; }
.opcion-grande strong { font: 700 1.2rem var(--serif); }
.opcion-grande small { color: var(--suave); font-size: .95rem; }
.etiquetas-pago { display: flex; flex-wrap: wrap; gap: 8px; }
.etiquetas-pago li { padding: 8px 16px; border-radius: 999px; background: #e8f4ea; color: var(--albahaca); font-weight: 700; }
.etiquetas-pago li.pronto { background: transparent; border: 1.5px dashed var(--suave); color: var(--suave); }
.tamanos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tamano { display: grid; justify-items: center; align-content: end; gap: 2px; padding: 16px 12px; border-radius: 14px; border: 2px solid var(--linea); background: #fff; font: inherit; color: var(--espresso); cursor: pointer; transition: border-color .2s, transform .2s; }
.tamano:hover { border-color: var(--marca); transform: translateY(-4px); }
.tamano .cuadro { display: block; margin-bottom: 8px; border-radius: 8px; background: repeating-linear-gradient(45deg, #e9ad5f 0 6px, #f0bd6f 6px 12px); border: 3px solid #b9814a; }
.tamano .c0 { width: 34px; height: 34px; } .tamano .c1 { width: 56px; height: 56px; } .tamano .c2 { width: 84px; height: 84px; }
.tamano strong { font: 700 1.5rem var(--serif); }
.tamano em { color: var(--tomate); font-style: normal; font-weight: 800; }
.recorrido { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.recorrido figure { margin: 0; display: grid; gap: 4px; }
.recorrido img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
.recorrido figcaption { color: var(--suave); font-size: .95rem; text-align: center; }
.recorrido .sin-foto { position: relative; align-content: center; min-height: 150px; border-radius: 14px; background: radial-gradient(circle at 50% 40%, #fff3df, #f7e0c2); }
.recorrido .ayuda { grid-column: 1 / -1; }
@media (max-width: 800px) {
  .mini-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seguir-mini, .duo { grid-template-columns: 1fr; }
  .recorrido { grid-template-columns: 1fr; }
}

/* Dónde estamos: el texto ocupa el mismo alto que el mapa, de arriba a abajo */
.donde { display: grid; grid-template-columns: 1fr 1.3fr; gap: 28px; align-items: stretch; margin-top: 8px; }
.donde-texto { display: grid; align-content: space-between; gap: 20px; padding: 4px 0; }
.donde-datos { display: grid; gap: 10px; }
.donde-lugar { font: 700 1.7rem/1.2 var(--serif); }
.donde-direccion { font: 800 1.2rem/1.3 var(--display); color: var(--tomate); }
.mapa { position: relative; min-height: 400px; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--linea); background: repeating-linear-gradient(45deg, #f2e4cf 0 14px, #f7ecda 14px 28px); display: grid; place-items: center; box-shadow: var(--sombra); }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 800px) { .donde { grid-template-columns: 1fr; } .mapa { min-height: 300px; } }

/* Acerca de nosotros */
.nosotros { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center; }
.nosotros-texto { display: grid; gap: 14px; }
.nosotros-lead { font-size: 1.2rem; line-height: 1.6; color: var(--cafe); max-width: 60ch; }
.cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
.cifras li { display: grid; gap: 2px; padding: 14px 12px; border-radius: 14px; background: var(--espresso); color: #fff; text-align: center; }
.cifras strong { font: 800 2.1rem/1 var(--display); color: var(--marca-clara); }
.cifras span { font-size: .95rem; color: #e3d3bf; }
.nosotros-foto { margin: 0; position: relative; }
.nosotros-foto img { width: 100%; max-height: 420px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px; box-shadow: var(--sombra-fuerte); }
.nosotros-foto figcaption { margin-top: 8px; color: var(--suave); font-size: .95rem; text-align: center; }
@media (max-width: 800px) { .nosotros { grid-template-columns: 1fr; } .nosotros-foto img { max-height: 300px; aspect-ratio: 16 / 10; } .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Reseñas: nota general con barras por criterio y carrusel de comentarios */
.resenas { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: stretch; }
.resenas-resumen { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 26px 22px; border-radius: var(--radio); background: linear-gradient(160deg, #2b1f18, var(--espresso)); color: #fff; text-align: center; box-shadow: var(--sombra); }
.resenas-resumen .ayuda { color: #e3d3bf; }
.resena-nota { font: 800 4.4rem/1 var(--display); color: var(--marca-clara); }
.estrellas { color: #f5a623; font-size: 1.3rem; letter-spacing: .1em; white-space: nowrap; }
.criterios { display: grid; gap: 10px; width: 100%; margin-top: 10px; text-align: left; }
.criterios li { display: grid; grid-template-columns: 96px 1fr 34px; align-items: center; gap: 10px; font-size: 1rem; }
.criterios strong { text-align: right; color: var(--marca-clara); }
.barra-crit { display: block; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.barra-crit i { display: block; width: 0; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--marca-clara), #f5a623); transition: width 1.1s cubic-bezier(.2, .8, .2, 1); }
.resenas-carrusel { position: relative; min-width: 0; display: grid; grid-template-rows: 1fr auto; gap: 10px; }
.resenas-pista { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 2px 10px; }
.resenas-pista::-webkit-scrollbar { display: none; }
.resena { flex: 0 0 min(360px, 86%); scroll-snap-align: start; display: grid; align-content: start; gap: 12px; padding: 22px; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--papel); box-shadow: var(--sombra); transition: transform .25s, box-shadow .25s; }
.resena:hover { transform: translateY(-4px); box-shadow: var(--sombra-fuerte); }
.resena-cab { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; }
.resena-cab > div { display: grid; }
.resena-cab .estrellas { grid-column: 1 / -1; }
.avatar { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--marca), var(--tomate)); color: #fff; font: 800 1.3rem var(--serif); }
.resena-texto { font-family: var(--serif); font-size: 1.2rem; line-height: 1.45; }
.resena-crit { display: flex; flex-wrap: wrap; gap: 6px; }
.resena-crit li { padding: 4px 12px; border-radius: 999px; background: #fff1e4; color: var(--cafe); font-size: .92rem; }
.resena-crit b { margin-left: 6px; color: #d98400; }
.resenas-vacio { flex: 1 1 100%; display: grid; justify-items: center; align-content: center; gap: 8px; padding: 32px 24px; border-radius: var(--radio); border: 2px dashed var(--linea); background: var(--papel); text-align: center; color: var(--suave); }
.resenas-vacio span { font-size: 2.6rem; animation: salto 2.4s infinite; }
.resenas-vacio strong { font: 700 1.5rem var(--serif); color: var(--espresso); }
.resenas-mando { display: flex; gap: 8px; justify-content: flex-end; }
.resenas-mando button { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--marca); background: transparent; color: var(--marca); font-size: 1.6rem; line-height: 1; cursor: pointer; transition: background .2s, color .2s; }
.resenas-mando button:hover { background: var(--marca); color: #fff; }
.aviso-demo { padding: 10px 16px; border-radius: 12px; background: #fff3cd; border: 1px solid #f0d27a; color: #6b4e00; font-weight: 600; }
@media (max-width: 800px) { .resenas { grid-template-columns: 1fr; } }
.criterio-fila { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 8px; font: 700 1.05rem var(--serif); }
.estrellas-elegir { display: flex; gap: 2px; }
.estrellas-elegir button { width: 44px; height: 44px; border: 0; background: transparent; color: #d9c9b3; font-size: 2rem; line-height: 1; cursor: pointer; transition: transform .15s, color .15s; }
.estrellas-elegir button:hover { transform: scale(1.2); }
.estrellas-elegir button.activa { color: #f5a623; }
.criterios-elegir, .campos-resena { display: grid; gap: 14px; }
@media (max-width: 480px) { .criterio-fila { grid-template-columns: 1fr; } }

/* Soporte y contacto: el formulario y la ayuda miden lo mismo */
.contacto { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: stretch; }
.contacto-form { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--papel); box-shadow: var(--sombra); }
.contacto-form h3 { font: 700 1.6rem var(--serif); }
.campo-mensaje { flex: 1; display: flex; flex-direction: column; }
.campo-mensaje textarea { flex: 1; min-height: 120px; }
.contador { align-self: flex-end; color: var(--suave); font-size: .85rem; }
.contacto-form.destello { animation: destello 1.2s; }
@keyframes destello { 0%, 100% { box-shadow: var(--sombra); } 30% { box-shadow: 0 0 0 6px rgba(232, 89, 12, .35), var(--sombra); } }
.soporte { display: grid; gap: 16px; grid-template-rows: auto 1fr; }
.soporte-ws { display: flex; align-items: center; gap: 16px; padding: 22px; border-radius: var(--radio); background: linear-gradient(135deg, #128c4a, #1fb35f); color: #fff; text-decoration: none; box-shadow: var(--sombra); transition: transform .2s, box-shadow .2s; }
.soporte-ws:hover { transform: translateY(-4px); box-shadow: var(--sombra-fuerte); }
.soporte-ws-icono { display: grid; place-items: center; flex: none; width: 60px; height: 60px; border-radius: 50%; background: rgba(255, 255, 255, .2); font-size: 1.9rem; animation: salto 3s infinite; }
.soporte-ws strong { display: block; font: 700 1.4rem/1.2 var(--serif); }
.soporte-ws small { display: block; margin-top: 4px; font-size: .98rem; opacity: .92; }
.empresas { display: grid; gap: 10px; padding: 24px; border-radius: var(--radio); background: radial-gradient(circle at 100% 0, #7a2a0a, var(--espresso) 60%); color: #f3e6d6; box-shadow: var(--sombra); }
.empresas h3 { font: 700 1.6rem/1.15 var(--serif); color: #fff; }
.empresas .sobre { color: var(--marca-clara); }
.empresas-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.empresa-op { display: grid; justify-items: center; gap: 4px; padding: 16px 10px; border-radius: 14px; background: rgba(255, 255, 255, .1); border: 1.5px solid rgba(255, 255, 255, .3); color: #fff; font-weight: 700; text-align: center; text-decoration: none; transition: background .2s, transform .2s, border-color .2s; }
.empresa-op span { font-size: 1.8rem; }
.empresa-op:hover { background: var(--marca); border-color: var(--marca); transform: translateY(-3px); }
.faq { display: grid; gap: 8px; margin-top: 8px; padding: 22px 26px; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--papel); }
.faq h3 { font: 700 1.3rem var(--serif); margin-bottom: 4px; }
.faq-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; align-items: start; }
.faq-item { border-bottom: 1px solid var(--linea); }
@media (max-width: 800px) { .faq-lista { grid-template-columns: 1fr; } }
.faq-preg { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 12px 0; border: 0; background: none; color: var(--espresso); font: 700 1.02rem var(--sans); text-align: left; cursor: pointer; }
.faq-preg::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff1e4; color: var(--marca); font-size: 1.3rem; transition: transform .25s; }
.faq-preg[aria-expanded="true"]::after { transform: rotate(45deg); background: var(--marca); color: #fff; }
.faq-resp { padding: 0 0 14px; color: var(--cafe); animation: sube .3s both; }
@media (max-width: 800px) { .contacto { grid-template-columns: 1fr; } }
textarea, select { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--linea); background: #fff; color: var(--espresso); font: inherit; }
select { height: 46px; padding: 0 12px; }
textarea { resize: vertical; min-height: 96px; }
textarea:focus-visible, select:focus-visible { border-color: var(--marca); }

/* Banner final: redes con su color y movimiento */
.sigue { margin-top: 64px; background: linear-gradient(120deg, #e8590c, #c8341b, #7a2a0a, #e8590c); background-size: 300% 300%; animation: corre 14s ease infinite; color: #fff; text-align: center; }
@keyframes corre { 50% { background-position: 100% 50%; } }
.sigue-in { display: grid; justify-items: center; gap: 12px; max-width: 900px; margin: 0 auto; padding: 56px 20px; }
.sigue .sobre { color: #ffe1c4; }
.sigue h2 { font-size: clamp(2rem, 5vw, 3rem); }
.sigue p { font-size: 1.15rem; }
.redes { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 10px; }
.red { display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 26px; border-radius: 999px; border: 0; color: #fff; font: 700 1.1rem var(--sans); text-decoration: none; cursor: pointer; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .25s; }
.red:hover, .red:focus-visible { transform: translateY(-6px) scale(1.07) rotate(-1.5deg); box-shadow: 0 16px 30px rgba(0, 0, 0, .4); }
.red svg { width: 28px; height: 28px; flex: none; }
.red small { padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .25); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.red-instagram { background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7); }
.red-facebook { background: #1877f2; }
.red-tiktok { background: #111; box-shadow: -4px -4px 0 #25f4ee, 4px 4px 0 #fe2c55, 0 8px 20px rgba(0, 0, 0, .3); }

.pie { padding: 44px 20px 110px; background: var(--espresso); color: #e9d9c6; position: relative; }
.pie::before { content: none; }
.pie-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr; gap: 28px; max-width: 1280px; margin: 0 auto; }
.pie-grid > div, .pie-grid > nav { display: grid; align-content: start; gap: 10px; }
.pie-marca { font: 700 1.8rem var(--serif); color: #fff; }
.pie-dato { font-weight: 700; color: #fff; }
.pie-titulo { font: 700 .85rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--marca-clara); }
.pie a { color: #e9d9c6; text-decoration: none; }
.pie nav a:hover { color: var(--marca-clara); text-decoration: underline; }
.pie-fin { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; max-width: 1280px; margin: 28px auto 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .15); font-size: .95rem; color: #c9b8a4; }
.arriba { min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .4); background: transparent; color: #fff; font: 700 .95rem var(--sans); cursor: pointer; transition: background .2s; }
.arriba:hover { background: var(--marca); border-color: var(--marca); }
@media (max-width: 800px) { .pie-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .pie-grid { grid-template-columns: 1fr; } }

/* Aparición suave de las secciones */
.revela { opacity: 0; transform: translateY(26px); transition: opacity .7s, transform .7s; }
.revela.visible { opacity: 1; transform: none; }

/* Barra de pedido (siempre a la mano) */
.barra-pedido { position: fixed; left: 16px; right: 16px; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 40; justify-content: space-between; min-height: 56px; box-shadow: var(--sombra-fuerte); }
.barra-pedido[hidden] { display: none; }
@media (min-width: 900px) { .barra-pedido { left: auto; right: 24px; min-width: 320px; } }

/* Ventanas */
dialog { width: min(94vw, 540px); max-height: 92vh; overflow-x: hidden; padding: 20px; border: 0; border-radius: 22px; background: var(--papel); color: var(--espresso); box-shadow: var(--sombra-fuerte); }
dialog::backdrop { background: rgba(20, 10, 4, .6); backdrop-filter: blur(2px); }
dialog form, .dlg-cuerpo { display: grid; gap: 14px; }
dialog h2 { font-size: 1.7rem; }
.dlg-arte { width: 120px; height: 120px; margin: -4px auto 0; }
.dlg-arte img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
.dlg-arte:empty { display: none; }
fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
legend { padding: 0; margin-bottom: 6px; font: 700 1.05rem var(--serif); }
label { display: grid; gap: 4px; font-size: .92rem; color: var(--suave); }
input:not([type="radio"]):not([type="checkbox"]) { width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--linea); background: #fff; color: var(--espresso); font: inherit; }
input:focus-visible { border-color: var(--marca); }
.registro { display: grid; gap: 8px; }
.acepto { display: flex; align-items: flex-start; gap: 10px; color: var(--espresso); font-size: .9rem; cursor: pointer; }
.acepto input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--marca); }
.enlace { padding: 0; border: 0; background: none; color: var(--tomate); font: inherit; text-decoration: underline; cursor: pointer; }
[hidden] { display: none !important; }
.par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .par { grid-template-columns: 1fr; } }
.opciones { display: grid; gap: 8px; }
.opcion { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--linea); border-radius: 12px; background: #fff; color: var(--espresso); cursor: pointer; }
.opcion:has(input:checked) { border-color: var(--marca); background: #fff1e4; }
.opcion span { flex: 1; }
.opcion small { display: block; margin-top: 2px; color: var(--suave); font-size: .8rem; line-height: 1.25; }
.opcion:has(small) { padding-block: 8px; }
.opcion input { width: 20px; height: 20px; flex: none; accent-color: var(--marca); }
.cantidad { display: inline-flex; align-items: center; gap: 14px; justify-self: start; }
.cantidad button { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--linea); background: #fff; color: var(--espresso); font-size: 1.4rem; cursor: pointer; }
.cantidad.mini { gap: 8px; }
.cantidad.mini button { width: 38px; height: 38px; font-size: 1.2rem; }
.cantidad.mini button:disabled { opacity: .35; }
.cantidad.mini output { min-width: 22px; font-size: 1.05rem; }
.opcion.bebida { cursor: default; padding-block: 6px; }
.opcion.bebida strong { margin-right: 6px; white-space: nowrap; }
.cantidad output { min-width: 30px; text-align: center; font: 800 1.2rem var(--serif); }
.acciones { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; position: sticky; bottom: -20px; padding: 12px 0 2px; background: var(--papel); }
@media (max-width: 480px) { .acciones { grid-auto-flow: row; } }
.linea { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.linea-texto { display: grid; gap: 2px; }
.linea-total { min-width: 84px; text-align: right; }
.total { font: 700 1.2rem var(--serif); }
.mensaje { color: #1f7a3d; font-weight: 600; }
.mensaje:empty { display: none; }
.mensaje.error { color: var(--tomate); }
.aviso { position: fixed; left: 50%; bottom: 88px; transform: translate(-50%, 20px); max-width: 92vw; padding: 12px 20px; border-radius: 999px; background: var(--espresso); color: #fff; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 60; }
.aviso.visible { opacity: 1; transform: translate(-50%, 0); }
.documento { max-width: 720px; margin: 0 auto; padding: 32px 20px 56px; border-top: 0; }
.documento h2 { font-size: 1.3rem; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* Sigue tu pedido, foto ampliada y enlace de la barra */
.enlace-barra { padding: 6px 0; border: 0; border-bottom: 2px solid transparent; background: none; color: #f3e6d6; font: 600 .95rem var(--sans); cursor: pointer; }
.enlace-barra:hover { color: var(--marca-clara); border-bottom-color: var(--marca-clara); }
.seguir-texto { font: 800 1.45rem/1.25 var(--serif); }
.seguir-pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 10px 0 6px; }
.seguir-pasos li { position: relative; display: grid; justify-items: center; gap: 6px; padding-top: 0; text-align: center; color: var(--suave); font-weight: 700; }
.seguir-pasos li::before { content: ""; position: absolute; top: 28px; left: -50%; width: 100%; height: 6px; border-radius: 999px; background: var(--linea); z-index: 0; }
.seguir-pasos li:first-child::before { content: none; }
.seguir-pasos li.hecho::before, .seguir-pasos li.actual::before { background: linear-gradient(90deg, var(--albahaca), var(--marca)); background-size: 200% 100%; }
.seguir-pasos li.actual::before { animation: avanza 1.6s ease-in-out infinite; }
@keyframes avanza { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.icono-paso { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--linea); background: #fff; font-size: 1.7rem; filter: grayscale(1); opacity: .55; transition: filter .4s, opacity .4s, border-color .4s; }
.texto-paso { font-size: .95rem; }
.seguir-pasos li.hecho .icono-paso { filter: none; opacity: 1; border-color: var(--albahaca); background: #e8f4ea; }
.seguir-pasos li.actual .icono-paso { filter: none; opacity: 1; border-color: var(--marca); background: #fff1e4; animation: late 1.4s ease-in-out infinite; }
.seguir-pasos li.hecho, .seguir-pasos li.actual { color: var(--espresso); }
@keyframes late { 0%, 100% { box-shadow: 0 0 0 0 rgba(232, 89, 12, .5); } 50% { box-shadow: 0 0 0 12px rgba(232, 89, 12, 0); } }
.seguir-pasos li.actual.paso-preparando .icono-paso span, .seguir-pasos li.actual.paso-preparando .icono-paso { animation: late 1.4s ease-in-out infinite, mezcla 1.2s ease-in-out infinite; }
@keyframes mezcla { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
.seguir-pasos li.actual.paso-listo .icono-paso { animation: late 1.4s ease-in-out infinite, rueda 1.6s ease-in-out infinite; }
@keyframes rueda { 0%, 100% { transform: translateX(-6px); } 50% { transform: translateX(6px); } }
.seguir-pasos li.actual.paso-nuevo .icono-paso { animation: late 1.4s ease-in-out infinite, salto 1.8s ease-in-out infinite; }
.seguir-pasos li.actual.paso-entregado .icono-paso, .seguir-pasos li.hecho.paso-entregado .icono-paso { animation: aparece .6s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes aparece { from { transform: scale(.4); } }
.seguir-sub { font: 700 1.1rem var(--serif); margin-top: 6px; }
.seguir-lineas { display: grid; gap: 6px; font-size: 1.15rem; color: var(--espresso); padding: 12px 16px; border-radius: 14px; background: #fff1e4; border: 1px solid var(--linea); }
.seguir-lineas strong { color: var(--tomate); }
dialog.foto-grande { width: min(94vw, 460px); }
.foto-grande img { width: 100%; max-height: 52vh; object-fit: cover; border-radius: 16px; }
.foto-grande .precio { font: 800 1.4rem var(--serif); }
@media (max-width: 560px) { .categorias { flex-wrap: wrap; gap: 8px; } .categorias-chips { flex-basis: 100%; } .buscador { width: 100%; } }

/* Letra más grande y datos principales con letra de título (2026-10-25) */
.sobre { font-size: .88rem; }
.info-in { gap: 10px 28px; padding: 16px 20px 20px; }
.info-dato { font: 800 1.2rem/1.2 var(--display); color: #fff; letter-spacing: .01em; }
.info-dato span[aria-hidden] { margin-right: 4px; }
.estado { padding: 8px 18px; font: 800 1.05rem var(--display); }
.info-boton { min-height: 48px; padding: 0 24px; font: 800 1.05rem var(--display); }
.chip { font-size: 1.05rem; }
.nota-foto { font-size: .95rem; }
.tarjeta .ayuda { font-size: .95rem; }
.tarjeta .precio { font-family: var(--display); }
.tarjeta h3 { font-size: 1.3rem; }
.agregar { min-height: 44px; font-size: 1rem; }
.pie-fin, .pie nav a { font-size: 1rem; }
/* Menús de la barra y pestañas del menú: mismo tamaño, centrados y alineados */
.enlaces { margin: 0 auto; gap: 0; }
.enlaces a, .enlace-barra { min-width: 118px; padding: 8px 6px; text-align: center; font-size: 1.05rem; }
.categorias-chips { gap: 10px; }
.categorias-chips .chip { flex: 1 1 0; max-width: 190px; text-align: center; padding-inline: 8px; }
@media (max-width: 1100px) { .enlaces a, .enlace-barra { min-width: 0; padding-inline: 10px; font-size: 1rem; } }
.info-in { flex-wrap: wrap; justify-content: center; overflow: visible; white-space: normal; row-gap: 12px; }
.info-dato { font-size: 1.1rem; }
.info-boton { margin-left: 0; }
@media (min-width: 1400px) { .info-boton { margin-left: auto; } }

/* Banner: sin precio, foto enmarcada para que no se confunda con el fondo, letra más grande (2026-10-25) */
.slide-fondo { filter: blur(30px) brightness(.28) saturate(1.2); }
.slide-foto { border: 6px solid #fff3e0; box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 26px 50px rgba(0, 0, 0, .7); border-radius: 22px; }
.slide .sobre { font-size: .95rem; }
.slide-desc { font-size: 1.2rem; }
.slide-boton { min-height: 54px; padding: 0 30px; font-size: 1.1rem; }
/* Menú principal más grande; con menos de 1180 px pasa al botón ☰ */
html { font-size: 112.5%; }
body { font-size: 1rem; }
.enlaces a, .enlace-barra { min-width: 0; padding: 8px 16px; font-size: 1.1rem; }
.marca-nombre { font-size: 1.4rem; }
.carrito-btn, .instalar, .menu-btn { font-size: 1.05rem; }
@media (max-width: 1180px) { .enlaces, .barra .instalar { display: none; } .menu-btn { display: inline-flex; } .carrito-btn { margin-left: auto; } }
dialog.cajon a, .cajon button.cajon-enlace { font-size: 1.15rem; }

/* Barra superior: todo en una sola línea y centrado al ancho de la página */
.barra { white-space: nowrap; }
.marca { flex: none; }
.marca-nombre { white-space: nowrap; }
.enlaces { flex: 1; justify-content: center; margin: 0; }
.enlaces a, .enlace-barra { white-space: nowrap; padding: 8px 12px; font-size: 1.05rem; }
.carrito-btn, .instalar { white-space: nowrap; flex: none; }
@media (max-width: 1240px) { .enlaces, .barra .instalar { display: none; } .menu-btn { display: inline-flex; } .carrito-btn { margin-left: auto; } }
/* Franja de datos: una sola línea y centrada (en pantallas angostas baja a varias) */
.info-in { flex-wrap: nowrap; justify-content: center; gap: 12px 32px; max-width: 1280px; }
.info-dato { font-size: 1.05rem; white-space: nowrap; }
.estado { white-space: nowrap; font-size: 1.05rem; }
@media (max-width: 1000px) { .info-in { flex-wrap: wrap; } }
/* WhatsApp: ícono verde fijo, esquina inferior derecha */
.wa-flotante { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 45; display: flex; align-items: center; gap: 0; height: 64px; min-width: 64px; padding: 0; border-radius: 999px; background: #25d366; color: #fff; text-decoration: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); transition: transform .2s, padding .25s, gap .25s; animation: onda 2.6s infinite; }
.wa-flotante svg { width: 36px; height: 36px; margin: 14px; flex: none; }
.wa-etiqueta { max-width: 0; overflow: hidden; white-space: nowrap; font: 700 1.05rem var(--sans); transition: max-width .3s; }
.wa-flotante:hover, .wa-flotante:focus-visible { transform: scale(1.06); }
.wa-flotante:hover .wa-etiqueta, .wa-flotante:focus-visible .wa-etiqueta { max-width: 140px; margin-right: 18px; }
@keyframes onda { 0% { box-shadow: 0 8px 24px rgba(0, 0, 0, .35), 0 0 0 0 rgba(37, 211, 102, .6); } 70%, 100% { box-shadow: 0 8px 24px rgba(0, 0, 0, .35), 0 0 0 18px rgba(37, 211, 102, 0); } }
body.con-barra-pedido .wa-flotante { bottom: 92px; }
@media (min-width: 900px) { body.con-barra-pedido .wa-flotante { bottom: 96px; } }
@media (prefers-reduced-motion: reduce) { .wa-flotante { animation: none; } }
.aviso { width: max-content; max-width: 86vw; border-radius: 20px; text-align: center; font-size: 1rem; line-height: 1.3; }
/* Reseñas al lado del formulario de contacto; debajo, WhatsApp, empresas y preguntas */
.doble { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }
.columna { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.columna > .resenas { grid-template-columns: minmax(0, 1fr); flex: 1; align-content: start; }
.columna > .contacto-form { flex: 1; }
.doble .resenas-resumen { padding: 22px 18px; }
.doble .resena { flex-basis: 92%; }
.soporte { grid-template-columns: 1fr 1fr; grid-template-rows: auto; align-items: stretch; }
@media (max-width: 900px) { .doble { grid-template-columns: 1fr; } .soporte { grid-template-columns: 1fr; } }
.doble .resenas-resumen { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; column-gap: 24px; text-align: left; }
.doble .resena-nota { font-size: 3.6rem; }
.doble .criterios { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
.doble .criterios li { grid-template-columns: 92px 1fr 30px; }
@media (max-width: 520px) { .doble .resenas-resumen { grid-template-columns: 1fr; justify-items: center; text-align: center; } .doble .criterios { grid-column: 1; grid-row: auto; margin-top: 10px; } }
/* Combos y «Del mes» */
.etiqueta.promo { background: var(--tomate); }
.tarjeta .precio small s { color: var(--suave); }
.sin-promos { display: grid; align-content: center; justify-items: center; gap: 8px; padding: 24px; border-radius: 20px; border: 2px dashed var(--linea); background: var(--papel); text-align: center; color: var(--suave); }
.sin-promos span { font-size: 2.4rem; }
.sin-promos strong { font: 700 1.3rem var(--serif); color: var(--espresso); }
.tarjeta .precio small.ahorro { text-transform: none; letter-spacing: 0; font: 700 .85rem/1.2 var(--sans); color: #1f7a3d; }

/* Íconos de las tiendas de apps: la app aún está en construcción (aviso al pasar el mouse o enfocar) */
.tiendas-app { display: flex; flex-wrap: wrap; gap: 10px; }
.tienda-app { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border-radius: 12px; border: 1.5px solid rgba(255, 255, 255, .45); background: #000; color: #fff; font: 700 1.05rem/1.1 var(--sans); text-align: left; cursor: not-allowed; }
.tienda-app svg { width: 26px; height: 26px; flex: none; }
.tienda-app small { display: block; font-size: .7rem; font-weight: 600; opacity: .85; }
.tienda-app::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 6px); padding: 6px 12px; border-radius: 999px; background: var(--marca); color: #fff; font: 700 .85rem var(--sans); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.tienda-app:hover::after, .tienda-app:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 800px) { .pie-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .pie-grid { grid-template-columns: 1fr; } }

/* Dónde estamos: la tarjeta de texto mide lo mismo que el mapa; arriba y abajo quedan a ras con sus bordes y todo va centrado */
.donde-texto { grid-template-rows: auto 1fr auto; align-content: stretch; align-items: center; justify-items: center; padding: 28px 24px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); box-shadow: var(--sombra); text-align: center; gap: 16px; }
.donde-datos { justify-items: center; align-self: start; }
.donde-lugar { line-height: 1.15; }
.donde .acciones-portada { justify-content: center; align-self: end; }
/* Fechas especiales */
.fechas-pista { display: flex; gap: 12px; overflow-x: auto; padding: 6px 2px 14px; scrollbar-width: thin; }
.fecha-chip { flex: 0 0 168px; display: grid; justify-items: center; gap: 4px; padding: 16px 10px; border-radius: 18px; border: 2px solid var(--linea); background: var(--papel); color: var(--espresso); font: inherit; text-align: center; cursor: pointer; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), border-color .2s, background .2s; }
.fecha-chip:hover, .fecha-chip:focus-visible { transform: translateY(-6px) rotate(-1deg); border-color: var(--marca); }
.fecha-chip[aria-pressed="true"] { border-color: var(--marca); background: #fff1e4; box-shadow: var(--sombra); }
.fecha-chip-icono { font-size: 2.4rem; transition: transform .3s; }
.fecha-chip:hover .fecha-chip-icono, .fecha-chip[aria-pressed="true"] .fecha-chip-icono { animation: baila 1s ease-in-out infinite; }
@keyframes baila { 0%, 100% { transform: rotate(-8deg) scale(1.05); } 50% { transform: rotate(8deg) scale(1.2); } }
.fecha-chip strong { font: 700 1.1rem/1.2 var(--serif); }
.fecha-chip-dia { color: var(--suave); font-size: .95rem; }
.fecha-chip em { margin-top: 4px; padding: 3px 12px; border-radius: 999px; background: var(--marca); color: #fff; font-style: normal; font-weight: 700; font-size: .9rem; }
.fecha-detalle { position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 8px 28px; overflow: hidden; padding: 26px; border-radius: var(--radio); border: 1px solid var(--linea); background: radial-gradient(circle at 0 0, #ffe9d2, var(--papel) 55%); box-shadow: var(--sombra); }
.fecha-cuenta { display: grid; justify-items: center; align-content: center; gap: 6px; text-align: center; }
.fecha-cuenta > div { display: grid; justify-items: center; }
.fecha-icono { font-size: 4.4rem; animation: salto 2.6s ease-in-out infinite; }
.fecha-numero { font: 900 4.4rem/1 var(--display); color: var(--tomate); }
.fecha-cuenta span:not(.fecha-icono) { font-weight: 700; color: var(--suave); }
.fecha-hoy { font: 900 2rem/1.1 var(--display); color: var(--tomate); animation: late 1.4s infinite; padding: 8px 14px; border-radius: 999px; }
.fecha-info { display: grid; gap: 10px; align-content: center; justify-items: start; }
.fecha-info h4 { font: 800 2rem/1.1 var(--serif); }
.fecha-cuando { font-weight: 700; color: var(--tomate); }
.fecha-cuando::first-letter { text-transform: uppercase; }
.fecha-oferta { padding: 12px 16px; border-radius: 14px; background: #fff; border: 1.5px dashed var(--marca); }
.fecha-experiencias { grid-column: 1 / -1; display: grid; gap: 10px; margin-top: 8px; }
.confeti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.particula { position: absolute; top: -12%; animation: cae 3s linear forwards; }
@keyframes cae { to { transform: translateY(620px) rotate(360deg); opacity: .2; } }
@media (max-width: 800px) { .fecha-detalle { grid-template-columns: 1fr; } .fecha-chip { flex-basis: 150px; } }
@media (prefers-reduced-motion: reduce) { .fecha-icono, .fecha-chip-icono, .fecha-hoy { animation: none !important; } }

/* WhatsApp de soporte: ahora va abajo de «Dónde estamos», a todo el ancho */
#donde .soporte-ws { margin-top: 6px; }
.soporte { grid-template-columns: 1fr; }

/* Selector de idioma */
.idioma-btn { flex: none; min-width: 48px; min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1.5px solid #f3e6d6; background: transparent; color: #fff; font: 800 1rem var(--sans); letter-spacing: .04em; cursor: pointer; transition: background .2s; }
.idioma-btn:hover { background: rgba(255, 255, 255, .15); }
@media (max-width: 1320px) { .enlaces, .barra .instalar { display: none; } .menu-btn { display: inline-flex; } .carrito-btn { margin-left: auto; } }
@media (max-width: 760px) { .idioma-btn { display: none; } }
@media (max-width: 1320px) { .idioma-btn { margin-left: auto; } .carrito-btn { margin-left: 0; } }
@media (max-width: 760px) { .carrito-btn { margin-left: auto; } }

/* Fechas especiales y regalos */
.grupo-fechas { padding: 8px 0 0; }
.regalos { position: relative; overflow: hidden; margin-top: 18px; padding: 32px; border-radius: var(--radio); background: radial-gradient(circle at 100% 0, #8a3010, var(--espresso) 62%); color: #f3e6d6; box-shadow: var(--sombra-fuerte); }
.regalos-cuerpo { position: relative; z-index: 1; display: grid; gap: 14px; }
.regalos .sobre { color: var(--marca-clara); }
.regalos h3 { font: 800 clamp(1.7rem, 4vw, 2.4rem)/1.1 var(--serif); color: #fff; }
.regalos-fondo { position: absolute; inset: 0; pointer-events: none; }
.regalos-fondo span { position: absolute; font-size: 2rem; opacity: .22; animation: flota 7s ease-in-out infinite; }
.regalos-fondo span:nth-child(1) { left: 6%; top: 12%; } .regalos-fondo span:nth-child(2) { left: 40%; top: 4%; animation-delay: -2s; } .regalos-fondo span:nth-child(3) { right: 8%; top: 14%; animation-delay: -4s; }
.regalos-fondo span:nth-child(4) { right: 28%; bottom: 8%; animation-delay: -1s; } .regalos-fondo span:nth-child(5) { left: 22%; bottom: 6%; animation-delay: -3s; } .regalos-fondo span:nth-child(6) { right: 3%; bottom: 30%; animation-delay: -5s; }
@keyframes flota { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-18px) rotate(8deg); } }
.regalos-tabs { display: flex; flex-wrap: wrap; gap: 12px; }
.regalo-tab { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 24px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); color: #fff; font: 700 1.1rem var(--sans); cursor: pointer; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), background .2s, border-color .2s; }
.regalo-tab span { font-size: 1.6rem; display: inline-block; }
.regalo-tab:hover, .regalo-tab:focus-visible { transform: translateY(-4px) scale(1.04); border-color: var(--marca-clara); }
.regalo-tab:hover span, .regalo-tab[aria-pressed="true"] span { animation: baila 1s ease-in-out infinite; }
.regalo-tab[aria-pressed="true"] { background: var(--marca); border-color: var(--marca); }
.regalos-panel { min-height: 280px; padding: 22px; border-radius: 18px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .15); }
.regalos-panel.abre .regalo-cols { animation: sube .4s both; }
.regalo-cols { display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); gap: 28px; align-items: center; }
.regalo-form { display: grid; gap: 12px; justify-items: start; }
.regalo-form .detalle-titulo { color: #fff; }
.regalo-form label { color: #f3e6d6; width: 100%; max-width: 360px; }
.regalo-form .ayuda { color: #e3d3bf; }
.montos { display: flex; flex-wrap: wrap; gap: 10px; }
.monto { min-height: 48px; padding: 0 20px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, .35); background: transparent; color: #fff; font: 800 1.05rem var(--sans); cursor: pointer; transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), background .2s, border-color .2s; }
.monto:hover { transform: translateY(-3px) scale(1.06); border-color: var(--marca-clara); }
.monto[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--tomate); }
.estimado { font: 700 1.25rem/1.35 var(--serif); color: #fff; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .1); }
.late-texto { animation: aparece .45s cubic-bezier(.3, 1.6, .5, 1); }
.boton.brilla { position: relative; overflow: hidden; }
.boton.brilla::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); animation: barrido 3s ease-in-out infinite; }
@keyframes barrido { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.bono-ticket { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 4px; padding: 26px 20px; border-radius: 18px; color: #4a2a05; text-align: center; background: linear-gradient(135deg, #ffe08a, #f5b942 45%, #ffd36b); box-shadow: 0 14px 30px rgba(0, 0, 0, .45); animation: oscila 5s ease-in-out infinite; }
.bono-ticket small { font: 800 .9rem var(--sans); letter-spacing: .25em; }
.bono-ticket strong { font: 900 3rem/1.1 var(--display); color: #8a1f0a; }
.bono-ticket.gira { animation: gira .6s ease-out, oscila 5s ease-in-out .6s infinite; }
.bono-ticket em { font-style: normal; font-weight: 700; opacity: .85; }
.bono-para { font-size: 1.05rem; }
.bono-brillo { position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent); transform: skewX(-20deg); animation: barrido 3.4s ease-in-out infinite; }
@keyframes oscila { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-6px); } }
@keyframes gira { from { transform: rotateY(90deg) scale(.9); } to { transform: rotateY(0) scale(1); } }
.equipo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; justify-items: center; font-size: 3rem; }
.equipo span { display: inline-block; animation: salto 2.4s ease-in-out infinite; }
.equipo span:nth-child(2) { animation-delay: .2s; } .equipo span:nth-child(3) { animation-delay: .4s; } .equipo span:nth-child(4) { animation-delay: .6s; } .equipo span:nth-child(5) { animation-delay: .8s; } .equipo span:nth-child(6) { animation-delay: 1s; }
@media (max-width: 800px) { .regalo-cols { grid-template-columns: 1fr; } .regalos { padding: 22px 16px; } .regalos-panel { padding: 16px; } }
@media (prefers-reduced-motion: reduce) { .regalos-fondo span, .bono-ticket, .bono-brillo, .equipo span, .boton.brilla::after, .regalo-tab span { animation: none !important; } }

/* WhatsApp de soporte dentro de la tarjeta de «Dónde estamos» */
.donde-texto { grid-template-rows: auto 1fr auto auto; }
.donde-texto .soporte-ws { width: 100%; padding: 14px 16px; gap: 14px; text-align: left; }
.donde-texto .soporte-ws-icono { width: 48px; height: 48px; font-size: 1.5rem; }
.donde-texto .soporte-ws strong { font-size: 1.2rem; }
.donde-texto .soporte-ws small { font-size: .95rem; }
#donde .soporte-ws { margin-top: 0; }

/* Regalos: fondo suave (crema) en vez del bloque oscuro y saturado; solo el bono lleva color fuerte */
.regalos { padding: 24px 28px; background: #fff7ea; color: var(--espresso); border: 1px solid var(--linea); box-shadow: var(--sombra); }
.regalos h3 { font-size: clamp(1.5rem, 3.4vw, 2rem); color: var(--espresso); }
.regalos .sobre { color: var(--marca); }
.regalos-fondo span { opacity: .1; }
.regalo-tab { min-height: 50px; border-color: var(--linea); background: #fff; color: var(--espresso); }
.regalo-tab:hover, .regalo-tab:focus-visible { border-color: var(--marca); }
.regalo-tab[aria-pressed="true"] { background: var(--marca); border-color: var(--marca); color: #fff; }
.regalos-panel { min-height: 0; background: #fffdf8; border: 1px solid var(--linea); }
.regalo-form .detalle-titulo { color: var(--espresso); }
.regalo-form label { color: var(--suave); }
.regalo-form .ayuda { color: var(--suave); }
.monto { border-color: var(--linea); background: #fff; color: var(--espresso); }
.monto:hover { border-color: var(--marca); }
.monto[aria-pressed="true"] { background: var(--marca); border-color: var(--marca); color: #fff; }
.estimado { background: #fff1e4; color: var(--espresso); }
.bono-ticket { box-shadow: 0 10px 22px rgba(120, 70, 10, .25); }

/* Paleta de apoyo: tintes suaves de la marca (naranja, verde albahaca, tomate y arena) para tarjetas que contrasten sin saturar */
:root { --naranja-suave: #fff0e0; --verde-suave: #e9f3e8; --rojo-suave: #fbe9e4; --arena: #f4ebdd; --verde-fuerte: #2f6b3a; --rojo-fuerte: #b3321b; --cafe-fuerte: #5a3c28; }

/* Cifras de «Acerca de nosotros»: tarjetas claras con una franja de color arriba y el número en el tono de su franja */
.cifras li { position: relative; overflow: hidden; gap: 4px; padding: 20px 12px 16px; border-radius: 16px; border: 1px solid var(--linea); background: #fffdf8; color: var(--espresso); box-shadow: 0 6px 16px rgba(60, 30, 10, .07); transition: transform .25s, box-shadow .25s; }
.cifras li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--tono, var(--marca)); }
.cifras li::after { content: ""; position: absolute; right: -26px; bottom: -26px; width: 78px; height: 78px; border-radius: 50%; background: var(--fondo, var(--naranja-suave)); z-index: 0; }
.cifras li > * { position: relative; z-index: 1; }
.cifras li:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(60, 30, 10, .13); }
.cifras li:nth-child(1) { --tono: var(--marca); --fondo: var(--naranja-suave); --num: #c2410c; }
.cifras li:nth-child(2) { --tono: var(--albahaca); --fondo: var(--verde-suave); --num: var(--verde-fuerte); }
.cifras li:nth-child(3) { --tono: var(--tomate); --fondo: var(--rojo-suave); --num: var(--rojo-fuerte); }
.cifras li:nth-child(4) { --tono: #b08968; --fondo: var(--arena); --num: var(--cafe-fuerte); }
.cifras strong { color: var(--num, var(--marca)); font-size: 2.3rem; }
.cifras span { color: var(--suave); font-size: .95rem; line-height: 1.3; }

/* Cómo pedir: tres pasos en tonos suaves; el paso elegido se oscurece al café de la marca */
.pasos { gap: 18px; }
.pasos li { position: relative; }
.pasos li:not(:last-child)::after { content: "→"; position: absolute; right: -16px; top: 50%; z-index: 2; transform: translateY(-50%); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fffdf8; border: 1px solid var(--linea); color: var(--suave); font-size: .95rem; box-shadow: 0 2px 6px rgba(60, 30, 10, .1); }
.pasos li:nth-child(1) { --tono: var(--marca); --fondo: var(--naranja-suave); }
.pasos li:nth-child(2) { --tono: var(--albahaca); --fondo: var(--verde-suave); }
.pasos li:nth-child(3) { --tono: var(--tomate); --fondo: var(--rojo-suave); }
.pasos .tab-int { padding: 22px 22px 24px; background: var(--fondo); border: 1.5px solid color-mix(in srgb, var(--tono) 28%, transparent); color: var(--espresso); }
.pasos .numero { width: 46px; height: 46px; background: var(--tono); color: #fff; box-shadow: 0 4px 10px color-mix(in srgb, var(--tono) 45%, transparent); }
.pasos h3 { font-size: 1.45rem; color: var(--espresso); }
.pasos p { color: var(--cafe); font-size: 1.02rem; }
.pasos .tab-int:hover { border-color: var(--tono); }
.pasos .tab-int[aria-expanded="true"] { background: var(--cafe); border-color: var(--tono); color: #fff5e8; box-shadow: 0 14px 28px rgba(58, 42, 32, .3); }
.pasos .tab-int[aria-expanded="true"] h3 { color: #fff; }
.pasos .tab-int[aria-expanded="true"] p { color: #ecdcc8; }
@media (max-width: 800px) { .pasos li:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -22px; transform: translateX(-50%); } }

/* Más contraste entre las tarjetas y el fondo de la página (2026-10-25): tarjetas en arena, tintes de apoyo algo más profundos, controles internos en blanco */
:root { --naranja-suave: #fbe1c4; --verde-suave: #dcebd8; --rojo-suave: #f6d8cf; --arena: #ecdcc3; }
.cifras li { background: var(--papel); }
.regalos { background: var(--papel); }
.regalos-panel, .fecha-detalle { background-color: #fbf3e6; }
.fecha-detalle { background: radial-gradient(circle at 0 0, #fbdcba, var(--papel) 60%); }
.tarjeta, .detalle, .fecha-chip, .faq, .contacto-form, .resena, .donde-texto, .valores .tab-int { border-color: var(--linea); }
.categorias { background: var(--crema); }
.chip, .opcion { border-color: var(--linea); }
.etiquetas-pago li { background: #d7e8d3; }

/* «Acerca de nosotros»: las tres tarjetas con el mismo diseño de «Cómo pedir» (tinte propio, ícono de color, conectores y paso elegido en café) */
.valores { gap: 18px; }
.valores li { position: relative; }
.valores li:not(:last-child)::after { content: "→"; position: absolute; right: -16px; top: 50%; z-index: 2; transform: translateY(-50%); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fffdf8; border: 1px solid var(--linea); color: var(--suave); font-size: .95rem; box-shadow: 0 2px 6px rgba(60, 30, 10, .1); }
.valores li:nth-child(1) { --tono: var(--marca); --fondo: var(--naranja-suave); }
.valores li:nth-child(2) { --tono: var(--albahaca); --fondo: var(--verde-suave); }
.valores li:nth-child(3) { --tono: var(--tomate); --fondo: var(--rojo-suave); }
.valores .tab-int { padding: 22px; background: var(--fondo); border: 1.5px solid color-mix(in srgb, var(--tono) 28%, transparent); color: var(--espresso); }
.valores .tab-int:hover { border-color: var(--tono); }
.valores .icono { width: 52px; height: 52px; border-radius: 50%; background: var(--tono); color: #fff; font-size: 1.5rem; box-shadow: 0 4px 10px color-mix(in srgb, var(--tono) 45%, transparent); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.valores .tab-int:hover .icono, .valores .tab-int[aria-expanded="true"] .icono { animation: baila 1.1s ease-in-out infinite; }
.valores h3 { font-size: 1.3rem; color: var(--espresso); }
.valores p { color: var(--cafe); font-size: 1rem; }
.valores .tab-int[aria-expanded="true"] { background: var(--cafe); border-color: var(--tono); color: #fff5e8; box-shadow: 0 14px 28px rgba(58, 42, 32, .3); }
.valores .tab-int[aria-expanded="true"] h3 { color: #fff; }
.valores .tab-int[aria-expanded="true"] p { color: #ecdcc8; }
@media (max-width: 800px) { .valores li:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -22px; transform: translateX(-50%); } }
/* El panel de detalle (de «Cómo pedir» y de «Acerca de nosotros») toma el color de la tarjeta elegida */
.detalle[data-tono="0"] { --tono: var(--marca); --fondo: var(--naranja-suave); }
.detalle[data-tono="1"] { --tono: var(--albahaca); --fondo: var(--verde-suave); }
.detalle[data-tono="2"] { --tono: var(--tomate); --fondo: var(--rojo-suave); }
.detalle[data-tono] { border-top: 5px solid var(--tono); background: linear-gradient(180deg, color-mix(in srgb, var(--fondo) 70%, var(--papel)), var(--papel) 140px); transition: border-color .3s; }
.detalle[data-tono] .detalle-titulo { color: var(--espresso); }
.detalle[data-tono] .detalle-titulo::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: var(--tono); vertical-align: middle; }
.tamano, .mini-tarjeta, .opcion-grande { box-shadow: 0 3px 8px rgba(60, 30, 10, .06); }
.tamano:hover, .mini-tarjeta:hover, .opcion-grande:hover { border-color: var(--tono, var(--marca)); }

/* Íconos de «Acerca de nosotros»: círculo blanco con aro del color de la tarjeta (se lee bien el emoji) */
.valores .icono { background: #fffdf8; color: var(--tono); border: 3px solid var(--tono); }

/* Fechas especiales: cada tarjeta y su panel con su propio color y fondo de emojis */
.fecha-chip { position: relative; overflow: hidden; isolation: isolate; flex-basis: 176px; padding: 18px 10px; background: linear-gradient(160deg, var(--f1, var(--papel)), var(--f2, var(--arena))); border: 2px solid color-mix(in srgb, var(--fa, var(--marca)) 30%, transparent); }
.fecha-chip:hover, .fecha-chip:focus-visible { border-color: var(--fa); box-shadow: 0 12px 24px color-mix(in srgb, var(--fa) 28%, transparent); }
.fecha-chip[aria-pressed="true"] { border-color: var(--fa); background: linear-gradient(160deg, var(--f1), var(--f2)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fa) 30%, transparent), 0 14px 26px color-mix(in srgb, var(--fa) 30%, transparent); }
.fecha-chip strong { color: var(--fa); }
.fecha-chip-dia { color: var(--cafe); font-weight: 600; }
.fecha-chip em { background: var(--fa); }
.fecha-chip-icono { font-size: 2.8rem; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .18)); }
.fecha-motivo, .fecha-fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fecha-motivo span { position: absolute; font-size: 1.5rem; opacity: .2; transition: opacity .3s, transform .6s; }
.fecha-motivo span:nth-child(1) { left: 6%; top: 6%; transform: rotate(-14deg); } .fecha-motivo span:nth-child(2) { right: 6%; top: 10%; transform: rotate(12deg); }
.fecha-motivo span:nth-child(3) { left: 10%; top: 44%; font-size: 1.1rem; } .fecha-motivo span:nth-child(4) { right: 8%; top: 48%; font-size: 1.2rem; transform: rotate(-8deg); }
.fecha-motivo span:nth-child(5) { left: 8%; bottom: 8%; font-size: 1.3rem; } .fecha-motivo span:nth-child(6) { right: 10%; bottom: 6%; font-size: 1.6rem; transform: rotate(10deg); }
.fecha-chip:hover .fecha-motivo span, .fecha-chip[aria-pressed="true"] .fecha-motivo span { opacity: .5; animation: sube-emoji 2.6s ease-in-out infinite; }
.fecha-motivo span:nth-child(even) { animation-delay: -1.3s !important; }
@keyframes sube-emoji { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.fecha-detalle { position: relative; isolation: isolate; border-top: 6px solid var(--fa, var(--marca)); background: linear-gradient(135deg, var(--f1, #ffe9d2), color-mix(in srgb, var(--f2, #fff) 55%, var(--papel)) 70%); }
.fecha-fondo span { position: absolute; font-size: 4.5rem; opacity: .13; animation: flota 9s ease-in-out infinite; }
.fecha-fondo span:nth-child(1) { left: 2%; top: 8%; } .fecha-fondo span:nth-child(2) { left: 22%; bottom: 6%; animation-delay: -2s; } .fecha-fondo span:nth-child(3) { left: 46%; top: 4%; animation-delay: -4s; }
.fecha-fondo span:nth-child(4) { right: 26%; bottom: 10%; animation-delay: -1s; } .fecha-fondo span:nth-child(5) { right: 4%; top: 10%; animation-delay: -3s; } .fecha-fondo span:nth-child(6) { right: 10%; bottom: 34%; animation-delay: -5s; }
.fecha-fondo span:nth-child(7) { left: 34%; bottom: 40%; font-size: 3rem; animation-delay: -6s; } .fecha-fondo span:nth-child(8) { left: 60%; top: 30%; font-size: 3rem; animation-delay: -7s; } .fecha-fondo span:nth-child(9) { left: 10%; top: 48%; font-size: 3rem; animation-delay: -8s; }
.fecha-info h4 { color: var(--fa); }
.fecha-cuando { color: var(--fa); }
.fecha-numero, .fecha-hoy { color: var(--fa); }
.fecha-info .boton { background: var(--fa); }
.fecha-info .boton:hover { filter: brightness(1.12); background: var(--fa); }
.fecha-experiencias .detalle-titulo::before { background: var(--fa); }
.fecha-oferta { border-color: var(--fa); }
@media (prefers-reduced-motion: reduce) { .fecha-fondo span, .fecha-motivo span { animation: none !important; } }

/* Formas de pago: tarjetas con ícono y color; al pasar el mouse o tocar muestran cómo funcionan */
.con-icono { display: flex; align-items: center; gap: 10px; }
.con-icono span { font-size: 1.5rem; animation: salto 2.4s ease-in-out infinite; }
.pagos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; align-items: start; }
.pago { --t: var(--albahaca); --b: var(--verde-suave); display: grid; justify-items: start; gap: 6px; padding: 14px 16px; border-radius: 16px; border: 2px solid color-mix(in srgb, var(--t) 30%, transparent); background: var(--b); color: var(--espresso); font: inherit; text-align: left; cursor: pointer; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .25s, border-color .2s; }
.pago:hover, .pago:focus-visible, .pago[aria-expanded="true"] { transform: translateY(-4px); border-color: var(--t); box-shadow: 0 10px 20px color-mix(in srgb, var(--t) 25%, transparent); }
.pago-icono { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fffdf8; border: 3px solid var(--t); font-size: 1.5rem; transition: transform .5s; }
.pago:hover .pago-icono, .pago[aria-expanded="true"] .pago-icono { transform: rotateY(360deg) scale(1.1); }
.pago-nombre { font: 700 1.05rem/1.2 var(--serif); }
.pago em { padding: 2px 10px; border-radius: 999px; background: var(--t); color: #fff; font: 700 .75rem var(--sans); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.pago-ayuda { font-size: .92rem; line-height: 1.35; color: var(--cafe); animation: sube .25s both; }
.pago-verde { --t: var(--albahaca); --b: var(--verde-suave); }
.pago-morado { --t: #7a3d9a; --b: #eadff3; }
.pago-rojo { --t: #b3321b; --b: var(--rojo-suave); }
.pago-azul { --t: #2d5b8f; --b: #dbe7f4; }
.pago-gris { --t: #4f5b66; --b: #e4e8ec; }
.pago-celeste { --t: #14688f; --b: #d9edf8; }
.pago.pronto { border-style: dashed; opacity: .85; }
.opcion-pago { display: flex; align-items: center; gap: 12px; }
.opcion-pago b { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--verde-suave); font-size: 1.2rem; font-weight: 400; }
.opcion-pago > span { flex: 1; }
/* Domicilio: una moto lleva la pizza desde el local hasta la casa */
.ruta-moto { position: relative; height: 92px; overflow: hidden; border-radius: 16px; background: linear-gradient(180deg, #e4f1e3 0%, #e4f1e3 62%, #cfc6b8 62%); border: 1px solid var(--linea); }
.ruta-moto span { position: absolute; bottom: 24px; font-size: 2.3rem; line-height: 1; }
.ruta-local { left: 14px; } .ruta-casa { right: 14px; }
.moto { left: 0; transform: scaleX(-1); animation: recorre 5.5s ease-in-out infinite; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .25)); }
@keyframes recorre { 0% { left: 56px; opacity: 0; } 10% { opacity: 1; } 80% { left: calc(100% - 118px); opacity: 1; } 92%, 100% { left: calc(100% - 118px); opacity: 0; } }
.ruta-linea { left: 0 !important; right: 0; bottom: 10px !important; height: 6px; background: repeating-linear-gradient(90deg, #fff 0 18px, transparent 18px 36px); animation: calle 1s linear infinite; opacity: .85; }
@keyframes calle { to { background-position: -36px 0; } }
@media (prefers-reduced-motion: reduce) { .moto, .ruta-linea, .con-icono span { animation: none !important; } .moto { left: 40%; opacity: 1; } }

/* Banner principal y franja de datos: letra moderna (Bricolage Grotesque) en todos sus textos */
.banner, .banner * { font-family: var(--moderna); }
.slide h1, .slide h2 { font-weight: 800; font-size: clamp(2.3rem, 5.4vw, 4.3rem); line-height: 1; letter-spacing: -.035em; text-wrap: balance; }
.slide h1 em { font-style: normal; font-weight: 800; background: linear-gradient(90deg, #ffb066, #ff7a2f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.slide .sobre { font-weight: 700; font-size: 1rem; letter-spacing: .22em; }
.slide-desc { font-weight: 500; font-size: 1.3rem; line-height: 1.35; letter-spacing: -.005em; }
.slide-boton { font-weight: 700; font-size: 1.15rem; letter-spacing: .01em; min-height: 56px; padding: 0 32px; box-shadow: 0 10px 22px rgba(232, 89, 12, .4); }
.info, .info * { font-family: var(--moderna); }
.info-dato, .estado { font-weight: 700; letter-spacing: -.005em; }
.info-dato { font-size: 1.15rem; }
.estado { font-size: 1.1rem; }
.info-boton { font-weight: 700; }
@media (max-width: 640px) { .slide h1, .slide h2 { font-size: clamp(1.7rem, 8vw, 2.2rem); } }

.banner :is(h1, h2, p, a, button, em, span, small, strong), .info :is(p, a, span, strong, small) { font-family: var(--moderna); }
.info .estado { font-family: var(--moderna); }

/* Formas de pago: todas en una sola fila, del mismo tamaño y ajustadas al ancho de la tarjeta principal */
.pagos { display: grid; gap: 10px; }
.pagos-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.pago { justify-items: center; align-content: start; text-align: center; min-height: 132px; padding: 14px 8px; }
.pago-nombre { font-size: 1rem; }
.pago[aria-pressed="true"] { transform: translateY(-4px); border-color: var(--t); box-shadow: 0 10px 20px color-mix(in srgb, var(--t) 25%, transparent); }
.pago[aria-pressed="true"] .pago-icono { transform: rotateY(360deg) scale(1.1); }
.pago-nota { padding: 10px 14px; border-radius: 12px; background: #fffdf8; border-left: 5px solid var(--t, var(--albahaca)); color: var(--cafe); font-size: 1rem; line-height: 1.35; min-height: 46px; transition: border-color .25s; }
.pago-nota:empty { display: none; }
@media (max-width: 1000px) { .pagos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pagos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* «¿Cómo pagas?» del pedido: las mismas tarjetas, en filas del mismo tamaño */
#lista-pagos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.opcion-tarjeta { min-height: 104px; padding: 12px 8px; justify-content: center; text-align: center; border-radius: 14px; background: var(--papel); transition: transform .2s, border-color .2s, box-shadow .2s; }
.opcion-tarjeta:hover { transform: translateY(-3px); border-color: var(--marca); }
.opcion-tarjeta .opcion-pago { flex-direction: column; gap: 6px; }
.opcion-tarjeta .opcion-pago > span { flex: none; font: 700 .95rem/1.2 var(--serif); }
.opcion-tarjeta input { position: absolute; opacity: 0; pointer-events: none; }
.opcion-tarjeta { position: relative; }
.opcion-tarjeta:has(input:checked) { border-color: var(--marca); background: #fff1e4; box-shadow: 0 6px 14px rgba(232, 89, 12, .2); }
.opcion-tarjeta:has(input:checked) .opcion-pago b { background: var(--marca); }
.opcion-tarjeta:has(input:focus-visible) { outline: 3px solid var(--marca-clara); outline-offset: 2px; }
@media (max-width: 420px) { #lista-pagos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* «¿Cómo pagas?» del pedido: todas las formas en una sola fila (en pantallas muy angostas, dos filas) */
#lista-pagos { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 8px; }
.opcion-tarjeta { min-height: 112px; padding: 10px 4px; }
.opcion-tarjeta .opcion-pago > span { font-size: .82rem; overflow-wrap: break-word; }
.opcion-tarjeta .opcion-pago b { width: 36px; height: 36px; font-size: 1.1rem; }
@media (max-width: 440px) { #lista-pagos { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Cifras de «Acerca de nosotros»: color pleno que contrasta con la página, ícono de fondo, números que cuentan y brillo al pasar el mouse */
.cifras { gap: 14px; }
.cifras li { position: relative; overflow: hidden; isolation: isolate; gap: 6px; padding: 24px 12px 20px; border: 0; border-radius: 20px; color: #fff; text-align: center; background: linear-gradient(145deg, var(--c1), var(--c2)); box-shadow: 0 14px 26px color-mix(in srgb, var(--c2) 45%, transparent); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s; }
.cifras li::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); transform: translateX(-120%); transition: transform .8s; }
.cifras li::after { content: attr(data-icono); position: absolute; right: -8px; bottom: -14px; width: auto; height: auto; background: none; border-radius: 0; z-index: -1; font-size: 5.6rem; line-height: 1; opacity: .2; filter: grayscale(1) brightness(2); transform: rotate(-12deg); transition: transform .5s, opacity .4s; }
.cifras li:hover { transform: translateY(-8px) scale(1.04); box-shadow: 0 22px 34px color-mix(in srgb, var(--c2) 55%, transparent); }
.cifras li:hover::before { transform: translateX(120%); }
.cifras li:hover::after { transform: rotate(0) scale(1.2); opacity: .32; }
.cifras li:nth-child(1) { --c1: #ec6a1c; --c2: #b9400a; }
.cifras li:nth-child(2) { --c1: #3f8f4f; --c2: #24562d; }
.cifras li:nth-child(3) { --c1: #d4452a; --c2: #8f2210; }
.cifras li:nth-child(4) { --c1: #8a5e3e; --c2: #472c1a; }
.cifras strong { font: 900 3.4rem/1 var(--display); color: #fff; text-shadow: 0 3px 10px rgba(0, 0, 0, .28); font-variant-numeric: tabular-nums; }
.cifras strong.listo { animation: late-cifra .5s ease-out; }
@keyframes late-cifra { 40% { transform: scale(1.18); } }
.cifras span { color: rgba(255, 255, 255, .94); font-size: 1rem; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .cifras li, .cifras li::before, .cifras li::after { transition: none; } .cifras strong.listo { animation: none; } }

/* Paso 2 «Tu pedido» (seguimiento): azul, con una vista de ejemplo animada y botones iguales */
.pasos li:nth-child(2) { --tono: #2d5b8f; --fondo: #dbe7f4; }
.detalle[data-tono="azul"] { --tono: #2d5b8f; --fondo: #dbe7f4; }
.pasos li:nth-child(2) .numero { background: #2d5b8f; }
.detalle[data-tono="azul"] .boton { background: #2d5b8f; }
.detalle[data-tono="azul"] .boton:hover { background: #24497a; }
.seguir-pasos.demo { margin: 6px 0 4px; padding: 18px 12px 12px; border-radius: 16px; background: #fffdf8; border: 1px solid color-mix(in srgb, #2d5b8f 25%, transparent); }
.seguir-pasos.demo li::before { top: 28px; }
.seguir-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.acciones-par { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.acciones-par .boton { width: 100%; }
@media (max-width: 640px) { .seguir-mini, .acciones-par { grid-template-columns: 1fr; } }

/* «Pronto»: etiqueta en la esquina superior derecha; las tarjetas conservan su tamaño y su forma */
.pago { position: relative; }
.pago .pago-pronto { position: absolute; top: 6px; right: 6px; margin: 0; padding: 2px 8px; border-radius: 999px; background: var(--t); color: #fff; font: 800 .62rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }

/* Botones de los paneles: el diseño de los botones de la tienda, del color del paso; el de pagos va junto a la línea explicativa */
.detalle[data-tono="0"] .boton { background: var(--marca); }
.detalle[data-tono="1"] .boton { background: var(--albahaca); }
.detalle[data-tono="2"] .boton { background: var(--tomate); }
.detalle[data-tono] .boton:hover { filter: brightness(1.1); transform: translateY(-1px); }
.pagos-pie { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: stretch; }
.pagos-pie .pago-nota { display: flex; align-items: center; margin: 0; }
.pagos-pie .boton { align-self: stretch; white-space: nowrap; }
@media (max-width: 640px) { .pagos-pie { grid-template-columns: 1fr; } }

/* Todos los botones de acción de la tienda llevan el naranja de la marca, también dentro de los paneles de colores */
.detalle .boton, .detalle[data-tono] .boton, .detalle[data-tono="azul"] .boton, .fecha-info .boton, .fecha-detalle .boton { background: var(--marca); color: #fff; }
.detalle .boton:hover, .detalle[data-tono] .boton:hover, .detalle[data-tono="azul"] .boton:hover, .fecha-info .boton:hover { background: #d24e07; filter: none; }

/* «¿Cómo lo quieres?»: dos tarjetas grandes con escena animada; la elegida se marca con ✓ y una ráfaga de emojis */
.entrega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.entrega-op { --e: #b3321b; --e2: #f6d8cf; position: relative; overflow: hidden; isolation: isolate; display: grid; align-content: end; justify-items: start; gap: 4px; min-height: 190px; padding: 16px 18px 18px; border-radius: 20px; border: 2px solid color-mix(in srgb, var(--e) 25%, transparent); background: linear-gradient(160deg, #fffdf8 0%, var(--e2) 100%); color: var(--espresso); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 6px 14px rgba(60, 30, 10, .08); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s, border-color .2s; }
.entrega-recoger { --e: #2f6b3a; --e2: #d9ead5; }
.entrega-op:hover, .entrega-op:focus-visible { transform: translateY(-5px); border-color: var(--e); box-shadow: 0 16px 28px color-mix(in srgb, var(--e) 28%, transparent); }
.entrega-op[aria-pressed="true"] { border-color: var(--e); box-shadow: 0 0 0 3px color-mix(in srgb, var(--e) 28%, transparent), 0 16px 28px color-mix(in srgb, var(--e) 28%, transparent); }
.entrega-op strong { font: 800 1.35rem/1.15 var(--serif); }
.entrega-op small { color: var(--cafe); font-size: .95rem; line-height: 1.3; }
.entrega-etiqueta { padding: 3px 12px; border-radius: 999px; background: var(--e); color: #fff; font: 700 .75rem var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.entrega-check { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--e) 40%, transparent); background: #fffdf8; color: transparent; font-weight: 800; font-size: 1.2rem; transition: transform .35s cubic-bezier(.3, 1.8, .5, 1), background .2s, color .2s; }
.entrega-op[aria-pressed="true"] .entrega-check { background: var(--e); border-color: var(--e); color: #fff; transform: scale(1.12) rotate(360deg); }
.escena { position: absolute; left: 0; right: 0; top: 0; height: 84px; z-index: -1; overflow: hidden; }
.escena span { position: absolute; font-size: 2.2rem; line-height: 1; }
.e-casa { right: 16px; top: 16px; }
.e-moto { left: 0; top: 24px; transform: scaleX(-1); animation: llega 4.2s ease-in-out infinite; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .22)); }
.entrega-op:hover .e-moto { animation-duration: 1.8s; }
@keyframes llega { 0% { left: -12%; } 70%, 100% { left: calc(100% - 100px); } }
.e-calle { left: 0 !important; right: 0; top: 66px !important; height: 5px; font-size: 0 !important; background: repeating-linear-gradient(90deg, rgba(179, 50, 27, .35) 0 18px, transparent 18px 36px); animation: calle 1s linear infinite; }
.e-tienda { right: 18px; top: 14px; font-size: 2.6rem !important; }
.e-cliente { left: 0; top: 30px; animation: camina 4.4s ease-in-out infinite; }
.e-bolsa { right: 78px; top: 40px; opacity: 0; animation: bolsa 4.4s ease-in-out infinite; }
.entrega-op:hover .e-tienda { animation: baila 1s ease-in-out infinite; }
@keyframes camina { 0% { left: 6%; } 62%, 100% { left: calc(100% - 118px); } }
@keyframes bolsa { 0%, 60% { opacity: 0; transform: translateY(8px) scale(.6); } 74%, 100% { opacity: 1; transform: translateY(0) scale(1); } }
.entrega-rafaga { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.entrega-rafaga .particula { top: -10%; animation-name: cae-corto; }
@keyframes cae-corto { to { transform: translateY(240px) rotate(300deg); opacity: .2; } }
@media (max-width: 640px) { .entrega-grid { grid-template-columns: 1fr; } .entrega-op { min-height: 170px; } }
@media (prefers-reduced-motion: reduce) { .e-moto, .e-calle, .e-cliente, .e-bolsa, .entrega-op:hover .e-tienda { animation: none !important; } .e-bolsa { opacity: 1; } .e-moto { left: 40%; } }

/* Reseñas: una sola tarjeta cerrada (como la de soporte); la barra de abajo lleva las flechas a los lados y el botón en el centro */
.resenas-tarjeta { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--papel); box-shadow: var(--sombra); }
.resenas-tarjeta .resenas { flex: 1; }
.resenas-barra { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 12px; align-items: center; }
.resenas-barra .boton { width: 100%; min-height: 52px; padding: 8px 16px; font-size: 1rem; line-height: 1.2; text-align: center; }
.flecha-resenas { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--marca); background: transparent; color: var(--marca); font-size: 1.6rem; line-height: 1; cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.flecha-resenas:hover { background: var(--marca); color: #fff; transform: scale(1.08); }
.columna > .resenas-tarjeta .resena { background: #fffdf8; }

.resenas-tarjeta .resenas { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 16px; }
.resenas-tarjeta .resenas-carrusel { grid-template-rows: auto; }

/* Sin saltos al cargar «Acerca de nosotros»: se reserva el espacio y las secciones solo aparecen con opacidad */
.cifras strong { position: relative; display: block; }
.cifra-final { display: block; color: transparent; text-shadow: none; }
.cifra-cuenta { position: absolute; inset: 0; display: block; text-align: center; color: #fff; text-shadow: 0 3px 10px rgba(0, 0, 0, .28); }
.cifras strong.listo .cifra-cuenta { display: block; }
.cifras { min-height: 128px; }
.nosotros-lead { min-height: 7.2em; }
.valores { min-height: 112px; }
.nosotros-foto img { background: var(--arena); }
.revela { transform: none; transition: opacity .7s; }
.revela.visible { transform: none; }
@media (max-width: 800px) { .cifras { min-height: 270px; } .valores { min-height: 380px; } }

/* Antes de que el menú se arme, las secciones de abajo se esconden: así «Acerca de nosotros» no salta al cargar */
body:not(.cargado) main > section:not(#inicio):not(#menu), body:not(.cargado) main > div:not(.info), body:not(.cargado) .sigue, body:not(.cargado) .pie { display: none; }

.cifras strong .cifra-final, .cifras strong .cifra-cuenta { font: inherit; letter-spacing: inherit; }
.cifras strong .cifra-final { color: transparent; text-shadow: none; }
.cifras strong .cifra-cuenta { color: #fff; text-shadow: 0 3px 10px rgba(0, 0, 0, .28); font-variant-numeric: tabular-nums; }

.detalle[data-tono="2"] .pago-nota { --t: var(--tomate); }

/* Seguimiento: los dos campos y el botón van en una sola fila */
.seguir-mini { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; }
.seguir-mini .boton { min-height: 46px; padding: 0 28px; white-space: nowrap; }
@media (max-width: 640px) { .seguir-mini { grid-template-columns: 1fr; } .seguir-mini .boton { width: 100%; } }

/* Formas de pago con los colores de su entidad */
.pago-nequi { --t: #da0081; --b: #f9e1ef; }
.pago-daviplata { --t: #e30613; --b: #fde2e3; }
.pago-verde { --t: #2f7d3c; --b: #dcebd8; }
.pago-azul { --t: #1f4e8c; --b: #dbe7f4; }
.pago-gris { --t: #3d4852; --b: #e4e8ec; }
.pago-celeste { --t: #0086c7; --b: #d6ecf8; }
.pago-marca { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 56px; border-radius: 12px; color: #fff; box-shadow: 0 4px 10px color-mix(in srgb, var(--t) 35%, transparent); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.pago-marca b { font: 800 1.45rem/1 var(--moderna, var(--sans)); letter-spacing: -.04em; }
.pago-marca i { font-style: normal; font-size: 1.6rem; line-height: 1; }
.pago:hover .pago-marca, .pago[aria-pressed="true"] .pago-marca { transform: scale(1.06) rotate(-2deg); }
.marca-nequi { background: #200020; } .marca-nequi b { color: #fff; } .marca-nequi b::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 3px; border-radius: 2px; background: #da0081; }
.marca-daviplata { background: #e30613; } .marca-daviplata b { font-size: 1.3rem; }
.marca-verde { background: #2f7d3c; } .marca-azul { background: #1f4e8c; } .marca-gris { background: #3d4852; } .marca-celeste { background: #0086c7; }
.marca-gris b { font-size: 1.2rem; letter-spacing: .06em; }
.pago { align-content: start; gap: 8px; }
.pago .pago-nombre { color: var(--t); }
.pago em.pago-pronto { background: var(--t); }
.opcion-pago b.marca-nequi { background: #200020; } .opcion-pago b.marca-daviplata { background: #e30613; } .opcion-pago b.marca-verde { background: #2f7d3c; } .opcion-pago b.marca-azul { background: #1f4e8c; } .opcion-pago b.marca-gris { background: #3d4852; }
.opcion-tarjeta:has(input:checked) .opcion-pago b { filter: none; }

/* Los tres paneles de «Acerca de nosotros» miden lo mismo (el de Domicilio llena el espacio con una escena más grande) */
#valores-detalle { min-height: 330px; }
.ruta-moto.grande { height: 172px; }
.ruta-moto.grande span { bottom: 34px; font-size: 3.3rem; }
.ruta-moto.grande .ruta-linea { bottom: 14px !important; height: 8px; }
.ruta-moto.grande .ruta-local { left: 22px; } .ruta-moto.grande .ruta-casa { right: 22px; }
@media (max-width: 800px) { #valores-detalle { min-height: 0; } .ruta-moto.grande { height: 130px; } .ruta-moto.grande span { font-size: 2.6rem; bottom: 26px; } }

/* Regla de la tienda: el nombre de todo campo de texto va en negrilla y en un tono oscuro, para captar bien el mensaje */
label { font-weight: 700; font-size: .98rem; color: var(--espresso); }
.regalo-form label, .contacto-form label, .detalle label { color: var(--espresso); }
.acepto, label.acepto { font-weight: 400; font-size: .92rem; color: var(--espresso); }
.contador { font-weight: 600; }

/* Botones especiales de la barra (Instalar app, idioma y Mi pedido): naranja quemado, con relieve; distintos del naranja de los botones de acción */
:root { --quemado: #b9440e; --quemado-claro: #d2561a; --quemado-oscuro: #8f330a; --quemado-profundo: #6e2606; }
.carrito-btn, .instalar, .idioma-btn { position: relative; border: 1px solid rgba(255, 210, 170, .35); color: #fff; letter-spacing: .01em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 4px 12px rgba(110, 38, 6, .45); transition: transform .2s, box-shadow .2s, filter .2s; }
.carrito-btn { background: linear-gradient(180deg, var(--quemado-claro), var(--quemado-oscuro)); font-weight: 800; }
.instalar { display: inline-flex; background: linear-gradient(180deg, #a63d0a, var(--quemado-profundo)); font-weight: 700; }
.instalar::before { content: "📲"; margin-right: 6px; }
.idioma-btn { background: rgba(143, 51, 10, .55); border-color: rgba(255, 210, 170, .5); }
.carrito-btn:hover, .instalar:hover, .idioma-btn:hover { transform: translateY(-2px); filter: brightness(1.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 18px rgba(110, 38, 6, .55); }
.menu-btn { background: linear-gradient(180deg, #a63d0a, var(--quemado-profundo)); border: 1px solid rgba(255, 210, 170, .35); }
.cuenta { background: #fff3e6; color: var(--quemado-oscuro); font-weight: 800; }
.instalar.en-construccion::after { content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 8px); transform: translate(-50%, -4px); padding: 4px 12px; border-radius: 999px; background: #fffdf8; color: var(--quemado-oscuro); font: 700 .8rem var(--sans); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; box-shadow: 0 4px 10px rgba(0, 0, 0, .25); }
.instalar.en-construccion:hover::after, .instalar.en-construccion:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.cajon button.cajon-enlace.en-construccion::after { content: "Pronto"; margin-left: auto; padding: 2px 10px; border-radius: 999px; background: var(--quemado); color: #fff; font-size: .75rem; }

/* Barra con siete secciones: más compacta para que todo quepa en una línea desde 1330 px */
@media (min-width: 1321px) {
  .barra { gap: 8px; }
  .enlaces a, .enlace-barra { padding: 8px 8px; font-size: 1rem; }
  .instalar { padding: 0 12px; font-size: .95rem; }
  .idioma-btn { min-width: 44px; padding: 0 8px; }
  .carrito-btn { padding: 0 14px; }
  .marca-nombre { font-size: 1.25rem; }
}

/* Barra superior: solo el menú de la tienda, con letra grande, diseño e interacción */
:root { --alto-barra: 76px; }
.barra { gap: 12px; }
.marca-logo { width: 50px; height: 50px; }
.marca-nombre { font-size: 1.55rem; }
.enlaces { display: flex; flex: 1; justify-content: flex-end; gap: 4px; margin: 0; }
.enlaces a, .enlace-barra { position: relative; min-width: 0; padding: 12px 14px; border: 0; border-radius: 12px; background: transparent; color: #f9eee0; font: 700 1.25rem/1 var(--sans); letter-spacing: .005em; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background .25s, color .25s, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.enlaces a::after, .enlace-barra::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #ffb066, #ff7a2f); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.enlaces a:hover, .enlace-barra:hover, .enlaces a:focus-visible, .enlace-barra:focus-visible { background: rgba(255, 255, 255, .12); color: #fff; transform: translateY(-2px); }
.enlaces a:hover::after, .enlace-barra:hover::after, .enlaces a:focus-visible::after, .enlace-barra:focus-visible::after, .enlaces a[aria-current="true"]::after { transform: scaleX(1); }
.enlaces a[aria-current="true"] { color: #fff; background: rgba(255, 255, 255, .08); }
@media (max-width: 1320px) and (min-width: 1101px) { .enlaces { display: flex; } .menu-btn { display: none; } }
@media (max-width: 1100px) { .enlaces { display: none; } .menu-btn { display: inline-flex; margin-left: auto; } .marca-nombre { font-size: 1.4rem; } }
@media (max-width: 1240px) and (min-width: 1101px) { .enlaces a, .enlace-barra { padding: 12px 10px; font-size: 1.15rem; } }

/* Franja de datos: el estado «Abierto ahora…» más grande y, a su lado, los botones especiales (Instalar APP, idioma y Mi pedido) */
.info-acciones { display: flex; align-items: center; gap: 10px; }
.info .instalar, .info .idioma-btn, .info .carrito-btn { display: inline-flex; min-height: 50px; margin: 0; font-size: 1.05rem; }
.info .instalar { padding: 0 18px; }
.info .idioma-btn { min-width: 50px; padding: 0 12px; }
.info .carrito-btn { padding: 0 18px; }
.info .estado { gap: 12px; padding: 12px 24px; font-size: 1.3rem; border-radius: 999px; background: rgba(60, 170, 100, .22); border: 1.5px solid rgba(110, 220, 150, .6); box-shadow: 0 0 0 4px rgba(91, 209, 138, .12); }
.info .estado::before { width: 15px; height: 15px; }
.info .estado.cerrado { background: rgba(255, 138, 122, .16); border-color: rgba(255, 138, 122, .55); box-shadow: none; }
.info-in { flex-wrap: wrap; row-gap: 14px; }
@media (max-width: 760px) { .idioma-btn { display: inline-flex; } .info .carrito-texto { display: inline; } .info-acciones { flex-wrap: wrap; justify-content: center; } }

/* La franja queda solo con el estado y los botones, centrados */
.info-in { justify-content: center; gap: 14px 22px; }

.info .instalar, .info .idioma-btn, .info .carrito-btn { align-items: center; justify-content: center; line-height: 1; }
.info .idioma-btn { height: 50px; width: 54px; padding: 0; }

/* Dónde estamos: dirección y celular en dos columnas resaltadas */
.donde-datos { width: 100%; }
.donde-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.dato-resaltado { display: grid; align-content: center; gap: 4px; padding: 12px 14px; border-radius: 14px; background: #fffdf8; border: 1px solid var(--linea); border-left: 6px solid var(--tomate); text-align: left; box-shadow: 0 4px 10px rgba(60, 30, 10, .08); transition: transform .25s, box-shadow .25s; }
.dato-resaltado:hover { transform: translateY(-3px); box-shadow: 0 10px 18px rgba(60, 30, 10, .16); }
.dato-resaltado small { font: 700 .8rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }
.dato-resaltado strong, .dato-resaltado a { font: 800 1.2rem/1.2 var(--display); color: var(--tomate); text-decoration: none; }
.dato-celular { border-left-color: var(--albahaca); }
.dato-celular a { font-size: 1.55rem; color: var(--albahaca); letter-spacing: .01em; }
.dato-celular a:hover { text-decoration: underline; }
@media (max-width: 520px) { .donde-cols { grid-template-columns: 1fr; } }

/* Franja de estado en tono claro (antes oscura): ya no se pierde con el fondo del banner */
.info { background: linear-gradient(180deg, #ffeacf 0%, #fbd3a2 100%); color: var(--espresso); }
.info .estado { background: rgba(47, 107, 58, .14); border: 1.5px solid rgba(47, 107, 58, .55); color: #1d5a2e; box-shadow: 0 0 0 4px rgba(47, 107, 58, .1); }
.info .estado.abierto::before { background: #2fa24f; box-shadow: 0 0 0 5px rgba(47, 167, 79, .25); animation: late-punto 1.8s infinite; }
.info .estado.cerrado { background: rgba(179, 50, 27, .12); border-color: rgba(179, 50, 27, .55); color: #8f2210; box-shadow: none; }
.info .estado.cerrado::before { background: #c8341b; box-shadow: 0 0 0 5px rgba(200, 52, 27, .2); }
@keyframes late-punto { 50% { box-shadow: 0 0 0 9px rgba(47, 167, 79, 0); } }
.info::after { opacity: .9; }

/* Botones especiales: más modernos (vidrio y brillo), con destello, onda al tocar e íconos que se mueven */
.info-acciones { gap: 12px; flex-wrap: wrap; justify-content: center; }
.info .instalar, .info .idioma-btn, .info .carrito-btn, .info .mipedido-btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 20px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .35); color: #fff; font: 800 1.05rem/1 var(--sans); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -8px 14px rgba(0, 0, 0, .18), 0 8px 18px rgba(110, 38, 6, .35); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .25s, filter .25s; }
.info .instalar::before, .info .idioma-btn::before { content: none; }
.info .carrito-btn { background: linear-gradient(135deg, #e0661f, #a63d0a 70%); min-height: 56px; padding: 0 24px; font-size: 1.15rem; }
.info .mipedido-btn { background: linear-gradient(135deg, #8f330a, #5e1f05 75%); }
.info .instalar { background: linear-gradient(135deg, #a63d0a, #6e2606 75%); }
.info .idioma-btn { background: linear-gradient(135deg, #7a2d09, #4a1904 75%); width: 56px; padding: 0; font-size: 1.05rem; letter-spacing: .04em; }
.info .carrito-btn::after, .info .mipedido-btn::after, .info .instalar::after, .info .idioma-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); transition: left .7s; pointer-events: none; }
.info .instalar.en-construccion::after { content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 8px); width: auto; bottom: auto; z-index: 5; background: #fffdf8; color: var(--quemado-oscuro); }
.info .carrito-btn:hover::after, .info .mipedido-btn:hover::after, .info .instalar:not(.en-construccion):hover::after, .info .idioma-btn:hover::after { left: 130%; }
.info .carrito-btn:hover, .info .mipedido-btn:hover, .info .instalar:hover, .info .idioma-btn:hover { transform: translateY(-4px) scale(1.04); filter: brightness(1.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -8px 14px rgba(0, 0, 0, .18), 0 14px 26px rgba(110, 38, 6, .5); }
.info .carrito-btn:active, .info .mipedido-btn:active, .info .instalar:active, .info .idioma-btn:active { transform: translateY(0) scale(.96); }
.icono-btn { display: inline-block; font-size: 1.3rem; transition: transform .3s; }
.carrito-btn:hover .icono-btn { animation: rueda-carrito .8s ease-in-out; }
.mipedido-btn:hover .icono-btn { animation: baila 1s ease-in-out infinite; }
@keyframes rueda-carrito { 0% { transform: translateX(0) rotate(0); } 40% { transform: translateX(6px) rotate(-8deg); } 100% { transform: translateX(0) rotate(0); } }
.carrito-btn.con-items { animation: brilla-carrito 2.2s ease-in-out infinite; }
@keyframes brilla-carrito { 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 7px rgba(224, 102, 31, .28), 0 12px 24px rgba(110, 38, 6, .45); } }
.info .cuenta { background: #fff; color: #8f330a; min-width: 26px; height: 26px; font-size: .9rem; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.onda { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: rgba(255, 255, 255, .6); transform: scale(0); animation: onda-toque .6s ease-out forwards; pointer-events: none; z-index: 0; }
@keyframes onda-toque { to { transform: scale(18); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .carrito-btn.con-items, .carrito-btn:hover .icono-btn, .mipedido-btn:hover .icono-btn, .info .estado.abierto::before { animation: none; } }
@media (max-width: 640px) { .info .carrito-btn, .info .mipedido-btn, .info .instalar { padding: 0 16px; min-height: 50px; } }

/* Botones especiales: naranja corporativo más quemado, plano (sin degradado) */
:root { --naranja-quemado: #c2410c; --naranja-quemado-hover: #a8370a; }
.info .instalar, .info .idioma-btn, .info .carrito-btn, .info .mipedido-btn, .menu-btn { background: var(--naranja-quemado); border: 0; box-shadow: 0 4px 10px rgba(110, 38, 6, .28); }
.info .instalar:hover, .info .idioma-btn:hover, .info .carrito-btn:hover, .info .mipedido-btn:hover, .menu-btn:hover { background: var(--naranja-quemado-hover); filter: none; box-shadow: 0 8px 18px rgba(110, 38, 6, .38); }
.info .carrito-btn.con-items { animation: brilla-carrito 2.2s ease-in-out infinite; }
@keyframes brilla-carrito { 50% { box-shadow: 0 0 0 7px rgba(194, 65, 12, .25), 0 8px 18px rgba(110, 38, 6, .35); } }
.info .carrito-btn::after, .info .mipedido-btn::after, .info .instalar::after, .info .idioma-btn::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); }
.info .cuenta { background: #fff; color: var(--naranja-quemado); }

/* Botones principales de la tienda (Instalar APP, idioma, Mi pedido y Carrito): punto focal de la página; cada uno con su icono propio en un círculo blanco que se anima al pasar el mouse */
.info .info-acciones { gap: 14px; align-items: center; }
.desplegable, .idioma { position: relative; display: inline-flex; }
.info .info-acciones .instalar, .info .info-acciones .idioma-btn, .info .info-acciones .carrito-btn, .info .info-acciones .mipedido-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: auto; height: auto; min-height: 58px; padding: 0 22px 0 11px; border-radius: 999px; font: 800 1.12rem var(--sans); letter-spacing: .01em; line-height: 1; }
.info .info-acciones .idioma-btn { padding-right: 18px; }
.ico { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--naranja-quemado); box-shadow: 0 2px 6px rgba(0, 0, 0, .22); }
.ico svg { width: 23px; height: 23px; overflow: visible; }
.ico .rueda { transform-box: fill-box; transform-origin: center; }
.instalar:hover .ico, .instalar:focus-visible .ico { animation: ico-balanceo .7s ease-in-out; }
.idioma-btn:hover .ico, .idioma-btn:focus-visible .ico { animation: ico-giro .8s ease-in-out; }
.mipedido-btn:hover .ico, .mipedido-btn:focus-visible .ico { animation: ico-salto .7s ease-out; }
.carrito-btn:hover .ico, .carrito-btn:focus-visible .ico { animation: ico-rueda .7s ease-in-out; }
@keyframes ico-balanceo { 25% { transform: rotate(-14deg) scale(1.12); } 75% { transform: rotate(14deg) scale(1.12); } }
@keyframes ico-giro { to { transform: rotate(360deg); } }
@keyframes ico-salto { 40% { transform: translateY(-7px) scale(1.12); } 70% { transform: translateY(0) scale(.96); } }
@keyframes ico-rueda { 50% { transform: translateX(5px) rotate(-8deg) scale(1.1); } }
.idioma-flecha { width: 12px; height: 8px; flex: none; transition: transform .25s; }
[aria-expanded="true"] > .idioma-flecha { transform: rotate(180deg); }
/* Menús desplegables (idioma e Instalar APP) */
.idioma-menu, .desplegable-menu { position: absolute; z-index: 70; top: calc(100% + 10px); left: 0; min-width: 200px; margin: 0; padding: 8px; list-style: none; background: #fffdf8; border: 1px solid var(--linea); border-radius: 18px; box-shadow: 0 16px 34px rgba(60, 25, 5, .28); text-align: left; white-space: nowrap; animation: menu-abre .18s ease-out; }
.idioma-menu[hidden], .desplegable-menu[hidden] { display: none; }
.idioma-menu.der, .desplegable-menu.der { left: auto; right: 0; }
.idioma-menu button, .desplegable-menu button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; color: var(--espresso); font: 700 1.05rem var(--sans); text-align: left; cursor: pointer; }
.idioma-menu button:hover, .idioma-menu button:focus-visible, .desplegable-menu button:hover, .desplegable-menu button:focus-visible { background: var(--papel); outline: none; }
.idioma-menu button[aria-checked="true"] { background: var(--crema); }
.idioma-cod { display: inline-grid; place-items: center; min-width: 40px; height: 26px; padding: 0 6px; border-radius: 8px; background: var(--naranja-quemado); color: #fff; font: 800 .8rem var(--sans); letter-spacing: .04em; }
.idioma-visto { margin-left: auto; color: var(--naranja-quemado); font-weight: 800; visibility: hidden; }
.idioma-menu button[aria-checked="true"] .idioma-visto { visibility: visible; }
.desplegable-titulo { padding: 6px 12px 8px; color: #7a5a3a; font: 800 .78rem var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.desplegable-menu button.en-construccion::after { content: "Pronto"; margin-left: auto; padding: 2px 10px; border-radius: 999px; background: var(--papel); color: #8f330a; font-size: .75rem; font-weight: 800; }
@keyframes menu-abre { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .ico, .idioma-menu, .desplegable-menu { animation: none !important; } }
@media (max-width: 640px) {
  .info .info-acciones { gap: 10px; }
  .info .info-acciones .instalar, .info .info-acciones .idioma-btn, .info .info-acciones .carrito-btn, .info .info-acciones .mipedido-btn { min-height: 52px; padding: 0 16px 0 8px; font-size: 1rem; gap: 8px; }
  .info .info-acciones .idioma-btn { padding-right: 12px; }
  .ico { width: 34px; height: 34px; }
  .ico svg { width: 21px; height: 21px; }
}

/* Todo en una sola fila: el estado y los cuatro botones juntos; en pantallas angostas, el estado arriba y los cuatro botones en una fila compacta */
.info .info-in { flex-wrap: nowrap; justify-content: center; align-items: center; gap: 16px 20px; padding-inline: 16px; }
.info .info-acciones { flex-wrap: nowrap; flex: none; }
.info .estado { flex: none; white-space: nowrap; padding: 10px 20px; font-size: 1.15rem; }
@media (max-width: 1240px) {
  .info .estado { padding: 8px 16px; font-size: 1rem; }
  .info .info-acciones { gap: 10px; }
  .info .info-acciones .instalar, .info .info-acciones .idioma-btn, .info .info-acciones .carrito-btn, .info .info-acciones .mipedido-btn { min-height: 52px; padding: 0 16px 0 8px; font-size: 1rem; gap: 8px; }
  .info .info-acciones .idioma-btn { padding-right: 12px; }
  .ico { width: 34px; height: 34px; }
  .ico svg { width: 21px; height: 21px; }
}
@media (max-width: 1060px) { .info .info-in { flex-wrap: wrap; } .info .estado { white-space: normal; text-align: center; } }
@media (max-width: 520px) {
  .info .info-in { padding-inline: 8px; }
  .info .info-acciones { gap: 6px; width: 100%; justify-content: center; }
  .info .info-acciones .instalar, .info .info-acciones .idioma-btn, .info .info-acciones .carrito-btn, .info .info-acciones .mipedido-btn { min-height: 46px; padding: 0 10px 0 5px; font-size: .84rem; gap: 5px; }
  .info .info-acciones .idioma-btn { padding-right: 8px; }
  .info .info-acciones .idioma-flecha { display: none; }
  .info .info-acciones .instalar span:not(.ico) { display: none; }
  .info .info-acciones .instalar { padding-right: 8px; }
  .info .info-acciones .instalar .idioma-flecha { display: block; width: 10px; }
  .ico { width: 30px; height: 30px; }
  .ico svg { width: 18px; height: 18px; }
  .info .carrito-btn .cuenta { min-width: 20px; height: 20px; font-size: .75rem; }
}
@media (max-width: 1060px) { .info .estado { flex: 0 1 auto; max-width: 100%; } }
@media (max-width: 520px) {
  .info .estado { padding: 8px 14px; font-size: .92rem; line-height: 1.25; }
  .info .info-acciones .instalar, .info .info-acciones .idioma-btn, .info .info-acciones .carrito-btn, .info .info-acciones .mipedido-btn { padding: 0 8px 0 4px; gap: 4px; white-space: nowrap; }
  .info .info-acciones .instalar { padding-right: 6px; }
  .info .info-acciones .instalar .idioma-flecha { display: none; }
  .ico { width: 28px; height: 28px; }
}
@media (max-width: 390px) {
  .info .info-acciones { gap: 4px; }
  .info .info-acciones .instalar, .info .info-acciones .idioma-btn, .info .info-acciones .carrito-btn, .info .info-acciones .mipedido-btn { font-size: .78rem; min-height: 44px; }
  .ico { width: 26px; height: 26px; }
  .ico svg { width: 16px; height: 16px; }
}

/* Armonía: el menú de la tienda y la franja de estado y botones comparten el centro de la página (el logo queda a la izquierda y el menú se centra de verdad, no solo en el espacio que sobra) */
@media (min-width: 1101px) {
  .barra { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); }
  .enlaces { flex: none; justify-self: center; justify-content: center; gap: 2px; }
  .enlaces a, .enlace-barra { padding: 12px clamp(7px, .72vw, 10px); font-size: clamp(.92rem, 1.3vw, 1.05rem); }
  .enlaces a::after, .enlace-barra::after { left: clamp(7px, .72vw, 10px); right: clamp(7px, .72vw, 10px); }
}
@media (min-width: 1061px) {
  .info .info-in { justify-content: center; }
}

/* Celular: las secciones en cuadrícula no pueden ser más anchas que la pantalla (las pestañas de categorías se desplazan de lado dentro de su fila) */
.seccion { grid-template-columns: minmax(0, 1fr); }
.categorias { min-width: 0; }
.categorias-chips { min-width: 0; }

/* Celulares muy angostos (320 px): ningún bloque puede ser más ancho que la pantalla; el texto largo se parte en vez de salirse */
@media (max-width: 400px) {
  main :where(div, ul, li, article, section, p, strong, em, h2, h3) { min-width: 0; overflow-wrap: break-word; }
  .categorias-chips, .categorias-chips * { overflow-wrap: normal; }
}
@media (max-width: 345px) {
  .info .info-acciones { gap: 3px; }
  .info .info-acciones .instalar, .info .info-acciones .idioma-btn, .info .info-acciones .carrito-btn, .info .info-acciones .mipedido-btn { font-size: .7rem; min-height: 40px; padding: 0 6px 0 3px; gap: 3px; }
  .ico { width: 24px; height: 24px; }
  .ico svg { width: 15px; height: 15px; }
  .info .carrito-btn .cuenta { min-width: 17px; height: 17px; font-size: .65rem; padding: 0 4px; }
}

/* Ventanas (carrito, producto, seguimiento…) en celular: el contenido nunca es más ancho que la ventana */
dialog form, dialog .dlg-cuerpo { grid-template-columns: minmax(0, 1fr); }
dialog :where(form, .dlg-cuerpo) > * { min-width: 0; }
dialog :where(h2, p, strong, label, .linea, .opcion) { overflow-wrap: break-word; }

/* Celular: el banner cabe completo (etiqueta, título y botón; la foto más angosta) y las pestañas de categorías no se parten en dos líneas, se deslizan de lado */
@media (max-width: 640px) {
  .banner { height: clamp(280px, 80vw, 340px); }
  .slide-in { grid-template-columns: minmax(0, 1fr) 33vw; gap: 12px; padding: 4px 16px 30px; }
  .slide-foto { width: 33vw; height: auto; max-height: 100%; aspect-ratio: 4 / 5; }
  .slide h1, .slide h2 { font-size: clamp(1.4rem, 6.4vw, 1.7rem); line-height: 1.05; }
  .slide .sobre { font-size: .74rem; letter-spacing: .1em; line-height: 1.3; }
  .categorias-chips .chip { flex: 0 0 auto; max-width: none; white-space: nowrap; padding-inline: 16px; }
}
@media (max-width: 640px) {
  .bono-ticket { padding-inline: 12px; }
  .bono-ticket strong { font-size: clamp(1.8rem, 8.4vw, 3rem); white-space: nowrap; overflow-wrap: normal; }
}

/* Acerca de nosotros: dos fotos referenciales (retrato y camión) junto a la historia */
.nosotros-fotos { display: grid; gap: 10px; min-width: 0; }
.nosotros-fotos .nosotros-foto img { display: block; width: 100%; height: auto; max-height: none; }
.nosotros-fotos .nosotros-foto:first-child img { width: auto; height: min(340px, 60vw); aspect-ratio: 4 / 5; margin-inline: auto; max-width: 100%; }
.nosotros-fotos .nosotros-foto-ancha img { aspect-ratio: 16 / 7; }
.nosotros-fotos .nota-foto { margin: 0; text-align: center; }

/* Menú ☰ del celular: panel compacto bajo la barra (antes ocupaba toda la pantalla) */
dialog.cajon { inset: calc(var(--alto-barra, 64px) + 4px) 10px auto auto; width: min(82vw, 300px); height: auto; max-height: calc(100dvh - var(--alto-barra, 64px) - 24px); overflow-y: auto; border-radius: 20px; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.cajon-cuerpo { min-height: 0; gap: 2px; padding: 8px 10px 12px; }
.cajon-cabecera { margin-bottom: 2px; padding-left: 6px; font-size: 1.1rem; }
.cajon-cerrar { width: 36px; height: 36px; font-size: 1.1rem; }
dialog.cajon a, .cajon button.cajon-enlace { min-height: 42px; padding: 0 10px; border-radius: 12px; font-size: 1rem; }
.cajon .cajon-principal { margin-top: 6px; }
.cajon-sep { margin: 4px 0; }
.cajon-par { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cajon-par a { justify-content: center; padding: 0 6px; }
dialog.cajon a, .cajon button.cajon-enlace { min-height: 40px; }
.cajon-par a { white-space: nowrap; gap: 6px; font-size: .95rem; padding: 0 4px; }