/* SKABBERS — v5 Modern Digital Fashion
   Near-black / white / silver-gray + violet accent. Precise grid, thin lines. */

:root{
  --black:#0c0d0f;
  --ink:#16171a;
  --charcoal:#212327;
  --white:#f7f7f8;
  --silver:#a8abb3;
  --silver-dim:#6c6f77;
  --line:rgba(247,247,248,.13);
  /* --accent va en rellenos (con texto blanco encima): blanco sobre el da 5.7:1.
     Como texto sobre el fondo oscuro solo llega a 3.3:1, para eso esta la
     variante clara, que da 6.8:1. */
  --accent:#6d3aff;
  --accent-soft:#a888ff;
  --max:1440px;
  --gutter:clamp(1.25rem, 4vw, 3.5rem);
  --display:'Space Grotesk', -apple-system, sans-serif;
  --mono:'IBM Plex Mono', monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

body{
  font-family:var(--display);
  background:var(--black);
  color:var(--white);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%; display:block;}
/* <picture> es inline por defecto: sin esto no hereda la caja que antes ocupaba
   el <img> y se rompe todo lo que depende de object-fit sobre un contenedor. */
picture{display:block;}
.hero-media picture, .plate picture, .final-cta-media picture, .about-plate picture,
.product-media picture, .offer-media picture, .cart-thumb picture, .detail-media picture{width:100%; height:100%;}
.editorial-media picture{position:absolute; inset:0;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; background:none; border:none; cursor:pointer; color:inherit;}
input{font-family:inherit;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
/* Sin esto, cualquier display: del componente le gana al [hidden] del user agent. */
[hidden]{display:none !important;}

/* ---------- Nav ---------- */
.nav{position:sticky; top:0; z-index:50; background:rgba(12,13,15,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.nav-inner{max-width:var(--max); margin:0 auto; padding:0 var(--gutter); height:68px; display:flex; align-items:center; justify-content:space-between; gap:2rem;}
.logo{font-family:var(--display); font-weight:600; font-size:1.15rem; letter-spacing:-.01em;}
.nav-links{display:flex; gap:2.25rem; align-items:center;}
.nav-links a{font-size:.88rem; letter-spacing:.01em; color:var(--white); position:relative; padding:.3rem 0;}
.nav-links a::after{content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--accent); transition:right .3s cubic-bezier(.16,1,.3,1);}
.nav-links a:hover::after{right:0;}
.nav-actions{display:flex; align-items:center; gap:1.15rem;}
.icon-btn{font-size:1.15rem; display:flex; align-items:center; position:relative; padding:.25rem;}
.cart-count{position:absolute; top:-3px; right:-6px; background:var(--accent); color:var(--white); font-size:.6rem; width:15px; height:15px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:600;}
.menu-toggle{display:none; flex-direction:column; gap:5px; width:24px;}
.menu-toggle span{display:block; height:1px; background:var(--white); width:100%;}

.search-panel{max-height:0; overflow:hidden; border-top:0 solid var(--line); transition:max-height .4s cubic-bezier(.16,1,.3,1); background:var(--ink);}
.search-panel.open{max-height:90px; border-top-width:1px;}
.search-panel-inner{max-width:var(--max); margin:0 auto; padding:0 var(--gutter); height:88px; display:flex; align-items:center; gap:1rem; font-size:1.2rem;}
.search-panel-inner input{flex:1; border:none; background:none; outline:none; font-family:var(--display); font-size:1.3rem; color:var(--white);}
.search-panel-inner input::placeholder{color:var(--silver-dim);}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding:.92rem 2rem; font-family:var(--display); font-weight:500; font-size:.9rem; letter-spacing:.01em; border:1px solid var(--white); white-space:nowrap; transition:background .25s ease, color .25s ease, border-color .25s ease;}
.btn-primary{background:var(--white); color:var(--black);}
.btn-primary:hover{background:var(--accent); border-color:var(--accent); color:var(--white);}
.btn-ghost{background:transparent; color:var(--white); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--white);}
.btn-lg{padding:1.05rem 2.5rem; font-size:.98rem;}
.btn i{font-size:1.1em; line-height:1;}
.btn:disabled{opacity:.45; cursor:not-allowed;}

/* Verde de WhatsApp con texto oscuro, misma lógica que .btn-primary (fondo claro,
   texto oscuro). Sobre el verde el texto blanco no llega a 4.5:1; el oscuro da
   10.7:1 en reposo y 6.9:1 en hover. */
.btn-whatsapp{background:#25d366; border-color:#25d366; color:var(--black); font-weight:600;}
.btn-whatsapp:hover{background:#1faa55; border-color:#1faa55; color:var(--black);}
.btn-whatsapp i{font-size:1.25em;}

/* ---------- Hero ---------- */
.hero{position:relative; min-height:100dvh; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.hero-media{position:absolute; inset:0; z-index:0;}
.hero-media img{width:100%; height:100%; object-fit:cover; display:block;}
.hero-grid-overlay, .plate-grid{position:absolute; inset:0; z-index:0; pointer-events:none; background-image:linear-gradient(90deg, var(--line) 1px, transparent 1px), linear-gradient(0deg, var(--line) 1px, transparent 1px); background-size:calc((100% - 2*clamp(1.25rem,4vw,3.5rem)) / 12) 100%, 100% 80px;}
.corner-tag{position:absolute; z-index:2; font-family:var(--mono); font-size:.68rem; letter-spacing:.04em; color:var(--silver); text-transform:uppercase;}
.corner-tag--tl{top:calc(68px + 1.75rem); left:var(--gutter);}
.corner-tag--tr{top:calc(68px + 1.75rem); right:var(--gutter); text-align:right;}
.corner-tag--bl{bottom:1.75rem; left:var(--gutter);}
.corner-tag--br{bottom:1.75rem; right:var(--gutter);}
.hero-content{position:relative; z-index:1; text-align:center; max-width:680px; padding:0 var(--gutter);}
.hero-headline{font-family:var(--display); font-weight:600; font-size:clamp(2.4rem, 5.4vw, 4.4rem); line-height:1.05; letter-spacing:-.02em;}
.hero-sub{margin-top:1.5rem; max-width:44ch; margin-left:auto; margin-right:auto; font-size:1rem; color:var(--silver); line-height:1.65;}
.hero-ctas{display:flex; gap:1rem; justify-content:center; margin-top:2.25rem; flex-wrap:wrap;}

/* ---------- Ofertas (marquee) ---------- */
.offers{position:relative; padding:clamp(14px, 1.6vw, 22px) 0; overflow:hidden; background:var(--black); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.offers-strip, .offers-ticker-track{display:flex; width:max-content; will-change:transform;}
.offers-set{display:flex; align-items:center;}

.offers-strip{animation:offers-left 44s linear infinite;}
/* La separación va como margin-right de la card, no como gap del flex: así cada card
   ocupa siempre (ancho + separación) y el translate -50% cae justo, sin salto. */
.offer-card{flex:0 0 auto; width:clamp(116px, 10.5vw, 150px); margin-right:clamp(6px, .8vw, 14px); background:var(--ink); border:1px solid var(--line); transition:border-color .2s ease;}
.offer-card:hover{border-color:var(--silver-dim);}
.offer-link{display:block; color:inherit;}
.offer-media{position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--charcoal);}
.offer-media img{width:100%; height:100%; object-fit:cover;}
.offer-off{position:absolute; top:.4rem; left:.4rem; z-index:1; font-family:var(--mono); font-size:.58rem; letter-spacing:.03em; background:var(--accent); color:var(--white); padding:.18rem .36rem;}
.offer-info{padding:.55rem .6rem .65rem;}
.offer-name{font-family:var(--display); font-weight:500; font-size:.74rem; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.offer-prices{display:flex; align-items:baseline; gap:.4rem; margin-top:.25rem; font-family:var(--mono); font-size:.68rem;}
.offer-was{color:var(--silver-dim); text-decoration:line-through;}
.offer-now{color:var(--white);}

/* El velo se apaga al 64%, justo donde la imagen de la card termina y empieza el
   bloque de precio: oscurece solo la franja por donde pasa el ticker. */
.offers-veil{position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(12,13,15,.06) 0%, rgba(12,13,15,.28) 20%, rgba(12,13,15,.68) 36%, rgba(12,13,15,.68) 60%, rgba(12,13,15,0) 64%, rgba(12,13,15,0) 100%);}

.offers-ticker{position:absolute; inset:0; z-index:2; display:flex; align-items:center; overflow:hidden; pointer-events:none;}
.offers-ticker-track{animation:offers-right 26s linear infinite;}
.offers-word, .offers-sep{font-family:var(--display); font-weight:600; font-size:clamp(1.4rem, 3.2vw, 2.5rem); line-height:1; letter-spacing:-.01em; text-transform:uppercase; white-space:nowrap; padding-right:.42em;}
.offers-sep{color:var(--accent-soft); font-weight:400;}

.offers:hover .offers-strip, .offers:hover .offers-ticker-track{animation-play-state:paused;}

@keyframes offers-left{ from{transform:translate3d(0,0,0);} to{transform:translate3d(-50%,0,0);} }
@keyframes offers-right{ from{transform:translate3d(-50%,0,0);} to{transform:translate3d(0,0,0);} }
@media (prefers-reduced-motion: reduce){
  .offers-strip, .offers-ticker-track{animation:none;}
}

/* ---------- Section rhythm ---------- */
section{padding:clamp(4.5rem, 9vw, 7.5rem) var(--gutter);}
.section-head{max-width:var(--max); margin:0 auto clamp(2.5rem, 5vw, 3.5rem); display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; border-bottom:1px solid var(--line); padding-bottom:1.25rem;}
.section-head h2{font-family:var(--display); font-weight:600; font-size:clamp(1.7rem, 3vw, 2.5rem); letter-spacing:-.01em;}
.section-index{font-family:var(--mono); font-size:.75rem; color:var(--silver-dim); white-space:nowrap;}
.featured, .arrivals{background:var(--black);}

/* ---------- Product grid ---------- */
.product-grid{max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px; background:var(--line);}
.product-grid--dense{grid-template-columns:repeat(4, minmax(0,1fr));}

.product-card{position:relative; background:var(--black);}
.product-media{position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--charcoal);}
.product-media img{width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .6s cubic-bezier(.16,1,.3,1);}
.product-card:hover .product-media img{transform:scale(1.05);}
.product-badge{position:absolute; top:.85rem; left:.85rem; z-index:1; font-family:var(--mono); font-size:.64rem; letter-spacing:.03em; text-transform:uppercase; background:var(--accent); color:var(--white); padding:.3rem .55rem;}
.product-index{position:absolute; top:.85rem; right:.85rem; z-index:1; font-family:var(--mono); font-size:.64rem; color:rgba(247,247,248,.5);}
.product-quickadd{
  display:block;
  position:absolute; left:.85rem; right:.85rem; bottom:.85rem; z-index:2;
  background:var(--white); color:var(--black); font-family:var(--display); font-weight:500;
  font-size:.82rem; letter-spacing:.01em; text-align:center; padding:.7rem;
  opacity:0; transform:translateY(8px); transition:opacity .25s ease, transform .25s ease, background .2s ease, color .2s ease;
}
.product-card:hover .product-quickadd{opacity:1; transform:translateY(0);}
.product-quickadd:hover{background:var(--accent); color:var(--white);}
.product-info{padding:1.1rem 1rem 1.4rem;}
.product-name{font-family:var(--display); font-weight:500; font-size:1rem;}
.product-row{display:flex; justify-content:space-between; align-items:center; margin-top:.6rem;}
.product-colors{display:flex; gap:.4rem;}
.color-dot{width:12px; height:12px; border-radius:50%; border:1px solid var(--line); cursor:pointer;}
.product-price{font-family:var(--mono); font-size:.85rem; color:var(--silver);}

/* ---------- Statement ---------- */
.statement{background:var(--ink); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.statement-inner{max-width:880px; margin:0 auto;}
.statement-lede{font-family:var(--display); font-weight:600; font-size:clamp(1.6rem, 3vw, 2.4rem); line-height:1.3; max-width:22ch;}
.statement-body{margin-top:1.75rem; font-size:1rem; line-height:1.75; color:var(--silver); max-width:56ch;}

/* ---------- Lookbook plate ---------- */
.lookbook{padding:0; background:var(--black); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.plate{position:relative; aspect-ratio:2/1; overflow:hidden; background:var(--charcoal);}
.plate img{width:100%; height:100%; object-fit:cover; object-position:center 15%;}
.plate-scrim{position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg, rgba(12,13,15,.85) 0%, rgba(12,13,15,.5) 32%, rgba(12,13,15,0) 58%);}
.plate-tag{position:absolute; z-index:2; font-family:var(--mono); font-size:.68rem; letter-spacing:.04em; text-transform:uppercase;}
.plate-tag--tl{top:clamp(1.5rem,3vw,2.25rem); left:var(--gutter); color:var(--silver);}
.plate-tag--br{bottom:clamp(1.5rem,3vw,2.25rem); right:var(--gutter); color:rgba(12,13,15,.5);}
.plate-caption{position:absolute; z-index:2; left:var(--gutter); bottom:clamp(1.75rem,4vw,3rem); max-width:30ch;}
.plate-index{font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-soft);}
.plate-text{margin-top:.85rem; font-family:var(--display); font-weight:500; font-size:clamp(1.15rem,2.1vw,1.65rem); line-height:1.28; letter-spacing:-.01em; color:var(--white);}

/* ---------- Editorial ---------- */
.editorial{padding:0; display:grid; grid-template-columns:1.2fr .8fr; min-height:82vh; background:var(--black);}
.editorial-media{position:relative; min-height:100%; overflow:hidden; background:var(--charcoal);}
.editorial-media img{width:100%; height:100%; object-fit:cover; object-position:center 25%;}
.editorial-content{display:flex; flex-direction:column; justify-content:center; padding:clamp(2.5rem, 5vw, 5rem); background:var(--ink);}
.editorial-content h2{font-family:var(--display); font-weight:600; font-size:clamp(1.8rem, 3vw, 2.5rem); max-width:12ch; letter-spacing:-.01em;}
.editorial-content p{margin:1.5rem 0 2.25rem; color:var(--silver); max-width:36ch; line-height:1.7;}

/* ---------- Final CTA ---------- */
.final-cta{position:relative; padding:0; min-height:58vh; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.final-cta-media{position:absolute; inset:0; overflow:hidden; background:var(--charcoal);}
.final-cta-media img{width:100%; height:100%; object-fit:cover; object-position:center 25%;}
.final-cta-media::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,13,15,.5) 0%, rgba(12,13,15,.72) 100%);}
.final-cta-content{position:relative; z-index:1; text-align:center; padding:0 var(--gutter);}
.final-cta-content h2{font-family:var(--display); font-weight:600; font-size:clamp(2.1rem, 4.6vw, 3.4rem); line-height:1.12; margin-bottom:2.25rem; letter-spacing:-.01em;}
.final-cta .btn-primary:hover{background:var(--accent); border-color:var(--accent); color:var(--white);}

/* ---------- Páginas internas ---------- */
.page{max-width:var(--max); margin:0 auto; padding:clamp(2.5rem, 5vw, 4rem) var(--gutter) clamp(4rem, 8vw, 6.5rem);}
.crumbs{display:flex; gap:.6rem; align-items:center; font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--silver-dim); margin-bottom:1.75rem; flex-wrap:wrap;}
.crumbs a:hover{color:var(--white);}
.crumbs [aria-current]{color:var(--silver);}
.page-head{margin-bottom:clamp(2rem, 4vw, 3rem); border-bottom:1px solid var(--line); padding-bottom:clamp(1.5rem, 3vw, 2.25rem);}
.page-head h1{font-weight:600; font-size:clamp(1.9rem, 4vw, 3rem); line-height:1.1; letter-spacing:-.02em;}
.page-lede{margin-top:1rem; color:var(--silver); font-size:1.02rem; line-height:1.7; max-width:56ch;}

