*, *::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; } /* ===== Premium: ancho máximo del contenido ===== */ .section-hdr, .shop-grid, .about-grid, .blog-grid, .news-inner, .filters { max-width:1240px; margin-left:auto; margin-right:auto; } /* Filtros (tabs de categoría) */ .filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:48px; } .filter-tab { font-size:11px; letter-spacing:0.14em; text-transform:uppercase; padding:9px 20px; border:1px solid var(--border,#EAE4DA); background:transparent; color:var(--dark,#0E0C09); border-radius:40px; cursor:pointer; transition:all 0.25s; } .filter-tab:hover { border-color:var(--accent,#B85C35); color:var(--accent,#B85C35); } .filter-tab.active { background:var(--dark,#0E0C09); color:var(--bg,#F9F7F3); border-color:var(--dark,#0E0C09); } .product-card.hide, .blog-item.hide { display:none; } /* Placeholder de imagen con ícono */ .imgph { flex-direction:column; gap:8px; } .imgph svg { width:32px; height:32px; opacity:0.45; } /* Indicador de scroll en el hero */ .scroll-ind { position:absolute; bottom:26px; left:clamp(20px,5vw,60px); display:flex; align-items:center; gap:10px; color:var(--muted,#6B5D54); font-size:9px; letter-spacing:0.24em; text-transform:uppercase; } .scroll-ind .bar { width:34px; height:1px; background:var(--accent,#B85C35); position:relative; overflow:hidden; } .scroll-ind .bar::after { content:''; position:absolute; top:0; left:-34px; width:14px; height:1px; background:var(--dark,#0E0C09); animation:slidebar 1.8s ease-in-out infinite; } @keyframes slidebar { 0%{left:-14px} 100%{left:34px} } /* Botón volver arriba */ .totop { position:fixed; bottom:24px; left:24px; z-index:150; width:44px; height:44px; border-radius:50%; background:var(--dark,#0E0C09); color:var(--bg,#F9F7F3); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transform:translateY(12px); transition:opacity 0.3s,transform 0.3s,background 0.25s; box-shadow:0 6px 26px rgba(0,0,0,0.22); } .totop.show { opacity:1; pointer-events:auto; transform:none; } .totop:hover { background:var(--accent,#B85C35); } /* Accesibilidad: foco visible */ a:focus-visible, button:focus-visible, input:focus-visible { outline:2px solid var(--accent,#B85C35); outline-offset:3px; border-radius:1px; } /* Refinamiento botones */ .btn-dark, .nav-cta { will-change:background; } /* ===== Luxury: eyebrow editorial con línea ===== */ .eyebrow { display:inline-flex; align-items:center; gap:14px; font-size:10px; letter-spacing:0.3em; text-transform:uppercase; color:var(--accent,#B85C35); margin-bottom:22px; } .eyebrow::before { content:''; width:30px; height:1px; background:var(--accent,#B85C35); opacity:0.55; } .eyebrow.on-dark::before { opacity:0.7; } /* Sección About premium */ #about { position:relative; } #about::before { content:''; position:absolute; top:0; left:clamp(20px,5vw,60px); right:clamp(20px,5vw,60px); height:1px; background:linear-gradient(90deg,transparent,var(--accent,#B85C35),transparent); opacity:0.35; } .about-lead { font-family:var(--serif),serif; font-style:italic; font-size:clamp(17px,1.6vw,21px); line-height:1.6; color:var(--bg,#F9F7F3); opacity:0.9; margin-bottom:26px; max-width:440px; } .about-sign { display:inline-flex; align-items:center; gap:12px; margin-top:8px; } .about-sign .ln { width:40px; height:1px; background:var(--accent,#B85C35); } .about-sign span { font-family:var(--serif),serif; font-style:italic; font-size:18px; color:var(--accent,#B85C35); } /* Hairline divider premium */ .hairline { max-width:1240px; margin:0 auto; height:1px; background:linear-gradient(90deg,transparent,var(--border,#EAE4DA),transparent); } /* Íconos sociales del footer */ .socials { display:flex; gap:11px; } .socials a { width:40px; height:40px; border:1px solid var(--dark3,#2E2420); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--muted-dark,#7A6D65); transition:all 0.25s; } .socials a:hover { background:var(--accent,#B85C35); color:#fff; border-color:var(--accent,#B85C35); transform:translateY(-3px); box-shadow:0 8px 20px -6px var(--accent,#B85C35); } .socials svg { width:17px; height:17px; } /* Botón flotante WhatsApp — siempre visible, verde, con pulso */ .wa-float { position:fixed; bottom:24px; right:24px; z-index:160; display:flex; align-items:center; gap:9px; height:52px; padding:0 22px 0 0; background:#25D366; color:#fff; border-radius:30px; text-decoration:none; box-shadow:0 8px 28px rgba(37,211,102,0.45); transition:transform 0.25s ease, box-shadow 0.25s ease; } .wa-float:hover { transform:translateY(-3px) scale(1.03); box-shadow:0 14px 38px rgba(37,211,102,0.6); } .wa-float svg { width:27px; height:27px; margin:0 0 0 14px; flex-shrink:0; } .wa-float span { font-size:13px; font-weight:600; letter-spacing:0.02em; white-space:nowrap; } .wa-float::before { content:''; position:absolute; left:14px; top:50%; width:27px; height:27px; margin-top:-13.5px; border-radius:50%; background:#25D366; z-index:-1; animation:wa-pulse 2s ease-out infinite; } @keyframes wa-pulse { 0%{transform:scale(1);opacity:0.55} 100%{transform:scale(2.7);opacity:0} } @media (prefers-reduced-motion: reduce){ .wa-float::before{ animation:none; } } @media (max-width:560px){ .wa-float span{ display:none; } .wa-float{ padding:0; width:52px; justify-content:center; } .wa-float svg{ margin:0; } } @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; } }