/* Tienda online — rediseño 2026-08-06 aplicando la guia de diseño del proyecto.
Estilo premium: mucho aire, foto de producto como protagonista, jerarquia por tamaño y
espacio (no por color), y el celeste de marca presente de verdad.
── La decision de color, que no es obvia ──────────────────────────────────────────────
El dueño pidio "mas celeste y mas brillante". Un celeste brillante NO puede usarse como
texto chico sobre blanco: #00a8e8 da 2.7:1 y #0093c4 da 3.5:1, los dos por debajo del
minimo de 4.5:1. Pero ESE MISMO celeste como RELLENO con texto oscuro encima da 9:1.
Por eso el celeste vivo va en superficies (franja, badges, bloques) y el azul profundo
queda solo para texto y links. Resultado: mas presencia de marca, no menos, y accesible. */
:root {
--ink: #0b1220;
--ink-soft: #58626f;
--line: #e4e8ee;
--bg: #ffffff;
--bg-soft: #f5f7fa;
/* Celeste vivo — SOLO como relleno, siempre con --ink encima (9.1:1). */
--brand: #35c3f0;
--brand-deep: #0b6ea8; /* texto y links sobre blanco (5.5:1) */
--brand-wash: #eaf8fe; /* fondos suaves de marca */
--ok: #0f7a58;
--radius: 16px;
--radius-sm: 10px;
--shadow: 0 1px 2px rgba(11, 18, 32, .04), 0 10px 30px rgba(11, 18, 32, .07);
--max: 1240px;
/* Escala de apilado explicita: evita la guerra de z-index cuando crecen las pantallas. */
--z-media: 1;
--z-badge: 2;
/* Por debajo de --z-header a proposito: el menu mobile (.nav.is-open) cuelga del header y
tiene que taparlo, no al reves, cuando se abre sobre una pantalla chica. */
--z-fab: 15;
--z-header: 20;
--z-dropdown: 25;
/* El popover de "agregar rapido" (quick-add) es position:fixed sobre TODA la pagina —
tiene que ganarle hasta al header fijo. */
--z-quickadd: 30;
/* Ritmo de espaciado en multiplos de 4, como manda la guia. */
--sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px;
}
* { box-sizing: border-box; }
/* Ninguna pagina de la tienda debe poder correrse para el costado. Se usa clip y no hidden
porque hidden convierte al body en contenedor de scroll y rompe el sticky de la barra. */
html, body { overflow-x: clip; max-width: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
outline: 3px solid var(--brand-deep);
outline-offset: 3px;
border-radius: 6px;
}
/* ── Barra superior ─────────────────────────────────────────────────────────── */
.topbar {
position: sticky; top: 0; z-index: var(--z-header);
background: rgba(255, 255, 255, .94);
backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid var(--line);
}
.topbar-inner {
max-width: var(--max); margin: 0 auto; padding: var(--sp-3) var(--sp-4);
display: flex; align-items: center; gap: var(--sp-6);
}
/* El ancho lo manda el ALTO: se fija la altura y el ancho sale solo del logo, asi no se
deforma nunca. width:auto es imprescindible porque el lleva los atributos width/height
reales (estan para que el navegador reserve el lugar y la barra no pegue un salto al cargar). */
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand img { height: 64px; width: auto; }
.brand-name { font-size: 21px; font-weight: 800; letter-spacing: .14em; }
.brand-sub { font-size: 9.5px; font-weight: 700; letter-spacing: .34em; color: var(--brand-deep); margin-top: 4px; }
.nav { display: flex; gap: var(--sp-4); flex: 1 1 auto; flex-wrap: wrap; }
.nav a {
font-size: 14px; font-weight: 600; color: var(--ink-soft);
padding: 6px 0; border-bottom: 2.5px solid transparent; white-space: nowrap;
}
.nav a:hover, .nav a.is-active { color: var(--ink); border-bottom-color: var(--brand); }
/* "Mas" (Sucursales/Taller) — mismo patron que .account-dropdown, panel flotante que no le saca
ancho a las categorias reales (2026-08-14, pedido de ahorrar espacio en el header). */
.nav-more { position: relative; }
.nav-more-trigger {
display: inline-flex; align-items: center; gap: 4px;
background: none; border: 0; cursor: pointer; font: inherit;
font-size: 14px; font-weight: 600; color: var(--ink-soft);
padding: 6px 0; border-bottom: 2.5px solid transparent;
}
.nav-more-trigger:hover, .nav-more-trigger[aria-expanded="true"] { color: var(--ink); border-bottom-color: var(--brand); }
.nav-more-dropdown {
position: absolute; top: calc(100% + var(--sp-2)); left: 0; z-index: var(--z-dropdown);
min-width: 160px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
box-shadow: var(--shadow); padding: var(--sp-2);
transform-origin: top left; transform: scale(.96); opacity: 0; pointer-events: none;
transition: transform .16s ease-out, opacity .16s ease-out;
}
.nav-more-dropdown.is-open { transform: scale(1); opacity: 1; pointer-events: auto; }
.nav-more-dropdown a {
display: block; padding: 10px var(--sp-3); border-radius: var(--radius-sm);
font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap;
}
.nav-more-dropdown a:hover { background: var(--bg-soft); }
/* min-width:0 es imprescindible: sin el, un hijo flex NUNCA se achica por debajo de su
contenido, y el buscador de 210px estiraba la barra mas alla de la pantalla. Eso hacia
que TODA la pagina se pudiera correr para el costado (reportado 2026-08-06). */
.topbar-actions { display: flex; align-items: center; gap: var(--sp-2); flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
/* El buscador es hermano de .topbar-actions, no hijo (ver el comentario en index.html). En
escritorio el order lo deja donde estuvo siempre: nav (1) · buscador (2) · iconos (3). El brand
no lleva order porque el default (0) ya lo pone primero. */
.search { order: 2; }
.topbar-actions { order: 3; }
/* Buscador FIJO, siempre visible, sin toggle ni animacion (2026-08-14). Hubo dos vueltas
intentando un buscador colapsable (lupita que se abre al tocar) que terminaron dando problemas
de posicionamiento reales — pedido explicito del dueño: mejor algo simple y estable que un
ahorro de espacio que sigue saliendo mal. Ver Title Case + "Mas" en el nav (mismo dia) como la
forma real de ganar espacio en la barra, en vez de esconder el buscador. */
.search {
/* 260px, no 220px (pedido del dueño 2026-08-14): con 220 el placeholder "Buscar bicis,
accesorios..." se cortaba a mitad de "accesorios". */
display: flex; align-items: center; min-width: 0; flex: 0 1 260px;
background: var(--bg-soft); border-radius: 999px; padding: 0 4px 0 var(--sp-4);
}
.search input { border: 0; background: none; padding: 11px 0; width: 100%; min-width: 0; font-size: 15px; color: inherit; outline: none; }
.search button { border: 0; background: none; color: var(--ink-soft); cursor: pointer; padding: var(--sp-2); display: grid; place-items: center; flex: 0 0 auto; }
.search button:hover { color: var(--brand-deep); }
.icon-btn {
display: inline-grid; place-items: center; min-width: 44px; min-height: 44px;
border: 0; background: none; cursor: pointer; color: var(--ink); padding: var(--sp-2); border-radius: 999px;
}
.icon-btn:hover { background: var(--bg-soft); }
#menuToggle { display: none; }
/* Bug real 2026-08-13: [hidden] del navegador y esta clase tienen la MISMA especificidad
(0,1,0) — como .icon-btn esta en la hoja de estilos del autor, le gana al [hidden] nativo del
navegador aunque el atributo este puesto, y el elemento se veia igual aunque estuviera
"oculto" (paso con accountButton al arrancar, y hubiera pasado con searchToggle al abrirse el
buscador). El selector de atributo suma especificidad (0,2,0) y lo saca de dudas. */
.icon-btn[hidden] { display: none; }
/* ── Cuenta (staff) ──────────────────────────────────────────────────────────
Ojo: esto NO es una cuenta de cliente — todavia no existe (la tienda no tiene carrito ni
checkout — ver TODO al principio de tienda.js). El icono de cuenta esta SIEMPRE visible: sin
sesion abre el modal de login/registro (mas abajo), con sesion se convierte en un dropdown con
los datos/pedidos del cliente, y si la sesion resulta ser de staff (Enzo/Facu/Pao/Pablo, ver
storeCustomerAuthRoutes.js), suma "Ingresar al panel" — un link, nunca una sesion admin
regalada desde aca. */
.account-menu { position: relative; }
/* Solo icono, sin la etiqueta de texto al lado (2026-08-14) — .account-trigger hereda el tamaño
cuadrado normal de .icon-btn sin overrides, mismo criterio que el carrito y la lupita. */
.cart-link { position: relative; }
.cart-badge {
position: absolute; top: 2px; right: 2px;
min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px;
background: var(--ink); color: #fff; font-size: 10px; font-weight: 800;
display: grid; place-items: center; line-height: 1;
}
/* Mismo bug real de [hidden] vs display custom (ver .icon-btn mas arriba) — sin esto el badge
mostraba "0" siempre en vez de ocultarse con el carrito vacio, encontrado al revisar el mismo
patron en toda la hoja 2026-08-14. */
.cart-badge[hidden] { display: none; }
.account-dropdown {
position: absolute; top: calc(100% + var(--sp-2)); right: 0; z-index: var(--z-dropdown);
min-width: 200px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
box-shadow: var(--shadow); padding: var(--sp-2);
transform-origin: top right;
transform: scale(.96); opacity: 0; pointer-events: none;
transition: transform .16s ease-out, opacity .16s ease-out;
}
.account-dropdown.is-open { transform: scale(1); opacity: 1; pointer-events: auto; }
.account-dropdown-header { padding: var(--sp-2) var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-2); }
.account-dropdown-header strong { display: block; font-size: 14px; }
.account-dropdown-header small { color: var(--ink-soft); font-size: 12px; }
.account-dropdown-item {
display: flex; align-items: center; width: 100%; min-height: 44px; gap: var(--sp-3);
padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); border: 0; background: none;
font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); text-align: left; cursor: pointer;
}
.account-dropdown-item:hover { background: var(--bg-soft); }
/* Mismo bug real de [hidden] vs display custom (ver .icon-btn mas arriba) — sin esto "Ingresar al
panel" se veia SIEMPRE en el dropdown, incluso para un cliente comun sin sesion de staff, que
es exactamente el link que tiene que quedar oculto para ellos. Encontrado al revisar el mismo
patron en toda la hoja 2026-08-14. */
.account-dropdown-item[hidden] { display: none; }
.account-dropdown-divider { height: 1px; background: var(--line); margin: var(--sp-2) 0; }
.account-dropdown-item.is-destructive { color: #b3261e; }
/* ── Modal de cuenta: Iniciar sesión / Crear cuenta ─────────────────────────── */
.auth-modal-backdrop {
position: fixed; inset: 0; z-index: 100;
background: rgba(11, 18, 32, .55);
display: grid; place-items: center; padding: var(--sp-4);
}
.auth-modal-backdrop[hidden] { display: none; }
.auth-modal {
position: relative; width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto;
background: var(--bg); border-radius: var(--radius); box-shadow: var(--shadow);
padding: var(--sp-8) var(--sp-6) var(--sp-6);
}
.auth-modal-close {
position: absolute; top: var(--sp-3); right: var(--sp-3);
width: 36px; height: 36px; border-radius: 999px; border: 0; background: var(--bg-soft);
color: var(--ink-soft); cursor: pointer; display: grid; place-items: center;
}
.auth-modal-close:hover { background: var(--line); color: var(--ink); }
/* margin-top: la X de cerrar (auth-modal-close) es absoluta, top:12px + 36px de alto = ocupa
hasta los 48px del modal — sin este margen las pestañas arrancaban a los 32px (el padding-top
del modal) y la X les quedaba encima. Reportado por el dueño 2026-08-14. */
.auth-tabs { display: flex; gap: var(--sp-2); margin-top: var(--sp-6); margin-bottom: var(--sp-4); }
.auth-tab {
flex: 1 1 0; padding: 10px; border-radius: var(--radius-sm); border: 1.5px solid var(--line);
background: none; font-weight: 700; font-size: 13.5px; color: var(--ink-soft); cursor: pointer;
}
.auth-tab.is-active { border-color: var(--ink); color: var(--ink); background: var(--bg-soft); }
.auth-modal-title { font-size: 22px; margin: 0 0 var(--sp-2); }
.auth-modal-status {
min-height: 18px; font-size: 13px; font-weight: 600; color: #b3261e; margin: 0 0 var(--sp-3);
}
.auth-modal-status.is-ok { color: var(--ok); }
.auth-form[hidden] { display: none; }
.auth-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.auth-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
/* min-width:0 en los dos niveles: un dentro de un grid de 2 columnas (.auth-field-row) no
se achica por debajo de su ancho minimo intrinseco si no se lo decis explicitamente — mismo
bug ya documentado en este archivo para .topbar-actions, con otra causa (ahi era flex, aca
grid), mismo arreglo. Sin esto aparecia una barra de scroll horizontal en el modal. */
.auth-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-soft); min-width: 0; }
.auth-field input, .auth-field select, .auth-field textarea {
border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 12px var(--sp-3);
font-size: 15px; color: var(--ink); font-family: inherit; background: var(--bg);
width: 100%; min-width: 0;
}
.auth-field textarea { resize: vertical; min-height: 90px; }
.auth-field input:focus-visible, .auth-field textarea:focus-visible { border-color: var(--brand-deep); outline: none; }
/* Honeypot anti-bot (formulario de arrepentimiento, /tienda/contacto) — fuera de pantalla pero
presente en el DOM y fuera del tab order, mismo recurso que el turnero público (book.css). */
.hp-field { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.auth-field input[readonly] { background: var(--bg-soft); color: var(--ink-soft); cursor: default; }
/* DNI/CUIT de facturación (2026-08-19, referencia Tiendanube): tilde verde que confirma formato
válido mientras se escribe — ver wireDniCuitInput() en tienda.js, que prende/apaga la clase
is-valid en cada tecla sin volver a pintar() todo el formulario. */
.input-check-wrap { position: relative; }
.input-check-wrap input { padding-right: 42px; }
.input-check-icon {
position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
width: 20px; height: 20px; fill: none; stroke: var(--ok); stroke-width: 2.5;
stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .12s ease;
}
.input-check-icon.is-valid { opacity: 1; }
.auth-submit { width: 100%; margin-top: var(--sp-2); }
/* Link chico y discreto, no compite en peso visual con el botón de "Ingresar" — mismo criterio de
jerarquía que un link de "olvidé mi contraseña" en cualquier login real. */
.auth-forgot-link {
background: none; border: none; padding: 0; margin-top: -6px; align-self: flex-end;
font-size: 12.5px; font-weight: 700; color: var(--ink-soft); cursor: pointer; text-decoration: underline;
}
.auth-forgot-link:hover { color: var(--ink); }
#authForgotBack { align-self: center; margin-top: 0; }
/* Honeypot: oculto visualmente sin display:none (algunos bots lo detectan y saltean el campo si
ven eso) — se saca de pantalla con posicion en vez de esconderlo del DOM. */
.auth-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 480px) {
.auth-field-row { grid-template-columns: 1fr; }
}
/* Términos y Condiciones / Política de Privacidad (2026-08-20) — pagina de puro texto, sin
ambicion visual: lo que importa es que se lea comodo, no que sea "linda". */
.legal-page h1 { font-size: 26px; margin-bottom: var(--sp-2); }
.legal-page h2 { font-size: 17px; margin: var(--sp-6) 0 var(--sp-2); }
.legal-page p { color: var(--ink-soft); line-height: 1.6; margin: 0; }
.legal-page a { color: var(--brand-deep); text-decoration: underline; }
/* ── Toast (agregar al carrito, errores de stock, etc.) ─────────────────────── */
/* El techo de ancho es min(420px, ...) y no solo el 100vw-margen de antes (2026-08-21): con el
viewport entero disponible, un nombre largo del catalogo se desplegaba en una pildora enorme de
varios renglones que tapaba media pantalla del celular. Con 420px el texto corta antes y el
cartel se mantiene del tamaño de un aviso. El radio deja de ser 999px por el mismo motivo: en
dos renglones, un radio mayor a la mitad del alto deforma los costados en dos panzas — 18px se
ve igual de redondeado en un renglon y sigue prolijo si se va a dos. */
.store-toast {
position: fixed; left: 50%; bottom: var(--sp-6); z-index: 200;
transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
background: var(--ink); color: #fff; font-size: 14px; font-weight: 700;
padding: 12px var(--sp-5); border-radius: 18px; box-shadow: var(--shadow);
/* width:max-content NO es redundante con el max-width. Un position:fixed se dimensiona
"shrink-to-fit" contra el espacio que le queda desde su borde de anclaje: con left:50%, ese
espacio es la MITAD de la pantalla (195px en un celular de 390), asi que el texto se partia en
cuatro renglones mucho antes de acercarse al techo de 420px. Con max-content el ancho lo pide
el texto —una sola linea si entra— y recien ahi el max-width lo recorta. */
width: max-content;
max-width: min(420px, calc(100vw - var(--sp-8))); text-align: center;
line-height: 1.35;
transition: transform .2s ease-out, opacity .2s ease-out;
}
.store-toast.is-visible { transform: translate(-50%, 0); opacity: 1; }
.store-toast.is-error { background: #b3261e; }
/* ── Franja de beneficios — el celeste de marca a pleno ─────────────────────── */
/* Desfile continuo. Se mueve el carril con transform y no con posiciones: transform lo resuelve
la placa de video y no obliga al navegador a recalcular la pagina en cada cuadro, asi que no
pesa aunque este animando todo el tiempo.
El contenido esta repetido 4 VECES en el HTML (ver el comentario largo en index.html) — con
solo 2 copias, en un monitor ancho una sola copia (~1280px) es mas angosta que el viewport y en
cierto punto del recorrido se ve la linea casi vacia antes de reiniciar (bug real reportado por
Enzo 2026-08-20, se notaba como un salto/gif). El recorrido es exactamente -25% (el ancho de
UNA copia sobre un carril de 4): cuando la primera copia termina de salir por la izquierda, la
segunda ya esta exactamente donde arrancaba la primera y el salto es invisible — misma logica
que antes con -50%/2 copias, solo que con margen de sobra para pantallas anchas. */
.benefits {
background: var(--brand);
color: var(--ink);
overflow: hidden;
padding: 11px 0;
position: relative;
}
.benefits-track {
display: flex; width: max-content;
animation: desfileCuarto 38s linear infinite;
}
/* Se frena al pasar el mouse: si algo te intereso, podes leerlo tranquilo. */
.benefits:hover .benefits-track { animation-play-state: paused; }
.benefits-run {
display: flex; align-items: center; flex: 0 0 auto;
gap: var(--sp-12); padding-right: var(--sp-12);
}
.benefits-run span {
display: inline-flex; align-items: center; gap: 9px;
font-size: 13px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
}
.benefits-run svg { flex: 0 0 auto; opacity: .85; }
/* Degradados en los bordes: el texto aparece y desaparece en lugar de cortarse de golpe. */
.benefits::before, .benefits::after {
content: ''; position: absolute; top: 0; bottom: 0; width: 42px; z-index: 2; pointer-events: none;
}
.benefits::before { left: 0; background: linear-gradient(90deg, var(--brand), rgba(53,195,240,0)); }
.benefits::after { right: 0; background: linear-gradient(270deg, var(--brand), rgba(53,195,240,0)); }
@keyframes desfile {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
/* Version para un carril de 4 copias (.benefits-track) — se mueve 1/4 del carril total, que es
exactamente el ancho de UNA copia. Las reseñas siguen usando "desfile" (2 copias, -50%) porque
ahi cada tarjeta ya es bien ancha (320px x 8 = de sobra para cubrir cualquier pantalla real). */
@keyframes desfileCuarto {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-25%, 0, 0); }
}
/* Sin movimiento para quien lo pidio en su sistema: queda quieta y centrada, con una sola copia. */
@media (prefers-reduced-motion: reduce) {
.benefits-track { animation: none; width: 100%; justify-content: center; }
.benefits-run { flex-wrap: wrap; justify-content: center; gap: var(--sp-3) var(--sp-8); padding-right: 0; }
.benefits-run[aria-hidden="true"] { display: none; }
.benefits::before, .benefits::after { display: none; }
}
/* ── Layout ─────────────────────────────────────────────────────────────────── */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--sp-4); }
.section { margin: var(--sp-16) auto; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.section-head h2 {
font-size: 28px; margin: 0; letter-spacing: -.025em; position: relative; padding-left: 14px;
}
/* Barrita de marca al costado del titulo: presencia de color sin ensuciar el texto. */
.section-head h2::before {
content: ''; position: absolute; left: 0; top: .15em; bottom: .15em;
width: 5px; border-radius: 3px; background: var(--brand);
}
.section-head a { font-size: 14.5px; font-weight: 700; color: var(--brand-deep); white-space: nowrap; }
/* ── Hero: carrusel ────────────────────────────────────────────────────────────
Claro, como el resto del sitio. Lo que lo hace premium no es el color de fondo sino los
detalles: tipografia grande y bien apretada, una reticula apenas visible, un halo de
marca difuso detras del producto y movimiento corto y bien curvado. El producto se apoya
sobre un gris muy leve (no blanco puro) para que la foto —que viene con fondo blanco—
quede separada del fondo en vez de fundirse. */
.hero { max-width: var(--max); margin: var(--sp-6) auto 0; padding: 0 var(--sp-4); }
.hero-inner {
position: relative; border-radius: 26px; overflow: hidden;
background: #fbfcfe;
border: 1px solid var(--line);
height: 520px;
isolation: isolate;
/* Tarjeta partida a la mitad (2026-08-28, pedido de Enzo): productos a la izquierda, taller a
la derecha — dos carruseles independientes, ver heroCarouselHtml/initHeroCarousel. */
display: grid; grid-template-columns: 1fr 1fr;
}
/* Halo de marca difuso detras del producto: da profundidad sin ensuciar. */
.hero-inner::before {
content: ''; position: absolute; inset: 0; z-index: 0;
background:
radial-gradient(56% 68% at 76% 48%, rgba(53,195,240,.26) 0%, rgba(53,195,240,0) 64%),
radial-gradient(46% 60% at 8% 6%, rgba(53,195,240,.10) 0%, rgba(53,195,240,0) 72%);
}
/* Reticula apenas visible: el detalle que hace que se lea "producto" y no "plantilla". Cubre TODA
la tarjeta (no solo el lado de productos) — el lado del taller la necesita tanto o mas, es su
unica textura de fondo al no tener foto. */
.hero-inner::after {
content: ''; position: absolute; inset: 0; z-index: 0;
background-image:
linear-gradient(rgba(11,18,32,.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(11,18,32,.045) 1px, transparent 1px);
background-size: 62px 62px;
mask-image: radial-gradient(78% 78% at 50% 50%, #000 25%, transparent 100%);
}
/* Cada mitad es su propio contexto de posicionamiento Y un flex column: contenido arriba (crece
para llenar el lugar disponible), controles abajo pegados a ese contenido — sin numeros magicos
de padding esperando que "algo" los llene (bug real reportado: hueco enorme entre el boton y
las flechas). */
.hero-panel { position: relative; z-index: 1; overflow: hidden; display: flex; flex-direction: column; padding: var(--sp-6) var(--sp-6) var(--sp-5); }
.hero-panel-taller { border-left: 1px solid var(--line); }
/* ── Mitad de productos ───────────────────────────────────────────────────── */
/* flex-basis:0 (no "auto"), mismo motivo que .hero-media mas abajo: sus hijos son
position:absolute (los .hero-slide van uno arriba del otro para el crossfade), asi que su
tamaño de contenido "natural" no es confiable como base — tiene que salir SOLO de la
distribucion flex. Bug real visto en vivo: sin esto, en el lado del taller (sin foto que le de
una altura grande al hermano de al lado) esta caja colapsaba y el icono/texto se superponia
con el badge de arriba. */
.hero-slides { position: relative; flex: 1 1 0; min-height: 0; }
.hero-slide {
position: absolute; inset: 0;
display: flex; flex-direction: column;
opacity: 0; visibility: hidden;
transition: opacity .55s ease-out, visibility .55s;
}
.hero-slide.is-active { opacity: 1; visibility: visible; }
/* Alto FIJO a proposito, no flex:1 (2026-08-28, tercera vuelta sobre esto mismo dia): con flex:1
el alto de esta caja es un VALOR CALCULADO por la distribucion flex, no uno escrito a mano — y
"max-height:100%" en la foto de adentro no resuelve de fiar contra un alto asi (limitacion real
de como los navegadores resuelven porcentajes de alto contra un padre flex, confirmado en vivo
con la foto real de un producto: la mostraba recortada, no achicada). Con un numero fijo la foto
de adentro SI puede confiar en su max-height, y nunca se recorta. Mas chica que "tan grande como
entre" pero confiable siempre, en cualquier producto — se prefiere eso a que ande bien con unas
fotos y mal con otras. */
/* Alto subido de 190 a 235 (2026-08-28, pedido de Enzo: "la imagen que se vea mas grande") — el
texto de al lado se achico a proposito (ver .hero-copy mas abajo) para hacerle lugar sin tocar
el alto total de la tarjeta (.hero-inner sigue en 520px). */
.hero-media { height: 235px; flex: 0 0 auto; overflow: hidden; text-align: center; padding-bottom: var(--sp-3); }
/* max-height en PIXELES LITERALES (221px = 235 de la caja menos el padding-bottom de arriba), no
en porcentaje — tercer intento el mismo dia: ni con flex-basis:0 ni con un alto fijo en el
padre el "max-height:100%" resolvia bien contra el contenedor (probado en vivo con una foto
real, se veia recortada las dos veces). Un numero en px no necesita resolver nada contra nadie,
no hay ambiguedad posible. margin:0 auto centra horizontalmente sin display:grid (se saco por
las dudas de que el grid tuviera algo que ver). */
.hero-media img {
display: inline-block; max-width: 100%; max-height: 221px; width: auto; height: auto;
filter: drop-shadow(0 18px 30px rgba(11,18,32,.16));
}
.hero-slide.is-active .hero-media img { animation: heroFloat .6s cubic-bezier(.22,.8,.28,1) both; }
.hero-copy { flex: 0 0 auto; color: var(--ink); }
/* Todo el bloque de texto se achico un escalon (2026-08-28, pedido de Enzo: "disminuir la letra
y el boton para que la imagen se vea mas grande") — la foto de arriba subio de 190 a 235px de
alto y esta es la mitad que le hizo lugar. */
.hero-copy .eyebrow {
display: inline-flex; align-items: center; gap: 7px;
font-size: 9.5px; font-weight: 800; letter-spacing: .16em;
background: var(--brand-wash); color: var(--brand-deep);
border: 1px solid rgba(53,195,240,.45);
padding: 5px 10px; border-radius: 999px;
}
/* max-height + overflow:hidden (no -webkit-line-clamp): reportado en vivo, el titulo
desaparecia por completo en vez de acortarse a 2 renglones — mismo texto confirmado presente
en el DOM, era un problema de render de esa combinacion especifica. Este clamp es menos
prolijo (corta seco, sin "...") pero nunca hace desaparecer el texto entero. */
.hero-copy h1 {
font-size: clamp(15px, 1.3vw, 18px); line-height: 1.2;
margin: var(--sp-2) 0 var(--sp-2); letter-spacing: -.03em; font-weight: 800;
max-height: 2.4em; overflow: hidden;
}
.hero-price { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.hero-price .now { font-size: 17px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hero-price .was { font-size: 12px; color: var(--ink-soft); text-decoration: line-through; }
.hero-price .off {
font-size: 10px; font-weight: 800; background: var(--brand); color: var(--ink);
align-self: center; padding: 3px 8px; border-radius: 999px;
}
/* Boton mas chico que el .btn de base (que es compartido por todo el sitio, no se toca) — solo
en esta mitad de la tarjeta, para que le gane espacio a la foto. */
.hero-cta .btn { width: 100%; padding: 11px 20px; font-size: 13.5px; }
.btn.on-dark { background: var(--ink); color: #fff; }
.btn.on-dark:hover { background: #1b2331; }
.btn.ghost-dark { background: #fff; color: var(--ink); border: 1.5px solid var(--line); }
.btn.ghost-dark:hover { border-color: var(--ink); background: var(--bg-soft); color: var(--ink); }
.hero-slide.is-active .hero-copy > * { animation: heroRise .5s cubic-bezier(.22,.8,.28,1) both; }
.hero-slide.is-active .hero-copy > *:nth-child(1) { animation-delay: .04s; }
.hero-slide.is-active .hero-copy > *:nth-child(2) { animation-delay: .09s; }
.hero-slide.is-active .hero-copy > *:nth-child(3) { animation-delay: .14s; }
.hero-slide.is-active .hero-copy > *:nth-child(4) { animation-delay: .19s; }
@keyframes heroFloat { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroRise { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }
/* Fila de controles: SIEMPRE pegada abajo del contenido (flex:0, normal flow), nunca flotando a
una distancia fija del piso de la tarjeta. */
.hero-panel-footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-4); }
.hero-dots { display: flex; gap: 8px; }
.hero-dot {
width: 26px; height: 4px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
background: rgba(11,18,32,.16); transition: background .2s, width .25s;
}
.hero-dot.is-active { background: var(--brand); width: 38px; }
.hero-arrows { display: flex; gap: var(--sp-2); flex: 0 0 auto; }
.hero-arrow {
width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
background: #fff; border: 1px solid var(--line);
color: var(--ink); display: grid; place-items: center; transition: background .18s, border-color .18s;
}
.hero-arrow:hover { background: var(--brand-wash); border-color: var(--brand); }
/* ── Mitad del taller ─────────────────────────────────────────────────────── */
/* Segunda vuelta de diseño (mismo dia, feedback real: "tan vacio, tan feo, para eso una fija").
Tres cosas lo llenan sin necesitar una foto real: un icono grande de fondo (marca de agua,
apenas visible), un icono propio en circulo por cada punto (mismo peso visual que la foto del
otro lado), y controles en la MISMA fila que el CTA en vez de apilados con aire de mas. */
.hero-panel-taller { background: linear-gradient(165deg, rgba(53,195,240,.10), rgba(53,195,240,.02) 60%); }
/* Bug real encontrado en vivo (midiendo con getBoundingClientRect): con la misma especificidad
que ".hero-panel-taller > *" de abajo, esa regla ganaba por orden de aparicion y le pisaba el
position:absolute a esta marca de agua — pasaba a ser un item de flex mas, de 220px, empujando
TODO el resto del panel para abajo (eyebrow, icono, texto y controles quedaban superpuestos
entre si en vez de apilados). Selector mas especifico para que esto nunca dependa del orden. */
.hero-panel-taller .taller-watermark {
position: absolute; z-index: 0; right: -34px; bottom: -34px;
width: 220px; height: 220px; color: var(--brand-deep); opacity: .07;
pointer-events: none;
}
.hero-panel-taller > * { position: relative; z-index: 1; }
.hero-panel-taller .eyebrow {
display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
font-size: 10.5px; font-weight: 800; letter-spacing: .16em;
background: #fff; color: var(--brand-deep);
border: 1px solid rgba(53,195,240,.45);
padding: 6px 12px; border-radius: 999px; margin: 0 0 var(--sp-3); align-self: flex-start;
}
.hero-slide.hero-slide-taller {
position: absolute; inset: 0;
display: flex; flex-direction: column; justify-content: center;
opacity: 0; visibility: hidden;
transition: opacity .55s ease-out, visibility .55s;
}
/* Especificidad a proposito mas alta que .hero-slide.is-active (0-2-0) — sin el
.hero-slide.hero-slide-taller.* completo, la regla generica del carrusel de productos le gana
por orden de aparicion y la mitad del taller nunca se ve. */
.hero-slide.hero-slide-taller.is-active { opacity: 1; visibility: visible; }
.taller-icon {
width: 52px; height: 52px; border-radius: 16px; flex: 0 0 auto;
background: var(--ink); color: #fff;
display: grid; place-items: center; margin-bottom: var(--sp-4);
}
.hero-slide.hero-slide-taller h2 {
font-size: clamp(21px, 1.9vw, 27px); line-height: 1.14; letter-spacing: -.03em; font-weight: 800;
margin: 0 0 var(--sp-2); color: var(--ink);
}
.hero-slide.hero-slide-taller.is-active .taller-icon,
.hero-slide.hero-slide-taller.is-active h2,
.hero-slide.hero-slide-taller.is-active p { animation: heroRise .5s cubic-bezier(.22,.8,.28,1) both; }
.hero-slide.hero-slide-taller.is-active h2 { animation-delay: .05s; }
.hero-slide.hero-slide-taller.is-active p { animation-delay: .1s; }
.hero-slide.hero-slide-taller p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; margin: 0; max-width: 30ch; }
.hero-panel-taller .hero-panel-footer .btn { width: auto; flex: 0 0 auto; padding: 12px 22px; }
/* Con las flechas sumadas (2026-08-28) la fila pasa de 2 a 3 elementos — en mobile angosto
(tarjeta apilada a ancho de telefono) ya no entran los tres en una linea y el boton quedaba
cortado a la mitad. wrap sin punto de quiebre fijo: solo baja de linea cuando de verdad no
entra, a cualquier ancho, en vez de adivinar un numero de pixeles. */
.hero-panel-taller .hero-panel-footer { flex-wrap: wrap; row-gap: var(--sp-3); }
/* Mitad de productos: la misma composicion "foto arriba, texto abajo" a CUALQUIER ancho — la
tarjeta partida ya deja cada mitad angosta de por si, no hace falta una version aparte para
mobile (ver @media mas abajo, que ahora solo apila las dos mitades una sobre la otra). */
.btn {
display: inline-flex; align-items: center; justify-content: center;
background: var(--ink); color: #fff;
padding: 14px 28px; border-radius: 999px;
font-weight: 700; font-size: 15px; border: 0; cursor: pointer;
transition: transform .15s ease-out, background .15s;
}
/* El fondo oscuro solo para los botones que YA son oscuros. Antes .btn:hover se lo aplicaba
tambien a los blancos (.ghost, .ghost-dark) y quedaba texto oscuro sobre fondo oscuro. */
.btn:hover { transform: translateY(-1px); }
.btn:not(.ghost):not(.ghost-dark):hover { background: #1b2331; }
.btn:active { transform: translateY(0); }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn.ghost:hover { border-color: var(--ink); background: transparent; }
/* ── Grilla de productos ────────────────────────────────────────────────────── */
.grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
column-gap: var(--sp-6); row-gap: 0;
}
/* La separacion entre filas de tarjetas la da la ultima pieza, porque row-gap tiene que quedar
en cero para no inflar el interior de cada tarjeta. */
.grid .card .price-transfer { margin-bottom: var(--sp-10, 40px); }
/* Las tarjetas de una misma fila COMPARTEN sus filas internas (subgrid). Sin esto cada tarjeta
se mide sola: un nombre de producto de 4 renglones empuja hacia abajo el precio, las cuotas y
el precio de transferencia SOLO en esa tarjeta, y la fila queda escalonada — se ve desprolijo
incluso sin buscarlo.
Requiere que la tarjeta emita SIEMPRE las mismas 6 piezas (ver cardHtml en tienda.js): con
cantidades distintas de hijos no habria filas que compartir. */
.card {
display: grid;
grid-row: span 6;
grid-template-rows: subgrid;
align-content: start;
}
/* Respaldo para navegadores viejos sin subgrid: al menos el titulo mide siempre lo mismo, que
es de donde salia casi todo el desfasaje. */
@supports not (grid-template-rows: subgrid) {
.card { grid-row: auto; grid-template-rows: auto auto auto auto auto auto; }
.card-title {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
}
.card-media {
position: relative; background: var(--bg-soft); border-radius: var(--radius);
aspect-ratio: 1 / 1; overflow: hidden; margin-bottom: 10px;
border: 1px solid transparent; transition: border-color .18s, box-shadow .18s;
}
.card:hover .card-media { border-color: var(--brand); box-shadow: var(--shadow); }
.card-media img {
width: 100%; height: 100%; object-fit: contain; padding: var(--sp-3);
position: relative; z-index: var(--z-media);
transition: transform .28s ease-out;
}
.card:hover .card-media img { transform: scale(1.05); }
/* El z-index NO es decorativo: el `transform` de la foto crea un contexto de apilado propio
y sin esto la foto se dibuja ENCIMA del cartel, haciendo desaparecer el "20% OFF" justo
al pasar el mouse (bug real reportado por el dueño 2026-08-06). */
.tag {
position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: var(--z-badge);
background: var(--brand); color: var(--ink);
font-size: 11.5px; font-weight: 800; letter-spacing: .03em;
padding: 5px 10px; border-radius: 999px;
}
.tag.out { background: var(--ink); color: #fff; }
/* Carril de los carteles de arriba (2026-08-21). Antes cada uno era un position:absolute suelto:
el de transferencia anclado a la izquierda y el de envío gratis a la derecha, los dos al mismo
`top`. Con la tarjeta angosta —celular, grilla de 2 columnas— se superponían SIEMPRE ("22% tra"
tapado por "Envío gratis", reportado por Enzo con captura). Un solo carril flex de borde a borde
lo resuelve a cualquier ancho, sin números mágicos: entran los dos en un renglón si hay lugar y
si no, el segundo baja al de abajo. pointer-events:none para que el carril (que ahora cubre todo
el ancho de la foto) no se coma el click sobre la tarjeta. */
.card-tags {
position: absolute; top: var(--sp-3); left: var(--sp-3); right: var(--sp-3);
z-index: var(--z-badge);
display: flex; flex-wrap: wrap; gap: 6px;
justify-content: space-between; align-items: flex-start;
pointer-events: none;
}
/* Adentro del carril mandan flex y el gap, no las coordenadas. */
.card-tags .tag { position: static; }
/* Mas discreto a propósito (fondo blanco, no celeste): es informativo, no una oferta como el
resto de los tags — no tiene que gritar igual. */
.tag.ship-free { background: var(--bg); color: var(--ink); border: 1px solid var(--line); font-weight: 700; }
/* Agregar rápido (2026-08-20, pedido de Enzo) — flotante sobre la esquina de la foto. Oculto por
default en desktop y aparece con el hover de la tarjeta (mismo gesto que ya revela el zoom de
la foto); en táctil no hay hover, así que ahí queda siempre visible — sin eso no habría forma
de encontrarlo con el dedo. */
.card-quick-add {
position: absolute; right: var(--sp-3); bottom: var(--sp-3); z-index: var(--z-badge);
width: 34px; height: 34px; border-radius: 50%; border: none;
background: var(--ink); color: #fff; display: grid; place-items: center; cursor: pointer;
box-shadow: 0 4px 10px rgba(11,18,32,.22);
opacity: 0; transform: scale(.85);
transition: opacity .15s ease-out, transform .15s ease-out, background .15s;
}
.card:hover .card-quick-add, .card:focus-within .card-quick-add { opacity: 1; transform: scale(1); }
.card-quick-add:hover { background: var(--brand-deep); }
@media (hover: none) { .card-quick-add { opacity: 1; transform: none; } }
/* Popover de talle/color al agregar rápido — position:fixed y anclado por JS (posicionarQuickAdd-
Popover en tienda.js): .card-media tiene overflow:hidden y .riel tiene su propio scroll, un
position:absolute adentro de cualquiera de los dos quedaria recortado o invisible. */
.quick-add-pop {
position: fixed; z-index: var(--z-quickadd);
background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
box-shadow: var(--shadow); padding: var(--sp-3);
}
.quick-add-loading { margin: 0; padding: var(--sp-2) 0; font-size: 13px; color: var(--ink-soft); text-align: center; }
.quick-add-close {
position: absolute; top: 2px; right: 6px; width: 26px; height: 26px;
border: none; background: none; font-size: 20px; line-height: 1; color: var(--ink-soft); cursor: pointer;
}
.quick-add-group { margin: 0 22px var(--sp-2) 0; }
.quick-add-group:first-child { margin-top: 2px; }
.quick-add-group-label { font-size: 11.5px; font-weight: 800; color: var(--ink-soft); letter-spacing: .03em; text-transform: uppercase; margin: 0 0 6px; }
.quick-add-values { display: flex; flex-wrap: wrap; gap: 6px; }
.quick-add-variant-btn {
padding: 4px 11px; border-radius: 999px; border: 1.5px solid var(--line);
background: var(--bg); font-size: 12.5px; font-weight: 600; cursor: pointer;
transition: border-color .15s, background .15s;
}
.quick-add-variant-btn.is-selected { border-color: var(--brand); background: var(--brand-wash); }
.quick-add-variant-btn:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.quick-add-confirm { width: 100%; margin-top: 4px; }
.card-brand { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--ink-soft); text-transform: uppercase; margin: 0; }
.card-title {
font-size: 15px; font-weight: 600; line-height: 1.35; margin: 4px 0 0;
/* Dos renglones fijos. El nombre completo esta en la ficha del producto; aca lo unico que
lograba un titulo de cuatro renglones era estirar TODAS las tarjetas de la fila, porque
comparten alto. */
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.price-list { font-size: 13px; color: var(--ink-soft); text-decoration: line-through; }
/* El precio grande es el de lista (lo que paga la mayoria, con tarjeta). El de transferencia
va debajo en celeste: sigue siendo un argumento de venta fuerte, pero ya no se confunde
con "el precio" ni contradice lo que muestra Tiendanube para el mismo producto. */
.price-transfer { font-size: 13px; font-weight: 800; color: var(--brand-deep); margin: 4px 0 0; }
/* Vacias no ocupan: si ningun producto de la fila tiene marca, cuotas o transferencia, esa fila
del subgrid queda en cero y no deja un hueco fantasma. */
.card-brand:empty, .price-inst:empty, .price-transfer:empty { margin: 0; }
.price-transfer span { font-weight: 600; color: var(--ink-soft); }
.price-transfer-box {
margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
background: var(--brand-wash); border: 1px solid rgba(53,195,240,.45);
border-radius: 12px; font-size: 14.5px; color: var(--ink);
display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}
.price-transfer-box strong { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.price-transfer-box span {
margin-left: auto; background: var(--brand); color: var(--ink);
font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.price-main { font-size: 20px; font-weight: 800; letter-spacing: -.025em; font-variant-numeric: tabular-nums; margin: 10px 0 0; }
.price-note { font-size: 12.5px; color: var(--ok); font-weight: 700; margin-top: 3px; }
.price-inst { font-size: 12.5px; color: var(--ink-soft); margin: 3px 0 0; }
/* Oferta real del producto (price.onSale) — distinta del descuento por transferencia, que sigue
con su propio bloque azul (.price-transfer-box) mas abajo. .price-was queda inline ( en la
tarjeta) o en bloque (
en la ficha) segun donde se use, mismo criterio de una sola clase que
se adapta al tag que la usa. */
.price-was { font-size: 13px; color: var(--ink-soft); font-weight: 600; text-decoration: line-through; }
.detail .price-was { font-size: 16px; margin: 10px 0 0; }
.price-sale-badge {
font-size: 11px; font-weight: 800; background: #b3261e; color: #fff;
padding: 2px 8px; border-radius: 999px; vertical-align: middle; white-space: nowrap;
}
/* ── Sucursales ───────────────────────────────────────────────────────────────
Una tarjeta grande por sucursal, con el mapa ocupando la mitad. Alternan de lado para que
la pagina tenga ritmo y no se lea como una planilla. El mapa NO es decoracion: es lo que
la persona vino a buscar, asi que pesa lo mismo que el texto. */
.sucursales-head { max-width: 640px; margin-bottom: var(--sp-12); }
.sucursales-head h1 {
font-size: clamp(28px, 3.4vw, 44px); line-height: 1.06; letter-spacing: -.035em;
margin: 0 0 var(--sp-3);
}
.sucursales-head p { font-size: 17px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.sucursales { display: grid; gap: var(--sp-8); }
.sucursal {
display: grid; grid-template-columns: 1fr 1.1fr;
background: #fff; border: 1px solid var(--line); border-radius: 22px;
overflow: hidden;
transition: border-color .22s, box-shadow .22s;
}
.sucursal:hover { border-color: rgba(53,195,240,.5); box-shadow: var(--shadow); }
/* La segunda invierte el orden: el mapa queda del lado de adentro en las dos. */
.sucursal.is-invertida .sucursal-info { order: 2; }
.sucursal.is-invertida .sucursal-mapa { order: 1; }
.sucursal-info { padding: var(--sp-12); display: grid; align-content: start; gap: var(--sp-3); }
.sucursal-info .eyebrow {
justify-self: start;
display: inline-flex; align-items: center;
font-size: 11px; font-weight: 800; letter-spacing: .17em;
background: var(--brand-wash); color: var(--brand-deep);
border: 1px solid rgba(53,195,240,.45);
padding: 6px 13px; border-radius: 999px; margin: 0;
}
.sucursal-info h2 { font-size: 34px; letter-spacing: -.035em; margin: var(--sp-2) 0 0; }
/* Reseñas de Google por sucursal (2026-08-25) — un link si hay ficha real, texto simple si no.
:any-link cubre las dos etiquetas ( o