.contenedor-principal {
      font-family: 'DM Sans', sans-serif;
      color: #ffffff;
      background: #1a1a1a;
  }

  .contenedor-principal * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }

  .seccion-hero {
      padding: 140px 40px 150px;
      text-align: center;
  }

  .texto-destacado-superior {
      font-size: 12px;
      font-weight: 500;
      color: var(--marca-blanco);
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 16px;
  }

  .seccion-hero h1 {
      font-family: 'Outfit', sans-serif;
      font-size: clamp(1.8rem, 4vw, 3rem);
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -1px;
      margin-bottom: 12px;
  }

  .seccion-hero h1 span {
      /* Palabra destacada dentro de un titular que YA es blanco: en blanco
         desapareceria. Va en rojo de marca. Es legitimo porque es texto
         GRANDE (28,8-48px, peso 800) y para texto grande WCAG AA pide 3:1,
         no 4,5:1: #e92123 sobre #1a1a1a da 3,90:1. */
      color: var(--marca-rojo);
  }

  .seccion-hero p {
      font-size: 0.95rem;
      color: #aaaaaa;
      max-width: 480px;
      margin: 0 auto;
      line-height: 1.7;
  }

  .seccion-filtros {
      display: none;
  }

  .contenedor-filtros-coches {
      display: flex;
      gap: 40px;
      max-width: 1600px;
      margin: 0 auto;
      padding: 0 40px 60px;
  }

  /* ─── SIDEBAR DESKTOP ────────────────────────────────────── */
  .sidebar-filtros {
      width: 210px;
      flex-shrink: 0;
      position: sticky;
      top: 100px;
      height: fit-content;
      max-height: calc(100vh - 120px);
      overflow-y: auto;
      overflow-x: hidden;
      padding-right: 20px;
      border-right: 1px solid rgba(255, 255, 255, 0.05);
      /* Opcional: estilizar la barra de scroll para que quede bonita */
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  }

  .sidebar-filtros::-webkit-scrollbar {
      width: 4px;
  }

  .sidebar-filtros::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 4px;
  }

  /* Header y footer del drawer — ocultos en desktop */
  .drawer-header,
  .drawer-footer {
      display: none;
  }

  /* ─── SECCIÓN FILTRO ─────────────────────────────────────── */
  .filtro-sidebar {
      margin-bottom: 4px;
  }

  .filtro-ver-todos {
      margin-bottom: 16px;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  /* ─── BOTÓN ACORDEÓN (título colapsable) ─────────────────── */
  .titulo-filtro {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      background: none;
      border: none;
      cursor: pointer;
      padding: 9px 10px 9px 2px;
      border-radius: 6px;
      color: var(--marca-blanco);
      font-family: 'DM Sans', sans-serif;
      /* 12px es el minimo legible en movil (R-07). Por debajo, el texto en
         mayusculas con letter-spacing se vuelve dificil de leer al sol. */
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      text-align: left;
      transition: background 0.15s;
      gap: 6px;
  }

  .titulo-filtro:hover {
      background: rgba(233, 33, 35, 0.06);
  }

  .titulo-filtro-texto {
      flex: 1;
  }

  .flecha-acordeon {
      display: flex;
      align-items: center;
      color: #666;
      transition: transform 0.25s ease;
      flex-shrink: 0;
  }

  .titulo-filtro.abierto .flecha-acordeon {
      transform: rotate(180deg);
  }

  /* ─── CONTENIDO ACORDEÓN ─────────────────────────────────── */
  .contenido-acordeon {
      overflow: hidden;
      max-height: 600px;
      transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.25s ease;
      padding-top: 6px;
      padding-bottom: 10px;
      opacity: 1;
  }

  .contenido-acordeon.cerrado {
      max-height: 0;
      padding-top: 0;
      padding-bottom: 0;
      opacity: 0;
  }

  .contenido-acordeon>div {
      display: flex;
      flex-direction: column;
      gap: 6px;
  }

  /* ─── BOTONES FILTRO ─────────────────────────────────────── */
  .boton-filtro {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 16px;
      border-radius: 50px;
      border: 0.5px solid rgba(255, 255, 255, 0.15);
      background: #2d2d2d;
      color: #aaaaaa;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
      font-family: 'DM Sans', sans-serif;
      text-align: left;
      width: 100%;
  }

  .boton-filtro:hover {
      border-color: var(--marca-rojo);
      color: #ffffff;
  }

  .boton-filtro.activo {
      background: var(--marca-rojo);
      border-color: var(--marca-rojo);
      color: #ffffff;
  }

  .icono-boton-filtro {
      font-size: 14px;
      flex-shrink: 0;
  }

  /* ─── PRECIO ─────────────────────────────────────────────── */
  .texto-precio {
      font-size: 13px;
      color: #aaaaaa;
      white-space: nowrap;
  }

  .texto-precio span {
      color: var(--marca-blanco);
      font-weight: 700;
      font-family: 'Outfit', sans-serif;
      font-size: 16px;
  }

  .filtro-precio {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      margin-bottom: 20px;
      flex-wrap: wrap;
  }

  .contenedor-slider {
      position: relative;
      width: 260px;
      height: 20px;
      display: flex;
      align-items: center;
  }

  .pista-slider {
      position: absolute;
      width: 100%;
      height: 3px;
      background: #3a3a3a;
      border-radius: 3px;
      overflow: hidden;
  }

  .relleno-slider {
      height: 100%;
      background: var(--marca-rojo);
      border-radius: 3px;
      transition: width 0.1s;
  }

  .limites-precio {
      display: flex;
      justify-content: space-between;
      /* R-07: 11px -> 12px. El ancho pasa a 100% para que los dos extremos
         quepan sin desbordar el panel de filtros al crecer la letra. */
      font-size: 12px;
      color: #aaaaaa;
      width: 100%;
      max-width: 260px;
      margin-top: 2px;
  }

  input[type="range"].slider-precio {
      position: relative;
      width: 100%;
      appearance: none;
      background: transparent;
      cursor: pointer;
      z-index: 1;
  }

  input[type="range"].slider-precio::-webkit-slider-thumb {
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--marca-rojo);
      border: 3px solid #1a1a1a;
      box-shadow: 0 0 0 2px var(--marca-rojo);
      cursor: grab;
      transition: transform 0.15s;
  }

  input[type="range"].slider-precio::-webkit-slider-thumb:active {
      cursor: grabbing;
      transform: scale(1.2);
  }

  /* ─── CONTENIDO PRINCIPAL ────────────────────────────────── */
  .contenido-coches {
      flex: 1;
      min-width: 0;
  }

  .contador-resultados {
      padding: 0 40px 20px;
      font-size: 13px;
      color: #aaaaaa;
      max-width: 1600px;
      margin: 0 auto;
  }

  .contador-resultados span {
      color: var(--marca-blanco);
      font-weight: 600;
  }

  .rejilla-vehiculos {
      padding: 0 30px 60px;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(385px, 385px));
      gap: 20px;
      max-width: 1600px;
      margin: 0 auto;
  }

  /* ─── TARJETAS ───────────────────────────────────────────── */
  .tarjeta-vehiculo {
      background: #2d2d2d;
      border-radius: 14px;
      overflow: hidden;
      border: 0.5px solid rgba(255, 255, 255, 0.06);
      transition: transform 0.25s, border-color 0.2s;
      min-width: 385px;
      width: 100%;
  }

  .tarjeta-vehiculo:hover {
      transform: translateY(-4px);
      border-color: rgba(233, 33, 35, 0.3);
  }

  .tarjeta-vehiculo.oculta {
      display: none;
  }

  .imagen-vehiculo {
      width: 100%;
      height: 250px;
      object-fit: cover;
      display: block;
      background: #3a3a3a;
  }

  .imagen-placeholder {
      width: 100%;
      height: 250px;
      background: #3a3a3a;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 60px;
  }

  .cuerpo-tarjeta {
      padding: 20px;
  }

  .grupo-etiquetas {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 12px;
  }

  .etiqueta {
      /* R-07: era el texto mas pequeno de la web (10px). El contenedor
         .grupo-etiquetas ya lleva flex-wrap, asi que crecer no desborda. */
      font-size: 12px;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: 20px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
  }

  .etiqueta-particular {
      background: rgba(233, 33, 35, 0.15);
      color: var(--marca-blanco);
  }

  .etiqueta-empresa {
      background: rgba(255, 255, 255, 0.08);
      color: #aaaaaa;
  }

  .etiqueta-grupo {
      background: rgba(233, 33, 35, 0.15);
      color: var(--marca-blanco);
  }

  .marca-vehiculo {
      font-size: 12px; /* R-07 */
      color: #aaaaaa;
      margin-bottom: 3px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
  }

  .nombre-vehiculo {
      font-family: 'Outfit', sans-serif;
      font-size: 1.2rem;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 10px;
  }

  .especificaciones {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 16px;
      padding-bottom: 16px;
      border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
  }

  .especificacion-item {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      color: #aaaaaa;
  }

  .pie-tarjeta {
      display: flex;
      align-items: center;
      justify-content: space-between;
  }

  .bloque-precio .texto-desde {
      font-size: 12px; /* R-07 */
      color: #aaaaaa;
      display: block;
  }

  .bloque-precio .cantidad-precio {
      font-family: 'Outfit', sans-serif;
      font-size: 1.8rem;
      font-weight: 800;
      color: var(--marca-blanco);
      line-height: 1;
  }

  .bloque-precio .texto-dia {
      font-size: 12px; /* R-07 */
      color: #aaaaaa;
  }

  .boton-presupuesto {
      background: transparent;
      border: 0.5px solid rgba(255, 255, 255, 0.2);
      color: #ffffff;
      padding: 9px 18px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      font-family: 'DM Sans', sans-serif;
      transition: all 0.2s;
      text-decoration: none;
  }

  .boton-presupuesto:hover {
      background: var(--marca-rojo);
      border-color: var(--marca-rojo);
      color: #ffffff;
  }

  .mensaje-sin-resultados {
      display: none;
      text-align: center;
      padding: 40px;
      color: #aaaaaa;
      font-size: 0.95rem;
      grid-column: 1/-1;
  }

  .seccion-llamada-accion {
      background: #2d2d2d;
      margin: 0 40px;
      border-radius: 16px;
      padding: 50px 40px;
      text-align: center;
      border: 0.5px solid rgba(255, 255, 255, 0.06);
  }

  .seccion-llamada-accion h2 {
      font-family: 'Outfit', sans-serif;
      font-size: 1.8rem;
      font-weight: 800;
      margin-bottom: 10px;
      color: #ffffff;
  }

  .seccion-llamada-accion h2 span {
      /* Mismo caso: el h2 padre ya es #ffffff. Texto grande (28,8px, peso
         800), asi que el rojo de marca cumple AA con 3,90:1. */
      color: var(--marca-rojo);
  }

  .seccion-llamada-accion p {
      font-size: 0.95rem;
      color: #aaaaaa;
      max-width: 600px;
      margin: 0 auto 30px;
      line-height: 1.7;
  }

  .btn-cargar-mas {
      background: transparent;
      border: 2px solid var(--marca-rojo);
      color: var(--marca-blanco);
      padding: 12px 32px;
      font-family: 'Outfit', sans-serif;
      font-weight: 600;
      font-size: 1rem;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: block;
      margin: 40px auto 20px;
      width: fit-content;
      min-width: 200px;
      text-align: center;
  }

  .btn-cargar-mas:hover {
      background: var(--marca-rojo-fuerte);
      color: #ffffff;
  }

  /* ─── BOTÓN FLOTANTE MÓVIL (oculto en desktop) ───────────── */
  #btn-filtros-mobile {
      display: none;
  }

  /* ─── OVERLAY ────────────────────────────────────────────── */
  #filtros-overlay {
      /* Siempre en el DOM, oculto con opacity+pointer-events    */
      /* NUNCA display:none — rompe transiciones en móvil       */
      display: none;
      /* solo visible en móvil via media query de abajo */
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.55);
      z-index: 1040;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.28s ease, visibility 0.28s ease;
  }

  /* ─── BREAKPOINT 1024px ──────────────────────────────────── */
  @media (max-width: 1024px) {
      .contenedor-filtros-coches {
          gap: 24px;
          padding: 0 30px 40px;
      }

      .sidebar-filtros {
          width: 185px;
          padding-right: 16px;
      }

      .rejilla-vehiculos {
          padding: 0 30px 40px;
          grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
          gap: 16px;
      }

      .tarjeta-vehiculo {
          min-width: 0;
      }

      .imagen-vehiculo {
          height: 230px;
      }

      .cuerpo-tarjeta {
          padding: 16px;
      }

      .nombre-vehiculo {
          font-size: 1.1rem;
      }

      .bloque-precio .cantidad-precio {
          font-size: 1.5rem;
      }

      .boton-presupuesto {
          padding: 8px 14px;
          font-size: 12px; /* R-07: es un boton, no puede bajar de 12px */
          /* Es el boton de conversion de cada tarjeta: alto de dedo */
          min-height: 44px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
      }

      .seccion-llamada-accion {
          margin: 0 30px;
          padding: 40px 30px;
      }
  }

  /* ─── BREAKPOINT 768px — DRAWER MÓVIL ───────────────────── */
  /* La segunda condicion cubre el telefono en apaisado (R-05): a 844x390 el
     sidebar de filtros seguia siendo la columna fija de escritorio en lugar del
     drawer, y la cabecera ocupaba 104px de los 390px de alto. */
  @media (max-width: 768px),
         (max-width: 1024px) and (max-height: 500px) {

      /* El overlay solo existe en móvil — visible con .activo */
      #filtros-overlay {
          display: block;
          /* siempre en el DOM en móvil */
          pointer-events: none;
          /* no bloquea nada por defecto */
      }

      #filtros-overlay.activo {
          opacity: 1;
          visibility: visible;
          pointer-events: auto;
          /* solo captura clicks cuando está activo */
      }

      /* R-08: los 100px de arriba existen para esquivar la cabecera, que en
         escritorio va en position:absolute y se superpone al contenido. A partir
         de 768px la cabecera pasa a position:relative y ya ocupa su propio
         espacio, asi que esos 100px eran aire muerto bajo la cabecera. */
      .seccion-hero {
          padding: 32px 20px 40px;
      }

      .seccion-hero h1 {
          font-size: 2rem;
      }

      .seccion-hero p {
          font-size: 0.85rem;
      }

      /* Layout principal en columna — el sidebar se convierte en drawer */
      .contenedor-filtros-coches {
          flex-direction: column;
          padding: 0 0 40px;
          gap: 0;
      }

      /* ── DRAWER ── */
      .sidebar-filtros {
          position: fixed;
          top: 0;
          left: 0;
          width: min(320px, 88vw);
          height: 100dvh;
          max-height: 100dvh;
          background: #1e1e1e;
          border-right: 1px solid rgba(255, 255, 255, 0.08);
          z-index: 1050;
          overflow-y: auto;
          overscroll-behavior: contain;
          transform: translateX(-100%);
          transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
          display: flex;
          flex-direction: column;
          padding: 0;
          /* scroll suave */
          -webkit-overflow-scrolling: touch;
      }

      .sidebar-filtros.abierto {
          transform: translateX(0);
          box-shadow: 6px 0 40px rgba(0, 0, 0, 0.5);
      }

      /* ── HEADER DRAWER ── */
      .drawer-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 18px 20px 14px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.06);
          position: sticky;
          top: 0;
          background: #1e1e1e;
          z-index: 2;
          flex-shrink: 0;
      }

      .drawer-titulo {
          font-family: 'Outfit', sans-serif;
          font-size: 1.1rem;
          font-weight: 700;
          color: #fff;
      }

      .btn-cerrar-drawer {
          background: rgba(255, 255, 255, 0.07);
          border: none;
          color: #aaa;
          /* 44x44: cerrar el panel de filtros con el pulgar sin fallar */
          width: 44px;
          height: 44px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: background 0.2s, color 0.2s;
      }

      .btn-cerrar-drawer:hover {
          background: rgba(233, 33, 35, 0.15);
          color: var(--marca-blanco);
      }

      /* ── SECCIONES INTERNAS ── */
      .filtro-ver-todos {
          padding: 14px 20px;
          margin-bottom: 0;
          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      }

      .filtro-ver-todos .boton-filtro {
          width: 100%;
      }

      /* Los filtros son la interaccion principal de esta pagina en movil:
         44px de alto minimo en cada boton del panel */
      .boton-filtro {
          min-height: 44px;
      }

      .titulo-filtro {
          min-height: 44px;
      }

      .filtro-sidebar {
          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      }

      .titulo-filtro {
          padding: 14px 20px;
          border-radius: 0;
          font-size: 12px;
      }

      .titulo-filtro:hover {
          background: rgba(233, 33, 35, 0.04);
      }

      .contenido-acordeon {
          padding-left: 20px;
          padding-right: 20px;
      }

      /* ── FOOTER DRAWER ── */
      .drawer-footer {
          display: flex;
          flex-direction: column;
          gap: 10px;
          padding: 16px 20px 24px;
          margin-top: auto;
          border-top: 1px solid rgba(255, 255, 255, 0.06);
          background: #1e1e1e;
          position: sticky;
          bottom: 0;
          flex-shrink: 0;
      }

      .btn-aplicar-filtros {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          background: var(--marca-rojo-fuerte);
          border: none;
          color: #fff;
          font-family: 'Outfit', sans-serif;
          font-weight: 700;
          font-size: 1rem;
          padding: 14px;
          border-radius: 10px;
          cursor: pointer;
          transition: background 0.2s;
          width: 100%;
      }

      .btn-aplicar-filtros:hover {
          background: #e87c45;
      }

      .badge-aplicar {
          background: rgba(255, 255, 255, 0.2);
          border-radius: 20px;
          padding: 2px 8px;
          font-size: 0.8rem;
          font-weight: 600;
          min-width: 24px;
          text-align: center;
      }

      .btn-limpiar-filtros {
          background: transparent;
          border: 1px solid rgba(255, 255, 255, 0.12);
          color: #aaa;
          font-family: 'DM Sans', sans-serif;
          font-size: 0.85rem;
          padding: 10px;
          border-radius: 8px;
          cursor: pointer;
          transition: border-color 0.2s, color 0.2s;
          width: 100%;
          min-height: 44px;
      }

      .btn-limpiar-filtros:hover {
          border-color: rgba(255, 255, 255, 0.3);
          color: #fff;
      }

      /* ── BOTÓN FLOTANTE ── */
      #btn-filtros-mobile {
          display: flex;
          align-items: center;
          gap: 8px;
          position: fixed;
          bottom: 24px;
          left: 50%;
          transform: translateX(-50%);
          z-index: 1030;
          background: var(--marca-rojo-fuerte);
          color: #fff;
          border: none;
          padding: 13px 26px;
          border-radius: 50px;
          font-family: 'Outfit', sans-serif;
          font-weight: 700;
          font-size: 0.95rem;
          cursor: pointer;
          box-shadow: 0 8px 30px rgba(233, 33, 35, 0.45);
          transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
          white-space: nowrap;
      }

      #btn-filtros-mobile:hover {
          background: #e87c45;
          box-shadow: 0 10px 36px rgba(233, 33, 35, 0.55);
          transform: translateX(-50%) translateY(-2px);
      }

      #btn-filtros-mobile:active {
          transform: translateX(-50%) scale(0.97);
      }

      /* Badge con nº de filtros activos */
      .badge-filtros {
          background: #fff;
          color: var(--marca-rojo-fuerte);
          font-size: 0.75rem;
          font-weight: 800;
          border-radius: 50%;
          width: 20px;
          height: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          line-height: 1;
          animation: popIn 0.2s ease;
      }

      @keyframes popIn {
          0% {
              transform: scale(0.5);
              opacity: 0;
          }

          100% {
              transform: scale(1);
              opacity: 1;
          }
      }

      /* Contenido: ocupa todo el ancho */
      .contenido-coches {
          width: 100%;
          padding-bottom: 90px;
          /* espacio para botón flotante */
      }

      .filtro-precio {
          flex-direction: column;
          align-items: center;
          gap: 10px;
          margin-bottom: 15px;
          padding: 0 20px;
      }

      .contenedor-slider,
      .limites-precio {
          width: 100%;
          max-width: 400px;
      }

      .contador-resultados {
          padding: 0 20px 15px;
          font-size: 12px;
      }

      .rejilla-vehiculos {
          padding: 0 20px 40px;
          grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
          gap: 15px;
      }

      .tarjeta-vehiculo {
          min-width: 0;
      }

      .imagen-vehiculo {
          height: 180px;
      }

      .cuerpo-tarjeta {
          padding: 15px;
      }

      .nombre-vehiculo {
          font-size: 1.1rem;
      }

      .especificaciones {
          gap: 8px;
          margin-bottom: 12px;
          padding-bottom: 12px;
      }

      .especificacion-item {
          font-size: 12px; /* R-07 */
      }

      .bloque-precio .cantidad-precio {
          font-size: 1.5rem;
      }

      .boton-presupuesto {
          padding: 8px 14px;
          font-size: 12px; /* R-07: es un boton, no puede bajar de 12px */
          /* Es el boton de conversion de cada tarjeta: alto de dedo */
          min-height: 44px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
      }

      .seccion-llamada-accion {
          margin: 0 20px;
          padding: 30px 20px;
      }

      .seccion-llamada-accion h2 {
          font-size: 1.4rem;
      }

      .seccion-llamada-accion p {
          font-size: 0.85rem;
          margin-bottom: 20px;
      }

      .btn-cargar-mas {
          margin: 30px auto 15px;
          padding: 10px 24px;
          font-size: 0.9rem;
          min-width: 180px;
      }
  }

  /* ─── TELEFONO ESTANDAR Y PEQUENO: 480px (R-04) ──────────────────────
     Antes de este bloque el ultimo corte estaba en 768px, asi que un telefono
     de 320px recibia la misma tipografia y los mismos margenes que un iPad de
     768px. Se baja la escala del titular y se estrecha el margen lateral para
     ganar ancho util en la tarjeta.
     NO se toca el font-size de los campos de filtro: 16px minimo por el zoom
     de Safari en iOS (R-02). */
  @media (max-width: 480px) {
      .seccion-hero {
          padding: 28px 16px 32px;
      }

      .seccion-hero h1 {
          font-size: 1.625rem;
          line-height: 1.2;
      }

      .rejilla-vehiculos {
          padding: 0 16px 32px;
          grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      }

      .cuerpo-tarjeta {
          padding: 14px;
      }

      .seccion-llamada-accion {
          margin: 0 16px;
          padding: 28px 20px;
      }
  }

  /* ─── TELEFONO EN APAISADO (R-05) ────────────────────────────────────
     A 844x390 la pagina recibia el layout de escritorio (sidebar de filtros
     fijo y cabecera de 104px). Con la cabecera ya compacta, aqui se recorta el
     aire vertical del hero para que la primera tarjeta entre en pantalla. */
  @media (max-width: 1024px) and (max-height: 500px) {
      .seccion-hero {
          padding: 18px 20px 20px;
      }

      .seccion-hero h1 {
          font-size: 1.5rem;
          line-height: 1.2;
      }

      .seccion-hero p {
          margin-top: 4px;
      }

      .imagen-vehiculo {
          height: 150px;
      }
  }