/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 18:0 Unexpected "<"
Line 19:7 Unexpected "{"
Line 19:16 Expected ":"
Line 20:15 Expected identifier but found whitespace
Line 20:17 Unexpected "{"
Line 20:26 Expected ":"
Line 21:10 Expected identifier but found whitespace
Line 21:12 Unexpected "{"
... and 160 more hidden warnings

**/
{% endcomment %}
 
<style>
  #cr-{{ section.id }}.cr-section {
    background: {{ section.settings.bg_color }};
    color: {{ section.settings.text_color }};
    padding-top: {{ section.settings.padding_top }}px;
    padding-bottom: {{ section.settings.padding_bottom }}px;
  }
 
  #cr-{{ section.id }} .cr-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
  }
 
  #cr-{{ section.id }} .cr-heading {
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 32px;
  }
 
  #cr-{{ section.id }} .cr-carousel {
    position: relative;
  }
 
  #cr-{{ section.id }} .cr-track-viewport {
    overflow: hidden;
  }
 
  #cr-{{ section.id }} .cr-track {
    display: flex;
    transition: transform 0.45s ease;
    align-items: center;
  }
 
  #cr-{{ section.id }} .cr-card {
    flex: 0 0 33.3333%;
    box-sizing: border-box;
    padding: 12px;
    display: flex;
    justify-content: center;
  }
 
  #cr-{{ section.id }} .cr-card-inner {
    background: {{ section.settings.card_bg_color }};
    border-radius: 8px;
    padding: 26px 22px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.35s ease, padding 0.35s ease;
    opacity: 0.7;
    transform: scale(0.88);
  }
 
  #cr-{{ section.id }} .cr-card.is-center {
    z-index: 2;
  }
 
  #cr-{{ section.id }} .cr-card.is-center .cr-card-inner {
    opacity: 1;
    transform: scale(1.12);
    padding: 44px 34px;
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.18);
    position: relative;
  }
 
  #cr-{{ section.id }} .cr-stars {
    display: flex;
    gap: 2px;
    color: {{ section.settings.star_color }};
    margin-bottom: 14px;
  }
 
  #cr-{{ section.id }} .cr-star--empty {
    color: rgba(0, 0, 0, 0.2);
  }
 
  #cr-{{ section.id }} .cr-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 10px;
  }
 
  #cr-{{ section.id }} .cr-text {
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 22px;
    color: rgba(0, 0, 0, 0.72);
  }
 
  #cr-{{ section.id }} .cr-author {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
 
  #cr-{{ section.id }} .cr-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
  }
 
  #cr-{{ section.id }} .cr-avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ddd;
    color: #555;
    font-weight: 600;
    font-size: 18px;
  }
 
  #cr-{{ section.id }} .cr-author-name {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
  }
 
  #cr-{{ section.id }} .cr-time {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
    margin: 4px 0 0;
  }
 
  #cr-{{ section.id }} .cr-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 28px;
  }
 
  #cr-{{ section.id }} .cr-arrow {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #333;
    flex-shrink: 0;
  }
 
  #cr-{{ section.id }} .cr-arrow:hover {
    background: #f0f0f0;
  }
 
  #cr-{{ section.id }} .cr-dots {
    display: flex;
    align-items: center;
    gap: 8px;
  }
 
  #cr-{{ section.id }} .cr-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.2);
    padding: 0;
    cursor: pointer;
  }
 
  #cr-{{ section.id }} .cr-dot.is-active {
    background: rgba(0, 0, 0, 0.65);
    transform: scale(1.2);
  }
 
  @media (max-width: 999px) {
    #cr-{{ section.id }} .cr-card-inner {
      padding: 20px 14px;
    }
    #cr-{{ section.id }} .cr-card.is-center .cr-card-inner {
      padding: 32px 20px;
    }
    #cr-{{ section.id }} .cr-text {
      font-size: 13px;
    }
  }
 
  @media (max-width: 699px) {
    #cr-{{ section.id }} .cr-wrap {
      padding: 0 8px;
    }
    #cr-{{ section.id }} .cr-card {
      padding: 6px;
    }
    #cr-{{ section.id }} .cr-card-inner {
      padding: 14px 10px;
      transform: scale(0.85);
    }
    #cr-{{ section.id }} .cr-card.is-center .cr-card-inner {
      padding: 24px 14px;
      transform: scale(1.08);
    }
    #cr-{{ section.id }} .cr-title {
      font-size: 14px;
    }
    #cr-{{ section.id }} .cr-text {
      font-size: 11px;
      margin-bottom: 12px;
    }
    #cr-{{ section.id }} .cr-avatar {
      width: 38px;
      height: 38px;
    }
  }
</style>
 
