/* Stock Llantero · capa premium (ronda 31). Inspirada en las marcas de llantas de alta gama, sin copiar ninguna:
   titulares condensados en mayúsculas, esquinas rectas, líneas finas en lugar de sombras, botones sobrios con letras
   espaciadas y más aire entre secciones. No cambia la estructura ni los colores de la marca: solo afina estilo.css,
   que se carga antes. Si se quita este archivo, el sitio vuelve al diseño anterior tal cual. */
:root {
  --radio: 4px;
  --radio-chico: 2px;
  --paso: clamp(84px, 10vw, 152px);
  --condensado: 78%;
}

/* 1. Titulares: condensados y en mayúsculas; la palabra en cursiva conserva su forma (acento editorial). */
h1, h2 {font-stretch:var(--condensado);text-transform:uppercase;letter-spacing:-.008em;line-height:.9}
h1 {font-size:clamp(3.1rem, 1.1rem + 6.4vw, 7.2rem);font-weight:800}
h2 {font-size:clamp(2.5rem, 1.3rem + 3.9vw, 5rem);font-weight:800}
h1 em, h2 em {text-transform:none;letter-spacing:-.02em}
h3 {letter-spacing:-.005em}
.hero h1 {max-width:12ch}
.beneficio strong, .tarjeta-medida, .tarjeta-precio strong, .resenas-cifra strong, .medida-numero, .pit-timer, .contacto-numero {font-stretch:var(--condensado)}

/* 2. Botones: rectos, en mayúsculas, sin brincos ni brillos; el rojo queda solo para la acción principal. */
.btn {border-radius:var(--radio-chico);min-height:50px;padding:0 28px;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.btn:hover {translate:none}
.btn-primario:hover {box-shadow:none}
.btn-secundario {box-shadow:inset 0 0 0 1px currentColor}
/* En zonas claras el secundario se rellena de negro al pasar el cursor; en las oscuras conserva su gris translúcido. */
.tarjeta .btn-secundario:hover, .carrito .btn-secundario:hover, .modal-caja .btn-secundario:hover, .catalogo .btn-secundario:hover, .faq .btn-secundario:hover, .resenas .btn-secundario:hover {background:var(--negro);color:var(--marfil);box-shadow:inset 0 0 0 1px var(--negro)}
.chip, .medidas-chips button {border-radius:var(--radio-chico);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.hero-kicker, .marquesina-logo {border-radius:var(--radio-chico)}

/* 3. Tarjetas y paneles: sin sombras ni saltos al pasar el cursor; una línea negra marca el foco. */
.tarjeta, .categoria {border-radius:0}
.tarjeta:hover, .categoria:hover {translate:none;box-shadow:none;border-color:var(--negro)}
.tarjeta-medida {font-size:2.15rem;letter-spacing:-.005em}
.tarjeta-nombre {font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.tarjeta-precio strong {font-size:1.95rem}
.hero-buscador-card, .filtros, .resena, .faq-lista details {border-radius:var(--radio)}
select, textarea, input[type="text"], input[type="tel"], input[type="email"], input[type="search"], input:not([type]) {border-radius:var(--radio-chico)}

/* 4. Toda la tarjeta lleva a la página de la llanta; los botones de agregar quedan encima y siguen funcionando. */
.tarjeta-ver {color:inherit;text-decoration:none}
.tarjeta-ver::after {content:"";position:absolute;inset:0;z-index:1}
.tarjeta-botones {position:relative;z-index:2}
.tarjeta-ver:focus-visible {outline:none}
.tarjeta:has(.tarjeta-ver:focus-visible) {outline:2px solid var(--rojo);outline-offset:3px}

/* 5. Navegación entre páginas como en una web tradicional premium: fundido corto al cambiar de página
   (Chrome, Edge y Safari recientes; en los demás la página cambia normal). */
@view-transition {navigation:auto}
::view-transition-old(root) {animation:salida-pagina .22s cubic-bezier(.4, 0, 1, 1) both}
::view-transition-new(root) {animation:entrada-pagina .38s cubic-bezier(.16, 1, .3, 1) both}
@keyframes salida-pagina {to {opacity:0}}
@keyframes entrada-pagina {from {opacity:0;transform:translateY(10px)}}

/* 6. Ritmo: etiquetas de sección más finas y espaciadas. */
.seccion-cabeza::before, .pista-cabeza::before {letter-spacing:.24em}

/* 7. Al pasar el cursor sobre una tarjeta, la llanta gira un poco, como si rodara hacia ti. */
@media (hover:hover) {
  .tarjeta .tarjeta-img > .foto {transition:scale .7s var(--salida), rotate .9s var(--salida)}
  .tarjeta:hover .tarjeta-img > .foto {scale:1.05;rotate:-5deg}
}

/* 8. Botón de Mi cuenta en la cabecera (portada y páginas propias), igual que el del carrito. */
.btn-cuenta {display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--grafito-2);color:var(--marfil)}
.btn-cuenta:hover {background:#2A2A30}