.doc{max-width:68ch;}
.doc h2{font-weight:600; font-size:clamp(1.1rem, 2vw, 1.35rem); letter-spacing:-.005em; margin:2.5rem 0 .85rem;}
.doc h2:first-child{margin-top:0;}
.doc p{color:var(--silver); line-height:1.8; margin-bottom:1rem;}
.doc ul{color:var(--silver); line-height:1.8; padding-left:1.1rem; margin-bottom:1rem;}
.doc li{margin-bottom:.35rem;}
.doc a{color:var(--white); border-bottom:1px solid var(--line);}
.doc a:hover{border-bottom-color:var(--accent-soft); color:var(--accent-soft);}
.doc-todo{font-family:var(--mono); font-size:.74rem; line-height:1.6; color:var(--silver-dim); border-left:2px solid var(--accent); padding:.65rem 0 .65rem .9rem; margin-bottom:2.25rem;}
.doc-cta{display:flex; gap:1rem; flex-wrap:wrap; margin-top:3rem; padding-top:2.5rem; border-top:1px solid var(--line);}

.table-wrap{overflow-x:auto; margin-bottom:1.25rem;}
.size-table{border-collapse:collapse; width:100%; min-width:420px; font-size:.88rem;}
.size-table th, .size-table td{text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--line);}
.size-table th{font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--silver-dim); font-weight:500;}
.size-table td{color:var(--silver); font-family:var(--mono);}
.size-table td:first-child{color:var(--white);}

