/** Shopify CDN: Minification failed

Line 329:10 Unexpected "{"
Line 329:19 Expected ":"
Line 334:0 Unexpected "{"
Line 334:1 Expected identifier but found "%"
Line 335:12 Unexpected "{"
Line 335:21 Expected ":"
Line 335:28 Unexpected "{"
Line 336:28 Expected identifier but found whitespace
Line 336:30 Unexpected "{"
Line 336:39 Expected ":"
... and 2 more hidden warnings

**/
/* Custom Quiz Modal Styles */

/* Contenedor del botón de activación del quiz */
.quiz-button-container {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;
}

/* Opcional: Estilos para el botón flotante */
/*
#start-quiz-button {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 999;
  padding: 1rem 2rem;
  border-radius: var(--button-radius, 50px);
  box-shadow: var(--shadow-md);
  font-size: 1.1em;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}
*/

/* Wrapper del modal (el fondo oscuro y centrado) */
.quiz-modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(var(--color-background), 0.75);
  display: none; /* Oculto por defecto */
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 20px; /* Padding general del wrapper, para que el modal no toque los bordes de la pantalla */
}

/* Estado activo del wrapper del modal (cuando el modal está visible) */
.quiz-modal-wrapper.active {
  display: flex;
}

/* El contenido del modal (el cuadro blanco con el quiz) */
.quiz-modal {
 
  border-radius: var(--media-border-radius);
  max-width: 600px; /* Ancho máximo para desktop */
  width: 90%; /* Ancho responsivo por defecto */
  padding: 40px; /* Padding interno general del modal para desktop */
  box-shadow: var(--shadow-sm);
  transform: translateY(20px);
  transition: transform 0.3s ease;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid rgba(var(--color-foreground), 0.1);
}

/* Animación de entrada del modal cuando está activo */
.quiz-modal-wrapper.active .quiz-modal {
  transform: translateY(0);
}

/* Encabezado del modal */
.quiz-modal__header {
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}

/* Título del modal */
.quiz-modal__title.h1 {
  line-height: var(--font-heading-line-height);
}

/* Descripción del modal */
.quiz-modal__description.text-body {
  margin-bottom: 30px;
}

/* Botón de cierre del modal */
.quiz-modal__close-button {
  position: absolute;
  top: 15px; /* Distancia desde la parte superior del .quiz-modal */
  right: 15px; /* Distancia desde la derecha del .quiz-modal */
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: rgb(var(--color-scheme-text));
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.quiz-modal__close-button:hover {
    background-color: rgba(var(--color-foreground), 0.05);
}

/* Estilos para el SVG dentro del botón de cierre */
.quiz-modal__close-button svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

/* Contenedor del contenido principal del quiz */
.quiz-modal__content {
  text-align: center;
}

/* Cada paso individual del quiz */
.quiz-step {
  margin-bottom: 30px;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Clase para ocultar pasos del quiz */
.quiz-step.hidden {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: -9999px;
}

/* Título de cada paso del quiz */
.quiz-step h3 {
  font-size: var(--font-heading-scale);
  margin-bottom: 25px;
  color: rgb(var(--color-scheme-text));
}

/* Contenedor de las opciones (botones) del quiz */
.quiz-options {
  display: grid;
  gap: 15px;
}

/* Estilos de los botones de opción */
.quiz-options .button {
    width: 100%; /* Por defecto 100% de la columna del grid */
    justify-content: center;
    text-align: center;
    padding: 15px 20px;
    line-height: 1.2;
}


/* ============================================== */
/* === AJUSTES ESPECÍFICOS PARA DISPOSITIVOS MÓVILES === */
/* ============================================== */
@media screen and (max-width: 749px) { /* Este es el breakpoint común en Dawn para móvil */

  .quiz-modal-wrapper {
      padding: 10px; /* **AJUSTE:** Menos padding alrededor del modal en pantallas muy pequeñas */
  }

  .quiz-modal {
      width: calc(100% - 20px); /* **AJUSTE:** Ocupa casi todo el ancho, restando el padding del wrapper */
      padding: 25px; /* **AJUSTE:** Reducir el padding interno del modal en móvil para que quepa más contenido */
      max-height: 95vh; /* **AJUSTE:** Aumentar la altura máxima para aprovechar el espacio vertical */
  }

  .quiz-modal__close-button {
      top: 10px; /* **AJUSTE:** Menos distancia desde el borde superior del modal en móvil */
      right: 10px; /* **AJUSTE:** Menos distancia desde el borde derecho del modal en móvil */
      width: 35px; /* **AJUSTE:** Un poco más pequeño el botón de cerrar */
      height: 35px;
  }

  .quiz-modal__close-button svg {
      width: 18px; /* **AJUSTE:** Icono SVG un poco más pequeño en móvil */
      height: 18px;
  }

  .quiz-modal__header {
      margin-bottom: 20px; /* **AJUSTE:** Menos margen debajo del header en móvil */
  }

  .quiz-modal__description {
      margin-bottom: 20px; /* **AJUSTE:** Menos margen debajo de la descripción en móvil */
  }

  .quiz-step h3 {
      margin-bottom: 15px; /* **AJUSTE:** Menos margen debajo del título de los pasos en móvil */
  }

  .quiz-options {
    grid-template-columns: 1fr; /* Una sola columna para los botones de opción */
    gap: 10px; /* **AJUSTE:** Menos espacio entre los botones de opción en móvil */
  }

  .quiz-options .button {
      padding: 12px 15px; /* **AJUSTE:** Padding más pequeño para los botones de opción en móvil */
      font-size: 0.9em; /* **AJUSTE:** Texto de los botones un poco más pequeño si es necesario */
  }
}

/* Para ocultar el scroll del body cuando el modal está activo */
.overflow-hidden {
    overflow: hidden !important;
}

/* ============================================== */
/* === ESTILOS PARA LA NUEVA SECCIÓN: QUIZ BANNER === */
/* ============================================== */
.quiz-banner {
  position: relative;
  background-size: cover;
  background-position: center center;
  padding-top: 100px; /* Ajusta según necesites espacio arriba */
  padding-bottom: 100px; /* Ajusta según necesites espacio abajo */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 400px; /* Altura mínima del banner */
}

/* Capa de superposición para mejorar la legibilidad del texto */
.quiz-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, var(--image-overlay-opacity)); /* Usará la opacidad del setting */
  z-index: 1;
}

