/* ══════════════════════════════════════════════════════════
   Flotillas — nueva propuesta (oct 2026). Solo esta página.
   Reutiliza td-hero, ga-highlights, ga-cob (Garantía), ft-grid/ft-card
   (Manuales) y el formulario existente; aquí solo acomodo y detalles.
   Justificación: documentacion/justificaciones/flotillas.md
   ══════════════════════════════════════════════════════════ */

/* ── Hero: acción inmediata ── */
.fl-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
/* Sobre fondo oscuro: el primario hace hover a blanco con texto negro (igual que "Cotizar ahora" del header) */
.fl-hero__actions .btn--primary::before { background: #fff; }
@media (hover: hover) {
  .fl-hero__actions .btn--primary:hover { background-color: transparent; border-color: #fff; color: #000; box-shadow: none; }
}

/* ── Secciones: ritmo y textos guía ── */
.fl-planes2, .fl-models2, .fl-why { padding: 80px 0; }
.fl-models2 { background: var(--bg-secondary, #f7f7f7); }
.fl-planes2 .ft-section__title,
.fl-models2 .ft-section__title { margin-bottom: 8px; }
.fl-planes2 .ft-section__title { margin-bottom: 32px; }
.fl-section__lead { color: var(--text-secondary); line-height: 1.6; max-width: 70ch; margin-bottom: 32px; }

/* ── Planes lado a lado ── */
.fl-planes2__grid { align-items: stretch; }
.fl-planes2 .fl-split__tag { margin-bottom: 8px; }
.fl-planes2 .ga-cob--card .btn { align-self: flex-start; }

/* ── Modelos en cuadrícula: auto completo sobre fondo claro ── */
.fl-models2__grid .fl-model__img { aspect-ratio: 16 / 10; background: #fff; display: flex; align-items: center; justify-content: center; }
.fl-models2__grid .fl-model__img img { object-fit: contain; padding: 12px; }
.fl-models2__grid .ft-card__action { text-transform: none; }
.fl-models2 .fl-section__lead { max-width: none; }
.fl-model__row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fl-model__row .ft-card__year { flex-shrink: 0; }

/* ── Pro Fleet + Seguridad: sección oscura; foto + lista limpia (sin cajas) ── */
.fl-why { background: var(--surface-dark-1, #0b0b0b); color: #fff; }
.fl-why .ft-section__title { color: #fff; margin-bottom: 20px; text-wrap: wrap; max-width: none; }
.fl-why .fl-section__lead { color: rgba(255,255,255,.72); max-width: none; margin-bottom: 40px; }
.fl-why__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.fl-why__media { border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; }
.fl-why__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fl-why__subtitle { font-size: 24px; font-weight: var(--font-weight-bold, 700); color: #fff; margin: 0 0 8px; line-height: 1.25; }
.fl-why__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.12); }
.fl-why__item { position: relative; border-bottom: 1px solid rgba(255,255,255,.12); }
.fl-why__trigger {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 18px 0;
  background: none;
  border: 0;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.fl-why__trigger:focus-visible { outline: 2px solid var(--color-red, #ED0000); outline-offset: 4px; border-radius: 8px; }
.fl-why__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(237,0,0,.14);
  color: var(--color-red, #ED0000);
  transition: background .3s, color .3s;
}
.fl-why__item.is-open .fl-why__badge { background: var(--color-red, #ED0000); color: #fff; }
.fl-why__item-title { flex: 1; font-size: 18px; font-weight: var(--font-weight-bold, 700); color: rgba(255,255,255,.7); transition: color .3s; }
.fl-why__item.is-open .fl-why__item-title,
.fl-why__trigger:hover .fl-why__item-title { color: #fff; }
.fl-why__chev { color: rgba(255,255,255,.5); transition: transform .3s cubic-bezier(0.16,1,0.3,1); }
.fl-why__item.is-open .fl-why__chev { transform: rotate(180deg); }
.fl-why__panel { padding: 0 0 20px 64px; animation: flWhyIn .45s cubic-bezier(0.16,1,0.3,1); }
.fl-why__panel p { margin: 0; line-height: 1.6; color: rgba(255,255,255,.75); }
@keyframes flWhyIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* barra de progreso del avance automático */
.fl-why__progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--color-red, #ED0000); }
.fl-why__item.is-timing .fl-why__progress { animation: flWhyBar 6s linear forwards; }
@keyframes flWhyBar { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .fl-why__panel { animation: none; } .fl-why__progress { display: none; } }

/* ── Formulario: componentes de Prueba de manejo (td-layout / td-sidebar) ── */

/* ── Responsive ── */
@media (max-width: 1023px) {
  .fl-why__grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 767px) {
  .fl-planes2, .fl-models2, .fl-why { padding: 56px 0; }
  .fl-hero__actions .btn { flex: 1 1 100%; justify-content: center; }
  .fl-planes2__grid { grid-template-columns: 1fr; }
  .fl-planes2 .ga-cob--card .btn { align-self: stretch; justify-content: center; }
  .fl-models2__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .fl-models2__grid .ft-card__body { padding: 12px; }
  .fl-models2__grid .ft-card__name { font-size: 15px; }
  .fl-why__subtitle { font-size: 20px; }
  .fl-why__panel { padding-left: 0; }
  .fl-why__item-title { font-size: 16px; }
}