/* Layout: la marca a todo color. Portada amarilla con un mazo de fotos que se abre, cintas de marcas en movimiento, tarjetas blancas con cuentakilómetros y una banda negra de vendidos. */
:root {
  --amarillo: #FFDD00;
  --tinta: #121212;
  --blanco: #FFFFFF;
  --hueso: #F6F6F3;
  --rojo: #E3222A;
  --gris: #5C5C63;
  --sobre-amarillo: #3A3520;
  --f: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-lenta: cubic-bezier(0.32, 0.72, 0, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--hueso); color: var(--tinta); font-family: var(--f); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overflow-x: hidden; }
::selection { background: var(--tinta); color: var(--amarillo); }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 10px; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.04em; line-height: 0.98; text-wrap: balance; }
p { margin: 0; }
.ancho { max-width: 1220px; margin-inline: auto; padding-inline: 16px; }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 22px; border-radius: 999px; border: 2px solid var(--tinta); font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer; transition: transform 160ms var(--ease), box-shadow 200ms var(--ease); white-space: nowrap; }
.boton.negro { background: var(--tinta); color: var(--blanco); }
.boton.blanco { background: var(--blanco); color: var(--tinta); }
.boton:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .boton:hover { box-shadow: 0 5px 0 var(--tinta); transform: translateY(-2px); } .boton:active { transform: translateY(0) scale(0.97); box-shadow: none; } }

/* Encabezado */
.encabezado { background: var(--amarillo); padding-top: env(safe-area-inset-top, 0px); }
.encabezado .ancho { display: flex; align-items: center; gap: 16px; height: 76px; }
.encabezado .logo { width: 104px; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--blanco); border: 2px solid var(--tinta); flex: none; }
.encabezado .logo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 49%; }
.encabezado nav { display: flex; gap: 2px; margin-left: auto; }
.encabezado nav a { text-decoration: none; font-weight: 600; padding: 10px 12px; border-radius: 999px; transition: background-color 160ms var(--ease); }
.encabezado .boton { height: 46px; padding: 0 18px; }
@media (hover: hover) and (pointer: fine) { .encabezado nav a:hover { background: rgba(0, 0, 0, 0.07); } }
@media (max-width: 680px) { .encabezado nav { display: none; } .encabezado .boton { margin-left: auto; } }

/* Portada */
.portada { background: var(--amarillo); padding-block: 28px 56px; overflow: hidden; }
.portada .grilla { display: grid; gap: 40px; align-items: center; }
.portada h1 { font-size: clamp(50px, 15vw, 128px); }
.portada h1 .palabra { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.04em; }
.portada h1 .palabra > span { display: inline-block; }
.portada h1 .segunda { position: relative; display: inline-block; }
.portada h1 .raya { position: absolute; left: 0; right: 0; bottom: -0.02em; height: 0.09em; background: var(--tinta); transform-origin: left; }
.portada .bajada { margin-top: 22px; font-size: 19px; font-weight: 500; color: var(--sobre-amarillo); max-width: 34ch; }
.portada .acciones { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }

/* Mazo de fotos: se abre al cargar y rota al tocarlo */
.mazo { position: relative; height: clamp(300px, 86vw, 470px); max-width: 560px; width: 100%; justify-self: center; border: 0; padding: 0; background: none; cursor: pointer; }
.mazo .carta { position: absolute; inset: 0; margin: auto; width: 82%; height: 80%; border-radius: 22px; overflow: hidden; border: 3px solid var(--tinta); background: var(--blanco); box-shadow: 0 8px 0 var(--tinta); transition: transform 700ms var(--ease-lenta); }
.mazo .carta img { width: 100%; height: calc(100% - 52px); object-fit: cover; }
.mazo .carta .pie { height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px; font-weight: 700; border-top: 3px solid var(--tinta); }
.mazo .carta .pie span { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mazo .pista { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); font-size: 13px; font-weight: 600; color: var(--sobre-amarillo); white-space: nowrap; }

