/* Estructura común a todas las plantillas. Cada plantilla define su carácter en <slug>.css. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--text);font-family:var(--font-body),system-ui,sans-serif;font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--font-heading),system-ui,sans-serif;line-height:1.12;margin:0;font-weight:600}
p{margin:0}
a{color:inherit}
ul,ol{list-style:none;margin:0;padding:0}
s{opacity:.55}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
main{flex:1}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body{--line:color-mix(in srgb,var(--text) 12%,transparent);--soft:color-mix(in srgb,var(--text) 60%,var(--bg))}

.skip{position:absolute;left:-9999px;top:8px;background:var(--surface);color:var(--text);padding:8px 12px;z-index:10}
.skip:focus{left:8px}
.preview-note{background:#14161A;color:#fff;font:600 13px/1.4 system-ui,sans-serif;text-align:center;padding:6px 16px}
.announce{background:var(--primary);color:var(--on-primary);font-size:.8125rem;letter-spacing:.02em;text-align:center;padding:9px 0}

/* Cabecera: marca, categorías y búsqueda. */
.site-header{background:var(--bg);border-bottom:1px solid var(--line)}
.site-header__inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding-top:18px;padding-bottom:18px}
.brand{text-decoration:none;display:inline-flex;align-items:center}
.brand__logo{max-height:44px;width:auto}
.brand__name{font-family:var(--font-heading),system-ui,sans-serif;font-weight:700;font-size:1.375rem;letter-spacing:-.01em}
.site-nav{display:flex;gap:4px 22px;flex-wrap:wrap;justify-content:center}
.site-nav a{text-decoration:none;font-size:.9375rem;font-weight:500;padding:4px 0;border-bottom:1px solid transparent}
.site-nav a:hover{border-bottom-color:currentColor}
.site-search input{width:180px;border:1px solid var(--line);background:transparent;color:inherit;border-radius:999px;padding:8px 14px;font:inherit;font-size:.875rem}
.site-search input:focus{outline:2px solid var(--primary);outline-offset:1px;width:220px}
@media (max-width:860px){
  .site-header__inner{grid-template-columns:1fr auto;gap:12px}
  .site-nav{grid-column:1/-1;grid-row:2;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}
  .site-nav a{white-space:nowrap}
  .site-search input,.site-search input:focus{width:140px}
}

.btn{display:inline-block;background:var(--primary);color:var(--on-primary);text-decoration:none;font:inherit;font-weight:600;letter-spacing:.01em;padding:14px 28px;border:0;cursor:pointer;transition:filter .2s}
.btn:hover{filter:brightness(1.1)}

/* Banner principal. */
.hero__art{position:relative;overflow:hidden}
.hero--image .hero__art{background:none!important;-webkit-mask:none!important;mask:none!important;border:0!important;outline:0!important}
.hero__art img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}

.block{padding:72px 0}
.block__title{font-size:clamp(1.625rem,1.2rem + 1.4vw,2.375rem);letter-spacing:-.01em;margin-bottom:28px}
.empty{color:var(--soft)}

/* Categorías destacadas. */
.categories__list li{display:flex}
.categories__list{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(170px,100%),1fr))}
.category{flex:1;display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:600}
.category__mark{display:grid;place-items:center;flex:none;width:52px;height:52px;background:var(--accent);color:var(--on-accent);font-family:var(--font-heading),sans-serif;font-weight:700;font-size:1.25rem}
.category--image{position:relative;flex-direction:column;align-items:stretch;gap:10px}
.category__image{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .5s ease}
.category--image:hover .category__image{transform:scale(1.03)}

/* Escaparates por categoría. */
.collection + .collection{padding-top:0}
.collection__head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:24px}
.collection__head .block__title{margin-bottom:6px}
.collection__intro{color:var(--soft);max-width:60ch}
.collection__all{white-space:nowrap;font-weight:600;text-underline-offset:5px}

