/* ============================================================
   PillaT · TEMA NUEVO — capa de diseño (uxpilot) sobre estilos.css

   QUÉ HACE: cambia el ASPECTO de TODA la web (colores, tipografías,
   tarjetas, botones, héroe, ficha, carta, panel, cuenta, footer) al
   diseño nuevo, SIN tocar cómo funciona nada.

   CÓMO SE QUITA: borra en index.html la línea
     <link rel="stylesheet" href="tema-nuevo.css">
   y vuelve todo exactamente como estaba.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,800;1,900&family=Inter:wght@400;500;600;700&display=swap');

/* ============ 1. COLORES Y TIPOGRAFÍAS ============ */
:root{
  --tomate:#FF4B2B; --vivo:#FF416C; --hondo:#E0360F; --rosa:#FFE9E4;
  --disp:'Montserrat',ui-sans-serif,system-ui,Arial,sans-serif;
  --txt:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --grad:linear-gradient(135deg,#FF416C 0%,#FF4B2B 100%);
  --sombra-suave:0 10px 30px -8px rgba(0,0,0,.10);
  --sombra-fuerte:0 22px 44px -12px rgba(0,0,0,.16);
}
body{background:#fff}
h1,h2,h3,h4{letter-spacing:-.02em}

/* ============ 2. BOTONES ============ */
.cta{background:var(--grad);box-shadow:0 12px 26px -8px rgba(255,75,43,.45)}
.cta:hover{filter:brightness(1.05)}
.btn-oro{border-radius:12px}

/* ============ 3. CABECERA / NAV ============ */
header.top{background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(10px)}
.marca .nom{font-family:var(--disp);font-weight:800}
.zone,.account-link{border-radius:999px}
.cart{border-radius:12px}
.nav-link:hover,.account-link:hover{color:var(--tomate)}

/* ============ 4. HÉROE (Home) ============ */
.hero{background:#f7f8fa}
.hero-grid{align-items:center}
.hero h1{font-family:var(--disp);font-weight:900;line-height:1.03}
.hero .intro{font-size:1.1rem}
.address{border-radius:16px;box-shadow:var(--sombra-fuerte);padding:8px}
.address .cta{border-radius:12px;padding:15px 30px}
.hero-photo{border-radius:32px;position:relative;overflow:visible}
.hero-photo img{border-radius:32px}
.hero-flotante{position:absolute;z-index:3;left:-20px;bottom:-20px;background:#fff;border-radius:18px;
  padding:16px 20px;box-shadow:var(--sombra-fuerte);border:1px solid #f0f0f0}
.hero-flotante small{display:block;font-size:11px;font-weight:800;color:#9ca3af;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.hero-flotante b{font-family:var(--disp);font-size:18px;font-weight:800}
@media(max-width:900px){.hero-flotante{left:12px;bottom:12px}}

/* ============ 5. SECCIONES / TÍTULOS ============ */
.section-title h2{font-family:var(--disp);font-weight:900}
.more{color:var(--tomate)}

/* ============ 6. CATEGORÍAS ============ */
/* Igual que en la app: el icono va dentro de una pastilla de color redondeada.
   En reposo la pastilla es un tono suave del tomate; al pasar por encima o al
   elegirla, la pastilla se llena con el degradado de la marca y el icono se
   vuelve blanco. Así se ve más viva y con la misma estructura que la app. */
.categories{gap:18px}
.category{border-radius:20px;font-weight:700;
  transition:transform .2s cubic-bezier(.33,1,.68,1),box-shadow .2s,border-color .2s,background .2s}
/* La pastilla del icono. Imita las teselas de la app. */
.category svg{width:56px;height:56px;padding:14px;border-radius:18px;box-sizing:border-box;
  background:rgba(255,75,43,.10);stroke:var(--tomate);fill:none;stroke-width:1.7;
  transition:background .2s,stroke .2s,transform .2s cubic-bezier(.33,1,.68,1),box-shadow .2s}
.category:hover{transform:translateY(-4px);box-shadow:var(--sombra-suave);border-color:var(--tomate)}
.category:hover svg{background:var(--grad);stroke:#fff;transform:scale(1.06);
  box-shadow:0 10px 22px -8px rgba(255,75,43,.5)}
.category.sel{border-color:var(--tomate);background:var(--rosa);color:var(--hondo)}
.category.sel svg{background:var(--grad);stroke:#fff;
  box-shadow:0 10px 22px -8px rgba(255,75,43,.5)}

/* ============ 7. LISTADO DE COMERCIOS ============ */
.shop-grid{gap:28px}
.shop{border-radius:22px;box-shadow:var(--sombra-suave);border-color:#f0f0f0}
.shop:hover{transform:translateY(-8px);box-shadow:var(--sombra-fuerte)}
.shop-image{aspect-ratio:16/10}
.shop:hover .shop-image img{transform:scale(1.07)}
.shop:hover h3{color:var(--tomate)}
.shop h3{font-family:var(--disp);font-weight:800}
.nota{color:var(--tomate)} .nota svg{fill:var(--tomate)}
/* el distintivo "recomendado"/destacado en naranja sólido */
.chip.gold{background:var(--tomate);color:#fff} .chip.gold svg{fill:#fff}
.delivery{border-radius:999px;font-weight:700}

/* ============ 8. FICHA DEL COMERCIO (cabecera con foto de fondo) ============ */
.ficha-banda{display:block;background:transparent;border:0;box-shadow:none;border-radius:0}
.mh-hero{position:relative;aspect-ratio:16/9;width:100%;max-height:640px;margin-inline:auto;border-radius:24px;overflow:hidden;box-shadow:var(--sombra-suave);background:#2A1512}
/* La portada se sube apaisada 16:9 y se ENSEÑA 16:9: sin altura fija, que era lo que
   la recortaba y la hacía parecer ampliada.
   Ocupa TODO el ancho de la ficha (antes tenía un tope de 900 px y quedaba más
   estrecha que "Nuestra Historia" y que el botón de reservar, y se veía desigual).
   El único tope es de altura (640 px) para que en pantallas muy anchas no se
   convierta en un cartel enorme; solo ahí recorta un poco arriba y abajo. */
.mh-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Velo por defecto: oscuro SOLO abajo (donde va el nombre) y transparente
   arriba, para que la foto del local se vea. La ficha del cliente lo ajusta por
   comercio con un estilo en línea (portadaOscurecer). */
.mh-veil{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.55) 0%,rgba(0,0,0,.30) 30%,rgba(0,0,0,0) 62%)}
.mh-content{position:absolute;left:0;right:0;bottom:0;padding:32px;color:#fff;display:flex;flex-direction:column;gap:16px}
.mh-id{display:flex;align-items:center;gap:16px}
/* El logo va en una plaquita blanca con un pequeño MARGEN (aro blanco) alrededor,
   para que se despegue de la fachada y ambos se aprecien. La fachada manda (es el
   fondo grande); el logo es el sello encima. */
.mh-logo{width:76px;height:76px;border-radius:20px;background:#fff;color:var(--tomate);display:grid;place-items:center;
  font-family:var(--disp);font-weight:800;font-size:32px;box-shadow:0 10px 24px rgba(0,0,0,.34);flex:0 0 auto;
  padding:6px;box-sizing:border-box}
.mh-titulo h1{font-family:var(--disp);font-weight:900;font-size:clamp(1.8rem,3.4vw,2.6rem);color:#fff;line-height:1.05}
.mh-addr{display:flex;align-items:center;gap:8px;color:#e5e7eb;margin-top:4px;font-size:1rem}
.mh-addr svg{width:15px;height:15px;fill:var(--tomate)}
.mh-stats{display:flex;flex-wrap:wrap;gap:10px}
.mh-pill{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.25);color:#fff;font-size:.9rem;font-weight:700;padding:7px 13px;border-radius:999px}
.mh-pill svg{width:14px;height:14px;fill:#facc15}
.mh-pill.open{background:#E4F3EB;color:#0F7A58;border-color:transparent}
.mh-pill.open .dot{width:7px;height:7px;border-radius:50%;background:#0F7A58}
.mh-sobre{background:#fff;border:1px solid #f0f0f0;border-radius:18px;padding:20px 24px;margin-top:20px;
  color:#4b5563;line-height:1.6;box-shadow:var(--sombra-suave)}
.mh-sobre b{color:#111827;font-family:var(--disp)}
@media(max-width:600px){
  .mh-hero{border-radius:18px}
  .mh-logo{width:46px;height:46px;border-radius:14px;font-size:20px;padding:4px}
  .mh-content{padding:14px;gap:8px}
  .mh-id{gap:10px}
  .mh-titulo h1{font-size:1.25rem}
  .mh-addr{font-size:.8rem;margin-top:2px}
  .mh-stats{gap:6px}
  .mh-pill{font-size:.72rem;padding:4px 9px}
}

/* barra de secciones (pastillas) */
.nav-sec{gap:10px}
.nav-btn{border-radius:999px;font-weight:600;transition:.15s}
.nav-btn:hover{border-color:var(--tomate);color:var(--tomate)}
.nav-btn.sel{background:var(--grad);border-color:transparent;color:#fff}
.grupo-t{font-family:var(--disp);font-weight:800}

/* ============ 9. TARJETAS DE PLATO ============ */
.plato{border-radius:18px;transition:transform .18s,box-shadow .18s,border-color .18s}
.plato:hover{transform:translateY(-3px);box-shadow:var(--sombra-suave);border-color:#f0d9d3}
.plato img,.plato .foto-pend{border-radius:14px;overflow:hidden}
.plato h4{font-family:var(--txt);font-weight:700}
.price{font-family:var(--disp);font-weight:800;color:var(--tomate)}
/* El botón "Añadir" con el degradado de la marca, igual que en la app: nada de
   botón con solo borde. Se llena del mismo degradado que el resto de acciones. */
.btn-anadir{border-radius:12px;font-weight:700;background:var(--grad);
  border-color:transparent;color:#fff;box-shadow:0 8px 18px -8px rgba(255,75,43,.45)}
.btn-anadir:hover{border-color:transparent;color:#fff;background:var(--grad);filter:brightness(1.05)}
.btn-anadir.hecho{background:#0F7A58;border-color:#0F7A58}

/* ============ 10. FICHA DEL PLATO (panel deslizante) ============
   La ficha del plato usa el modal (#velo/#modal). Lo convertimos en un
   panel que entra por la derecha con el fondo difuminado, como el diseño. */
.velo{justify-content:flex-end;background:rgba(26,26,26,.45);backdrop-filter:blur(5px)}
@keyframes drawerIn{from{transform:translateX(40px);opacity:.4}to{transform:none;opacity:1}}
.modal{max-width:560px;width:100%;max-height:100vh;height:100%;margin:0;border-radius:0;
  box-shadow:-20px 0 60px rgba(0,0,0,.28);animation:drawerIn .32s cubic-bezier(.2,.7,.2,1);overflow-y:auto}
@media(max-width:600px){.modal{max-width:100%}}

/* ============ 11. PANEL DE PEDIDO / CARRITO ============ */
.panel{border-radius:22px;box-shadow:var(--sombra-suave)}
.panel-cab h4{font-family:var(--disp);font-weight:800}
.cuenta .f.tot{font-family:var(--disp)}
.falta{background:#FFF1CC;color:#7A4F05;border-radius:12px}
.panel .cta{border-radius:14px}

/* ============ 12. MI CUENTA / PANEL DEL USUARIO ============ */
.account{background:#f7f8fa}
.profile-card,.account-panel{border-radius:22px;box-shadow:var(--sombra-suave);border-color:#f0f0f0}
.profile-card h3,.account-panel h3{font-family:var(--disp);font-weight:800}
.member{background:var(--rosa);color:var(--hondo);border-radius:999px}
.edit-avatar{background:var(--tomate)}
.side-nav a.active{color:var(--tomate)} .side-nav a.active svg{stroke:var(--tomate)}
.card-art{border-radius:18px;background:var(--grad)}
.status{color:#0F7A58} .status .punto{background:#0F7A58}

/* ============ 13. PARA COMERCIOS (sección oscura) ============ */
.negocios{background:#1A1A1A}
.neg-cejilla{color:var(--tomate)}
.btn-oro{background:var(--grad);color:#fff} .btn-oro svg{stroke:#fff}

/* ============ 14. PIE ============ */
footer{background:#1A1A1A}
footer .marca .nom,footer h5{color:#fff}
footer a:hover{color:var(--tomate)}
.redes a:hover{background:var(--tomate);border-color:var(--tomate)}

/* ============ 15. LA APP (sección descarga) ============ */
.app-sec{background:#1A1A1A}
.app-cejilla{color:var(--tomate)}
.app-ventajas svg{stroke:var(--tomate)}

/* ============ 16. COMENTARIOS (solo positivos) ============ */
/* comentario destacado debajo de cada plato */
.cmt-plato{margin-top:12px;background:#f9fafb;border-left:4px solid var(--tomate);border-radius:12px;padding:11px 14px}
.cmt-plato .k{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;color:var(--tomate);margin-bottom:5px}
.cmt-plato .k svg{width:12px;height:12px;fill:var(--tomate)}
.cmt-plato p{margin:0;font-size:13px;color:#374151;font-style:italic;line-height:1.45}

/* Plato Estrella dentro de la tarjeta de comercio */
.estrella{margin-top:12px;padding-top:12px;border-top:1px solid #f0f0f0}
.estrella .k{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;color:var(--tomate);margin-bottom:5px}
.estrella .k svg{width:12px;height:12px;fill:var(--tomate)}
.estrella p{margin:0;font-size:12.5px;color:#4b5563;line-height:1.4}
.estrella b{color:#111827}

/* Actividad Reciente (carrusel de comentarios en la Home) */
.actividad{background:#f7f8fa}
.act-carrusel{position:relative;overflow:hidden;padding:4px}
.act-track{display:flex;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.act-page{min-width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:2px}
.act-card{background:#fff;border:1px solid #f0f0f0;border-radius:20px;padding:24px;box-shadow:var(--sombra-suave)}
.act-who{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.act-av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-family:var(--disp)}
.act-who b{display:block;font-size:14px}.act-who span{font-size:12px;color:#6b7280}
.act-stars{color:#facc15;letter-spacing:2px;margin-bottom:8px;font-size:14px}
.act-card p{margin:0;font-size:14px;color:#374151;font-style:italic;line-height:1.55}
.act-badge{display:inline-flex;align-items:center;gap:5px;margin-top:12px;font-size:10.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;color:var(--tomate);background:rgba(255,75,43,.09);padding:4px 10px;border-radius:8px}
.act-badge svg{width:11px;height:11px;fill:var(--tomate)}
.act-nav{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:26px}
.act-nav button{width:44px;height:44px;border-radius:50%;border:1px solid #f0f0f0;background:#fff;color:var(--tomate);
  font-size:19px;cursor:pointer;box-shadow:var(--sombra-suave);transition:.18s;line-height:1}
.act-nav button:hover{background:var(--grad);color:#fff;border-color:transparent;transform:translateY(-2px)}
.act-dots{display:flex;gap:8px}
.act-dots i{width:9px;height:9px;border-radius:50%;background:#d7dade;cursor:pointer;transition:.25s}
.act-dots i.on{background:var(--tomate);width:26px;border-radius:6px}
@media(max-width:900px){.act-page{grid-template-columns:1fr}}