/* Cintas en movimiento */
.cinta { overflow: hidden; border-block: 2px solid var(--tinta); white-space: nowrap; }
.cinta.negra { background: var(--tinta); color: var(--blanco); }
.cinta.roja { background: var(--rojo); color: var(--blanco); }
.cinta .pista-cinta { display: inline-flex; align-items: center; padding-block: 16px; }
.cinta .item { display: inline-flex; align-items: center; gap: 18px; padding-right: 18px; font-weight: 800; font-size: clamp(18px, 3.4vw, 26px); letter-spacing: -0.02em; text-transform: uppercase; }
.cinta .item b { color: var(--amarillo); font-variant-numeric: tabular-nums; }
.cinta .item svg { color: var(--amarillo); flex: none; }
.cinta.roja .item svg { color: var(--blanco); }
@media (prefers-reduced-motion: no-preference) {
  .cinta .pista-cinta { animation: correr var(--dur, 38s) linear infinite; }
  .cinta.roja .pista-cinta { animation-direction: reverse; }
  .cinta:hover .pista-cinta { animation-play-state: paused; }
}
@keyframes correr { to { transform: translateX(-50%); } }

/* Autos */
.autos { padding-block: 64px 80px; }
.cabeza { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 30px; }
.cabeza h2 { font-size: clamp(38px, 8vw, 72px); }
.filtro { display: flex; flex-wrap: wrap; gap: 8px; }
.filtro button { height: 46px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--tinta); background: var(--blanco); font-weight: 700; cursor: pointer; transition: background-color 200ms var(--ease), color 200ms var(--ease), transform 160ms var(--ease); }
.filtro button span { font-variant-numeric: tabular-nums; margin-left: 6px; opacity: 0.6; }
.filtro button[aria-pressed="true"] { background: var(--tinta); color: var(--amarillo); }
.filtro button:active { transform: scale(0.96); }
.lista { display: grid; gap: 22px; }
.tarjeta { position: relative; background: var(--blanco); border: 2px solid var(--tinta); border-radius: 22px; box-shadow: 0 6px 0 var(--tinta); display: flex; flex-direction: column; overflow: hidden; transition: transform 300ms var(--ease), box-shadow 300ms var(--ease); }
.tarjeta[hidden] { display: none; }
.tarjeta .foto { position: relative; display: block; border-bottom: 2px solid var(--tinta); }
.tarjeta h3 a { text-decoration: none; background-image: linear-gradient(var(--amarillo), var(--amarillo)); background-repeat: no-repeat; background-position: 0 92%; background-size: 0% 35%; transition: background-size 300ms var(--ease); }
.tarjeta h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tarjeta .boton { position: relative; z-index: 2; }
.tarjeta .foto img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
.tarjeta .numero { position: absolute; left: 12px; top: 12px; padding: 6px 10px; border-radius: 999px; background: var(--amarillo); border: 2px solid var(--tinta); font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.sello { position: absolute; right: 12px; top: 14px; padding: 6px 12px; border: 3px solid var(--rojo); border-radius: 10px; color: var(--rojo); background: rgba(255, 255, 255, 0.92); font-weight: 800; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; transform: rotate(-8deg); }
.tarjeta .info { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.tarjeta h3 { font-size: 24px; letter-spacing: -0.03em; line-height: 1.08; }
.tarjeta .detalle { color: var(--gris); font-weight: 500; font-size: 15px; margin-top: 4px; }
.tarjeta .medidas { display: flex; align-items: end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tarjeta .precio { font-weight: 800; font-size: 28px; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.tarjeta .rotulo { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris); margin-bottom: 6px; }
.tarjeta .boton { width: 100%; margin-top: auto; }
@media (hover: hover) and (pointer: fine) { .tarjeta:hover { transform: translateY(-4px); box-shadow: 0 10px 0 var(--tinta); } .tarjeta:hover h3 a { background-size: 100% 35%; } }
@media (min-width: 640px) { .ancho { padding-inline: 28px; } .lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .lista { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tarjeta h3 { font-size: 21px; } .tarjeta .precio { font-size: 24px; } }

/* Cuentakilómetros: cada dígito gira hasta su número */
.odometro { display: inline-flex; gap: 2px; padding: 3px; border-radius: 8px; background: var(--tinta); }
.odometro .d { width: 0.78em; height: 1.25em; overflow: hidden; border-radius: 4px; background: #262626; color: var(--blanco); font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; text-align: center; line-height: 1.25em; }
.odometro .d.ultima { background: var(--amarillo); color: var(--tinta); }
.odometro .col { display: block; transform: translateY(calc(var(--v) * -1.25em)); }
.odometro .col span { display: block; height: 1.25em; }
.espera .odometro .col { transform: translateY(0); }
.odometro.grande .d { font-size: clamp(44px, 12vw, 96px); background: #1F1F1F; color: var(--amarillo); border-radius: 10px; }
.odometro.grande { gap: 6px; padding: 6px; border-radius: 16px; background: #000; }
.odometro.mediano .d { font-size: 34px; }
@media (prefers-reduced-motion: no-preference) {
  .odometro .col { transition: transform 1400ms var(--ease-lenta); transition-delay: calc(120ms + var(--k) * 90ms); }
  .sello { animation: none; }
  .dentro .sello { animation: sellar 560ms var(--ease) both; animation-delay: 380ms; }
}
@keyframes sellar { 0% { opacity: 0; transform: rotate(-20deg) scale(1.7); } 60% { opacity: 1; transform: rotate(-6deg) scale(0.94); } 100% { transform: rotate(-8deg) scale(1); } }

/* Vendidos */
.vendidos { background: var(--tinta); color: var(--blanco); padding-block: 72px; }
.vendidos h2 { font-size: clamp(34px, 7vw, 60px); }
.vendidos .bajada { margin-top: 12px; color: #BDBDC2; max-width: 40ch; }
.vendidos .total { margin-top: 28px; }
.placas { margin-top: 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.placa { border: 2px solid #333; border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.placa b { font-size: 18px; }
.placa.mayor { grid-column: span 2; background: var(--amarillo); color: var(--tinta); border-color: var(--amarillo); }
@media (min-width: 900px) { .placas { grid-template-columns: repeat(4, minmax(0, 1fr)); } .vendidos { padding-block: 100px; } }

/* Contacto */
.contacto { background: var(--amarillo); padding-block: 64px 72px; }
.contacto h2 { font-size: clamp(36px, 7.5vw, 64px); max-width: 14ch; }
.contacto .bajada { margin-top: 12px; font-size: 18px; color: var(--sobre-amarillo); font-weight: 500; }
.contactos { margin-top: 32px; display: grid; gap: 14px; }
.persona { background: var(--blanco); border: 2px solid var(--tinta); border-radius: 22px; box-shadow: 0 6px 0 var(--tinta); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.persona h3 { font-size: 26px; }
.persona p { color: var(--gris); font-weight: 500; }
.persona.oscura { background: var(--tinta); color: var(--blanco); }
.persona.oscura p { color: #C9C9CE; }
.persona .fila { display: flex; gap: 10px; align-items: flex-start; }
.persona .fila svg { flex: none; color: var(--amarillo); margin-top: 2px; }
@media (min-width: 860px) { .contactos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

footer { background: var(--tinta); color: #C9C9CE; padding-block: 28px calc(env(safe-area-inset-bottom, 0px) + 28px); font-size: 14px; }
footer .ancho { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
footer a { color: var(--amarillo); }

/* Entrada */
.revela { transition: opacity 700ms var(--ease), transform 700ms var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.revela.espera { opacity: 0.001; transform: translateY(36px); }

@media (prefers-reduced-motion: no-preference) {
  .portada h1 .palabra > span { animation: subir 900ms var(--ease) both; animation-delay: calc(120ms + var(--p) * 80ms); }
  .portada h1 .raya { animation: raya 800ms var(--ease) both; animation-delay: 760ms; }
  .portada .bajada, .portada .acciones { animation: aparecer 800ms var(--ease) both; animation-delay: 620ms; }
}
@keyframes subir { from { transform: translateY(108%); } }
@keyframes raya { from { transform: scaleX(0); } }
@keyframes aparecer { from { opacity: 0; transform: translateY(16px); } }

/* Aviso de WhatsApp */
.aviso { position: fixed; z-index: 30; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); margin-inline: auto; max-width: 440px; background: var(--blanco); border: 2px solid var(--tinta); border-radius: 22px; box-shadow: 0 8px 0 var(--tinta); padding: 16px; transform: translateY(160%); transition: transform 420ms var(--ease-lenta); }
.aviso.visible { transform: none; }
.aviso .tope { display: flex; align-items: center; justify-content: space-between; font-weight: 800; }
.aviso .tope button { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--tinta); background: var(--amarillo); display: grid; place-items: center; cursor: pointer; }
.aviso p { margin-top: 10px; padding: 12px 14px; border-radius: 16px 16px 16px 4px; background: #E7F6EA; color: #10391C; font-size: 15px; }
.aviso small { display: block; margin-top: 10px; color: var(--gris); font-size: 13px; }