.quiz-banner .quiz-banner__content-wrapper {
  position: relative;
  z-index: 2; /* Asegura que el contenido esté sobre la capa de superposición */
  max-width: 800px; /* Ancho máximo para el contenido del texto */
}

.quiz-banner .quiz-banner__content {
  color: rgb(var(--color-scheme-background)); /* Color de texto predeterminado, se anulará por esquema */
}

.quiz-banner.section--text-light .quiz-banner__content {
    color: rgb(var(--color-scheme-background)); /* Texto claro para fondos oscuros */
}

.quiz-banner.section--text-dark .quiz-banner__content {
    color: rgb(var(--color-scheme-text)); /* Texto oscuro para fondos claros */
}


.quiz-banner__heading {
  
  margin-bottom: 20px;
}

.quiz-banner__subheading {
  
  margin-bottom: 30px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.quiz-banner__button-container {
  margin-top: 20px;
}

/* Asegurarse de que el botón se vea bien con los estilos del tema */
.quiz-banner__button-container .button {
  padding: 15px 30px;
  font-size: 1.1em;
  min-width: 250px;
}

/* ============================================== */
/* === AJUSTES DE FLUIDEZ Y ADAPTACIÓN PARA MÓVILES DEL BANNER === */
/* ============================================== */
@media screen and (max-width: 749px) {
  .quiz-banner {
    padding-top: 60px;
    padding-bottom: 60px;
    min-height: 300px;
  }

  .quiz-banner__heading {
    font-size: calc(var(--font-heading-scale) * 0.8); /* Reducir tamaño en móvil */
  }

  .quiz-banner__subheading {
    font-size: calc(var(--font-body-scale) * 0.9); /* Reducir tamaño en móvil */
    margin-bottom: 20px;
  }

  .quiz-banner__button-container .button {
    width: 100%; /* Botón de ancho completo en móvil */
    min-width: unset; /* Quita el min-width para que width: 100% funcione */
    padding: 12px 20px;
    font-size: 1em;
  }
}

/* Variable CSS para la opacidad del overlay, se establecerá desde Liquid */
.section-{{ section.id }}::before {
  opacity: calc(var(--image-overlay-opacity) / 100);
}

/* Establecer la variable CSS para la opacidad desde Liquid */
{% if section.settings.image_overlay_opacity %}
  .section-{{ section.id }} {
    --image-overlay-opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
  }
{% endif %}