.elementor-kit-13{--e-global-color-primary:#FDDE81;--e-global-color-secondary:#3780FF;--e-global-color-text:#EEEAD5;--e-global-color-accent:#FF59CD;--e-global-color-d53f43f:#231C16;--e-global-typography-primary-font-family:"Daaz Sans";--e-global-typography-primary-font-size:1.25rem;--e-global-typography-primary-font-weight:600;--e-global-typography-primary-line-height:1.25rem;--e-global-typography-secondary-font-family:"Daaz Sans";--e-global-typography-secondary-font-size:1.56rem;--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-line-height:1.9rem;--e-global-typography-text-font-family:"Clash Display Variable";--e-global-typography-text-font-size:1.35rem;--e-global-typography-text-font-weight:500;--e-global-typography-text-line-height:1.6rem;--e-global-typography-accent-font-family:"Clash Grotesk Bold";--e-global-typography-accent-font-size:1.13rem;--e-global-typography-accent-font-weight:400;--e-global-typography-accent-line-height:1.2rem;}.elementor-kit-13 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-13{--e-global-typography-primary-font-size:1rem;--e-global-typography-primary-line-height:1rem;--e-global-typography-secondary-font-size:1rem;--e-global-typography-secondary-line-height:1.25rem;--e-global-typography-text-font-size:1.3rem;--e-global-typography-text-line-height:1.5rem;--e-global-typography-accent-font-size:1.2rem;--e-global-typography-accent-line-height:1.2rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-13{--e-global-typography-primary-font-size:0.875rem;--e-global-typography-primary-line-height:1.2rem;--e-global-typography-secondary-font-size:1.25rem;--e-global-typography-secondary-line-height:1.6rem;--e-global-typography-text-font-size:1rem;--e-global-typography-text-line-height:1.3rem;--e-global-typography-accent-font-size:1rem;--e-global-typography-accent-line-height:1rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* 1. TEXTO CON BORDE RETRO (Sin que se manche de azul al seleccionarlo) */
.texto-bordeado {
  -webkit-text-stroke: 2px #231C16;
  paint-order: stroke fill;
  -webkit-user-select: none; 
  -moz-user-select: none; 
  -ms-user-select: none; 
  user-select: none; 
}

/* 2. ESTRELLA JELLY BOUNCE PARA LOS BOTONES DE RESPUESTA */
.btn-estrella .elementor-button {
  position: relative !important; 
  overflow: visible !important; 
  cursor: pointer !important; 
}

.btn-estrella .elementor-button::after {
  content: "";
  position: absolute;
  right: -15px; 
  top: 50%;
  width: 32px; 
  height: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill='%23FF59CD' stroke='%23231C16' stroke-width='1' vector-effect='non-scaling-stroke' stroke-linejoin='miter' stroke-miterlimit='10' d='M25 2 l7.2 15.6 l16.8 1.8 l-12.6 11.4 l3.6 16.2 l-15 -8.4 l-15 8.4 l3.6 -16.2 l-12.6 -11.4 l16.8 -1.8 Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transform: translateY(-50%) scale(0);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  pointer-events: none; 
}

.btn-estrella .elementor-button:hover::after {
  opacity: 1;
  transform: translateY(-50%) scale(1) rotate(-5deg); 
}

.btn-estrella .elementor-button.estrella-fija::after {
  opacity: 1;
  animation: bouncyStarPop 0.6s ease-in-out forwards;
}

@keyframes bouncyStarPop {
  0%   { transform: translateY(-50%) scale(1) rotate(-5deg); }
  20%  { transform: translateY(-50%) scale(0.7) rotate(-15deg); } 
  50%  { transform: translateY(-50%) scale(1.4) rotate(20deg); }  
  70%  { transform: translateY(-50%) scale(0.9) rotate(-5deg); }  
  85%  { transform: translateY(-50%) scale(1.1) rotate(5deg); }   
  100% { transform: translateY(-50%) scale(1) rotate(0deg); }     
}

/* 3. BARRITA DE PROGRESO FLOTANTE */
#quiz-progress-container {
  position: fixed;
  top: 50%;
  right: 18px; 
  transform: translateY(-50%);
  width: 10px; /* Reducido de 13px (20% más delgado) */
  height: 245px; /* La altura se mantiene igual */
  background-color: #3780FF; 
  border: 2px solid #111; 
  border-radius: 10px; /* Ajustado al nuevo ancho para mantener la forma de píldora */
  overflow: hidden;
  z-index: 3; 
  box-shadow: 3px 3px 0px #111; 
}

