/* ═══════════════════════════════════════════════════════════════
   PASAPORTE PLANT BASED — Plataforma
   Misma estética del ebook: Montserrat, color por país, flat, blanco.
   Mobile-first. Navegación impecable.
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* ── MARCA PPB (el marco: fijo en toda la plataforma) ── */
  --marca:#4C6ED5;        /* azul PPB (logo) — color principal del chrome */
  --marca-verde:#0B9463;  /* verde PPB (texto logo) — acento secundario */
  --menta:#4CD5A4;
  --celeste:#6D91FF;
  --crema:#F6F1E8;
  /* ── NEUTROS ── */
  --tinta:#101014; --tinta-2:#55555f; --tinta-3:#8e8e99;
  --linea:#e9e9ee; --gris:#f5f5f7; --papel:#fff;
  /* ── ACENTO POR PAÍS (cambia por destino: cards y vista de receta) ── */
  --pais:#e4007c;         /* se sobreescribe por JS según la receta */
  --sombra:0 1px 3px rgba(16,16,20,.06), 0 8px 24px rgba(16,16,20,.06);
  --sombra-hover:0 2px 6px rgba(16,16,20,.08), 0 16px 40px rgba(16,16,20,.12);
  --r:16px;
  --topbar-h:66px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Montserrat",system-ui,sans-serif;
  color:var(--tinta); background:var(--papel);
  -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;
  padding-top:var(--topbar-h);
  -webkit-tap-highlight-color:transparent;   /* sin flash azul al tocar en mobile */
  overflow-x:hidden;                         /* nada empuja el ancho más allá del viewport */
}
img{display:block;max-width:100%}
/* sin subrayado ni color azul en ningún link */
a{text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;-webkit-tap-highlight-color:transparent}
input{font-family:inherit}

/* ═══ TOPBAR ═══ */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50; height:var(--topbar-h);
  background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--linea);
}
.topbar-inner{
  max-width:1180px; margin:0 auto; height:100%; padding:0 24px;
  display:flex; align-items:center; gap:16px;
}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand-logo{height:38px;width:auto}
.search{
  flex:1; display:flex; align-items:center; gap:9px; max-width:520px; margin-left:auto;
  background:var(--gris); border:1.5px solid transparent; border-radius:999px; padding:0 14px; height:42px;
  transition:border-color .18s, background .18s;
}
.search:focus-within{background:var(--papel);border-color:var(--marca)}
.search-ico{width:17px;height:17px;color:var(--tinta-3);flex:0 0 auto}
.search input{flex:1;border:none;background:none;outline:none;font-size:14px;font-weight:500;color:var(--tinta);min-width:0}
.search input::placeholder{color:var(--tinta-3);font-weight:400}
.q-clear{font-size:22px;color:var(--tinta-3);width:22px;height:22px;border-radius:50%;line-height:1;flex:0 0 auto}
.q-clear:hover{color:var(--tinta);background:var(--linea)}

/* ═══ LAYOUT EXPLORAR ═══ */
main{max-width:1180px;margin:0 auto;padding:0 24px}
.explore-layout{display:grid;grid-template-columns:236px 1fr;gap:30px;align-items:start;padding-top:22px}

/* ═══ SIDEBAR (desktop) ═══ */
.sidebar{position:sticky;top:calc(var(--topbar-h) + 18px);max-height:calc(100vh - var(--topbar-h) - 36px);overflow-y:auto;padding-right:4px}
.sidebar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sidebar-t{font-size:16px;font-weight:800;color:var(--tinta)}
.sidebar-clear{font-size:14px;font-weight:700;color:var(--marca)}
.sidebar-clear:hover{text-decoration:underline}

/* ═══ GRUPOS + OPCIONES (compartido sidebar + modal) ═══ */
.fgroup{padding:14px 0;border-top:1px solid var(--linea)}
.fgroup:first-child{border-top:none;padding-top:0}
.fgroup-t{font-size:14px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:8px}
.fgroup-list{display:flex;flex-direction:column;gap:1px}
.fopt{display:flex;align-items:center;gap:10px;width:100%;padding:7px 6px;border-radius:9px;text-align:left;transition:background .12s}
.fopt:hover{background:var(--gris)}
.fbox{flex:0 0 auto;width:18px;height:18px;margin-top:-1px;border-radius:5px;border:1.8px solid var(--linea);background:var(--papel);position:relative;transition:all .14s}
.fopt.on .fbox{background:var(--marca);border-color:var(--marca)}
.fopt.on .fbox::after{content:"";position:absolute;left:50%;top:46%;width:4.5px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-55%) rotate(45deg)}
.flbl{flex:1;font-size:14px;font-weight:600;color:var(--tinta);display:flex;align-items:center;gap:7px;line-height:1.2;min-width:0}
.flbl .em{font-size:16px;line-height:1;flex:0 0 auto}
.fsub{font-size:14px;font-weight:600;color:var(--tinta-3)}
.fn{flex:0 0 auto;font-size:14px;font-weight:700;color:var(--tinta-3);font-variant-numeric:tabular-nums}
.fopt.on .fn{color:var(--marca)}
.fopt.off{opacity:.38;cursor:default}
.fopt.off:hover{background:none}

