@property --tono { syntax: '<color>'; inherits: true; initial-value: #4b5563; }

@keyframes avance { to { transform: scaleX(1); } }

@keyframes entrar { from { opacity: 0; transform: translateY(20px) scale(.97); } }

:root {
  --negro: #0b0b0d;
  --panel: #141418;
  --panel-2: #1c1c22;
  --borde: rgba(255, 255, 255, 0.08);
  --texto: #f2f2f3;
  --suave: #a1a1aa;
  --naranja: #ff7314;
  --naranja-2: #ff8a3d;
  --radio: 18px;
  --ancho: 1240px;
  --display: 'Archivo', system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--negro);
  color: var(--texto);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--display); line-height: 1.05; margin: 0; letter-spacing: -0.01em; }

.contenedor { width: min(var(--ancho), 100% - 32px); margin-inline: auto; }

.etiqueta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--naranja);
}
.etiqueta::before { content: ''; width: 22px; height: 2px; background: currentColor; }

.titulo-seccion {
  font-size: clamp(32px, 5vw, 56px);
  font-stretch: 112%;
  font-weight: 800;
  text-transform: uppercase;
  margin-top: 10px;
}

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px;
  font-weight: 700; font-size: 16px; border: 1px solid transparent;
  transition: transform .2s, background .2s, border-color .2s;
  cursor: pointer;
}
.boton:hover { transform: translateY(-2px); }
.boton-naranja { background: var(--naranja); color: #111; }
.boton-naranja:hover { background: var(--naranja-2); }
.boton-borde { border-color: rgba(255,255,255,.25); color: var(--texto); background: rgba(255,255,255,.04); backdrop-filter: blur(8px); }
.boton-borde:hover { border-color: var(--naranja); }
.boton svg { width: 18px; height: 18px; }


.revelar { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.revelar.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revelar { opacity: 1; transform: none; transition: none; }
}

/* components/Cabecera.astro */
.cabecera {
  & {
    position: fixed; inset: 0 0 auto; z-index: 50;
    padding: 14px 0;
    transition: background .3s, backdrop-filter .3s;
  }
  body.con-scroll & { background: rgba(11, 11, 13, .72); backdrop-filter: blur(14px); border-bottom: 1px solid var(--borde); }
  .fila { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
  .logo img { height: 62px; width: auto; }
  .menu { display: flex; gap: 30px; font-weight: 500; font-size: 15px; color: #d4d4d8; }
  .menu a:hover { color: var(--naranja); }
  .tel { padding: 10px 18px; font-size: 15px; }
  @media (max-width: 760px) {
    .menu { display: none; }
    .tel span { display: none; }
    .tel { padding: 12px; }
    .logo img { height: 46px; }
  }
}

/* components/Pie.astro */
.pie {
  & { border-top: 1px solid var(--borde); padding: 56px 0 28px; margin-top: 40px; color: var(--suave); font-size: 15px; }
  .fila { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
  .logo-pie { height: 64px; width: auto; margin-bottom: 12px; }
  h3 { color: var(--texto); font-size: 15px; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 8px; }
  a:hover { color: var(--naranja); }
  .legal { margin-top: 36px; font-size: 13px; opacity: .6; }
  @media (max-width: 760px) {
    .fila { grid-template-columns: 1fr; }
  }
}

/* components/TarjetaCoche.astro */
.tarjeta {
  & {
    display: flex; flex-direction: column;
    background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
    overflow: hidden; transition: transform .35s, border-color .35s;
  }
  &:hover { transform: translateY(-6px); border-color: rgba(255, 106, 19, .5); }
  .foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #222; }
  .foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
  &:hover .foto img { transform: scale(1.06); }
  .tipo {
    position: absolute; top: 12px; left: 12px; padding: 5px 12px; border-radius: 999px;
    background: rgba(0,0,0,.55); backdrop-filter: blur(6px); font-size: 12px; font-weight: 600;
  }
  .info { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
  .marca { font-size: 12px; text-transform: uppercase; letter-spacing: .16em; color: var(--suave); }
  h3 { font-size: 19px; font-weight: 700; margin-top: 4px; }
  .datos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
  .datos li { font-size: 13px; padding: 4px 10px; border-radius: 8px; background: var(--panel-2); color: #d4d4d8; }
  .pie-tarjeta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--borde); }
  strong { font-size: 24px; font-weight: 800; font-stretch: 110%; }
  .flecha {
    width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
    background: var(--panel-2); transition: background .3s, color .3s;
  }
  &:hover .flecha { background: var(--naranja); color: #111; }
}

/* components/Portada.astro */
.portada {
  & {
    position: relative; min-height: 100svh; overflow: hidden;
    display: grid; grid-template-rows: 1fr auto;
    transition: --tono .8s ease;
    isolation: isolate;
  }
  .fondo {
    position: absolute; inset: 0; z-index: -2;
    background:
      radial-gradient(ellipse 70% 55% at 50% 52%, color-mix(in srgb, var(--tono) 85%, transparent), transparent 70%),
      linear-gradient(180deg, color-mix(in srgb, var(--tono) 35%, #0b0b0d) 0%, #0b0b0d 92%);
  }
  .fondo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 70%, var(--negro));
  }
  .gigante {
    position: absolute; inset: 15% 0 auto; z-index: -1;
    text-align: center; pointer-events: none; overflow: hidden;
  }
  .gigante span {
    display: inline-block;
    font-family: var(--display); font-weight: 900; font-stretch: 125%;
    font-size: var(--tam, clamp(90px, 21vw, 300px)); line-height: .85; text-transform: uppercase; letter-spacing: -0.02em;
    background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.04) 85%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    white-space: nowrap;
    transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .5s;
  }
  .gigante span.cambiando { transform: translateY(40%); opacity: 0; }
  .escena { position: relative; grid-row: 1; display: grid; place-items: center; padding-top: 70px; }
  .coche {
    grid-area: 1 / 1; width: min(60vw, 820px); max-height: 46svh; object-fit: contain;
    opacity: 0; transform: translateX(70%) scale(.9); filter: blur(10px);
    transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .5s, filter .5s;
    z-index: 1; margin-top: 6svh;
  }
  .coche.activo { opacity: 1; transform: none; filter: none; }
  .coche.sin-recorte {
    aspect-ratio: 4 / 3; width: min(46vw, 620px); object-fit: cover;
    border-radius: 24px; border: 1px solid rgba(255,255,255,.25);
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
  }
  .coche.saliendo { opacity: 0; transform: translateX(-70%) scale(.9); filter: blur(10px); }
  .coche.desde-izq { transform: translateX(-70%) scale(.9); transition: none; }
  .sombra {
    grid-area: 1 / 1; align-self: end; width: min(60vw, 800px); height: 60px; margin-bottom: 2svh;
    background: radial-gradient(ellipse at center, rgba(0,0,0,.75), transparent 70%);
  }
  .capa { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding-bottom: 32px; }
  .info { max-width: 560px; }
  h1 { margin-top: 10px; }
  .marca { display: block; font-size: 15px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #e4e4e7; }
  .version { display: block; font-size: clamp(28px, 3.4vw, 44px); font-weight: 800; font-stretch: 110%; margin-top: 6px; }
  .chips { list-style: none; padding: 0; margin: 14px 0 20px; display: flex; gap: 8px; flex-wrap: wrap; }
  .chips li { padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.08); backdrop-filter: blur(8px); border: 1px solid var(--borde); font-size: 14px; }
  .acciones { display: flex; gap: 12px; flex-wrap: wrap; }
  .mando { display: flex; align-items: center; gap: 14px; }
  .contador { font-size: 14px; color: var(--suave); font-variant-numeric: tabular-nums; }
  .contador b { color: var(--texto); font-size: 20px; }
  .barra { width: 120px; height: 2px; background: rgba(255,255,255,.15); overflow: hidden; }
  .barra i { display: block; height: 100%; width: 100%; background: var(--naranja); transform-origin: left; transform: scaleX(0); }
  .barra i.corriendo { animation: avance var(--dur, 5s) linear forwards; }
  .flecha {
    width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.05); color: var(--texto); font-size: 18px; cursor: pointer;
    transition: background .2s, border-color .2s;
  }
  .flecha:hover { background: var(--naranja); border-color: var(--naranja); color: #111; }
  [data-campo] { transition: opacity .35s; }
  &.cambiando [data-campo] { opacity: 0; }
  @media (max-width: 760px) {
    .coche { width: 94vw; max-height: 40svh; margin-top: 4svh; }
    .gigante { inset: 18% 0 auto; }
    .capa { flex-direction: column; align-items: stretch; }
    .mando { justify-content: space-between; }
    .barra { flex: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .coche, .gigante span, & { transition: none; }
  }
}

/* pages/index.astro */
.inicio {
  .sin-coches { padding: 180px 0 60px; }
  .sin-coches p:not(.etiqueta) { color: var(--suave); }
  .cifras {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: var(--borde); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden;
    margin-top: 20px;
  }
  .cifras div { background: var(--negro); padding: 26px 24px; display: flex; flex-direction: column; gap: 4px; }
  .cifras b { font-size: clamp(26px, 3vw, 38px); font-weight: 800; font-stretch: 115%; color: var(--naranja); }
  .cifras span { color: var(--suave); font-size: 14px; }
  .manifiesto { padding: 140px 0; }
  .manifiesto p {
    margin: 0; max-width: 1050px;
    font-family: var(--display); font-weight: 700; font-stretch: 105%;
    font-size: clamp(30px, 4.6vw, 64px); line-height: 1.12;
  }
  .manifiesto span { color: rgba(255,255,255,.14); transition: color .4s; }
  .manifiesto span.encendida { color: var(--texto); }
  .manifiesto span.encendida:nth-child(n+8):nth-child(-n+13) { color: var(--naranja); }
  .cabeza { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
  .filtros { display: flex; gap: 8px; flex-wrap: wrap; }
  .filtros button {
    font: inherit; font-size: 14px; font-weight: 600; color: var(--texto);
    padding: 9px 16px; border-radius: 999px; border: 1px solid var(--borde); background: var(--panel); cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
  }
  .filtros button small { opacity: .55; margin-left: 4px; }
  .filtros button:hover { border-color: var(--naranja); }
  .filtros button.activo { background: var(--naranja); color: #111; border-color: var(--naranja); }
  .rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
  .rejilla .tarjeta { transition: transform .35s, border-color .35s, opacity .35s; }
  .rejilla .tarjeta.oculta { display: none; }
  .rejilla .tarjeta.entrando { animation: entrar .5s both; }
  .nosotros { padding: 140px 0 60px; }
  .ventajas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
  .ventajas article { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 30px; }
  .ventajas article:nth-child(2) { transition-delay: .12s; }
  .ventajas article:nth-child(3) { transition-delay: .24s; }
  .num { color: var(--naranja); font-weight: 700; font-size: 14px; letter-spacing: .1em; }
  .ventajas h3 { font-size: 24px; margin: 14px 0 10px; }
  .ventajas p { color: var(--suave); margin: 0; }
  .contacto {
    margin-top: 80px; padding: 56px; border-radius: 28px;
    background: radial-gradient(circle at 85% 20%, rgba(255,106,19,.35), transparent 55%), var(--panel);
    border: 1px solid var(--borde);
    display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap;
  }
  .contacto p:not(.etiqueta) { color: var(--suave); max-width: 520px; }
  .botones { display: flex; flex-direction: column; gap: 12px; min-width: 280px; }
  @media (max-width: 860px) {
    .sin-coches { padding: 180px 0 60px; }
    .sin-coches p:not(.etiqueta) { color: var(--suave); }
    .cifras { grid-template-columns: 1fr 1fr; }
    .ventajas { grid-template-columns: 1fr; }
    .manifiesto { padding: 90px 0; }
    .contacto { padding: 32px 22px; }
    .botones { min-width: 0; width: 100%; }
  }
}

/* pages/coches/[slug].astro */
.pagina-coche {
  .ficha { padding-top: 96px; }
  .migas { font-size: 14px; color: var(--suave); margin-bottom: 20px; }
  .migas a:hover { color: var(--naranja); }
  .migas span { opacity: .4; margin: 0 6px; }
  .cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
  .principal { position: relative; border-radius: var(--radio); overflow: hidden; background: #111; aspect-ratio: 4 / 3; }
  .principal img { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s; }
  .principal img.cargando { opacity: .2; }
  .nav {
    position: absolute; top: 50%; translate: 0 -50%; width: 46px; height: 46px; border-radius: 50%;
    border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 18px; cursor: pointer; backdrop-filter: blur(6px);
  }
  .nav:hover { background: var(--naranja); color: #111; }
  .ant { left: 14px; }
  .sig { right: 14px; }
  .contador { position: absolute; bottom: 14px; right: 14px; padding: 4px 12px; border-radius: 999px; background: rgba(0,0,0,.6); font-size: 13px; }
  .miniaturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 10px; }
  .miniaturas button { padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; cursor: pointer; background: none; opacity: .6; transition: opacity .2s, border-color .2s; }
  .miniaturas button:hover, .miniaturas button.activa { opacity: 1; border-color: var(--naranja); }
  .miniaturas img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; }
  .caja {
    position: sticky; top: 90px;
    background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 28px;
    display: flex; flex-direction: column; gap: 12px;
  }
  .marca { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--suave); }
  h1 { font-size: 30px; font-weight: 800; font-stretch: 108%; }
  .precio { font-size: 42px; font-weight: 900; font-stretch: 115%; color: var(--naranja); margin: 4px 0 6px; }
  .vendido { align-self: start; padding: 6px 16px; border-radius: 999px; background: var(--panel-2); color: var(--suave); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
  .aviso { color: var(--suave); margin: 0; }
  .clave { list-style: none; padding: 0; margin: 0 0 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .clave li { background: var(--panel-2); border-radius: 12px; padding: 10px 14px; font-weight: 600; }
  .clave small { display: block; font-size: 12px; color: var(--suave); font-weight: 500; }
  .donde { font-size: 14px; color: var(--suave); margin: 6px 0 0; }
  .donde a { color: var(--texto); text-decoration: underline; text-underline-offset: 3px; }
  .detalle { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 56px; }
  .detalle h2 { font-size: 22px; text-transform: uppercase; font-stretch: 110%; margin-bottom: 16px; }
  .descripcion { color: #d4d4d8; font-size: 18px; margin: 0; }
  .tabla { display: grid; grid-template-columns: auto 1fr; margin: 0; border-top: 1px solid var(--borde); }
  .tabla dt, .tabla dd { padding: 12px 0; border-bottom: 1px solid var(--borde); margin: 0; }
  .tabla dt { color: var(--suave); padding-right: 24px; }
  .tabla dd { text-align: right; font-weight: 600; }
  .parecidos { margin-top: 80px; }
  .rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 18px; }
  .barra-movil { display: none; }
  @media (max-width: 900px) {
    .ficha { padding-top: 78px; }
    .cuerpo, .detalle { grid-template-columns: minmax(0, 1fr); }
    .caja { position: static; }
    .miniaturas { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
    .miniaturas button { flex: 0 0 84px; scroll-snap-align: start; }
    .rejilla { grid-template-columns: 1fr; }
    .barra-movil {
      display: flex; align-items: center; gap: 8px;
      position: fixed; inset: auto 0 0; z-index: 40; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
      background: rgba(11,11,13,.9); backdrop-filter: blur(14px); border-top: 1px solid var(--borde);
    }
    .barra-movil strong { flex: 1; font-size: 22px; font-weight: 800; }
    .barra-movil .boton { padding: 11px 16px; font-size: 15px; }
  }
}

@media (max-width: 900px) { body.con-barra .pie { padding-bottom: 100px; } }