/* ========================================================= TOKENS ========================================================= */ :root{ --color-bg: #F7F2EA; --color-surface: #FFFFFF; --color-text: #2A1D12; --color-text-soft: #6B5B4B; --color-accent: #5C3A21; /* café cálido, botones/marca */ --color-accent-2: #8B6F52; /* café medio, hovers */ --color-line: #E1D5C3; --color-line-soft: #EDE4D6; --color-danger: #A3402E; --font-display: 'Fraunces', Georgia, serif; --font-body: 'Jost', Arial, sans-serif; --radius: 2px; --container: 1320px; --gap: 24px; --header-h: 84px; } /* ========================================================= BASE ========================================================= */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ display:block !important; /* algo externo (kit/plugin) fuerza display:grid en y descuadra el layout */ margin:0; background:var(--color-bg); color:var(--color-text); font-family:var(--font-body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; margin:0 0 .4em; letter-spacing:.01em; } button{ font-family:inherit; cursor:pointer; background:none; border:0; } .container{ max-width:var(--container); margin:0 auto; padding:0 32px; } body > header, body > main, body > footer, body > div{ grid-column:auto; grid-row:auto; } :focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; } @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } } .btn{ display:inline-flex; align-items:center; justify-content:center; padding:14px 28px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; background:var(--color-accent) !important; color:#fff !important; border-radius:var(--radius); transition:background .2s; border:0 !important; } .btn:hover{ background:var(--color-text) !important; } .btn--outline-light{ background:transparent !important; color:#fff !important; border:1px solid #fff !important; } .btn--outline-light:hover{ background:#fff !important; color:var(--color-text) !important; } .btn--dark{ background:var(--color-text) !important; } .btn--full{ width:100%; } .section-title{ text-align:center; font-size:28px; margin-top:56px; } .section-link{ text-align:center; margin:6px 0 32px; } .section-link a{ text-decoration:underline; font-size:14px; } /* ========================================================= TOPBAR + RIBBON ========================================================= */ .topbar{ background:var(--color-accent); color:#fff; text-align:center; font-size:12px; letter-spacing:.05em; padding:9px 12px; } .corner-ribbon{ position:fixed; left:-64px; bottom:36px; width:220px; text-align:center; background:var(--color-text); color:#fff; transform:rotate(-45deg); padding:8px 0; font-size:11px; letter-spacing:.08em; text-transform:uppercase; z-index:60; box-shadow:0 2px 8px rgba(0,0,0,.2); } /* ========================================================= HEADER ========================================================= */ .site-header{ position:sticky; top:0; z-index:50; background:var(--color-bg); border-bottom:1px solid var(--color-line); } .site-header__inner{ position:relative; max-width:var(--container); margin:0 auto; padding:0 32px; height:var(--header-h); display:flex; align-items:center; gap:32px; } .site-title{ font-family:var(--font-display); font-size:26px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; } .site-header__branding{ flex:0 0 auto; } .site-header__branding img{ max-height:48px; width:auto; } .site-header__nav{ flex:1; } .primary-menu{ display:flex; gap:28px; list-style:none; margin:0; padding:0; } .primary-menu a{ font-size:13px; letter-spacing:.06em; text-transform:uppercase; } .primary-menu a:hover{ color:var(--color-accent); } .site-header__actions{ display:flex; align-items:center; gap:14px; } .icon-btn{ position:relative; color:var(--color-text); padding:6px; } .icon-btn:hover{ color:var(--color-accent); } .cart-count{ position:absolute; top:-2px; right:-2px; background:var(--color-accent); color:#fff; font-size:10px; min-width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; } .mobile-menu-toggle{ display:none; flex-direction:column; gap:5px; } .mobile-menu-toggle span{ width:22px; height:2px; background:var(--color-text); } .search-panel{ display:none; border-top:1px solid var(--color-line); padding:16px 32px; } .search-panel.is-open{ display:block; } .search-panel__form{ max-width:var(--container); margin:0 auto; display:flex; gap:10px; } .search-panel__form input{ flex:1; padding:10px 14px; border:1px solid var(--color-line); background:var(--color-surface); } .search-panel__form button{ padding:10px 20px; background:var(--color-accent); color:#fff; } /* ========================================================= HERO ========================================================= */ .hero-carousel{ position:relative; overflow:hidden; background:var(--color-surface); } .hero-carousel__track{ display:flex; transition:transform .5s ease; } .hero-slide{ min-width:100%; } .hero-slide img{ width:100%; height:70vh; object-fit:cover; } .hero-slide--placeholder{ height:40vh; display:flex; align-items:center; justify-content:center; background:var(--color-line-soft); text-align:center; padding:24px; color:var(--color-text-soft); } .hero-carousel__arrow{ position:absolute; top:50%; transform:translateY(-50%); font-size:34px; color:#fff; background:rgba(0,0,0,.25); width:44px; height:44px; border-radius:50%; } .hero-carousel__arrow--prev{ left:20px; } .hero-carousel__arrow--next{ right:20px; } .hero-caption{ position:absolute; left:32px; bottom:32px; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.35); } .hero-caption__eyebrow{ display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px; } .hero-caption__title{ font-size:34px; color:#fff; } /* ========================================================= CATEGORY GRID ========================================================= */ .category-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:var(--gap); max-width:var(--container); margin:56px auto; padding:0 32px; } .category-grid__item{ position:relative; display:block; overflow:hidden; border-radius:var(--radius); } .category-grid__item img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; transition:transform .4s; } .category-grid__item:hover img{ transform:scale(1.04); } .category-grid__item--1{ grid-row:span 2; } .category-grid__label{ position:absolute; left:20px; bottom:20px; color:#fff; font-size:20px; font-family:var(--font-display); text-shadow:0 2px 8px rgba(0,0,0,.4); } /* ========================================================= PRODUCT GRID (tienda + novedades) ========================================================= */ ul.products{ display:grid !important; grid-template-columns:repeat(4,1fr); gap:var(--gap); list-style:none; margin:0 0 40px; padding:0; max-width:var(--container); margin-left:auto; margin-right:auto; } .product-card{ position:relative; } .product-card__media{ position:relative; display:block; background:var(--color-line-soft); aspect-ratio:3/4; overflow:hidden; } .product-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .4s; } .product-card:hover .product-card__media img{ transform:scale(1.03); } .product-card__wish{ position:absolute; top:10px; right:10px; z-index:2; color:var(--color-text-soft); background:rgba(255,255,255,.85); border-radius:50%; width:34px; height:34px; display:flex; align-items:center; justify-content:center; } .product-card__wish:hover, .product-card__wish.is-active{ color:var(--color-danger); } .product-card__info{ position:relative; padding-top:12px; } .product-card__name{ display:block; font-size:14px; margin-bottom:4px; } .product-card__price{ font-size:14px; color:var(--color-text-soft); } .product-card__price ins{ text-decoration:none; color:var(--color-accent); } .product-card__add{ position:absolute; right:0; top:8px; width:26px; height:26px; border:1px solid var(--color-line); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; transition:.2s; } .product-card__add:hover{ background:var(--color-accent); color:#fff; border-color:var(--color-accent); } .new-arrivals{ max-width:var(--container); margin:0 auto; padding:0 32px; } /* ========================================================= EDITORIAL BANNER ========================================================= */ .editorial-banner{ background-size:cover; background-position:center; min-height:78vh; display:flex; align-items:flex-end; margin-top:64px; } .editorial-banner__content{ color:#fff; max-width:460px; padding:48px; background:linear-gradient(0deg, rgba(0,0,0,.45), transparent 70%); } .editorial-banner__eyebrow{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; } .editorial-banner__title{ font-size:40px; color:#fff; margin:8px 0 14px; } .editorial-banner__text{ font-size:14px; line-height:1.7; margin-bottom:22px; } /* ========================================================= SHOP TOOLBAR ========================================================= */ .shop-toolbar{ display:flex; align-items:center; justify-content:space-between; margin:32px auto 24px; } .shop-toolbar__count{ font-size:14px; color:var(--color-text-soft); margin:0; } .shop-toolbar__sort select{ border:1px solid var(--color-line); background:var(--color-surface); padding:10px 14px; font-size:13px; } /* ========================================================= SINGLE PRODUCT ========================================================= */ .wm-breadcrumb{ font-size:12px; color:var(--color-text-soft); margin:20px 0; } .single-product{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; margin-bottom:40px; } /* Galería propia: columna de miniaturas a la izquierda + imagen grande a la derecha */ .custom-gallery{ display:flex; gap:14px; align-items:flex-start; } .custom-gallery__thumbs{ display:flex; flex-direction:column; gap:10px; list-style:none; margin:0; padding:0; width:78px; flex:0 0 78px; max-height:640px; overflow-y:auto; } .custom-gallery__thumb{ display:block; width:100%; padding:0; border:1px solid var(--color-line); background:var(--color-surface); line-height:0; opacity:.7; transition:.2s; } .custom-gallery__thumb:hover{ opacity:1; } .custom-gallery__thumb.is-active{ opacity:1; border-color:var(--color-accent); } .custom-gallery__thumb img{ width:100%; aspect-ratio:3/4; object-fit:cover; } .custom-gallery__main{ flex:1; min-width:0; background:var(--color-line-soft); } .custom-gallery__main img{ width:100%; aspect-ratio:3/4; object-fit:cover; } .custom-gallery--empty{ background:var(--color-line-soft); aspect-ratio:3/4; } @media (max-width: 700px){ .custom-gallery{ flex-direction:column-reverse; } .custom-gallery__thumbs{ flex-direction:row; width:100%; flex:0 0 auto; max-height:none; overflow-x:auto; } .custom-gallery__thumb{ width:64px; flex:0 0 64px; } } .single-product__title{ font-size:32px; } .single-product__price{ font-size:20px; color:var(--color-accent); margin-bottom:22px; } .single-product__price del{ color:var(--color-text-soft); margin-right:8px; } /* Convierte el