/* =====================================================================
   flota.html — estilos propios de la página (se carga después de site.css)
   Solo usa variables de site.css.
   ===================================================================== */

/* ---------- 1. cabecera ---------- */
.flota-head{padding-block:clamp(32px,5vw,64px) clamp(28px,4vw,48px)}
.flota-head__grid{display:grid;gap:28px}
@media (min-width:1024px){.flota-head__grid{grid-template-columns:7fr 5fr;gap:64px;align-items:end}}
.flota-head .h1{max-width:12ch}

/* barra resumen: 3 datos mono en filas con hairline */
.resumen{padding:0;overflow:hidden}
.resumen > div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 20px;border-top:var(--hair)}
.resumen > div:first-child{border-top:0}
.resumen dt{flex:none;display:inline-flex;align-items:center;gap:10px}
.resumen dt::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--primary-light);flex:none}
.resumen dd{font:600 .875rem/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text);text-align:right;font-variant-numeric:tabular-nums}
@media (min-width:1024px){.resumen > div{padding:18px 24px}}

/* ---------- 2-3. filtros + catálogo ---------- */
.flota-catalogo{padding-bottom:var(--section-y)}
.flota-catalogo .filters{margin-bottom:clamp(20px,3vw,32px)}
.flota-catalogo .chips{flex:1 1 auto;min-width:0}

/* entrada suave de tarjetas al filtrar (sin fill final: no bloquea el hover) */
#car-grid .car-card{animation:card-in .32s var(--ease-out) backwards;animation-delay:calc(min(var(--i,0),9) * 35ms)}
@keyframes card-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* móvil: tarjeta horizontal compacta (foto 4:3 a la izquierda, botón a todo el ancho) */
@media (max-width:639.98px){
  #car-grid{gap:12px}
  #car-grid .car-card{display:grid;grid-template-columns:116px minmax(0,1fr);column-gap:14px;row-gap:4px;padding:12px;align-items:start}
  #car-grid .car-card__media{grid-column:1;grid-row:1 / span 3;border-radius:var(--r-sm)}
  #car-grid .car-card__body{display:contents}
  #car-grid .car-card__head{grid-column:2;grid-row:1;flex-direction:column;align-items:flex-start;gap:4px}
  #car-grid .car-card__name{font-size:1rem}
  #car-grid .car-card__desc{grid-column:2;grid-row:2;min-height:0;font-size:.8125rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  #car-grid .car-card__note{grid-column:2;grid-row:3;margin-top:2px}
  #car-grid .car-card__cta{grid-column:1 / -1;grid-row:4;margin-top:10px;min-height:44px}
  #car-grid .placa{left:6px;bottom:6px;padding:5px 7px;gap:6px;font-size:.6875rem}
  #car-grid .placa__sep,#car-grid .placa__cat{display:none}
}

/* pie de sección */
.flota-pie{display:grid;gap:10px;margin-top:clamp(28px,4vw,40px);padding-top:20px;border-top:var(--hair)}
.flota-pie p{max-width:62ch}
@media (min-width:768px){.flota-pie{grid-template-columns:1fr auto;align-items:center;gap:24px}.flota-pie__ref{text-align:right}}

/* ---------- 4. tarifas ---------- */
.rango{display:grid;gap:12px;align-content:end}
.rango__row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px}
.rango__n{font:700 clamp(2rem,3.6vw,3rem)/1 var(--font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rango .pass__line{min-width:48px}
.rango__cap{text-align:right}
@media (max-width:1023px){.rango{max-width:420px}.rango__cap{text-align:left}}

.tarifas th:nth-child(1){width:24%}
.tarifas th:nth-child(2){width:36%}
.tarifas th:nth-child(3){width:24%}
.tarifas th:nth-child(4){width:16%}
.tarifas__cat{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.tarifas__cat .tag{font-weight:500;font-variant-numeric:tabular-nums}
.tarifas td .link-arrow{white-space:nowrap}
.tarifas td:nth-child(2){color:var(--muted)}
@media (max-width:767px){.tarifas td{align-items:baseline}}

.tarifas-nota{display:flex;align-items:flex-start;gap:12px;margin-top:20px;max-width:72ch}
.tarifas-nota .ico{color:var(--primary);width:22px;height:22px;margin-top:-1px}

/* ---------- 5. CTA ---------- */
.flota-cta .btn-row{justify-content:center}
@media (max-width:767px){.flota-cta .btn-row{width:100%}}