:root{
  --naranja:#ff5500; --naranja2:#ff7a2f; --negro:#111; --blanco:#fff; --gris:#f4f4f4;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',Arial,sans-serif;color:var(--negro);background:var(--blanco);overflow-x:hidden}
img,video{max-width:100%;display:block}

/* ===== HEADER ===== */
header{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:10px 5%;background:rgba(17,17,17,.95);backdrop-filter:blur(8px);box-shadow:0 2px 15px rgba(0,0,0,.3)}
.logo{height:64px}
nav a{color:#fff;text-decoration:none;font-weight:700;margin-left:28px;font-size:1.05rem;letter-spacing:.5px;position:relative}
nav a::after{content:'';position:absolute;left:0;bottom:-6px;width:0;height:3px;background:var(--naranja);transition:.3s}
nav a:hover::after{width:100%}
.btn-pedido{background:var(--naranja);padding:10px 22px;border-radius:50px;color:#fff !important;font-weight:800}
.btn-pedido:hover{background:var(--naranja2)}
#menu-toggle{display:none;background:none;border:none;color:#fff;font-size:1.8rem;cursor:pointer}

/* ===== HERO ===== */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  position:relative;padding:120px 5% 60px;color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.8))}
.hero h1{font-size:clamp(2.6rem,7vw,5.2rem);text-transform:uppercase;font-weight:900;line-height:1.05;
  text-shadow:0 5px 20px rgba(0,0,0,.6)}
.hero h1 span{color:var(--naranja)}
.hero p{font-size:clamp(1.1rem,2.5vw,1.5rem);margin:18px 0 34px;font-weight:600;color:#ffe6d6}
.hero .logo-hero{width:min(320px,70vw);margin-bottom:20px;filter:drop-shadow(0 8px 25px rgba(0,0,0,.5))}
.btn-hero{display:inline-flex;align-items:center;gap:10px;background:#25D366;color:#fff;font-size:1.2rem;font-weight:800;
  padding:16px 38px;border-radius:60px;text-decoration:none;box-shadow:0 8px 25px rgba(37,211,102,.45);transition:.25s}
.btn-hero:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 12px 30px rgba(37,211,102,.6)}
.btn-hero svg{width:26px;height:26px}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:#fff;opacity:.7;font-size:2rem;animation:bounce 1.8s infinite}
@keyframes bounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,12px)}}