#quiz-progress-fill {
  position: absolute;
  bottom: 0; 
  left: 0;
  width: 100%;
  height: 0%; 
  background-color: #FDDE81; 
  transition: height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (max-width: 768px) {
  #quiz-progress-container {
    /* Alineación vertical a la derecha con padding */
    top: 50%;
    right: 12px; /* Padding desde el borde derecho del celular */
    left: auto; /* Por si tenías un left: 0 de la versión anterior */
    transform: translateY(-50%); /* Centrado verticalmente */
    
    /* Tamaño adaptado para pantallas pequeñas */
    width: 8px; /* Un poquito más delgada que en desktop */
    height: 180px; /* Más corta para que no ocupe tanta pantalla */
    
    /* Estilos estéticos mantenidos */
    border-radius: 10px;
    border: 2px solid #111; 
    box-shadow: 2px 2px 0px #111; /* Sombra sutil para móvil */
    opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  }

#quiz-progress-container.show-bar {
  opacity: 1;
  visibility: visible;
}

  #quiz-progress-fill {
    /* Nos aseguramos de que vuelva a llenarse hacia arriba y no hacia los lados */
    width: 100%;
    height: 0%; 
  }
}

  #quiz-progress-fill {
    height: 100%;
    width: 0%; 
    /* La animación se hereda automáticamente del CSS de escritorio */
  }
}
  /* =========================================
   4. ESTILOS DEL CONTENEDOR DE RESULTADOS
========================================= */
/* Obliga al contenedor amarillo a recortar todo lo que se salga de sus bordes */
#quiz-result-container {
  border-radius: 20px !important; /* Cambia el 20px por el tamaño de borde que le diste en Elementor */
  overflow: hidden !important; 
}

/* Redondea directamente la imagen generada por Canvas para que encaje perfecto */
#res-img img {
  border-radius: 15px !important; /* Un poco menos que el contenedor para que luzca bien */
  overflow: hidden !important;
  width: 100% !important; 
  height: auto !important;
  object-fit: cover !important;
  
  /* Opcional: Si quieres mantener el estilo retro de la sombra y el borde negro en la foto */
  border: 0px solid #111 !important;
}

/* Evita que la imagen sea arrastrada o seleccionada */
.bloquear-descarga,
.bloquear-descarga img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Daaz Sans';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://daaz.mx/wp-content/uploads/2026/05/DAAZ_Sans.eot');
	src: url('https://daaz.mx/wp-content/uploads/2026/05/DAAZ_Sans.eot?#iefix') format('embedded-opentype'),
		url('https://daaz.mx/wp-content/uploads/2026/05/DAAZ_Sans.woff2') format('woff2'),
		url('https://daaz.mx/wp-content/uploads/2026/05/DAAZ_Sans.woff') format('woff'),
		url('https://daaz.mx/wp-content/uploads/2026/05/DAAZ_Sans.ttf') format('truetype'),
		url('https://daaz.mx/wp-content/uploads/2026/05/DAAZ_Sans.svg#DaazSans') format('svg');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Clash Grotesk Bold';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://daaz.mx/wp-content/uploads/2026/05/ClashDisplayVariable-Bold.eot');
	src: url('https://daaz.mx/wp-content/uploads/2026/05/ClashDisplayVariable-Bold.eot?#iefix') format('embedded-opentype'),
		url('https://daaz.mx/wp-content/uploads/2026/05/ClashGrotesk-Bold.woff2') format('woff2'),
		url('https://daaz.mx/wp-content/uploads/2026/05/ClashGrotesk-Bold.woff') format('woff'),
		url('https://daaz.mx/wp-content/uploads/2026/05/ClashGrotesk-Bold.ttf') format('truetype'),
		url('https://daaz.mx/wp-content/uploads/2026/05/ClashGrotesk-Bold.svg#ClashGroteskBold') format('svg');
}
@font-face {
	font-family: 'Clash Grotesk Bold';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://daaz.mx/wp-content/uploads/2026/05/ClashGrotesk-Medium.eot');
	src: url('https://daaz.mx/wp-content/uploads/2026/05/ClashGrotesk-Medium.eot?#iefix') format('embedded-opentype'),
		url('https://daaz.mx/wp-content/uploads/2026/05/ClashGrotesk-Medium.woff2') format('woff2'),
		url('https://daaz.mx/wp-content/uploads/2026/05/ClashGrotesk-Medium.woff') format('woff'),
		url('https://daaz.mx/wp-content/uploads/2026/05/ClashGrotesk-Medium.ttf') format('truetype'),
		url('https://daaz.mx/wp-content/uploads/2026/05/ClashGrotesk-Medium.svg#ClashGroteskBold') format('svg');
}
/* End Custom Fonts CSS */