/* Rejilla de productos: columnas, formato de foto y estilo de tarjeta los elige el vendedor. */
.products{display:grid;gap:36px 24px;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}
.cols-2{--cols:2}.cols-3{--cols:3}.cols-4{--cols:4}.cols-5{--cols:5}
@media (max-width:1024px){.products{--cols:3!important}}
@media (max-width:640px){.products{--cols:2!important;gap:24px 12px}}
.product__link{display:block;text-decoration:none;height:100%}
.product__media{position:relative;overflow:hidden;background:var(--surface);aspect-ratio:1;margin-bottom:14px}
.ratio-portrait .product__media{aspect-ratio:4/5}
.ratio-landscape .product__media{aspect-ratio:4/3}
.product__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease,opacity .4s ease}
.product__link:hover .product__media img{transform:scale(1.04)}
.product__alt{opacity:0}
.product__link:hover .product__alt{opacity:1}
.product__placeholder{position:absolute;inset:0;display:grid;place-items:center;color:var(--primary);font-family:var(--font-heading),sans-serif;font-size:3rem;font-weight:700;opacity:.5}
.product__name{font-size:.9688rem;font-weight:500;line-height:1.4;margin-bottom:6px}
.product__price{font-weight:600;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.product__compare{font-weight:400;font-size:.875rem}
.card-framed .product{border:1px solid var(--line);padding:12px;background:var(--surface)}
.card-framed .product__media{margin:-12px -12px 14px}
.card-elevated .product{background:var(--surface);box-shadow:0 1px 2px color-mix(in srgb,var(--text) 6%,transparent),0 12px 32px color-mix(in srgb,var(--text) 8%,transparent);padding:0 0 16px}
.card-elevated .product__info{padding:0 16px}
/* Diseños de categoría. */
.products--editorial{--cols:3!important}
.products--editorial .product:nth-child(7n+1){grid-column:span 2;grid-row:span 2}
.products--editorial .product:nth-child(7n+1) .product__media{aspect-ratio:auto;height:calc(100% - 70px);min-height:300px}
.products--list{grid-template-columns:1fr!important;gap:0}
.products--list .product{border-bottom:1px solid var(--line);padding:18px 0}
.products--list .product__link{display:grid;grid-template-columns:140px 1fr;gap:24px;align-items:center}
.products--list .product__media{margin:0}
@media (max-width:640px){
  .products--editorial .product:nth-child(7n+1){grid-row:auto}
  .products--editorial .product:nth-child(7n+1) .product__media{height:auto;min-height:0;aspect-ratio:1}
  .products--list .product__link{grid-template-columns:96px 1fr;gap:14px}
}

/* Página de categoría. */
.crumbs{font-size:.8125rem;color:var(--soft);display:flex;gap:8px;flex-wrap:wrap;padding:20px 0}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.category-hero{border-bottom:1px solid var(--line);padding-bottom:40px}
.category-hero__title{font-size:clamp(2.25rem,1.5rem + 3vw,4rem);letter-spacing:-.02em}
.category-hero__intro{margin-top:14px;max-width:60ch;font-size:1.0625rem;color:var(--soft)}
.category-hero--image{position:relative;min-height:min(56vh,520px);display:flex;align-items:flex-end;border:0;padding:0 0 48px;color:#fff}
.category-hero__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.category-hero--image::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,.05) 65%);z-index:1}
.category-hero--image .category-hero__copy{position:relative;z-index:2}
.category-hero--image .crumbs,.category-hero--image .category-hero__intro{color:rgba(255,255,255,.85)}

/* Ficha de producto. */
.pdp{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;padding:8px 0 80px;align-items:start}
.pdp__slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;background:var(--surface);aspect-ratio:1;position:relative}
.pdp__slides img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:start}
.pdp__placeholder{position:relative;flex:1}
.pdp__thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:10px;margin-top:12px}
.pdp__thumbs img{aspect-ratio:1;object-fit:cover;width:100%;opacity:.75;transition:opacity .2s}
.pdp__thumbs a:hover img{opacity:1}
.pdp__info{position:sticky;top:24px}
.pdp__title{font-size:clamp(1.75rem,1.3rem + 1.6vw,2.625rem);letter-spacing:-.01em;margin-bottom:14px}
.pdp__price{font-size:1.5rem;font-weight:600;display:flex;gap:12px;align-items:baseline;margin-bottom:28px}
.pdp__variants label{display:block;font-weight:600;font-size:.875rem;margin-bottom:6px}
.pdp__variants select{width:100%;padding:12px 14px;border:1px solid var(--line);background:var(--surface);color:inherit;font:inherit}
.pdp__soon{margin:24px 0;padding:14px 16px;background:var(--surface);border-left:3px solid var(--primary);font-size:.9375rem}
.pdp__facts{margin:0 0 28px;border-top:1px solid var(--line)}
.pdp__facts div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.pdp__facts dt{color:var(--soft)}
.pdp__facts dd{margin:0;font-weight:600;text-align:right}
.pdp__details summary{cursor:pointer;font-weight:600;padding:12px 0}
.pdp__details p{margin-bottom:12px;max-width:65ch}
@media (max-width:860px){.pdp{grid-template-columns:1fr;gap:28px}.pdp__info{position:static}}

/* Búsqueda y paginación. */
.search-page{display:flex;gap:10px;margin-bottom:36px;max-width:560px}
.search-page input{flex:1;border:1px solid var(--line);background:var(--surface);color:inherit;padding:12px 14px;font:inherit}
.pager{display:flex;justify-content:center;align-items:center;gap:24px;margin-top:48px;font-weight:600}

/* Ventajas y preguntas frecuentes. */
.benefits__list{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.benefit__title{font-size:1.125rem;margin-bottom:6px}
.faq__item{border-bottom:1px solid var(--line);padding:18px 0}
.faq__item summary{cursor:pointer;font-weight:600}
.faq__item p{margin-top:10px;max-width:70ch}

/* Pie. */
.site-footer{padding:56px 0;font-size:.875rem;border-top:1px solid var(--line)}
.site-footer__inner{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.site-footer__name{font-family:var(--font-heading),sans-serif;font-weight:700;font-size:1.25rem;margin-bottom:6px}
.site-footer__links{columns:2;column-gap:40px}
.site-footer__links li{margin-bottom:6px}
.site-footer__links a{text-decoration:none}
.site-footer__links a:hover{text-decoration:underline}

@media (max-width:640px){.block{padding:48px 0}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}