/* Club ISIS · demo — estilos de la pantalla «Pedir» (prefijo .ti-).
   La entrada viste los beneficios del Club de marino y lima; las góndolas y las listas van en tarjetas blancas, como el folleto. */

/* ───── entrada: buscador y entrega ───── */
.ti-inicio { padding-top: 2px; }
.ti-busca { display: flex; align-items: center; gap: 10px; width: calc(100% - var(--pad) * 2); height: 50px; margin: 0 var(--pad); padding: 0 18px; border-radius: 99px; background: var(--carta); color: var(--gris); font: 500 15px/1 var(--fb); text-align: left; box-shadow: inset 0 0 0 1px var(--linea), var(--sombra); transition: transform .25s var(--resorte); }
.ti-busca:active { transform: scale(.98); }
.ti-busca svg { width: 20px; height: 20px; color: var(--azul); }
.ti-busca span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ti-entrega { display: flex; align-items: stretch; margin: 12px var(--pad) 0; overflow: hidden; }
.ti-entrega-donde { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; padding: 11px 10px 11px 12px; text-align: left; transition: background-color .2s; }
.ti-entrega-donde:active, .ti-entrega-pedidos:active { background: var(--lima-3); }
.ti-pin { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--lima); color: #fff; }
.ti-pin svg { width: 20px; height: 20px; }
.ti-entrega-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ti-entrega-txt b { font: 800 15px/1.12 var(--fd); letter-spacing: -.015em; color: var(--marino); text-wrap: balance; }
.ti-entrega-txt small { font-size: 12.5px; line-height: 1.2; color: var(--gris); }
.ti-entrega-donde > svg { width: 16px; height: 16px; color: var(--gris-2); }
.ti-entrega-pedidos { position: relative; flex: none; display: grid; justify-items: center; align-content: center; gap: 5px; width: 82px; padding: 8px 6px 7px; color: var(--azul); font: 700 11.5px/1.1 var(--fd); text-align: center; box-shadow: inset 1px 0 0 var(--linea); transition: background-color .2s; }
.ti-entrega-pedidos svg { width: 21px; height: 21px; }
.ti-globo { position: absolute; top: 9px; left: calc(50% + 7px); width: 10px; height: 10px; border-radius: 50%; background: var(--naranja); box-shadow: 0 0 0 2px var(--carta); }

