/* FENIX DECOR, tienda (r16). Sobre /estilos/base.css (tokens de final_v3). Sin estilos en línea: la CSP los bloquea. */
body{overflow-x:hidden}
main{padding-bottom:var(--e-16)}
.cabecera nav{display:flex;flex-wrap:wrap;gap:0 var(--e-4);font-size:var(--t-sm);font-weight:700}
.cabecera nav a{min-height:44px;display:inline-flex;align-items:center;text-underline-offset:4px}
@media (max-width:480px){.cabecera nav .solo-ancho{display:none}}
h1{font-size:clamp(2rem,7vw,3.25rem);line-height:1.1;margin:var(--e-6) 0 var(--e-3);max-width:18ch}
.intro{font-size:var(--t-md);color:var(--suave);max-width:58ch}
.kicker{display:block}
.saltos{display:flex;flex-wrap:wrap;gap:var(--e-2);margin:var(--e-5) 0 0}
.saltos a{display:inline-flex;align-items:center;gap:var(--e-2);min-height:44px;padding:0 var(--e-4);border-radius:var(--r-pildora);background:var(--superficie);box-shadow:inset 0 0 0 1px var(--borde);font-size:var(--t-sm);font-weight:700;text-decoration:none}
.saltos a:hover{box-shadow:inset 0 0 0 1.5px var(--acento)}
.necesidad{margin-top:var(--e-6)}
.necesidad>p{font-weight:800;font-size:var(--t-sm);margin:0 0 var(--e-3)}
.chips{display:flex;flex-wrap:wrap;gap:var(--e-2)}
.chip{font:inherit;font-size:var(--t-sm);font-weight:700;min-height:44px;padding:0 var(--e-4);border:0;border-radius:var(--r-pildora);background:var(--superficie);box-shadow:inset 0 0 0 1px var(--borde);color:var(--tinta);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--tinta);color:var(--fondo);box-shadow:none}
.cuenta{font-size:var(--t-sm);color:var(--suave);margin:var(--e-3) 0 0;min-height:1.5em}