<div
  class="cr-section"
  id="cr-{{ section.id }}"
  data-autoplay="{{ section.settings.enable_autoplay }}"
  data-autoplay-speed="{{ section.settings.autoplay_speed | times: 1000 }}"
>
  <div class="cr-wrap">
 
    {% if section.settings.show_heading and section.settings.heading != blank %}
      <h2 class="cr-heading">{{ section.settings.heading | escape }}</h2>
    {% endif %}
 
    {% if section.blocks.size > 0 %}
      <div class="cr-carousel" role="region" aria-roledescription="carousel" aria-label="{{ section.settings.heading | escape }}">
 
        <div class="cr-track-viewport">
          <div class="cr-track">
            {% for block in section.blocks %}
              <div class="cr-card" data-index="{{ forloop.index0 }}" {{ block.shopify_attributes }}>
                <div class="cr-card-inner">
                  {% if block.settings.rating > 0 %}
                    <div class="cr-stars" aria-label="{{ block.settings.rating }} out of 5 stars">
                      {% for i in (1..5) %}
                        {% if i <= block.settings.rating %}
                          <svg class="cr-star cr-star--filled" viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true"><path d="M12 2.5l2.9 6.3 6.9.7-5.2 4.7 1.5 6.8L12 17.8 5.9 21l1.5-6.8L2.2 9.5l6.9-.7z"/></svg>
                        {% else %}
                          <svg class="cr-star cr-star--empty" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M12 2.5l2.9 6.3 6.9.7-5.2 4.7 1.5 6.8L12 17.8 5.9 21l1.5-6.8L2.2 9.5l6.9-.7z"/></svg>
                        {% endif %}
                      {% endfor %}
                    </div>
                  {% endif %}
 
                  {% if block.settings.title != blank %}
                    <h3 class="cr-title">{{ block.settings.title | escape }}</h3>
                  {% endif %}
 
                  {% if block.settings.text != blank %}
                    <p class="cr-text">{{ block.settings.text | escape }}</p>
                  {% endif %}
 
                  <div class="cr-author">
                    {% if block.settings.avatar %}
                      <img
                        class="cr-avatar"
                        src="{{ block.settings.avatar | image_url: width: 100 }}"
                        width="50"
                        height="50"
                        loading="lazy"
                        alt="{{ block.settings.author | escape }}"
                      >
                    {% else %}
                      <div class="cr-avatar cr-avatar--placeholder" aria-hidden="true">
                        {{ block.settings.author | slice: 0, 1 | upcase }}
                      </div>
                    {% endif %}
                    {% if block.settings.author != blank %}
                      <p class="cr-author-name">{{ block.settings.author | escape }}</p>
                    {% endif %}
                    {% if block.settings.time_text != blank %}
                      <p class="cr-time">{{ block.settings.time_text | escape }}</p>
                    {% endif %}
                  </div>
                </div>
              </div>
            {% endfor %}
          </div>
        </div>
 
        <div class="cr-controls">
          <button type="button" class="cr-arrow cr-arrow--prev" aria-label="Reseña anterior">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
          </button>
 
          <div class="cr-dots" role="tablist" aria-label="Selecciona reseña"></div>
 
          <button type="button" class="cr-arrow cr-arrow--next" aria-label="Siguiente reseña">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6"/></svg>
          </button>
        </div>
 
      </div>
    {% endif %}
 
  </div>
</div>
 
