/* ============================================================
   VETA v3 · estilos de la capa nueva (24-sep-2026)
   Usa los mismos tokens de style.css (Greda de día, Basalto de noche).
   ============================================================ */

/* ---- accesos de la portada: Colgantes / Mesa / Sets ---- */
#v3-accesos{margin:32px 0 8px}
.v3-accesos-grilla{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.v3-acceso{display:flex; flex-direction:column; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--paper-2)}
.v3-acceso:hover{border-color:var(--acento)}
.v3-acceso:focus-visible{outline:2px solid var(--focus); outline-offset:3px}
.v3-acc-img{display:block; aspect-ratio:4/3; overflow:hidden; background:var(--field)}
.v3-acc-img img{width:100%; height:100%; object-fit:cover}
.v3-acc-txt{display:flex; flex-direction:column; gap:2px; padding:14px 16px 16px}
.v3-acc-t{font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif; font-weight:600; font-size:20px; letter-spacing:-.015em}
.v3-acc-sub{font-size:13.5px; color:var(--ink-soft)}
.v3-acc-pr{font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:12.5px; letter-spacing:.04em; color:var(--acento); margin-top:6px}

/* ---- intro de la página de categoría ---- */
#v3-cat{margin:28px 0 8px}
#v3-cat h1{font-size:clamp(28px,5vw,40px); line-height:1.1; margin:0 0 10px}
.v3-cat-intro{max-width:64ch; color:var(--ink-soft); font-size:16px; margin:0}
.v3-cat-links{margin:48px 0 0; padding-top:18px; border-top:1px solid var(--line); font-size:14px}
.v3-cat-links p{margin:0 0 8px; font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft)}
.v3-cat-links ul{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px 14px}
.v3-cat-links a{color:var(--ink)}

/* ---- filtros ---- */
#v3-filtros{margin:26px 0 0}
.v3-filtros-fila{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.v3-sel{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px;
  padding:5px 8px 5px 14px; background:var(--paper-2); cursor:pointer}
.v3-sel.on{border-color:var(--acento)}
.v3-sel span{font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft)}
.v3-sel select{font:500 14px "Hanken Grotesk",sans-serif; color:var(--ink); background:transparent; border:0; padding:4px 2px; cursor:pointer; max-width:210px}
.v3-sel select:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px}
.v3-sel select option{color:#2A241C; background:#F5F0E7}
.v3-chip,.v3-limpiar{font:500 14px "Hanken Grotesk",sans-serif; border-radius:999px; padding:9px 14px; cursor:pointer}
.v3-chip{border:1px solid var(--line); background:var(--paper-2); color:var(--ink)}
.v3-chip.on{background:var(--acento); border-color:var(--acento); color:var(--acento-ink)}
.v3-limpiar{border:0; background:none; color:var(--acento); text-decoration:underline; text-underline-offset:3px; padding:9px 6px}
.v3-chip:focus-visible,.v3-limpiar:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.v3-vacio{color:var(--ink-soft); margin:18px 0 40px}

/* ---- tarjeta: la línea de las de mesa ---- */
.card .v3-fam{display:block; margin-top:6px; font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--acento)}

/* ---- ficha en el celular: nombre y precio arriba ---- */
.v3-cabeza{display:none}

/* ---- encabezado en escritorio ----
   La web publicada ya se desbordaba a 1280 px (el día/noche quedaba fuera
   de pantalla, 208 px). Con el menú por categorías: sin la palabra "Modo",
   sin Instagram (ya está en la barra de arriba y en el pie) y, si aun así
   no cabe, el menú baja a una segunda línea en vez de salirse. */
@media (min-width:781px){
  .top-in{flex-wrap:wrap; row-gap:6px}
  .menu{gap:16px; flex-wrap:wrap; justify-content:flex-end; row-gap:2px}
  .top-in > .luz .luz-lbl{display:none}
  .menu a.ig-link{display:none}
}
@media (min-width:781px) and (max-width:1400px){
  .menu{gap:11px}
  .menu a{font-size:12.5px}
  .top-in > .luz button{padding:7px 10px}
}

/* ---- ficha simple: combinaciones, otros colores y ajustes ---- */
.v3-combos-opts{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
.v3-combo{display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:10px; align-items:center;
  text-align:left; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--paper-2); color:var(--ink); cursor:pointer; font:inherit}
.v3-combo:hover{border-color:var(--ink-soft)}
.v3-combo.on{border-color:var(--acento); box-shadow:inset 0 0 0 1px var(--acento)}
.v3-combo:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.v3-combo-pts{grid-row:1 / span 2; display:flex}
.v3-combo-pts i{width:18px; height:18px; border-radius:50%; border:1px solid rgba(0,0,0,.18)}
.v3-combo-pts i + i{margin-left:-6px}
.v3-combo-n{font-weight:500; font-size:14px}
.v3-combo-d{font-size:12px; color:var(--ink-soft)}