.about-plate{position:relative; aspect-ratio:2/1; overflow:hidden; margin-bottom:clamp(2.5rem, 5vw, 4rem); background:var(--charcoal);}
.about-plate img{width:100%; height:100%; object-fit:cover; object-position:center 22%;}

/* ---------- Tienda ---------- */
.shop-bar{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:1.75rem;}
.shop-count{font-family:var(--mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:var(--silver-dim);}
.shop-filters{display:flex; gap:.5rem; flex-wrap:wrap;}
.chip{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; padding:.45rem .9rem; border:1px solid var(--line); color:var(--silver); transition:border-color .2s ease, color .2s ease, background .2s ease;}
.chip:hover{border-color:var(--white); color:var(--white);}
.chip.is-active{background:var(--white); border-color:var(--white); color:var(--black);}
.shop-empty{margin-top:2.5rem; color:var(--silver);}
.shop-empty a{color:var(--accent-soft);}

/* ---------- Ficha de producto ---------- */
.product-link{position:absolute; inset:0; z-index:1;}
.product-name{display:block;}
.product-name:hover{color:var(--accent-soft);}
.price-was{color:var(--silver-dim); text-decoration:line-through; margin-right:.15rem;}

.product-detail{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem, 4vw, 4rem); align-items:start;}
.detail-media{position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--charcoal); border:1px solid var(--line);}
.detail-media img{width:100%; height:100%; object-fit:cover; object-position:top center;}
.detail-index{position:absolute; top:1rem; right:1rem; font-family:var(--mono); font-size:.68rem; color:rgba(247,247,248,.5);}
.detail-info h1{font-weight:600; font-size:clamp(1.6rem, 3vw, 2.3rem); line-height:1.15; letter-spacing:-.015em;}
.detail-price{margin-top:1rem; font-family:var(--mono); font-size:1.15rem; display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;}
.detail-price .price-now{color:var(--white);}
.detail-price .price-off{font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; background:var(--accent); color:var(--white); padding:.2rem .45rem;}
.detail-desc{margin-top:1.25rem; color:var(--silver); line-height:1.75;}
.detail-block{margin-top:2rem;}
.detail-label{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--silver-dim); margin-bottom:.8rem;}
.detail-label span{color:var(--white);}
.swatches{display:flex; gap:.6rem;}
.swatch{width:30px; height:30px; border:1px solid var(--line); padding:0; transition:outline-offset .15s ease;}
.swatch.is-active{outline:1px solid var(--white); outline-offset:3px;}
.sizes{display:flex; gap:.5rem; flex-wrap:wrap;}
.size{min-width:48px; padding:.6rem .8rem; border:1px solid var(--line); font-family:var(--mono); font-size:.8rem; color:var(--silver); transition:border-color .2s ease, color .2s ease, background .2s ease;}
.size:hover{border-color:var(--white); color:var(--white);}
.size.is-active{background:var(--white); border-color:var(--white); color:var(--black);}
.btn-block{display:flex; width:100%; margin-top:2rem;}
.detail-actions{display:flex; flex-direction:column; gap:.6rem; margin-top:2rem;}
.detail-actions .btn-block{margin-top:0;}
.detail-specs{list-style:none; margin-top:2rem; border-top:1px solid var(--line);}
.detail-specs li{padding:.75rem 0; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:.78rem; color:var(--silver);}
.related{margin-top:clamp(4rem, 8vw, 6rem);}