<script>
  (function () {
    var root = document.getElementById('cr-{{ section.id }}');
    if (!root) return;
 
    var viewport = root.querySelector('.cr-track-viewport');
    var track = root.querySelector('.cr-track');
    var cards = Array.prototype.slice.call(root.querySelectorAll('.cr-card'));
    var dotsWrap = root.querySelector('.cr-dots');
    var prevBtn = root.querySelector('.cr-arrow--prev');
    var nextBtn = root.querySelector('.cr-arrow--next');
    if (!cards.length) return;
 
    var index = 0;
    var visible = 3;
    var autoplayTimer = null;
    var autoplay = root.getAttribute('data-autoplay') === 'true';
    var autoplaySpeed = parseInt(root.getAttribute('data-autoplay-speed'), 10) || 5000;
 
    function getVisibleCount() {
      // Siempre mostramos 3 tarjetas, la del centro resaltada.
      return Math.min(3, cards.length) || 1;
    }
 
    function maxIndex() {
      return Math.max(0, cards.length - visible);
    }
 
    function clamp(i) {
      if (i < 0) return maxIndex();
      if (i > maxIndex()) return 0;
      return i;
    }
 
    function buildDots() {
      dotsWrap.innerHTML = '';
      var total = maxIndex() + 1;
      for (var i = 0; i < total; i++) {
        var dot = document.createElement('button');
        dot.type = 'button';
        dot.className = 'cr-dot';
        dot.setAttribute('role', 'tab');
        dot.setAttribute('aria-label', 'Ir a la reseña ' + (i + 1));
        (function (i) {
          dot.addEventListener('click', function () {
            goTo(i);
            resetAutoplay();
          });
        })(i);
        dotsWrap.appendChild(dot);
      }
    }
 
    function render() {
      var cardPercent = 100 / visible;
      track.style.transform = 'translateX(-' + (index * cardPercent) + '%)';
      cards.forEach(function (card) {
        card.style.flex = '0 0 ' + cardPercent + '%';
      });
 
      var centerGlobal = index + Math.floor((visible - 1) / 2);
      cards.forEach(function (card, i) {
        card.classList.toggle('is-center', i === centerGlobal && visible > 1);
      });
 
      var dots = dotsWrap.querySelectorAll('.cr-dot');
      dots.forEach(function (dot, i) {
        dot.classList.toggle('is-active', i === index);
      });
    }
 
    function goTo(i) {
      index = clamp(i);
      render();
    }
 
    function next() { goTo(index + 1); }
    function prev() { goTo(index - 1); }
 
    function startAutoplay() {
      if (!autoplay) return;
      stopAutoplay();
      autoplayTimer = setInterval(next, autoplaySpeed);
    }
    function stopAutoplay() {
      if (autoplayTimer) clearInterval(autoplayTimer);
    }
    function resetAutoplay() {
      stopAutoplay();
      startAutoplay();
    }
 
    function setup() {
      var newVisible = getVisibleCount();
      if (newVisible !== visible || dotsWrap.children.length === 0) {
        visible = newVisible;
        index = clamp(index);
        buildDots();
      }
      render();
    }
 
    nextBtn.addEventListener('click', function () { next(); resetAutoplay(); });
    prevBtn.addEventListener('click', function () { prev(); resetAutoplay(); });
 
    root.addEventListener('mouseenter', stopAutoplay);
    root.addEventListener('mouseleave', startAutoplay);
 
    // Swipe support
    var startX = null;
    viewport.addEventListener('touchstart', function (e) {
      startX = e.touches[0].clientX;
    }, { passive: true });
    viewport.addEventListener('touchend', function (e) {
      if (startX === null) return;
      var diff = e.changedTouches[0].clientX - startX;
      if (Math.abs(diff) > 40) {
        diff < 0 ? next() : prev();
        resetAutoplay();
      }
      startX = null;
    });
 
    window.addEventListener('resize', setup);
 
    setup();
    startAutoplay();
  })();
</script>
 
{% schema %}
{
  "name": "Custom Reviews Carousel",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_heading",
      "label": "Mostrar título",
      "default": true
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Título",
      "default": "Lo que dicen nuestras clientas"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Color de fondo de la sección",
      "default": "#f5f5f5"
    },
    {
      "type": "color",
      "id": "card_bg_color",
      "label": "Color de fondo de las tarjetas",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "star_color",
      "label": "Color de las estrellas",
      "default": "#4caf82"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Color del texto",
      "default": "#1a1a1a"
    },
    {
      "type": "checkbox",
      "id": "enable_autoplay",
      "label": "Autoplay",
      "default": true
    },
    {
      "type": "range",
      "id": "autoplay_speed",
      "min": 3,
      "max": 10,
      "step": 1,
      "unit": "s",
      "label": "Velocidad de autoplay",
      "default": 5
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Espaciado superior",
      "default": 48
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Espaciado inferior",
      "default": 48
    }
  ],
  "blocks": [
    {
      "type": "review",
      "name": "Reseña",
      "settings": [
        {
          "type": "range",
          "id": "rating",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Valoración (estrellas)",
          "default": 5
        },
        {
          "type": "text",
          "id": "title",
          "label": "Título de la reseña",
          "default": "¡Producto increíble!"
        },
        {
          "type": "textarea",
          "id": "text",
          "label": "Texto de la reseña",
          "default": "Estoy encantada con la compra, la calidad es excelente y llegó muy rápido."
        },
        {
          "type": "image_picker",
          "id": "avatar",
          "label": "Foto de la clienta/e"
        },
        {
          "type": "text",
          "id": "author",
          "label": "Nombre",
          "default": "Nombre de la clienta"
        },
        {
          "type": "text",
          "id": "time_text",
          "label": "Fecha / tiempo",
          "default": "hace 2 días"
        }
      ]
    }
  ],
  "max_blocks": 24,
  "presets": [
    {
      "name": "Custom Reviews Carousel",
      "blocks": [
        { "type": "review" },
        { "type": "review" },
        { "type": "review" },
        { "type": "review" },
        { "type": "review" }
      ]
    }
  ]
}
{% endschema %}