.v3-colores{margin:-6px 0 18px}
.v3-colores > summary{cursor:pointer; font-size:13.5px; color:var(--acento); text-decoration:underline; text-underline-offset:3px; list-style:none; padding:4px 0}
.v3-colores > summary::-webkit-details-marker{display:none}
.v3-colores[open] > summary{margin-bottom:12px}

.v3-ajustes{border:1px solid var(--line); border-radius:8px; padding:0; background:var(--paper-2)}
.v3-ajustes > summary{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; padding:12px 14px; cursor:pointer; list-style:none}
.v3-ajustes > summary::-webkit-details-marker{display:none}
.v3-ajustes > summary .lab{margin:0}
.v3-aj-res{flex:1 1 60%; font-size:13.5px; color:var(--ink-soft)}
.v3-aj-cambiar{font-size:13px; color:var(--acento); text-decoration:underline; text-underline-offset:3px}
.v3-ajustes[open] .v3-aj-cambiar{visibility:hidden}
.v3-ajustes > summary:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:8px}
.v3-aj-tip{flex:1 0 100%; font-size:13px; color:var(--acento)}
.v3-ajustes[open] .v3-aj-tip{display:none}
/* 8-oct: opciones del soporte con miniatura */
.opt.con-img{grid-template-columns:60px 1fr; column-gap:12px; align-items:center}
.opt.con-img > :not(.opt-img){grid-column:2}
.opt-img{grid-row:1 / span 3; width:60px; height:60px; object-fit:cover; border-radius:4px; background:#EFEAE2}
.v3-aj-cuerpo{padding:4px 14px 6px; border-top:1px solid var(--line)}
.v3-aj-cuerpo > .grupo{margin-top:14px}

.v3-a-sets{margin:-6px 0 18px; font-size:13.5px; color:var(--ink-soft)}
.v3-a-sets a{color:var(--acento)}

/* ---- despacho en el pedido ---- */
.v3-envio{margin:4px 0 10px; display:flex; flex-direction:column; gap:10px}
.v3-env-reg{display:flex; flex-direction:column; gap:4px}
.v3-env-reg span{font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft)}
.v3-env-reg select{font:500 15px "Hanken Grotesk",sans-serif; color:var(--ink); background:var(--paper-2); border:1px solid var(--line); border-radius:8px; padding:9px 10px}
.v3-env-reg select option{color:#2A241C; background:#F5F0E7}
.v3-env-ops{display:flex; flex-direction:column; gap:6px}
.v3-env-op{display:grid; grid-template-columns:auto 1fr auto; column-gap:10px; align-items:baseline;
  padding:10px 12px; border:1px solid var(--line); border-radius:8px; cursor:pointer; background:var(--paper-2)}
.v3-env-op.on{border-color:var(--acento); box-shadow:inset 0 0 0 1px var(--acento)}
.v3-env-op input{margin:0; accent-color:var(--acento); align-self:center}
.v3-env-n{font-size:14px; font-weight:500}
.v3-env-p{font-size:14px; font-weight:500; white-space:nowrap; color:var(--acento)}
.v3-env-d{grid-column:2 / span 2; font-size:12.5px; color:var(--ink-soft)}
.v3-env-op:focus-within{outline:2px solid var(--focus); outline-offset:2px}
.v3-env-nota{margin:0; font-size:13px; color:var(--ink-soft)}
.v3-env-linea{display:flex; justify-content:space-between; margin:0; font-size:14px; color:var(--ink-soft)}
.v3-env-linea b{font-weight:500; color:var(--ink)}

/* ---- código de descuento de Instagram ---- */
.v3-codigo{display:flex; gap:6px}
.v3-codigo input{flex:1; min-width:0; font:500 14px "Hanken Grotesk",sans-serif; color:var(--ink); background:var(--paper-2);
  border:1px dashed var(--line); border-radius:8px; padding:9px 10px; text-transform:uppercase}
.v3-codigo input::placeholder{text-transform:none; color:var(--ink-soft)}
.v3-codigo button,.v3-codigo-quitar{font:500 13px "Hanken Grotesk",sans-serif; border:1px solid var(--line); background:none;
  color:var(--ink); border-radius:8px; padding:0 12px; cursor:pointer}
.v3-codigo-quitar{padding:4px 10px; margin-left:4px}
.v3-codigo-ok{margin:0; font-size:13px; color:var(--acento)}
.v3-codigo-err{margin:0; font-size:12.5px; color:#B3261E}
.v3-env-linea.v3-desc b{color:var(--acento)}

/* ---- pago en línea (Flow) ---- */
.v3-pago{display:flex; flex-direction:column; gap:8px; margin:4px 0 10px}
.v3-pagar{width:100%; border:0; cursor:pointer; font:inherit}
.v3-pagar[disabled]{opacity:.6; cursor:wait}
.v3-pago-nota{margin:0; font-size:12.5px; color:var(--ink-soft); text-align:center}
.v3-pago-form{display:flex; flex-direction:column; gap:8px}
.v3-pago-form label{display:flex; flex-direction:column; gap:3px}
.v3-pago-form label span{font-size:12px; color:var(--ink-soft)}
.v3-pago-form input{font:500 15px "Hanken Grotesk",sans-serif; color:var(--ink); background:var(--paper-2); border:1px solid var(--line); border-radius:8px; padding:10px}
.v3-pago-form input:focus-visible{outline:2px solid var(--focus); outline-offset:1px}
.v3-pago-err{margin:0; font-size:13.5px; color:#B3261E}
a.pedir.v3-wa-sec{background:none; color:var(--ink); border:1px solid var(--line)}

/* El carrito se desplaza ENTERO (lista, despacho, total y formulario de
   pago): antes solo la lista, y en el celular el formulario quedaba bajo
   el borde de la pantalla. La página de atrás no se mueve. */
.carrito-caja{overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
.carrito-lista{flex:none; overflow:visible}
.carrito-fondo{touch-action:none}
html:has(.carrito:not([hidden])), html:has(.carrito:not([hidden])) body{overflow:hidden}

/* Con pago en línea: "Comprar" es el botón principal; WhatsApp, el segundo */
.v3-comprar{display:block; width:100%; border:0; cursor:pointer; background:var(--acento); color:var(--acento-ink);
  padding:17px 30px; border-radius:2px; font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; font-weight:500}
.v3-comprar:hover{opacity:.88}
.v3-comprar:focus-visible{outline:2px solid var(--focus); outline-offset:3px}
body.v3-pago-on #ficha .cierre{display:flex; flex-direction:column; align-items:stretch; gap:0}
body.v3-pago-on #ficha .cierre .precio-box{order:0; margin-bottom:14px}
body.v3-pago-on #ficha .cierre #v3-comprar{order:1}
body.v3-pago-on #ficha .cierre #agregar{order:2; margin-top:8px}
/* WhatsApp ya no es para comprar: queda como contacto (línea bajo los botones) */
body.v3-pago-on #pedir{display:none}
.v3-contacto{margin:10px 0 0; font-size:13px; color:var(--ink-soft); text-align:center}
.v3-contacto a, body.v3-pago-on .mas-unidades a{color:var(--acento)}

/* ---- sets: el botón "ver todos" ocupa una celda de la grilla ---- */
.v3-mas-sets{min-height:120px}

/* ---- galería deslizable de la ficha (celular) ---- */
.v3-puntos{display:none}
@media (max-width:780px){
  #ficha .col-img{position:relative; flex-direction:row; gap:10px; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  #ficha .col-img::-webkit-scrollbar{display:none}
  #ficha .visor-fila{display:contents}
  #ficha .col-img figure{flex:0 0 100%; min-width:0; margin:0; scroll-snap-align:center; scroll-snap-stop:always}
  /* todas cuadradas, así la galería no salta de alto (la lupa las muestra enteras) */
  #ficha .col-img figure img, #ficha .col-img figure video{width:100%; aspect-ratio:1; object-fit:cover}
  #ficha .col-img figcaption{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .v3-puntos{display:flex; justify-content:center; gap:8px; margin:10px 0 4px}
  .v3-puntos[hidden]{display:none}
  .v3-puntos button{width:8px; height:8px; padding:0; border-radius:50%; border:0; background:var(--line); cursor:pointer}
  .v3-puntos button.on{background:var(--acento); width:20px; border-radius:4px}
  .v3-puntos button:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
  #ficha #visor-ctrl{margin:6px 0 14px}
}

@media (max-width:780px){
  .v3-accesos-grilla{grid-template-columns:1fr; gap:10px}
  .v3-acceso{flex-direction:row; align-items:stretch}
  .v3-acc-img{width:38%; flex:none; aspect-ratio:auto; min-height:104px}
  .v3-acc-txt{justify-content:center; padding:12px 14px}
  .v3-acc-t{font-size:18px}

  .v3-filtros-fila{display:grid; grid-template-columns:1fr 1fr; gap:8px}
  .v3-sel{flex-direction:column; align-items:flex-start; gap:0; border-radius:10px; padding:7px 10px}
  .v3-sel select{width:100%; max-width:none; padding:2px 0}
  .v3-chip{border-radius:10px}

  .v3-cabeza{display:block; padding:4px 0 14px}
  .v3-cab-tipo{margin:0; font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft)}
  .v3-cab-nom{margin:2px 0 0; font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif; font-weight:600; font-size:30px; line-height:1.1; letter-spacing:-.015em}
  .v3-cab-pr{margin:4px 0 0; font-size:16px; color:var(--acento); font-weight:500}
}

/* ---- probar.js (26-sep): Ver en 3D y en tu espacio ---- */
.probar-fila{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.probar-fila[hidden]{display:none}
.probar-btn{font:inherit;font-size:14px;font-weight:600;padding:9px 16px;border-radius:999px;cursor:pointer;
  border:1px solid var(--ink);background:var(--ink);color:var(--paper)}
.probar-btn:hover{opacity:.9}
.probar-btn:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.p3d{position:fixed;inset:0;z-index:200;background:rgba(20,17,12,.72);display:flex;align-items:center;justify-content:center;padding:16px}
.p3d[hidden]{display:none}
html.p3d-abierto{overflow:hidden}
.p3d-caja{background:var(--paper-2);color:var(--ink);border-radius:14px;width:min(640px,100%);max-height:100%;display:flex;flex-direction:column;overflow:hidden}
.p3d-cab{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)}
.p3d-tit{margin:0;font-weight:600}
.p3d-cerrar{border:0;background:none;font-size:18px;cursor:pointer;color:var(--ink);padding:4px 8px}
.p3d-visor{position:relative;height:min(62vh,520px);background:var(--marco)}
.p3d-visor model-viewer{width:100%;height:100%;--poster-color:transparent}
.p3d-cargando{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;color:var(--ink-soft)}
.p3d-ar{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);font:inherit;font-weight:600;font-size:15px;
  padding:11px 20px;border-radius:999px;border:0;background:var(--acento);color:var(--acento-ink);cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.25)}
.p3d-ayuda{margin:0;padding:12px 16px;font-size:13.5px;color:var(--ink-soft)}
/* ---- probar.js (26-sep): Pruébala en tu foto ---- */
.pf-caja{width:min(720px,100%)}
.pf-inicio{padding:22px 18px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.pf-inicio p{margin:0}
.pf-subir{display:inline-block}
.pf-priv{font-size:13px;color:var(--ink-soft)}
.pf-lienzo{display:flex;justify-content:center;background:#111;overflow:hidden}
.pf-lienzo[hidden],.pf-ctrl[hidden],.pf-inicio[hidden]{display:none}
.pf-lienzo canvas{display:block;touch-action:none;cursor:grab;max-width:100%}
.pf-lienzo canvas:active{cursor:grabbing}
.pf-ctrl{padding:10px 16px 14px;display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;overflow-y:auto}
.pf-conj,.pf-tallas,.pf-luz{display:flex;gap:2px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:3px}
.pf-tallas:empty,.pf-conj:empty{display:none}
.pf-tallas button:disabled{opacity:.35;cursor:not-allowed}
.pf-conj button,.pf-tallas button,.pf-luz button{font:inherit;font-size:13.5px;border:0;background:none;border-radius:999px;padding:5px 12px;cursor:pointer;color:var(--ink-soft)}
.pf-conj button.on,.pf-tallas button.on,.pf-luz button.on{background:var(--ink);color:var(--paper);font-weight:600}
.pf-tam{display:flex;align-items:center;gap:8px;font-size:13.5px;flex:1 1 180px}
.pf-tam input{flex:1}
.pf-ayuda{flex:1 1 100%;padding:0!important}
.pf-acc{display:flex;gap:8px;flex:1 1 100%;justify-content:flex-end}
.pf-otra{font:inherit;font-size:14px;border:1px solid var(--line);background:none;border-radius:999px;padding:8px 14px;cursor:pointer;color:var(--ink)}

/* ---- accesorios.js (26-sep): Accesorios y repuestos ---- */
.acc-nota{margin:-4px 0 14px;color:var(--ink-soft);font-size:14.5px;max-width:62ch}
.acc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:34px}
.acc-card{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.acc-card img{width:100%;height:auto;aspect-ratio:1;display:block;background:#EFEAE2;object-fit:contain}
.acc-txt{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.acc-txt h3{margin:0;font-size:16px;line-height:1.25}
.acc-desc{margin:0;font-size:13.5px;color:var(--ink-soft);flex:1}
.acc-pie{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.acc-precio{font-weight:600;font-size:17px}
.acc-agregar{font:inherit;font-size:13.5px;font-weight:600;padding:8px 13px;border-radius:999px;cursor:pointer;
  border:1px solid var(--ink);background:var(--ink);color:var(--paper)}
.acc-agregar.ok{background:var(--acento);border-color:var(--acento);color:var(--acento-ink)}
.acc-agregar:focus-visible{outline:2px solid var(--acento);outline-offset:2px}