/* ---------- Contacto ---------- */
.contact-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(2rem, 5vw, 4.5rem); align-items:start;}
.contact-form{display:flex; flex-direction:column; margin-top:1.5rem;}
.contact-form label{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--silver-dim); margin-bottom:.5rem;}
.contact-form label .opt{text-transform:none; letter-spacing:0;}
.contact-form input, .contact-form textarea{background:var(--ink); border:1px solid var(--line); color:var(--white); padding:.8rem .9rem; font-family:var(--display); font-size:.92rem; margin-bottom:1.25rem; outline:none; resize:vertical;}
.contact-form input:focus, .contact-form textarea:focus{border-color:var(--accent);}
.contact-side h2{font-weight:600; font-size:1.1rem; margin-bottom:1rem;}
.contact-side h2:not(:first-child){margin-top:2.5rem;}
.contact-side p{color:var(--silver); line-height:1.75;}
.contact-side a{color:var(--white); border-bottom:1px solid var(--line);}
.contact-side a:hover{color:var(--accent-soft); border-bottom-color:var(--accent-soft);}
.contact-channel{display:flex; flex-direction:column; gap:.25rem; margin-bottom:1.25rem;}
.contact-channel .detail-label{margin-bottom:0;}

/* ---------- Carrito (drawer) ---------- */
body.no-scroll{overflow:hidden;}
.drawer-backdrop{position:fixed; inset:0; z-index:60; background:rgba(6,7,8,.66); opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;}
.drawer-backdrop.open{opacity:1; visibility:visible;}
.drawer{position:fixed; top:0; right:0; bottom:0; z-index:61; width:min(420px, 100%); background:var(--ink); border-left:1px solid var(--line); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .35s cubic-bezier(.16,1,.3,1);}
.drawer.open{transform:translateX(0);}
.drawer-head{display:flex; align-items:center; justify-content:space-between; padding:1.35rem var(--gutter); border-bottom:1px solid var(--line);}
.drawer-head h2{font-weight:600; font-size:1.05rem; display:flex; align-items:center; gap:.6rem;}
.drawer-count{font-family:var(--mono); font-size:.72rem; color:var(--silver-dim);}
.drawer-body{flex:1; overflow-y:auto; padding:1rem var(--gutter);}
.drawer-foot{padding:1.25rem var(--gutter) 1.75rem; border-top:1px solid var(--line);}
.cart-empty{color:var(--silver); font-size:.92rem; padding:2rem 0;}
.cart-line{display:grid; grid-template-columns:72px 1fr; gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--line);}
.cart-thumb{display:block; aspect-ratio:3/4; overflow:hidden; background:var(--charcoal);}
.cart-thumb img{width:100%; height:100%; object-fit:cover; object-position:top center;}
.cart-line-name{font-size:.9rem; font-weight:500; line-height:1.35;}
.cart-line-name:hover{color:var(--accent-soft);}
.cart-size{margin-top:.3rem; background:var(--black); border:1px solid var(--line); color:var(--silver); font-family:var(--mono); font-size:.7rem; padding:.26rem 1.4rem .26rem .45rem; cursor:pointer; outline:none;
  appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--silver-dim) 50%), linear-gradient(135deg, var(--silver-dim) 50%, transparent 50%);
  background-position:calc(100% - 12px) 52%, calc(100% - 7px) 52%; background-size:5px 5px; background-repeat:no-repeat;}
