:root{--ink:#141210;--paper:#faf7f2;--cream:#f3ede3;--red:#b0431f;--gold:#c99a2e;--muted:#6f6459;--line:#e5dccb}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:16px/1.65 Inter,system-ui,Arial,sans-serif;color:var(--ink);background:var(--paper)}
a{color:inherit}
img{max-width:100%;display:block}
.container{width:min(1180px,calc(100% - 36px));margin:auto}
.topbar{background:var(--ink);color:#fff;font-size:.8rem;padding:7px 0}
.topbar .container{display:flex;justify-content:space-between;gap:12px}
.site-header{position:sticky;top:0;z-index:50;background:rgba(250,247,242,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{height:72px;display:flex;align-items:center;gap:26px}
.brand{text-decoration:none;font:800 1.3rem Georgia,serif;letter-spacing:.03em}
.brand b{color:var(--red)}
.nav-links{display:flex;align-items:center;gap:20px;margin-left:auto;flex-wrap:wrap}
.nav-links a{text-decoration:none;font-weight:700;font-size:.9rem}
.nav-links a:hover{color:var(--red)}
.menu-btn{display:none;margin-left:auto;background:none;border:0;font-size:1.4rem}
.hero{min-height:560px;color:#fff;display:grid;place-items:center;position:relative;background:linear-gradient(100deg,rgba(24,14,8,.92) 0%,rgba(24,14,8,.72) 38%,rgba(24,14,8,.28) 68%,rgba(24,14,8,.45) 100%),url('/assets/img/hero-composicion.jpg') center/cover no-repeat;background-size:cover;background-position:center 38%;background-attachment:fixed}
/* Parallax compartido: incluye los heroes que aportan su fondo mediante estilo inline. */
.hero[style*="background"]{background-attachment:fixed!important}
.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(20,12,6,.88),rgba(20,12,6,.55) 55%,rgba(20,12,6,.25))}
.hero-content{position:relative;z-index:1;max-width:860px;padding:60px 0}
.kicker{text-transform:uppercase;letter-spacing:.18em;font-size:.75rem;font-weight:800;color:#e8c989}
.hero h1{font:700 clamp(2.4rem,5vw,4.4rem)/1.04 Georgia,serif;margin:.5rem 0 1rem}
.hero p{font-size:1.15rem;max-width:680px;color:#efe6d8}
.button{border:0;border-radius:8px;background:var(--red);color:#fff;padding:12px 20px;font-weight:800;text-decoration:none;display:inline-block}
.button.gold{background:var(--gold)}
.button.ghost{background:transparent;border:2px solid #fff}
.section{padding:72px 0}
.section.white{background:var(--cream)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.section-head h2,.copy h2{font:700 clamp(1.7rem,3vw,2.6rem)/1.1 Georgia,serif;margin:0}
.eyebrow{color:var(--red);font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:.75rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;display:block;transition:.3s;box-shadow:0 10px 26px #14100a12}
.card:hover{transform:translateY(-5px)}
.card .thumb{height:190px;background:#fff;display:grid;place-items:center;padding:12px;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:contain}
.card .body{padding:16px 18px 18px}
.card h3{font:700 1.05rem Georgia,serif;margin:0 0 6px}
.card p{margin:0;color:var(--muted);font-size:.9rem}
.tag{display:inline-block;background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:.75rem;font-weight:800;color:var(--muted)}
.cat-card{position:relative;min-height:210px;border-radius:14px;overflow:hidden;color:#fff;text-decoration:none;display:flex;align-items:flex-end;background-size:cover;background-position:center;box-shadow:0 12px 30px #10202a22;transition:.3s}
.cat-card:hover{transform:translateY(-6px)}
.cat-card:before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#150d06e8,transparent 78%)}
.cat-card .inner{position:relative;padding:18px 20px}
.cat-card h3{font:700 1.35rem Georgia,serif;margin:0 0 4px}
.cat-card span{font-size:.85rem;color:#e8ddcd}
.flip-card{perspective:1000px;min-height:250px;cursor:pointer}
.flip-inner{position:relative;width:100%;height:100%;min-height:250px;transition:transform .6s;transform-style:preserve-3d}
.flip-card.flipped .flip-inner{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:14px;padding:22px;border:1px solid var(--line);background:#fff;box-shadow:0 8px 24px #12212b0d}
.flip-back{transform:rotateY(180deg);background:var(--ink);color:#f2ead9}
.flip-face h3{font:700 1.1rem Georgia,serif;margin:0 0 8px}
.flip-face ul{margin:0;padding-left:18px;font-size:.92rem}
.flip-face li{margin:6px 0}
.num{font:700 2.6rem Georgia,serif;color:#d9c9a5;line-height:1}
.step{display:flex;gap:14px;margin:14px 0;align-items:flex-start}
.step .n{min-width:34px;height:34px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:800}
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.pc{border-radius:12px;padding:18px 20px}
.pc.pros{background:#eef5ec;border:1px solid #cfe0c8}
.pc.cons{background:#f9ece7;border:1px solid #ecd4c8}
.pc h3{margin:0 0 8px;font-size:1rem}
.pc ul{margin:0;padding-left:18px;font-size:.92rem}
.offers{display:grid;gap:10px;margin-top:18px}
.offer{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 18px;flex-wrap:wrap}
.offer .store{font-weight:800}
.offer .sub{color:var(--muted);font-size:.85rem}
.offer .button{padding:9px 16px;font-size:.9rem}
.breadcrumb{font-size:.85rem;color:var(--muted);margin-bottom:14px}
.breadcrumb a{color:var(--muted)}
.machine-hero{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.machine-hero .imgbox{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;display:grid;place-items:center;min-height:320px}
.machine-hero .imgbox img{max-height:340px;object-fit:contain}
.machine-hero h1{font:700 clamp(1.9rem,3.4vw,3rem)/1.1 Georgia,serif;margin:.3rem 0 .6rem}
.meta-row{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 16px}
.method{background:#efe8dc;border-left:4px solid var(--gold);padding:18px 22px;margin-top:30px;border-radius:0 10px 10px 0}
footer{background:var(--ink);color:#d8cec0;padding:54px 0 30px;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:30px}
.footer-grid h3{color:#fff;font:700 1.05rem Georgia,serif;margin:0 0 10px}
.footer-grid a{color:#d8cec0;text-decoration:none;display:block;margin:5px 0;font-size:.92rem}
.footer-grid a:hover{color:#fff}
.legal-line{border-top:1px solid #ffffff22;margin-top:26px;padding-top:16px;font-size:.82rem;color:#a99c8b}
table.tb{width:100%;border-collapse:collapse;margin-top:14px;background:#fff;border-radius:12px;overflow:hidden}
table.tb th,table.tb td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);font-size:.95rem}
table.tb th{background:var(--cream);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
@media(max-width:950px){
 .grid-3,.grid-4{grid-template-columns:1fr 1fr}
 .grid-2,.pros-cons,.machine-hero{grid-template-columns:1fr}
 .footer-grid{grid-template-columns:1fr 1fr}
 .nav-links{display:none;position:absolute;left:0;right:0;top:72px;background:#fff;padding:18px 20px;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--line)}
 .nav-links.open{display:flex}
 .menu-btn{display:block}
 .hero,.hero[style*="background"]{background-attachment:scroll!important}
}
@media(max-width:600px){.grid-3,.grid-4,.footer-grid{grid-template-columns:1fr}}