/* Pa Food landing: funnel layout (Categorías > Lista > Detalle). Only applies once embudo.js adds
   html.pf-embudo; without JS the page is the classic one-page menu. Tokens come from index.html. */

/* Compact hero: brand, then the order buttons in one row. */
.pf-embudo .hero{padding:20px var(--gutter) 18px}
.pf-embudo .hero-logo{width:64px;height:64px;margin-bottom:10px}
.pf-embudo .hero h1{font-size:clamp(34px,9vw,52px);margin:6px 0 0}
.pf-embudo .hero .lead{display:none}
.pf-embudo .ctas{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px;margin:14px auto 12px;max-width:none}
.pf-embudo .ctas .btn{min-height:40px;padding:0 16px;font-size:14px}
.pf-embudo .hero .social a{width:38px;height:38px}

/* Home: category grid. */
.cats-wrap{display:none;max-width:var(--max);margin:0 auto;padding:22px var(--gutter) 8px}
.pf-embudo:not(.pf-lista):not(.pf-buscando) .cats-wrap{display:block}
.cats-titulo{font-size:clamp(24px,6.5vw,32px);text-align:center;margin-bottom:16px}
.cats{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.cat{
  position:relative;display:block;overflow:hidden;aspect-ratio:4/5;flex:0 0 calc(50% - 6px);
  border-radius:var(--radius);border:1px solid var(--line);background:var(--plum);
  text-decoration:none;color:var(--cream);
  transition:transform .15s ease,border-color .15s ease;
}
.cat:hover{border-color:var(--gold)}
.cat:active{transform:scale(.98)}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cat::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(26,10,43,0) 30%,rgba(26,10,43,.96) 88%)}
.cats .cat:first-child{flex-basis:100%;aspect-ratio:2/1.1}
.cats .cat:first-child .cat-nombre{font-size:24px}
.cat--sin-foto{background:radial-gradient(80% 80% at 30% 20%,var(--violet),var(--deep))}
.cat-txt{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.cat-txt{text-shadow:0 1px 6px rgba(10,3,18,.85)}
.cat-nombre{font-family:"Playfair Display",Georgia,serif;font-weight:700;font-size:19px;line-height:1.15}
.cat-n{font-size:13px;color:var(--gold-2)}
.cat-n b{font-weight:700}

/* Promos below the grid, side by side on wide screens. */
.promos{display:grid;gap:12px;margin-top:22px}
.promos .premios,.promos .pix{margin:0;width:100%;max-width:none}
.pf-un-grupo .group h3{display:none}

/* Tabs bar: home shows only the search; a list adds "← Categorías" and the carta chips. */
.tabs-volver{display:none}
.pf-embudo:not(.pf-lista) .tabs a:not(.tabs-volver){display:none}
.pf-embudo.pf-lista .tabs-volver{display:inline-flex;gap:4px;color:var(--gold-2);border-color:var(--gold)}
.pf-embudo .tabs a[aria-current="page"]{background:var(--gold);border-color:var(--gold);color:var(--deep)}
.pf-embudo:not(.pf-lista) .buscar{flex:1 1 auto;max-width:520px;margin:0 auto}
.pf-embudo:not(.pf-lista) .buscar input{width:100%}

/* List: only the chosen carta; the hero steps aside. Searching shows every carta (filtered). */
.pf-embudo section.carta:not(.pf-activa){display:none}
.pf-embudo.pf-buscando section.carta:not([hidden]){display:block}
.pf-embudo.pf-lista .hero{display:none}
.pf-embudo.pf-lista section.carta{padding-top:24px}

/* List: compact rows (text left, small photo right, every size price visible), like a delivery app. */
.pf-embudo .grid{grid-template-columns:1fr;gap:10px}
.pf-embudo .card:not(.card--destacado):not(.card--plain){flex-direction:row-reverse;align-items:flex-start}
.pf-embudo .card:not(.card--destacado) .media{flex:none;width:108px;aspect-ratio:1;margin:12px 12px 12px 0;border-radius:12px}
.pf-embudo .card:not(.card--destacado) .card-body{padding:12px 14px;gap:5px;min-width:0}
.pf-embudo .card:not(.card--destacado) h4{font-size:16px}
.pf-embudo .card:not(.card--destacado) .desc{font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pf-embudo .card:not(.card--destacado) .opts{font-size:12px}
.pf-embudo .card:not(.card--destacado) .card-foot{flex-wrap:wrap;align-items:center;gap:8px;padding-top:4px}
.pf-embudo .card:not(.card--destacado) .price-list{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:2px 12px}
.pf-embudo .card:not(.card--destacado) .price-list li{border:0;padding:0;font-size:13px;gap:5px}
.pf-embudo .card:not(.card--destacado) .price-list b,.pf-embudo .card:not(.card--destacado) .price-one b{font-size:15px}
.pf-embudo .card:not(.card--destacado) .ask{min-height:34px;padding:0 12px;font-size:13px}
/* With a photo, "Agregar" becomes a round + on the photo's corner. */
.pf-embudo .card:not(.card--destacado):not(.card--plain){position:relative}
.pf-embudo .card:not(.card--destacado):not(.card--plain) .card-body{padding-bottom:14px}
.pf-embudo .card:not(.card--destacado):not(.card--plain) .ask.add{
  position:absolute;top:82px;right:18px;width:40px;height:40px;min-height:0;padding:0;justify-content:center;
  border-radius:50%;background:var(--cream);border:0;color:var(--deep);font-size:0;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.pf-embudo .card:not(.card--destacado):not(.card--plain) .ask.add svg{display:none}
.pf-embudo .card:not(.card--destacado):not(.card--plain) .ask.add::before{content:"+";font-size:26px;font-weight:500;line-height:1}
.pf-embudo .card:not(.card--destacado):not(.card--plain) .ask.add:hover{background:var(--gold)}
.pf-embudo .card:not(.card--destacado) .price-list{gap:0 12px}

/* Highlighted products: big card, gold frame and a tag. */
.card--destacado{position:relative;border:1.5px solid var(--gold);
  background:linear-gradient(180deg,rgba(200,162,74,.16),rgba(255,255,255,.04) 45%);
  box-shadow:0 0 0 4px rgba(200,162,74,.10),0 16px 40px rgba(0,0,0,.35)}
.pf-embudo .card--destacado .media{aspect-ratio:16/11}
.tag-destacado{align-self:flex-start;padding:3px 10px;border-radius:999px;background:var(--gold);color:var(--deep);
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}

@media (min-width:620px){
  .cats{gap:16px}
  .cat{flex-basis:calc((100% - 32px) / 3);aspect-ratio:1}
  .cats .cat:first-child{aspect-ratio:3/1}
  .pf-embudo .grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .pf-embudo .card--destacado{grid-column:1/-1;flex-direction:row}
  .pf-embudo .card--destacado{min-height:280px}
  .pf-embudo .card--destacado .media{position:relative;flex:0 0 42%;aspect-ratio:auto}
  .pf-embudo .card--destacado .media img{position:absolute;inset:0}
  .promos{grid-template-columns:1fr 1fr}
}
@media (min-width:980px){
  .cat{flex-basis:calc((100% - 64px) / 5);aspect-ratio:3/4}
  .cats .cat:first-child{aspect-ratio:4/1}
  .pf-embudo .grid{grid-template-columns:repeat(2,1fr)}
}

/* An odd last tile on a phone fills its row instead of floating alone. */
@media (max-width:619px){.cats .cat:last-child:nth-child(even){flex-basis:100%;aspect-ratio:3/1}}

/* Touch: 44 px targets. Header controls keep their size and grow an invisible hit area, so the bar still fits 360 px. */
@media (pointer:coarse){
  .menu-btn,.pais-op,.bar-acciones .btn-sm{position:relative}
  .menu-btn::after,.pais-op::after,.bar-acciones .btn-sm::after{content:"";position:absolute;inset:-6px -2px}
  .pf-embudo .ctas .btn{min-height:44px}
  .pf-embudo .hero .social a{width:44px;height:44px}
  .pf-embudo .tabs a{min-height:44px}
  .pf-embudo .card:not(.card--destacado):not(.card--plain) .ask.add{top:80px;width:44px;height:44px}
  .sheet .sheet-x,.menu .sheet-x{width:44px;height:44px}
}