/* Dredian Tienda: estilos del tema hijo (propuesta 3 llevada a WooCommerce). */
@font-face { font-family: 'Inter'; src: url(../fonts/inter-variable.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url(../fonts/poppins-600.woff2) format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url(../fonts/poppins-700.woff2) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url(../fonts/poppins-800.woff2) format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
/* Kadence colorea h1–h3 a nivel de elemento: aquí heredan, y cada componente pone su color. */
.dr-tienda :is(h1, h2, h3, h4) { color: inherit; }
/* Tienda 3 · Departamentos
   Evolución de la tienda 1 con identidad propia y alma generalista: Dredian
   es la tienda; Ciclismo es su primer departamento. Cabecera clara, pestañas
   de departamentos, portada en mosaico, kits en lugar de cuadros de cuatro y
   precios en formato normal. La paleta sale del logo. */
:root {
  --azul: #0059FE; --azul-h: #0047D1; --marino: #002060; --marino-2: #0B2D78; --carbon: #161615;
  --niebla: #EEF3FF; --fondo: #F4F6FA; --blanco: #fff; --linea: #DCE2EC; --tinta-2: #4A5470; --tinta-3: #636D8A;
  --exito: #0E7C3A; --error: #C0262D;
  --r: 16px; --r-s: 10px;
  --sombra: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 18px rgba(0, 0, 0, .05);
  --ancho: 1400px;
  --display: 'Poppins', system-ui, sans-serif;
  --texto: 'Inter', system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Modo de la tienda (catalogo.js → multidepartamento): solo bicicletas o varios departamentos */
.solo-uno [data-multi], html:not(.solo-uno) [data-uno] { display: none !important; }
html { scroll-padding-top: 140px; }
body { margin: 0; background: var(--fondo); color: var(--carbon); font: 400 .95rem/1.5 var(--texto); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--azul); }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; background: #fff; padding: 10px 14px; border-radius: 8px; }
.saltar:focus { top: 12px; }
svg { width: 1.25em; height: 1.25em; flex: none; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.02em; line-height: 1.15; }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 22px; border: 0; border-radius: 12px; background: var(--azul); color: #fff; font-weight: 600; text-decoration: none; transition: background .15s; }
.boton:hover { background: var(--azul-h); }
.boton-vidrio { background: rgba(255, 255, 255, .1); border: 1.5px solid rgba(255, 255, 255, .45); }
.boton-vidrio:hover { background: rgba(255, 255, 255, .2); }
.boton-ancho { width: 100%; }
.boton-wa { background: #fff; color: var(--marino); border: 1.5px solid var(--linea); }
.boton-wa:hover { background: var(--niebla); }
.boton-wa svg { color: #128C4A; }
.enlace { color: var(--azul); font-weight: 600; }
.enlace-flecha { display: inline-flex; align-items: center; gap: 6px; color: var(--azul); font-weight: 600; text-decoration: none; }
.enlace-flecha svg { width: 18px; height: 18px; transition: transform .2s; }
.enlace-flecha:hover svg { transform: translateX(3px); }
.ceja { margin: 0 0 8px; font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--azul); }
.ceja-clara { color: #A9C3FF; }
.foto-ref { position: absolute; right: 10px; bottom: 10px; background: rgba(22, 22, 21, .72); color: #fff; font-size: .7rem; font-weight: 500; padding: 3px 8px; border-radius: 999px; }
.estado { font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: #EEF0F4; color: var(--tinta-3); white-space: nowrap; }
.estado-abre { background: var(--niebla); color: var(--azul); }

/* Franja superior */
.franja { margin: 0; background: var(--marino); color: #C9D2E6; text-align: center; font-size: .8rem; padding: 7px 16px; }
.franja span[data-precio-muestra] { color: #fff; font-weight: 600; }

/* Cabecera clara */
.cabecera { position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 1px solid var(--linea); }
.cab-1 { max-width: var(--ancho); margin: auto; display: flex; align-items: center; gap: 22px; padding: 14px 24px 10px; }
.logo { display: inline-flex; align-items: flex-end; color: var(--carbon); text-decoration: none; font: 700 1.75rem/1 var(--display); letter-spacing: -.01em; }
.logo svg { width: .86em; height: .96em; margin-right: .02em; transform: translateY(.06em); }
.l-dian { color: var(--marino); }
.logo-claro { color: #fff; }
.logo-claro .l-dian { color: #A9C3FF; }
.ubicacion { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; cursor: pointer; color: var(--marino); }
.ubicacion:hover, .ubicacion:focus-within { background: var(--niebla); }
.ubicacion svg { color: var(--azul); }
.ubicacion small { display: block; font-size: .72rem; color: var(--tinta-3); line-height: 1.1; }
.ubicacion select { background: transparent; border: 0; color: var(--marino); font-weight: 700; padding: 0; margin-left: -3px; cursor: pointer; }
.ubicacion select:focus-visible { outline: none; }

.buscador { flex: 1; display: flex; min-width: 0; height: 48px; border-radius: 14px; background: var(--fondo); border: 1.5px solid var(--linea); position: relative; transition: border-color .15s, background .15s; }
.buscador:focus-within { border-color: var(--azul); background: #fff; }
.b-depto { flex: none; border: 0; border-right: 1px solid var(--linea); background: transparent; color: var(--tinta-2); border-radius: 14px 0 0 14px; padding: 0 12px; font-size: .84rem; max-width: 200px; }
.b-campo { flex: 1; min-width: 0; position: relative; }
.b-campo input { width: 100%; height: 100%; border: 0; padding: 0 14px; color: var(--carbon); background: transparent; }
.b-campo input:focus { outline: none; }
.b-boton { flex: none; width: 44px; height: 38px; margin: 3px 4px 3px 0; border: 0; background: var(--azul); color: #fff; border-radius: 10px; display: grid; place-items: center; }
.b-boton:hover { background: var(--azul-h); }
.b-sugerencias { position: absolute; top: calc(100% + 8px); left: -1px; right: -50px; list-style: none; margin: 0; padding: 6px; background: #fff; color: var(--carbon); border: 1px solid var(--linea); border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, .14); }
.b-sugerencias li { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.b-sugerencias li[aria-selected="true"], .b-sugerencias li:hover { background: var(--niebla); }
.b-sugerencias img { width: 36px; height: 36px; object-fit: contain; }
.b-sugerencias small { color: var(--tinta-3); }
.b-sugerencias .sug-nada { display: block; color: var(--tinta-2); cursor: default; }

.cab-iconos { display: flex; gap: 4px; }
.ci { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; padding: 4px 8px; border: 0; border-radius: 10px; background: none; color: var(--marino); text-decoration: none; font-size: .74rem; font-weight: 600; }
.ci:hover { background: var(--niebla); }
.ci svg { width: 24px; height: 24px; }
.ci-ico { position: relative; display: inline-flex; }
.ci-ico svg { fill: none; }
.burbuja { position: absolute; top: -5px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--azul); color: #fff; font-size: .68rem; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff; }
.burbuja[data-vacio="si"] { display: none; }

.cab-2 { max-width: var(--ancho); margin: auto; display: flex; align-items: center; gap: 6px; padding: 0 24px 8px; }
.cab-2 > * { flex: none; }
.deptos-boton { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--marino); color: #fff; font-weight: 600; font-size: .88rem; }
.deptos-boton[aria-expanded="true"] { background: var(--azul); }
.pestanas { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
.pestanas a, .pestanas span.p-pronto { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border-radius: 10px; color: var(--marino); text-decoration: none; font-size: .87rem; font-weight: 500; white-space: nowrap; }
.pestanas a:hover { background: var(--niebla); }
.pestanas svg { width: 20px; height: 20px; }
.pestanas .p-activa { background: var(--niebla); font-weight: 700; }
.pestanas .p-pronto { color: var(--tinta-3); }
.pestanas .p-pronto small { font-size: .68rem; font-weight: 600; color: var(--tinta-3); border: 1px solid var(--linea); padding: 0 6px; border-radius: 99px; }
.cab-wa { display: inline-flex; align-items: center; gap: 6px; color: var(--marino); font-weight: 600; font-size: .86rem; text-decoration: none; padding: 0 8px; margin-left: auto; }
.cab-wa svg { color: #128C4A; }

.panel-deptos { position: absolute; left: 50%; transform: translateX(-50%); top: 100%; width: min(860px, calc(100vw - 32px)); display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 24px 26px; background: #fff; border: 1px solid var(--linea); border-radius: 0 0 var(--r) var(--r); box-shadow: 0 24px 50px rgba(0, 0, 0, .16); }
.panel-deptos[hidden] { display: none; }
.pd-t { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 700 1rem var(--display); color: var(--marino); }
.pd-t svg { width: 24px; height: 24px; color: var(--azul); }
.panel-deptos ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
.pd-pronto ul { grid-template-columns: 1fr; }
.panel-deptos li a, .panel-deptos li > span { display: flex; align-items: center; gap: 8px; padding: 7px 0; color: var(--carbon); text-decoration: none; font-size: .9rem; }
.panel-deptos li a:hover { color: var(--azul); }
.panel-deptos li > span { color: var(--tinta-2); justify-content: space-between; }
.panel-deptos li svg { width: 20px; height: 20px; color: var(--tinta-3); }
.pd-n { display: inline-flex; align-items: center; gap: 8px; }
.pd-ver { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .88rem; text-decoration: none; }
.pd-ver svg { width: 16px; height: 16px; }
/* Contenido */
.dr-main { max-width: var(--ancho); margin: auto; padding: 18px 24px 40px; }
.bloque { background: #fff; border-radius: var(--r); padding: 22px 24px; margin-top: 18px; box-shadow: var(--sombra); }
.bloque-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 16px; }
.bloque-cabeza h2 { margin: 0; font-size: 1.35rem; }
.ver-todo { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; font-size: .88rem; color: var(--azul); text-decoration: none; white-space: nowrap; }
.ver-todo:hover { text-decoration: underline; }
.ver-todo svg { width: 16px; height: 16px; }

/* Promesas */
.promesas { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-radius: var(--r); box-shadow: var(--sombra); }
.promesas li { display: flex; gap: 12px; align-items: center; padding: 16px 20px; }
.promesas li + li { border-left: 1px solid var(--linea); }
.promesas svg { width: 30px; height: 30px; color: var(--azul); }
.promesas p { margin: 0; line-height: 1.3; }
.promesas b { display: block; font-size: .92rem; color: var(--marino); }
.promesas p > span { font-size: .8rem; color: var(--tinta-2); }

/* Categorías */
.cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; }
.cats a { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--carbon); text-decoration: none; font-size: .85rem; font-weight: 600; }
.cat-circulo { width: 100%; max-width: 128px; aspect-ratio: 1; border-radius: 50%; background: var(--niebla); display: grid; place-items: center; overflow: hidden; transition: transform .2s cubic-bezier(.16, 1, .3, 1), background .2s; }
.cat-circulo img { width: 70%; height: 70%; object-fit: contain; }
.cats a:hover .cat-circulo { transform: translateY(-3px); background: #DFE8FF; }

/* Fila de productos */
.fila { position: relative; }
.fila-pista { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 14px) / 5.2); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
.fila-pista > * { scroll-snap-align: start; }
.fila-flecha { position: absolute; top: 34%; z-index: 2; width: 42px; height: 64px; border: 1px solid var(--linea); background: #fff; color: var(--marino); border-radius: 8px; display: grid; place-items: center; box-shadow: var(--sombra); }
.fila-ant { left: -10px; } .fila-ant svg { transform: scaleX(-1); }
.fila-sig { right: -10px; }
.fila[data-inicio="true"] .fila-ant, .fila[data-fin="true"] .fila-sig { display: none; }

/* Tarjeta de producto */
.tarjeta { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linea); border-radius: var(--r); overflow: hidden; }
.t-foto { display: grid; place-items: center; aspect-ratio: 1; padding: 0; border: 0; background: #F3F5F9; }
.t-foto img { width: 76%; height: 76%; object-fit: contain; transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.tarjeta:hover .t-foto img { transform: scale(1.05); }
.t-etiqueta { position: absolute; left: 10px; top: 10px; background: var(--marino); color: #fff; font-size: .7rem; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.t-sueno { position: absolute; right: 8px; top: 8px; z-index: 1; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #fff; color: var(--tinta-3); display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.t-sueno svg { width: 19px; height: 19px; fill: none; }
.t-sueno[aria-pressed="true"] { color: var(--azul); }
.t-sueno[aria-pressed="true"] svg { fill: currentColor; }
.t-cuerpo { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; flex: 1; }
.t-marca { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.t-nombre { margin: 0; font: 500 .9rem/1.35 var(--texto); letter-spacing: 0; }
.t-nombre a { color: inherit; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t-nombre a:hover { color: var(--azul); text-decoration: underline; }
.t-nombre a:focus-visible { outline: 3px solid var(--azul); }
.t-resenas { margin: 0; font-size: .75rem; color: var(--tinta-3); }
.t-precio { margin: 4px 0 0; color: var(--carbon); font-size: .9rem; line-height: 1; }
.t-precio b { font: 700 1.5rem var(--texto); letter-spacing: -.02em; }
.t-precio sup { font-size: .72rem; font-weight: 700; vertical-align: .9em; margin-left: 1px; }
.t-entrega { display: flex; align-items: center; gap: 6px; margin: 2px 0 8px; font-size: .78rem; color: var(--exito); font-weight: 600; }
.t-entrega svg { width: 18px; height: 18px; }
.t-agregar { margin-top: auto; min-height: 40px; border: 0; border-radius: 999px; background: var(--azul); color: #fff; font-weight: 600; font-size: .86rem; transition: background .15s; }
.t-agregar:hover { background: var(--azul-h); }
.muestras { display: flex; gap: 6px; margin: 2px 0; }
.muestra { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: var(--c); outline: 1px solid var(--linea); outline-offset: 0; padding: 0; }
.muestra[aria-pressed="true"] { outline: 2px solid var(--marino); }

/* Bicis */
.bicis { display: grid; grid-template-columns: 1fr 2.4fr 1.1fr; gap: 20px; margin-top: 18px; background: #fff; border-radius: var(--r); padding: 24px; box-shadow: var(--sombra); align-items: stretch; }
.bicis-texto h2 { margin: 0 0 10px; font-size: 1.6rem; color: var(--marino); }
.bicis-texto p { margin: 0 0 10px; color: var(--tinta-2); }
.bicis-texto .nota { font-size: .8rem; color: var(--tinta-3); }
.bicis-tipos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.bicis-tipos li { display: flex; flex-direction: column; gap: 3px; }
.bicis-tipos figure { margin: 0 0 6px; position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-s); overflow: hidden; background: var(--niebla); }
.bicis-tipos img { width: 100%; height: 100%; object-fit: cover; }
.bicis-tipos .foto-ref { right: 6px; bottom: 6px; font-size: .64rem; }
.bicis-tipos b { font-size: .92rem; color: var(--marino); }
.bicis-tipos li > span { font-size: .8rem; color: var(--tinta-2); line-height: 1.35; }
.tallas { background: var(--niebla); border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.tallas-cabeza { display: flex; align-items: center; gap: 8px; color: var(--azul); }
.tallas-cabeza svg { width: 26px; height: 26px; }
.tallas h3 { margin: 0; font-size: 1.1rem; color: var(--marino); }
.tallas-control { display: grid; gap: 8px; font-size: .9rem; color: var(--tinta-2); }
.tallas-control b { color: var(--marino); }
.tallas input[type=range] { width: 100%; accent-color: var(--azul); height: 28px; }
.tallas-res { margin: 0; font: 800 2.2rem/1 var(--display); color: var(--azul); letter-spacing: -.03em; }
.tallas-frase { margin: 0; font-size: .85rem; color: var(--tinta-2); min-height: 3.8em; }
.tallas .enlace { margin-top: auto; font-size: .9rem; }

/* Taller */
.taller { position: relative; margin-top: 18px; border-radius: var(--r); overflow: hidden; min-height: 340px; display: flex; align-items: center; }
.taller > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.taller-caja { position: relative; margin: 32px; max-width: 460px; background: #fff; border-radius: var(--r); padding: 28px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.taller-caja h2 { margin: 0 0 10px; font-size: 1.7rem; color: var(--marino); }
.taller-caja p:not(.ceja) { margin: 0 0 18px; color: var(--tinta-2); }

/* Marcas */
.marcas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.marcas a { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #fff; border: 1px solid var(--linea); border-radius: var(--r-s); text-align: left; transition: border-color .15s, box-shadow .15s; }
.marcas a:hover { border-color: var(--azul); box-shadow: var(--sombra); }
.m-foto { flex: none; width: 46px; height: 46px; border-radius: 50%; background: #F3F5F9; display: grid; place-items: center; }
.m-foto img { width: 34px; height: 34px; object-fit: contain; }
.marcas b { display: block; font-size: .9rem; color: var(--marino); }
.marcas small { color: var(--tinta-3); font-size: .74rem; }

/* Resultados */
.resultados { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 18px; margin-top: 18px; scroll-margin-top: 130px; }
.resultados[hidden] { display: none; }
.filtros { background: #fff; border-radius: var(--r); padding: 20px; box-shadow: var(--sombra); align-self: start; position: sticky; top: 130px; }
.f-t { margin: 16px 0 8px; font-weight: 700; font-size: .9rem; }
.f-t:first-child { margin-top: 0; }
.filtros ul { list-style: none; margin: 0; padding: 0; }
.filtros label { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: .86rem; cursor: pointer; }
.filtros input { accent-color: var(--azul); margin: 0; }
.filtros small { margin-left: auto; color: var(--tinta-3); }
.f-entrega { margin: 0; font-size: .84rem; color: var(--exito); }
.res-main { background: #fff; border-radius: var(--r); padding: 20px; box-shadow: var(--sombra); }
.res-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.res-cabeza h2 { margin: 0; font-size: 1.3rem; }
.res-cabeza h2 span { font: 400 .9rem var(--texto); color: var(--tinta-3); margin-left: 6px; }
.orden { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--tinta-2); }
.orden select { border: 1px solid var(--linea); border-radius: 8px; padding: 7px 10px; background: #F7F8FB; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.res-vacio { color: var(--tinta-2); }

/* Lista de espera y confianza */
.lista-confianza { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.lista, .confianza { background: #fff; border-radius: var(--r); padding: 28px; box-shadow: var(--sombra); scroll-margin-top: 130px; }
.lista { background: var(--marino); color: #fff; }
.lista h2 { margin: 0 0 6px; font-size: 1.6rem; }
.lista h2 span { color: #7FA9FF; }
.lista-sub { margin: 0 0 20px; color: #C9D5F0; }
#form-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.campo { display: grid; gap: 6px; }
.campo label { font-size: .84rem; font-weight: 600; color: #DCE5F7; }
.campo input:not([type=checkbox]), .campo select { width: 100%; min-height: 46px; border: 1.5px solid transparent; border-radius: 10px; padding: 10px 12px; background: #fff; color: var(--carbon); }
.campo input:focus, .campo select:focus { outline: 2px solid #A9C3FF; outline-offset: 2px; }
.campo[data-invalido] input, .campo[data-invalido] select { border-color: #FF8A8F; }
.check { grid-column: 1 / -1; }
.check label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: #C9D5F0; font-size: .82rem; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--azul); flex: none; }
.check a { color: #fff; }
.dr-error { margin: 2px 0 0; color: #FFB4B7; font-size: .8rem; font-weight: 600; }
#form-lista .boton { grid-column: 1 / -1; margin-top: 4px; min-height: 50px; }
.b-enviando { display: none; }
[data-estado="enviando"] .b-normal { display: none; }
[data-estado="enviando"] .b-enviando { display: inline; }
form[data-estado="listo"] { display: none !important; }
.lista-ok { background: rgba(255, 255, 255, .08); border-radius: 10px; padding: 20px; }
.lista-ok:focus { outline: none; }
.lo-t { margin: 0 0 6px; font: 700 1.2rem var(--display); }
.lista-ok p { margin: 0; color: #DCE5F7; }
.confianza h2 { margin: 0 0 14px; font-size: 1.4rem; color: var(--marino); }
.confianza details { border-bottom: 1px solid var(--linea); }
.confianza summary { padding: 13px 0; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.confianza summary::after { content: '+'; color: var(--azul); font-size: 1.2rem; line-height: 1; }
.confianza details[open] summary::after { content: '−'; }
.confianza summary::-webkit-details-marker { display: none; }
.confianza details p { margin: 0 0 14px; color: var(--tinta-2); font-size: .9rem; }
.confianza .boton-wa { margin-top: 20px; }

/* Ficha rápida */
.ficha { width: min(920px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: 0; border: 0; border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .4); }
.ficha::backdrop { background: rgba(0, 16, 48, .55); }
.fi { display: grid; grid-template-columns: 1fr 1fr; position: relative; }
.fi-cerrar { position: absolute; right: 12px; top: 10px; z-index: 1; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #F1F3F7; font-size: 1.5rem; line-height: 1; }
.fi-foto { margin: 0; background: #F3F5F9; display: grid; place-items: center; padding: 30px; min-height: 380px; }
.fi-foto img { width: 100%; max-height: 420px; object-fit: contain; }
.fi-info { padding: 30px 30px 26px; display: flex; flex-direction: column; gap: 6px; }
.fi-cat { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.fi-info h2 { margin: 0; font-size: 1.5rem; color: var(--marino); padding-right: 30px; }
.fi-precio { margin: 10px 0 0; font-size: 1.1rem; line-height: 1; }
.fi-precio b { font: 700 2.2rem var(--texto); letter-spacing: -.03em; }
.fi-precio sup { font-size: .9rem; font-weight: 700; vertical-align: 1.1em; }
.fi-iva { margin: 0; font-size: .8rem; color: var(--tinta-3); }
.fi-color { margin: 8px 0 0; font-size: .88rem; }
.fi-info .muestra { width: 30px; height: 30px; }
.fi-detalle { margin: 8px 0; color: var(--tinta-2); }
.fi-compra { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--linea); border-radius: var(--r); }
.fi-compra .t-entrega { margin: 0; color: var(--carbon); font-weight: 400; }
.fi-compra .t-entrega b { color: var(--exito); }
.fi-compra .t-agregar { min-height: 46px; font-size: .95rem; }
.fi-sueno { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border: 1.5px solid var(--linea); border-radius: 999px; background: #fff; font-weight: 600; font-size: .88rem; color: var(--marino); }
.fi-sueno svg { width: 18px; height: 18px; fill: none; }
.fi-sueno[aria-pressed="true"] { color: var(--azul); border-color: var(--azul); }
.fi-sueno[aria-pressed="true"] svg { fill: currentColor; }
.fi-promesas { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: .84rem; color: var(--tinta-2); }
.fi-promesas li { display: flex; align-items: center; gap: 8px; }
.fi-promesas svg { width: 18px; height: 18px; color: var(--azul); }

/* Carrito (tienda.js) */
.tc-fondo { position: fixed; inset: 0; z-index: 60; background: rgba(0, 16, 48, .5); opacity: 0; transition: opacity .28s; }
.tc-cajon { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(420px, 100vw); background: #fff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .32s cubic-bezier(.16, 1, .3, 1); box-shadow: -20px 0 50px rgba(0, 0, 0, .2); }
.tc-abierto .tc-fondo { opacity: 1; }
.tc-abierto .tc-cajon { transform: none; }
.tc-cabeza { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--linea); }
.tc-cabeza h2 { margin: 0; font-size: 1.2rem; color: var(--marino); }
.tc-cerrar { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #F1F3F7; display: grid; place-items: center; }
.tc-cuerpo { flex: 1; overflow-y: auto; padding: 8px 20px; }
.tc-lista { list-style: none; margin: 0; padding: 0; }
.tc-linea { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.tc-linea img { width: 72px; height: 72px; object-fit: contain; background: #F3F5F9; border-radius: 8px; padding: 6px; }
.tc-nombre { margin: 0; font-size: .88rem; font-weight: 500; line-height: 1.3; }
.tc-var { margin: 2px 0 0; font-size: .78rem; color: var(--tinta-3); }
.tc-cant { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.tc-cant button:not(.tc-quitar) { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--linea); background: #fff; font-weight: 700; }
.tc-cant span { min-width: 24px; text-align: center; font-weight: 600; }
.tc-quitar { margin-left: 8px; border: 0; background: none; color: var(--azul); font-size: .8rem; text-decoration: underline; }
.tc-precio { margin: 0; font-weight: 700; }
.tc-pie { padding: 16px 20px 20px; border-top: 1px solid var(--linea); display: grid; gap: 10px; }
.tc-entrega { margin: 0; font-size: .84rem; color: var(--tinta-2); }
.tc-entrega b { color: var(--exito); }
.tc-total { display: flex; justify-content: space-between; align-items: baseline; }
.tc-total span { font-size: .9rem; color: var(--tinta-2); }
.tc-total b { font: 700 1.5rem var(--texto); }
.tc-nota, .tc-muestra { margin: 0; font-size: .76rem; color: var(--tinta-3); }
.tc-boton { display: flex; align-items: center; justify-content: center; min-height: 48px; border: 0; border-radius: 999px; background: var(--azul); color: #fff; font-weight: 600; text-decoration: none; }
.tc-boton:hover { background: var(--azul-h); }
.tc-boton-2 { background: #fff; color: var(--marino); border: 1.5px solid var(--linea); }
.tc-boton-2:hover { background: var(--niebla); }
.tc-vacio { text-align: center; padding: 50px 10px; color: var(--tinta-2); }
.tc-vacio-t { font: 700 1.15rem var(--display); color: var(--marino); }
.tc-pagos { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
.tc-pagos li { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 10px; }
.tc-pagos span { font-size: .84rem; color: var(--tinta-2); }
.tc-aviso-pago { background: var(--niebla); border-radius: 10px; padding: 14px; font-size: .88rem; color: var(--marino); }
.tc-aviso-pago p { margin: 0 0 6px; }
.tc-toast { position: fixed; right: 20px; top: 130px; z-index: 50; display: flex; align-items: center; gap: 12px; width: min(380px, calc(100vw - 32px)); padding: 12px 14px; background: #fff; border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .25); border-left: 4px solid var(--exito); transform: translateY(-12px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .3s cubic-bezier(.16, 1, .3, 1); }
.tc-toast.visible { opacity: 1; transform: none; pointer-events: auto; }
.tc-toast img { width: 44px; height: 44px; object-fit: contain; }
.tc-toast p { margin: 0; flex: 1; min-width: 0; font-size: .82rem; line-height: 1.3; }
.tc-toast b { display: block; color: var(--exito); }
.tc-toast p span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tinta-2); }
.tc-toast button { border: 1.5px solid var(--linea); background: #fff; border-radius: 999px; padding: 6px 12px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.dr-aviso { position: fixed; left: 50%; bottom: 90px; z-index: 70; max-width: min(92vw, 460px); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--carbon); color: #fff; padding: 14px 18px; border-radius: 10px; transition: opacity .25s, transform .3s cubic-bezier(.16, 1, .3, 1); }
.dr-aviso.visible { opacity: 1; transform: translate(-50%, 0); }


/* Portada en mosaico */
.mosaico { display: grid; grid-template-columns: 1.35fr 1fr .9fr; grid-template-rows: 1fr 1fr; gap: 16px; min-height: 470px; }
.mo-marca { grid-row: 1 / 3; background: var(--marino); color: #fff; border-radius: var(--r); padding: 40px 38px 30px; display: flex; flex-direction: column; }
.mo-marca h1 { margin: 0 0 14px; font-size: clamp(2.1rem, 3.6vw, 3.3rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; max-width: 13ch; }
.mo-marca > p:not(.ceja) { margin: 0 0 24px; max-width: 44ch; color: #D0DAF0; }
.mo-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.mo-deptos { list-style: none; margin: auto 0 0; padding: 26px 0 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.mo-deptos li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: .7rem; line-height: 1.2; color: #8FA3CF; }
.mo-deptos .md-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; border: 1.5px dashed rgba(169, 195, 255, .45); }
.mo-deptos svg { width: 24px; height: 24px; }
.mo-deptos .md-activo { color: #fff; font-weight: 600; }
.mo-deptos .md-activo .md-ico { background: var(--azul); border: 0; }
.mo-ciclismo, .mo-repuestos { position: relative; border-radius: var(--r); overflow: hidden; color: #fff; text-decoration: none; display: flex; align-items: flex-end; isolation: isolate; }
.mo-ciclismo { grid-row: 1 / 3; }
.mo-ciclismo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.mo-ciclismo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 18, 56, .88), rgba(0, 18, 56, 0) 60%); }
.mo-ciclismo:hover img { transform: scale(1.03); }
.mo-ciclismo .foto-ref { top: 12px; bottom: auto; right: 12px; }
.mo-txt { display: flex; flex-direction: column; gap: 6px; padding: 24px; }
.mo-txt b { font: 700 1.5rem/1.1 var(--display); letter-spacing: -.02em; }
.mo-ir { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 600; color: #DCE6FF; }
.mo-ir svg { width: 16px; height: 16px; transition: transform .2s; }
.mo-ciclismo:hover .mo-ir svg, .mo-repuestos:hover .mo-ir svg { transform: translateX(3px); }
.mo-repuestos { background: var(--azul); align-items: flex-start; }
.mo-repuestos .mo-txt { max-width: 62%; padding: 22px; }
.mo-repuestos .mo-txt b { font-size: 1.2rem; }
.mo-repuestos .mo-ir { color: #fff; }
.mo-repuestos img { position: absolute; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .28)); transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.mo-repuestos .r1 { width: 30%; right: 18%; bottom: -8%; transform: rotate(-8deg); }
.mo-repuestos .r2 { width: 34%; right: -2%; top: 14%; transform: rotate(8deg); }
.mo-repuestos:hover .r1 { transform: rotate(-4deg) translateY(-4px); }
.mo-lista { background: #fff; border-radius: var(--r); padding: 22px; box-shadow: var(--sombra); display: flex; flex-direction: column; align-items: flex-start; }
.ml-grande { margin: 0 0 10px; font: 800 1.6rem/1.05 var(--display); letter-spacing: -.03em; color: var(--marino); }
.ml-grande span { color: var(--azul); }
.mo-lista .enlace-flecha { margin-top: auto; }
.ml-hecho { display: none; margin: 10px 0 0; font-size: .82rem; color: var(--exito); }
.dr-registrado .ml-hecho { display: block; }
.dr-registrado .mo-lista .enlace-flecha { display: none; }

.promesas { margin-top: 16px !important; }
.bloque-sub { margin: 4px 0 0; color: var(--tinta-2); font-size: .92rem; max-width: 70ch; }

/* Departamentos y votación */
.deptos-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.depto { position: relative; display: flex; flex-direction: column; gap: 6px; width: 100%; height: 100%; padding: 18px 16px 16px; border-radius: var(--r); border: 1.5px solid var(--linea); background: #fff; text-align: left; color: var(--carbon); text-decoration: none; transition: border-color .15s, transform .25s cubic-bezier(.16, 1, .3, 1); }
.depto:hover { border-color: var(--marino); transform: translateY(-2px); }
.depto .d-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--fondo); color: var(--marino); margin-bottom: 6px; }
.depto .d-ico svg { width: 26px; height: 26px; }
.depto b { font: 700 1rem/1.2 var(--display); color: var(--marino); }
.depto .d-ej { font-size: .8rem; color: var(--tinta-2); line-height: 1.35; }
.depto .estado { align-self: flex-start; margin-top: auto; }
.depto-abierto { background: var(--marino); border-color: var(--marino); color: #fff; }
.depto-abierto b { color: #fff; }
.depto-abierto .d-ej { color: #C9D5F0; }
.depto-abierto .d-ico { background: var(--azul); color: #fff; }
.depto-abierto:hover { border-color: var(--azul); }
.depto .d-votar { margin-top: auto; font-size: .78rem; font-weight: 700; color: var(--azul); }
.depto[aria-pressed="true"] { border-color: var(--azul); background: var(--niebla); }
.depto[aria-pressed="true"] .d-votar { color: var(--marino); }
.depto[aria-pressed="true"] .d-ico { background: var(--azul); color: #fff; }
.voto-gracias { margin: 14px 0 0; min-height: 1.5em; font-size: .9rem; color: var(--marino); font-weight: 500; }

/* Portada del departamento */
.depto-portada { position: relative; margin-top: 40px; display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center; padding: 26px 30px; border-radius: var(--r); background: #fff; border-left: 6px solid var(--azul); box-shadow: var(--sombra); }
.dp-num { font: 800 3.6rem/1 var(--display); letter-spacing: -.05em; color: var(--niebla); -webkit-text-stroke: 1.5px var(--azul); }
.depto-portada h2 { margin: 0 0 4px; font-size: 2rem; color: var(--marino); }
.depto-portada p:not(.ceja) { margin: 0; color: var(--tinta-2); max-width: 56ch; }
.dp-sellos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dp-sellos li { display: flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 600; color: var(--marino); }
.dp-sellos svg { width: 20px; height: 20px; color: var(--azul); }

/* Kits */
.kits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kit { display: flex; flex-direction: column; border: 1.5px solid var(--linea); border-radius: var(--r); overflow: hidden; background: #fff; }
.kit-fotos { position: relative; height: 150px; background: var(--niebla); }
.kit-fotos img { position: absolute; width: 46%; height: 78%; object-fit: contain; top: 11%; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .14)); }
.kit-fotos img:nth-child(1) { left: 6%; transform: rotate(-6deg); }
.kit-fotos img:nth-child(2) { right: 6%; transform: rotate(5deg); }
.kit-fotos img:nth-child(3) { left: 30%; top: 26%; width: 40%; transform: rotate(-2deg); }
.kit-fotos .kit-n { position: absolute; left: 10px; top: 10px; background: #fff; color: var(--marino); font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 99px; }
.kit-cuerpo { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.kit h3 { margin: 0; font-size: 1.05rem; color: var(--marino); }
.kit-para { margin: 0; font-size: .82rem; color: var(--tinta-2); }
.kit ul { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 4px; font-size: .82rem; }
.kit li { display: flex; justify-content: space-between; gap: 10px; color: var(--tinta-2); }
.kit li span:last-child { color: var(--carbon); font-variant-numeric: tabular-nums; }
.kit-total { display: flex; justify-content: space-between; align-items: baseline; margin: auto 0 0; padding-top: 10px; border-top: 1px dashed var(--linea); }
.kit-total span { font-size: .8rem; color: var(--tinta-3); }
.kit-total b { font-size: 1.25rem; }
.kit .t-agregar { margin-top: 8px; }

/* Precio en formato normal y botón propio */
.t-precio { margin: 4px 0 0; font: 700 1.2rem/1.1 var(--texto); letter-spacing: -.01em; color: var(--carbon); }
.fi-precio { margin: 10px 0 0; font: 700 2rem/1 var(--texto); letter-spacing: -.02em; }
.t-agregar { border-radius: 10px; background: #fff; color: var(--marino); border: 1.5px solid var(--marino); }
.t-agregar:hover { background: var(--marino); color: #fff; }
.fi-compra .t-agregar, .kit .t-agregar { background: var(--azul); border-color: var(--azul); color: #fff; }
.fi-compra .t-agregar:hover, .kit .t-agregar:hover { background: var(--azul-h); }
.t-etiqueta { border-radius: 99px; background: #fff; color: var(--marino); border: 1px solid var(--linea); }
.bicis-tipos .b-sellos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.bicis-tipos .b-sellos span { font-size: .68rem; font-weight: 600; color: var(--marino); background: var(--niebla); padding: 2px 7px; border-radius: 99px; }

/* Pie propio */
.pie { margin-top: 40px; background: var(--carbon); color: #B9C0D2; display: grid; grid-template-columns: 1.2fr 2fr; gap: 40px; padding: 48px max(24px, calc((100vw - var(--ancho)) / 2 + 24px)) 24px; }
.pie-marca .logo { font-size: 2.4rem; }
.pie-lema { margin: 14px 0 10px; font: 700 1.3rem/1.2 var(--display); color: #fff; letter-spacing: -.02em; max-width: 18ch; }
.pie-marca p:last-child { margin: 0; font-size: .86rem; }
.pie-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pie-t { margin: 0 0 12px; color: #fff; font-weight: 700; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .86rem; }
.pie a { color: #B9C0D2; text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie li .estado { margin-left: 6px; background: rgba(255, 255, 255, .08); color: #9AA3B8; }
.pie-base { grid-column: 1 / -1; margin: 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .8rem; }

.wa-flotante { position: fixed; right: 18px; bottom: 18px; z-index: 25; width: 56px; height: 56px; border-radius: 50%; background: #128C4A; color: #fff; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0, 0, 0, .2); }
.wa-flotante svg { width: 30px; height: 30px; }


/* Modo solo bicicletas */
.mo-sellos { list-style: none; margin: auto 0 0; padding: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mo-sellos li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff; font-size: .84rem; font-weight: 600; }
.mo-sellos svg { width: 18px; height: 18px; color: #A9C3FF; }
.panel-uno { grid-template-columns: 1fr; width: min(560px, calc(100vw - 32px)); }
.panel-uno ul { grid-template-columns: 1fr 1fr; }

/* ---------- Páginas internas (producto, Mis sueños, Mi cuenta) ---------- */
.pagina { padding-top: 14px; }
.migas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; font-size: .84rem; color: var(--tinta-3); }
.migas a { color: var(--tinta-2); text-decoration: none; }
.migas a:hover { color: var(--azul); text-decoration: underline; }
.migas [aria-current] { color: var(--carbon); font-weight: 500; }
.kit li a { color: var(--tinta-2); text-decoration: none; }
.kit li a:hover { color: var(--azul); text-decoration: underline; }
.campo-claro { display: grid; gap: 6px; }
.campo-claro label { font-size: .84rem; font-weight: 600; color: var(--marino); }
.campo-claro input:not([type=checkbox]):not([type=radio]):not([type=file]), .campo-claro select, .campo-claro textarea { width: 100%; min-height: 46px; border: 1.5px solid var(--linea); border-radius: 10px; padding: 10px 12px; background: #fff; color: var(--carbon); font: inherit; }
.campo-claro textarea { resize: vertical; }
.campo-claro input:focus, .campo-claro select:focus, .campo-claro textarea:focus { outline: none; border-color: var(--azul); }
.campo-claro input[type=file] { font-size: .86rem; }
.vacio-grande { text-align: center; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.vacio-grande h1, .vacio-grande h2 { margin: 8px 0 0; font-size: 1.4rem; color: var(--marino); }
.vacio-grande p { margin: 0 0 14px; max-width: 46ch; color: var(--tinta-2); }
.vacio-chico { padding: 24px 10px; }
.vg-ico { width: 64px; height: 64px; border-radius: 20px; background: var(--niebla); color: var(--azul); display: grid; place-items: center; }
.vg-ico svg { width: 30px; height: 30px; fill: none; }
.boton-peligro { background: #fff; color: var(--error); border: 1.5px solid #F2C4C6; }
.boton-peligro:hover { background: #FDF1F1; }
.sub-t { margin: 26px 0 12px; font-size: 1.05rem; color: var(--marino); }
.esc-ayuda { color: var(--tinta-2); margin: 16px 0 0; }

/* Producto */
.producto { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 320px; gap: 28px; align-items: start; background: #fff; border-radius: var(--r); padding: 26px; box-shadow: var(--sombra); }
.pr-galeria { display: grid; grid-template-columns: 72px 1fr; gap: 12px; position: sticky; top: 150px; }
.pr-miniaturas { display: flex; flex-direction: column; gap: 8px; }
.pr-mini { width: 72px; height: 72px; padding: 6px; border-radius: 12px; border: 1.5px solid var(--linea); background: var(--fondo); }
.pr-mini img { width: 100%; height: 100%; object-fit: contain; }
.pr-mini[aria-pressed="true"] { border-color: var(--marino); outline: 1px solid var(--marino); }
.pr-foto { margin: 0; position: relative; aspect-ratio: 1; border-radius: var(--r); background: var(--fondo); display: grid; place-items: center; }
.pr-foto img { width: 82%; height: 82%; object-fit: contain; }
.pr-foto figcaption { position: absolute; left: 12px; bottom: 12px; font-size: .72rem; font-weight: 600; color: var(--marino); background: #fff; padding: 3px 9px; border-radius: 99px; }
.pr-cat { margin: 0 0 6px; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.pr-cat a { color: var(--azul); text-decoration: none; }
.pr-info h1 { margin: 0 0 10px; font-size: clamp(1.4rem, 2.2vw, 1.9rem); color: var(--marino); }
.pr-valoracion { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta-2); font-size: .86rem; text-decoration: none; }
.pr-valoracion:hover span:last-child { text-decoration: underline; }
.estrellas { display: inline-flex; gap: 1px; color: #C7CEDC; font-size: 1.05rem; letter-spacing: 0; }
.estrellas .llena { color: var(--azul); }
.pr-precio { margin: 16px 0 2px; font: 800 2rem/1 var(--texto); letter-spacing: -.02em; color: var(--carbon); }
.pr-iva { margin: 0 0 16px; font-size: .82rem; color: var(--tinta-3); }
.muestra-aviso { margin-left: 4px; font-weight: 600; color: var(--marino); background: var(--niebla); padding: 1px 7px; border-radius: 99px; }
.pr-color { margin: 0 0 8px; font-size: .9rem; }
.pr-colores { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pr-col { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 12px; border: 1.5px solid var(--linea); background: #fff; font-size: .78rem; font-weight: 600; color: var(--marino); }
.pr-col img { width: 44px; height: 44px; object-fit: contain; }
.pr-col[aria-pressed="true"] { border-color: var(--marino); outline: 1px solid var(--marino); background: var(--niebla); }
.pr-resumen { margin: 0 0 16px; color: var(--tinta-2); }
.pr-datos { margin: 0; border-top: 1px solid var(--linea); }
.pr-datos div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--linea); font-size: .88rem; }
.pr-datos dt { color: var(--tinta-3); }
.pr-datos dd { margin: 0; color: var(--carbon); }
.pr-compra { border: 1.5px solid var(--linea); border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 150px; }
.pr-precio-caja { margin: 0; font-size: 1.7rem; }
.pr-entrega { display: flex; gap: 8px; margin: 0; font-size: .88rem; line-height: 1.45; }
.pr-entrega > svg { color: var(--exito); margin-top: 2px; }
.pr-entrega b { color: var(--exito); }
.pr-entrega small { color: var(--tinta-3); }
.pr-ciudad select { border: 0; border-bottom: 1.5px dashed var(--azul); background: none; color: var(--azul); font-weight: 600; padding: 0 2px; cursor: pointer; }
.pr-cantidad { display: flex; justify-content: space-between; align-items: center; font-size: .9rem; font-weight: 600; color: var(--marino); }
.stepper { display: flex; align-items: center; border: 1.5px solid var(--linea); border-radius: 10px; }
.stepper button { width: 40px; height: 40px; border: 0; background: none; font-size: 1.2rem; color: var(--marino); }
.stepper output { min-width: 32px; text-align: center; font-weight: 700; }
.pr-compra .boton svg { fill: none; }
.pr-sueno { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 12px; border: 1.5px solid var(--linea); background: #fff; color: var(--marino); font-weight: 600; font-size: .9rem; }
.pr-sueno svg { width: 18px; height: 18px; fill: none; }
.pr-sueno[aria-pressed="true"] { border-color: var(--azul); color: var(--azul); }
.pr-sueno[aria-pressed="true"] svg { fill: currentColor; }
.pr-sueno[aria-pressed="true"] span::after { content: ' ✓'; }
.pr-garantias { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--linea); display: grid; gap: 10px; font-size: .84rem; color: var(--tinta-2); }
.pr-garantias li { display: flex; gap: 8px; align-items: flex-start; }
.pr-garantias svg { width: 18px; height: 18px; color: var(--azul); margin-top: 1px; }
.pr-garantias b { color: var(--marino); }
.pr-pregunta { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 600; color: var(--marino); }
.pr-pregunta svg { color: #128C4A; }
.pr-pestanas { position: sticky; top: 112px; z-index: 5; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin-top: 16px; padding: 6px; background: #fff; border-radius: 14px; box-shadow: var(--sombra); }
.pr-pestanas a { flex: none; padding: 9px 14px; border-radius: 10px; color: var(--marino); font-weight: 600; font-size: .88rem; text-decoration: none; }
.pr-pestanas a:hover { background: var(--niebla); }
.pr-sec { scroll-margin-top: 180px; }
.pr-sec h2 { margin: 0 0 12px; font-size: 1.35rem; color: var(--marino); }
.pr-sec > p { margin: 0 0 12px; color: var(--tinta-2); max-width: 72ch; }
.pr-envios { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; }
.tabla-envios { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabla-envios th, .tabla-envios td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--linea); }
.tabla-envios thead th { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); }
.tabla-envios tbody th { font-weight: 600; color: var(--marino); }
.tabla-envios tr[data-activa] { background: var(--niebla); }
.tabla-envios tr[data-activa] th::after { content: 'Tu ciudad'; margin-left: 8px; font-size: .68rem; font-weight: 700; color: #fff; background: var(--azul); padding: 2px 7px; border-radius: 99px; }
.pr-politicas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .88rem; color: var(--tinta-2); }
.pr-politicas b { color: var(--marino); }

/* Reseñas */
.resenas { display: grid; grid-template-columns: 300px 1fr; gap: 34px; align-items: start; }
.res-resumen { background: var(--fondo); border-radius: var(--r); padding: 20px; }
.res-nota { margin: 0; font: 800 2.6rem/1 var(--display); color: var(--marino); }
.res-nota span { font-size: 1rem; color: var(--tinta-3); font-weight: 600; }
.res-total { margin: 4px 0 12px; font-size: .86rem; color: var(--tinta-2); }
.res-barras { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; font-size: .8rem; color: var(--tinta-2); }
.res-barras li { display: grid; grid-template-columns: 34px 1fr 16px; gap: 8px; align-items: center; }
.barra { height: 8px; border-radius: 99px; background: #E1E6EF; overflow: hidden; }
.barra span { display: block; height: 100%; background: var(--azul); }
.res-regla { display: flex; gap: 8px; margin: 0; font-size: .8rem; color: var(--tinta-2); line-height: 1.45; }
.res-regla svg { width: 18px; height: 18px; color: var(--azul); flex: none; margin-top: 1px; }
.res-vacio { border: 1.5px dashed var(--linea); border-radius: var(--r); padding: 22px; }
.res-vacio p { margin: 0; color: var(--tinta-2); font-size: .9rem; }
.rv-t { font: 700 1.05rem var(--display) !important; color: var(--marino) !important; margin-bottom: 4px !important; }
.res-escribir { margin-top: 14px; }
.res-escribir summary { cursor: pointer; font-weight: 600; color: var(--azul); padding: 8px 0; }
.res-form { display: grid; gap: 14px; margin-top: 8px; max-width: 560px; }
.res-aviso { margin: 0; font-size: .8rem; color: var(--marino); background: var(--niebla); padding: 8px 12px; border-radius: 10px; }
.res-estrellas { border: 0; padding: 0; margin: 0; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.res-estrellas legend { float: left; width: 100%; font-size: .84rem; font-weight: 600; color: var(--marino); margin-bottom: 4px; }
.res-estrellas input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.res-estrellas label { font-size: 1.9rem; line-height: 1; color: #C7CEDC; cursor: pointer; padding: 0 2px; }
.res-estrellas input:checked ~ label, .res-estrellas label:hover, .res-estrellas label:hover ~ label { color: var(--azul); }
.res-estrellas input:focus-visible + label { outline: 3px solid var(--azul); border-radius: 4px; }
.res-foto-prev { margin-top: 8px; max-width: 160px; border-radius: 10px; }
.res-error { margin: 0; min-height: 1.2em; color: var(--error); font-size: .84rem; font-weight: 600; }
.res-form .boton { justify-self: start; }
.resena { border: 1.5px solid var(--linea); border-radius: var(--r); padding: 18px; margin-bottom: 12px; }
.resena-prueba { border-style: dashed; border-color: var(--azul); }
.rp-marca { margin: 0 0 8px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--azul); }
.r-cabeza { display: flex; align-items: center; gap: 10px; }
.r-quien { margin: 4px 0 8px; font-size: .8rem; color: var(--tinta-3); }
.resena > p:not([class]) { margin: 0 0 10px; color: var(--tinta-2); }
.r-foto { max-width: 160px; border-radius: 10px; }
.r-borrar { margin-top: 8px; border: 0; background: none; color: var(--tinta-3); text-decoration: underline; font-size: .8rem; padding: 0; }

.pr-barra { display: none; }

/* Mis sueños */
.pag-cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.pag-cabeza h1 { margin: 0; font-size: 1.8rem; color: var(--marino); }
.pag-sub { margin: 4px 0 0; color: var(--tinta-2); }
.pag-sub:empty { display: none; }
.pag-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.pag-acciones[hidden] { display: none; }
.aviso-compartida { margin: 0 0 16px; padding: 10px 14px; background: var(--niebla); border-radius: 10px; color: var(--marino); font-size: .9rem; }
.t-quitar { border: 0; background: none; color: var(--tinta-3); font-size: .8rem; text-decoration: underline; padding: 6px 0 0; }
.t-quitar:hover { color: var(--error); }

/* Mi cuenta */
.cuenta-entrada { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; }
.ce-aviso { background: var(--marino); color: #fff; border-radius: var(--r); padding: 30px 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ce-aviso h1 { margin: 0 0 8px; font-size: 2rem; }
.ce-aviso p { margin: 0 0 18px; color: #D0DAF0; }
.ce-aviso b { color: #fff; }
.ce-formas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ce-forma { margin-top: 0; display: flex; flex-direction: column; gap: 12px; }
.ce-forma h2 { margin: 0 0 4px; font-size: 1.25rem; color: var(--marino); }
.ce-recordar { display: flex; align-items: flex-start; gap: 8px; font-size: .84rem; color: var(--tinta-2); }
.ce-recordar input { margin: 2px 0 0; accent-color: var(--azul); width: 18px; height: 18px; flex: none; }
.ce-olvido { font-size: .86rem; font-weight: 600; }
.ce-msj { margin: 0; min-height: 1.2em; font-size: .86rem; color: var(--marino); font-weight: 500; }
.aviso-demo { margin: 0 0 14px; padding: 10px 14px; background: var(--niebla); border-radius: 12px; color: var(--marino); font-size: .88rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.aviso-demo button { border: 0; background: none; color: var(--azul); font-weight: 600; text-decoration: underline; padding: 0; }
.cuenta-rejilla { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.cuenta-menu { background: #fff; border-radius: var(--r); padding: 14px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 2px; position: sticky; top: 150px; }
.cm-hola { margin: 4px 10px 10px; color: var(--tinta-2); }
.cm-hola b { color: var(--marino); }
.cuenta-menu a, .cuenta-menu button { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; color: var(--marino); text-decoration: none; font-weight: 500; font-size: .92rem; border: 0; background: none; text-align: left; }
.cuenta-menu a:hover, .cuenta-menu button:hover { background: var(--niebla); }
.cuenta-menu a[aria-current] { background: var(--marino); color: #fff; }
.cuenta-menu svg { width: 20px; height: 20px; fill: none; }
.cuenta-menu button { margin-top: 8px; border-top: 1px solid var(--linea); border-radius: 0 0 10px 10px; color: var(--tinta-2); }
.burbuja-menu { position: static; margin-left: auto; border: 0; }
.cuenta-panel .bloque { margin-top: 0; }
.cuenta-panel h1 { margin: 0 0 16px; font-size: 1.6rem; color: var(--marino); }
.tableros { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tableros a { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: var(--r); background: var(--fondo); color: var(--tinta-2); text-decoration: none; font-size: .86rem; border: 1.5px solid transparent; }
.tableros a:hover { border-color: var(--marino); }
.tb-n { font: 800 1.6rem/1.1 var(--display); color: var(--marino); }
.codigo-lista { margin-top: 14px; padding: 14px 16px; border-radius: 12px; border: 1.5px dashed var(--azul); color: var(--tinta-2); font-size: .9rem; }
.codigo-lista p { margin: 0; }
.codigo-lista b { color: var(--marino); }
.codigo-lista code { font: 700 1rem var(--texto); color: var(--azul); background: var(--niebla); padding: 2px 8px; border-radius: 6px; }
.pasos-pedido { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; counter-reset: paso; }
.pasos-pedido li { position: relative; padding: 38px 10px 0; display: flex; flex-direction: column; gap: 2px; font-size: .84rem; counter-increment: paso; }
.pasos-pedido li::before { content: counter(paso); position: absolute; left: 10px; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--niebla); color: var(--azul); font-weight: 700; display: grid; place-items: center; }
.pasos-pedido li::after { content: ''; position: absolute; left: 44px; right: -4px; top: 13px; height: 2px; background: var(--linea); }
.pasos-pedido li:last-child::after { display: none; }
.pasos-pedido b { color: var(--marino); }
.pasos-pedido span { color: var(--tinta-3); }
.forma-cuenta .sub-t:first-child { margin-top: 0; }
.fc-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.fc-ancho { grid-column: 1 / -1; }
.forma-cuenta .boton { margin-right: 12px; }
.forma-cuenta .ce-msj { display: inline-block; margin-top: 10px; }
.priv-lista { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.priv-lista li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px; border: 1.5px solid var(--linea); border-radius: var(--r); }
.priv-lista b { display: block; color: var(--marino); }
.priv-lista span { font-size: .86rem; color: var(--tinta-2); }
.priv-lista .boton { flex: none; min-height: 40px; padding: 8px 16px; font-size: .86rem; }
.interruptor { position: relative; flex: none; width: 50px; height: 28px; }
.interruptor input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.interruptor span[aria-hidden] { position: absolute; inset: 0; border-radius: 99px; background: #C7CEDC; transition: background .2s; }
.interruptor span[aria-hidden]::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s; }
.interruptor input:checked + .sr + span[aria-hidden] { background: var(--azul); }
.interruptor input:checked + .sr + span[aria-hidden]::after { transform: translateX(22px); }
.interruptor input:focus-visible + .sr + span[aria-hidden] { outline: 3px solid var(--azul); outline-offset: 2px; }

@media (max-width: 1180px) {
  .producto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pr-compra { grid-column: 2; position: static; }
  .pr-galeria { grid-row: 1 / 3; }
}
@media (max-width: 900px) {
  .producto { grid-template-columns: 1fr; padding: 16px; gap: 20px; }
  .pr-galeria { grid-row: auto; position: static; grid-template-columns: 1fr; }
  .pr-miniaturas { flex-direction: row; order: 2; overflow-x: auto; }
  .pr-mini { flex: none; width: 60px; height: 60px; }
  .pr-compra { grid-column: auto; }
  .pr-pestanas { top: 168px; }
  .pr-envios, .resenas { grid-template-columns: 1fr; }
  .pr-barra { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 26; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--linea); transform: translateY(110%); transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
  .pr-barra.visible { transform: none; }
  .pr-barra-precio { margin: 0; font: 800 1.3rem var(--texto); }
  body[data-pagina="producto"] .wa-flotante { bottom: 84px; }
  .cuenta-entrada, .ce-formas, .cuenta-rejilla { grid-template-columns: 1fr; }
  .cuenta-menu { position: static; flex-direction: row; overflow-x: auto; gap: 4px; padding: 8px; }
  .cuenta-menu a, .cuenta-menu button { flex: none; white-space: nowrap; }
  .cm-hola { display: none; }
  .cuenta-menu button { margin: 0; border: 0; border-radius: 10px; }
  .tableros { grid-template-columns: 1fr; }
  .pasos-pedido { grid-template-columns: 1fr; gap: 14px; }
  .pasos-pedido li { padding: 2px 0 0 40px; }
  .pasos-pedido li::before { left: 0; }
  .pasos-pedido li::after { display: none; }
  .fc-rejilla { grid-template-columns: 1fr; }
  .priv-lista li { flex-direction: column; align-items: flex-start; }
}
/* Responsive */
@media (max-width: 1400px) {
  .cab-wa { display: none; }
}
@media (max-width: 1180px) {
  .mosaico { grid-template-columns: 1.2fr 1fr; grid-template-rows: auto auto auto; }
  .mo-marca { grid-row: 1 / 3; }
  .mo-ciclismo { grid-row: auto; min-height: 260px; }
  .mo-repuestos { grid-column: 1; min-height: 170px; }
  .mo-lista { grid-column: 2; }
  .deptos-lista { grid-template-columns: repeat(3, 1fr); }
  .kits { grid-template-columns: repeat(2, 1fr); }
  .cats { grid-template-columns: repeat(4, 1fr); }
  .fila-pista { grid-auto-columns: calc((100% - 3 * 14px) / 3.6); }
  .bicis { grid-template-columns: 1fr 1fr; }
  .bicis-tipos { grid-column: 1 / -1; grid-row: 2; }
  .marcas { grid-template-columns: repeat(3, 1fr); }
  .ci span:not(.ci-ico):not(.burbuja) { display: none; }
  .ci { min-width: 44px; }
}
@media (max-width: 900px) {
  html { scroll-padding-top: 180px; }
  .cab-1 { flex-wrap: wrap; gap: 8px 10px; padding: 10px 14px 8px; }
  .logo { font-size: 1.5rem; margin-right: auto; }
  .buscador { order: 5; flex: 1 0 100%; height: 46px; }
  .b-depto { display: none; }
  .b-sugerencias { right: -1px; }
  .ubicacion { order: 6; flex: 1 0 100%; padding: 2px 0; }
  .ubicacion:hover, .ubicacion:focus-within { background: none; }
  .ubicacion small { display: inline; margin-right: 4px; }
  .ubicacion > span { display: flex; align-items: center; }
  .cab-2 { padding: 0 14px 8px; }
  .cab-wa { display: none; }
  .panel-deptos { grid-template-columns: 1fr; gap: 18px; }
  .dr-main { padding: 12px 12px 30px; }
  .mosaico { grid-template-columns: 1fr; }
  .mo-marca, .mo-ciclismo, .mo-repuestos, .mo-lista { grid-row: auto; grid-column: auto; }
  .mo-marca { padding: 28px 22px 22px; }
  .mo-deptos { grid-template-columns: repeat(3, 1fr); row-gap: 14px; }
  .promesas { grid-template-columns: 1fr 1fr; }
  .promesas li:nth-child(3) { border-left: 0; }
  .promesas li:nth-child(n+3) { border-top: 1px solid var(--linea); }
  .depto-portada { grid-template-columns: 1fr; gap: 14px; padding: 22px; }
  .dp-num { font-size: 2.6rem; }
  .resultados { grid-template-columns: 1fr; scroll-margin-top: 180px; }
  .filtros { position: static; }
  .filtros ul[data-f-cats] { display: flex; flex-wrap: wrap; gap: 4px 14px; }
  .lista-confianza { grid-template-columns: 1fr; }
  .pie { grid-template-columns: 1fr; gap: 28px; padding: 36px 18px 20px; }
  .pie-cols { grid-template-columns: 1fr 1fr; }
  .fi { grid-template-columns: 1fr; }
  .fi-foto { min-height: 240px; padding: 20px; }
  .fi-foto img { max-height: 240px; }
  .tc-toast { top: auto; bottom: 86px; right: 16px; }
}
@media (max-width: 640px) {
  .bloque { padding: 18px 14px; }
  .bloque-cabeza h2 { font-size: 1.15rem; }
  .deptos-lista { grid-template-columns: 1fr 1fr; gap: 10px; }
  .depto { padding: 14px; }
  .kits { grid-template-columns: 1fr; }
  .cats { display: flex; overflow-x: auto; gap: 14px; scrollbar-width: none; }
  .cats li { flex: 0 0 84px; }
  .cats a { font-size: .76rem; }
  .fila-pista { grid-auto-columns: 46%; }
  .fila-flecha { display: none; }
  .bicis { grid-template-columns: 1fr; padding: 18px 14px; }
  .bicis-tipos { grid-row: auto; grid-template-columns: 1fr 1fr; }
  .marcas { grid-template-columns: 1fr 1fr; }
  .taller { min-height: 0; flex-direction: column; align-items: stretch; }
  .taller > img { position: static; height: 200px; }
  .taller-caja { margin: -40px 12px 12px; padding: 22px; }
  .taller .foto-ref { top: 10px; bottom: auto; }
  .rejilla { grid-template-columns: 1fr 1fr; gap: 10px; }
  .t-cuerpo { padding: 10px; }
  #form-lista { grid-template-columns: 1fr; }
  .lista, .confianza { padding: 22px 18px; }
  .promesas li { padding: 12px 14px; gap: 10px; }
  .promesas svg { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- WooCommerce y convivencia con Kadence ---------- */
body.dr-tienda, .dr-tienda #wrapper, .dr-tienda #inner-wrap { background: var(--fondo); }
.dr-tienda :is(button, .button):hover, .dr-tienda :is(button, .button):focus { box-shadow: none; }
.dr-tienda .cabecera { position: sticky; z-index: 30; }
.admin-bar .cabecera { top: 32px; }
@media (max-width: 782px) { .admin-bar .cabecera { top: 0; position: relative; } }
.dr-tienda .t-foto img, .dr-tienda .cat-circulo img, .dr-tienda .kit-fotos img, .dr-tienda .m-foto img { max-width: none; }
.cat-circulo img { width: 70%; height: 70%; object-fit: contain; }
.m-foto img { width: 34px; height: 34px; object-fit: contain; }
.marcas a { color: inherit; text-decoration: none; }
.mo-repuestos img { height: auto; }
.t-agregar[disabled] { opacity: .6; cursor: progress; }
a.t-agregar { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.migas { margin-bottom: 14px; }
.migas a { text-decoration: none; }
/* Lista de productos de WooCommerce (relacionados, shortcodes) */
.dr-tienda ul.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.dr-tienda ul.products::before, .dr-tienda ul.products::after { display: none; }
.dr-tienda ul.products li.dr-li { margin: 0; padding: 0; width: auto; float: none; }
/* Catálogo */
.filtros ul { list-style: none; margin: 0; padding: 0; }
.filtros a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; margin: 0 -8px; border-radius: 8px; font-size: .88rem; color: var(--carbon); text-decoration: none; }
.filtros a:hover { background: var(--niebla); }
.filtros a.f-activo { background: var(--niebla); color: var(--marino); font-weight: 700; }
.filtros small { color: var(--tinta-3); }
.res-cabeza h1 { margin: 0; font-size: 1.4rem; color: var(--marino); }
.res-cabeza h1 span { font: 400 .9rem var(--texto); color: var(--tinta-3); margin-left: 6px; }
.orden label { font-size: .86rem; color: var(--tinta-2); }
.res-guia { margin: 0 0 18px; padding: 12px 14px; background: var(--niebla); border-radius: 12px; font-size: .9rem; color: var(--tinta-2); }
.res-guia b { color: var(--marino); }
.resultados { margin-top: 0; }
.woocommerce-pagination { margin-top: 24px; }
.woocommerce-pagination ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; border: 0; }
.woocommerce-pagination ul li { border: 0; }
.woocommerce-pagination .page-numbers { display: grid; place-items: center; min-width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid var(--linea); color: var(--marino); text-decoration: none; font-weight: 600; }
.woocommerce-pagination .page-numbers.current { background: var(--marino); border-color: var(--marino); color: #fff; }
/* Ficha */
.pr-resumen p { margin: 0 0 12px; color: var(--tinta-2); }
.pr-texto p { margin: 0 0 12px; color: var(--tinta-2); max-width: 72ch; }
.pr-agotado { margin: 0; font-size: .9rem; color: var(--tinta-2); }
.pr-foto img { max-width: 82%; height: auto; }
/* Reseñas de WooCommerce */
.dr-tienda #reviews .commentlist { list-style: none; margin: 0 0 16px; padding: 0; }
.dr-tienda #reviews .commentlist li { border: 1.5px solid var(--linea); border-radius: var(--r); padding: 16px; margin-bottom: 12px; }
.dr-tienda #reviews .commentlist img.avatar { display: none; }
.dr-tienda #reviews .comment-text { margin: 0; padding: 0; border: 0; }
.dr-tienda #reviews .star-rating { color: var(--azul); }
.dr-tienda #reviews .meta { font-size: .82rem; color: var(--tinta-3); }
.dr-tienda #reviews .woocommerce-review__verified { color: var(--exito); font-style: normal; font-weight: 600; }
.res-escribir-abierto { margin-top: 16px; }
.res-escribir-abierto form { display: grid; gap: 12px; max-width: 560px; }
.res-escribir-abierto .form-submit input, .res-escribir-abierto .form-submit button { min-height: 46px; padding: 10px 22px; border-radius: 12px; border: 0; background: var(--azul); color: #fff; font-weight: 600; cursor: pointer; }
.res-aviso { margin: 14px 0 0; font-size: .86rem; color: var(--marino); background: var(--niebla); padding: 10px 12px; border-radius: 10px; }
/* Páginas de WooCommerce con la plantilla de Kadence (carrito, pago, cuenta) */
.dr-tienda .content-container.site-container { max-width: var(--ancho); }
.dr-tienda .entry-hero .entry-title, .dr-tienda .entry-header .entry-title { font-family: var(--display); color: var(--marino); letter-spacing: -.02em; }
.dr-tienda .woocommerce-MyAccount-navigation ul li.is-active a { color: var(--marino); font-weight: 700; }
.dr-tienda .woocommerce-message, .dr-tienda .woocommerce-info { border-top-color: var(--azul); }
.dr-tienda .wc-block-components-button:not(.is-link), .dr-tienda .woocommerce .button.alt { background: var(--azul); border-radius: 12px; }

/* ---------- Logo: la D sobre la misma línea base que «redian» ---------- */
.logo { align-items: baseline; }
.logo svg { width: .65em; height: .72em; margin-right: .03em; transform: none; align-self: baseline; }

/* ---------- Selector de ciudad ---------- */
.ciudad { position: relative; flex: none; }
.ubicacion { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1.5px solid transparent; border-radius: 12px; background: none; color: var(--marino); text-align: left; cursor: pointer; font: inherit; }
.ubicacion:hover, .ubicacion[aria-expanded="true"] { background: var(--niebla); }
.ubicacion[aria-expanded="true"] { border-color: #C9D7FF; }
.ubicacion > svg:first-child { width: 22px; height: 22px; color: var(--azul); }
.ubicacion small { display: block; font-size: .72rem; color: var(--tinta-3); line-height: 1.1; }
.ubicacion b { display: block; font-size: .95rem; font-weight: 700; line-height: 1.2; }
.ub-flecha { width: 16px; height: 16px; color: var(--tinta-3); transition: transform .2s; }
.ubicacion[aria-expanded="true"] .ub-flecha { transform: rotate(180deg); }
.ciudad-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 45; width: 340px; padding: 14px; background: #fff; border: 1px solid var(--linea); border-radius: 16px; box-shadow: 0 18px 44px rgba(0, 0, 0, .14); }
.cp-t { margin: 0 0 6px; font: 700 .98rem var(--display); color: var(--marino); }
.ciudad-panel ul { list-style: none; margin: 0; padding: 0; max-height: min(360px, 60vh); overflow-y: auto; }
.ciudad-panel ul:focus { outline: none; }
.cp-grupo { padding: 10px 10px 4px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.cp-op { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; font-size: .92rem; color: var(--carbon); cursor: pointer; }
.cp-op:hover, .cp-op:focus { background: var(--niebla); outline: none; }
.cp-op:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.cp-op[aria-selected="true"] { background: var(--niebla); color: var(--marino); font-weight: 700; }
.cp-check { width: 18px; height: 18px; color: var(--azul); opacity: 0; }
.cp-op[aria-selected="true"] .cp-check { opacity: 1; }
.cp-nota { margin: 10px 4px 0; font-size: .76rem; color: var(--tinta-3); line-height: 1.4; }
.pr-ciudad { display: inline-flex; align-items: center; gap: 2px; padding: 0; border: 0; border-bottom: 1.5px dashed var(--azul); border-radius: 0; background: none; color: var(--azul); font: inherit; font-weight: 600; cursor: pointer; }
.pr-ciudad svg { width: 14px; height: 14px; }
@media (max-width: 900px) {
  .ciudad { order: 6; flex: 1 0 100%; }
  .ubicacion { padding: 4px 6px; margin-left: -6px; }
  .ubicacion > span { display: flex; align-items: baseline; gap: 4px; }
  .ciudad-panel { width: calc(100vw - 28px); }
}

/* ---------- Sugerencias del buscador ---------- */
.b-sugerencias li:has(> a) { display: block; padding: 0; }
.b-sugerencias li a { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; color: var(--carbon); text-decoration: none; font-size: .9rem; }
.b-sugerencias li a:hover, .b-sugerencias li[aria-selected="true"] a { background: var(--niebla); }
.b-sugerencias li a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-sugerencias li a small { font-size: .76rem; }

/* ---------- Aviso de agregado ---------- */
.tc-toast a { flex: none; padding: 7px 14px; border: 1.5px solid var(--linea); border-radius: 999px; background: #fff; color: var(--marino); font-size: .8rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.tc-toast a:hover { border-color: var(--marino); }

/* ---------- Página del carrito (bloque de WooCommerce) ---------- */
.dr-tienda .wp-block-woocommerce-cart { margin-top: 0; }
.dr-tienda .wc-block-cart-items__header { font-size: .76rem; letter-spacing: .06em; color: var(--tinta-3); }
.dr-tienda .wc-block-components-product-name { color: var(--marino); font-weight: 600; text-decoration: none; }
.dr-tienda .wc-block-cart__submit-button, .dr-tienda .wc-block-components-checkout-place-order-button { border-radius: 12px; background: var(--azul); color: #fff; font-weight: 600; }
.dr-tienda .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-weight: 800; }

/* ---------- Estados de botón: Kadence pinta button:hover/:focus (0,1,1) con su
   color y fondo; aquí cada botón propio conserva los suyos. ---------- */
.dr-tienda .ubicacion:is(:hover, :focus, :active) { color: var(--marino); background: var(--niebla); }
.dr-tienda .fila-flecha:is(:hover, :focus, :active) { color: var(--marino); background: #fff; }
.dr-tienda .t-sueno:is(:hover, :focus, :active) { color: var(--marino); background: #fff; }
.dr-tienda .t-sueno[aria-pressed="true"]:is(:hover, :focus, :active) { color: var(--azul); }
.dr-tienda .muestra:is(:hover, :focus, :active) { background: var(--c); }
.dr-tienda .t-agregar:is(:hover, :focus, :active) { color: #fff; background: var(--marino); border-color: var(--marino); }
.dr-tienda .stepper button:is(:hover, :focus, :active) { color: var(--marino); background: var(--niebla); }
.dr-tienda .pr-sueno:is(:hover, :focus, :active) { color: var(--marino); background: #fff; }
.dr-tienda .pr-sueno[aria-pressed="true"]:is(:hover, :focus, :active) { color: var(--azul); }
.dr-tienda .pr-col:is(:hover, :focus, :active) { color: var(--marino); background: #fff; }
.dr-tienda .pr-col[aria-pressed="true"]:is(:hover, :focus, :active) { background: var(--niebla); }
.dr-tienda .pr-mini:is(:hover, :focus, :active) { background: var(--fondo); }
.dr-tienda .pr-ciudad:is(:hover, :focus, :active) { color: var(--azul-h); background: none; }
.dr-tienda .deptos-boton:is(:hover, :focus, :active) { color: #fff; background: var(--azul); }
.dr-tienda .b-boton:is(:hover, :focus, :active) { color: #fff; background: var(--azul-h); }
.dr-tienda .boton:is(:hover, :focus, :active) { color: #fff; background: var(--azul-h); }
.dr-tienda .boton-wa:is(:hover, :focus, :active) { color: var(--marino); background: var(--niebla); }
.dr-tienda .boton-vidrio:is(:hover, :focus, :active) { color: #fff; background: rgba(255, 255, 255, .2); }
.dr-tienda .t-quitar:is(:hover, :focus, :active) { color: var(--error); background: none; }
.dr-tienda :is(.ubicacion, .fila-flecha, .t-sueno, .muestra, .t-agregar, .stepper button, .pr-sueno, .pr-col, .pr-mini, .pr-ciudad, .deptos-boton, .b-boton, .boton, .t-quitar):focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

/* ---------- Carrito, pago y cuenta: sin portada de Kadence, con el ancho de la tienda ---------- */
.dr-tienda.woocommerce-cart .content-container, .dr-tienda.woocommerce-checkout .content-container, .dr-tienda.woocommerce-account .content-container { max-width: var(--ancho); padding: 24px 24px 48px; }
.dr-tienda.woocommerce-cart .entry-content, .dr-tienda.woocommerce-checkout .entry-content, .dr-tienda.woocommerce-account .entry-content { margin: 0; }

/* ---------- Carrito (bloque de WooCommerce) con el estilo de la tienda ---------- */
.dr-tienda .wc-block-cart { gap: 18px; align-items: flex-start; }
.dr-tienda .wc-block-cart .wc-block-cart__main { background: #fff; border-radius: var(--r); padding: 20px 24px; box-shadow: var(--sombra); }
.dr-tienda .wc-block-cart .wc-block-cart__sidebar { background: #fff; border-radius: var(--r); padding: 22px; box-shadow: var(--sombra); position: sticky; top: 170px; }
.dr-tienda .wc-block-cart-items { border: 0; margin: 0; }
.dr-tienda .wc-block-cart-items__header th { padding: 0 0 12px; border-bottom: 1px solid var(--linea); font-size: .74rem; font-weight: 700; letter-spacing: .08em; color: var(--tinta-3); }
.dr-tienda .wc-block-cart-items__row td { padding-top: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--linea); }
.dr-tienda .wc-block-cart-items__row:last-child td { border-bottom: 0; }
.dr-tienda .wc-block-cart-item__image a { display: grid; place-items: center; width: 96px; height: 96px; padding: 8px; background: var(--fondo); border-radius: 12px; }
.dr-tienda .wc-block-cart-item__image img { width: 100%; height: 100%; object-fit: contain; }
.dr-tienda .wc-block-cart-item__product { padding-left: 18px !important; }
.dr-tienda .wc-block-cart-item__wrap { display: flex; flex-direction: column; gap: 4px; }
.dr-tienda .wc-block-components-product-name { font-size: 1rem; font-weight: 600; color: var(--marino); text-decoration: none; line-height: 1.3; }
.dr-tienda .wc-block-components-product-name:hover { color: var(--azul); }
.dr-tienda .wc-block-cart-item__prices, .dr-tienda .wc-block-components-product-metadata { font-size: .86rem; color: var(--tinta-2); }
.dr-tienda .wc-block-components-product-details { margin: 0; font-size: .82rem; color: var(--tinta-3); }
.dr-tienda .wc-block-cart-item__quantity { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.dr-tienda .wc-block-components-quantity-selector { width: 116px; border: 1.5px solid var(--linea); border-radius: 10px; background: #fff; }
.dr-tienda .wc-block-components-quantity-selector::after { display: none; }
.dr-tienda .wc-block-components-quantity-selector__input { font-weight: 700; color: var(--carbon); }
.dr-tienda .wc-block-components-quantity-selector__button { color: var(--marino); background: none; opacity: 1; }
.dr-tienda .wc-block-components-quantity-selector__button:is(:hover, :focus) { color: var(--azul); background: none; box-shadow: none; }
.dr-tienda .wc-block-cart-item__remove-link { color: var(--tinta-3); }
.dr-tienda .wc-block-cart-item__remove-link:is(:hover, :focus) { color: var(--error); background: none; }
.dr-tienda .wc-block-cart-item__total { font-weight: 700; color: var(--carbon); }
.dr-tienda .wc-block-cart__totals-title { margin: 0 0 6px; padding: 0 0 12px; border-bottom: 1px solid var(--linea); font: 700 .78rem var(--texto); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); text-align: left; }
.dr-tienda .wc-block-components-totals-wrapper { border-top: 0; padding: 12px 0; }
.dr-tienda .wc-block-components-totals-wrapper + .wc-block-components-totals-wrapper { border-top: 1px solid var(--linea); }
.dr-tienda .wc-block-components-panel__button { font-size: .9rem; color: var(--marino); font-weight: 600; }
.dr-tienda .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font: 700 1rem var(--display); color: var(--marino); }
.dr-tienda .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font: 800 1.6rem var(--texto); color: var(--carbon); letter-spacing: -.02em; }
.dr-tienda .wc-block-components-totals-footer-item-tax, .dr-tienda .wc-block-components-totals-item__description { font-size: .8rem; color: var(--tinta-3); }
.dr-tienda .wc-block-cart__submit { margin: 14px 0 0; }
.dr-tienda .wc-block-cart__submit-button { min-height: 52px; border-radius: 12px; background: var(--azul); color: #fff; font: 600 1rem var(--texto); }
.dr-tienda .wc-block-cart__submit-button:is(:hover, :focus) { background: var(--azul-h); color: #fff; }
.dr-carrito-confianza { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--linea); display: grid; gap: 10px; font-size: .84rem; color: var(--tinta-2); }
.dr-carrito-confianza li { display: flex; align-items: flex-start; gap: 8px; }
.dr-carrito-confianza svg { width: 18px; height: 18px; color: var(--azul); flex: none; margin-top: 1px; }
.dr-carrito-confianza b { color: var(--marino); }
.dr-carrito-confianza a { color: var(--marino); font-weight: 600; }
.dr-seguir { display: block; margin-top: 14px; text-align: center; font-size: .9rem; font-weight: 600; color: var(--azul); }
/* Carrito vacío */
.dr-tienda .wp-block-woocommerce-empty-cart-block { background: none; padding: 0; box-shadow: none; }
.carrito-vacio { margin-top: 0; }
.cv-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.dr-tienda .wc-block-cart__empty-cart__title { font-family: var(--display); color: var(--marino); }
@media (max-width: 900px) {
  .dr-tienda.woocommerce-cart .content-container, .dr-tienda.woocommerce-checkout .content-container, .dr-tienda.woocommerce-account .content-container { padding: 14px 12px 32px; }
  .dr-tienda .wc-block-cart .wc-block-cart__main, .dr-tienda .wc-block-cart .wc-block-cart__sidebar { padding: 16px; position: static; }
  .dr-tienda .wc-block-cart-item__image a { width: 72px; height: 72px; }
}

/* ---------- Cuenta y pago en tarjetas, como el carrito ---------- */
.dr-tienda.woocommerce-account .entry-content > .woocommerce { background: #fff; border-radius: var(--r); padding: 28px; box-shadow: var(--sombra); }
.dr-tienda .wc-block-checkout { gap: 18px; align-items: flex-start; }
.dr-tienda .wc-block-checkout .wc-block-checkout__main { background: #fff; border-radius: var(--r); padding: 24px; box-shadow: var(--sombra); }
.dr-tienda .wc-block-checkout .wc-block-checkout__sidebar { background: #fff; border-radius: var(--r); padding: 6px 0 0; box-shadow: var(--sombra); top: 170px; }
.dr-tienda .wc-block-checkout .wc-block-components-checkout-order-summary__title-text { font-family: var(--display); color: var(--marino); }
.dr-tienda .wc-block-components-checkout-step__title, .dr-tienda .wc-block-components-title { font-family: var(--display); color: var(--marino); }
@media (max-width: 900px) {
  .dr-tienda.woocommerce-account .entry-content > .woocommerce, .dr-tienda .wc-block-checkout .wc-block-checkout__main { padding: 16px; }
}

/* Dentro del contenido de una página (carrito, cuenta), Kadence da márgenes a p/h2/h3:
   las tarjetas y bloques propios conservan los suyos. */
.dr-tienda .entry-content :is(.tarjeta, .bloque-cabeza, .vacio-grande, .kit) :is(p, h2, h3) { margin: 0; }
.dr-tienda .entry-content .tarjeta .t-precio { margin: 4px 0 0; }
.dr-tienda .entry-content .tarjeta .t-entrega { margin: 2px 0 8px; }
.dr-tienda .entry-content .vacio-grande h2 { margin: 8px 0 0; }
.dr-tienda .entry-content .vacio-grande p { margin: 0 0 14px; }
.dr-tienda .entry-content .bloque-cabeza { margin-bottom: 16px; }
/* El estado vacío propio solo se ve si el carrito no tiene productos. */
.wp-block-woocommerce-cart:has(.wc-block-cart-items__row) > .wp-block-woocommerce-empty-cart-block { display: none; }