/* inside506 — hoja de estilo del sitio
   Concepto: catálogo de tienda tica old money. Fondo hueso, esquinas rectas, filetes de 1px,
   etiquetas de esquina en mono, Bodoni para nombres y precios. Un solo tema claro, a propósito (libro de marca).
*/
@font-face{font-family:"Bodoni Moda";src:url(../fonts/bodoni-moda-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(../fonts/bodoni-moda-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(../fonts/bodoni-moda-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(../fonts/bodoni-moda-latin-500-italic.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url(../fonts/schibsted-grotesk-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url(../fonts/schibsted-grotesk-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url(../fonts/schibsted-grotesk-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"DM Mono";src:url(../fonts/dm-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  /* Color (libro de marca v1.5) */
  --hueso:#EFEAE0; --papel:#F7F3EC; --lino:#E3DACB; --linea:#D3C8B6;
  --tinta:#1B1A18; --tinta-suave:#655E54; --tabaco:#5A4636;
  --marino:#1F2A3A; --arena:#C8B699; --musgo:#4B5240;
  --ok:#3F6B45; --aviso:#8A5A1E;
  /* Tipo */
  --display:"Bodoni Moda","Bodoni 72","Didot",Georgia,serif;
  --texto:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  /* Medidas */
  --gut:max(16px,env(safe-area-inset-left,0px));
  --gut-r:max(16px,env(safe-area-inset-right,0px));
  --max:1360px;
  --header-h:60px;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--hueso);color:var(--tinta);font:400 16px/1.55 var(--texto);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--hueso)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--marino);outline-offset:2px}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;background:var(--marino);color:var(--hueso);padding:10px 14px;z-index:100}
.skip:focus{top:8px}

/* Contenedor */
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut-r)}
.narrow{max-width:760px}

/* Texto */
.eyebrow,.label{font:400 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave)}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.005em}
.h1{font-size:clamp(34px,6vw,64px)}
.h2{font-size:clamp(28px,4vw,44px)}
.h3{font-size:clamp(22px,2.6vw,28px)}
em,.it{font-style:italic}
p{margin:0}
.lead{font-size:17px;color:var(--tinta-suave);max-width:58ch}
.precio{font-family:var(--display);color:var(--tabaco);font-variant-numeric:tabular-nums;white-space:nowrap}
.precio small{font-size:.62em;vertical-align:.32em;margin-right:1px}
.prose{max-width:68ch}
.prose h2{font-size:clamp(24px,3vw,32px);margin:40px 0 12px}
.prose h3{font-size:21px;margin:26px 0 8px}
.prose p,.prose li{color:var(--tinta);margin:0 0 12px}
.prose ul,.prose ol{padding-left:20px;margin:0 0 14px}
.prose table{border-collapse:collapse;width:100%;margin:8px 0 18px;font-variant-numeric:tabular-nums}
.prose th,.prose td{border-bottom:1px solid var(--linea);padding:9px 8px;text-align:left;font-size:15px}
.prose th{font:400 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-suave)}
.table-scroll{overflow-x:auto}
.nota{border:1px solid var(--linea);background:var(--papel);padding:14px 16px;font-size:15px}
.pendiente{background:#F3E2C4;border:1px dashed var(--aviso);padding:1px 6px;font:400 12px var(--mono);color:var(--aviso)}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;border:1px solid var(--marino);background:var(--marino);color:var(--hueso);font:500 12.5px/1 var(--texto);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border-radius:0;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--tinta);border-color:var(--tinta)}
.btn--line{background:transparent;color:var(--marino)}
.btn--line:hover{background:var(--marino);color:var(--hueso)}
.btn--hueso{background:var(--hueso);color:var(--marino);border-color:var(--hueso)}
.btn--hueso:hover{background:transparent;color:var(--hueso)}
.btn--wa svg{width:18px;height:18px;flex:none}
.btn--full{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.link{font:500 12px var(--texto);letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;text-underline-offset:5px;background:none;border:0;padding:0;color:inherit}

/* Barra de aviso */
.aviso{background:var(--marino);color:var(--hueso);font:400 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-align:center}
.aviso .wrap{padding-block:9px;display:flex;justify-content:center;gap:28px}
.aviso span+span{display:none}
@media (min-width:900px){.aviso span+span{display:inline}}

/* Encabezado */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--hueso);border-bottom:1px solid var(--linea)}
.hdr .wrap{height:var(--header-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.hdr__left,.hdr__right{display:flex;align-items:center;gap:22px}
.hdr__right{justify-content:flex-end}
.logo{display:block;color:var(--tinta);line-height:0}
.logo svg{height:17px;width:auto}
@media (min-width:900px){.logo svg{height:19px}}
.nav{display:none;gap:26px}
.nav a{font:500 12px var(--texto);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--tinta)}
.iconbtn{background:none;border:0;padding:8px;margin:-8px;display:inline-flex;align-items:center;gap:8px;font:500 12px var(--texto);letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.iconbtn svg{width:21px;height:21px}
.bag-count{font:400 11px var(--mono);min-width:20px;height:20px;padding:0 5px;display:inline-grid;place-items:center;background:var(--marino);color:var(--hueso)}
.bag-count[data-n="0"]{background:transparent;color:var(--tinta-suave);border:1px solid var(--linea)}
.only-desk{display:none}
@media (min-width:1024px){.nav{display:flex}.menu-btn{display:none}.only-desk{display:inline-flex}}

/* Menú móvil */
.panel{position:fixed;inset:0;z-index:70;display:flex;visibility:hidden}
.panel.is-open{visibility:visible}
.panel__veil{position:absolute;inset:0;background:rgba(27,26,24,.38);opacity:0;transition:opacity .25s}
.panel.is-open .panel__veil{opacity:1}
.panel__box{position:relative;background:var(--hueso);width:min(420px,92vw);height:100%;display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .3s cubic-bezier(.2,.7,.2,1);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.panel--right{justify-content:flex-end}
.panel--right .panel__box{transform:translateX(100%)}
.panel.is-open .panel__box{transform:none}
.panel__head{display:flex;justify-content:space-between;align-items:center;min-height:60px;padding:0 20px;border-bottom:1px solid var(--linea)}
.panel__body{flex:1;overflow-y:auto;padding:20px}
.panel__foot{border-top:1px solid var(--linea);padding:16px 20px calc(16px + env(safe-area-inset-bottom,0px))}
.mnav{list-style:none;margin:0;padding:0}
.mnav li{border-bottom:1px solid var(--linea)}
.mnav a{display:flex;justify-content:space-between;align-items:center;padding:16px 0;font:400 26px/1.1 var(--display);text-decoration:none}
.mnav a span{font:400 11px var(--mono);letter-spacing:.12em;color:var(--tinta-suave)}
.msub{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.msub a{font-size:15px;text-decoration:none;color:var(--tinta-suave)}

/* Hero */
.hero{display:grid;border-bottom:1px solid var(--linea)}
.hero__media{position:relative;background:var(--lino);aspect-ratio:4/5;max-height:78svh;overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero__text{display:flex;flex-direction:column;justify-content:center;gap:22px;padding:34px var(--gut-r) 40px var(--gut)}
.hero__text .h1{font-style:italic}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.corner{position:absolute;font:400 10.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--hueso);text-shadow:0 0 12px rgba(0,0,0,.25)}
.corner--tl{top:14px;left:14px}.corner--tr{top:14px;right:14px}.corner--bl{bottom:14px;left:14px}.corner--br{bottom:14px;right:14px}
@media (min-width:900px){
  .hero{grid-template-columns:minmax(0,5fr) minmax(0,6fr);height:min(84svh,780px);min-height:560px}
  .hero__media{aspect-ratio:auto;max-height:none;height:100%;order:2}
  .hero__text{padding:56px 56px 56px max(var(--gut),calc((100vw - var(--max))/2 + 16px));gap:28px}
}

/* Atardecer: medio sol arena detrás de un bloque marino (motivo de marca) */
.sunset{position:relative;background:var(--marino);overflow:hidden;width:100%;height:100%;min-height:220px}
.sunset::before{content:"";position:absolute;left:50%;bottom:34%;width:min(46%,260px);aspect-ratio:1;transform:translate(-50%,50%);border-radius:50%;background:var(--arena)}
.sunset::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:var(--marino);border-top:1px solid rgba(239,234,224,.18)}
.sunset .corner{z-index:2;text-shadow:none}

/* Secciones */
.sec{padding-block:64px}
.sec--tight{padding-block:40px}
.sec--line{border-top:1px solid var(--linea)}
.sec__head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:28px;flex-wrap:wrap}
.sec__head>div{display:grid;gap:10px;min-width:0}
@media (min-width:900px){.sec{padding-block:96px}}

/* Categorías */
.cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:900px){.cats{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}
.cat{position:relative;display:block;text-decoration:none;color:var(--hueso);background:var(--lino);aspect-ratio:4/5;overflow:hidden}
.cat img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.cat:hover img{transform:scale(1.03)}
.cat__name{position:absolute;left:14px;right:14px;bottom:14px;display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.cat__name b{font:400 clamp(22px,3vw,30px)/1 var(--display);font-style:italic}
.cat__name span{font:400 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.cat::after{content:"";position:absolute;inset:55% 0 0;background:linear-gradient(transparent,rgba(27,26,24,.42));pointer-events:none}
.cat__name{z-index:1}
.cat--empty{color:var(--tinta)}
.cat--empty::after{display:none}

/* Espacio de foto (cuando todavía no hay foto) */
.ph{position:absolute;inset:0;display:grid;place-items:center;background:var(--lino);color:var(--tinta-suave)}
.ph__in{display:grid;justify-items:center;gap:10px;text-align:center;padding:14px}
.ph__emb{width:30px;height:30px;color:var(--arena)}
.ph__sw{width:34px;height:4px}
.ph__t{font:400 10px var(--mono);letter-spacing:.14em;text-transform:uppercase}

/* Rejilla de productos */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 10px}
@media (min-width:760px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 14px}}
@media (min-width:1180px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{display:grid;gap:10px;align-content:start;min-width:0}
.card__media{position:relative;display:block;aspect-ratio:4/5;background:var(--lino);overflow:hidden}
.card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s}
.card__media img+img{opacity:0}
@media (hover:hover){.card:hover .card__media img+img{opacity:1}}
.card__tag{position:absolute;top:10px;left:10px;z-index:2;font:400 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;background:var(--hueso);padding:4px 7px}
.card__body{display:grid;gap:4px;min-width:0}
.card__name{font:400 17px/1.25 var(--display);text-decoration:none}
.card__name:hover{text-decoration:underline}
.card__note{font-size:13px;color:var(--tinta-suave)}
.card__row{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px}
.card .precio{font-size:17px}
.card .precio .desde{font:400 11px var(--texto);color:var(--tinta-suave);letter-spacing:.02em;margin-right:4px}
.dots{display:flex;gap:4px;align-items:center}
.dot{width:11px;height:11px;border:1px solid rgba(27,26,24,.22);background:var(--c,#ccc)}
.dots .more{font:400 10.5px var(--mono);color:var(--tinta-suave);margin-left:3px}

/* Muestras de color (clases generadas en colores.css) */
.sw-pattern{background:repeating-linear-gradient(45deg,#1B1A18 0 3px,#C8B699 3px 6px)!important}

/* La panta: producto principal */
.spot{display:grid;gap:0;background:var(--papel);border:1px solid var(--linea)}
.spot__media{position:relative;aspect-ratio:4/5;background:var(--lino);overflow:hidden}
.spot__media img{width:100%;height:100%;object-fit:cover}
.spot__text{padding:28px 20px 32px;display:grid;gap:18px;align-content:center}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.facts div{padding:14px 10px 14px 0;display:grid;gap:4px;min-width:0}
.facts div+div{padding-left:12px;border-left:1px solid var(--linea)}
.facts b{font:400 19px/1.1 var(--display);font-style:italic}
.facts span{font:400 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-suave)}
.ladder{display:grid;gap:6px}
.ladder div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dotted var(--linea);padding-bottom:6px;font-size:15px}
.ladder .precio{font-size:18px}
@media (min-width:900px){.spot{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.spot__text{padding:56px}}

/* Cómo comprar */
.steps{display:grid;gap:0;counter-reset:s;border-top:1px solid var(--linea)}
.step{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:22px 0;border-bottom:1px solid var(--linea)}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);font:400 12px var(--mono);letter-spacing:.1em;color:var(--tabaco);padding-top:5px}
.step h3{font-size:22px;margin-bottom:6px}
.step p{color:var(--tinta-suave);font-size:15px}
@media (min-width:900px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));border-top:0}.step{grid-template-columns:1fr;border-bottom:0;border-top:1px solid var(--tinta);padding:20px 28px 0 0}}

