/* El Hangar Ofertas — app de ofertas mobile-first.
   Diseño propio: rojo El Hangar + amarillo oferta, tarjetas redondas y movimiento suave. */
:root{
  --rojo:#e8254a; --rojo-2:#ff5a3c; --rojo-osc:#b3122f; --amarillo:#ffc93c; --amarillo-2:#fff1c7;
  --tinta:#1b1726; --gris:#6c6778; --linea:#ece8f0; --fondo:#f6f3f7; --blanco:#fff; --verde:#11a35b;
  --sombra:0 2px 6px rgba(27,23,38,.06),0 10px 30px -14px rgba(27,23,38,.25);
  --ft:'Baloo 2',system-ui,sans-serif; --fb:'Nunito Sans',system-ui,sans-serif;
  --pie:calc(64px + env(safe-area-inset-bottom,0px));
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--fb);font-size:15px;line-height:1.45;padding-bottom:var(--pie);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--amarillo);outline-offset:2px;border-radius:8px}

/* ---------- Barra superior ---------- */
.top{position:sticky;top:0;z-index:30;background:linear-gradient(120deg,var(--rojo),var(--rojo-2));color:#fff;padding-top:env(safe-area-inset-top,0px);box-shadow:0 6px 20px -10px rgba(232,37,74,.7)}
.top-in{display:flex;align-items:center;gap:10px;padding:10px 16px;max-width:1100px;margin:0 auto}
.logo{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;flex:none}
.logo-ico{width:36px;height:36px;border-radius:12px;background:#fff;color:var(--rojo);display:grid;place-items:center;animation:vuelo 3.2s ease-in-out infinite}
.logo b{display:block;font-family:var(--ft);font-size:1.1rem;line-height:1}
.logo i{display:block;font-style:normal;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--amarillo);line-height:1.2}
@keyframes vuelo{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-3px) rotate(4deg)}}
.buscar{flex:1;display:flex;align-items:center;gap:8px;background:#fff;color:var(--gris);border-radius:999px;padding:0 14px;height:40px;min-width:0}
.buscar input{border:0;outline:0;font:inherit;flex:1;min-width:0;color:var(--tinta);background:transparent}
.cinta{background:var(--tinta);overflow:hidden;white-space:nowrap;font-size:.78rem;font-weight:800}
.cinta-mov{display:inline-flex;gap:36px;padding:6px 0;animation:cinta 26s linear infinite}
.cinta-mov span{display:inline-flex;align-items:center;gap:6px}
.cinta-mov span b{color:var(--amarillo)}
@keyframes cinta{to{transform:translateX(-50%)}}

/* ---------- Bloques ---------- */
main{max-width:1100px;margin:0 auto}
.vista{display:none}.vista.on{display:block;animation:entra .35s ease}
@keyframes entra{from{opacity:0;transform:translateY(8px)}}
.bloque{margin:14px 12px 0;border-radius:22px;background:var(--blanco);box-shadow:var(--sombra);overflow:clip}
.bloque:empty{display:none}
.b-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 4px}
.b-h h2{margin:0;font-family:var(--ft);font-size:1.25rem;line-height:1.1;display:flex;align-items:center;gap:8px}
.b-h small{color:var(--gris);font-weight:700}