/* rejilla de productos (catálogo, inicio y relacionados) */
.categoria{padding-top:var(--e-12);scroll-margin-top:var(--e-4)}
.cat-titulo{font-size:var(--t-2xl);line-height:1.15;margin:0 0 var(--e-2)}
.cat-titulo .kicker{margin-bottom:var(--e-2)}
.cat-intro{color:var(--suave);max-width:60ch;margin:0 0 var(--e-4)}
.productos{list-style:none;margin:var(--e-4) 0 0;padding:0;display:grid;gap:var(--e-4) var(--e-3);grid-template-columns:repeat(2,minmax(0,1fr))}
.producto{scroll-margin-top:96px}
.producto[hidden]{display:none}
.producto-a{display:flex;flex-direction:column;gap:var(--e-2);text-decoration:none;color:inherit;height:100%}
.producto-foto{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--r-md);overflow:hidden;background:var(--superficie);box-shadow:inset 0 0 0 1px var(--borde)}
.producto-foto img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease-out}
.producto-a:hover .producto-foto img{transform:scale(1.03)}
.sin-foto{display:grid;place-items:center;width:100%;height:100%;color:var(--acento)}
.sin-foto .ico{width:44px;height:44px}
.tiene-clip{position:absolute;left:var(--e-2);bottom:var(--e-2);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(42,40,34,.55);color:var(--sal)}
.tiene-clip .ico{width:14px;height:14px}
.producto-txt{display:grid;gap:var(--e-1)}
.producto-nombre{font-family:var(--titulos);font-size:var(--t-md);line-height:1.2}
.producto-promesa{font-size:var(--t-sm);color:var(--suave)}
.precio{margin:0;font-size:var(--t-sm)}
.precio b{font-size:var(--t-md)}
.precio span{color:var(--suave)}
.p-estado{display:inline-flex;align-items:center;gap:var(--e-1);font-size:var(--t-xs);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--suave)}
.p-estado .ico{width:16px;height:16px}
.p-estado.e-cotiza{color:var(--acento)}
@media (min-width:720px){.productos{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e-6) var(--e-4)}}
@media (min-width:1080px){.productos{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ficha */
.migas{font-size:var(--t-sm);color:var(--suave);margin-top:var(--e-4)}
.migas a{color:inherit;text-underline-offset:3px}
.ficha-cab{display:grid;gap:var(--e-6);margin-top:var(--e-4)}
.galeria{position:relative;margin:0 calc(var(--e-4) * -1)}
@media (min-width:768px){.galeria{margin:0 calc(var(--e-6) * -1)}}
.g-pista{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.g-pista::-webkit-scrollbar{display:none}
.g-item{position:relative;scroll-snap-align:start;aspect-ratio:4/5;background:var(--superficie)}
.g-item img,.g-item video{display:block;width:100%;height:100%;object-fit:cover}
.pausa-clip{position:absolute;right:var(--e-3);bottom:var(--e-3);font:inherit;font-size:var(--t-xs);font-weight:700;min-height:36px;padding:0 var(--e-3);border:0;border-radius:var(--r-pildora);background:rgba(42,40,34,.6);color:var(--sal);cursor:pointer}
.g-puntos{display:flex;justify-content:center;gap:var(--e-2);padding:var(--e-3) 0 0}
.g-puntos a{width:10px;height:10px;border-radius:50%;background:var(--borde)}
.g-puntos a.activo{background:var(--acento)}
.galeria.vacia{aspect-ratio:4/5;display:grid;place-items:center;background:var(--superficie);border-radius:var(--r-lg);margin:0}
.ficha-info h1{margin-top:0}
.promesa{font-size:var(--t-lg);color:var(--suave);margin:0 0 var(--e-3)}
.estado-l{margin:0 0 var(--e-4)}
.ficha-info>p{max-width:60ch}
.ojo{display:flex;gap:var(--e-2);align-items:flex-start;padding:var(--e-3);border-radius:var(--r-md);background:var(--superficie);font-size:var(--t-sm)}
.ojo .ico{flex:none;width:20px;height:20px;margin-top:2px;color:var(--acento)}
.bloque{padding-top:var(--e-12);scroll-margin-top:var(--e-4)}
.bloque>h2{font-size:var(--t-xl);line-height:1.2;margin:0 0 var(--e-4)}
.nota-bloque{color:var(--suave);max-width:60ch}
.detalles{display:grid;gap:var(--e-3);grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));margin:0}
.detalles div,.coleccion{padding:var(--e-4);border-radius:var(--r-lg);background:var(--superficie);box-shadow:inset 0 0 0 1px var(--borde)}
.detalles dt,.coleccion dt{font-weight:800;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--suave)}
.detalles dd,.coleccion dd{margin:var(--e-1) 0 0}
.colecciones{list-style:none;margin:0;padding:0;display:grid;gap:var(--e-3);grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.coleccion h3{font-size:var(--t-md);margin:0 0 var(--e-2)}
.coleccion p{margin:0 0 var(--e-3);font-size:var(--t-sm)}
.coleccion dl{display:grid;gap:var(--e-2);margin:0 0 var(--e-3);font-size:var(--t-sm)}
.colores{display:flex;flex-wrap:wrap;gap:var(--e-1) var(--e-2);align-items:center}
.colores span{font-weight:800;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--suave);margin-right:var(--e-1)}
.colores b{font-weight:600;font-size:var(--t-xs);padding:2px var(--e-2);border-radius:var(--r-pildora);box-shadow:inset 0 0 0 1px var(--borde)}
.pasos-f{list-style:none;counter-reset:p;margin:0;padding:0;display:grid;gap:var(--e-3);grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.pasos-f li{counter-increment:p;display:grid;gap:var(--e-1);padding:var(--e-4);border-radius:var(--r-lg);background:var(--superficie)}
.pasos-f li::before{content:counter(p);font-family:var(--titulos);font-size:var(--t-xl);color:var(--acento)}
.pasos-f span{font-size:var(--t-sm);color:var(--suave)}
details{border-top:1px solid var(--borde);padding:var(--e-3) 0}
details:last-of-type{border-bottom:1px solid var(--borde)}
summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
details p{color:var(--suave);margin:var(--e-2) 0 0;max-width:62ch}
@media (min-width:900px){
  .ficha-cab{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start;gap:var(--e-12)}
  .galeria{margin:0;position:sticky;top:var(--e-4)}
  .g-item{border-radius:var(--r-lg);overflow:hidden}
}

/* pedir: medidas y mi cotización */
.arma{padding:var(--e-5);border-radius:var(--r-lg);background:var(--superficie);box-shadow:inset 0 0 0 1px var(--borde);display:grid;gap:var(--e-4)}
.campos{display:grid;gap:var(--e-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
.campo{display:grid;gap:var(--e-1)}
.campo label{font-size:var(--t-sm);font-weight:800}
.campo select,.campo input{font:inherit;font-size:var(--t-base);min-height:48px;padding:0 var(--e-3);border-radius:var(--r-md);border:1px solid var(--borde);background:var(--fondo);color:var(--tinta);width:100%}
.mensaje{margin:0;padding:var(--e-4);border-radius:var(--r-md);background:var(--fondo);font-size:var(--t-sm);border-left:3px solid var(--miel)}
.mensaje b{display:block;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--suave);margin-bottom:var(--e-1)}
.letra{font-size:var(--t-sm);color:var(--suave);margin:0}
.acciones{display:flex;flex-wrap:wrap;gap:var(--e-3)}
.mi-cot{position:fixed;right:var(--e-4);bottom:max(var(--e-4),env(safe-area-inset-bottom));z-index:30}
.mi-cot-btn{box-shadow:var(--s-media)}
.mi-cot-btn b{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:var(--fondo);color:var(--tinta);font-size:var(--t-xs)}
.panel{position:fixed;inset:0;z-index:40;background:rgba(42,40,34,.5);display:grid;align-items:end}
.panel[hidden]{display:none}
.panel-caja{background:var(--fondo);color:var(--tinta);border-radius:var(--r-lg) var(--r-lg) 0 0;padding:var(--e-5);max-height:88vh;overflow:auto;display:grid;gap:var(--e-4)}
.panel-cab{display:flex;justify-content:space-between;align-items:center}
.panel-cab h2{margin:0;font-size:var(--t-xl)}
.cerrar{font:inherit;font-size:2rem;line-height:1;width:44px;height:44px;border:0;background:none;color:inherit;cursor:pointer}
.panel-lista{margin:0;padding-left:var(--e-5);display:grid;gap:var(--e-3)}
.panel-lista li{font-size:var(--t-sm)}
.panel-lista button{font:inherit;font-size:var(--t-xs);font-weight:700;margin-left:var(--e-2);border:0;background:none;color:var(--acento);text-decoration:underline;cursor:pointer}
@media (min-width:720px){.panel{align-items:center;justify-items:center}.panel-caja{border-radius:var(--r-lg);width:min(560px,92vw)}}
.sin-js{margin:0}

/* vidrio inteligente */
.foto{position:relative;margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--borde)}
.foto img{display:block;width:100%;height:auto}
.vidrio-demo .pelicula{position:absolute;z-index:1;background:rgba(247,242,234,.84);-webkit-backdrop-filter:blur(14px) saturate(.6);backdrop-filter:blur(14px) saturate(.6);transition:opacity .7s ease-out}
.vidrio-demo .p1{left:28.85%;top:17.3%;width:20.65%;height:67.5%}
.vidrio-demo .p2{left:50.85%;top:17.3%;width:20.65%;height:67.5%}
.vidrio-demo:not(.cargada) .pelicula{opacity:0;transition:none}
.vidrio-demo.encendido .pelicula{opacity:0}
.demo-pie{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2) var(--e-3);font-size:var(--t-sm);color:var(--suave)}
@media (prefers-reduced-motion:reduce){.vidrio-demo .pelicula{transition:none}.producto-foto img{transition:none}.g-pista{scroll-behavior:auto}}
.alias{font-size:var(--t-sm);color:var(--suave);margin:calc(var(--e-2) * -1) 0 var(--e-3)}
.depende{margin:0;padding-left:var(--e-5);display:grid;gap:var(--e-1)}
.panel-lista{list-style:decimal}
.mensaje span{white-space:pre-line}
.g-puntos a{position:relative}
.g-puntos a::after{content:"";position:absolute;inset:-7px}
.g-puntos{gap:var(--e-4)}
.panel-abierto{overflow:hidden}
body.con-cot .piepagina{padding-bottom:calc(var(--e-8) + 64px)}
