/* Neumáticos Rocha — logo original del negocio, negro y plata.
   Lenguaje gráfico propio, distinto del de Ruedas Diagonal: fondo claro, etiquetas de color como
   las que van pegadas en la banda de rodamiento, tacos de cubierta como borde, esquinas redondas.
   La medida del neumático es la protagonista visual (no hay fotos de producto en Don Gestión). */
:root {
    /* paleta: negro del logo original + plata */
    --petroleo: #0F0F10;
    --noche: #050505;
    --apoyo: #3B3E42;
    --acento: #D6D9DC;
    --acento-fuerte: #8F959B;
    --acento-suave: #EEF0F1;
    --sobre-suave: #1D2023;
    --sobre-acento: #0B0B0C;
    --titulo: var(--petroleo);
    --superficie: #FFFFFF;
    --slab: #0B0B0C;
    --logo-color: #0B0B0C;
    --boton-fondo: #0B0B0C;
    --boton-texto: #FFFFFF;
    --boton-sombra: #7A8087;
    --boton2-fondo: #3B3E42;
    --papel: #F3F4F5;
    --tinta: #101112;
    --gris: #464B50;
    --gris-claro: #6F757B;
    --linea: #D9DCDF;
    --celeste: #C9CED3;
    --alerta: #b42318;
    --display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
    --texto: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --huella: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 18'%3E%3Cpath fill='%230F0F10' d='M0 18L8 0H20L12 18ZM20 18L28 0H40L32 18Z'/%3E%3C/svg%3E");
}
/* botones sobre fondos oscuros: blancos o del color de acento */
.taller, .pie { --boton-fondo: #fff; --boton-texto: #0B0B0C; --boton-sombra: rgba(0,0,0,.35); }
.buscador-medida { --boton-fondo: var(--acento); --boton-texto: var(--sobre-acento); --boton-sombra: var(--acento-fuerte); }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--texto); font-size: 16px; line-height: 1.6; color: var(--tinta); background: var(--papel); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--titulo); }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.08; margin: 0; color: var(--titulo); letter-spacing: -.02em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--apoyo); outline-offset: 2px; }
.pie :focus-visible, .franja-promo :focus-visible, .buscador-medida :focus-visible { outline-color: var(--acento); }
.saltar { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 14px; z-index: 50; }
.saltar:focus { left: 8px; }
.contenedor { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.contenedor-angosto { max-width: 860px; }
[hidden] { display: none !important; }

/* ---------- botones (píldora, ámbar con texto negro) ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 24px; border-radius: 999px; border: 2px solid var(--boton-fondo); background: var(--boton-fondo); color: var(--boton-texto); font: 700 15px/1 var(--texto); text-decoration: none; cursor: pointer; box-shadow: 0 3px 0 var(--boton-sombra); transition: transform .12s, box-shadow .12s, background .12s; }
.boton:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 4px 0 var(--boton-sombra); }
.boton:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--boton-sombra); }
.boton-grande { min-height: 56px; padding: 0 32px; font-size: 16px; }
.boton-ancho { width: 100%; }
.boton-azul { background: var(--boton2-fondo); border-color: var(--boton2-fondo); color: #fff; box-shadow: 0 3px 0 var(--noche); }
.boton-azul:hover { background: var(--apoyo); border-color: var(--apoyo); filter: none; box-shadow: 0 4px 0 var(--noche); }
.boton-claro { background: transparent; border-color: #fff; color: #fff; box-shadow: none; }
.boton-claro:hover { background: rgba(255,255,255,.14); border-color: #fff; box-shadow: none; }

/* ---------- cabecera ---------- */
.franja-promo { background: var(--acento); color: var(--sobre-acento); font-size: 13.5px; font-weight: 600; }
.franja-promo .contenedor { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 28px; padding-top: 7px; padding-bottom: 7px; text-align: center; }
.franja-promo .solo-cel { display: none; }
.cabecera { background: var(--superficie); position: sticky; top: 0; z-index: 20; box-shadow: 0 1px 0 var(--linea); }
.cabecera-fila { display: flex; align-items: center; gap: 28px; padding-top: 12px; padding-bottom: 12px; }
.logo-enlace { display: block; line-height: 0; flex: none; }
.logo { display: block; height: 52px; aspect-ratio: 636 / 186; background: var(--logo-color); -webkit-mask: url("img/logo-rocha-mascara.png") center / contain no-repeat; mask: url("img/logo-rocha-mascara.png") center / contain no-repeat; }
.logo-claro .logo { background: #fff; }
.navegacion { flex: 1; }
.navegacion-fila { display: flex; gap: 2px; justify-content: flex-end; flex-wrap: wrap; }
.navegacion a { padding: 9px 15px; font-weight: 600; font-size: 15px; color: var(--gris); text-decoration: none; border-radius: 999px; white-space: nowrap; }
.navegacion a:hover { background: var(--papel); color: var(--titulo); }
.navegacion a[aria-current="page"] { background: var(--petroleo); color: #fff; }
.cabecera-acciones { display: flex; align-items: center; gap: 16px; flex: none; }
.cabecera-tel { font-weight: 700; color: var(--titulo); text-decoration: none; white-space: nowrap; font-size: 15px; }
.cabecera-acciones .boton { min-height: 42px; padding: 0 20px; }

/* ---------- portada ---------- */
.portada { position: relative; overflow: hidden; padding: 56px 0 72px; background:
    radial-gradient(circle at 96% 8%, var(--acento-suave) 0 190px, transparent 191px), var(--papel); }
.portada-grilla { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 56px; align-items: center; position: relative; z-index: 1; }
.portada h1 { font-size: clamp(2.5rem, 5.4vw, 4.4rem); line-height: .98; letter-spacing: -.035em; margin-bottom: 20px; max-width: 14ch; }
.portada-bajada { color: var(--gris); font-size: 1.15rem; max-width: 44ch; margin-bottom: 28px; }
.portada-ayuda { margin: 18px 0 0; font-size: 14.5px; }
.portada-foto { margin: 0; position: relative; justify-self: center; width: min(100%, 440px); }
.portada-foto::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; background: var(--acento); border-radius: 220px 220px 28px 28px; }
.portada-foto img { position: relative; width: 100%; height: 520px; object-fit: cover; border-radius: 220px 220px 28px 28px; border: 6px solid var(--superficie); }
.portada-foto figcaption { position: absolute; left: -14px; bottom: 26px; z-index: 2; background: var(--petroleo); color: #dcebf8; font-size: 13px; line-height: 1.35; padding: 10px 18px; border-radius: 0 999px 999px 0; }
.portada-foto figcaption b { display: block; color: #fff; font-size: 15px; }
.sello { position: absolute; z-index: 3; top: 26px; left: -52px; width: 148px; height: 148px; border-radius: 50%; background: var(--petroleo); color: #fff; display: grid; place-content: center; text-align: center; transform: rotate(-10deg); box-shadow: 0 0 0 5px var(--superficie);
    animation: sellar .55s cubic-bezier(.2,1.4,.4,1) .25s both; }
.sello::before { content: ""; position: absolute; inset: 7px; border: 2px dashed rgba(255,255,255,.55); border-radius: 50%; }
.sello b { display: block; font: 800 2.7rem/.9 var(--display); color: var(--celeste); letter-spacing: -.04em; }
.sello span { display: block; font-size: 11.5px; line-height: 1.2; font-weight: 600; margin-top: 4px; padding: 0 20px; }
@keyframes sellar { from { transform: rotate(-30deg) scale(1.7); opacity: 0; } to { transform: rotate(-10deg) scale(1); opacity: 1; } }

/* buscador de medida / vehículo: el costado de una cubierta */
.buscador-medida { position: relative; isolation: isolate; overflow: hidden; background: var(--slab); color: #fff; border-radius: 28px; padding: 8px 26px 26px; max-width: 580px; }
.buscador-medida::before { content: ""; position: absolute; z-index: -1; inset: 0; background: repeating-radial-gradient(circle at 112% 130%, transparent 0 22px, rgba(255,255,255,.05) 22px 25px); }
.pestanas { display: flex; gap: 8px; padding: 18px 0 12px; }
.pestanas button { background: transparent; border: 1.5px solid rgba(255,255,255,.28); border-radius: 999px; padding: 8px 18px; font: 600 14px var(--texto); color: #d6e2ec; cursor: pointer; }
.pestanas button[aria-selected="true"] { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.ayuda-medida { font-size: 14px; color: #b9c8d4; margin-bottom: 12px; }
.ayuda-medida b { color: #fff; }
.medida-campos { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 6px; align-items: end; margin-bottom: 20px; }
.medida-campos i { font: normal 800 2rem/58px var(--display); color: var(--acento); }
.buscador-medida label span { display: block; font-size: 12.5px; font-weight: 600; color: #b9c8d4; margin-bottom: 2px; }
.buscador-medida select { width: 100%; height: 58px; border: 0; border-bottom: 3px solid var(--acento); border-radius: 8px 8px 0 0; background: rgba(255,255,255,.09); font: 800 1.7rem var(--display); color: #fff; padding: 0 6px; letter-spacing: -.02em; }
.buscador-medida select option { color: #0B0B0C; background: #fff; font: 600 16px var(--texto); }
.vehiculo-campos select { font: 600 15px var(--texto); letter-spacing: 0; padding: 0 12px; height: 50px; }
.vehiculo-campos label { display: block; margin-bottom: 12px; }
.buscador-medida select:disabled { opacity: .5; }
.buscador-medida .boton { width: 100%; }

/* ---------- formas de pago: cuatro etiquetas ---------- */
.pagos { padding: 0 0 20px; margin-top: -30px; position: relative; z-index: 2; }
.pagos-fila { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.etiqueta-pago { position: relative; background: var(--superficie); border-radius: 22px 22px 22px 6px; padding: 20px 22px 18px; border: 2px solid var(--tinta); }
.etiqueta-pago b { display: block; font: 800 2.5rem/1 var(--display); color: var(--titulo); letter-spacing: -.04em; }
.etiqueta-pago b small { font-size: 1.1rem; letter-spacing: 0; margin-left: 4px; }
.etiqueta-pago span { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.35; color: var(--gris); }
.etiqueta-pago.destacada { background: var(--acento); }
.etiqueta-pago.destacada b { color: var(--sobre-acento); }
.etiqueta-pago.destacada span { color: var(--sobre-suave); }

/* ---------- secciones ---------- */
.seccion { padding: 64px 0; }
.seccion-papel { background: var(--superficie); }
.seccion h2, .taller h2, .ubicacion h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
.seccion-cabecera { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.enlace-flecha { font-weight: 700; color: var(--titulo); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.marcas-linea { margin: 28px 0 0; color: var(--gris); font-size: 15px; }
.grilla-productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 22px; }

/* ---------- tarjeta: etiqueta de banda de rodamiento ---------- */
.tarjeta { background: var(--superficie); border: 2px solid var(--linea); border-radius: 22px 22px 22px 6px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s, transform .15s; }
.tarjeta:hover { border-color: var(--tinta); transform: translateY(-3px); }
.lateral { display: block; position: relative; overflow: hidden; background: var(--acento); color: var(--sobre-acento); padding: 16px 18px 54px; text-decoration: none; min-height: 172px; isolation: isolate; }
.lateral::before { content: ""; position: absolute; z-index: -1; right: -34px; top: -34px; width: 120px; height: 120px; border-radius: 50%; border: 18px solid rgba(255,255,255,.28); }
.lateral::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: var(--huella) repeat-x; background-size: 26px 10px; }
.lateral-marca { display: inline-block; font-weight: 700; font-size: 13px; background: #0B0B0C; color: #fff; border-radius: 999px; padding: 3px 12px; }
.lateral-medida { display: block; font: 800 clamp(1.9rem, 3vw, 2.3rem)/1 var(--display); letter-spacing: -.04em; margin: 16px 0 6px; white-space: nowrap; }
.lateral-medida b { font-weight: 800; }
.lateral-rodado { font-size: 2.8rem; }
.lateral-modelo { display: block; font-size: 14px; font-weight: 600; color: var(--sobre-acento); opacity: .88; padding-right: 8px; }
.aviso { position: absolute; left: 18px; bottom: 20px; display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.4; }
.aviso-juego { background: var(--superficie); color: var(--titulo); }
.aviso-par { background: transparent; color: var(--sobre-acento); border: 1.5px solid var(--sobre-acento); }
.aviso-ultima { background: var(--alerta); color: #fff; }
.aviso-sin { background: transparent; color: var(--sobre-acento); border: 1.5px solid var(--sobre-acento); opacity: .8; }
.tarjeta-datos { padding: 16px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.tarjeta h3 { font: 600 15px/1.35 var(--texto); letter-spacing: 0; margin-bottom: 10px; min-height: 2.7em; color: var(--tinta); }
.tarjeta h3 a { color: inherit; text-decoration: none; }
.tarjeta h3 a:hover { text-decoration: underline; }
.precio-contado { margin: 0; font: 800 1.9rem/1.05 var(--display); letter-spacing: -.03em; color: var(--titulo); }
.precio-contado small { display: block; font: 600 12.5px var(--texto); letter-spacing: 0; color: var(--gris); margin-top: 3px; }
.precio-tarjeta { margin: 10px 0 2px; font-size: 14.5px; color: var(--tinta); font-weight: 600; }
.precio-cuotas { margin: 0 0 14px; font-size: 12.5px; color: var(--gris-claro); line-height: 1.35; }
.tarjeta .boton { margin-top: auto; width: 100%; }

/* ---------- taller: la pizarra de precios ---------- */
.taller { padding: 70px 0; background: var(--petroleo); position: relative; }
.taller-grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.taller h2 { color: #fff; margin-bottom: 14px; }
.taller-texto > p { color: #cfe0ee; max-width: 50ch; }
.pizarra { --titulo: var(--sobre-suave); background: var(--acento-suave); color: #0B0B0C; border-radius: 26px; padding: 28px 30px 26px; transform: rotate(-1.2deg); box-shadow: 10px 10px 0 rgba(0,0,0,.28); margin: 24px 0 30px; max-width: 520px; position: relative; }
.pizarra::before { content: "Precios del taller"; display: block; font: 800 1.15rem var(--display); letter-spacing: -.01em; color: var(--titulo); margin-bottom: 8px; }
.taller-precios { list-style: none; margin: 0; padding: 0; }
.taller-precios li { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; font-weight: 600; }
.taller-precios li::after { content: ""; order: 2; flex: 1; border-bottom: 2px dotted rgba(14,24,34,.45); transform: translateY(-4px); }
.taller-precios li span { order: 1; }
.taller-precios li b { order: 3; font: 800 1.15rem var(--display); white-space: nowrap; color: var(--titulo); }
.taller-foto { margin: 0; position: relative; justify-self: center; width: min(100%, 420px); }
.taller-foto::before { content: ""; position: absolute; inset: -18px 18px 18px -18px; border: 3px solid var(--acento); border-radius: 28px; }
.taller-foto img { position: relative; width: 100%; height: 470px; object-fit: cover; object-position: center 30%; border-radius: 28px; }
.botonera { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.botonera-arriba { margin: 0 0 28px; }

/* ---------- desde 1980 / ubicación ---------- */
.historia { position: relative; overflow: hidden; }
.historia-numero { position: absolute; right: -10px; top: -26px; font: 800 clamp(8rem, 24vw, 19rem)/1 var(--display); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 3px var(--linea); pointer-events: none; user-select: none; }
.historia-cuerpo { position: relative; max-width: 640px; }
.razones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 34px; position: relative; }
.razones article { background: var(--superficie); border-left: 6px solid var(--acento); border-radius: 6px 22px 22px 6px; padding: 20px 22px; }
.razones h3 { font-size: 1.3rem; margin-bottom: 8px; }
.razones p { color: var(--gris); margin: 0; }
.razones-cierre { margin: 34px 0 0; position: relative; }
.ubicacion { padding: 70px 0; background: var(--superficie); }
.ubicacion-grilla { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.ubicacion-foto { margin: 0; position: relative; }
.ubicacion-foto::before { content: ""; position: absolute; inset: 20px -20px -20px 20px; background: var(--acento-suave); border-radius: 28px; }
.ubicacion-foto img { position: relative; width: 100%; height: 400px; object-fit: cover; border-radius: 28px; }
.ubicacion h2 { margin-bottom: 14px; }
.ubicacion-texto p { color: var(--gris); }

/* ---------- catálogo ---------- */
.catalogo { padding: 40px 0 90px; }
.catalogo-cabecera { margin-bottom: 24px; }
.catalogo h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin-bottom: 10px; }
.catalogo-cabecera p { color: var(--gris); max-width: 70ch; margin: 0; }
.filtros { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; padding: 18px 20px; background: var(--superficie); border-radius: 22px; border: 2px solid var(--linea); margin-bottom: 24px; }
.filtros label span { display: block; font-size: 13px; font-weight: 600; color: var(--gris-claro); margin-bottom: 4px; }
.filtros select, .filtros input[type="search"] { height: 46px; min-width: 170px; border: 2px solid var(--linea); border-radius: 999px; background: var(--papel); padding: 0 16px; font: 600 15px var(--texto); color: var(--tinta); }
.filtros input[type="search"] { min-width: 200px; }
.filtros .boton { min-height: 46px; padding: 0 22px; }
.filtros-limpiar { font-weight: 600; padding-bottom: 12px; }
.resultado { color: var(--gris); margin-bottom: 20px; }
.vacio { text-align: center; padding: 52px 20px; background: var(--superficie); border: 2px dashed var(--linea); border-radius: 26px; }
.vacio h1 { margin-bottom: 12px; }
.vacio p { color: var(--gris); }
.vacio .botonera { justify-content: center; }
.barra-fija { display: none; }
.paginado { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 36px; }
.paginado a { min-width: 46px; height: 46px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--linea); background: var(--superficie); border-radius: 999px; font-weight: 700; text-decoration: none; color: var(--titulo); }
.paginado a:hover { border-color: var(--petroleo); }
.paginado a[aria-current="page"] { background: var(--petroleo); border-color: var(--petroleo); color: #fff; }

/* ---------- ficha de producto ---------- */
.ficha { padding: 40px 0 90px; }
.ficha-grilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.ficha-lateral { position: relative; overflow: hidden; isolation: isolate; background: var(--acento); color: var(--sobre-acento); border-radius: 34px 34px 34px 8px; padding: 34px 34px 48px; min-height: 400px; display: flex; flex-direction: column; justify-content: center; }
.ficha-lateral::before { content: ""; position: absolute; z-index: -1; right: -70px; top: -70px; width: 260px; height: 260px; border-radius: 50%; border: 34px solid rgba(255,255,255,.28); }
.ficha-lateral::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: var(--huella) repeat-x; background-size: 40px 16px; }
.ficha-lateral .lateral-medida { font-size: clamp(2.6rem, 6.4vw, 4.6rem); margin: 22px 0 14px; }
.ficha-lateral .lateral-rodado { font-size: clamp(3.6rem, 8vw, 5.8rem); }
.ficha-lateral .lateral-marca { font-size: 16px; align-self: flex-start; padding: 4px 16px; }
.ficha-lateral .lateral-modelo { font-size: 18px; }
.ficha-ruta { font-size: 14px; color: var(--gris-claro); margin-bottom: 8px; }
.ficha-datos h1 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); margin-bottom: 14px; }
.ficha-disponibilidad { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ficha-disponibilidad small { color: var(--gris-claro); }
.ficha-disponibilidad .aviso { position: static; background: var(--petroleo); color: #fff; border: 0; }
.ficha-disponibilidad .aviso-par { background: transparent; color: var(--titulo); border: 1.5px solid var(--petroleo); }
.ficha-disponibilidad .aviso-ultima { background: var(--alerta); color: #fff; }
.ficha-precio { margin: 10px 0 2px; font: 800 clamp(2.4rem, 5vw, 3.4rem)/1.05 var(--display); letter-spacing: -.04em; color: var(--titulo); }
.ficha-precio small { font: 600 14px var(--texto); letter-spacing: 0; color: var(--gris); margin-left: 8px; }
.ficha-ahorro { color: var(--apoyo); font-weight: 700; margin-bottom: 6px; }
.ficha-tarjeta { color: var(--gris); margin-bottom: 8px; }
.ficha-tarjeta b { color: var(--tinta); }
.ficha-cuotas { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ficha-cuotas li { background: var(--acento-suave); color: var(--sobre-suave); font-size: 13.5px; font-weight: 600; padding: 5px 14px; border-radius: 999px; }
.cantidad { border: 2px solid var(--linea); border-radius: 22px; padding: 18px; margin-bottom: 18px; background: var(--superficie); }
.cantidad-titulo { display: block; font-weight: 700; margin-bottom: 10px; }
.cantidad-botones { display: flex; gap: 10px; flex-wrap: wrap; }
.cantidad-botones button { min-width: 86px; height: 52px; border: 2px solid var(--linea); border-radius: 999px; background: var(--papel); font: 800 1.3rem var(--display); color: var(--titulo); cursor: pointer; }
.cantidad-botones button small { font: 600 12px var(--texto); }
.cantidad-botones button[aria-pressed="true"] { background: var(--petroleo); border-color: var(--petroleo); color: #fff; }
.cantidad-total { margin: 12px 0 0; }
.ficha-beneficios { list-style: none; padding: 0; margin: 24px 0 14px; display: grid; gap: 9px; }
.ficha-beneficios li { padding-left: 28px; position: relative; color: var(--gris); }
.ficha-beneficios li::before { content: ""; position: absolute; left: 0; top: .45em; width: 16px; height: 16px; border-radius: 50%; background: var(--acento); }
.ficha-nota { font-size: 14px; color: var(--gris-claro); }
.ficha-similares { margin-top: 64px; }
.ficha-similares h2 { font-size: 1.8rem; margin-bottom: 22px; }

/* ---------- servicios / nosotros / contacto ---------- */
.tabla-servicios { margin-bottom: 30px; background: var(--superficie); border-radius: 22px; padding: 22px 26px 12px; border: 2px solid var(--linea); }
.tabla-servicios h2 { font-size: 1.5rem; margin-bottom: 6px; }
.tabla-servicios table { width: 100%; border-collapse: collapse; }
.tabla-servicios th, .tabla-servicios td { padding: 12px 4px; border-bottom: 2px dotted var(--linea); text-align: left; font-weight: 600; }
.tabla-servicios tr:last-child th, .tabla-servicios tr:last-child td { border-bottom: 0; }
.tabla-servicios td { text-align: right; font: 800 1.1rem var(--display); color: var(--titulo); white-space: nowrap; }
.nota-servicios { color: var(--gris); margin-top: 8px; }
.nosotros-grilla, .contacto-grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.nosotros-bajada { font-size: 1.2rem; color: var(--gris); }
.nosotros-grilla p { color: var(--gris); max-width: 56ch; }
.nosotros-foto { margin: 0; position: relative; }
.nosotros-foto::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; background: var(--acento); border-radius: 28px; }
.nosotros-foto img { position: relative; width: 100%; height: 100%; max-height: 440px; object-fit: cover; border-radius: 28px; }
.contacto-datos { display: grid; grid-template-columns: max-content 1fr; gap: 12px 24px; margin: 22px 0 28px; }
.contacto-datos dt { font-weight: 700; color: var(--gris-claro); }
.contacto-datos dd { margin: 0; }

/* ---------- pie: arranca con los tacos de la cubierta ---------- */
.huella { height: 18px; background: var(--huella) repeat-x; background-size: 40px 18px; margin-top: -1px; }
.pie { background: var(--petroleo); color: #cfe0ee; padding: 52px 0 0; font-size: 15px; }
.pie-grilla { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr; gap: 36px; padding-bottom: 38px; }
.pie-marca p { margin: 14px 0 10px; max-width: 34ch; }
.pie-redes a { margin-right: 16px; }
.pie a { color: #fff; }
.pie-col { display: flex; flex-direction: column; gap: 7px; }
.pie-col strong { color: var(--celeste); font: 800 1.05rem var(--display); margin-bottom: 6px; }
.pie-legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 22px; border-top: 1px solid rgba(255,255,255,.18); font-size: 13px; color: #a9c3d8; }
.pie .logo { height: 60px; }


/* ---------- celular ---------- */
@media (max-width: 1020px) {
    .cabecera-fila { flex-wrap: wrap; gap: 10px 16px; }
    .navegacion { order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; }
    .navegacion-fila { justify-content: flex-start; flex-wrap: nowrap; }
    .cabecera-acciones { margin-left: auto; }
}
@media (max-width: 960px) {
    .portada-grilla, .taller-grilla, .ubicacion-grilla, .ficha-grilla, .nosotros-grilla, .contacto-grilla { grid-template-columns: 1fr; gap: 36px; }
    .portada-foto { width: min(100%, 380px); }
    .portada-foto img { height: 400px; }
    .sello { left: -8px; top: -20px; width: 128px; height: 128px; }
    .sello b { font-size: 2.3rem; }
    .taller-foto img, .ubicacion-foto img { height: 300px; }
    .pagos-fila { grid-template-columns: 1fr 1fr; }
    .razones { grid-template-columns: 1fr; gap: 16px; }
    .pie-grilla { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    .franja-promo .solo-pc { display: none; }
    .franja-promo .solo-cel { display: inline; }
    .cabecera { position: static; }
    .cabecera-tel { display: none; }
    .logo { height: 44px; }
    .portada { padding: 32px 0 56px; background: radial-gradient(circle at 100% 0, var(--acento-suave) 0 120px, transparent 121px), var(--papel); }
    .portada h1 { max-width: none; }
    .ficha-precio small { display: block; margin: 4px 0 0; }
    .ficha-lateral { min-height: 210px; padding: 24px 24px 38px; }
    .ficha-lateral .lateral-medida { font-size: 2.4rem; margin: 12px 0 8px; }
    .ficha-lateral .lateral-rodado { font-size: 3.4rem; }
    .barra-fija .boton { padding: 0 18px; font-size: 14px; white-space: nowrap; }
    .buscador-medida { padding: 4px 16px 20px; border-radius: 22px; }
    .medida-campos { gap: 4px; }
    .medida-campos i { font-size: 1.5rem; }
    .buscador-medida select { font-size: 1.45rem; }
    .seccion, .taller, .ubicacion { padding: 46px 0; }
    .pagos { margin-top: -22px; }
    .etiqueta-pago { padding: 14px 15px; }
    .etiqueta-pago b { font-size: 1.9rem; }
    .etiqueta-pago span { font-size: 13px; }
    .grilla-productos { grid-template-columns: 1fr 1fr; gap: 12px; }
    .tarjeta-datos { padding: 12px; }
    .precio-contado { font-size: 1.45rem; }
    .lateral { padding: 12px 12px 46px; min-height: 150px; }
    .lateral-medida { font-size: 1.5rem; margin: 12px 0 6px; }
    .aviso { left: 12px; bottom: 16px; font-size: 11.5px; }
    .pizarra { transform: none; padding: 22px 20px; }
    .contacto-datos { grid-template-columns: 1fr; gap: 2px; }
    .contacto-datos dd { margin-bottom: 12px; }
    .pie-grilla { grid-template-columns: 1fr; }
    .barra-fija { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--superficie); border-top: 2px solid var(--acento); padding: 10px 16px; gap: 14px; align-items: center; justify-content: space-between; }
    .barra-fija strong { display: block; font: 800 1.2rem/1.1 var(--display); color: var(--titulo); }
    .barra-fija small { color: var(--gris-claro); font-size: 12.5px; }
    .catalogo, .ficha { padding-bottom: 110px; }
    .filtros select, .filtros input[type="search"] { min-width: 0; width: 100%; }
    .filtros label { flex: 1 1 100%; }
}
@media (max-width: 420px) {
    .grilla-productos { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .sello { animation: none; }
    html { scroll-behavior: auto; }
    .tarjeta, .boton { transition: none; }
}