/* Lo que viste en el video */
.video{background:linear-gradient(160deg,#2a1838,#1b1726 60%);color:#fff}
.video .b-h small{color:#cfc6dc}
.rec{width:10px;height:10px;border-radius:50%;background:var(--rojo-2);box-shadow:0 0 0 0 rgba(255,90,60,.7);animation:latido 1.4s infinite}
@keyframes latido{70%{box-shadow:0 0 0 10px rgba(255,90,60,0)}100%{box-shadow:0 0 0 0 rgba(255,90,60,0)}}
.carrusel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 16px 16px;scrollbar-width:none}
.carrusel::-webkit-scrollbar{display:none}
.vcard{flex:none;width:min(72%,260px);scroll-snap-align:start;border-radius:18px;overflow:hidden;background:#fff;color:var(--tinta);text-align:left;position:relative;transition:transform .2s}
.vcard:active{transform:scale(.97)}
.vcard .ph{aspect-ratio:4/5;background:#f2eef5;position:relative;overflow:hidden}
.vcard .ph img{width:100%;height:100%;object-fit:cover;animation:kenburns 9s ease-in-out infinite alternate}
@keyframes kenburns{to{transform:scale(1.12) translate(-3%,-2%)}}
.vcard .play{position:absolute;left:10px;top:10px;background:rgba(27,23,38,.75);color:#fff;border-radius:999px;font-size:.72rem;font-weight:800;padding:4px 10px;display:flex;gap:5px;align-items:center;backdrop-filter:blur(4px)}
.vcard .info{padding:10px 12px 12px}
.vcard .info b{display:block;font-size:.92rem;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Ofertas relámpago */
.flash{background:linear-gradient(135deg,var(--amarillo),#ffb020)}
.flash .b-h h2{color:var(--tinta)}
.reloj{display:flex;gap:4px;align-items:center;font-weight:800;font-size:.8rem}
.reloj span{background:var(--tinta);color:#fff;border-radius:7px;min-width:28px;padding:3px 5px;text-align:center;font-variant-numeric:tabular-nums}
.rayo{display:inline-block;animation:rayo 1.8s infinite}
@keyframes rayo{0%,80%,100%{transform:scale(1) rotate(0)}85%{transform:scale(1.35) rotate(-12deg)}90%{transform:scale(1.1) rotate(8deg)}}
.flash .carrusel .mini{width:136px}
.mini{flex:none;scroll-snap-align:start;background:#fff;border-radius:16px;overflow:hidden;text-align:left}
.mini .ph{aspect-ratio:1;background:#f2eef5}
.mini .ph img{width:100%;height:100%;object-fit:cover}
.mini .info{padding:8px 10px 10px}
.mini .info small{display:block;font-weight:800;color:var(--rojo);font-size:.72rem}
.barra-vende{height:6px;border-radius:9px;background:#ffe2e8;overflow:hidden;margin-top:6px}
.barra-vende i{display:block;height:100%;background:linear-gradient(90deg,var(--rojo),var(--rojo-2));border-radius:9px;transform-origin:left;animation:llena 1.2s cubic-bezier(.2,.8,.2,1) both}
@keyframes llena{from{transform:scaleX(0)}}

/* Precio */
.precio{font-family:var(--ft);font-weight:800;color:var(--rojo);font-size:1.15rem;line-height:1.1}
.precio small{font-family:var(--fb);font-size:.7rem;color:var(--gris);font-weight:700;margin-left:4px}

/* Categorías */
.chips-wrap{position:sticky;top:calc(88px + env(safe-area-inset-top,0px));z-index:10;background:var(--fondo);padding:12px 0 6px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:0 12px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;background:#fff;border-radius:999px;padding:8px 14px;font-weight:800;font-size:.85rem;box-shadow:0 1px 3px rgba(27,23,38,.08);transition:all .2s}
.chip.on{background:var(--tinta);color:#fff;transform:translateY(-1px)}

/* Cuadrícula */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:6px 12px 20px}
@media (min-width:700px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:980px){.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}
.card{background:#fff;border-radius:18px;overflow:hidden;text-align:left;box-shadow:var(--sombra);position:relative;opacity:0;transform:translateY(18px)}
.card.ve{opacity:1;transform:none;transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.card .ph{aspect-ratio:1;background:#f2eef5;position:relative;overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.card:hover .ph img{transform:scale(1.06)}
.card .info{padding:9px 11px 12px;display:grid;gap:5px}
.card .nom{font-size:.86rem;font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.fila{display:flex;align-items:center;justify-content:space-between;gap:6px}
.mas{width:34px;height:34px;border-radius:12px;background:var(--rojo);color:#fff;display:grid;place-items:center;font-size:1.4rem;font-weight:800;line-height:1;flex:none;transition:transform .15s}
.mas:active{transform:scale(.88)}
.sello{position:absolute;left:8px;top:8px;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.sello span{font-size:.68rem;font-weight:800;border-radius:8px;padding:3px 8px;color:#fff;background:var(--tinta)}
.sello .t{background:var(--amarillo);color:var(--tinta)}
.sello .f{background:var(--rojo)}
.sello .p{background:#7b3fe4}
.combo-t{font-size:.72rem;font-weight:800;color:var(--verde);background:#e5f7ee;border-radius:8px;padding:3px 7px;justify-self:start}
.cargando{text-align:center;color:var(--gris);font-weight:700;padding:30px 0}
.avion{display:inline-block;animation:despega 1.4s ease-in-out infinite}
@keyframes despega{0%{transform:translateX(-14px)}50%{transform:translateX(14px) translateY(-6px)}100%{transform:translateX(-14px)}}
.vacio{grid-column:1/-1;text-align:center;color:var(--gris);padding:30px 10px;font-weight:700}

/* ---------- Barra de abajo ---------- */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--linea);padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -6px 20px -14px rgba(27,23,38,.4)}
.nav button{display:grid;justify-items:center;gap:2px;padding:8px 0 8px;font-size:.7rem;font-weight:800;color:var(--gris)}
.nav button.on{color:var(--rojo)}
.nav button.on svg{animation:salta .4s}
@keyframes salta{40%{transform:translateY(-4px) scale(1.12)}}
.ico-carro{position:relative;display:block}
.ico-carro b{position:absolute;top:-6px;right:-10px;background:var(--rojo);color:#fff;font-size:.66rem;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px;border:2px solid #fff}
.ico-carro.pum{animation:pum .5s}
@keyframes pum{30%{transform:scale(1.35) rotate(-8deg)}60%{transform:scale(.92)}}

/* ---------- Hoja que sube (producto, carrito, compra) ---------- */
.velo{position:fixed;inset:0;background:rgba(27,23,38,.5);z-index:40;animation:aparece .25s}
@keyframes aparece{from{opacity:0}}
.hoja{position:fixed;left:0;right:0;bottom:0;z-index:41;background:#fff;border-radius:26px 26px 0 0;max-height:92dvh;overflow-y:auto;overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom,0px);animation:sube .38s cubic-bezier(.2,.9,.25,1.05)}
@media (min-width:760px){.hoja{left:50%;right:auto;width:560px;transform:translateX(-50%);bottom:24px;border-radius:26px;animation:subeC .35s ease}@keyframes subeC{from{opacity:0;transform:translate(-50%,30px)}}}
@keyframes sube{from{transform:translateY(100%)}}
.asa{width:44px;height:5px;border-radius:3px;background:var(--linea);margin:10px auto 0}
.cerrar{position:absolute;right:12px;top:12px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;box-shadow:var(--sombra);z-index:2}
.h-foto{aspect-ratio:1;max-height:46dvh;width:100%;background:#f2eef5;overflow:hidden}
.h-foto img{width:100%;height:100%;object-fit:contain}
.h-cuerpo{padding:16px 18px 20px;display:grid;gap:12px}
.h-cuerpo h3{margin:0;font-family:var(--ft);font-size:1.35rem;line-height:1.15}
.h-cuerpo .ben{margin:0;color:var(--gris);font-size:.95rem}
.garantias{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.garantias div{background:var(--fondo);border-radius:14px;padding:10px 6px;text-align:center;font-size:.72rem;font-weight:800;line-height:1.2}
.garantias div span{display:block;font-size:1.25rem;margin-bottom:2px}
.opciones{display:grid;gap:8px}
.opcion{display:flex;align-items:center;justify-content:space-between;gap:10px;border:2px solid var(--linea);border-radius:16px;padding:12px 14px;text-align:left;transition:all .2s}
.opcion.on{border-color:var(--rojo);background:#fff3f5;transform:scale(1.01)}
.opcion b{display:block}
.opcion small{color:var(--verde);font-weight:800}
.opcion .precio{font-size:1.2rem}
.cantidad{display:flex;align-items:center;justify-content:space-between;background:var(--fondo);border-radius:16px;padding:6px}
.cantidad button{width:46px;height:46px;border-radius:12px;background:#fff;font-size:1.5rem;font-weight:800;box-shadow:0 1px 3px rgba(27,23,38,.1)}
.cantidad b{font-family:var(--ft);font-size:1.4rem}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:54px;border-radius:16px;background:linear-gradient(120deg,var(--rojo),var(--rojo-2));color:#fff;font-weight:800;font-size:1.05rem;box-shadow:0 10px 24px -12px rgba(232,37,74,.9);position:relative;overflow:hidden;transition:transform .15s}
.btn:active{transform:scale(.97)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-100%);animation:brillo 2.8s infinite}
@keyframes brillo{60%,100%{transform:translateX(100%)}}
.btn[disabled]{opacity:.6;pointer-events:none}
.btn.sec{background:var(--fondo);color:var(--tinta);box-shadow:none}
.btn.sec::after{display:none}

/* Carrito */
.h-tit{padding:18px 18px 4px;font-family:var(--ft);font-size:1.4rem;margin:0}
.linea-c{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:10px 18px}
.linea-c img{width:64px;height:64px;border-radius:14px;object-fit:cover;background:#f2eef5}
.linea-c b{font-size:.88rem;line-height:1.2;display:block}
.linea-c small{color:var(--gris);font-weight:700}
.quitar{color:var(--gris);font-size:.78rem;font-weight:800;text-decoration:underline}
.resumen{margin:8px 18px;background:var(--fondo);border-radius:16px;padding:12px 14px;display:grid;gap:6px}
.resumen div{display:flex;justify-content:space-between;font-weight:700}
.resumen .tot{font-family:var(--ft);font-size:1.25rem;border-top:1px dashed #d8d1de;padding-top:8px}
.resumen .gratis{color:var(--verde)}
.pie-h{padding:10px 18px 18px;display:grid;gap:8px}

/* Formulario */
.form{padding:6px 18px 4px;display:grid;gap:12px}
.form label{display:grid;gap:5px;font-weight:800;font-size:.85rem}
.form input,.form textarea,.form select{font:inherit;font-weight:600;border:2px solid var(--linea);border-radius:14px;padding:12px 14px;background:#fff;color:var(--tinta);width:100%}
.form input:focus,.form textarea:focus,.form select:focus{outline:0;border-color:var(--rojo)}
.form .dos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.errores{margin:0 18px;background:#fff0f2;color:var(--rojo-osc);border-radius:14px;padding:10px 14px;font-weight:700;font-size:.88rem}
.errores p{margin:2px 0}
.nota-pago{margin:0 18px;background:#e5f7ee;border-radius:14px;padding:12px 14px;font-size:.88rem;font-weight:700;color:#0b6b3c;display:flex;gap:10px;align-items:center}

/* Listo */
.listo{padding:34px 22px 10px;text-align:center;display:grid;gap:10px;justify-items:center}
.check{width:92px;height:92px;border-radius:50%;background:var(--verde);display:grid;place-items:center;animation:pop .6s cubic-bezier(.2,1.4,.4,1)}
.check svg{stroke-dasharray:30;stroke-dashoffset:30;animation:traza .5s .35s forwards}
@keyframes pop{from{transform:scale(0)}}
@keyframes traza{to{stroke-dashoffset:0}}
.listo h3{margin:6px 0 0;font-family:var(--ft);font-size:1.6rem}
.listo p{margin:0;color:var(--gris)}

/* Mis pedidos */
.pedidos{padding:16px 12px;display:grid;gap:10px}
.pedidos h2{font-family:var(--ft);margin:4px 4px 0}
.ped{background:#fff;border-radius:18px;padding:14px 16px;box-shadow:var(--sombra);display:grid;gap:4px}
.ped small{color:var(--gris);font-weight:700}

/* Avisos y confeti */
.aviso{position:fixed;left:50%;bottom:calc(var(--pie) + 12px);transform:translateX(-50%);z-index:50;background:var(--tinta);color:#fff;border-radius:999px;padding:10px 18px;font-weight:800;font-size:.9rem;box-shadow:var(--sombra);animation:aviso .3s cubic-bezier(.2,1.3,.4,1);white-space:nowrap}
@keyframes aviso{from{transform:translate(-50%,20px);opacity:0}}
#confeti{position:fixed;inset:0;pointer-events:none;z-index:60;width:100%;height:100%}
.vuela{position:fixed;z-index:70;width:56px;height:56px;border-radius:14px;object-fit:cover;pointer-events:none;box-shadow:var(--sombra);transition:transform .7s cubic-bezier(.5,-.3,.7,1),opacity .7s}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.card{opacity:1;transform:none}}