/* En el modal mobile: filas más aireadas y targets táctiles más grandes (dedo/vista) */
.fmodal .fgroup{padding:18px 0}
.fmodal .fgroup-t{font-size:14px;margin-bottom:12px}
.fmodal .fgroup-list{gap:6px}
.fmodal .fopt{padding:13px 10px;gap:14px;border-radius:12px}
.fmodal .fopt:active{background:var(--gris)}
.fmodal .fbox{width:26px;height:26px;border-radius:7px;border-width:2px}
.fmodal .fopt.on .fbox::after{width:7px;height:12px;border-width:0 3px 3px 0}
.fmodal .flbl{font-size:17px;gap:10px}
.fmodal .flbl .em{font-size:22px}
.fmodal .fsub{font-size:15px}
.fmodal .fn{font-size:16px}

/* botón "Filtros" (solo mobile) + badge */
.filters-btn{display:none;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--tinta);background:var(--papel);border:1.5px solid var(--linea);border-radius:999px;padding:8px 15px}
.filters-btn svg{width:16px;height:16px}
.filters-btn:hover{border-color:var(--tinta-3)}
.fbadge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--marca);color:#fff;font-size:14px;font-weight:800}

/* ═══ MODAL DE FILTROS (mobile) ═══ */
.fmodal{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;justify-content:flex-end}
.fmodal[hidden]{display:none!important}   /* respeta el estado cerrado (la clase le ganaba al atributo hidden) */
.fmodal-bg{position:absolute;inset:0;background:rgba(16,16,20,.42);backdrop-filter:blur(2px)}
.fmodal-sheet{position:relative;background:var(--papel);border-radius:20px 20px 0 0;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 -8px 40px rgba(16,16,20,.18);animation:sheetUp .24s cubic-bezier(.2,.7,.3,1)}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.fmodal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 13px;font-size:18px;font-weight:800;border-bottom:1px solid var(--linea)}
.fmodal-x{font-size:30px;line-height:1;color:var(--tinta-3);width:32px;height:32px;border-radius:50%}
.fmodal-x:hover{background:var(--gris);color:var(--tinta)}
.fmodal-body{overflow-y:auto;padding:2px 20px 8px;-webkit-overflow-scrolling:touch}
.fmodal-foot{display:flex;gap:12px;padding:13px 20px calc(13px + env(safe-area-inset-bottom));border-top:1px solid var(--linea);background:var(--papel)}
.fmodal-clear{flex:0 0 auto;font-size:14px;font-weight:700;color:var(--tinta-2);background:var(--gris);border-radius:12px;padding:13px 20px}
.fmodal-apply{flex:1;font-size:15px;font-weight:800;color:#fff;background:var(--marca);border-radius:12px;padding:13px}
.fmodal-apply:active{transform:scale(.99)}

/* ═══ SCROLLER HORIZONTAL con flechas ═══ */
.scroller{position:relative;flex:1 1 0;min-width:0}
.filter-scroll{display:flex;gap:8px;overflow-x:auto;min-width:0;padding:2px 0;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-behavior:smooth}
.filter-scroll::-webkit-scrollbar{display:none}
.filter-scroll > .chip{flex:0 0 auto}   /* los chips no se encogen: el strip scrollea */
/* botones de flecha (aparecen solo si hay overflow del lado) */
.arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:30px;height:30px;border-radius:50%;background:var(--papel);
  box-shadow:0 1px 3px rgba(16,16,20,.12),0 4px 12px rgba(16,16,20,.14);
  display:flex;align-items:center;justify-content:center;color:var(--tinta);
  opacity:0;pointer-events:none;transition:opacity .18s;
}
.arrow svg{width:16px;height:16px}
.arrow.show{opacity:1;pointer-events:auto}
.arrow:hover{color:var(--marca)}
.arrow.left{left:-8px}
.arrow.right{right:-8px}
/* degradado que insinúa que hay más (usa el gris del contenedor, no blanco) */
.scroller::before,.scroller::after{
  content:"";position:absolute;top:0;bottom:0;width:38px;z-index:2;pointer-events:none;opacity:0;transition:opacity .18s;
}
.scroller::before{left:0;background:linear-gradient(90deg,var(--gris),transparent)}
.scroller::after{right:0;background:linear-gradient(270deg,var(--gris),transparent)}
.scroller.more-left::before{opacity:1}
.scroller.more-right::after{opacity:1}