/* Franja de confianza */
.trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.trust div{padding:20px 14px 20px 0;display:grid;gap:6px;align-content:start;min-width:0}
.trust div:nth-child(even){padding-left:14px;border-left:1px solid var(--linea)}
.trust div:nth-child(n+3){border-top:1px solid var(--linea)}
.trust b{font:400 18px/1.15 var(--display)}
.trust span{font-size:13.5px;color:var(--tinta-suave)}
@media (min-width:900px){.trust{grid-template-columns:repeat(4,minmax(0,1fr))}.trust div{padding:26px 22px}.trust div:first-child{padding-left:0}.trust div+div{border-left:1px solid var(--linea)}.trust div:nth-child(n+3){border-top:0}}

/* Banda de marca */
.band{background:var(--marino);color:var(--hueso)}
.band__in{display:grid;gap:0}
.band__art{min-height:260px}
.band__text{padding:44px var(--gut-r) 48px var(--gut);display:grid;gap:18px;align-content:center}
.band__text .lead{color:rgba(239,234,224,.78)}
.words{display:flex;flex-wrap:wrap;gap:6px 18px;font:400 italic 20px var(--display);color:var(--arena)}
@media (min-width:900px){.band__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.band__art{min-height:440px}.band__text{padding:72px max(var(--gut-r),calc((100vw - var(--max))/2 + 16px)) 72px 64px}}

