*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } :root { --dmw-a: var(--accent, #B85C35); } body { background: var(--bg,#F9F7F3); color: var(--dark,#0E0C09); font-family: var(--sans,'DM Sans'), sans-serif; font-weight: 300; line-height: 1.6; overflow-x: hidden; } img { display: block; max-width: 100%; } @keyframes fadeUp { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } } @keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } } ::-webkit-scrollbar { width: 3px; } ::-webkit-scrollbar-thumb { background: var(--accent,#B85C35); } a { color: inherit; } .nav-links { display:flex; gap:40px; align-items:center; } .nav-links a { text-decoration:none; } .nav-link { font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--dark,#0E0C09); opacity:0.5; transition:opacity 0.2s; } .nav-link:hover { opacity:1; } .nav-cta { font-size:11px; letter-spacing:0.16em; text-transform:uppercase; background:var(--dark,#0E0C09); color:var(--bg,#F9F7F3); padding:12px 28px; border-radius:1px; transition:background 0.25s; } .nav-cta:hover { background:var(--accent,#B85C35); } .lang-switch { display:inline-flex; align-items:center; gap:6px; font-size:11px; letter-spacing:0.1em; margin-left:6px; } .lang-switch a { text-decoration:none; color:var(--dark,#0E0C09); opacity:0.45; transition:opacity 0.2s,color 0.2s; } .lang-switch a.on { opacity:1; color:var(--accent,#B85C35); font-weight:500; } .lang-switch a:hover { opacity:1; } .lang-switch i { opacity:0.3; font-style:normal; } .nav-hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; cursor:pointer; } .nav-hamburger span { display:block; width:22px; height:1px; background:var(--dark,#0E0C09); } .mobile-menu { display:none; position:fixed; inset:68px 0 0 0; background:var(--bg,#F9F7F3); z-index:199; flex-direction:column; align-items:center; justify-content:center; gap:36px; } .mobile-menu.open { display:flex; } .mobile-menu a { text-decoration:none; font-size:12px; letter-spacing:0.22em; text-transform:uppercase; color:var(--dark,#0E0C09); } .hero-grid { display:grid; grid-template-columns:1fr 1fr; min-height:100vh; padding-top:68px; } .shop-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:48px 36px; } .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; } .about-stats { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--dark3,#2A1E18); } .blog-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:52px; } .footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:48px; } .section-hdr { display:flex; align-items:flex-end; justify-content:space-between; } .stats-row { display:flex; } .hero-fadein { animation: fadeUp 1s ease both; } .product-card { transition:transform 0.45s cubic-bezier(.22,.61,.36,1); } .product-card:hover { transform:translateY(-10px); } .product-card .imgbox { transition:box-shadow 0.45s ease; } .product-card:hover .imgbox { box-shadow:0 28px 50px -22px rgba(0,0,0,0.30); } .product-card .imgbox img, .blog-art .imgbox img, .hero-img-wrap img { transition:transform 0.7s cubic-bezier(.22,.61,.36,1); } .product-card:hover .imgbox img, .blog-art:hover .imgbox img { transform:scale(1.06); } /* Scroll reveal — solo se oculta si JS está activo (clase .js en ); sin JS, todo visible */ .reveal { transition:opacity 0.8s cubic-bezier(.22,.61,.36,1), transform 0.8s cubic-bezier(.22,.61,.36,1); will-change:opacity,transform; } .js .reveal { opacity:0; transform:translateY(26px); } .reveal.in { opacity:1; transform:none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity:1 !important; transform:none !important; } } /* Nav scroll shadow */ header[data-nav] { transition:box-shadow 0.3s ease, background 0.3s ease; } header[data-nav].scrolled { box-shadow:0 6px 34px -10px rgba(0,0,0,0.10); } .linkline { text-decoration:none; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--dark,#0E0C09); border-bottom:1px solid var(--accent,#B85C35); padding-bottom:2px; } .btn-dark { font-size:10px; letter-spacing:0.18em; text-transform:uppercase; background:var(--dark,#0E0C09); color:var(--bg,#F9F7F3); border:none; padding:12px 22px; border-radius:1px; cursor:pointer; transition:background 0.25s; text-decoration:none; display:inline-block; } .btn-dark:hover { background:var(--accent,#B85C35); } .foot-link { font-size:13px; color:var(--muted-dark,#7A6D65); text-decoration:none; transition:color 0.2s; } .foot-link:hover { color:var(--bg,#F9F7F3); } .imgbox { position:relative; overflow:hidden; background:var(--alt-bg,#EDE6DB); } .imgbox img { width:100%; height:100%; object-fit:cover; display:block; } .imgph { width:100%; height:100%; min-height:140px; display:flex; align-items:center; justify-content:center; text-align:center; background:var(--alt-bg,#EDE6DB); color:var(--muted,#B0A290); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; padding:16px; opacity:0.85; } @media (max-width:1024px) { .hero-grid { grid-template-columns:1fr; } .shop-grid { grid-template-columns:repeat(2,1fr); } .about-grid { grid-template-columns:1fr; gap:48px; } .blog-grid { grid-template-columns:1fr; } .footer-grid { grid-template-columns:1fr 1fr; } } @media (max-width:768px) { .nav-links { display:none; } .nav-hamburger { display:flex; } .shop-grid { grid-template-columns:1fr; } .section-hdr { flex-direction:column; align-items:flex-start; gap:16px; } .footer-grid { grid-template-columns:1fr; gap:32px; } .stats-row { flex-wrap:wrap; } }