.cart-size:hover, .cart-size:focus{border-color:var(--white); color:var(--white);}
.cart-size option{background:var(--ink); color:var(--white);}
.cart-line-price{font-family:var(--mono); font-size:.8rem; color:var(--white); margin-top:.35rem;}
.cart-was{color:var(--silver-dim); text-decoration:line-through; margin-right:.3rem;}
.qty{display:flex; align-items:center; gap:.5rem; margin-top:.6rem; font-family:var(--mono); font-size:.8rem;}
.qty button{width:24px; height:24px; border:1px solid var(--line); color:var(--silver); line-height:1;}
.qty button:hover{border-color:var(--white); color:var(--white);}
.qty span{min-width:1.5rem; text-align:center;}
.qty-remove{width:auto !important; border:none !important; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--silver-dim); margin-left:.35rem;}
.qty-remove:hover{color:var(--accent-soft);}
.cart-subtotal{display:flex; justify-content:space-between; align-items:baseline; font-family:var(--mono); font-size:.95rem; margin-bottom:.5rem;}
.cart-note{font-size:.76rem; color:var(--silver-dim); margin-bottom:1.1rem;}
.cart-count.is-empty{display:none;}

/* ---------- Footer ---------- */
.footer{background:var(--ink); padding:4.5rem var(--gutter) 0; border-top:1px solid var(--line);}
.footer-top{max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:3rem; padding-bottom:3.5rem; border-bottom:1px solid var(--line);}
.footer-brand p{margin:1.1rem 0 1.5rem; color:var(--silver); max-width:26ch; font-size:.92rem; line-height:1.6;}
.social-links{display:flex; gap:1rem; font-size:1.15rem;}
.footer-col h3{font-family:var(--mono); text-transform:uppercase; font-size:.78rem; letter-spacing:.05em; color:var(--silver-dim); margin-bottom:1.1rem; font-weight:500;}
.footer-col a{display:block; color:var(--white); font-size:.92rem; margin-bottom:.75rem; opacity:.85;}
.footer-col a:hover{opacity:1; color:var(--accent-soft);}
.footer-newsletter p{color:var(--silver); font-size:.88rem; margin-bottom:1.1rem;}
.newsletter-form{display:flex; border-bottom:1px solid var(--line); padding-bottom:.6rem;}
.newsletter-form input{flex:1; background:none; border:none; outline:none; color:var(--white); font-family:var(--mono); font-size:.85rem; text-transform:uppercase;}
.newsletter-form input::placeholder{color:var(--silver-dim);}
.newsletter-form button{font-size:1.05rem; color:var(--accent-soft);}
.form-note{margin-top:.7rem; font-size:.8rem; color:var(--silver); min-height:1em;}
.footer-bottom{max-width:var(--max); margin:0 auto; display:flex; justify-content:space-between; align-items:center; padding:1.5rem 0; font-family:var(--mono); font-size:.74rem; color:var(--silver-dim);}
.footer-meta{letter-spacing:.04em;}
.footer-legal{display:flex; gap:1.5rem;}
.footer-legal a:hover{color:var(--white);}

