/** Shopify CDN: Minification failed

Line 16:0 Unexpected "`"
Line 17:1 Expected identifier but found "%"
Line 21:0 Unexpected "{"
Line 21:1 Expected identifier but found "%"
Line 22:0 Unexpected "<"
Line 44:7 Expected identifier but found "%"
Line 45:8 Unexpected "<"
Line 52:15 Expected identifier but found "%"
Line 53:16 Unexpected "{"
Line 53:17 Unexpected "{"
... and 61 more hidden warnings

**/
```liquid
{% liquid
  assign featured_collection = collections['vehiculos-destacados']
%}

{% if featured_collection != blank %}
<section class="tmu-featured">
  <div class="tmu-featured__inner">

    <div class="tmu-featured__heading">
      <div class="tmu-featured__eyebrow">
        <span class="tmu-featured__dot"></span>
        SELECCIÓN ESPECIAL
      </div>

      <h2>Vehículos <span>destacados</span></h2>

      <p>
        Encuentra tu próximo vehículo entre nuestras opciones seleccionadas.
        Calidad, confianza y excelentes oportunidades.
      </p>

      <div class="tmu-featured__decoration">
        <span></span><span></span>
      </div>
    </div>

    <div class="tmu-featured__grid">
      {% for product in featured_collection.products limit: 8 %}
        <article class="tmu-featured__card">

          <a href="{{ product.url }}"
             class="tmu-featured__image-link"
             aria-label="Ver {{ product.title | escape }}">

            <div class="tmu-featured__image">
              {% if product.featured_image %}
                {{
                  product.featured_image
                  | image_url: width: 900
                  | image_tag:
                    loading: 'lazy',
                    widths: '320, 480, 640, 900',
                    alt: product.featured_image.alt
                }}
              {% else %}
                <div class="tmu-featured__no-image">
                  Imagen no disponible
                </div>
              {% endif %}

              <span class="tmu-featured__badge">
                DESTACADO
              </span>

              <span class="tmu-featured__arrow" aria-hidden="true">
                ↗
              </span>
            </div>
          </a>

          <div class="tmu-featured__info">
            <div class="tmu-featured__type">
              {{ product.type | default: 'Vehículo seleccionado' | escape }}
            </div>

            <h3>
              <a href="{{ product.url }}">
                {{ product.title | escape }}
              </a>
            </h3>

            {% assign vehicle_year = product.metafields.custom.modelov.value %}
            {% assign vehicle_cc = product.metafields.custom.cilindrada.value %}
            {% assign vehicle_km = product.metafields.custom.kmtrs.value %}

            {% if vehicle_year != blank or vehicle_cc != blank or vehicle_km != blank %}
              <div class="tmu-featured__specs">
                {% if vehicle_year != blank %}
                  <span>
                    <span class="tmu-featured__spec-icon">◷</span>
                    {{ vehicle_year }}
                  </span>
                {% endif %}

                {% if vehicle_cc != blank %}
                  <span>
                    <span class="tmu-featured__spec-icon">◈</span>
                    {{ vehicle_cc }} cc
                  </span>
                {% endif %}

                {% if vehicle_km != blank %}
                  <span>
                    <span class="tmu-featured__spec-icon">↗</span>
                    {{ vehicle_km }} km
                  </span>
                {% endif %}
              </div>
            {% endif %}

            <div class="tmu-featured__bottom">
              <div class="tmu-featured__price">
                <small>Precio</small>
                <strong>
                  {% if product.price_varies %}
                    Desde {{ product.price_min | money }}
                  {% else %}
                    {{ product.price | money }}
                  {% endif %}
                </strong>
              </div>

              <a href="{{ product.url }}"
                 class="tmu-featured__button"
                 aria-label="Ver detalles de {{ product.title | escape }}">
                Ver vehículo
                <span aria-hidden="true">→</span>
              </a>
            </div>
          </div>

        </article>
      {% else %}
        <p>No hay vehículos disponibles en esta colección.</p>
      {% endfor %}
    </div>

    <div class="tmu-featured__footer">
      <a href="{{ featured_collection.url }}" class="tmu-featured__all">
        Explorar todos los vehículos
        <span aria-hidden="true">→</span>
      </a>
      <p>Tu próximo vehículo puede estar aquí.</p>
    </div>

  </div>
</section>
{% endif %}

<style>
  /* ==========================================
     TU MOTO USADA — VEHÍCULOS DESTACADOS
     Diseño compacto, uniforme y adaptable
     ========================================== */

  .tmu-featured {
    --tmu-red: #e50914;
    --tmu-dark: #151515;
    --tmu-card: #1c1c1c;
    --tmu-muted: #a5a5a5;

    background: #111111;
    color: #ffffff;
    padding: 64px 22px 58px;
    overflow: hidden;
  }

  .tmu-featured *,
  .tmu-featured *::before,
  .tmu-featured *::after {
    box-sizing: border-box;
  }

  .tmu-featured__inner {
    max-width: 1440px;
    margin: 0 auto;
  }

  /* ENCABEZADO */

  .tmu-featured__heading {
    max-width: 720px;
    margin-bottom: 36px;
  }

  .tmu-featured__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #d4d4d4;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 15px;
  }

  .tmu-featured__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tmu-red);
    box-shadow: 0 0 12px #e5091470;
  }

  .tmu-featured__heading h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(32px, 4.5vw, 54px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1.8px;
  }

  .tmu-featured__heading h2 span {
    color: var(--tmu-red);
  }

  .tmu-featured__heading p {
    max-width: 570px;
    margin: 16px 0 0;
    color: #b5b5b5;
    font-size: 15px;
    line-height: 1.8;
  }

  .tmu-featured__decoration {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 25px;
  }

  .tmu-featured__decoration span:first-child {
    width: 54px;
    height: 3px;
    background: var(--tmu-red);
    border-radius: 10px;
  }

  .tmu-featured__decoration span:last-child {
    width: 24px;
    height: 3px;
    background: #666666;
    border-radius: 10px;
    transform: skewX(-35deg);
  }

  /* CUADRÍCULA */

  .tmu-featured__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
  }

  /* TARJETA */

  .tmu-featured__card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    background: var(--tmu-card);
    border: 1px solid #ffffff18;
    border-radius: 12px;
    box-shadow: 0 3px 10px #00000018;
    transition:
      transform .25s ease,
      border-color .25s ease,
      box-shadow .25s ease;
  }

  .tmu-featured__card:hover {
    transform: translateY(-4px);
    border-color: #e5091480;
    box-shadow: 0 12px 25px #00000035;
  }

  .tmu-featured__image-link {
    display: block;
    color: inherit;
    text-decoration: none;
  }

  /* IMAGEN */

  .tmu-featured__image {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #202020;
  }

  .tmu-featured__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform .4s ease;
  }

  .tmu-featured__card:hover .tmu-featured__image img {
    transform: scale(1.035);
  }

  .tmu-featured__badge {
    position: absolute;
    top: 11px;
    left: 11px;
    padding: 6px 9px;
    border-radius: 4px;
    background: var(--tmu-red);
    color: #ffffff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .8px;
  }

  .tmu-featured__arrow {
    position: absolute;
    right: 11px;
    bottom: 11px;
    display: grid;
    place-items: center;
    width: 33px;
    height: 33px;
    border: 1px solid #ffffff35;
    border-radius: 50%;
    background: #111111c9;
    color: #ffffff;
    font-size: 19px;
    transition: background .2s ease;
  }

  .tmu-featured__card:hover .tmu-featured__arrow {
    background: var(--tmu-red);
  }

  .tmu-featured__no-image {
    display: grid;
    place-items: center;
    height: 100%;
    color: #aaaaaa;
    font-size: 12px;
  }

  /* INFORMACIÓN */

  .tmu-featured__info {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 15px;
  }

  .tmu-featured__type {
    margin-bottom: 7px;
    color: #e94a51;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  .tmu-featured__info h3 {
    margin: 0;
    min-height: 2.8em;
    color: #ffffff;
    font-size: clamp(15px, 1.35vw, 19px);
    font-weight: 750;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .tmu-featured__info h3 a {
    color: #ffffff;
    text-decoration: none;
    transition: color .2s ease;
  }

  .tmu-featured__info h3 a:hover {
    color: #ff626a;
  }

  /* ESPECIFICACIONES */

  .tmu-featured__specs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 10px;
    margin-top: 12px;
    color: #bdbdbd;
    font-size: 11px;
    line-height: 1.5;
  }

  .tmu-featured__specs span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

  .tmu-featured__spec-icon {
    color: #f0444d;
    font-size: 13px;
  }

  /* PRECIO Y BOTÓN */

  .tmu-featured__bottom {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: auto;
    padding-top: 15px;
  }

  .tmu-featured__price {
    padding-top: 12px;
    border-top: 1px solid #ffffff14;
  }

  .tmu-featured__price small {
    display: block;
    margin-bottom: 4px;
    color: #a6a6a6;
    font-size: 10px;
  }

  .tmu-featured__price strong {
    display: block;
    color: #ffffff;
    font-size: clamp(17px, 1.45vw, 22px);
    font-weight: 800;
    letter-spacing: -.4px;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  .tmu-featured__button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin-top: 2px;
    padding: 12px 13px;
    border: 1px solid #e5091470;
    border-radius: 7px;
    background: #e5091410;
    color: #ffffff;
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
    transition:
      background .2s ease,
      border-color .2s ease;
  }

  .tmu-featured__button span {
    font-size: 18px;
  }

  .tmu-featured__button:hover {
    background: var(--tmu-red);
    border-color: var(--tmu-red);
    color: #ffffff;
  }

  /* PIE DE SECCIÓN */

  .tmu-featured__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    margin-top: 38px;
    text-align: center;
  }

  .tmu-featured__all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 15px 24px;
    border-radius: 7px;
    background: var(--tmu-red);
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
  }

  .tmu-featured__all:hover {
    background: #bd0710;
    color: #ffffff;
    transform: translateY(-2px);
  }

  .tmu-featured__footer p {
    margin: 0;
    color: #929292;
    font-size: 12px;
  }

  /* TABLET */

  @media (max-width: 1100px) {
    .tmu-featured__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .tmu-featured__info {
      padding: 13px;
    }
  }

  /* MÓVILES */

  @media (max-width: 749px) {
    .tmu-featured {
      padding: 42px 14px;
    }

    .tmu-featured__heading {
      margin-bottom: 25px;
    }

    .tmu-featured__heading h2 {
      font-size: 35px;
      letter-spacing: -1px;
    }

    .tmu-featured__heading p {
      font-size: 13px;
      line-height: 1.7;
    }

    .tmu-featured__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 11px;
    }

    .tmu-featured__card {
      border-radius: 9px;
    }

    .tmu-featured__image {
      aspect-ratio: 1 / .88;
    }

    .tmu-featured__badge {
      top: 8px;
      left: 8px;
      padding: 5px 6px;
      font-size: 8px;
      letter-spacing: .4px;
    }

    .tmu-featured__arrow {
      right: 8px;
      bottom: 8px;
      width: 28px;
      height: 28px;
      font-size: 16px;
    }

    .tmu-featured__info {
      padding: 10px;
    }

    .tmu-featured__type {
      font-size: 8px;
      letter-spacing: .5px;
    }

    .tmu-featured__info h3 {
      min-height: 2.8em;
      font-size: 13px;
    }

    .tmu-featured__specs {
      gap: 6px;
      margin-top: 10px;
      font-size: 10px;
    }

    .tmu-featured__bottom {
      gap: 10px;
      padding-top: 12px;
    }

    .tmu-featured__price {
      padding-top: 10px;
    }

    .tmu-featured__price strong {
      font-size: 16px;
    }

    .tmu-featured__button {
      padding: 10px 8px;
      font-size: 10px;
    }

    .tmu-featured__all {
      padding: 14px 17px;
      font-size: 12px;
    }
  }

  /* ACCESIBILIDAD */

  @media (prefers-reduced-motion: reduce) {
    .tmu-featured *,
    .tmu-featured *::before,
    .tmu-featured *::after {
      transition: none !important;
    }
  }
</style>
```