/* Editorial doble */
.duo{display:grid;gap:10px}
.duo a{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--lino);color:var(--hueso);text-decoration:none}
.duo img{width:100%;height:100%;object-fit:cover}
.duo .cap{position:absolute;left:16px;right:16px;bottom:16px;z-index:1;display:grid;gap:8px}
.duo .cap b{font:400 italic clamp(26px,3.4vw,40px)/1 var(--display)}
.duo a::after{content:"";position:absolute;inset:50% 0 0;background:linear-gradient(transparent,rgba(27,26,24,.5))}
@media (min-width:760px){.duo{grid-template-columns:1fr 1fr;gap:14px}}

/* Contacto rápido */
.contact{display:grid;gap:24px;border:1px solid var(--linea);background:var(--papel);padding:24px 20px}
.contact dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 18px;margin:0}
.contact dt{font:400 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-suave);padding-top:3px}
.contact dd{margin:0}
@media (min-width:900px){.contact{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);padding:40px;align-items:center}}

/* Pie */
.ftr{background:var(--marino);color:var(--hueso);margin-top:0}
.ftr .wrap{padding-block:56px calc(28px + env(safe-area-inset-bottom,0px))}
.ftr__top{display:grid;gap:36px}
.ftr__brand{display:grid;gap:16px;max-width:340px}
.ftr__brand>svg{height:18px;width:auto;color:var(--hueso)}
.ftr__brand p{color:rgba(239,234,224,.72);font-size:14.5px}
.ftr__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
.ftr h4{margin:0 0 12px;font:400 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--arena)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ftr a{text-decoration:none;font-size:14.5px;color:rgba(239,234,224,.86)}
.ftr a:hover{color:var(--hueso);text-decoration:underline}
.ftr__bottom{margin-top:44px;padding-top:18px;border-top:1px solid rgba(239,234,224,.16);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;font:400 10.5px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(239,234,224,.6)}
@media (min-width:900px){.ftr__top{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}.ftr__cols{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Botón flotante de WhatsApp */
.fab{position:fixed;right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:35;display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 16px;background:var(--marino);color:var(--hueso);text-decoration:none;font:500 12px var(--texto);letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(239,234,224,.2);transition:transform .25s}
.fab svg{width:22px;height:22px}
.fab span{display:none}
@media (min-width:760px){.fab span{display:inline}}
body.has-buybar .fab{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
@media (min-width:1024px){body.has-buybar .fab{bottom:calc(14px + env(safe-area-inset-bottom,0px))}}

/* Encabezado de página interna */
.phead{padding-block:34px 26px;border-bottom:1px solid var(--linea)}
.phead .wrap{display:grid;gap:12px}
.crumbs{font:400 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-suave);display:flex;flex-wrap:wrap;gap:8px}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
@media (min-width:900px){.phead{padding-block:56px 36px}}

/* Barra de filtros */
.filters{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--header-h));z-index:30;background:var(--hueso);border-bottom:1px solid var(--linea)}
.filters .wrap{display:flex;align-items:center;gap:14px;min-height:56px}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;padding-block:10px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:34px;padding:0 14px;border:1px solid var(--linea);background:transparent;font:500 12px var(--texto);letter-spacing:.06em;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center}
.chip[aria-pressed="true"],.chip[aria-current="page"]{background:var(--marino);border-color:var(--marino);color:var(--hueso)}
.sort{flex:none;display:flex;align-items:center;gap:6px}
.sort select{border:1px solid var(--linea);background:var(--hueso);height:34px;padding:0 8px;font-size:13px;border-radius:0}
.count{font:400 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-suave)}
.search{display:flex;border:1px solid var(--tinta);background:var(--papel)}
.search input{flex:1;min-width:0;border:0;background:transparent;height:52px;padding:0 16px;font-size:16px}
.search input:focus{outline:none}
.search:focus-within{outline:2px solid var(--marino);outline-offset:2px}
.empty{padding:48px 0;text-align:center;display:grid;gap:14px;justify-items:center;color:var(--tinta-suave)}

