/* ============================================================
   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-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)}

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

@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}
}