/* Fichas de modelo en CELULAR: página más corta, sin quitar información.
   Solo aplica por debajo de 760px; en computador todo queda igual.
   Lo que se pliega (texto largo, notas legales) sigue en el HTML y Google lo lee. */
.fm-mas { display: none; }
/* "Versiones y precios" sin rótulo encima: necesita aire bajo la línea de arriba */
#versiones { padding-top: 44px !important; }
/* Galería: marco 4:3 como las fotos reales (en 16:9 se cortaban arriba y abajo) */
.show-media { aspect-ratio: 4 / 3 !important; }
@media (min-width: 760px) { #galeria .show-stage { max-width: 860px; } }
/* "Lo esencial" (en todas las pantallas): tarjeta ancha de pico y placa arriba */
.spec-ancho { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.spec-ancho .v { margin-top: 0; color: var(--gold, #d4af37); }
/* "¿Para quién es?": el texto ocupa todo el ancho en computador (en 600px
   quedaba muy alto) y los dos párrafos más juntos */
#sobre .sec-lead { max-width: none; margin-bottom: 14px; }
@media (max-width: 759px) {
  /* Portada: la foto del carro primero, y dos botones (cotizar y llamar) */
  .hero { padding-top: 20px !important; }
  .hero .breadcrumb { display: none; }
  .ficha-hero { gap: 18px; }
  .ficha-hero > .ficha-shot { order: -1; }
  .hero-ctas .btn-outline { display: none; }
  /* El botón de cotizar va justo debajo del precio (antes quedaba en la 2.ª
     pantalla) y el texto de presentación baja y se corta a 2 líneas */
  .ficha-hero > div:first-child { display: flex; flex-direction: column; }
  .ficha-hero > div:first-child > .price-tag,
  .ficha-hero > div:first-child > .bono-pill { align-self: flex-start; }
  .ficha-hero > div:first-child > .bono-pill { margin-bottom: 14px; }
  .ficha-hero .hero-ctas { order: 5; }
  .ficha-hero p.lead {
    order: 6; margin: 14px 0 0 !important; font-size: 15px;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }

  /* Menos aire entre secciones */
  section { padding-bottom: 40px; }
  .sec-lead { margin-bottom: 22px; }

  /* Lo esencial: 3 columnas compactas */
  .specs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .spec { padding: 12px 10px; }
  .spec .k { font-size: 9.5px; letter-spacing: 1px; }
  .spec .v { font-size: 21px; margin-top: 4px; }
  .spec .v small { display: block; font-size: 11px; }

  /* "¿Para quién es?": 3 líneas y "Leer más" (ver ficha-movil.js) */
  .fm-plegado .sec-lead { margin-bottom: 0; }
  .fm-plegado .sec-lead ~ .sec-lead { display: none; }
  .fm-plegado .sec-lead:first-of-type {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  }
  .fm-mas {
    display: inline-block;
    background: none; border: 0; padding: 8px 0 0; color: var(--gold, #d4af37);
    font: 700 14px 'Inter', 'Inter Fallback', sans-serif; cursor: pointer;
  }

  /* Preguntas frecuentes plegadas detrás de un botón (ver ficha-movil.js) */
  .fm-faq details { display: none; }
  .fm-ver-faq {
    width: 100%; padding: 15px 18px; border-radius: 12px; cursor: pointer;
    background: var(--panel, #2a2d33); border: 1px solid var(--line, #3a3e45); color: var(--white, #fff);
    font: 700 15px 'Inter', 'Inter Fallback', sans-serif; text-align: left;
  }

  /* Financiación sin la foto del asesor */
  .credito-media { display: none; }

  /* Otros modelos: una fila que se desliza de lado */
  .fm-otros {
    display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 10px !important; padding-bottom: 6px; scrollbar-width: none;
  }
  .fm-otros::-webkit-scrollbar { display: none; }
  .fm-otros > a { flex: 0 0 150px; scroll-snap-align: start; }

  /* Notas legales plegadas: se abren tocando el título */
  .fm-legal:not(.abierto) > div:not(:first-child):not(:last-child) { display: none; }
  .fm-legal > div:first-child { cursor: pointer; }
  .fm-legal > div:first-child::after { content: '  ▸ ver'; letter-spacing: .5px; text-transform: none; font-weight: 600; color: var(--gold, #d4af37); }
  .fm-legal.abierto > div:first-child::after { content: '  ▾ ocultar'; }

  /* Burbuja de WhatsApp: solo la foto con el ícono, sin el texto */
  .float-wpp { padding: 0 !important; background: transparent !important; box-shadow: none !important; bottom: 14px !important; right: 12px !important; gap: 0 !important; }
  .float-wpp > span:last-child { display: none !important; }
  .float-wpp .float-face { width: 62px !important; height: 62px !important; margin: 0 !important; }
  .float-wpp .float-face img { width: 62px !important; height: 62px !important; border-width: 2.5px !important; box-shadow: 0 6px 18px rgba(0,0,0,.45) !important; }
  .float-wpp .float-badge { width: 16px !important; height: 16px !important; bottom: 0 !important; right: 0 !important; padding: 2px !important; }
  body { padding-bottom: 24px !important; }
}

/* Computador: preguntas frecuentes, 4 visibles y el resto detrás de un botón (ver ficha-movil.js) */
.fm-faq-pc details:nth-of-type(n+5) { display: none; }
.fm-ver-faq-pc {
  margin-top: 6px; padding: 14px 18px; border-radius: 12px; cursor: pointer;
  background: none; border: 1px solid var(--line, #3a3e45); color: var(--gold, #d4af37);
  font: 700 15px 'Inter', 'Inter Fallback', sans-serif;
}