/* Página de producto */
.pdp{display:grid;gap:0}
.gallery{position:relative;min-width:0}
.gallery__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.gallery__track::-webkit-scrollbar{display:none}
.gallery__item{flex:0 0 100%;scroll-snap-align:start;position:relative;aspect-ratio:4/5;background:var(--lino);overflow:hidden}
.gallery__item img{width:100%;height:100%;object-fit:cover}
.gallery__count{position:absolute;right:12px;bottom:12px;background:var(--hueso);font:400 10.5px var(--mono);letter-spacing:.1em;padding:4px 8px;z-index:2}
.thumbs{display:none}
.buy{padding:24px var(--gut-r) 40px var(--gut);display:grid;gap:22px;align-content:start;min-width:0}
.buy__title{display:grid;gap:10px}
.buy__title h1{font-size:clamp(30px,4vw,42px)}
.buy__price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.buy__price .precio{font-size:28px}
.buy__price .label{color:var(--tinta-suave)}
.opt{display:grid;gap:10px;border:0;margin:0;padding:0;min-width:0}
.opt legend{padding:0;margin-bottom:10px;display:flex;justify-content:space-between;width:100%;gap:10px}
.opt legend b{font-weight:500}
.opt legend .val{color:var(--tinta-suave)}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatch{position:relative;width:36px;height:36px;padding:0;border:1px solid var(--linea);background:var(--hueso);display:grid;place-items:center}
.swatch i{width:26px;height:26px;border:1px solid rgba(27,26,24,.16);background:var(--c)}
.swatch[aria-checked="true"]{border-color:var(--tinta);box-shadow:inset 0 0 0 1px var(--tinta)}
.sizes{display:flex;flex-wrap:wrap;gap:8px}
.size{min-width:54px;height:46px;padding:0 12px;border:1px solid var(--linea);background:transparent;font:500 14px var(--texto);font-variant-numeric:tabular-nums}
.size:hover{border-color:var(--tinta)}
.size[aria-checked="true"]{background:var(--marino);color:var(--hueso);border-color:var(--marino)}
.size--wide{min-width:0}
.fit{font-size:14px;color:var(--tinta-suave);display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.qty{display:inline-flex;border:1px solid var(--linea);height:46px}
.qty button{width:44px;border:0;background:transparent;font-size:18px}
.qty input{width:44px;border:0;background:transparent;text-align:center;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.actions{display:grid;gap:10px}
.msg{font-size:14px;color:var(--aviso);min-height:0}
.assure{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.assure li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--linea);font-size:14px}
.assure svg{width:20px;height:20px;color:var(--tabaco);margin-top:1px}
.assure b{font-weight:500}
.acc{border-top:1px solid var(--linea)}
.acc details{border-bottom:1px solid var(--linea)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:16px 0;font:500 12.5px var(--texto);letter-spacing:.14em;text-transform:uppercase}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font:300 20px var(--texto);letter-spacing:0}
.acc details[open] summary::after{content:"–"}
.acc .in{padding:0 0 18px;font-size:15px;color:var(--tinta);display:grid;gap:10px}
.acc .in ul{margin:0;padding-left:18px}
.stock-note{font-size:13.5px;color:var(--tinta-suave);border-left:2px solid var(--arena);padding-left:12px}
@media (min-width:1024px){
  .pdp{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;max-width:var(--max);margin:0 auto;padding:32px var(--gut-r) 0 var(--gut)}
  .gallery__track{display:grid;grid-template-columns:1fr 1fr;gap:10px;overflow:visible}
  .gallery__item:first-child{grid-column:1/-1}
  .gallery__count{display:none}
  .buy{position:sticky;top:calc(var(--header-h) + 24px);padding:8px 0 40px}
}

