/* =============================================================
   Cocino Hoy — Frontend Design v2
   Identidad: puesto de mercado / azulejo / ticket perforado
   Paleta no-default: papel + tinta verde + salvia + ladrillo + mostaza
   ============================================================= */
:root{
  --paper:#FFFCF2;
  --paper-soft:#FFF6E8;
  --ink:#16302E;
  --ink-soft:#2B4A48;
  --muted:#6B7B7A;
  --line:#E7E0D6;
  --sage:#A8C3A0;
  --sage-deep:#7FA87C;
  --brick:#C94A2E;
  --brick-deep:#A03A23;
  --mustard:#E9B44C;
  --mustard-soft:#FFF0C9;
  --radius:20px;
  --radius-sm:14px;
  --shadow:0 12px 32px rgba(22,48,46,.08), 0 2px 8px rgba(22,48,46,.06);
  --shadow-lg:0 20px 44px rgba(22,48,46,.12);
  --sans:"Instrument Sans","DM Sans",system-ui,sans-serif;
  --display:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
  --mono:"Fragment Mono","JetBrains Mono",monospace;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --nav-h:64px;
}
/* =============================================================
   2. Reset & base
   ============================================================= */
*,*::before,*::after{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;tab-size:2;scroll-behavior:smooth;overflow-x:clip}
body{font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;background:var(--paper);color:var(--ink)}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
p{text-wrap:pretty}
h1,h2,h3,h4{text-wrap:balance;line-height:1;letter-spacing:-0.02em}
::selection{background:var(--mustard);color:var(--ink)}
:focus-visible{outline:2px solid var(--brick);outline-offset:3px;border-radius:4px}
.skip-link{position:fixed;top:-100px;left:1rem;padding:.6rem 1rem;background:var(--paper);color:var(--ink);z-index:9999;border-radius:8px;font-weight:600;box-shadow:var(--shadow)}
.skip-link:focus{top:1rem}
.container{width:min(1120px,92vw);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hide-mobile{display:none}
.eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;gap:.5rem}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--mustard);border-radius:999px}
h1{font-family:var(--display);font-size:clamp(2.2rem,6vw,3.8rem);font-weight:800;letter-spacing:-.03em;line-height:.92}
h1 em{font-style:normal;position:relative}
h1 em::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.08em;height:.32em;background:var(--mustard-soft);z-index:-1;transform:rotate(-.6deg)}
h2{font-family:var(--display);font-size:clamp(1.5rem,3.6vw,2.15rem);font-weight:800;letter-spacing:-.025em}
.subtitle{color:var(--muted);font-size:clamp(1rem,2.1vw,1.08rem);margin-top:.7rem;line-height:1.6}
.subtitle strong{color:var(--ink);font-weight:700}
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;padding:.76rem 1.2rem;border-radius:999px;font-weight:700;transition:transform .18s var(--ease-out), background .18s, border-color .18s;line-height:1;letter-spacing:-.01em}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--ink);color:var(--paper);box-shadow:0 8px 20px rgba(22,48,46,.22)}
.btn-primary:hover{background:var(--brick)}
.btn-ghost{background:var(--paper);border:1.5px solid var(--line);box-shadow:0 2px 8px rgba(0,0,0,.03)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn-block{width:100%;padding:1rem 1.2rem;font-size:1.02rem;margin-top:.7rem}
.link-btn{font-family:var(--mono);font-size:.82rem;font-weight:700;color:var(--brick);text-decoration:underline;text-underline-offset:3px}
.ad-slot{min-height:0;margin:1rem auto;text-align:center;overflow:hidden}
.ad-slot:empty{display:none}
.ad-slot ins{display:block}
/* header — papel con línea de azulejo */
.site-header{position:sticky;top:0;z-index:40;background:color-mix(in srgb, var(--paper) 92%, transparent);backdrop-filter:blur(10px);border-bottom:1.5px solid var(--ink)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--nav-h)}
.logo{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:-.02em}
.logo-mark{width:38px;height:38px;display:grid;place-items:center;background:var(--ink);color:var(--paper);border-radius:10px;font-size:1.2rem;border:1.5px solid var(--ink);transform:rotate(-3deg)}
.logo-text{font-family:var(--display);font-size:1.32rem}
.logo-text span{color:var(--brick)}
.header-nav{display:none;gap:1.4rem;font-family:var(--mono);font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.header-nav a{opacity:.72}
.header-nav a:hover{opacity:1;color:var(--brick)}
.header-actions{display:flex;align-items:center;gap:.6rem}
.lang-switch{display:flex;align-items:center;gap:.3rem;border:1.5px solid var(--ink);background:#fff;padding:.32rem .6rem;border-radius:999px;font-family:var(--mono);font-size:.78rem;font-weight:700;box-shadow:2px 2px 0 var(--ink)}
.lang-switch select{border:0;background:transparent;font-weight:700;outline:0;font-family:var(--mono)}
/* hero — limpio y ordenado */
.hero{padding:2rem 0 1.4rem;position:relative;overflow:clip;background:var(--paper);border-bottom:1.5px solid var(--line)}
.hero-grid{display:flex;flex-direction:column;gap:2rem;align-items:center}
.hero-copy{padding:.8rem 0;max-width:520px}
.trust-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem;list-style:none;padding:0}
.trust-row li{font-family:var(--mono);font-size:.74rem;font-weight:700;background:var(--paper-soft);border:1px solid var(--line);padding:.34rem .7rem;border-radius:999px}
/* tool-card — limpio, ordenado, sin perforado exagerado */
.tool-card{background:#fff;border:1.5px solid var(--line);border-radius:18px;box-shadow:0 10px 28px rgba(22,48,46,.07);padding:1.3rem;position:relative}
.tool-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.7rem}
.tool-title{font-family:var(--display);font-size:1.04rem;font-weight:800;display:flex;align-items:center;gap:.4rem}
.tool-title span{width:28px;height:28px;display:grid;place-items:center;background:var(--mustard);border:1.5px solid var(--ink);border-radius:8px;transform:rotate(-4deg)}
.input-wrap{position:relative}
#ingInput{width:100%;resize:vertical;min-height:92px;border:1.5px solid var(--ink);border-radius:14px;padding:.95rem 1rem;font:inherit;font-size:1rem;background:var(--paper-soft);color:var(--ink);transition:border-color .18s, box-shadow .18s}
#ingInput:focus{outline:0;border-color:var(--brick);box-shadow:4px 4px 0 var(--ink)}
#ingInput::placeholder{color:#9aa8a7}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem;min-height:28px}
.chip{display:inline-flex;align-items:center;gap:.35rem;background:var(--paper-soft);border:1px solid var(--line);padding:.32rem .65rem;border-radius:999px;font-family:var(--mono);font-size:.78rem;font-weight:700}
.chip button{width:18px;height:18px;display:grid;place-items:center;background:var(--ink);color:#fff;border-radius:50%;font-size:.72rem;line-height:1}
.chip button:hover{background:var(--brick)}
.quick-row{margin-top:.95rem}
.quick-label{font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.quick-btns{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.45rem}
.quick-btns button{padding:.38rem .7rem;background:#fff;border:1px solid var(--line);border-radius:999px;font-family:var(--mono);font-size:.78rem;font-weight:700}
.quick-btns button:hover{background:var(--paper-soft);border-color:var(--ink)}
.controls-grid{display:grid;gap:.85rem;margin-top:1rem}
.field{border:0}
.field span,.field legend{font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem;display:block}
.field select{width:100%;padding:.7rem .9rem;border:1.5px solid var(--ink);border-radius:12px;background:#fff;font-weight:700;font-family:var(--mono);font-size:.84rem;box-shadow:2px 2px 0 var(--ink)}
.field select:focus{outline:0;border-color:var(--brick)}
.filters{display:flex;flex-wrap:wrap;gap:.4rem .8rem}
.filters label{font-family:var(--mono);font-size:.78rem;font-weight:700;display:flex;align-items:center;gap:.35rem;cursor:pointer;background:#fff;border:1.5px solid var(--ink);padding:.28rem .55rem;border-radius:999px}
.filters label:has(input:checked){background:var(--sage);color:var(--ink)}
.filters input{accent-color:var(--brick);width:14px;height:14px}
.hint{font-size:.84rem;color:var(--muted);margin-top:.6rem;font-style:italic}
.hint em{font-style:normal;font-weight:700;color:var(--ink)}
.tool-states{margin-top:.7rem}
.progress{height:10px;background:var(--line);border:1.5px solid var(--ink);border-radius:999px;overflow:hidden}
.progress-bar{height:100%;width:60%;background:repeating-linear-gradient(45deg,var(--mustard) 0 10px, var(--brick) 10px 20px);border-radius:999px;animation:load 1s var(--ease-out) infinite alternate}
@keyframes load{from{transform:translateX(-12%)} to{transform:translateX(20%)}}
.state p{font-family:var(--mono);font-size:.82rem;font-weight:700;color:var(--muted);margin-top:.5rem}
.state-error p{color:var(--brick)}
.results{margin-top:1rem;display:flex;gap:1rem;overflow-x:auto;overflow-y:hidden;padding-bottom:.6rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.results::-webkit-scrollbar{height:8px}
.results::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px;border:1px solid var(--ink)}
.recipe-card{border:1.5px solid var(--ink);border-radius:16px;overflow:clip;background:#fff;box-shadow:4px 4px 0 var(--ink);min-width:340px;max-width:380px;flex:0 0 360px;scroll-snap-align:start;display:flex;flex-direction:column}
.recipe-body{flex:1}
@media (max-width: 540px){.recipe-card{min-width:82vw;flex-basis:82vw}}
.recipe-head{padding:1rem 1rem .7rem;display:flex;align-items:start;justify-content:space-between;gap:.8rem;border-bottom:1.5px dashed var(--line);background:var(--paper-soft)}
.recipe-head h3{font-family:var(--display);font-size:1.18rem;font-weight:800}
.badge{font-family:var(--mono);font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:.32rem .6rem;border:1.5px solid var(--ink);border-radius:999px;white-space:nowrap;box-shadow:1.5px 1.5px 0 var(--ink)}
.badge-ok{background:var(--sage);color:var(--ink)}
.badge-mid{background:var(--mustard);color:var(--ink)}
.meta-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.45rem}
.meta{font-family:var(--mono);font-size:.72rem;font-weight:700;background:#fff;border:1.5px solid var(--ink);padding:.24rem .5rem;border-radius:999px;color:var(--ink-soft)}
.recipe-body{padding:.9rem 1rem 1rem}
.ing-list{display:flex;flex-wrap:wrap;gap:.35rem;margin:.6rem 0}
.ing{font-family:var(--mono);font-size:.74rem;padding:.28rem .5rem;border-radius:999px;border:1.5px solid var(--ink);background:var(--paper);font-weight:700}
.ing.have{background:var(--sage);color:var(--ink)}
.ing.miss{background:#fff;color:var(--muted);border-style:dashed}
.miss-note{font-size:.86rem;color:var(--muted);margin:.45rem 0}
.miss-note strong{color:var(--ink)}
.steps{margin:.6rem 0 0 1.1rem}
.steps li{margin:.35rem 0;font-size:.94rem}
.steps li::marker{color:var(--brick);font-weight:800}
.recipe-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.recipe-actions button{padding:.55rem .85rem;border-radius:999px;font-family:var(--mono);font-size:.76rem;font-weight:800;border:1.5px solid var(--ink);background:#fff;box-shadow:1.5px 1.5px 0 var(--ink)}
.recipe-actions button.primary{background:var(--ink);color:var(--paper)}
.recipe-actions button:hover{transform:translateY(-1px)}
.tool-footer{margin-top:1rem;padding-top:.9rem;border-top:1.5px dashed var(--line)}
.privacy-badge{font-family:var(--mono);font-size:.72rem;font-weight:800;background:var(--sage);color:var(--ink);display:inline-block;padding:.32rem .6rem;border:1.5px solid var(--ink);border-radius:999px}
.limits{font-size:.82rem;color:var(--muted);margin-top:.45rem}
/* sections */
.section{padding:1.9rem 0}
.section-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:.8rem;margin-bottom:1rem}
.section-head h2::after{content:"";display:block;width:36px;height:4px;background:var(--mustard);border-radius:999px;margin-top:.35rem;border:1px solid var(--ink)}
.cards-grid{display:grid;gap:1rem}
.card{background:#fff;border:1.5px solid var(--ink);border-radius:16px;padding:1rem;box-shadow:4px 4px 0 var(--ink);transition:transform .15s var(--ease-out)}
.card:hover{transform:translate(-1px,-1px) rotate(-.2deg);box-shadow:6px 6px 0 var(--ink)}
.card h3{font-family:var(--display);font-size:1.14rem}
.card p{color:var(--muted);font-size:.9rem;margin-top:.25rem;font-family:var(--mono)}
.card .card-meta{margin-top:.6rem;display:flex;gap:.4rem;flex-wrap:wrap}
.card .btn{margin-top:.8rem;width:100%}
.section-how .steps{display:grid;gap:1rem}
.step{background:#fff;border:1.5px solid var(--ink);border-radius:16px;padding:1.1rem;display:grid;gap:.4rem;box-shadow:4px 4px 0 var(--ink)}
.step-n{width:30px;height:30px;display:grid;place-items:center;background:var(--mustard);color:var(--ink);border:1.5px solid var(--ink);border-radius:50%;font-family:var(--mono);font-weight:800;font-size:.82rem}
.seo-grid{display:grid;gap:1.2rem}
.keywords{font-family:var(--mono);font-size:.74rem}
.faq-list{display:grid;gap:.7rem}
.faq-list details{background:#fff;border:1.5px solid var(--ink);border-radius:14px;padding:.9rem 1rem;box-shadow:2px 2px 0 var(--ink)}
.faq-list summary{font-weight:800;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:.8rem;font-family:var(--display)}
.faq-list summary::after{content:"+";width:26px;height:26px;display:grid;place-items:center;background:var(--mustard);border:1.5px solid var(--ink);border-radius:50%;font-weight:800;flex-shrink:0}
.faq-list details[open] summary::after{content:"—"}
.faq-list p{color:var(--muted);margin-top:.6rem}
.site-footer{margin-top:1.5rem;border-top:1.5px solid var(--ink);background:var(--paper-soft)}
.footer-inner{display:flex;flex-direction:column;gap:.8rem;padding:1.2rem 0}
.footer-inner nav{display:flex;gap:1rem;font-family:var(--mono);font-size:.82rem;font-weight:700}
.footer-note{text-align:center;color:var(--muted);font-family:var(--mono);font-size:.74rem;padding:0 0 1.2rem}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none}}
.results .recipe-card{animation:fadeIn .32s var(--ease-out) both}
@media (min-width: 540px){.cards-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width: 720px){.hide-mobile{display:inline-flex}.header-nav{display:flex}.controls-grid{grid-template-columns:1fr 1.2fr}}
@media (min-width: 960px){
  .hero-grid{flex-direction:column;gap:1.8rem}
  .hero{padding:2rem 0 1.6rem}
  .cards-grid{grid-template-columns:repeat(3,1fr)}
  .section-how .steps{grid-template-columns:repeat(3,1fr)}
  .footer-inner{flex-direction:row;justify-content:space-between;align-items:center}
}
/* modal — receta inspiración */
#recipeModal{border:1.5px solid var(--ink);border-radius:18px;padding:1.2rem;max-width:640px;width:92vw;box-shadow:0 20px 48px rgba(22,48,46,.18)}
#recipeModal::backdrop{background:rgba(22,48,46,.45);backdrop-filter:blur(4px)}
#recipeModal .modal-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;border-bottom:1.5px solid var(--line);padding-bottom:.8rem}
@media print{
  .site-header,.hero-copy,.ad-slot,.section,.site-footer,.tool-head,.input-wrap,.quick-row,.controls-grid,.btn-block,.hint,.tool-states,.tool-footer,.header-nav,.header-actions{display:none !important}
  body{background:#fff}
  .hero{padding:0;background:none}
  .hero::after{display:none}
  .tool-card{border:none;box-shadow:none;padding:0}
  .tool-card::before{display:none}
  #results{display:block !important}
  .recipe-card{break-inside:avoid;box-shadow:none;border:1.5px solid #000}
  .recipe-actions{display:none !important}
}
@media (prefers-reduced-motion: reduce){.progress-bar{animation:none;width:60%}}