normal no sufre. Ahora el círculo es este
contenedor (tamaño
fijo, overflow:hidden, border-radius:50%, SIN contenido de reemplazo) y
el ![]()
adentro solo llena ese espacio a 100%/100% — el contenedor no
tiene ninguna razón para no ser exactamente cuadrado. */
.tc-p-mega-circle-imgwrap {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: 120px;
height: 120px;
border-radius: 50%;
/* Fondo OPACO a propósito: "screen" (ver abajo) necesita un fondo sólido contra el cual mezclar. */
background: #1d1d1d;
padding: 24px;
overflow: hidden;
transition: background .15s ease;
}
/* Íconos de tipo de llanta: vienen como disco negro con el dibujo en blanco. "screen" sobre el fondo opaco del círculo hace que el
negro desaparezca y solo se vea el dibujo. Si el fondo fuera translúcido, al hacer hover (translateY crea otra capa) el negro volvía. */
.tc-p-mega-circle-imgwrap img { mix-blend-mode: screen; }
/* Logos de marca en una sola tinta clara: escala de grises, invertido (el fondo blanco queda negro y los trazos, claros) y
brightness alto para empujar todo lo que no es fondo a blanco; con "screen" el negro desaparece. Así todas las marcas se ven
iguales sin importar sus colores. Poco padding: el logo ocupa más del círculo sin agrandarlo. */
.tc-p-mega-circle-imgwrap--white { padding: 10px; }
.tc-p-mega-circle-imgwrap--white img { filter: grayscale(1) invert(1) brightness(6); }
.tc-p-mega-circle-imgwrap img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.tc-p-mega-circle-label { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; }
@media (max-width: 575.98px) {
/* El círculo bajó de 120px a 92px en móvil, pero el texto se quedaba en
18px (el mismo tamaño de escritorio) — en categorías con nombre
largo (ej. "Compacto / Sedán") no cabía y se veía cortado por el
overflow:hidden. 14px + menos padding lateral le dan más espacio real
al texto dentro del círculo más chico. */
.tc-p-mega-circle { width: 92px; height: 92px; font-size: 14px; padding: 0 8px; }
/* .tc-p-mega-circle (arriba) fuerza height:92px sobre CUALQUIER
elemento con esa clase — incluye a los botones --logo, que TAMBIÉN
la llevan. Antes .tc-p-mega-circle--logo solo ponía height:auto
fuera de este media query, así que aquí adentro esa regla volvía a
ganar (mismo peso, pero definida después) y aplastaba ícono+texto
en 92px con overflow:hidden — de ahí el ícono y la etiqueta
cortados. Repetirlo aquí, después, es lo que hace que gane de
verdad en móvil. */
.tc-p-mega-circle--logo { height: auto; }
.tc-p-mega-circle-imgwrap { width: 92px; height: 92px; padding: 16px; }
.tc-p-mega-circle-imgwrap--white { padding: 8px; }
}
.tc-p-mega-results { display: flex; flex-direction: column; }
#tcPMegaHomeResults:not(:empty) { margin-bottom: 32px; }
.tc-p-mega-row {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
border-bottom: 1px solid rgba(255,255,255,.25);
padding: 18px 4px;
font-size: 1.3rem; font-weight: 700;
color: #fff;
cursor: pointer;
transition: padding-left .15s ease;
}
@media (max-width: 575.98px) { .tc-p-mega-row { font-size: 1.05rem; padding: 14px 4px; } }
.tc-p-mega-row:hover { padding-left: 10px; }
/* Logo de la marca (vehículos) a la izquierda del nombre en las filas de la lista. */
.tc-p-mega-row-logo { width: 44px; height: 32px; margin-right: 14px; object-fit: contain; vertical-align: middle; background: #fff; border-radius: 6px; padding: 3px; }
/* Sugerencia de medida en el buscador rápido: lo que el cliente ya escribió
se ve blanco opaco (sólido), el resto — lo que falta para completar la
medida — en blanco translúcido, sin ninguna palabra explicativa
(ver renderSizeSuggestions/showHeights/showRims en search-mega.js). */
.tc-p-mega-row .tc-p-mega-typed { color: #fff; }
.tc-p-mega-row .tc-p-mega-suggest { color: rgba(255,255,255,.45); }
.tc-p-mega-spinner, .tc-p-mega-empty { padding: 40px 0; text-align: center; color: rgba(255,255,255,.8); }
.tc-p-mega-spinner .spinner-border { color: #fff; }
.tc-p-mega-loading {
position: fixed; inset: 0; z-index: 2;
display: none;
align-items: center; justify-content: center;
background: rgba(0,0,0,.25);
}
.tc-p-mega-loading.is-visible { display: flex; }
.tc-p-mega-loading img { width: 140px; height: 140px; object-fit: contain; }