/** Shopify CDN: Minification failed

Line 39:0 Unexpected "{"
Line 39:1 Unexpected "{"
Line 39:3 Expected identifier but found "'section-main-page.css'"
Line 41:0 Unexpected "{"
Line 41:1 Expected identifier but found "%"
Line 42:12 Unexpected "{"
Line 42:21 Expected ":"
Line 43:16 Expected identifier but found whitespace
Line 43:18 Unexpected "{"
Line 43:27 Expected ":"
... and 39 more hidden warnings

**/
.page-title {
  margin-top: 0;
}

.main-page-title {
  margin-bottom: 3rem;
}

@media screen and (min-width: 750px) {
  .main-page-title {
    margin-bottom: 4rem;
  }
}

.page-placeholder-wrapper {
  display: flex;
  justify-content: center;
}

.page-placeholder {
  width: 52.5rem;
  height: 52.5rem;
}
{{ 'section-main-page.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }

  .carousel-container {
    overflow-x: auto;
    white-space: nowrap;
    scroll-behavior: smooth;
    padding: 1rem 0;
  }

  .carousel-track {
    display: flex;
    gap: 1rem;
  }

  .carousel-item {
    flex: 0 0 auto;
    width: 200px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
  }

  .carousel-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }
{%- endstyle -%}

<div class="page-width page-width--narrow section-{{ section.id }}-padding">
  <h1 class="main-page-title page-title h0{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
    {{ page.title | escape }}
  </h1>
  <div class="rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
    {{ page.content }}
  </div>

  <!-- CARRUSEL DE PRODUCTOS AQUÍ -->
  <div class="carousel-container">
    <div class="carousel-track">
      {% for product in collections['frontpage'].products %}
        <div class="carousel-item">
          <a href="{{ product.url }}">
            <img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}">
            <p>{{ product.title }}</p>
            <p>{{ product.price | money }}</p>
          </a>
        </div>
      {% endfor %}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Página con carrusel",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "header",
      "content": "Padding"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Espaciado superior",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Espaciado inferior",
      "default": 36
    }
  ]
}
{% endschema %}