/*Reseteo la hoja de estilos*/
:root { --pix-color-primario: #546e7a; --pix-color-fondo-suave: #eceff1; --pix-degradado-sup: #9381a9; --pix-degradado-inf: #bfbac4 }
* { box-sizing: border-box; font-family: "Poppins", sans-serif; -webkit-tap-highlight-color: transparent; }

/*.div-snackbar>div{background-color:#5b3189!important}
.div-snackbar a { color: #ffa763!important }*/

.div-snackbar > div { background-color: #fff !important; color:#5b3189!important }
.div-snackbar a { color: #ffa763 !important }

/*General*/
html, body { margin: 0; padding: 0; background: linear-gradient(var(--pix-degradado-sup),var(--pix-degradado-inf));min-height:100vh; background-attachment:fixed }
.divColumna { width: 100%; max-width: 640px; margin: auto; }

body { color: #fff; text-align: center }
body.cargando:before{left:0}
body.cargando:after { border-top-color: #9381a9!important }

header { text-align: left; margin-bottom: 32px }
header a { padding: 8px; display: inline-block }
header #btnSunrise img { height: 80px; }
header #btnNutricia { float: right }
header #btnNutricia img { height: 48px; }


/*Encabezados*/
h1, h2 { text-align: center; display: block; position: relative; margin: 0 }
h1 { padding: 0 32px }
h2 { padding: 0 20%; margin:48px -24px }
h1:before, h2:before { content: ''; position: absolute; left: 0; width: 100%; border-top: solid 1px rgba(0, 0, 0, .1); height: 0px; top: 50%; z-index: 0 }
h1:after, h2:after { content: ''; position: absolute; left: 0; width: 100%; border-top: solid 1px rgba(255, 255, 255, .1); height: 0px; top: calc(50% + 1px); z-index: 0 }
h1 span, h2>span { color: #fff; font-weight: 300; display: inline-block; max-width: 640px; border-radius: 52px; padding: 10px 48px; text-transform: uppercase; background: linear-gradient(#a798b8,#998fa4); box-shadow: 0 -6px 10px rgba(0,0,0,.1); position: relative; z-index: 1; border-style: ridge; border-width: 2px; width: 100% }
h2 span { color: #fff; font-weight: 300; text-transform: uppercase; }
h1 span { font-size: 32px; line-height: 40px }
h2 span { font-size: 26px; line-height: 32px }
h3 { text-align: center; display: block; color: #5b3189; font-weight: 300; font-size: 20px; padding: 0 24px }

/*Cajas de texto y botones*/
input[type="email"] { line-height: 96px; height: 96px; border-radius: 48px; border: none; background: #000222; display: block; width: 100%; text-align: center; color: #fff; font-size: 20px }
input[type="email"]::placeholder { color: #fff }
input[type="email"]:focus::placeholder { color: transparent }
form { padding: 0 24px }
form input { margin-top: 48px }
form button { margin-top: 64px }
button, select { transition: transform .1s; background: linear-gradient(90deg, #c1c1c1, #9380a8); cursor: pointer; border-style: ridge; border-width: 2px; text-transform: uppercase; color: #fff; text-align: center; line-height: 64px; height: 64px; display: block; width: 100%; font-size: 24px; border-radius: 32px; border-color: #fff; outline:none }
select option{color:#000; font-size:18px}
button:hover { transform: scale(1.05) }
button:active { transform: scale(0.95) }

/*Pasos del asistente*/
.divPaso:not(.activo){display:none}
.pTituloPaso { font-size: 32px !important; font-weight: bold; margin-bottom: 0 }
#paso-2, #paso-3, #paso-4 { padding-left: 24px; padding-right: 24px; padding-bottom: 88px }
#paso-2 p, #paso-3 p, #paso-4 p { font-size: 20px;margin-top:0; line-height:28px }
#paso-2 .pTituloPaso{margin:16px 0}
#paso-2 #pEncuentraYReune { color: #5b3189; font-weight: bold; text-transform: uppercase }
#paso-2 #pDistinguirlos { background: #fff; color: #5b3189; padding: 12px; border-radius: 2px }
#paso-2 #divTarjetas { display: flex; flex-wrap: wrap; gap: 16px;opacity:0; transition:opacity .3s }
#paso-2 #divTarjetasExt.activo #divTarjetas{ opacity: 1 }
#paso-2 #divTarjetasExt footer{opacity:0; pointer-events:none; transition:opacity 1s .3s}
#paso-2 #divTarjetasExt.activo footer{opacity:1; pointer-events:all}
#paso-2 .divTarjeta { min-height: 200px; position: relative; background: radial-gradient(circle 300px at 10% 10%,#d6d6d6,#5b3189); flex: 0 0 calc((100% - 2 * 16px) / 3); border-radius: 8px; box-shadow: 4px 4px 10px rgba(0,0,0,.1); outline: solid 1px #999 }
#paso-2 .divTarjeta a { text-decoration: none; color: #fff; text-transform: uppercase; display: block; }
#paso-2 .divTarjeta:hover { transform: scale(1.05)!important ;}
#paso-2 .divTarjeta.vacia:active{transform:scale(0.95)!important}
#paso-2 .divTarjeta > span .spanImg { font-size: 0 }
#paso-2 .divTarjeta > span .spanImg img { width: 100%; border-radius: 50%; z-index: 1; position: relative }
#paso-2 .divTarjeta > span .spanImg > span { position: relative; width: 100%; height: 100%; display: block; outline: solid 1px white; border-radius: 50%; padding: 4px; box-shadow: 0 0 10px white; }
#paso-2 .divTarjeta > span .spanImg > span:before { content: ''; position: absolute; width: calc(100% - 8px); height: calc(100% - 8px); display: block; background-image: url(/img/decoracion-planeta.svg); background-repeat: no-repeat; background-size: contain; z-index: 2; background-color: #ffffff11; border-radius: 50%; }
#paso-2 .divTarjeta > span .spanImg { padding-left: 25%; padding-right: 25%; display: block; position: relative; padding-top: 8px; }
#paso-2 .divTarjeta > span .spanImg:before { content: ''; position: absolute; left: 0; width: 100%; border-top: solid 1px rgba(0, 0, 0, .1); height: 0px; top: 50%; z-index: 0 }
#paso-2 .divTarjeta > span .spanImg:after { content: ''; position: absolute; left: 0; width: 100%; border-top: solid 1px rgba(255, 255, 255, .1); height: 0px; top: calc(50% + 1px); z-index: 0 }
#paso-2 .divTarjeta > span .spanNombre { font-size: 28px; font-family: 'Bebas Neue', sans-serif; white-space: normal; word-spacing: 1000px; line-height: 30px; overflow: hidden; margin-top: 8px; display: block }
#paso-2 .divTarjeta > span .spanHeader, .divTarjeta >span .spanFooter { width: 100%; display: block }
#paso-2 .divTarjeta > span .spanHeader img, .divTarjeta >span .spanFooter img { width: 100% }
#paso-2 .divTarjeta > span .spanHeader { padding: 0 8px }
#paso-2 .divTarjeta > span .spanFooter { padding: 8px 12px 4px 12px }
#paso-2 .divTarjeta.vacia { padding: 8px; }
#paso-2 .divTarjeta.vacia > a { border: solid 2px #fff; border-radius: 6px; display: block; width: 100%; height: 100% }
#paso-2 .divTarjeta.vacia > a { background-image: url(/img/interrogante.svg); background-repeat: no-repeat; background-position: center center; background-size: 48px }
footer { padding: 8px 24px; position: fixed; bottom: 0; width: 100%; left: 0; z-index: 2 }

@media only screen and (min-width:801px) {

    #paso-2 .divTarjeta { min-height: 250px; }
}

#paso-3 #pExpedicionCompletada { color: #5b3189; font-size: 20px; margin-top: 8px; }
#paso-3 #pEsteTipoExperiencias { font-size: 20px; }
#paso-4 #pEnhorabuena { color: #5b3189; font-size: 24px; font-weight: bold; line-height:28px }
#paso-4 #pDisfrutaTeamBuilding { font-size: 24px; font-weight: bold; margin-bottom:0 }
#paso-4 .pTituloPaso{margin-bottom:16px}

#btnFotoEquipo{display:block; margin-bottom:24px}
#btnFotoEquipo #imgFotoEquipo{width:100%;border-radius:4px}


#imgEnhorabuena { width: 60%; margin-top: 16px; transform-origin: center; /* Animación inicial */ animation: trofeoEntrada 1.2s ease-out forwards, trofeoBrillo 1.5s ease-in-out 1.2s forwards, trofeoFlotando 3s ease-in-out 2.7s infinite, trofeoPulso 2.5s ease-in-out 2.7s infinite; }


#divEscanerQR { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .8); backdrop-filter: blur(2px); z-index: 3; }
#divEscanerQR:not(.activo) { display: none }

#divEscanerQR #qr-shaded-region { border-color: transparent !important; padding: 15% !important }
#divEscanerQR #cameraSelect { margin-bottom: 8px }


/* 1️⃣ Entrada con escala + rebote */
@keyframes trofeoEntrada {
    0% { transform: scale(0) rotate(-10deg); opacity: 0; }
    60% { transform: scale(1.15) rotate(5deg); opacity: 1; }
    80% { transform: scale(0.95) rotate(-2deg); }
    100% { transform: scale(1) rotate(0); }
}

/* 2️⃣ Brillo inicial */
@keyframes trofeoBrillo {
    0% { filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
    50% { filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8)); }
    100% { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4)); }
}

/* 3️⃣ Movimiento infinito: flotación */
@keyframes trofeoFlotando {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-6px) scale(1.02); }
    100% { transform: translateY(0) scale(1); }
}

/* 4️⃣ Pulso de brillo infinito */
@keyframes trofeoPulso {
    0% { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.4)); }
    50% { filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.7)); }
    100% { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.4)); }
}

.divTarjeta { opacity: 0; }
#divTarjetas{perspective:1000px}
#divTarjetasExt.activo .divTarjeta { transform: translateY(30px) scale(0.95); animation: cartaEntrada 1.6s ease-out forwards; }
#divTarjetasExt.activo .divTarjeta:nth-child(1) { animation-delay: 0.1s; }
#divTarjetasExt.activo .divTarjeta:nth-child(2) { animation-delay: 0.2s; }
#divTarjetasExt.activo .divTarjeta:nth-child(3) { animation-delay: 0.3s; }
#divTarjetasExt.activo .divTarjeta:nth-child(4) { animation-delay: 0.4s; }
#divTarjetasExt.activo .divTarjeta:nth-child(5) { animation-delay: 0.5s; }
#divTarjetasExt.activo .divTarjeta:nth-child(6) { animation-delay: 0.6s; }
#divTarjetasExt.activo .divTarjeta:nth-child(7) { animation-delay: 0.7s; }
#divTarjetasExt.activo .divTarjeta:nth-child(8) { animation-delay: 0.8s; }
#divTarjetasExt.activo .divTarjeta:nth-child(9) { animation-delay: 0.9s; }


@keyframes cartaEntrada {
    0% { opacity: 0; transform: translateY(30px) scale(0.95) rotateY(90deg); }
    60% { opacity: 1; transform: translateY(-6px) scale(1.02) rotateY(10deg); }
    99% { opacity: 1; transform: translateY(0) scale(1) rotateY(0); transition: transform .1s; }
    100% { opacity: 1; transform: none; transition: transform .1s; }
}