/*
 * DISEÑO «PillaT – Base Website» (27/09/2026)
 * --------------------------------------------
 * Copia el aspecto del diseño aprobado para el INICIO de appillat.com:
 *   cabecera · héroe · NOVEDADES LOCALES · ELIGE LO QUE TE APETEZCA ·
 *   PRODUCTOS RECOMENDADOS (2 líneas) · LUGARES RECOMENDADOS (2 líneas) ·
 *   la app · para comercios · pie.
 *
 * Solo aspecto. Los datos son los reales (comercios, platos y estados de la
 * zona); no hay nada inventado. La búsqueda, Pilli y el panel del comercio no
 * se tocan. Para volver al aspecto anterior, basta con quitar la línea que
 * carga este archivo en index.html.
 *
 * Colores del diseño: tinta #2A1512 · tomate #FF4B2B · gris #6F5F59 ·
 * borde #E9E1DB · crema #FAF8F5.
 */

:root{
  --d-tinta:#2A1512; --d-tomate:#FF4B2B; --d-gris:#6F5F59; --d-borde:rgba(233,225,219,1);
  --d-crema:rgba(250,248,245,1); --d-degradado:linear-gradient(135deg,#FF416C 0%,#FF4B2B 100%);
  --d-titulo:"Montserrat",ui-sans-serif,system-ui,Arial,sans-serif;
  --d-texto:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --d-sombra-s0:rgba(42,21,18,.1) 0 14px 34px 0;
  --d-sombra-s1:rgba(0,0,0,.16) 0 22px 44px -12px;
  --d-estrella:#FACC15;
}

/* ---------------------------------------------------------------- BASE */
body{font-family:var(--d-texto);color:var(--d-tinta);background:#fff;font-size:15px;line-height:1.6}
.wrap{width:min(calc(100% - 40px),1240px)}

/* ---------------------------------------------------------------- CABECERA */
header.top{background:rgba(255,255,255,.96);backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--d-borde)}
header.top nav{min-height:90px;gap:16px}
header.top .marca .nom{color:var(--d-tomate);font-family:var(--d-titulo);font-size:23px;font-weight:800;letter-spacing:-.8px}
header.top .marca .iso{width:26px;height:30px}
.zone{border:1px solid var(--d-borde);border-radius:999px;background:#fff;font-weight:700;font-size:.9rem;padding:10px 16px}
.search{height:48px;max-width:543px;background:var(--d-crema);border:1px solid var(--d-borde);border-radius:999px;padding:0 16px}
.nav-link{font-weight:700;font-size:.9rem}
.account-link{border-radius:999px;border:1px solid var(--d-borde);padding:11px 16px;font-weight:700;font-size:.9rem}
.cart{background:var(--d-tinta);border-radius:12px;padding:12px 16px;font-weight:700;font-size:.9rem}
.cart .n{background:var(--d-tomate);font-weight:800;font-size:12px}

/* ---------------------------------------------------------------- SECCIONES */
#v-inicio section{padding:74px 0}
#v-inicio .eyebrow{color:var(--d-tomate);font-size:.76rem;font-weight:800;letter-spacing:1.2px;line-height:18.2px;text-transform:uppercase}
.tit-diseno,
#v-inicio .section-title h2.tit-diseno{font-family:var(--d-titulo);font-weight:900;font-style:italic;text-transform:uppercase;
  font-size:clamp(32px,4vw,43.2px);letter-spacing:-.9px;line-height:1.05;margin-top:8px;color:var(--d-tinta)}
#v-inicio .section-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:32px}
#v-inicio .section-title p.sub{color:var(--d-gris);margin-top:8px;font-size:15px}
.ver-mas,.ver-todas{border:0;background:transparent;color:var(--d-tomate);font:700 14px/1 var(--d-texto);cursor:pointer;padding:8px 0;white-space:nowrap}
.ver-mas:hover,.ver-todas:hover{text-decoration:underline}

/* ---------------------------------------------------------------- HÉROE */
#v-inicio .hero{background:rgba(247,248,250,1);padding:74px 0}
#v-inicio .hero-grid{grid-template-columns:1fr 1fr;gap:44px;padding:0}
#v-inicio .hero h1{font-family:var(--d-titulo);font-weight:900;font-size:clamp(42px,5.6vw,74.9px);letter-spacing:-1.5px;line-height:1.03;margin-top:16px}
#v-inicio .hero h1 .tomate{color:var(--d-tomate)}
#v-inicio .hero-tagline{font-family:var(--d-titulo);font-weight:700;font-size:clamp(20px,2.1vw,27.4px);letter-spacing:-1px;line-height:1.15;margin-top:24px}
#v-inicio .hero-tagline strong{color:var(--d-tomate);font-weight:900}
#v-inicio .hero .intro{color:var(--d-gris);font-size:1.1rem;line-height:26.4px;margin-top:24px;max-width:520px}
#v-inicio .address{margin-top:32px;background:#fff;border:1px solid var(--d-borde);border-radius:16px;box-shadow:var(--d-sombra-s1);padding:8px}
#v-inicio .address .cta{background:var(--d-degradado);border-radius:12px;color:#fff;font-weight:800;padding:14px 22px;
  box-shadow:rgba(255,75,43,.45) 0 12px 26px -8px}