/* Barra de compra fija (móvil) */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:36;background:var(--hueso);border-top:1px solid var(--linea);padding:10px var(--gut-r) calc(10px + env(safe-area-inset-bottom,0px)) var(--gut);display:flex;align-items:center;gap:12px;transform:translateY(110%);transition:transform .25s}
.buybar.is-on{transform:none}
.buybar .precio{font-size:21px}
.buybar .btn{flex:1;min-height:48px;padding:0 14px}
.buybar__info{display:grid;min-width:0}
.buybar__info span{font-size:12px;color:var(--tinta-suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:1024px){.buybar{display:none}}

/* Bolsa (cajón) */
.bag-items{list-style:none;margin:0;padding:0;display:grid;gap:0}
.bag-item{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;padding:16px 0;border-bottom:1px solid var(--linea)}
.bag-item__img{position:relative;aspect-ratio:4/5;background:var(--lino);overflow:hidden}
.bag-item__img img{width:100%;height:100%;object-fit:cover}
.bag-item__top{display:flex;justify-content:space-between;gap:10px}
.bag-item__name{font:400 17px/1.2 var(--display);text-decoration:none}
.bag-item__meta{font-size:13px;color:var(--tinta-suave);margin:3px 0 10px}
.bag-item__row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.bag-item .qty{height:36px}
.bag-item .qty button{width:34px}
.bag-item .qty input{width:30px}
.bag-item .precio{font-size:16px}
.rm{background:none;border:0;padding:0;font-size:12px;color:var(--tinta-suave);text-decoration:underline;text-underline-offset:3px}
.progress{display:grid;gap:8px;padding:14px;background:var(--papel);border:1px solid var(--linea);font-size:14px;margin-bottom:6px}
.progress__bar{height:3px;background:var(--linea)}
.progress__bar i{display:block;height:100%;background:var(--musgo);width:0;transition:width .3s}
.form{display:grid;gap:14px;margin-top:20px}
.field{display:grid;gap:6px}
.field label,.field .lab{font:400 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-suave)}
.field input,.field select,.field textarea{height:46px;border:1px solid var(--linea);background:var(--papel);padding:0 12px;border-radius:0;font-size:16px}
.field textarea{height:auto;min-height:64px;padding:10px 12px;resize:vertical}
.radios{display:grid;gap:8px}
.radio{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px;border:1px solid var(--linea);background:var(--papel);cursor:pointer;font-size:14.5px}
.radio input{margin:0;accent-color:var(--marino);width:18px;height:18px}
.radio:has(input:checked){border-color:var(--marino);box-shadow:inset 0 0 0 1px var(--marino)}
.radio small{display:block;color:var(--tinta-suave);font-size:12.5px}
.radio .precio{font-size:15px}
.totals{display:grid;gap:8px;font-size:15px}
.totals div{display:flex;justify-content:space-between;gap:10px}
.totals .grand{font-size:17px;padding-top:8px;border-top:1px solid var(--linea)}
.totals .grand .precio{font-size:22px}
.fine{font-size:12.5px;color:var(--tinta-suave)}

