/* Stock Llantero · páginas propias (producto, medida, marca, índice y 404) que arma el Worker (ronda 31).
   Zona clara (marfil) con el mismo lenguaje premium: titulares condensados, líneas finas, esquinas rectas. */
.pagina-main {
  --c-texto:var(--negro);--c-suave:var(--gris);--c-linea:var(--linea-clara);--c-em:var(--rojo);--c-rojo:var(--rojo-hondo);
  color-scheme:light;background:var(--marfil);color:var(--negro);
  padding:clamp(20px, 3vw, 40px) var(--margen) var(--paso);min-height:70vh;
}
.pagina-seccion {max-width:var(--ancho-max);margin:0 auto;padding:0}
.pagina-seccion + .pagina-seccion, .producto + .pagina-seccion {margin-top:var(--paso)}

/* Migas de pan */
.migas {max-width:var(--ancho-max);margin:0 auto clamp(20px, 3vw, 36px)}
.migas ol {display:flex;flex-wrap:wrap;gap:6px 10px;margin:0;padding:0;list-style:none;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.migas li + li::before {content:"/";margin-right:10px;color:var(--gris-claro)}
.migas a {color:inherit;text-decoration:none}
.migas a:hover {color:var(--negro);text-decoration:underline;text-underline-offset:3px}
.migas [aria-current] {color:var(--negro)}

/* Ficha de producto */
.producto {max-width:var(--ancho-max);margin:0 auto;display:grid;grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr);gap:clamp(28px, 5vw, 80px);align-items:start}
.producto-foto {position:sticky;top:96px;margin:0;display:grid;place-items:center;aspect-ratio:1;background:var(--fondo-foto);border:1px solid var(--linea-clara)}
.producto-foto img {width:72%;height:auto}
.producto-foto.con-foto img {width:100%;height:100%;object-fit:contain;padding:10%;mix-blend-mode:multiply}
.producto-foto figcaption {position:absolute;left:0;right:0;bottom:0;padding:12px 16px;font-size:12.5px;text-align:center;color:var(--gris)}
.producto-piso {margin:28px 0 0;border:1px solid var(--linea-clara);background:var(--fondo-foto)}
.producto-piso img {display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.producto-piso figcaption {padding:12px 14px;font-size:13px;line-height:1.45;color:var(--gris)}
.producto-piso figcaption strong {color:inherit;font-weight:600}
.producto-piso small {display:block;margin-top:6px;font-size:11.5px}
.producto-piso a {color:inherit;text-decoration:underline;text-underline-offset:2px}
.producto-logo {display:block;height:40px;width:auto;max-width:180px;margin-bottom:18px;object-fit:contain;object-position:left center;mix-blend-mode:multiply}
.producto-marca {margin:0 0 14px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.producto-titulo {font-size:clamp(2.2rem, 1.2rem + 3vw, 3.8rem);line-height:.95}
.producto-titulo span {display:block;color:var(--rojo)}
.producto-disp {display:inline-flex;align-items:center;gap:8px;margin:18px 0 0;font-size:14px;font-weight:600}
.producto-disp::before {content:"";width:8px;height:8px;border-radius:50%;background:#1A9E55}
.producto-disp.pedido::before {background:#C98A00}
.producto-precio {display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:22px 0 4px}
.producto-precio strong {font-size:clamp(2.4rem, 1.6rem + 2vw, 3.4rem);font-stretch:var(--condensado, 78%);line-height:1}
.producto-precio span {font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rojo-hondo)}
.producto-precio s {color:var(--gris)}
.producto-desglose {margin:0;font-size:14px;color:var(--gris)}
.producto-botones {display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.producto-botones .btn {flex:1 1 200px}
.producto-incluye {margin:26px 0 0;padding:0;list-style:none;display:grid;gap:10px;font-size:14.5px}
.producto-incluye li {display:flex;gap:10px;align-items:flex-start}
.producto-incluye li::before {content:"";flex:none;width:14px;height:8px;margin-top:6px;border-left:2px solid var(--rojo);border-bottom:2px solid var(--rojo);rotate:-45deg}
.producto-ficha {width:100%;margin-top:34px;border-collapse:collapse;font-size:14.5px}
.producto-ficha caption {padding-bottom:10px;text-align:left;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.producto-ficha th, .producto-ficha td {padding:12px 0;border-top:1px solid var(--linea-clara);text-align:left;vertical-align:top}
.producto-ficha th {width:46%;font-weight:500;color:var(--gris)}
.producto-ficha td {font-weight:600}
.producto-ficha a {color:inherit;text-underline-offset:3px}
@media (max-width:860px) {.producto {grid-template-columns:1fr} .producto-foto {position:relative;top:auto}}

/* Tarjetas que son enlaces */
.tarjeta-enlace {color:inherit;text-decoration:none}
.tarjeta-enlace:focus-visible {outline:2px solid var(--rojo);outline-offset:3px}
.tarjeta-enlace .tarjeta-img > img:not(.foto) {width:56%}
.tarjeta-enlace .tarjeta-precio span {width:100%;font-size:13px;color:var(--gris)}
.pagina-grid {margin-top:8px}

/* Índice de medidas y marcas */
.indice-titulo {margin:clamp(40px, 5vw, 64px) 0 18px;font-size:clamp(1.6rem, 1.1rem + 1.4vw, 2.4rem)}
.indice-grupo {padding:18px 0;border-top:1px solid var(--linea-clara)}
.indice-grupo h3 {margin-bottom:12px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.indice-lista {display:grid;grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));gap:8px;margin:0;padding:0;list-style:none}
.indice-lista a {display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--linea-clara);background:var(--blanco);color:var(--negro);text-decoration:none;transition:border-color var(--t-rapido)}
.indice-lista a:hover, .indice-lista a:focus-visible {border-color:var(--negro)}
.indice-lista b {font-size:1.15rem;font-stretch:var(--condensado, 78%);letter-spacing:.01em}
.indice-lista span {font-size:12.5px;color:var(--gris)}
/* Guía de la medida y enlaces relacionados bajo la rejilla */
.pagina-guia {padding-top:0}
.guia-medida {max-width:72ch;margin-bottom:28px}
.guia-medida h2, .relacionados h2 {margin:0 0 12px;font-size:clamp(1.3rem, 1rem + 1vw, 1.8rem)}
.guia-medida p {color:var(--gris);line-height:1.6}
.guia-medida b {color:var(--negro)}
.relacionados {padding:18px 0;border-top:1px solid var(--linea-clara)}
.marca-logo-grande {display:block;height:56px;width:auto;margin:0 0 8px;mix-blend-mode:multiply}
/* Marca sin logotipo libre: rótulo tipográfico propio, mismo estilo que la marquesina de la portada. */
.marca-rotulo {display:inline-block;margin:0 0 8px;padding:14px 22px;border:1px solid var(--linea-clara);border-radius:var(--radio-chico, 4px);background:var(--blanco);font-stretch:112%;font-weight:800;font-size:clamp(1.3rem, 1rem + 1vw, 1.8rem);letter-spacing:-.01em;text-transform:uppercase;color:var(--negro)}

/* Pie compacto de las páginas y aviso con enlace */
.pie-pagina {padding-top:clamp(40px, 5vw, 72px)}
.toast-accion {margin-left:6px;padding:8px 12px;border-radius:2px;background:var(--rojo);color:#fff;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
.pagina-404 {text-align:left;padding:var(--paso) 0}

/* Movimiento de las páginas propias (mismo lenguaje que movimiento.css): la foto se asienta y la información
   entra escalonada. Solo transform y opacity (fluido en celular); con "menos movimiento", recorridos más cortos. */
.producto-foto img {animation:pagina-foto 1.1s var(--salida, cubic-bezier(.16, 1, .3, 1)) both}
.producto-info > * {animation:pagina-sube .8s var(--salida, cubic-bezier(.16, 1, .3, 1)) both}
.producto-info > :nth-child(1) {animation-delay:.05s}
.producto-info > :nth-child(2) {animation-delay:.1s}
.producto-info > :nth-child(3) {animation-delay:.16s}
.producto-info > :nth-child(4) {animation-delay:.22s}
.producto-info > :nth-child(5) {animation-delay:.27s}
.producto-info > :nth-child(6) {animation-delay:.32s}
.producto-info > :nth-child(n+7) {animation-delay:.38s}
.pagina-seccion > .seccion-cabeza {animation:pagina-sube .8s var(--salida, cubic-bezier(.16, 1, .3, 1)) .05s both}
.marca-logo-grande, .marca-rotulo {animation:pagina-logo .9s var(--salida, cubic-bezier(.16, 1, .3, 1)) .12s both}
/* Tarjetas de medida, marca y "más llantas": las primeras entran escalonadas; las de abajo suben al aparecer con el
   scroll (animación ligada al scroll del navegador, sin JavaScript). Donde no hay soporte, se ven quietas y completas. */
.pagina-grid > .tarjeta-enlace:nth-child(-n+8) {animation:pagina-sube .7s var(--salida, cubic-bezier(.16, 1, .3, 1)) both;animation-delay:calc(.12s + var(--i, 0) * 55ms)}
.pagina-grid > :nth-child(2) {--i:1} .pagina-grid > :nth-child(3) {--i:2} .pagina-grid > :nth-child(4) {--i:3}
.pagina-grid > :nth-child(5) {--i:4} .pagina-grid > :nth-child(6) {--i:5} .pagina-grid > :nth-child(7) {--i:6} .pagina-grid > :nth-child(8) {--i:7}
@supports (animation-timeline:view()) {
  .pagina-grid > .tarjeta-enlace:nth-child(n+9), .indice-grupo {animation:pagina-sube linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
}
@media (hover:hover) {
  .tarjeta-enlace {transition:translate .45s var(--salida, cubic-bezier(.16, 1, .3, 1)), box-shadow .45s var(--salida, cubic-bezier(.16, 1, .3, 1))}
  .tarjeta-enlace:hover {translate:0 -4px;box-shadow:var(--sombra)}
  .tarjeta-enlace .tarjeta-img img {transition:scale .6s var(--salida, cubic-bezier(.16, 1, .3, 1))}
  .tarjeta-enlace:hover .tarjeta-img img {scale:1.05}
}
@keyframes pagina-logo {from {opacity:0;transform:translateX(-14px) scale(.96)}}
@keyframes pagina-foto {from {opacity:0;transform:scale(.94) rotate(-6deg)}}
@keyframes pagina-sube {from {opacity:0;transform:translateY(18px)}}
@media (prefers-reduced-motion:reduce) {
  @keyframes pagina-foto {from {opacity:0;transform:scale(.98)}}
  @keyframes pagina-sube {from {opacity:0;transform:translateY(6px)}}
}
/* El contador del carrito rebota al agregar. */
.badge.late {animation:badge-late .45s cubic-bezier(.34, 1.56, .64, 1)}
@keyframes badge-late {40% {transform:scale(1.35)}}

/* Mi cuenta y panel de pedidos (ronda 32) */
.cuenta-cargando {color:var(--gris)}
.cuenta-entrar {display:grid;gap:16px;justify-items:start;max-width:520px}
.btn-google {gap:12px;background:var(--negro);color:var(--marfil)}
.btn-google:hover {background:#222}
.cuenta-nota {font-size:13px;color:var(--gris)}
.cuenta-usuario {display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:20px;border:1px solid var(--linea-clara);background:var(--blanco)}
.cuenta-usuario img {width:56px;height:56px;border-radius:50%}
.cuenta-usuario > div:first-of-type {display:grid}
.cuenta-usuario span {font-size:14px;color:var(--gris)}
.cuenta-acciones {display:flex;gap:10px;margin-left:auto}
.cuenta-pedidos, .panel-pedidos, .cuenta-vehiculos {display:grid;gap:10px;margin:0;padding:0;list-style:none}
.pedido {padding:18px 20px;border:1px solid var(--linea-clara);background:var(--blanco)}
.pedido-cabeza {display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.pedido-cabeza b {font-stretch:var(--condensado, 78%);font-size:1.25rem;letter-spacing:.02em}
.pedido-cabeza strong {margin-left:auto;font-size:1.25rem}
.pedido-resumen {margin:8px 0;font-size:14.5px}
.pedido-datos {display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;font-size:13.5px;color:var(--gris)}
.pedido-datos strong {margin-left:auto;color:var(--negro);font-size:1.1rem}
.pedido-nota {margin:8px 0 0;font-size:13.5px}
.estado {padding:3px 10px;border-radius:2px;background:var(--marfil-2);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.estado-pagado, .estado-entregado {background:#DDF3E6;color:#11643A}
.estado-enviado {background:#E3ECFB;color:#1F4E9B}
.estado-cancelado {background:#F7E1E1;color:#8C1C1C}
.cuenta-vehiculos li {display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 18px;border:1px solid var(--linea-clara);background:var(--blanco)}
.cuenta-vehiculos li > div {display:grid;margin-right:auto}
.cuenta-vehiculos span {font-size:14px;color:var(--gris)}
.vehiculo-quitar {border:0;background:none;color:var(--gris);text-decoration:underline;cursor:pointer}
.cuenta-form, .panel-editar {display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin-top:14px}
.cuenta-form label, .panel-editar label {display:grid;gap:6px;font-size:13px;font-weight:600}
.cuenta-form input, .panel-editar input, .panel-editar select {min-height:44px;padding:0 12px;border:1px solid var(--linea-clara);background:var(--blanco);font:inherit}
.panel-editar input {min-width:min(320px, 70vw)}
.panel-filtros {display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}

/* Panel: fotos reales con licencia (ronda 33) */
.fotos-resumen {font-size:15px}
.fotos-controles {display:flex;flex-wrap:wrap;align-items:end;gap:14px;margin:14px 0}
.fotos-controles label:first-child {display:grid;gap:6px;font-size:13px;font-weight:600}
.fotos-controles input[type="search"] {min-height:44px;min-width:min(360px, 80vw);padding:0 12px;border:1px solid var(--linea-clara);background:var(--blanco);font:inherit}
.fotos-check {display:flex;align-items:center;gap:8px;font-size:14px}
.fotos-lista {display:grid;gap:8px;margin:0;padding:0;list-style:none}
.fotos-lista > li {padding:14px 16px;border:1px solid var(--linea-clara);background:var(--blanco)}
.fotos-fila {display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.fotos-fila > div {display:grid;margin-right:auto;font-size:14.5px}
.fotos-fila small {font-size:12.5px;color:var(--gris)}
.fotos-form {display:grid;gap:14px;margin-top:14px;padding-top:14px;border-top:1px solid var(--linea-clara)}
.fotos-form fieldset {display:grid;gap:8px;margin:0;padding:0;border:0}
.fotos-form legend, .fotos-archivo {font-size:13px;font-weight:700}
.fotos-archivo {display:grid;gap:6px}
.fotos-form fieldset label {display:flex;gap:8px;font-size:14px}
.fotos-autorizada {display:grid;gap:10px}
.fotos-autorizada label {display:grid;gap:6px;font-size:13px;font-weight:600}
.fotos-autorizada input {min-height:44px;padding:0 12px;border:1px solid var(--linea-clara);background:var(--blanco);font:inherit}
.fotos-vista {width:220px;height:220px;object-fit:cover;border:1px solid var(--linea-clara)}
.fotos-form .btn {justify-self:start}