/* ═══ RESULTS BAR ═══ */
.results-bar{display:flex;align-items:center;gap:14px;padding:2px 0 24px;min-height:20px}
.count{font-size:14px;font-weight:600;color:var(--tinta-3)}
.count b{color:var(--tinta);font-weight:800}
.clear-filters{margin-left:auto;font-size:14px;font-weight:700;color:var(--marca);letter-spacing:.01em}
.clear-filters:hover{text-decoration:underline}

/* ═══ RESPONSIVE: sidebar → modal ═══ */
@media(min-width:861px){ .fmodal{display:none!important} }
@media(max-width:860px){
  .explore-layout{grid-template-columns:1fr;gap:0;padding-top:14px}
  .sidebar{display:none}
  .filters-btn{display:inline-flex}
  /* barra de filtros sticky, justo debajo del header fijo */
  .results-bar{position:sticky;top:var(--topbar-h);z-index:40;background:var(--papel);
    padding:12px 0 16px;margin-bottom:8px;box-shadow:0 8px 14px -10px rgba(16,16,20,.18)}
}

/* ═══ GRILLA DE RECETAS ═══ */
.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;padding-bottom:60px;
}
.card{
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;
  cursor:pointer;transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, border-color .18s;
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sombra-hover);border-color:transparent}
.card-img{aspect-ratio:3/2;width:100%;object-fit:cover;background:var(--gris)}
.card-body{padding:13px 14px 15px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-flag{position:absolute}
.card-top{display:flex;align-items:center;gap:6px}
.card-pais{font-size:14px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cardc,var(--pais))}
.card-titulo{font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.15;color:var(--tinta);text-wrap:balance}
.card-trad{font-size:14px;font-weight:500;color:var(--tinta-3);line-height:1.2;margin-top:3px}
.card-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px}
.tag{font-size:14px;font-weight:700;color:var(--tinta-2);background:var(--gris);border-radius:6px;padding:3px 8px;display:inline-flex;align-items:center;gap:4px;line-height:1.2}
.tag.gluten{background:#101014;color:#fff}
.tag.picor{background:transparent;color:var(--tinta-3);padding-left:0}
.picor-dots{display:inline-flex;gap:2px}
.dot{width:5px;height:5px;border-radius:50%;background:var(--linea)}
.dot.on{background:var(--cardc,var(--pais))}

/* ═══ EMPTY ═══ */
.empty{text-align:center;padding:70px 20px}
.empty-title{font-size:20px;font-weight:800;color:var(--tinta);margin-bottom:6px}
.empty-sub{font-size:14px;color:var(--tinta-3)}

/* ═══════════════════════════════════════════════════
   VISTA RECETA
   ═══════════════════════════════════════════════════ */
#view-recipe{padding-bottom:70px;max-width:720px;margin:0 auto}
.r-back{
  display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--tinta-2);
  padding:28px 0 22px;
}
.r-back:hover{color:var(--pais)}
.r-back svg{width:16px;height:16px}
/* Todo apilado: imagen → info → receta, en una columna centrada */
.r-hero{display:flex;flex-direction:column;gap:20px;margin:0 auto 26px;max-width:720px}
.r-hero-img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r);background:var(--gris)}
.r-seccion{font-size:14px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--pais);margin-bottom:9px}
.r-titulo{font-size:clamp(28px,6vw,40px);font-weight:900;letter-spacing:-.035em;line-height:1.02;color:var(--tinta);text-wrap:balance;margin-bottom:8px}
.r-traduccion{font-size:17px;font-weight:400;color:var(--tinta-2);line-height:1.3;margin-bottom:10px}
.r-titulo .chili{font-size:.4em;vertical-align:.35em;margin-left:6px}
.r-origen{font-size:15px;font-weight:300;color:var(--tinta-2);line-height:1.4;margin-bottom:16px}
.r-sello{display:inline-block;font-size:14px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--tinta);padding:5px 10px;border-radius:4px;margin-bottom:16px}
.r-meta{display:flex;flex-wrap:wrap;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.r-meta-item{padding:11px 20px 11px 0;margin-right:20px;border-right:1px solid var(--linea)}
.r-meta-item:last-child{border:none;margin:0;padding-right:0}
.r-meta-lbl{display:block;font-size:14px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:2px}
.r-meta-val{font-size:14px;font-weight:700;color:var(--tinta)}

.r-body{max-width:760px}
.r-block{margin-bottom:30px}
.r-block-t{font-size:14px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta);padding-bottom:8px;margin-bottom:14px;border-bottom:2px solid var(--pais)}
/* ingredientes */
.r-ings{list-style:none;columns:2;column-gap:26px}
@media(max-width:520px){.r-ings{columns:1}}
.r-ings li{font-size:15px;color:var(--tinta-2);padding:6px 0 6px 15px;text-indent:-15px;line-height:1.45;break-inside:avoid}
.r-ings li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--pais);margin-right:11px;vertical-align:.3em}
.r-ings b{color:var(--tinta);font-weight:700}
/* reemplazos con selector de país */
.r-remp{background:var(--gris);border-radius:var(--r);padding:18px}
.r-remp-intro{font-size:14px;color:var(--tinta-3);line-height:1.45;margin-bottom:14px;text-wrap:pretty}
.zsel{display:flex;gap:7px;overflow-x:auto;padding-bottom:0;margin-bottom:16px;scrollbar-width:none}
.zsel::-webkit-scrollbar{display:none}
.zbtn{font-size:14px;font-weight:700;color:var(--tinta-2);background:var(--papel);border:1.5px solid var(--linea);border-radius:999px;padding:7px 13px;white-space:nowrap;transition:all .15s}
.zbtn.on{background:var(--pais);color:#fff;border-color:var(--pais)}
.zpanel-orig{font-size:14px;color:var(--tinta-2);padding:6px 0}
.swap{padding:9px 0;border-top:1px solid var(--linea)}
.swap:first-child{border:none}
.swap-orig{font-weight:800;color:var(--tinta);font-size:14px}
.swap-arr{color:var(--pais);font-weight:800;margin:0 6px}
.swap-txt{font-size:14px;color:var(--tinta-2);line-height:1.45}
.swap-perd{display:block;font-size:14px;font-weight:400;color:var(--tinta-2);line-height:1.4;margin-top:3px}
.swap-perd::before{content:"Se pierde ";font-weight:700}
/* pasos */
.r-paso{display:flex;gap:16px;padding:15px 0;border-top:1px solid var(--linea)}
.r-paso:first-child{border:none;padding-top:2px}
.r-paso-n{flex:0 0 auto;font-size:26px;font-weight:900;line-height:.9;color:var(--pais);letter-spacing:-.04em;min-width:30px}
.r-paso-t{font-size:16px;font-weight:800;color:var(--tinta);margin-bottom:4px}
.r-paso-x{font-size:15px;color:var(--tinta-2);line-height:1.6;text-wrap:pretty}
/* nota + errores */
.r-nota{background:var(--tinta);color:#fff;border-radius:var(--r);padding:18px 20px;margin-bottom:14px}
.r-nota-t{font-size:14px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--pais);margin-bottom:6px}
.r-nota-x{font-size:14px;line-height:1.55;color:#d8d8de}
.r-err{background:var(--gris);border-radius:var(--r);padding:18px 20px}
.r-err-t{font-size:14px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta);margin-bottom:8px}
.r-err ul{list-style:none}
.r-err li{font-size:14px;color:var(--tinta-2);padding:4px 0 4px 18px;text-indent:-18px;line-height:1.45}
.r-err li::before{content:"✕";font-weight:800;color:var(--pais);margin-right:10px}

/* ═══ RESPONSIVE topbar ═══ */
@media(max-width:560px){
  .brand-name{font-size:0}       /* solo el mark en mobile chico */
  .brand-mark{font-size:24px}
  .brand-sub{display:none}
  .search{margin-left:0}
}

/* subgrupo de ingredientes (### en los datos) */
.r-ings li.ing-sub{font-weight:800;color:var(--pais);text-transform:uppercase;font-size:14px;letter-spacing:.08em;list-style:none;text-indent:0;padding:12px 0 3px;break-inside:avoid}
.r-ings li.ing-sub::before{display:none}