/* Ventana (guía de tallas) */
.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:end center;visibility:hidden}
.modal.is-open{visibility:visible}
.modal__veil{position:absolute;inset:0;background:rgba(27,26,24,.4);opacity:0;transition:opacity .2s}
.modal.is-open .modal__veil{opacity:1}
.modal__box{position:relative;background:var(--hueso);width:100%;max-width:640px;max-height:88svh;overflow:auto;padding:22px var(--gut-r) calc(26px + env(safe-area-inset-bottom,0px)) var(--gut);transform:translateY(100%);transition:transform .3s}
.modal.is-open .modal__box{transform:none}
@media (min-width:760px){.modal{place-items:center}.modal__box{padding:32px}}

/* Aviso breve */
.toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 74px);transform:translate(-50%,-10px);background:var(--tinta);color:var(--hueso);padding:12px 16px;font-size:14px;z-index:90;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;max-width:calc(100vw - 32px)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* FAQ */
.faq{border-top:1px solid var(--linea)}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:18px 0;font:400 20px/1.25 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 22px var(--texto)}
.faq details[open] summary::after{content:"–"}
.faq .in{padding:0 0 20px;color:var(--tinta);max-width:68ch;display:grid;gap:10px}

/* 404 */
.nf{min-height:60svh;display:grid;place-items:center;text-align:center;padding-block:60px}
.nf .wrap{display:grid;gap:18px;justify-items:center}

.desde{font:400 11px var(--texto);color:var(--tinta-suave);letter-spacing:.02em;margin-right:4px}
.ftr .btn--hueso{color:var(--marino);justify-self:start}
.ftr .btn--hueso:hover{color:var(--hueso);text-decoration:none}
.qty{justify-self:start;width:max-content}
@media (max-width:599px){.cat__name{flex-direction:column;align-items:flex-start;gap:4px}}
.radio .precio{min-width:max-content;text-align:right}
@media (max-width:599px){.sort select{max-width:118px}}
.ftr li{font-size:14.5px;color:rgba(239,234,224,.86)}
.prose>h2:first-child{margin-top:0}