
/* Cocinando con Tacones — FULL responsive theme */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;line-height:1.55;color:#eae6df;background:#0f0e0c}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
:root{--bg:#0f0e0c;--panel:#171512;--muted:#b7b0a6;--accent:#d9a35f;--accent2:#8c5b2e;--shadow:rgba(0,0,0,.35);--ring:rgba(217,163,95,.35);--radius:16px}
.container{width:min(1100px,92vw);margin:0 auto}
.btn{display:inline-block;padding:.85rem 1.15rem;border-radius:999px;border:1px solid #2a2621;background:linear-gradient(180deg,#1f1c18,#161410);
  box-shadow:0 6px 20px var(--shadow),inset 0 0 0 1px rgba(255,255,255,.03);color:#f3e9da;font-weight:600;letter-spacing:.2px;transition:transform .12s ease, box-shadow .12s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px var(--shadow),0 0 0 4px var(--ring)}
.btn-outline{background:transparent;border-color:#3a332c;color:#e9dcc6}
header{position:sticky;top:0;z-index:50;background:rgba(15,14,12,.6);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.06)}
nav{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0}
.brand{display:flex;align-items:center;gap:.75rem}
.logo{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:radial-gradient(120% 120% at 10% 10%,#2b241d 0%,#181512 80%);border:1px solid #2c2721;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.logo svg{width:24px;height:24px}
.brand h1{font-size:clamp(1.05rem,1.2vw + .6rem,1.25rem);margin:0;letter-spacing:.3px;font-weight:700}
.nav-links{display:flex;gap:.9rem;flex-wrap:wrap}
.nav-links a{padding:.4rem .7rem;border-radius:8px;border:1px solid transparent}
.nav-links a:hover{border-color:#2f2a24;background:#14120f}
.hamburger{display:none;border:1px solid #2f2a24;background:#14120f;border-radius:10px;padding:.5rem;line-height:0}
.hamburger svg{width:22px;height:22px}
@media (max-width:820px){
  .nav-links{display:none}
  .hamburger{display:inline-grid;place-items:center}
  .mobile-menu{display:none;position:absolute;top:56px;left:0;right:0;background:#0f0e0c;border-bottom:1px solid #2a2621;box-shadow:0 12px 30px var(--shadow)}
  .mobile-menu.open{display:block}
  .mobile-menu a{display:block;padding:.9rem 4vw;border-top:1px solid #1e1a15}
}
.hero{position:relative;isolation:isolate;padding:clamp(2.2rem,6vw,5rem) 0 clamp(1.6rem,4vw,3rem)}
.halo{position:absolute;inset:-20% -10% auto -10%;height:60vh;z-index:-1;background:radial-gradient(50% 50% at 50% 0%,rgba(217,163,95,.22),transparent 55%);filter:blur(30px)}
.hero-grid{display:grid;grid-template-columns:1.2fr .9fr;gap:clamp(1rem,3vw,2rem);align-items:center}
@media (max-width:920px){.hero-grid{grid-template-columns:1fr}}
.hero h2{font-size:clamp(1.6rem,2.6vw + .9rem,3rem);line-height:1.15;margin:0 0 .8rem}
.lead{color:var(--muted);font-size:clamp(1rem,.4vw + .9rem,1.1rem);max-width:60ch}
.tagline{margin-top:.85rem;color:#f0e7d7;font-style:italic}
.cta{display:flex;gap:.7rem;margin-top:1.2rem;flex-wrap:wrap}
.glass{border-radius:var(--radius);border:1px solid #2a2621;background:linear-gradient(180deg,rgba(26,22,18,.55),rgba(17,15,12,.7));box-shadow:0 6px 30px var(--shadow),inset 0 0 0 1px rgba(255,255,255,.03)}
.frame{aspect-ratio:9/16;width:min(420px,92vw);margin-inline:auto;position:relative;overflow:hidden}
.frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(35% 12% at 50% 0%,rgba(255,255,255,.08),transparent 40%),linear-gradient(180deg,transparent 70%,rgba(0,0,0,.25))}
section{padding:clamp(1.6rem,5vw,3.2rem) 0}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
.section-title h3{margin:0;font-size:clamp(1.2rem,.6vw + 1.1rem,1.6rem)}
.cards{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}
.card{grid-column:span 4/auto;border-radius:var(--radius);overflow:hidden;position:relative}
@media (max-width:920px){.card{grid-column:span 6/auto}}
@media (max-width:620px){.card{grid-column:span 12/auto}}
.card .media{aspect-ratio:4/5;background:#1c1814}
.card .body{padding:.9rem;background:#14120f;border:1px solid #2a2621;border-top:none}
.card h4{margin:.2rem 0 .4rem;font-size:1.02rem}
.meta{color:#bcb4a8;font-size:.95rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:860px){.grid-2{grid-template-columns:1fr}}
.panel{padding:1.1rem}
.list{margin:.1rem 0 0 0;padding:0;list-style:none;color:#d8cfbf}
.list li{padding:.5rem 0;border-bottom:1px dashed #2a2621}
footer{padding:2rem 0 3rem;color:#bfb7aa;border-top:1px solid #241f19}
footer .grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1.2rem}
@media (max-width:860px){footer .grid{grid-template-columns:1fr}}
.tiny{font-size:.9rem;color:#9e9586}
.mt-1{margin-top:.75rem}.mt-2{margin-top:1.2rem}.mt-3{margin-top:2rem}
.center{text-align:center}
.muted{color: var(--muted)}
.divider{height:1px;background:linear-gradient(90deg,transparent,#2a2621,transparent);margin:1.4rem 0}
.breadcrumbs{font-size:.95rem;color:#bfb2a0;margin:.6rem 0 1rem}
.recipe-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:1rem}
@media (max-width:920px){.recipe-hero{grid-template-columns:1fr}}
.recipe-meta{display:flex;gap:.6rem;flex-wrap:wrap}
.kbd{border:1px solid #3a332c;border-radius:6px;padding:.2rem .45rem;background:#14120f}
code{background:#14120f;border:1px solid #2a2621;padding:.12rem .3rem;border-radius:6px}
.fab-ig{position:fixed;right:14px;bottom:14px;z-index:60;display:inline-grid;place-items:center;width:56px;height:56px;border-radius:999px;background: radial-gradient(120% 120% at 10% 10%, #2b241d 0%, #181512 80%);border:1px solid #2c2721;box-shadow:0 10px 26px var(--shadow), inset 0 0 0 1px rgba(255,255,255,.03)}
.fab-ig:hover{box-shadow:0 14px 34px var(--shadow),0 0 0 6px var(--ring)}
.fab-ig svg{width:26px;height:26px}
@media (max-width:420px){.fab-ig{width:52px;height:52px}}