/* ───── tus beneficios para esta compra ───── */
.ti-benef { position: relative; isolation: isolate; margin: 16px var(--pad) 0; padding: 18px 14px 14px; border-radius: var(--r-l); background: linear-gradient(160deg, #35506B, var(--marino) 55%, var(--tinta)); color: #fff; box-shadow: var(--sombra-l); overflow: hidden; }
.ti-benef::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(161, 206, 79, .38) 1.2px, transparent 1.4px); background-size: 12px 12px; -webkit-mask: linear-gradient(200deg, #000, transparent 46%); mask: linear-gradient(200deg, #000, transparent 46%); }
.ti-benef-cab { padding: 0 4px 14px; }
.ti-benef-marca { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ti-benef-marca .t-script { font-size: 30px; color: var(--lima); }
.ti-benef-marca .pastilla { height: 24px; font-size: 10.5px; color: rgba(255, 255, 255, .82); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .34); }
.ti-benef-cab h2 { margin-top: 6px; font: 800 clamp(22px, 6.4cqw, 26px)/1.02 var(--fd); letter-spacing: -.03em; text-wrap: balance; }
.ti-benef-cab p { margin-top: 6px; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, .74); }

.ti-fav { position: relative; display: block; width: 100%; padding: 16px 14px 14px 16px; border-radius: 20px; background: linear-gradient(140deg, var(--lima-2), var(--lima) 58%, #8CC23B); color: var(--tinta); text-align: left; overflow: hidden; box-shadow: 0 16px 26px -16px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .5); transition: transform .3s var(--resorte); }
.ti-fav:active { transform: scale(.98); }
.ti-fav::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .55) 1.2px, transparent 1.4px); background-size: 11px 11px; -webkit-mask: linear-gradient(20deg, #000, transparent 38%); mask: linear-gradient(20deg, #000, transparent 38%); }
.ti-fav-txt { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; width: 52%; min-height: 96px; }
.ti-fav .t-ceja { color: var(--verde-osc); white-space: nowrap; }
.ti-fav-pct { display: flex; align-items: flex-start; margin-top: 8px; font: 800 58px/.84 var(--fd); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.ti-fav-pct i { margin: .08em 0 0 3px; font-style: normal; font-size: .46em; letter-spacing: 0; }
.ti-fav-que { margin-top: 4px; font: 700 15.5px/1.12 var(--fd); letter-spacing: -.015em; text-wrap: balance; }
.ti-fav-cta { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 7px; height: 38px; margin-top: 14px; padding: 1px 14px 0 16px; border-radius: 99px; background: var(--tinta); color: #fff; font: 800 13.5px/1 var(--fd); box-shadow: 0 10px 18px -10px rgba(27, 40, 54, .9); }
.ti-fav-cta svg { width: 16px; height: 16px; margin-top: -1px; color: var(--lima); }
.ti-fav .ti-tope { position: relative; z-index: 2; margin-top: 14px; }
.ti-fav-nota { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 12px 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .5); color: var(--tinta); font-size: 12.5px; line-height: 1.3; animation: ti-aparece .4s var(--ease) backwards; }
.ti-fav-nota svg { width: 16px; height: 16px; color: var(--verde-osc); }
.ti-fav-nota b { font: 800 13.5px/1 var(--fd); }
.ti-salta { animation: ti-salta .6s var(--resorte); }
/* la entrada del bloque: primero el favorito, después el día y los atajos */
.entra .ti-benef > .ti-fav { animation: subir .6s var(--ease) .16s backwards; }
.entra .ti-benef > .ti-dia { animation: subir .6s var(--ease) .24s backwards; }
.entra .ti-atajo { animation: subir .55s var(--ease) .3s backwards; }
.entra .ti-atajo:nth-child(2) { animation-delay: .35s; }
.entra .ti-atajo:nth-child(3) { animation-delay: .4s; }
.entra .ti-atajo:nth-child(4) { animation-delay: .45s; }

.ti-tope { display: grid; gap: 7px; }
.ti-tope .barra { background: rgba(27, 40, 54, .16); }
.ti-tope .barra > i { background: var(--tinta); }
.ti-tope small { font-size: 12.5px; line-height: 1.3; color: var(--tinta); }
.ti-tope small b { font: 800 13.5px/1 var(--fd); }

/* abanico de fotos: tarjetitas blancas, como las del folleto */
.ti-abanico { position: absolute; top: 0; right: 0; width: 42%; height: 146px; pointer-events: none; }
.ti-abanico i { position: absolute; left: 50%; top: 50%; width: 50%; aspect-ratio: 5 / 6; border-radius: 13px; background: #fff; box-shadow: 0 14px 22px -12px rgba(27, 40, 54, .6); overflow: hidden; animation: ti-abrir .7s var(--resorte) backwards; }
.ti-abanico img { width: 100%; height: 100%; padding: 4px; object-fit: contain; }
.ti-abanico i:nth-child(1) { translate: -114% -45%; rotate: -10deg; animation-delay: .12s; }
.ti-abanico i:nth-child(2) { translate: 18% -43%; rotate: 9deg; animation-delay: .2s; }
.ti-abanico i:nth-child(3) { z-index: 2; translate: -50% -56%; rotate: -2deg; animation-delay: .28s; }
.ti-abanico.n2 i { width: 54%; }
.ti-abanico.n2 i:nth-child(1) { translate: -94% -50%; rotate: -8deg; }
.ti-abanico.n2 i:nth-child(2) { z-index: 2; translate: -10% -46%; rotate: 7deg; }
.ti-abanico.n1 i { width: 62%; translate: -50% -50%; rotate: 4deg; }
.ti-fav .ti-abanico i:last-child { animation: ti-abrir .7s var(--resorte) .28s backwards, flotar 5.5s ease-in-out 1.4s infinite; }
.ti-abanico.es-recorte i { width: 44%; aspect-ratio: 3 / 5; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.ti-abanico.es-recorte img { padding: 0; object-position: 50% 100%; filter: drop-shadow(0 10px 9px rgba(22, 34, 46, .4)); }
.ti-abanico.es-recorte i:nth-child(1) { translate: -128% -50%; rotate: -6deg; }
.ti-abanico.es-recorte i:nth-child(2) { translate: 26% -48%; rotate: 6deg; }
.ti-abanico.es-recorte i:nth-child(3) { translate: -50% -54%; rotate: 0deg; }

.ti-dia { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 12px 10px 12px 12px; border-radius: 18px; background: #fff; color: var(--tinta); text-align: left; box-shadow: 0 12px 22px -16px rgba(0, 0, 0, .7); transition: transform .3s var(--resorte); }
.ti-dia:active { transform: scale(.98); }
.ti-dia-ico { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--azul-3); color: var(--azul); }
.ti-dia-ico svg { width: 22px; height: 22px; }
.ti-dia-txt { flex: 1; min-width: 0; display: grid; gap: 4px; }
.ti-dia .t-ceja { color: var(--azul); }
.ti-dia-txt b { font: 800 16px/1.12 var(--fd); letter-spacing: -.015em; color: var(--marino); text-wrap: balance; }
.ti-dia > svg { width: 18px; height: 18px; color: var(--gris-2); }

.ti-atajos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.ti-atajo { display: grid; align-content: start; justify-items: start; gap: 3px; min-height: 104px; padding: 12px 12px 13px; border-radius: 18px; background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13); color: #fff; text-align: left; transition: transform .3s var(--resorte), background-color .2s; }
.ti-atajo:active { transform: scale(.96); background: rgba(255, 255, 255, .15); }
.ti-atajo-ico { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 7px; border-radius: 50%; background: var(--lima); color: var(--tinta); }
.ti-atajo-ico svg { width: 18px; height: 18px; }
.ti-atajo b { font: 800 15px/1.08 var(--fd); letter-spacing: -.015em; text-wrap: balance; }
.ti-atajo small { font-size: 12px; line-height: 1.25; color: rgba(255, 255, 255, .7); }
.ti-atajo.es-solo .ti-atajo-ico { background: var(--sol); }
.ti-atajo.es-stock .ti-atajo-ico { background: var(--naranja); color: #fff; }
.ti-atajo.es-oferta .ti-atajo-ico { background: var(--celeste); color: #fff; }

/* ───── carruseles de la entrada ───── */
.ti-vertodo { display: grid; align-content: center; justify-items: center; gap: 10px; width: 124px; padding: 12px; border-radius: var(--r); background: var(--lima-3); color: var(--tinta); text-align: center; box-shadow: inset 0 0 0 1.5px var(--lima-2); transition: transform .3s var(--resorte); }
.ti-vertodo:active { transform: scale(.96); }
.ti-vertodo-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--lima); }
.ti-vertodo-ico svg { width: 20px; height: 20px; }
.ti-vertodo b { font: 800 14.5px/1.1 var(--fd); }

/* ───── góndolas ───── */
.ti-gondolas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ti-gondola { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 152px; padding: 14px 12px 10px 14px; border-radius: var(--r); background: var(--carta); box-shadow: var(--sombra); text-align: left; overflow: hidden; transition: transform .3s var(--resorte); }
.ti-gondola:active { transform: scale(.97); }
.ti-gondola-cab { display: grid; gap: 10px; }
.ti-gondola-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--lima-3); color: var(--verde-osc); }
.ti-gondola-ico svg { width: 20px; height: 20px; }
.ti-gondola-txt { display: grid; gap: 2px; }
.ti-gondola-txt b { font: 800 17px/1.05 var(--fd); letter-spacing: -.02em; color: var(--marino); }
.ti-gondola-txt small { font-size: 12px; color: var(--gris); }
.ti-gondola-fotos { display: flex; justify-content: flex-end; align-items: flex-end; margin-right: -4px; }
.ti-gondola-fotos img { width: 38%; aspect-ratio: 1; object-fit: contain; margin-left: -9%; mix-blend-mode: multiply; }
.ti-gondola.es-ancha { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 116px; padding: 12px 8px 12px 14px; }
.ti-gondola.es-ancha .ti-gondola-cab { flex: none; }
.ti-gondola.es-ancha .ti-gondola-fotos { flex: 1; min-width: 0; margin-right: 0; }
.ti-gondola.es-ancha .ti-gondola-fotos img { width: 35%; margin-left: -3%; }

/* ───── ofertas del folleto y nota de envío ───── */
.ti-folleto { position: relative; margin-top: 26px; padding: 22px var(--pad) 2px; border-radius: 28px 28px 0 0; background: linear-gradient(180deg, var(--lima-3), rgba(237, 246, 218, 0) 78%); }
.ti-folleto::before { content: ""; position: absolute; inset: 0 0 auto; height: 120px; border-radius: inherit; pointer-events: none; background-image: radial-gradient(rgba(113, 179, 49, .3) 1.2px, transparent 1.4px); background-size: 12px 12px; -webkit-mask: linear-gradient(200deg, #000, transparent 42%); mask: linear-gradient(200deg, #000, transparent 42%); }
.ti-folleto > * { position: relative; }
.ti-nota { display: flex; align-items: flex-start; gap: 10px; margin: 8px var(--pad) 0; padding: 12px 14px; border-radius: var(--r); background: rgba(27, 40, 54, .05); color: var(--marino); font-size: 12.5px; line-height: 1.4; }
.ti-nota svg { width: 18px; height: 18px; margin-top: 1px; color: var(--azul); }

/* el aviso «Sin stock» va en la esquina de la foto, donde iría el «+» (en base.css queda fuera de la tarjeta) */
.vista-tienda .prod-ctl .sello { position: static; margin: 0 6px 6px 0; }

/* ───── listas: chips pegados arriba, contador, orden y grilla ───── */
.ti-pag { --ti-tope: 60px; }
.ti-chips { position: sticky; top: calc(var(--ti-tope) - 1px); z-index: 29; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px var(--pad) 10px; background: color-mix(in srgb, var(--fondo) 86%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
.ti-chips::-webkit-scrollbar { display: none; }
.ti-chips .chip { flex: none; }
.ti-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; padding: 2px var(--pad) 0; margin-bottom: 12px; }
.ti-cuenta { font: 700 13px/1.2 var(--fd); color: var(--gris); padding-top: 1px; }
.ti-orden { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 1px 10px 0 12px; border-radius: 99px; background: var(--carta); color: var(--marino); font: 700 13px/1 var(--fd); box-shadow: inset 0 0 0 1px var(--linea); transition: transform .25s var(--resorte); }
.ti-orden:active { transform: scale(.95); }
.ti-orden svg { width: 15px; height: 15px; color: var(--azul); }
.ti-orden svg:last-child { width: 14px; height: 14px; color: var(--gris-2); }
.ti-grilla { padding: 0 var(--pad); }
.ti-filas { display: grid; gap: 10px; padding: 0 var(--pad); }
.ti-mas { display: grid; place-items: center; min-height: 1px; padding: 18px var(--pad) 4px; }
.ti-mas:empty { padding: 0; }
.ti-fin { display: inline-flex; align-items: center; gap: 7px; font: 700 12.5px/1 var(--fd); color: var(--gris-2); }
.ti-fin svg { width: 14px; height: 14px; color: var(--verde); }

.ti-entra [data-ti="hero"] { animation: subir .6s var(--ease) backwards; }
.ti-entra [data-ti="grilla"] > * { animation: subir .5s var(--ease) backwards; }
.ti-entra [data-ti="grilla"] > :nth-child(1) { animation-delay: .06s; }
.ti-entra [data-ti="grilla"] > :nth-child(2) { animation-delay: .1s; }
.ti-entra [data-ti="grilla"] > :nth-child(3) { animation-delay: .14s; }
.ti-entra [data-ti="grilla"] > :nth-child(4) { animation-delay: .18s; }
.ti-entra [data-ti="grilla"] > :nth-child(5) { animation-delay: .22s; }
.ti-entra [data-ti="grilla"] > :nth-child(n+6) { animation-delay: .26s; }
.ti-nuevo { animation: ti-aparece .45s var(--ease) backwards; }
.ti-cambia { animation: ti-aparece .35s var(--ease); }

/* franja de beneficio sobre la lista */
.ti-franja { display: flex; align-items: center; gap: 12px; width: calc(100% - var(--pad) * 2); margin: 2px var(--pad) 12px; padding: 11px 10px 11px 12px; border-radius: var(--r); background: linear-gradient(120deg, var(--lima-3), #fff); box-shadow: inset 0 0 0 1.5px var(--lima), var(--sombra); text-align: left; transition: transform .3s var(--resorte); }
.ti-franja:active { transform: scale(.98); }
.ti-franja-ico { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--lima); color: var(--tinta); }
.ti-franja-ico svg { width: 20px; height: 20px; }
.ti-franja-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ti-franja-txt b { font: 800 14.5px/1.15 var(--fd); letter-spacing: -.01em; color: var(--tinta); text-wrap: balance; }
.ti-franja-txt small { font-size: 12px; line-height: 1.3; color: var(--marino); }
.ti-franja > svg { width: 17px; height: 17px; color: var(--verde-osc); }
.ti-franja.es-fav { background: linear-gradient(120deg, var(--lima-2), var(--lima)); box-shadow: var(--sombra); }
.ti-franja.es-fav .ti-franja-ico { background: var(--tinta); color: var(--lima); }
.ti-franja.es-fav > svg { color: var(--tinta); }
.ti-franja.es-dia { background: linear-gradient(120deg, var(--azul-3), #fff); box-shadow: inset 0 0 0 1.5px rgba(0, 133, 190, .35), var(--sombra); }
.ti-franja.es-dia .ti-franja-ico { background: var(--azul); color: #fff; }
.ti-franja.es-dia > svg { color: var(--azul); }

/* hoja de orden */
.ti-ordenes { display: grid; gap: 10px; }
.ti-orden-op { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 14px 13px 16px; border-radius: var(--r); background: var(--carta); box-shadow: var(--sombra); text-align: left; transition: transform .25s var(--resorte), box-shadow .25s; }
.ti-orden-op:active { transform: scale(.98); }
.ti-orden-op > span { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ti-orden-op b { font: 800 16px/1.15 var(--fd); color: var(--marino); }
.ti-orden-op small { font-size: 12.5px; color: var(--gris); }
.ti-orden-op i { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--linea); color: var(--tinta); }
.ti-orden-op i svg { width: 15px; height: 15px; }
.ti-orden-op.activo { box-shadow: inset 0 0 0 2px var(--lima), var(--sombra); }
.ti-orden-op.activo i { background: var(--lima); box-shadow: none; }

/* ───── cabeceras de las listas con beneficio ───── */
.ti-hero { position: relative; isolation: isolate; margin: 2px var(--pad) 14px; padding: 20px 18px 18px; border-radius: var(--r-l); background: linear-gradient(160deg, #35506B, var(--marino) 55%, var(--tinta)); color: #fff; box-shadow: var(--sombra-l); overflow: hidden; }
.ti-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .4) 1.2px, transparent 1.4px); background-size: 12px 12px; -webkit-mask: linear-gradient(200deg, #000, transparent 46%); mask: linear-gradient(200deg, #000, transparent 46%); }
.ti-hero-txt { position: relative; z-index: 2; display: grid; justify-items: start; align-content: start; gap: 8px; }
.ti-hero.con-fotos .ti-hero-txt { width: 56%; min-height: 98px; }
.ti-hero .ti-abanico { height: 136px; }
.ti-hero-bajo { position: relative; z-index: 2; display: grid; justify-items: start; gap: 12px; margin-top: 12px; }
.ti-hero .t-ceja { color: inherit; opacity: .82; white-space: nowrap; }
.ti-hero h2 { font: 800 clamp(26px, 7.8cqw, 32px)/.98 var(--fd); letter-spacing: -.035em; text-wrap: balance; }
.ti-hero p { font-size: 13.5px; line-height: 1.38; opacity: .92; text-wrap: pretty; }
.ti-hero p b { font: 800 1.1em/1 var(--fd); }
.ti-hero .pastilla { font-size: 11px; letter-spacing: .08em; white-space: nowrap; }
.ti-pct { display: flex; align-items: flex-start; font: 800 46px/.86 var(--fd); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.ti-pct i { margin: .08em 0 0 3px; font-style: normal; font-size: .46em; letter-spacing: 0; }
.ti-hero-pie { justify-self: stretch; display: grid; gap: 10px; }
.ti-hero-botones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ti-hero-botones .btn { padding-inline: 8px; }
.ti-hero-nota { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: .8; }
.ti-hero-nota svg { width: 14px; height: 14px; }
.ti-hero-reloj { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 5px 13px 4px 9px; border-radius: 99px; background: rgba(255, 255, 255, .18); font: 600 12px/1.2 var(--fb); }
.ti-hero-reloj svg { width: 14px; height: 14px; }
.ti-hero-reloj b { font: 800 12.5px/1 var(--fd); font-variant-numeric: tabular-nums; }
.ti-hero-desde { font-size: 13px; }
.ti-hero-desde b { font: 800 16px/1 var(--fd); }
.ti-hero-link { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 5px 12px 4px 14px; border-radius: 99px; background: var(--azul); color: #fff; font: 800 13px/1.15 var(--fd); text-align: left; }
.ti-hero-link svg { width: 15px; height: 15px; }

.ti-hero.es-oferta { padding-bottom: 42px; background: linear-gradient(150deg, var(--celeste), var(--azul) 58%, #006A99); }
.ti-hero.es-oferta::after { content: ""; position: absolute; left: -12%; right: -12%; bottom: -46px; z-index: -1; height: 74px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: linear-gradient(90deg, var(--lima), var(--verde)); rotate: -2.5deg; }
.ti-hero.es-club .t-ceja { color: var(--lima); opacity: 1; }
.ti-hero.es-club::before { background-image: radial-gradient(rgba(161, 206, 79, .4) 1.2px, transparent 1.4px); }
.ti-hero.es-club .pastilla { color: var(--lima); }
.ti-hero.es-solo { background: linear-gradient(160deg, #2A3E53, var(--tinta) 62%, #121C27); }
.ti-hero.es-solo .t-ceja { color: var(--sol); opacity: 1; }
.ti-hero.es-solo::before { background-image: radial-gradient(rgba(255, 201, 60, .4) 1.2px, transparent 1.4px); }
.ti-hero.es-stock { background: linear-gradient(150deg, #FF8E42, var(--naranja) 58%, #D4500A); }
.ti-hero.es-dia { background: linear-gradient(150deg, #19ABE4, var(--azul) 62%, #00709F); }
.ti-hero.es-espera { background: var(--carta); color: var(--tinta); box-shadow: var(--sombra); }
.ti-hero.es-espera::before { background-image: radial-gradient(rgba(0, 133, 190, .22) 1.2px, transparent 1.4px); }
.ti-hero.es-espera .t-ceja { color: var(--azul); opacity: 1; }
.ti-hero.es-espera h2 { color: var(--marino); }
.ti-hero.es-espera p { color: var(--marino); }
.ti-hero.es-fav { background: linear-gradient(140deg, var(--lima-2), var(--lima) 58%, #8CC23B); color: var(--tinta); }
.ti-hero.es-fav .t-ceja { color: var(--verde-osc); opacity: 1; }
.ti-hero.es-fav::before { background-image: radial-gradient(rgba(255, 255, 255, .6) 1.2px, transparent 1.4px); }
.ti-hero.es-otro { background: linear-gradient(140deg, #fff, var(--lima-3)); box-shadow: inset 0 0 0 1.5px var(--lima), var(--sombra); }
.ti-hero.es-otro::before { background-image: radial-gradient(rgba(113, 179, 49, .3) 1.2px, transparent 1.4px); }

/* ───── Solo Club: combos en tarjetas grandes ───── */
.ti-combos { display: grid; gap: 14px; padding: 0 var(--pad); }
.ti-combo { background: var(--carta); border-radius: var(--r-l); box-shadow: var(--sombra); overflow: hidden; transition: transform .3s var(--ease); }
.ti-combo:active { transform: scale(.985); }
.ti-combo-foto { position: relative; isolation: isolate; height: 176px; background: radial-gradient(120% 110% at 50% 0, var(--lima-3), #fff 72%); }
.ti-combo-foto img { position: absolute; left: 50%; top: 52%; height: 86%; width: auto; aspect-ratio: 1; object-fit: contain; translate: -50% -50%; mix-blend-mode: multiply; }
.ti-combo-foto.n2 img:nth-child(1) { translate: -84% -50%; rotate: -6deg; }
.ti-combo-foto.n2 img:nth-child(2) { translate: -16% -50%; rotate: 6deg; }
.ti-combo-foto.n3 img:nth-child(1) { translate: -112% -48%; rotate: -9deg; }
.ti-combo-foto.n3 img:nth-child(2) { z-index: 2; translate: -50% -52%; }
.ti-combo-foto.n3 img:nth-child(3) { translate: 12% -48%; rotate: 9deg; }
.ti-combo-foto .sello { position: absolute; top: 12px; left: 12px; z-index: 3; height: 24px; padding: 1px 11px 0 9px; font-size: 11px; }
.ti-combo-foto .ti-combo-ahorro { left: auto; right: 12px; padding-left: 11px; }
.ti-combo-cuerpo { padding: 14px 16px 16px; }
.ti-combo-cuerpo .t-mut { margin-top: 3px; font-size: 13.5px; }
.ti-combo-incluye { display: grid; gap: 6px; margin-top: 12px; font-size: 13px; line-height: 1.3; color: var(--tinta); }
.ti-combo-incluye li { display: flex; align-items: flex-start; gap: 8px; }
.ti-combo-incluye svg { width: 14px; height: 14px; margin-top: 2px; color: var(--verde); }
.ti-combo-cupo { display: grid; gap: 6px; margin-top: 14px; font-size: 12.5px; color: var(--gris); }
.ti-combo-cupo b { color: var(--tinta); }
.ti-combo-pie { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 14px; min-height: 44px; }
.ti-combo-pie .precio { font-size: 32px; }
.ti-combo-pie .precio-antes { font-size: 13.5px; }
.ti-combo-pie .mas { width: 44px; height: 44px; }
.ti-combo-pie .paso { height: 44px; }
.ti-combo-pie .paso button { width: 40px; height: 44px; }
.ti-combo.agotado .ti-combo-foto img { opacity: .35; filter: grayscale(1); }

/* ───── liquidación: la tarjeta de siempre con lo que queda ───── */
.ti-liq { display: flex; flex-direction: column; min-width: 0; border-radius: var(--r); background: var(--carta); box-shadow: var(--sombra); overflow: hidden; }
.ti-liq .prod { flex: 1; border-radius: 0; background: none; box-shadow: none; }
.ti-quedan { display: grid; gap: 6px; padding: 9px 10px 10px; background: var(--naranja-3); color: #8A3B0C; font: 600 11.5px/1.2 var(--fb); }
.ti-quedan p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ti-quedan b { font: 800 12.5px/1 var(--fd); }
.ti-quedan svg { display: inline-block; width: 13px; height: 13px; margin: -2px 4px 0 0; vertical-align: middle; color: var(--naranja); }
.ti-quedan .barra { height: 6px; background: rgba(242, 107, 29, .2); }

/* ───── buscador ───── */
.ti-tope-busca { gap: 4px; }
.ti-campo { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 6px 0 14px; border-radius: 99px; background: var(--carta); box-shadow: inset 0 0 0 1px var(--linea), var(--sombra); transition: box-shadow .2s; }
.ti-campo:focus-within { box-shadow: inset 0 0 0 2px var(--azul), var(--sombra); }
.ti-campo > svg { width: 19px; height: 19px; color: var(--azul); }
.ti-campo input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; outline: 0; background: none; color: var(--tinta); font: 500 16px/1.2 var(--fb); -webkit-appearance: none; appearance: none; }
.ti-campo input:focus-visible { outline: 0; }
.ti-campo input::placeholder { color: var(--gris-2); }
.ti-campo input::-webkit-search-cancel-button, .ti-campo input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.ti-campo-x { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: rgba(27, 40, 54, .08); color: var(--marino); }
.ti-campo-x svg { width: 15px; height: 15px; }
.ti-busq { padding-top: 6px; }
.ti-busq-cuenta { display: block; margin: 2px var(--pad) 12px; overflow-wrap: anywhere; }
.ti-bloque { padding: 14px var(--pad) 0; animation: subir .5s var(--ease) backwards; }
.ti-bloque:nth-child(2) { animation-delay: .06s; }
.ti-bloque:nth-child(3) { animation-delay: .12s; }
.ti-bloque > .t-ceja { display: block; margin-bottom: 10px; }
.ti-sug { display: flex; flex-wrap: wrap; gap: 8px; }
.ti-sug .chip svg { color: var(--azul); }
.ti-hab { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ti-hab-item { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px 8px 8px; border-radius: var(--r); background: var(--carta); box-shadow: var(--sombra); text-align: left; transition: transform .3s var(--resorte); }
.ti-hab-item:active { transform: scale(.97); }
.ti-hab-item img { width: 46px; height: 46px; flex: none; object-fit: contain; }
.ti-hab-item span { min-width: 0; display: grid; gap: 1px; }
.ti-hab-item b { font: 800 14px/1.1 var(--fd); letter-spacing: -.01em; color: var(--marino); }
.ti-hab-item small { font-size: 11.5px; color: var(--gris); }
.ti-sin { display: grid; justify-items: center; gap: 10px; padding: 34px 26px 0; text-align: center; animation: subir .5s var(--ease) backwards; }
.ti-sin-ico { position: relative; display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 6px; border-radius: 50%; background: var(--lima-3); color: var(--verde-osc); box-shadow: inset 0 0 0 1.5px var(--lima-2); }
.ti-sin-ico svg { width: 34px; height: 34px; }
.ti-sin .t-titulo { max-width: 100%; overflow-wrap: anywhere; text-wrap: balance; }
.ti-sin .t-mut { max-width: 32ch; font-size: 13.5px; }
.ti-sin .ti-sug { justify-content: center; margin: 6px 0 10px; }
.ti-sin .enlace svg { width: 16px; height: 16px; }

@keyframes ti-abrir { from { translate: -50% -34%; rotate: 0deg; scale: .7; opacity: 0; } }
@keyframes ti-aparece { from { opacity: 0; transform: translateY(8px); } }
@keyframes ti-salta { 40% { transform: scale(1.035); } }