/* Catálogo de BM Distribuciones · dirección B «Bloques de rubro» */
* { box-sizing: border-box; margin: 0 }
html { -webkit-text-size-adjust: 100% }
html, body { overflow-x: clip }
body { font-family: var(--f); color: var(--tinta); background: var(--fondo); -webkit-font-smoothing: antialiased; padding-bottom: calc(110px + env(safe-area-inset-bottom)); min-height: 100vh }
img { display: block; max-width: 100% }
button, input, select, textarea { font: inherit; color: inherit }
button { cursor: pointer; border: 0; background: none }
a { color: inherit }
.env { max-width: 1180px; margin: 0 auto; padding: 0 18px }
[hidden] { display: none !important }

/* ---------- cabecera de color (inicio) ---------- */
.cab { background: linear-gradient(160deg, var(--azul) 0%, var(--azul2) 100%); color: #fff; border-radius: 0 0 34px 34px; padding-bottom: 58px; position: relative; overflow: hidden }
.cab::after { content: ''; position: absolute; right: -60px; top: -40px; width: 240px; height: 240px; border-radius: 50%; border: 38px solid rgba(255, 255, 255, .08); pointer-events: none }
.cab .fila { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 12px; position: relative; z-index: 1 }
.chip-logo { background: #fff; border-radius: 16px; padding: 7px 12px; display: inline-flex }
.chip-logo img { height: 30px; width: auto }
.acc { display: flex; gap: 8px }
.cir { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); color: #fff; font-weight: 800; font-size: 14px; position: relative; text-decoration: none }
.cir.claro { background: var(--fondo); color: var(--tinta) }
.busca { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border-radius: 16px; background: #fff; color: #8b98a3; box-shadow: 0 1px 0 rgba(15, 37, 51, .04) }
.busca input { flex: 1; min-width: 0; border: 0; background: none; font-size: 15.5px; outline: none; color: var(--tinta) }
.busca .x { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--gris) }
.hola { position: relative; z-index: 1; padding: 18px 0 14px }
.hola small { font-size: 13px; opacity: .88; font-weight: 600; letter-spacing: .02em }
.hola h1 { font-size: 44px; margin-top: 6px }
.hola .btn-lima { margin-top: 14px }

/* tarjeta de reparto (se monta sobre la cabecera) */
.reparto { position: relative; margin-top: -38px; background: #fff; border-radius: 22px; padding: 14px 16px; display: flex; gap: 12px; align-items: center; box-shadow: 0 16px 30px -18px rgba(15, 37, 51, .4); text-decoration: none; color: inherit }
.reparto .ic { width: 46px; height: 46px; border-radius: 14px; background: var(--noche); color: var(--lima); display: grid; place-items: center; flex: none }
.reparto .ic .ico { width: 22px; height: 22px }
.reparto b { font-size: 15px; font-weight: 800; display: block }
.reparto span { font-size: 12.5px; color: var(--gris) }
.reparto .tx { flex: 1; min-width: 0 }
.barra { height: 8px; border-radius: 9px; background: var(--linea); margin-top: 8px; overflow: hidden }
.barra i { display: block; height: 100%; background: var(--lima); border-radius: 9px; transition: width .4s }
.barra.ok i { background: var(--ok) }

/* ---------- cabecera compacta (resto de las vistas) ---------- */
.top { position: sticky; top: 0; z-index: 20; background: rgba(243, 246, 248, .9); backdrop-filter: saturate(1.5) blur(14px); -webkit-backdrop-filter: saturate(1.5) blur(14px) }
.top { padding-top: env(safe-area-inset-top) }
.top .fila { display: flex; align-items: center; gap: 12px; padding: 18px 0 10px }
.top h1 { font-size: 34px; flex: 1 }
.top .busca { background: #fff; border: 1.5px solid var(--linea); height: 48px; margin-bottom: 10px }

/* ---------- secciones ---------- */
.sec { margin-top: 28px }
.sec-t { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px }
.sec-t h2 { font-size: 30px }
.sec-t p { font-size: 13px; color: var(--gris); margin-top: 4px }
.sec-t a, .lnk { font-size: 13px; font-weight: 800; color: var(--azul2); text-decoration: none; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px }
.lnk .ico { width: 16px; height: 16px }

/* ---------- botones ---------- */
.btn { height: 48px; padding: 0 20px; border-radius: 16px; font-weight: 900; font-size: 15px; text-transform: uppercase; font-stretch: 85%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; transition: transform .12s, filter .2s; white-space: nowrap }
.btn:active { transform: translateY(2px) }
.btn .ico { width: 18px; height: 18px; stroke-width: 2.6 }
.btn-lima { background: var(--lima); color: var(--noche); box-shadow: var(--canto) }
.btn-noche { background: var(--noche); color: #fff; box-shadow: var(--canto) }
.btn-azul { background: var(--azul2); color: #fff; box-shadow: var(--canto) }
.btn-borde { background: #fff; color: var(--tinta); border: 1.5px solid var(--linea) }
.btn-blanco { background: #fff; color: var(--noche); box-shadow: var(--canto) }
.btn[disabled] { opacity: .45; pointer-events: none }
.btn.ancho { width: 100% }
.btn.chico { height: 38px; padding: 0 14px; font-size: 13px; border-radius: 12px }

/* ---------- promos: bloque de color con la bolsa saliéndose ---------- */
.riel { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 66px 18px 8px; margin: -8px -18px 0; scrollbar-width: none }
.riel::-webkit-scrollbar { display: none }
.pb { --c: #2c6fc4; flex: 0 0 min(86%, 380px); scroll-snap-align: center; position: relative; background: var(--c); color: #fff; border-radius: 30px; padding: 178px 20px 20px; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; text-decoration: none }
.pb::before { content: ''; position: absolute; inset: 0; border-radius: 30px; background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .28), transparent 55%), repeating-linear-gradient(-55deg, rgba(255, 255, 255, .05) 0 14px, transparent 14px 28px); z-index: -1 }
.pb-img { position: absolute; right: 14px; top: -58px; height: 236px; width: auto; max-width: 62%; object-fit: contain; object-position: bottom right; transform: rotate(7deg); filter: drop-shadow(0 26px 24px rgba(0, 0, 0, .35)); z-index: 1; transition: transform .4s }
.pb:hover .pb-img { transform: rotate(3deg) translateY(-6px) }
.pb-marca { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .88 }
.pb h3 { font-size: 40px; margin-top: 6px }
.pb p { font-size: 14.5px; font-weight: 600; margin-top: 8px; opacity: .95; line-height: 1.25 }
.pb-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; position: relative; z-index: 2 }
.pb-pie strong { font-size: 28px; font-stretch: 80%; font-weight: 900 }
.pb-pie small { display: block; font-size: 11.5px; font-weight: 700; opacity: .85; text-transform: uppercase; letter-spacing: .06em }
.pb-pie .sinprecio { font-size: 13px; font-weight: 700; opacity: .92; max-width: 60% }
.sello { position: absolute; left: 18px; top: 22px; width: 86px; height: 86px; border-radius: 50%; background: var(--lima); color: var(--noche); display: grid; place-items: center; z-index: 2; box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .35) }
.sello svg { position: absolute; inset: 0; animation: gira 14s linear infinite }
.sello b { font-size: 22px; font-stretch: 75%; font-weight: 900; text-align: center; line-height: .9 }
@keyframes gira { to { rotate: 360deg } }
.pb.oscura .pb-marca, .pb.oscura h3, .pb.oscura p { color: var(--noche) }

/* ---------- rubros ---------- */
.rubros { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.ru { --c: #2c6fc4; position: relative; height: 128px; border-radius: 24px; background: var(--c); color: #fff; text-decoration: none; padding: 16px; overflow: hidden; display: block }
.ru span { font-size: 23px; position: relative; z-index: 1; display: block; max-width: 60% }
.ru small { position: absolute; left: 16px; bottom: 14px; font-size: 12px; font-weight: 700; opacity: .85; z-index: 1 }
.ru img { position: absolute; right: -8px; bottom: -14px; height: 118px; width: auto; max-width: 60%; object-fit: contain; object-position: bottom right; transform: rotate(-8deg); filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .3)); transition: transform .3s }
.ru:hover img { transform: rotate(-2deg) scale(1.06) }
.ru.osc { color: var(--noche) }

/* ---------- tarjetas de producto ---------- */
.grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.pc { background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 10px 24px -18px rgba(15, 37, 51, .5); display: flex; flex-direction: column; position: relative }
.pc-f { --c: #2c6fc4; height: 150px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 22%, #fff), color-mix(in srgb, var(--c) 7%, #fff)); display: grid; place-items: center; position: relative; text-decoration: none }
.pc-f img { height: 132px; width: auto; max-width: 88%; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .2)); transition: transform .3s }
.pc:hover .pc-f img { transform: translateY(-4px) rotate(-2deg) }
.pc-f em { position: absolute; left: 10px; top: 10px; font-style: normal; font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; background: var(--noche); color: var(--lima); padding: 5px 8px; border-radius: 8px; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pc-t { padding: 10px 12px 12px; display: flex; flex-direction: column; flex: 1 }
.pc-t small { font-size: 11.5px; color: var(--gris); font-weight: 800; text-transform: uppercase; letter-spacing: .05em }
.pc-t b { display: block; font-size: 15px; font-weight: 800; line-height: 1.15; margin: 2px 0 8px; text-decoration: none }
.pc-t a { text-decoration: none }
.pres { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px }
.pres button { height: 28px; padding: 0 9px; border-radius: 9px; background: var(--fondo); font-size: 12.5px; font-weight: 700; color: var(--gris) }
.pres button.on { background: var(--noche); color: #fff }
.pc-pie { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px }
.precio strong { font-size: 19px; font-stretch: 80%; font-weight: 900; display: block; line-height: 1 }
.precio span { font-size: 11.5px; color: var(--gris); font-weight: 600 }
.precio .sin { font-size: 12.5px; font-weight: 700; color: var(--azul2) }
.mas { width: 40px; height: 40px; border-radius: 13px; background: var(--noche); color: var(--lima); display: grid; place-items: center; flex: none }
.mas .ico { width: 20px; height: 20px; stroke-width: 2.6 }
.paso { display: inline-flex; align-items: center; background: var(--noche); color: #fff; border-radius: 13px; height: 40px; flex: none }
.paso button { width: 36px; height: 40px; display: grid; place-items: center; color: var(--lima) }
.paso button .ico { width: 18px; height: 18px; stroke-width: 2.6 }
.paso b { min-width: 24px; text-align: center; font-weight: 900; font-size: 15px }

/* fila de reponer */
.rail2 { display: flex; gap: 12px; overflow-x: auto; padding: 2px 18px 6px; margin: 0 -18px; scrollbar-width: none }
.rail2::-webkit-scrollbar { display: none }
.rail2 .pc { flex: 0 0 172px }

/* cinta de marcas */
.cinta { margin: 32px -18px 0; background: var(--lima); color: var(--noche); overflow: hidden; transform: rotate(-2deg); padding: 12px 0 }
.cinta div { display: flex; gap: 28px; width: max-content; animation: corre 32s linear infinite }
.cinta a { font-size: 26px; white-space: nowrap; text-decoration: none }
.cinta a::after { content: '●'; font-size: 12px; margin-left: 28px; vertical-align: middle; opacity: .5 }
@keyframes corre { to { transform: translateX(-50%) } }

/* ---------- filtros del catálogo ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 0 18px 10px; margin: 0 -18px; scrollbar-width: none }
.chips::-webkit-scrollbar { display: none }
.chip { flex: none; height: 38px; padding: 0 14px; border-radius: 12px; background: #fff; border: 1.5px solid var(--linea); font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; text-decoration: none }
.chip .pto { width: 10px; height: 10px; border-radius: 3px; background: var(--c, var(--azul2)) }
.chip.on { background: var(--c, var(--noche)); border-color: var(--c, var(--noche)); color: #fff }
.chip.on .pto { background: #fff }
.chip.on.osc { color: var(--noche) }
.chip.sub { height: 32px; font-size: 12.5px; border-radius: 10px; font-weight: 700 }
.chip.sub.on { background: var(--noche); border-color: var(--noche); color: #fff }
.resumen-filtro { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--gris); margin: 4px 0 12px }
.resumen-filtro select { border: 1.5px solid var(--linea); background: #fff; border-radius: 10px; height: 34px; padding: 0 8px; font-weight: 700; font-size: 13px }
.cab-rubro { --c: #2c6fc4; position: relative; background: var(--c); color: #fff; border-radius: 26px; padding: 20px; margin: 4px 0 16px; min-height: 120px; overflow: hidden }
.cab-rubro h2 { font-size: 38px; max-width: 62% }
.cab-rubro p { font-size: 13.5px; font-weight: 600; opacity: .9; margin-top: 6px; max-width: 60% }
.cab-rubro img { position: absolute; right: 6px; bottom: -18px; height: 140px; transform: rotate(-8deg); filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .3)) }
.cab-rubro.osc { color: var(--noche) }
.vacio { text-align: center; padding: 50px 20px; color: var(--gris) }
.vacio b { display: block; font-size: 24px; color: var(--tinta); margin-bottom: 6px }

/* ---------- hoja de producto ---------- */
.velo { position: fixed; inset: 0; background: rgba(15, 37, 51, .45); z-index: 60; opacity: 0; transition: opacity .25s }
.velo.on { opacity: 1 }
.hoja { position: fixed; z-index: 61; left: 0; right: 0; bottom: 0; max-height: 94vh; background: var(--fondo); border-radius: 30px 30px 0 0; overflow: auto; transform: translateY(100%); transition: transform .32s cubic-bezier(.2, .8, .2, 1); overscroll-behavior: contain; display: flex; flex-direction: column }
.hoja.on { transform: none }
.hoja .cerrar { position: absolute; z-index: 3; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--noche); display: grid; place-items: center; box-shadow: var(--sombra-1) }
.fi-arte { --c: #2c6fc4; background: var(--c); position: relative; padding: 26px 20px 20px; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; overflow: hidden }
.fi-arte::before { content: ''; position: absolute; inset: 0; background: radial-gradient(110% 80% at 100% 0%, rgba(255, 255, 255, .3), transparent 55%), repeating-linear-gradient(-55deg, rgba(255, 255, 255, .05) 0 14px, transparent 14px 28px) }
.fi-arte img { position: absolute; right: 8px; top: 18px; height: 250px; max-width: 58%; object-fit: contain; object-position: top right; transform: rotate(6deg); filter: drop-shadow(0 24px 22px rgba(0, 0, 0, .35)) }
.fi-arte .t { position: relative; max-width: 54% }
.fi-arte small { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .9 }
.fi-arte h2 { font-size: 36px; margin-top: 6px }
.fi-arte.osc { color: var(--noche) }
.fi-cuerpo { padding: 18px 18px 120px }
.atr { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px }
.atr span { background: #fff; border: 1.5px solid var(--linea); border-radius: 10px; padding: 6px 10px; font-size: 13px; font-weight: 700 }
.atr span i { font-style: normal; color: var(--gris); font-weight: 600 }
.fi-desc { font-size: 15px; line-height: 1.45; color: #34434e; margin-bottom: 18px }
.fi-pres { display: grid; gap: 10px }
.fp { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 18px; padding: 12px 14px; border: 2px solid transparent; text-align: left; width: 100% }
.fp.on { border-color: var(--noche) }
.fp .tx { flex: 1; min-width: 0 }
.fp b { display: block; font-size: 17px; font-weight: 900 }
.fp span { font-size: 12.5px; color: var(--gris) }
.fp .precio { text-align: right }
.aviso-promo { display: flex; gap: 10px; align-items: center; background: var(--lima); color: var(--noche); border-radius: 16px; padding: 12px 14px; margin: 14px 0; font-weight: 700; font-size: 14px }
.aviso-promo .ico { width: 22px; height: 22px }
.aviso { display: flex; gap: 10px; align-items: flex-start; background: #fff; border-radius: 16px; padding: 12px 14px; margin: 14px 0; font-size: 13.5px; color: #34434e; border: 1.5px solid var(--linea) }
.aviso .ico { color: var(--azul2); margin-top: 1px }
.aviso.mal { border-color: var(--peligro); background: var(--peligro-s) }
.aviso.mal .ico { color: var(--peligro) }
.barra-fija { position: sticky; bottom: 0; margin-top: auto; background: rgba(243, 246, 248, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--linea) }
.barra-fija .btn { flex: 1 }

/* ---------- pedido ---------- */
.lin { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; background: #fff; border-radius: 18px; padding: 10px 12px 10px 10px; margin-bottom: 10px }
.lin-f { width: 64px; height: 64px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--c, #2c6fc4) 14%, #fff) }
.lin-f img { height: 56px; width: auto; max-width: 56px; object-fit: contain }
.lin small { font-size: 11.5px; font-weight: 800; color: var(--gris); text-transform: uppercase; letter-spacing: .04em }
.lin b { display: block; font-size: 14.5px; font-weight: 800; line-height: 1.2 }
.lin .det { font-size: 12.5px; color: var(--gris); margin-top: 3px }
.lin .det .regalo { color: var(--ok); font-weight: 800 }
.lin-d { display: flex; flex-direction: column; align-items: flex-end; gap: 8px }
.lin-d strong { font-weight: 900; font-size: 16px; font-stretch: 85% }
.totales { background: #fff; border-radius: 22px; padding: 16px; margin-top: 6px }
.totales div { display: flex; justify-content: space-between; font-size: 14.5px; padding: 5px 0 }
.totales div span { color: var(--gris) }
.totales .ahorro { color: var(--ok); font-weight: 800 }
.totales .total { border-top: 1.5px dashed var(--linea); margin-top: 8px; padding-top: 12px; font-size: 22px; font-weight: 900; font-stretch: 82% }
.opciones { display: grid; gap: 8px }
.op { display: flex; gap: 12px; align-items: center; background: #fff; border: 2px solid transparent; border-radius: 16px; padding: 12px 14px; text-align: left }
.op.on { border-color: var(--noche) }
.op .ico { color: var(--azul2) }
.op b { display: block; font-size: 15px; font-weight: 800 }
.op span { font-size: 12.5px; color: var(--gris) }
.op[disabled] { opacity: .5 }
textarea.notas { width: 100%; border: 1.5px solid var(--linea); border-radius: 16px; padding: 12px 14px; min-height: 76px; resize: vertical; background: #fff; font-size: 15px }
.listo { text-align: center; padding: 30px 10px 10px }
.listo .ok { width: 92px; height: 92px; border-radius: 50%; background: var(--lima); color: var(--noche); display: grid; place-items: center; margin: 0 auto 18px; box-shadow: var(--canto) }
.listo .ok .ico { width: 46px; height: 46px; stroke-width: 2.6 }
.listo h2 { font-size: 42px }
.listo p { color: var(--gris); margin-top: 8px; font-size: 15px }

/* ---------- mi cuenta (teléfono primero; iPad parado y compu llenan la ventana sin deslizar) ---------- */
.mov { display: flex; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--linea); font-size: 14px }
.mov:last-child { border: 0 }
.mov span { color: var(--gris); font-size: 12.5px; display: block; margin-top: 2px }
.mov span .est { height: 20px; font-size: 11px; margin-right: 4px }
.mov strong { font-weight: 800; white-space: nowrap }
.mov .haber { color: var(--ok) }
.caja { background: #fff; border-radius: 22px; padding: 4px 16px }
.cu .btn.chico, .cu-hoja .btn.chico { height: 44px; border-radius: 13px }
.lnk.claro { color: #fff; min-height: 44px }
.btn-claro { background: rgba(255, 255, 255, .1); color: #fff; border: 1.5px solid rgba(255, 255, 255, .28) }
.cu-cab { background: linear-gradient(160deg, var(--azul) 0%, var(--azul2) 100%); color: #fff; border-radius: 0 0 34px 34px; padding-bottom: 58px; position: relative; overflow: hidden }
.cu-cab::after { content: ''; position: absolute; right: -70px; top: -50px; width: 240px; height: 240px; border-radius: 50%; border: 38px solid rgba(255, 255, 255, .08); pointer-events: none }
.cu-cab .fila { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 6px; position: relative; z-index: 1 }
.cu-quien { position: relative; z-index: 1 }
.cu-quien small { font-size: 12.5px; font-weight: 700; opacity: .88; letter-spacing: .02em }
.cu-quien h1 { font-size: 42px; margin-top: 4px }
.cu-datos { list-style: none; padding: 0; display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap }
.cu-datos li { background: rgba(255, 255, 255, .14); border-radius: 12px; padding: 6px 10px; font-size: 12.5px; display: flex; flex-direction: column }
.cu-datos span { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; opacity: .8 }
.cu-datos b { font-weight: 800 }
.cu-cuerpo { display: grid; gap: 14px }
.cu-tel .cu-hero { margin-top: -44px; position: relative; z-index: 2 }
.cu-in { animation: cuEntra .5s cubic-bezier(.2, .8, .2, 1) both }
.cu-col > :nth-child(2), .cu-tel .cu-cuerpo > :nth-child(2) { animation-delay: .06s }
.cu-col > :nth-child(3), .cu-tel .cu-cuerpo > :nth-child(3) { animation-delay: .12s }
@keyframes cuEntra { from { opacity: 0; transform: translateY(14px) } }

/* seguimiento grande del pedido */
.seg { background: radial-gradient(120% 90% at 100% 0%, rgba(46, 167, 222, .28), transparent 55%), var(--noche); color: #fff; border-radius: 28px; padding: 16px 18px 18px; box-shadow: 0 22px 40px -24px rgba(15, 37, 51, .8); position: relative; overflow: hidden }
.seg-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .78) }
.seg-vivo, .seg-est { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; background: rgba(176, 216, 43, .16); color: var(--lima); font-size: 11.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap }
.seg-est { background: rgba(255, 255, 255, .12); color: #fff }
.seg.repro .seg-est { background: var(--alerta-s); color: var(--alerta) }
.seg-vivo i { width: 8px; height: 8px; border-radius: 50%; background: var(--lima); animation: vivo 1.6s ease-out infinite }
@keyframes vivo { 0% { box-shadow: 0 0 0 0 rgba(176, 216, 43, .7) } 100% { box-shadow: 0 0 0 9px rgba(176, 216, 43, 0) } }
.seg h2 { font-size: 40px; margin-top: 10px }
.seg.vivo h2 { color: var(--lima) }
.seg-mid { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px }
.seg-d { font-size: 14px; color: rgba(255, 255, 255, .86); font-weight: 600 }
.seg-que { background: rgba(255, 255, 255, .07); border-radius: 14px; padding: 10px 12px; font-size: 13.5px; line-height: 1.35; color: rgba(255, 255, 255, .9) }
.seg-que b { color: var(--lima) }
.seg.repro .seg-que { background: rgba(207, 58, 46, .18) }
.seg.repro .seg-que b { color: #ffb4ab }
.seg-pie { display: flex; flex-direction: column; gap: 12px; margin-top: 14px }
.seg-fotos { display: flex; text-decoration: none; flex: none; padding-right: 8px }
.seg-fotos img, .fc-f img, .th-f img { width: 40px; height: 40px; object-fit: contain; background: #fff; border-radius: 12px; margin-right: -8px; border: 2px solid var(--noche); padding: 3px }
.seg-acc { display: flex; gap: 8px; min-width: 0 }
.seg-acc .btn { flex: 1 1 auto; min-width: 0; padding: 0 14px; font-size: 14px }
.vacio-seg h2 { color: #fff }

/* etapas: seis pasos con texto (el color nunca va solo) */
.ps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); position: relative; margin: 18px 0 12px }
.ps::before, .ps::after { content: ''; position: absolute; top: 10px; left: calc(100% / 12); height: 4px; border-radius: 4px }
.ps::before { right: calc(100% / 12); background: rgba(255, 255, 255, .16) }
.ps::after { width: calc((100% - 100% / 6) * var(--i) / 5); background: var(--lima); animation: psLlena .9s .15s cubic-bezier(.3, .8, .2, 1) both }
@keyframes psLlena { from { width: 0 } }
.ps li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0 }
.ps i { width: 24px; height: 24px; border-radius: 50%; background: var(--noche2); border: 2px solid rgba(255, 255, 255, .3); display: grid; place-items: center; color: var(--noche) }
.ps i .ico { width: 14px; height: 14px; stroke-width: 3 }
.ps { container-type: inline-size }
.ps span { font-size: 11.5px; font-weight: 800; letter-spacing: .01em; font-stretch: 75%; color: rgba(255, 255, 255, .6); line-height: 1.1; white-space: nowrap }
.ps span b { font-weight: inherit } .ps .ps-ct, .ps .ps-mn { display: none }
/* pista angosta (menos de ~64 px por etapa): «Confirm.» y «Armando», así ningún rótulo se pisa con el de al lado */
/* Abreviatura según el ancho real de la pista (sirve a cualquier tamaño). El nombre completo se oculta solo a la vista:
   el lector de pantalla lo sigue leyendo (los cortos van con aria-hidden). */
@container (max-width: 390px) {
  .ps .c1 .ps-lg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap }
  .ps .c1 .ps-ct { display: inline }
}
/* pista mínima (menos de 50 px por etapa, como el iPad acostado): letra un punto más chica, «Conf.» y «En camino» en dos renglones */
@container (max-width: 300px) {
  .ps span { font-size: 10.5px; letter-spacing: 0; white-space: normal; line-height: 1.05 }
  .ps [data-c2] .ps-ct { display: none }
  .ps [data-c2] .ps-mn { display: inline }
}
.ps small { font-size: 11px; color: rgba(255, 255, 255, .6); font-weight: 600; line-height: 1.15; max-width: 6ch }
.ps .ya i { background: var(--lima); border-color: var(--lima) }
.ps .ya span { color: #fff }
.ps .ahora i { background: var(--azul); border-color: #fff; animation: ahora 1.8s ease-out infinite }
.ps .ahora span { color: var(--lima) }
.ps .mal i { background: var(--peligro); border-color: #fff }
.ps .mal span { color: #ffb4ab }
@keyframes ahora { 0% { box-shadow: 0 0 0 0 rgba(46, 167, 222, .75) } 100% { box-shadow: 0 0 0 11px rgba(46, 167, 222, 0) } }
.ps.g i { width: 28px; height: 28px }
.ps.g::before, .ps.g::after { top: 12px }
.ps-cam { position: absolute; z-index: 2; top: -15px; left: calc(100% / 12 + (100% - 100% / 6) * (4 + var(--p)) / 5); transform: translateX(-50%); width: 30px; height: 30px; border-radius: 50%; background: var(--lima); color: var(--noche); display: grid; place-items: center; box-shadow: 0 0 0 3px var(--noche); animation: camRueda 1.2s ease-in-out infinite alternate }
.ps-cam .ico { width: 17px; height: 17px }
@keyframes camRueda { to { translate: 0 -3px } }

/* paneles */
.cu-pan { background: #fff; border-radius: 24px; padding: 14px 16px; display: flex; flex-direction: column; min-height: 0 }
.cu-h { display: flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 900; font-stretch: 75%; text-transform: uppercase; margin: 2px 0 10px }
.cu-h b { font-size: 12.5px; font-stretch: 100%; background: var(--fondo); color: var(--gris); border-radius: 99px; padding: 3px 9px }
.cu-por { font-size: 12.5px; color: var(--gris); margin: 8px 2px 10px }
.seg3 { display: flex; gap: 4px; background: var(--fondo); border-radius: 14px; padding: 4px; flex: none }
.seg3 button { flex: 1; min-height: 44px; border-radius: 11px; font-weight: 800; font-size: 13.5px; white-space: nowrap; color: var(--gris); display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 6px }
.seg3 button b { font-size: 11.5px; background: #fff; color: var(--gris); border-radius: 99px; padding: 2px 7px }
.seg3 button.on { background: var(--noche); color: #fff }
.seg3 button.on b { background: var(--lima); color: var(--noche) }
.cu-todos { margin-top: 10px; flex: none }
.pag { display: flex; flex-direction: column; min-height: 0; flex: 1 }
.pag-c { display: grid; gap: 8px; min-height: 0 }
.cu-ipad .pag-c, .cu-compu .pag-c { flex: 1; align-content: stretch }
.pag-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--gris); font-weight: 700; flex: none }
.pag-pie:not(:empty) { min-height: 44px; margin-top: 4px }
.pag-pie .lnk { min-height: 44px; padding: 0 4px }
.pag-pie .btn { margin-top: 6px }
.pag-vacio { padding: 18px 8px; text-align: center; color: var(--gris); font-size: 14px; align-self: center }

/* otros pedidos en curso */
.fc { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 10px; border-radius: 16px; background: var(--fondo); text-decoration: none; min-height: 62px; transition: background var(--dur) }
.fc:hover { background: #e9eef2 }
.fc-f { display: flex }
.fc-f img { width: 34px; height: 34px; border-color: var(--fondo); border-radius: 10px; margin-right: -12px }
.fc-t { display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.fc-1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.fc-1 b { font-size: 14.5px; font-weight: 900 }
.fc small { font-size: 12px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.fc small b { color: var(--tinta); font-weight: 800 }
.fc-1 { flex-wrap: nowrap; min-width: 0 } .fc-1 .est { height: 22px; font-size: 11.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.fc-1 b { white-space: nowrap; flex: none }
.mini { display: flex; gap: 3px }
.mini i { width: 16px; height: 5px; border-radius: 3px; background: var(--linea) }
.mini i.ya { background: var(--lima2) }
.mini i.ahora { background: var(--azul2); animation: late 1.4s ease-in-out infinite }
@keyframes late { 50% { opacity: .45 } }

/* cuenta corriente: una barra = el límite, partida en lo que debe, lo comprometido y lo disponible */
.cc { background: #fff; border-radius: 24px; padding: 16px; flex: none }
.cc-tit { display: block; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--gris) }
.cc-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 2px }
.cc-top strong { display: block; font-size: 40px; min-width: 0 }
.cc-top .btn { flex: none }
.cc-top { container-type: inline-size }
@container (max-width: 330px) { .cc-top strong { font-size: 32px } }
.cc-sub { display: block; font-size: 12.5px; color: var(--gris); margin-top: 2px }
.cc-barra { display: flex; gap: 2px; height: 16px; margin: 14px 0 12px; border-radius: 4px; overflow: hidden }
.cc-barra i { display: block; height: 100%; min-width: 6px; border-radius: 4px; flex-basis: 0; animation: ccCrece .8s .2s cubic-bezier(.3, .8, .2, 1) both; transform-origin: left }
@keyframes ccCrece { from { transform: scaleX(0) } }
.cc-barra .venc, .cc-ley .venc i { background: var(--peligro) }
.cc-barra .venc2 { background: #a52a20 } .cc-barra .venc3 { background: #6e1a14 }
.cc-barra .aldia, .cc-ley .aldia i { background: var(--azul2) }
.cc-barra .enp, .cc-ley .enp i { background: #9db1c2 }
.cc-barra .disp, .cc-ley .disp i { background: var(--lima) }
.cc-ley .ok i { background: var(--ok) }
.cc-ley { list-style: none; padding: 0; display: grid; gap: 8px }
.cc-ley li { display: grid; grid-template-columns: 12px 1fr; gap: 10px; align-items: start; font-size: 12.5px; color: var(--gris); line-height: 1.3 }
.cc-ley li i { width: 12px; height: 12px; border-radius: 4px; margin-top: 2px }
.cc-ley b { display: block; color: var(--tinta); font-size: 14px; font-weight: 800 }
.cc-ley .venc b { color: var(--peligro) }

/* para reponer y te sugerimos */
.rp { --c: #2c6fc4; display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: 'f t' 'f a'; gap: 6px 12px; align-items: center; background: var(--fondo); border-radius: 18px; padding: 10px; min-height: 0 }
.rp-f { grid-area: f; align-self: stretch; min-height: 84px; border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 24%, #fff), color-mix(in srgb, var(--c) 8%, #fff)); display: grid; place-items: center; position: relative; overflow: hidden }
.rp-f img { max-height: 78px; max-width: 74px; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .2)); transition: transform .3s }
.rp:hover .rp-f img { transform: translateY(-3px) rotate(-3deg) }
.rp-f em { position: absolute; left: 5px; top: 5px; font-style: normal; font-size: 10px; font-weight: 900; background: var(--lima); color: var(--noche); padding: 3px 6px; border-radius: 7px }
.rp-t { grid-area: t; min-width: 0; display: flex; flex-direction: column }
.rp-t small { font-size: 11px; font-weight: 800; color: var(--gris); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.rp-t b { font-size: 15px; font-weight: 800; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ritmo { position: relative; display: flex; gap: 2px; height: 8px; margin: 8px 0 5px; background: #dde4ea; border-radius: 4px }
.ritmo i, .ritmo u { display: block; height: 100%; width: var(--w); border-radius: 4px; background: var(--azul2); animation: ccCrece .8s .25s cubic-bezier(.3, .8, .2, 1) both; transform-origin: left }
.ritmo u { background: var(--peligro) }
.rp.pronto .ritmo i { background: var(--alerta) }
.ritmo s { position: absolute; left: var(--x); top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--noche); border-radius: 2px }
.rp-por { font-size: 12px; color: var(--gris); line-height: 1.3 }
.rp-a { grid-area: a; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0 }
.rp-est { font-size: 12.5px; font-weight: 900; line-height: 1.2 }
.rp.ya .rp-est { color: var(--peligro) } .rp.pronto .rp-est { color: var(--alerta) }
.rp-en { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 800; color: var(--ok) }
.rp-en .ico { width: 15px; height: 15px; stroke-width: 3 }
.rp-precio { font-size: 15px; font-weight: 900; font-stretch: 85% }
.rp-precio small { font-size: 11px; color: var(--gris); font-weight: 600; font-stretch: 100% }
.rp .paso { height: 44px } .rp .paso button { height: 44px; width: 40px }
.rp-a .btn { flex: none }

/* línea de tiempo de pedidos */
.th { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 4px; border-radius: 14px; background: linear-gradient(var(--linea), var(--linea)) 21px 0 / 2px 100% no-repeat; min-height: 64px }
.th:hover { background-color: var(--fondo) }
.th-d { display: flex; flex-direction: column; align-items: center; background: #fff; border-radius: 12px; padding: 4px 0; border: 1.5px solid var(--linea) }
.th-d b { font-size: 22px }
.th-d span { font-size: 10.5px; font-weight: 800; text-transform: uppercase; color: var(--gris) }
.th-c { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; min-width: 0 }
.th-c .est { height: 22px; font-size: 11.5px }
.th-lnk { text-decoration: none }
.th-lnk b { font-size: 14.5px; font-weight: 900 }
.th-lnk::after { content: ''; position: absolute; inset: 0; border-radius: 14px }
.th-c small { flex-basis: 100%; font-size: 12px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.th-f { display: flex; flex-basis: 100% }
.th-f img { width: 26px; height: 26px; border-radius: 7px; border-color: #fff; margin-right: -7px; padding: 2px; background: var(--fondo) }
.th-rep { position: relative; z-index: 1 }
.th.cancelado .th-c, .th.cancelado .th-d { opacity: .62 }

/* hojas: detalle del pedido y resumen */
.cu-hoja .dp-cab { background: radial-gradient(120% 90% at 100% 0%, rgba(46, 167, 222, .3), transparent 55%), var(--noche); color: #fff; padding: 22px 20px 16px }
.dp-cab small { font-size: 12px; font-weight: 700; opacity: .78; display: block; padding-right: 50px }
.dp-cab h2 { font-size: 38px; margin-top: 8px }
.dp-cab.vivo h2 { color: var(--lima) }
.dp-cab p { font-size: 14px; opacity: .88; margin-top: 6px; font-weight: 600 }
.dp-cab .cc-barra { margin-top: 16px; background: rgba(255, 255, 255, .1) }
.dp-ley { font-size: 12px !important; opacity: .8 }
.dp-cuerpo { padding: 14px 18px 24px }
.dp-cuerpo .aviso { margin-top: 0 }
.dp-cuerpo .cu-h { margin-top: 18px }
.dp-mapa { height: min(46vh, 340px); border-radius: 20px; overflow: hidden; box-shadow: var(--sombra-1) }
.dp-mapa-tx { font-size: 13px; color: var(--gris); margin: 8px 2px 0 }
.dp-hist { list-style: none; padding: 0 0 0 4px }
.dp-hist li { display: grid; grid-template-columns: 14px 1fr; gap: 12px; padding: 0 0 14px; position: relative }
.dp-hist li::before { content: ''; position: absolute; left: 6px; top: 14px; bottom: -2px; width: 2px; background: var(--linea) }
.dp-hist li:last-child::before { display: none }
.dp-hist i { width: 14px; height: 14px; border-radius: 50%; background: var(--lima2); margin-top: 2px; border: 2.5px solid #fff; box-shadow: 0 0 0 1.5px var(--lima2) }
.dp-hist li.h-no_entregado i { background: var(--peligro); box-shadow: 0 0 0 1.5px var(--peligro) }
.dp-hist li.h-cancelado i { background: var(--suave); box-shadow: 0 0 0 1.5px var(--suave) }
.dp-hist b { font-size: 14px; font-weight: 800; display: block }
.dp-hist span { font-size: 12.5px; color: var(--gris) }
.cu-hoja .barra-fija { position: sticky; bottom: 0 }

/* aviso en el inicio */
.cu-aviso { display: flex; align-items: center; gap: 12px; margin-top: 12px; background: var(--noche); color: #fff; border-radius: 20px; padding: 12px 14px; text-decoration: none; box-shadow: 0 16px 30px -20px rgba(15, 37, 51, .7) }
.cu-aviso-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px }
.cu-aviso small { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; opacity: .78 }
.cu-aviso b { font-size: 16px; font-weight: 900 }
.cu-aviso.vivo b { color: var(--lima) }
.cu-aviso .mini i { background: rgba(255, 255, 255, .2) }
.cu-aviso .mini i.ya { background: var(--lima) }
.cu-aviso .mini i.ahora { background: var(--azul) }
.cu-aviso .btn { flex: none; height: 44px }

/* iPad parado y compu: la cuenta llena la ventana, sin deslizar */
body.cu-llena { padding-bottom: 0 }
.cu-ipad, .cu-compu { height: 100vh; height: 100dvh; display: flex; flex-direction: column }
.cu-ipad .env, .cu-compu .env { max-width: 1480px; padding: 0 24px }
.cu-ipad .cu-cab, .cu-compu .cu-cab { padding-bottom: 14px; border-radius: 0 0 28px 28px; flex: none }
.cu-compu .cu-cab .env { display: flex; align-items: center; gap: 22px }
.cu-compu .cu-cab .fila { padding: 12px 0; display: contents }
.cu-compu .chip-logo { order: 0 } .cu-compu .cu-quien { order: 1; flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px } .cu-compu .lnk.claro { order: 2 }
.cu-compu .cu-quien h1 { font-size: 36px }
.cu-compu .cu-datos { margin: 0 }
.cu-ipad .cu-quien { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px }
.cu-ipad .cu-quien h1 { font-size: 38px }
.cu-ipad .cu-datos { margin: 0; flex-wrap: nowrap }
.cu-ipad .cu-cuerpo, .cu-compu .cu-cuerpo { flex: 1; min-height: 0; width: 100%; padding-top: 14px }
.cu-ipad .cu-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-bottom: 98px }
.cu-compu .cu-cuerpo { grid-template-columns: minmax(0, 1fr) 480px minmax(0, 1fr); gap: 16px; padding-bottom: 16px }
.cu-col { display: flex; flex-direction: column; gap: 14px; min-height: 0 }
.cu-compu .cu-mid { margin-bottom: 76px }   /* deja lugar a la barra flotante, que queda debajo de esta columna */
.cu-ipad .cu-hero, .cu-compu .cu-hero { flex: none }
.cu-ipad .cu-hero:only-child, .cu-compu .cu-hero:only-child { flex: 1 }
.cu-ipad .cu-pan, .cu-compu .cu-pan { flex: 1 }
.cu-ipad .pag-c > *, .cu-compu .pag-c > * { min-height: 0; overflow: hidden }
.cu-compu .seg-fotos img { width: 34px; height: 34px }
.cu-compu .seg { padding: 14px 16px 16px }
.cu-compu .seg-pie { margin-top: 12px; gap: 10px }
.cu-compu .seg h2 { font-size: 36px }
.cu-compu .rp { grid-template-columns: 76px minmax(0, 1fr) auto; grid-template-areas: 'f t a' }
.cu-compu .rp-f { min-height: 72px }
.cu-compu .rp-f img { max-height: 68px; max-width: 66px }
.cu-compu .rp-a { flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; text-align: right }
.cu-compu .rp-est { max-width: 120px }
@media (min-width: 900px) { .cu-hoja { width: 600px } }
.cu.quieto .cu-in, .cu.quieto .ps::after, .cu.quieto .cc-barra i, .cu.quieto .ritmo i, .cu.quieto .ritmo u { animation: none }
@media (prefers-reduced-motion: reduce) { .ps-cam, .seg-vivo i, .ps .ahora i, .mini i.ahora { animation: none } }

/* ---------- ingreso y alta ---------- */
.ingreso { min-height: calc(100vh - 110px); display: flex; flex-direction: column; justify-content: center; padding: 30px 0 }
.ingreso .marca { text-align: center; margin-bottom: 26px }
.ingreso .marca img { height: 64px; margin: 0 auto 16px }
.ingreso h1 { font-size: 46px; text-align: center }
.ingreso p { text-align: center; color: var(--gris); margin-top: 8px; font-size: 15px }
.codigo { display: flex; gap: 8px; justify-content: center; margin: 26px 0 16px }
.codigo input { width: 100%; max-width: 330px; height: 74px; text-align: center; font-size: 40px; font-weight: 900; font-stretch: 80%; letter-spacing: .32em; border: 2.5px solid var(--linea); border-radius: 20px; background: #fff; outline: none; font-variant-numeric: tabular-nums }
.codigo input:focus { border-color: var(--azul2) }
.demo-cods { background: #fff; border-radius: 20px; padding: 14px; margin-top: 22px; border: 1.5px dashed var(--linea) }
.demo-cods small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); margin-bottom: 8px }
.demo-cods button { display: flex; justify-content: space-between; width: 100%; padding: 10px 4px; border-bottom: 1px solid var(--linea); font-size: 14px; font-weight: 700 }
.demo-cods button:last-child { border: 0 }
.demo-cods button code { font: 900 15px/1 var(--f); letter-spacing: .12em; color: var(--azul2) }
.campo { display: block; margin-bottom: 12px }
.campo span { display: block; font-size: 13px; font-weight: 800; margin-bottom: 6px }
.campo input, .campo select { width: 100%; height: 50px; border: 1.5px solid var(--linea); border-radius: 14px; padding: 0 14px; background: #fff; font-size: 15.5px; outline: none }
.campo input:focus, .campo select:focus { border-color: var(--azul2) }
.err { color: var(--peligro); font-size: 14px; font-weight: 700; text-align: center; min-height: 20px }
.muestra { margin: 34px auto 0; text-align: center; font-size: 12px; color: #8b98a3 }
.cartel-sin { background: var(--noche); color: #fff; border-radius: 26px; padding: 20px; margin-top: 24px; display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden }
.cartel-sin h3 { font-size: 30px; max-width: 80% }
.cartel-sin p { opacity: .85; font-size: 14px }
.cartel-sin .btns { display: flex; gap: 10px; flex-wrap: wrap }

/* ---------- avisos (toast) ---------- */
.toast { position: fixed; left: 50%; top: calc(12px + env(safe-area-inset-top)); transform: translate(-50%, -20px); pointer-events: none; background: var(--noche); color: #fff; padding: 12px 16px; border-radius: 14px; font-weight: 700; font-size: 14px; z-index: 80; opacity: 0; transition: all .25s; display: flex; gap: 10px; align-items: center; max-width: calc(100% - 32px); box-shadow: var(--sombra-2) }
.toast.on { opacity: 1; transform: translate(-50%, 0) }
.toast img { width: 34px; height: 34px; object-fit: contain }
.toast.mal { background: var(--peligro) }

/* ---------- barra inferior flotante ---------- */
.nav { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(calc(100% - 28px), 460px); height: 68px; border-radius: 24px; background: var(--noche); box-shadow: 0 18px 40px -14px rgba(15, 37, 51, .7); display: grid; grid-template-columns: 1fr 1fr 84px 1fr 1fr; align-items: center; z-index: 40 }
.nv-it { display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; color: rgba(255, 255, 255, .55); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-stretch: 85%; height: 100%; justify-content: center }
.nv-it .ico { width: 22px; height: 22px }
.nv-it.on { color: var(--lima) }
.nv-pedido { justify-self: center; width: 60px; height: 60px; margin-top: -28px; border-radius: 20px; background: var(--lima); color: var(--noche); display: grid; place-items: center; position: relative; box-shadow: 0 0 0 5px var(--fondo), 0 8px 0 rgba(0, 0, 0, .15); text-decoration: none; rotate: -4deg; transition: rotate .2s }
.nv-pedido .ico { width: 26px; height: 26px; stroke-width: 2.4 }
.nv-pedido b { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; border-radius: 11px; background: #e2463b; color: #fff; font-size: 12px; font-weight: 900; display: grid; place-items: center; padding: 0 5px }
.nv-pedido.on { rotate: 0deg }
.nv-pedido.salta { animation: salta .45s }
@keyframes salta { 30% { transform: scale(1.18) rotate(6deg) } 60% { transform: scale(.95) } }

/* ---------- pantallas anchas ---------- */
@media (min-width: 900px) {
  .env { padding: 0 40px }
  .hola h1 { font-size: 64px }
  .cab .env { display: grid; grid-template-columns: 1fr 440px; column-gap: 30px; align-items: end }
  .cab .fila { grid-column: 1 / -1 }
  .cab .busca { grid-column: 2; grid-row: 2; margin-bottom: 14px }
  .hola { grid-column: 1; grid-row: 2 }
  .reparto { max-width: 560px }
  .riel { overflow: visible; display: grid; grid-template-columns: repeat(2, 1fr); gap: 76px 22px; margin: -8px 0 0; padding: 66px 0 0 }
  .pb { flex: auto }
  .pb-img { height: 250px }
  .rubros { grid-template-columns: repeat(3, 1fr) }
  .ru { height: 150px }
  .grilla { grid-template-columns: repeat(4, 1fr); gap: 16px }
  .rail2 { overflow: visible; display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0 }
  .rail2 .pc { flex: auto }
  .chips { margin: 0; padding: 0 0 10px; flex-wrap: wrap }
  .hoja { left: auto; top: 0; width: 560px; max-height: none; border-radius: 30px 0 0 30px; transform: translateX(100%) }
  .hoja.on { transform: none }
  .cols { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start }
  .cols > aside { position: sticky; top: 90px }
  .ingreso { max-width: 460px; margin: 0 auto }
}
@media (min-width: 600px) and (max-width: 899px) {
  .grilla { grid-template-columns: repeat(3, 1fr) }
  .riel .pb { flex-basis: 380px }
  .rubros { grid-template-columns: repeat(3, 1fr) }
}
@media (prefers-reduced-motion: reduce) { .sello svg, .cinta div { animation: none } }

/* ---------- entrada: las flechas lima del logo cruzan la pantalla y la cortina sube ---------- */
.intro { position: fixed; inset: 0; z-index: 100; background: linear-gradient(160deg, var(--azul), var(--azul2)); display: grid; place-items: center; overflow: hidden; transition: transform .7s cubic-bezier(.7, 0, .2, 1), border-radius .7s }
.intro.sube { transform: translateY(-100%); border-radius: 0 0 50% 50% / 0 0 80px 80px }
.intro .logo-intro { background: #fff; border-radius: 28px; padding: 18px 26px; transform: scale(.6); opacity: 0; animation: chipEntra .55s .15s cubic-bezier(.2, 1.2, .3, 1) forwards; position: relative; z-index: 2; box-shadow: 0 30px 60px -20px rgba(15, 37, 51, .45) }
.intro .logo-intro img { height: 92px; width: auto }
.intro .fl { position: absolute; left: -60%; height: 120px; filter: drop-shadow(0 12px 18px rgba(15, 37, 51, .25)); width: auto; color: var(--lima); animation: cruza 1.05s cubic-bezier(.5, 0, .2, 1) forwards; opacity: .95; z-index: 1 }
.intro .fl.f2 { top: 16%; height: 80px; animation-delay: .1s; opacity: .5 }
.intro .fl.f3 { top: 72%; height: 96px; animation-delay: .2s; opacity: .7 }
.intro .fl.f1 { top: calc(50% - 60px); animation-delay: .34s }
@keyframes chipEntra { to { transform: none; opacity: 1 } }
@keyframes cruza { 0% { transform: translateX(0) } 100% { transform: translateX(260vw) } }

/* «Tus pedidos» en compu: renglón de una línea (fecha chica, número, estado y Repetir) */
.th1 { grid-template-columns: 46px auto minmax(0, 1fr) auto; min-height: 44px; padding: 3px 2px; gap: 6px; background: none; border-bottom: 1px solid var(--linea); border-radius: 0 }
.th1:last-child { border-bottom: 0 }
.th1-d { font-size: 12px; font-weight: 800; color: var(--gris); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap }
.th1 .th-lnk b { white-space: nowrap }
.th1 .est { justify-self: start; height: 22px; font-size: 11.5px; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.th1 .th-rep { padding: 0 10px; gap: 6px }
.th1.cancelado .th-lnk, .th1.cancelado .th1-d { opacity: .62 }
.cu-hist { container: cuhist / inline-size }
@container cuhist (max-width: 300px) { .th1 .th-rep span { display: none } .th1 .th-rep { width: 40px; padding: 0; justify-content: center } }
/* resumen de cuenta: cada tramo entero, nunca «más de / 60 $0» */
.dp-ley span { white-space: nowrap }