/* ---------- Responsive ---------- */
@media (max-width: 1080px){
  .product-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
  .product-grid--dense{grid-template-columns:repeat(2, minmax(0,1fr));}
  .footer-top{grid-template-columns:1fr 1fr; row-gap:2.5rem;}
  .corner-tag--tr{max-width:40%;}
}

@media (max-width: 860px){
  .product-detail{grid-template-columns:1fr; gap:2rem;}
  .detail-media{aspect-ratio:4/5; max-width:520px;}
  .contact-grid{grid-template-columns:1fr;}

  .editorial{grid-template-columns:1fr; min-height:auto;}
  .editorial-media{aspect-ratio:3/4; min-height:0;}
  .editorial-content{padding:2.75rem clamp(1.25rem, 5vw, 3rem);}

  .about-plate{aspect-ratio:4/3;}
  .plate{aspect-ratio:4/3;}
  .plate img{object-position:center 12%;}
  .plate-scrim{background:linear-gradient(180deg, rgba(12,13,15,0) 42%, rgba(12,13,15,.9) 100%);}
  .plate-tag{display:none;}
  .plate-caption{right:var(--gutter); max-width:none;}
}

@media (max-width: 768px){
  .nav-links{position:fixed; inset:68px 0 0 0; background:var(--black); flex-direction:column; align-items:flex-start; gap:0; padding:1rem var(--gutter); transform:translateX(100%); transition:transform .35s cubic-bezier(.16,1,.3,1); z-index:40;}
  .nav-links.open{transform:translateX(0);}
  .nav-links a{width:100%; padding:1.15rem 0; border-bottom:1px solid var(--line); font-size:1.15rem;}
  .menu-toggle{display:flex;}

  .corner-tag{font-size:.6rem;}
  .corner-tag--tr{max-width:50%;}
  .hero-grid-overlay{background-size:100% 60px, 100% 60px;}

  section{padding:3.25rem 1.25rem;}
  .section-head{flex-direction:column; align-items:flex-start; gap:.5rem;}
  .product-grid, .product-grid--dense{grid-template-columns:repeat(2, minmax(0,1fr));}
  .product-quickadd{opacity:1; transform:none; position:static; margin-top:.5rem;}

  .footer-top{grid-template-columns:1fr; gap:2.25rem;}
  .footer-bottom{flex-direction:column; gap:.75rem; align-items:flex-start;}
}

@media (max-width: 480px){
  .product-grid, .product-grid--dense{grid-template-columns:1fr;}
  .hero-ctas{flex-direction:column; align-items:stretch;}
  .corner-tag--tr{right:auto; left:var(--gutter); top:calc(68px + 3.1rem); text-align:left; max-width:70%;}
  .corner-tag--bl, .corner-tag--br{display:none;}
}