#v-inicio .assurances{margin-top:32px;gap:16px 24px;font-size:.85rem;font-weight:600}
#v-inicio .check{background:rgba(228,243,235,1)}
#v-inicio .hero-photo{border-radius:32px;box-shadow:var(--d-sombra-s0)}
#v-inicio .hero-photo img{border-radius:32px}

/* ---------------------------------------------------------------- NOVEDADES LOCALES */
#v-inicio section.novedades{background:#fff;padding:37px 0}
#v-inicio .novedades .section-title{margin-bottom:24px}
.nov-tira{display:flex;gap:24px;overflow-x:auto;padding:4px 2px 16px;scrollbar-width:none}
.nov-tira::-webkit-scrollbar{display:none}
.nov-item{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:12px;border:0;background:transparent;
  cursor:pointer;padding:0;width:auto;font:inherit;color:var(--d-tinta)}
.nov-anillo{display:block;padding:3px;border-radius:50%;background:var(--d-degradado);transition:transform .15s}
.nov-item:hover .nov-anillo{transform:scale(1.05)}
.nov-item.visto{opacity:.4}
.nov-item.visto .nov-anillo{background:transparent;border:2px solid var(--d-borde);padding:1px}
.nov-logo{position:relative;display:grid;place-items:center;width:86px;height:86px;border-radius:50%;background:#fff;
  border:4px solid #fff;overflow:hidden;color:var(--d-tomate);font:900 28px/1 var(--d-titulo)}
.nov-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#f9fafb;border-radius:50%}
.nov-nombre{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:-.2px;max-width:100px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------------------------------------------------------------- CATEGORÍAS */
#v-inicio section.cats-sec{background:#fff}
#v-inicio .categories{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
#v-inicio .category{min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:20px 12px;background:#fff;border:1px solid var(--d-borde);border-radius:24px;box-shadow:0 1px 2px rgba(0,0,0,.05);
  font:700 .92rem/1.2 var(--d-texto);color:var(--d-tinta);cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s}
#v-inicio .category:hover{transform:translateY(-3px);box-shadow:var(--d-sombra-s0);border-color:rgba(255,75,43,.35)}
#v-inicio .category .cat-ico{width:56px;height:56px;border-radius:18px;background:rgba(255,75,43,.08);display:grid;place-items:center}
#v-inicio .category svg,#v-inicio .category:hover svg,#v-inicio .category.sel svg{width:26px;height:26px;padding:0;
  background:none;box-shadow:none;transform:none;fill:none;stroke:var(--d-tomate);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#v-inicio .category:hover .cat-ico{background:var(--d-degradado)}
#v-inicio .category:hover svg{stroke:#fff}
#v-inicio .category.sel{background:var(--d-tinta);border-color:var(--d-tinta);color:#fff}
#v-inicio .category.sel .cat-ico{background:var(--d-tomate)}
#v-inicio .category.sel svg,#v-inicio .category.sel:hover svg{stroke:#fff}

/* ---------------------------------------------------------------- DOS LÍNEAS */
.lineas{display:flex;flex-direction:column;gap:40px}
.lineas > .linea{display:flex;gap:24px;overflow-x:auto;padding:4px 2px 16px;scroll-snap-type:x proximity;scrollbar-width:thin}
.lineas > .linea > *{flex:0 0 auto;scroll-snap-align:start}
/* «Ver más»: todo a la vista, en rejilla. */
.lineas.todo > .linea{flex-wrap:wrap;overflow:visible}
/* Mensajes (sin dirección, sin comercios, error): a lo ancho. */
.lineas > .hueco,.lineas > div[style*="grid-column"]{width:100%}
.lineas > .esq-card{display:inline-block;width:320px;margin-right:24px}

/* ---------------------------------------------------------------- PRODUCTOS */
#v-inicio section.recom{background:var(--d-crema)}
#v-inicio .recom .reco-bloque + .reco-bloque{margin-top:0}
.prod-card{width:200px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;background:#fff;
  border:1px solid var(--d-borde);border-radius:24px;padding:20px;cursor:pointer;font:inherit;color:var(--d-tinta);
  box-shadow:0 1px 2px rgba(0,0,0,.05);transition:box-shadow .2s}
.prod-card:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.prod-foto{display:block;width:100%;aspect-ratio:1;border-radius:16px;overflow:hidden;background:var(--d-crema);margin-bottom:12px}
.prod-foto img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.prod-card:hover .prod-foto img{transform:scale(1.1)}
.prod-nombre{font-weight:700;font-size:15px;text-transform:uppercase;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prod-de{font-size:12px;color:var(--d-gris);width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prod-precio{font-weight:900;font-size:18px;color:var(--d-tomate);font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- LUGARES */
#v-inicio section.lugares-sec{background:#fff}
.lug-acciones{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.filtrar{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--d-borde);border-radius:12px;
  padding:8px 16px;font:600 14px/1 var(--d-texto);color:var(--d-gris);cursor:pointer}
.filtrar svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.filtrar:hover{border-color:var(--d-tomate);color:var(--d-tomate)}

.lug-card{width:320px;display:flex;flex-direction:column;background:#fff;border:1px solid var(--d-borde);border-radius:32px;
  overflow:hidden;color:var(--d-tinta);text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.05);transition:box-shadow .2s}
.lug-card:hover{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1)}
.lug-card.cerrado{opacity:.6}
.lug-img{position:relative;height:192px;overflow:hidden;background:var(--d-crema)}
.lug-bg{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.lug-card:hover .lug-bg{transform:scale(1.05)}
/* Sin portada: color de la marca con su nombre, nunca una foto de otro sitio. */
.lug-img.sin-portada,.shop-image.sin-portada{background:var(--d-degradado)}
.lug-img.sin-portada::before,.shop-image.sin-portada::before{content:attr(data-nombre);position:absolute;inset:0;display:grid;place-items:center;
  padding:0 24px;text-align:center;color:rgba(255,255,255,.9);font:900 italic 26px/1.05 var(--d-titulo);text-transform:uppercase;letter-spacing:-.5px}
.lug-rec{position:absolute;top:16px;left:16px;display:inline-flex;align-items:center;gap:4px;background:var(--d-tomate);color:#fff;
  font:900 10px/1 var(--d-texto);padding:6px 12px;border-radius:999px;box-shadow:0 10px 15px -3px rgba(0,0,0,.2)}
.lug-rec svg{width:8px;height:8px;fill:currentColor}
.lug-fundador{position:absolute;top:16px;right:16px;background:var(--d-tinta);color:#fff;font:700 9px/1 var(--d-texto);
  padding:6px 12px;border-radius:8px;box-shadow:0 10px 15px -3px rgba(0,0,0,.2)}
.lug-logo{position:absolute;left:16px;bottom:16px;display:grid;place-items:center;width:48px;height:48px;border-radius:16px;
  background:#fff;padding:4px;box-shadow:0 20px 25px -5px rgba(0,0,0,.2);overflow:hidden;color:var(--d-tomate);font:900 18px/1 var(--d-titulo)}
.lug-logo img{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);object-fit:contain;background:#fff;border-radius:12px}
.lug-cerrado{position:absolute;right:16px;bottom:16px;background:#fff;color:var(--d-gris);font:700 11px/1 var(--d-texto);padding:6px 10px;border-radius:999px}
.lug-cuerpo{display:flex;flex-direction:column;flex:1;padding:24px;gap:0}
.lug-cuerpo h3{margin:0 0 12px;font:900 italic 20px/1.2 var(--d-titulo);text-transform:uppercase;letter-spacing:-.4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lug-resena{background:var(--d-crema);border:1px solid var(--d-borde);border-radius:16px;padding:16px;margin-bottom:16px}
.lug-estrellas{color:var(--d-estrella);font-size:11px;letter-spacing:1px}
.lug-resena p{margin:8px 0 0;font-size:13px;font-style:italic;color:var(--d-gris);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lug-metricas{margin-top:auto;display:flex;gap:16px;font-size:12px;font-weight:700;color:var(--d-gris)}
.lug-metricas span{display:inline-flex;align-items:center;gap:6px}
.lug-metricas svg{width:13px;height:13px;fill:rgba(255,75,43,.6);color:rgba(255,75,43,.6)}

/* ---------------------------------------------------------------- MÓVIL */
@media (max-width:980px){
  #v-inicio .hero-grid{grid-template-columns:1fr}
  #v-inicio .categories{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  #v-inicio section{padding:52px 0}
  #v-inicio section.novedades{padding:28px 0}
  #v-inicio .categories{grid-template-columns:repeat(2,1fr)}
  #v-inicio .section-title{align-items:flex-end}
  .lug-card{width:280px}
  .prod-card{width:170px;padding:14px}
  .nov-logo{width:72px;height:72px}
  .lineas{gap:24px}
}
@media (prefers-reduced-motion:reduce){
  .prod-foto img,.lug-bg,.nov-anillo,#v-inicio .category{transition:none}
}

/* ---------------------------------------------------------------- PRODUCTOS: 2 filas de 6 */
/* Cada fila tiene seis productos y ocupa todo el ancho, como el diseño. Las filas
   de más (7.º producto en adelante) se enseñan con «Ver más». */
.lineas > .linea.fila-seis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;overflow:visible;padding:4px 2px 0}
.lineas > .linea.fila-seis > .prod-card{width:auto;min-width:0}
.lineas > .linea.linea-extra{display:none}
.lineas.todo > .linea.linea-extra{display:grid}
/* Plato sin foto: color de la marca con su nombre (nunca una foto de otro plato). */
.prod-foto{position:relative}
.prod-foto.sin-foto{background:var(--d-degradado)}
.prod-foto.sin-foto::before{content:attr(data-nombre);position:absolute;inset:0;display:grid;place-items:center;padding:0 12px;
  text-align:center;color:rgba(255,255,255,.92);font:900 italic 15px/1.1 var(--d-titulo);text-transform:uppercase;
  overflow:hidden}
@media (max-width:980px){
  .lineas > .linea.fila-seis{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  /* En el móvil, cada fila de seis se desliza de lado. */
  .lineas > .linea.fila-seis{display:flex;overflow-x:auto;gap:14px;padding-bottom:12px}
  .lineas > .linea.fila-seis > .prod-card{width:170px;flex:0 0 auto}
  .lineas > .linea.linea-extra{display:none}
  .lineas.todo > .linea.linea-extra{display:flex}
}

/* El comentario destacado de cada plato (reseñas buenas del app y de la web). */
.prod-comentario{display:block;width:100%;margin-top:8px;background:var(--d-crema);border:1px solid var(--d-borde);
  border-radius:14px;padding:8px 10px}
.prod-estrellas{display:block;color:var(--d-estrella);font-size:10px;letter-spacing:1px}
.prod-cita{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px;
  font-size:12px;font-style:italic;color:var(--d-gris);line-height:1.45}
.lineas > .linea.fila-seis{align-items:stretch}

/* ---------------------------------------------------------------- FUNDADOR 👑 */
/* En la ficha del comercio, encima del nombre. */
.mh-fundador{display:inline-flex;align-items:center;gap:6px;margin-bottom:8px;background:var(--d-tinta);color:#fff;
  font:800 11px/1 var(--d-texto);letter-spacing:.6px;padding:6px 10px;border-radius:8px;box-shadow:0 10px 15px -3px rgba(0,0,0,.25)}
/* La ficha sin portada: color de la marca, nunca una foto de otro sitio. */
.mh-hero.sin-portada{background:var(--d-degradado)}
/* En el círculo de «Novedades locales»: la corona encima del anillo. */
.nov-item{position:relative}
.nov-corona{position:absolute;top:-4px;right:-2px;width:28px;height:28px;border-radius:50%;background:var(--d-tinta);
  display:grid;place-items:center;font-size:14px;line-height:1;border:2px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.2)}