/* ===== PRODUCTOS ===== */
.productos{padding:90px 5%;background:var(--gris)}
.titulo-seccion{text-align:center;font-size:clamp(2rem,5vw,3.2rem);font-weight:900;text-transform:uppercase;margin-bottom:8px}
.titulo-seccion span{color:var(--naranja)}
.subtitulo{text-align:center;color:#666;margin-bottom:50px;font-size:1.1rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:30px;max-width:1300px;margin:0 auto}
.card{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 6px 22px rgba(0,0,0,.1);transition:.3s;position:relative;display:flex;flex-direction:column}
.card:hover{transform:translateY(-8px);box-shadow:0 16px 35px rgba(255,85,0,.25)}
.card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#000}
.card-media img,.card-media video{width:100%;height:100%;object-fit:cover;transition:.5s}
.card:hover .card-media img,.card:hover .card-media video{transform:scale(1.08)}
.badge-tipo{position:absolute;top:12px;right:12px;background:var(--naranja);color:#fff;font-size:.72rem;font-weight:800;
  padding:5px 12px;border-radius:20px;text-transform:uppercase;z-index:2}
.card-body{padding:20px;flex:1;display:flex;flex-direction:column}
.card-body h3{font-size:1.3rem;font-weight:800;text-transform:uppercase}
.card-body p{color:#666;margin:8px 0 14px;flex:1}
.precio{font-size:1.25rem;font-weight:900;color:var(--naranja);margin-bottom:14px}
.btn-card{display:flex;align-items:center;justify-content:center;gap:8px;background:#25D366;color:#fff;font-weight:800;
  padding:12px;border-radius:12px;text-decoration:none;transition:.25s}
.btn-card:hover{background:#1ebe5b}
.btn-card svg{width:20px;height:20px}
.sin-productos{text-align:center;color:#888;grid-column:1/-1;padding:40px;font-size:1.1rem}

/* ===== UBIQUENOS ===== */
.ubicacion{padding:90px 5%;background:var(--negro);color:#fff}
.ubic-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;max-width:1200px;margin:0 auto;align-items:stretch}
.info-item{display:flex;gap:16px;margin-bottom:28px;align-items:flex-start}
.info-icon{width:52px;height:52px;min-width:52px;background:var(--naranja);border-radius:14px;display:flex;align-items:center;justify-content:center}
.info-icon svg{width:26px;height:26px;stroke:#fff}
.info-item h4{font-size:1.05rem;color:var(--naranja2);text-transform:uppercase;margin-bottom:4px}
.info-item p{color:#ddd;font-size:1.05rem;line-height:1.5}
.mapa{border-radius:20px;overflow:hidden;min-height:420px;box-shadow:0 10px 35px rgba(255,85,0,.25);background:#222;
  display:flex;align-items:center;justify-content:center}
.mapa iframe{width:100%;height:100%;min-height:420px;border:0}
.mapa-vacio{color:#888;text-align:center;padding:30px}
.btn-ubi{display:inline-flex;align-items:center;gap:10px;background:#25D366;color:#fff;font-weight:800;padding:14px 30px;
  border-radius:50px;text-decoration:none;margin-top:6px;transition:.25s}
.btn-ubi:hover{transform:scale(1.05)}

/* ===== FOOTER / FLOTANTE ===== */
footer{background:#000;color:#888;text-align:center;padding:26px 5%;font-size:.95rem}
footer b{color:var(--naranja)}
.wa-flotante{position:fixed;bottom:24px;right:24px;z-index:200;width:62px;height:62px;background:#25D366;border-radius:50%;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.35);transition:.25s;animation:pulso 2.2s infinite}
.wa-flotante:hover{transform:scale(1.12)}
.wa-flotante svg{width:34px;height:34px;fill:#fff}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* ===== RESPONSIVE ===== */
@media(max-width:860px){
  .ubic-grid{grid-template-columns:1fr}
  nav{position:fixed;top:84px;right:-100%;width:min(300px,80vw);height:calc(100vh - 84px);background:#111;flex-direction:column;
    padding:40px 30px;transition:right .35s;box-shadow:-5px 0 25px rgba(0,0,0,.4)}
  nav.abierto{right:0}
  nav a{display:block;margin:0 0 26px;font-size:1.25rem}
  #menu-toggle{display:block}
  .logo{height:52px}
}

/* ===== CARRITO DE PEDIDOS ===== */
.card-btns{display:flex;gap:8px;margin-top:auto}
.btn-agregar{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;background:var(--naranja);color:#fff;font-weight:800;padding:12px;border:none;border-radius:12px;cursor:pointer;font-size:.9rem;transition:.25s;font-family:inherit}
.btn-agregar:hover{background:#e64a00;transform:translateY(-2px)}
.btn-agregado{background:#1c7c3d !important}
.btn-solo{width:46px;min-width:46px;display:flex;align-items:center;justify-content:center;background:#25D366;border-radius:12px;text-decoration:none;transition:.25s}
.btn-solo:hover{background:#1ebe5b}
.btn-solo svg{width:20px;height:20px;fill:#fff}
.carrito-fab{position:fixed;bottom:24px;left:24px;z-index:200;width:62px;height:62px;background:var(--naranja);border:none;border-radius:50%;font-size:1.5rem;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.35);transition:.25s;display:flex;align-items:center;justify-content:center}
.carrito-fab:hover{transform:scale(1.12)}
.carrito-count{position:absolute;top:-4px;right:-4px;background:#fff;color:var(--naranja);font-size:.8rem;font-weight:800;min-width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.3);padding:0 4px}
.carrito-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:300;opacity:0;pointer-events:none;transition:.3s}
.carrito-overlay.abierto{opacity:1;pointer-events:auto}
.carrito-drawer{position:fixed;top:0;right:0;height:100%;width:min(400px,92vw);background:#fff;z-index:301;transform:translateX(105%);transition:transform .35s;display:flex;flex-direction:column;box-shadow:-8px 0 30px rgba(0,0,0,.25)}
.carrito-drawer.abierto{transform:translateX(0)}
.carrito-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;background:var(--negro);color:#fff}
.carrito-head h3{font-size:1.2rem}
.carrito-cerrar{background:none;border:none;color:#fff;font-size:1.4rem;cursor:pointer}
.carrito-items{flex:1;overflow-y:auto;padding:10px 20px}
.carrito-vacio{color:#999;text-align:center;padding:50px 10px;font-size:1rem}
.cart-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid #eee}
.cart-item-info{flex:1;min-width:0}
.cart-item-info b{display:block;font-size:.95rem}
.cart-item-info small{color:#888}
.cart-qty{display:flex;align-items:center;gap:8px}
.cart-qty button{width:28px;height:28px;border:none;border-radius:8px;background:var(--gris);font-size:1rem;font-weight:800;cursor:pointer;transition:.2s}
.cart-qty button:hover{background:var(--naranja);color:#fff}
.cart-qty span{min-width:20px;text-align:center;font-weight:800}
.cart-remove{background:none;border:none;color:#c00;font-size:1.15rem;cursor:pointer;padding:4px}
.carrito-foot{padding:16px 20px;border-top:1px solid #eee;background:#fafafa}
.carrito-foot label{font-weight:700;font-size:.85rem}
.carrito-foot textarea{width:100%;min-height:56px;margin:6px 0 10px;padding:10px;border:1.5px solid #ddd;border-radius:9px;font-family:inherit;font-size:.9rem}
.carrito-total{font-size:1.1rem;margin-bottom:10px;display:flex;justify-content:space-between}
.btn-enviar-wa{width:100%;background:#25D366;color:#fff;border:none;padding:15px;border-radius:12px;font-size:1.05rem;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:.25s;font-family:inherit}
.btn-enviar-wa:hover{background:#1ebe5b;transform:translateY(-2px)}
.btn-vaciar{width:100%;background:none;border:none;color:#b3261e;margin-top:10px;cursor:pointer;font-size:.85rem}