/* ===================== RESET & BASE ===================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
:root{
  --bg:#fbf7f1;
  --bg-soft:#f3ece2;
  --card:#ffffff;
  --ink:#2b2118;
  --ink-soft:#6c6258;
  --line:#e7ddcf;
  --brand:#d6452a;
  --brand-dark:#b5371f;
  --brand-soft:#fbe7df;
  --accent:#1f8a70;
  --accent-soft:#e0f1ec;
  --gold:#e0a83d;
  --shadow:0 10px 30px -12px rgba(70,45,20,.25);
  --shadow-sm:0 4px 14px -6px rgba(70,45,20,.2);
  --radius:18px;
  --radius-sm:12px;
  --maxw:1180px;
}
html{ scroll-behavior:smooth; }
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:'Fraunces',Georgia,serif; line-height:1.15; font-weight:600; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.container.narrow{ max-width:760px; }
.muted{ color:var(--ink-soft); }
.small{ font-size:.85rem; }
.is-hidden{ display:none !important; }
.accent{ color:var(--brand); }

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  border:none; border-radius:999px; padding:.7em 1.4em; font-weight:600;
  background:var(--brand); color:#fff; transition:.18s ease; font-size:.95rem;
}
.btn:hover{ background:var(--brand-dark); transform:translateY(-1px); }
.btn-light{ background:#fff; color:var(--brand); }
.btn-light:hover{ background:#fff; }
.btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line); }
.btn-ghost:hover{ background:var(--bg-soft); }
.btn-block{ width:100%; }
.btn-load{ display:block; margin:34px auto 0; }

/* ===================== HEADER ===================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,247,241,.86); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; gap:24px; height:68px; }
.brand{ display:flex; align-items:center; gap:9px; font-size:1.25rem; font-weight:700; }
.brand-mark{ width:32px; height:32px; display:block; }
img.brand-mark{ filter:drop-shadow(0 2px 4px rgba(70,45,20,.18)); }
.brand-text strong{ color:var(--brand); }
.main-nav{ display:flex; gap:6px; margin-left:auto; }
.nav-link{
  padding:.5em .95em; border-radius:999px; font-weight:500; color:var(--ink-soft);
  transition:.15s;
}
.nav-link:hover{ color:var(--ink); background:var(--bg-soft); }
.nav-link.is-active{ color:var(--brand); background:var(--brand-soft); }
.nav-toggle{ display:none; background:none; border:none; font-size:1.5rem; }

/* Selector de idioma */
.lang-switcher{ display:flex; gap:4px; background:var(--bg-soft); padding:4px; border-radius:999px; border:1px solid var(--line); }
.lang-btn{ display:inline-flex; align-items:center; gap:5px; border:none; background:transparent; padding:.32em .6em; border-radius:999px; font-size:.78rem; font-weight:600; color:var(--ink-soft); letter-spacing:.02em; }
.lang-flag{ font-size:.95rem; line-height:1; }
.lang-btn:hover{ color:var(--ink); }
.lang-btn.is-active{ background:#fff; color:var(--brand); box-shadow:var(--shadow-sm); }

/* ===================== HERO ===================== */
.hero{
  background:linear-gradient(160deg,#fff5ee 0%, #fbf7f1 55%, #f0f6f3 100%);
  border-bottom:1px solid var(--line);
  padding:56px 0 64px;
}
.hero-inner{ display:grid; grid-template-columns:1.3fr .7fr; gap:40px; align-items:center; }
.eyebrow{
  display:inline-block; font-weight:600; font-size:.8rem; letter-spacing:.04em;
  text-transform:uppercase; color:var(--accent); background:var(--accent-soft);
  padding:.35em .8em; border-radius:999px; margin-bottom:16px;
}
.hero h1{ font-size:clamp(1.9rem,4.2vw,3rem); font-weight:700; margin-bottom:16px; text-transform:uppercase; line-height:1.1; letter-spacing:-.01em; }
.lead{ font-size:1.1rem; color:var(--ink-soft); max-width:38em; margin-bottom:22px; }
.hero-free{ display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-weight:700; font-size:.9rem; color:var(--accent); background:var(--accent-soft); padding:.45em 1em; border-radius:999px; letter-spacing:.01em; }
.hero-search{ display:flex; gap:8px; max-width:520px; background:#fff; padding:7px; border-radius:999px; box-shadow:var(--shadow-sm); border:1px solid var(--line); }
.hero-search input{ flex:1; border:none; outline:none; padding:.6em 1em; font-size:1rem; background:transparent; }
.hero-search button{ border:none; background:var(--brand); color:#fff; border-radius:999px; padding:.6em 1.4em; font-weight:600; }
.hero-search button:hover{ background:var(--brand-dark); }
.hero-stats{ display:flex; gap:28px; margin-top:26px; flex-wrap:wrap; }
.hero-stats .stat strong{ display:block; font-family:'Fraunces',serif; font-size:1.7rem; color:var(--brand); }
.hero-stats .stat span{ font-size:.85rem; color:var(--ink-soft); }
.hero-art{ position:relative; height:280px; }
.hero-card{
  position:absolute; width:120px; height:120px; border-radius:24px; background:#fff;
  display:grid; place-items:center; font-size:3.4rem; box-shadow:var(--shadow);
}
.hero-card:nth-child(1){ top:0; left:20%; transform:rotate(-7deg); }
.hero-card:nth-child(2){ top:30px; right:0; transform:rotate(6deg); }
.hero-card:nth-child(3){ bottom:10px; left:0; transform:rotate(5deg); }
.hero-card:nth-child(4){ bottom:0; right:18%; transform:rotate(-5deg); font-size:1.4rem; font-weight:700; color:var(--brand); font-family:'Fraunces',serif; }

/* ===================== SECTIONS ===================== */
.section-title{ font-size:1.7rem; margin:48px 0 22px; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin:54px 0 22px; }
.section-head .section-title{ margin:0; }
.link-more{ color:var(--brand); font-weight:600; }

/* ===================== CATEGORY GRID ===================== */
.cat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.cat-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:20px 16px; text-align:center; transition:.18s; cursor:pointer;
}
.cat-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); border-color:var(--brand-soft); }
.cat-card .emoji{ font-size:2rem; }
.cat-card .name{ font-weight:600; margin-top:8px; font-size:.95rem; }
.cat-card .count{ font-size:.8rem; color:var(--ink-soft); }

/* ===================== RECIPE GRID & CARDS ===================== */
.recipe-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:20px; }
.recipe-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; cursor:pointer; transition:.18s; display:flex; flex-direction:column;
}
.recipe-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.recipe-thumb{
  height:140px; display:grid; place-items:center; font-size:3.6rem;
  background:linear-gradient(135deg,var(--brand-soft),#fff);
}
.recipe-body{ padding:15px 16px 18px; display:flex; flex-direction:column; gap:9px; flex:1; }
.recipe-cat{ font-size:.72rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--accent); }
.recipe-name{ font-family:'Fraunces',serif; font-size:1.12rem; font-weight:600; line-height:1.2; }
.recipe-desc{ font-size:.85rem; color:var(--ink-soft); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.recipe-meta{ display:flex; gap:14px; margin-top:auto; font-size:.8rem; color:var(--ink-soft); flex-wrap:wrap; }
.recipe-meta span{ display:inline-flex; align-items:center; gap:4px; }
.diet-dots{ display:flex; gap:5px; }
.diet-dot{ font-size:.72rem; padding:.15em .5em; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-weight:600; }

/* ===================== PAGE HEAD / TOOLBAR ===================== */
.page-head{ padding:40px 0 8px; }
.page-head h1{ font-size:2.2rem; }
.toolbar{ display:flex; gap:12px; align-items:center; margin:18px 0 26px; flex-wrap:wrap; }
.search-box{ flex:1; min-width:220px; }
.search-box input{ width:100%; padding:.75em 1.1em; border:1px solid var(--line); border-radius:999px; font-size:1rem; outline:none; background:#fff; }
.search-box input:focus{ border-color:var(--brand); }
.select{ padding:.7em 1em; border:1px solid var(--line); border-radius:999px; background:#fff; font-size:.92rem; outline:none; }
#filterToggle{ display:none; }

/* ===================== LAYOUT FILTERS ===================== */
.layout{ display:grid; grid-template-columns:248px 1fr; gap:30px; align-items:start; padding-bottom:60px; }
.filters{ position:sticky; top:90px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; }
/* Controles de la hoja de filtros (solo móvil) */
.filters-mobile-head{ display:none; }
.filters-apply{ display:none; }
.filters-backdrop{ display:none; position:fixed; inset:0; background:rgba(40,28,16,.45); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); z-index:55; }
.filters-backdrop.is-open{ display:block; }
.filter-block{ padding:14px 0; border-bottom:1px solid var(--line); }
.filter-block:first-child{ padding-top:0; }
.filter-block h3{ font-family:'Inter',sans-serif; font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-bottom:10px; }
.filter-list{ display:flex; flex-direction:column; gap:7px; max-height:230px; overflow-y:auto; }
.filter-item{ display:flex; align-items:center; gap:8px; font-size:.9rem; cursor:pointer; }
.filter-item input{ accent-color:var(--brand); width:16px; height:16px; }
.filter-item .c{ margin-left:auto; color:var(--ink-soft); font-size:.78rem; }
#timeRange{ width:100%; accent-color:var(--brand); }

.active-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.chip{ display:inline-flex; align-items:center; gap:6px; background:var(--brand-soft); color:var(--brand-dark); padding:.35em .8em; border-radius:999px; font-size:.83rem; font-weight:500; }
.chip button{ border:none; background:none; color:inherit; font-size:1rem; line-height:1; }

.empty-state{ text-align:center; padding:60px 0; }
.empty-state p{ font-size:1.1rem; margin-bottom:16px; }

/* ===================== MODAL ===================== */
.modal-overlay{ position:fixed; inset:0; background:rgba(40,28,16,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); z-index:100; display:grid; place-items:center; padding:20px; }
.modal{ background:var(--bg); width:100%; max-width:760px; max-height:90vh; overflow-y:auto; border-radius:24px; position:relative; box-shadow:var(--shadow); }
.modal-close{ position:absolute; top:16px; right:16px; z-index:2; width:38px; height:38px; border-radius:50%; border:none; background:#fff; box-shadow:var(--shadow-sm); font-size:1rem; }
.modal-close:hover{ background:var(--bg-soft); }
.modal-hero{ height:180px; display:grid; place-items:center; font-size:5rem; background:linear-gradient(135deg,var(--brand-soft),var(--accent-soft)); border-radius:24px 24px 0 0; }
.modal-content{ padding:26px 32px 36px; }
.modal-content h2{ font-size:1.9rem; margin-bottom:6px; }
.modal-tags{ display:flex; flex-wrap:wrap; gap:7px; margin:14px 0; }
.tag{ font-size:.78rem; background:var(--bg-soft); padding:.3em .7em; border-radius:999px; color:var(--ink-soft); }
.modal-facts{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 24px; }
.fact{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 16px; text-align:center; flex:1; min-width:90px; }
.fact strong{ display:block; font-family:'Fraunces',serif; font-size:1.2rem; }
.fact span{ font-size:.76rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em; }
.modal-cols{ display:grid; grid-template-columns:1fr 1.5fr; gap:30px; margin-top:10px; }
.modal h3.block-title{ font-size:1.15rem; margin-bottom:12px; padding-bottom:8px; border-bottom:2px solid var(--brand-soft); }
.ing-list{ list-style:none; display:flex; flex-direction:column; gap:9px; }
.ing-list li{ display:flex; gap:9px; font-size:.93rem; align-items:flex-start; }
.ing-list li::before{ content:'•'; color:var(--brand); font-weight:700; }
.step-list{ list-style:none; counter-reset:step; display:flex; flex-direction:column; gap:14px; }
.step-list li{ counter-increment:step; display:flex; gap:13px; font-size:.95rem; }
.step-list li::before{ content:counter(step); flex:0 0 28px; height:28px; background:var(--brand); color:#fff; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:.85rem; font-family:'Inter'; }
.tips-box{ margin-top:26px; background:var(--accent-soft); border-radius:var(--radius-sm); padding:18px 20px; }
.tips-box h3{ font-family:'Inter'; font-size:.95rem; color:var(--accent); margin-bottom:8px; display:flex; gap:6px; }
.tips-box ul{ padding-left:18px; display:flex; flex-direction:column; gap:6px; font-size:.9rem; }

/* Selector de robot en la receta */
.machine-picker{ margin:0 0 16px; padding:13px 15px; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius-sm); }
.mp-label{ display:block; font-size:.85rem; font-weight:600; color:var(--ink); margin-bottom:9px; }
.mp-row{ display:flex; flex-wrap:wrap; gap:7px; }
.mp-btn{ border:1.5px solid var(--line); background:#fff; padding:.42em .85em; border-radius:999px; font-size:.82rem; font-weight:600; color:var(--ink-soft); transition:.15s; }
.mp-btn:hover{ border-color:var(--brand); color:var(--ink); }
.mp-btn.is-active{ background:var(--brand); border-color:var(--brand); color:#fff; }
.machine-note{ margin-top:12px; }
.mp-prompt{ color:var(--brand-dark); font-weight:600; font-size:.95rem; }

/* ===================== CTA BAND ===================== */
.cta-band{
  margin:64px 0; background:linear-gradient(120deg,var(--brand),var(--brand-dark));
  color:#fff; border-radius:var(--radius); padding:34px 40px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cta-band h2{ font-size:1.6rem; color:#fff; }
.cta-band p{ opacity:.9; max-width:40em; }

/* ===================== TRUCOS ===================== */
.trucos-filter{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 28px; }
.truco-pill{ border:1.5px solid var(--line); background:#fff; padding:.5em 1.1em; border-radius:999px; font-size:.88rem; font-weight:500; color:var(--ink-soft); }
.truco-pill.is-active{ background:var(--brand); border-color:var(--brand); color:#fff; }
.trucos-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; padding-bottom:60px; }
.truco-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; transition:.18s; }
.truco-card:hover{ box-shadow:var(--shadow-sm); transform:translateY(-3px); }
.truco-card .truco-emoji{ font-size:1.8rem; }
.truco-card h3{ font-size:1.15rem; margin:10px 0 8px; }
.truco-card p{ font-size:.92rem; color:var(--ink-soft); }
.truco-card .truco-cat{ font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--accent); }

/* ===================== PROSE ===================== */
.prose{ padding-bottom:60px; }
.prose p{ margin-bottom:16px; color:var(--ink-soft); }
.prose h2{ font-size:1.4rem; margin:28px 0 12px; color:var(--ink); }
.prose ul{ padding-left:22px; margin-bottom:16px; display:flex; flex-direction:column; gap:8px; color:var(--ink-soft); }
.example-step{ background:var(--bg-soft); border-left:3px solid var(--brand); padding:12px 16px; border-radius:8px; }
.prose .equiv{ width:100%; border-collapse:collapse; margin:10px 0 22px; font-size:.92rem; }
.prose .equiv th, .prose .equiv td{ border:1px solid var(--line); padding:9px 12px; text-align:left; vertical-align:top; color:var(--ink); }
.prose .equiv thead th{ background:var(--bg-soft); font-family:'Inter',sans-serif; font-weight:600; }
.prose .equiv td:first-child{ font-weight:600; }
@media (max-width:560px){ .prose .equiv{ font-size:.8rem; } .prose .equiv th, .prose .equiv td{ padding:6px 8px; } }

/* ===================== FOOTER ===================== */
.site-footer{ background:#2b2118; color:#e9e0d4; padding:44px 0 30px; margin-top:40px; }
.footer-inner{ display:flex; flex-wrap:wrap; gap:30px; justify-content:space-between; align-items:flex-start; }
.site-footer .muted{ color:#b3a895; }
.site-footer nav{ display:flex; flex-direction:column; gap:8px; }
.site-footer nav a:hover{ color:#fff; }
.footer-brand{ display:inline-flex; align-items:center; gap:8px; font-size:1.05rem; }
.footer-brand img{ width:26px; height:26px; }

/* ===================== AUTH + COMUNIDAD ===================== */
.auth-area{ display:flex; align-items:center; }
.ua-box{ display:flex; align-items:center; gap:7px; background:var(--bg-soft); border:1px solid var(--line); padding:3px 6px 3px 3px; border-radius:999px; }
.ua-avatar{ width:28px; height:28px; border-radius:50%; object-fit:cover; display:grid; place-items:center; }
.ua-initial{ background:var(--brand); color:#fff; font-weight:700; font-size:.85rem; }
.ua-name{ font-size:.82rem; font-weight:600; max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ua-btn{ border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:.3em .7em; font-size:.8rem; font-weight:600; color:var(--ink-soft); }
.ua-btn:hover{ border-color:var(--brand); color:var(--ink); }
.ua-signin{ background:var(--brand); border-color:var(--brand); color:#fff; }
.ua-signin:hover{ background:var(--brand-dark); color:#fff; }
.ua-mod{ font-size:.95rem; }
.ua-ic{ display:none; }

/* Espacios de anuncio (AdSense) — placeholder hasta la aprobación */
.ad-slot{ margin:22px 0; min-height:100px; border:2px dashed var(--line); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; text-align:center; padding:14px; color:var(--ink-soft); font-size:.82rem; font-weight:600; letter-spacing:.02em; background:repeating-linear-gradient(45deg,#fff,#fff 12px,var(--bg-soft) 12px,var(--bg-soft) 24px); }
.ad-slot::before{ content:"📢 Espacio para anuncio · se activa al aprobar AdSense"; }
.ad-rect{ min-height:220px; }

.cb-overlay{ position:fixed; inset:0; z-index:120; background:rgba(40,28,16,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); display:grid; place-items:center; padding:20px; }
.cb-card{ position:relative; background:var(--bg); border-radius:20px; box-shadow:var(--shadow); width:100%; max-width:400px; padding:28px 26px; display:flex; flex-direction:column; gap:10px; max-height:90vh; overflow-y:auto; }
.cb-card.cb-mod{ max-width:640px; }
.cb-card h3{ font-size:1.4rem; margin-bottom:4px; }
.cb-close{ position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%; border:none; background:#fff; box-shadow:var(--shadow-sm); }
.cb-google{ border:1.5px solid var(--line); background:#fff; border-radius:10px; padding:.7em; font-weight:600; font-size:.95rem; cursor:pointer; }
.cb-google:hover{ border-color:var(--brand); }
.cb-or{ text-align:center; position:relative; color:var(--ink-soft); font-size:.8rem; margin:4px 0; }
.cb-or span{ background:var(--bg); padding:0 10px; position:relative; z-index:1; }
.cb-or::before{ content:""; position:absolute; top:50%; left:0; right:0; height:1px; background:var(--line); }
.cb-card input{ border:1px solid var(--line); border-radius:10px; padding:.65em .8em; font-size:.95rem; outline:none; }
.cb-card input:focus{ border-color:var(--brand); }
.cb-actions{ display:flex; gap:8px; }
.cb-actions .cb-login{ flex:1; background:var(--brand); color:#fff; border:none; border-radius:10px; padding:.7em; font-weight:600; cursor:pointer; }
.cb-actions .cb-signup{ flex:1; background:#fff; color:var(--brand); border:1.5px solid var(--brand); border-radius:10px; padding:.7em; font-weight:600; cursor:pointer; }
.cb-err{ color:var(--brand-dark); font-size:.82rem; min-height:1em; }

.community{ margin-top:28px; border-top:1px solid var(--line); padding-top:20px; }
.cb-title{ border-bottom:none !important; margin-bottom:12px !important; }
.cb-muted{ color:var(--ink-soft); font-size:.9rem; }
.cb-avg{ display:flex; align-items:center; gap:8px; margin-bottom:12px; font-size:1.05rem; }
.cb-stars{ color:var(--gold); letter-spacing:1px; }
.cb-item{ display:flex; gap:11px; padding:12px 0; border-bottom:1px solid var(--line); }
.cb-av{ width:36px; height:36px; border-radius:50%; object-fit:cover; flex:0 0 36px; display:grid; place-items:center; }
.cb-initial{ background:var(--accent); color:#fff; font-weight:700; }
.cb-body{ flex:1; min-width:0; }
.cb-uname{ font-weight:600; font-size:.9rem; display:block; margin-bottom:2px; }
.cb-body p{ font-size:.92rem; margin-top:3px; }
.cb-photo{ border-radius:12px; margin-top:6px; max-height:280px; width:auto; }
.cb-imp{ color:var(--accent); font-weight:600; }
.cb-del-one{ border:none; background:transparent; cursor:pointer; font-size:1rem; opacity:.45; flex:0 0 auto; align-self:flex-start; padding:2px 4px; }
.cb-del-one:hover{ opacity:1; }

.cb-cta{ background:var(--bg-soft); border-radius:var(--radius-sm); padding:16px; text-align:center; margin-top:14px; }
.cb-cta .cb-login-cta{ margin-top:10px; }
.cb-forms{ display:flex; flex-direction:column; gap:16px; margin-top:18px; }
.cb-form{ display:flex; flex-direction:column; gap:7px; }
.cb-form label{ font-size:.85rem; font-weight:600; }
.cb-hint{ font-weight:400; color:var(--ink-soft); }
.cb-form textarea, .cb-form input[type=file]{ border:1px solid var(--line); border-radius:10px; padding:.6em .8em; font-family:inherit; font-size:.92rem; resize:vertical; outline:none; background:#fff; }
.cb-form textarea:focus{ border-color:var(--brand); }
.cb-form .btn{ align-self:flex-start; }
.cb-extra{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.cb-file-lbl{ display:inline-flex; align-items:center; gap:6px; font-size:.85rem; cursor:pointer; }
.cb-check{ display:inline-flex; align-items:center; gap:6px; font-size:.85rem; cursor:pointer; }
.cb-check input, .cb-file-lbl input[type=file]{ accent-color:var(--brand); }
.cb-star-input{ font-size:1.5rem; color:var(--gold); cursor:pointer; -webkit-user-select:none; user-select:none; }
.cb-star-input .cb-si{ cursor:pointer; }
.cb-msg{ font-size:.88rem; min-height:1em; }
.cb-ok{ color:var(--accent); font-weight:600; } .cb-bad{ color:var(--brand-dark); font-weight:600; }

.cb-pending{ display:flex; flex-direction:column; gap:10px; }
.cb-pend{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; }
.cb-modact{ display:flex; gap:8px; margin-top:10px; }
.cb-approve{ background:var(--accent); border:none; color:#fff; }

/* Muro de registro (gate) */
.gate{ margin-top:14px; background:linear-gradient(180deg, #fff, var(--brand-soft)); border:1px dashed var(--brand); border-radius:var(--radius-sm); padding:20px; text-align:center; }
.gate-lock{ font-size:1.7rem; display:block; }
.gate p{ font-weight:600; margin:6px 0 13px; color:var(--brand-dark); }

/* Banner de cookies */
.cookie-banner{ position:fixed; left:16px; right:16px; bottom:16px; z-index:130; background:var(--ink); color:#f3ece2; border-radius:var(--radius-sm); box-shadow:var(--shadow); padding:15px 20px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; max-width:900px; margin:0 auto; }
.cookie-banner p{ font-size:.88rem; margin:0; flex:1; min-width:220px; }
.cookie-banner a{ color:#fff; text-decoration:underline; }
.cookie-acts{ display:flex; gap:8px; }
.cookie-acts .cookie-ok{ background:var(--brand); }
.cookie-acts .cookie-no{ background:transparent; color:#f3ece2; border:1.5px solid rgba(255,255,255,.4); }
.cookie-acts .cookie-no:hover{ background:rgba(255,255,255,.12); }

/* ===================== RESPONSIVE ===================== */
@media (max-width:900px){
  .hero{ padding:42px 0 48px; }
  .hero-inner{ grid-template-columns:1fr; }
  .hero-art{ display:none; }
  .layout{ grid-template-columns:1fr; }
  .filters{ position:fixed; inset:0; top:auto; bottom:0; max-height:85vh; overflow-y:auto; border-radius:24px 24px 0 0; z-index:60; transform:translateY(105%); transition:transform .25s; box-shadow:0 -10px 40px -10px rgba(70,45,20,.35); padding:16px 20px 20px; }
  .filters.is-open{ transform:translateY(0); }
  #filterToggle{ display:inline-flex; }
  .modal-cols{ grid-template-columns:1fr; gap:22px; }
  .filters-mobile-head{ display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:var(--card); padding:6px 0 12px; margin-bottom:4px; border-bottom:1px solid var(--line); z-index:2; }
  .filters-mobile-head strong{ font-family:'Fraunces',serif; font-size:1.25rem; }
  .filters-close{ width:36px; height:36px; border-radius:50%; border:none; background:var(--bg-soft); font-size:1rem; }
  .filters-close:hover{ background:var(--line); }
  .filters-apply{ display:block; position:sticky; bottom:0; margin-top:14px; }
}
/* Tablet / móvil: menú hamburguesa */
@media (max-width:760px){
  .header-inner{ gap:8px; height:60px; }
  .brand{ flex-shrink:0; }
  .main-nav{
    position:absolute; top:60px; left:0; right:0; background:var(--bg);
    flex-direction:column; gap:2px; padding:10px 16px 16px; border-bottom:1px solid var(--line);
    box-shadow:var(--shadow); display:none;
  }
  .main-nav.is-open{ display:flex; }
  .main-nav .nav-link{ padding:.7em .9em; }
  .auth-area{ margin-left:auto; order:1; }
  .lang-switcher{ order:2; }
  .nav-toggle{ display:block; order:3; margin-left:0; }
}
@media (max-width:680px){
  .section-head{ flex-direction:column; gap:6px; align-items:flex-start; }
  .modal-content{ padding:22px; }
  .modal-facts{ gap:8px; }
  .fact{ min-width:70px; padding:8px 10px; }
  .recipe-grid{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; }
  .cat-grid{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; }
  .toolbar{ gap:8px; }
  .toolbar .select, .toolbar #filterToggle{ flex:1; }
  .cta-band{ padding:26px 24px; }
}
/* Teléfonos pequeños: selector de idioma compacto (solo banderas) */
@media (max-width:430px){
  .brand-text{ font-size:1.05rem; }
  .lang-btn{ padding:.34em .5em; gap:0; }
  .lang-code{ display:none; }
  .ua-name{ display:none; }
  .ua-modtx{ display:none; }
  .ua-btn{ padding:.3em .55em; }
  .ua-signin .ua-tx{ display:none; }
  .ua-signin .ua-ic{ display:inline; font-size:1.05rem; }
  .recipe-grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
  .recipe-thumb{ height:110px; font-size:2.8rem; }
}