/* ------------------------------- open: LLAMADA TIPOS (sólo si es necesario dependiendo de dónde se integre el sistema) ------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Khand:wght@300;400;500;600;700&display=swap');
/* ------------------------------- close: LLAMADA TIPOS ------------------------------------------ */
/* ------------------------------- open: VARIABLES prueba ------------------------------------------ */
:root {
--white: #fff;
/* color white */
--white-rgb: 255, 255, 255;
/* color white */
--neutral-00: #F2F2F2;
/* color neutral 00 */
--neutral-10: #E6E6E6;
/* color neutral 10 */
--neutral-20: #CDCDCD;
/* color neutral 20 */
--neutral-40: #9A9A9A;
/* color neutral 40 */
--neutral-60: #686868;
/* color neutral 60 */
--neutral-80: #282828;
/* color neutral 80 */
--black: #000000;
/* color black Rippa */
--black-rgb: 0, 0, 0;
/* color black RGB */
--bg: #14171D;
/* color fondo página */
--bg-rgb: 20, 23, 29;
/* color fondo RGB */
--card-question-bg: rgba(27, 31, 39, 1);
/* color fondo cards */
--card-bg: rgba(27, 31, 39, .8);
/* color fondo cards */
--main: #bca070;
/* color principal */
--main-rgb: 197, 159, 79;
/* color principal RGB */
--secondary: #57706E;
/* color principal */
--secondary-rgb: 87, 112, 110;
/* color principal RGB */
--tertiary: #9E5E43;
/* color principal */
--tertiary-rgb: 158, 94, 67;
/* color principal RGB */
--error: #BA4B4B;
--error-rgb: 186, 75, 75;
/* color errores en formulario */
--ok: #60BB69;
--ok-rgb: 96, 187, 105;
/* color ok en formulario */
--typo-primary: "Khand", Helvetica, Arial, Lucida, sans-serif;
/* tipografÃa del site */
--transition: all 0.3s ease-in-out;
/* transición corta de elementos tipo button, enlaces, velos etc */
--transition-1: all 0.7s ease-in-out;
/* transición larga de elementos tipo button, enlaces, velos etc */
--shadow-shoft: 0px 4px 16px rgba(var(--black-rgb), 0.15);
}
/* ------------------------------- close: VARIABLES ------------------------------------------ */
/* -----------------------------------------------------------
-----------------------------------------------------------
-----------------------------------------------------------
OPEN: Generales
-----------------------------------------------------------
-----------------------------------------------------------
----------------------------------------------------------- */
body {
font-family: var(--typo-primary);
background: var(--bg);
}
h2.title {
text-align: center;
font-size: 32px;
line-height: 40px;
font-weight: 300;
letter-spacing: 1px;
margin: 0;
color: var(--neutral-20);
}
h2.title2 {
text-align: center;
font-size: 18px;
line-height: 27px;
font-weight: 400;
letter-spacing: 0.05em;
margin: 0;
color: var(--neutral-20);
text-transform: uppercase;
}
.screen {
width: 100%;
/* min-height: 95vh;
display: flex;
align-items: center; */
}
.container {
width: 100%;
max-width: 500px;
padding: 0 32px 80px;
margin-top: 80px;
}
/* en algunas pantallas modificamos el .screen y el .container para que se centre verticalmente */
.sc_bienvenida,
.sc_games {
min-height: 95vh;
display: flex;
align-items: center;
}
.sc_bienvenida .container {
margin-top: -80px;
padding-bottom: 0;
}
.sc_games .container {
margin-top: 0;
}
/* fin en algunas pantallas modificamos el .screen y el .container para que se centre verticalmente */
.container-m-0 {
margin-top: 0;
}
/* -------------------- footer */
.footer-cata {
display: flex;
align-items: center;
height: 48px;
justify-content: center;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: var(--bg);
opacity: .7;
}
.footer-cata img {
opacity: .8;
}
/* versión de la cata */
.version-cata {
position: absolute;
bottom: 0;
right: 12px;
height: 48px;
display: flex;
align-items: center;
}
.version-cata p {
color: var(--neutral-60);
margin:14px 0 0;
font-size: 12px;
letter-spacing: 1px;
font-weight: 500;
}
/* fin versión de la cata */
/* FIN footer */
::-webkit-scrollbar {
display: none;
}
/* -------------------- fondo animado */
.content-animated-bg {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
z-index: -1;
left: 0;
}
.shapes-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
padding: 0;
margin: 0;
}
.shapes-bg li {
position: absolute;
display: block;
list-style: none;
width: 0.5px;
height: 50px;
background: rgba(var(--white-rgb), 0.2);
animation: animate 25s linear infinite;
bottom: -150px;
box-shadow: 0px 0px 4px rgba(var(--white-rgb), 0.3)
}
.shapes-bg li:nth-child(1) {
left: 25%;
height: 80px;
animation-delay: 9s;
animation-duration: 7s;
}
.shapes-bg li:nth-child(2) {
left: 11%;
height: 50px;
animation-delay: 6s;
animation-duration: 8s;
background: rgba(var(--main-rgb), 0.5);
box-shadow: 0px 0px 4px rgba(var(--main-rgb), 0.7);
}
.shapes-bg li:nth-child(3) {
left: 43%;
height: 140px;
animation-delay: 2s;
animation-duration: 10s;
}
.shapes-bg li:nth-child(4) {
left: 30%;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}
.shapes-bg li:nth-child(5) {
left: 65%;
height: 45px;
animation-delay: 3s;
animation-duration: 11s;
background: rgba(var(--main-rgb), 0.5);
box-shadow: 0px 0px 4px rgba(var(--main-rgb), 0.7);
}
.shapes-bg li:nth-child(6) {
left: 75%;
height: 110px;
animation-delay: 3s;
animation-duration: 13s;
}
.shapes-bg li:nth-child(7) {
left: 35%;
height: 150px;
animation-delay: 7s;
}
.shapes-bg li:nth-child(8) {
left: 53%;
height: 25px;
animation-delay: 15s;
animation-duration: 20s;
background: rgba(var(--main-rgb), 0.5);
box-shadow: 0px 0px 4px rgba(var(--main-rgb), 0.7);
}
.shapes-bg li:nth-child(9) {
left: 20%;
height: 15px;
animation-delay: 2s;
animation-duration: 17s;
}
.shapes-bg li:nth-child(10) {
left: 85%;
height: 150px;
animation-delay: 0s;
animation-duration: 11s;
background: rgba(var(--main-rgb), 0.5);
box-shadow: 0px 0px 4px rgba(var(--main-rgb), 0.7);
}
@keyframes animate {
0% {
transform: translateY(0);
opacity: 0;
}
50% {
transform: translateY(-600px);
opacity: 1;
}
100% {
transform: translateY(-1200px);
opacity: 0;
}
}
/* FIN fondo animado */
/* -------------------- loader*/
.load {
width: 100%;
height: 100vh;
position: fixed;
top: -40px;
left: 0;
}
.load:before,
.load:after,
.load .dot,
.load .outline {
position: absolute;
top: 50%;
left: 50%;
-o-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 50%;
}
.load .dot {
width: 10px;
height: 10px;
background: rgba(var(--white-rgb), .1);
-o-animation: in 4s linear infinite;
-moz-animation: in 4s linear infinite;
-ms-animation: in 4s linear infinite;
-webkit-animation: in 4s linear infinite;
animation: in 4s linear infinite;
z-index: 2;
}
.load:before {
content: "";
width: 0px;
height: 0px;
background: rgba(var(--main-rgb), .05);
-o-animation: out1 4s linear infinite;
-moz-animation: out1 4s linear infinite;
-ms-animation: out1 4s linear infinite;
-webkit-animation: out1 4s linear infinite;
animation: out1 4s linear infinite;
}
.load:after {
content: "";
width: 0px;
height: 0px;
background: rgba(var(--white-rgb), .1);
-o-animation: out2 4s linear infinite;
-moz-animation: out2 4s linear infinite;
-ms-animation: out2 4s linear infinite;
-webkit-animation: out2 4s linear infinite;
animation: out2 4s linear infinite;
}
.load .outline {
width: 120px;
height: 120px;
z-index: 2;
}
.load .outline span {
width: 68px;
height: 68px;
-o-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-o-transform: rotate(45deg) skewX(80deg);
-moz-transform: rotate(45deg) skewX(80deg);
-webkit-transform: rotate(45deg) skewX(80deg);
-ms-transform: rotate(45deg) skewX(80deg);
transform: rotate(45deg) skewX(80deg);
overflow: hidden;
position: absolute;
bottom: 50%;
right: 50%;
-o-animation: outline 4s linear infinite;
-moz-animation: outline 4s linear infinite;
-ms-animation: outline 4s linear infinite;
-webkit-animation: outline 4s linear infinite;
animation: outline 4s linear infinite;
}
.load .outline span:before {
content: "";
display: block;
border: solid 1px rgba(var(--white-rgb), .8);
width: 200%;
height: 200%;
border-radius: 50%;
-o-transform: skewX(-80deg);
-moz-transform: skewX(-80deg);
-webkit-transform: skewX(-80deg);
-ms-transform: skewX(-80deg);
transform: skewX(-80deg);
-o-animation: outlineBefore 4s linear infinite;
-moz-animation: outlineBefore 4s linear infinite;
-ms-animation: outlineBefore 4s linear infinite;
-webkit-animation: outlineBefore 4s linear infinite;
animation: outlineBefore 4s linear infinite;
}
@keyframes outline {
0% {
-o-transform: rotate(0deg) skewX(80deg);
-moz-transform: rotate(0deg) skewX(80deg);
-webkit-transform: rotate(0deg) skewX(80deg);
-ms-transform: rotate(0deg) skewX(80deg);
transform: rotate(0deg) skewX(80deg);
}
25% {
-o-transform: rotate(500deg) skewX(15deg);
-moz-transform: rotate(500deg) skewX(15deg);
-webkit-transform: rotate(500deg) skewX(15deg);
-ms-transform: rotate(500deg) skewX(15deg);
transform: rotate(500deg) skewX(15deg);
}
50% {
-o-transform: rotate(1000deg) skewX(40deg);
-moz-transform: rotate(1000deg) skewX(40deg);
-webkit-transform: rotate(1000deg) skewX(40deg);
-ms-transform: rotate(1000deg) skewX(40deg);
transform: rotate(1000deg) skewX(40deg);
}
75% {
-o-transform: rotate(1500deg) skewX(60deg);
-moz-transform: rotate(1500deg) skewX(60deg);
-webkit-transform: rotate(1500deg) skewX(60deg);
-ms-transform: rotate(1500deg) skewX(60deg);
transform: rotate(1500deg) skewX(60deg);
}
100% {
-o-transform: rotate(2160deg) skewX(80deg);
-moz-transform: rotate(2160deg) skewX(80deg);
-webkit-transform: rotate(2160deg) skewX(80deg);
-ms-transform: rotate(2160deg) skewX(80deg);
transform: rotate(2160deg) skewX(80deg);
}
}
@keyframes outlineBefore {
0% {
-o-transform: skewX(-80deg);
-moz-transform: skewX(-80deg);
-webkit-transform: skewX(-80deg);
-ms-transform: skewX(-80deg);
transform: skewX(-80deg);
border: solid 1px rgba(var(--white-rgb), .8);
}
25% {
-o-transform: skewX(-15deg);
-moz-transform: skewX(-15deg);
-webkit-transform: skewX(-15deg);
-ms-transform: skewX(-15deg);
transform: skewX(-15deg);
border: solid 1px rgba(var(--white-rgb), .8);
}
49% {
border: solid 1px rgba(var(--white-rgb), .8);
}
50% {
-o-transform: skewX(-40deg);
-moz-transform: skewX(-40deg);
-webkit-transform: skewX(-40deg);
-ms-transform: skewX(-40deg);
transform: skewX(-40deg);
border: solid 1px rgba(var(--main-rgb), .5);
;
}
75% {
-o-transform: skewX(-60deg);
-moz-transform: skewX(-60deg);
-webkit-transform: skewX(-60deg);
-ms-transform: skewX(-60deg);
transform: skewX(-60deg);
border: solid 1px rgba(var(--main-rgb), .5);
;
}
100% {
-o-transform: skewX(-80deg);
-moz-transform: skewX(-80deg);
-webkit-transform: skewX(-80deg);
-ms-transform: skewX(-80deg);
transform: skewX(-80deg);
border: solid 1px rgba(var(--main-rgb), .5);
;
}
}
@keyframes in {
0% {
width: 144px;
height: 144px;
background: rgba(var(--white-rgb), .1);
}
40% {
width: 0px;
height: 0px;
background: rgba(var(--white-rgb), .1);
}
41% {
width: 0px;
height: 0px;
background: rgba(var(--main-rgb), .05);
;
}
50% {
width: 144px;
height: 144px;
background: rgba(var(--main-rgb), .05);
;
}
90% {
width: 0px;
height: 0px;
background: rgba(var(--main-rgb), .05);
;
}
91% {
width: 0px;
height: 0px;
background: rgba(var(--white-rgb), .1);
}
100% {
width: 144px;
height: 144px;
background: rgba(var(--white-rgb), .1);
}
}
@keyframes out1 {
0% {
width: 0px;
height: 0px;
}
30% {
width: 500vw;
height: 500vw;
}
100% {
width: 1000vw;
height: 1000vw;
}
}
@keyframes out2 {
0% {
width: 0px;
height: 0px;
}
30% {
width: 0px;
height: 0px;
}
60% {
width: 500vw;
height: 500vw;
}
100% {
width: 1000vw;
height: 1000vw;
}
}
/* FIN loader */
/* -------------------- inputs general */
.form-text::-webkit-input-placeholder {
/* Google Chrome y Safari */
color: rgba(var(--main-rgb), 0.2);
font-weight: 400;
opacity: 1;
letter-spacing: 0.03em;
font-family: var(--typo-primary);
text-decoration: none !important;
}
.form-text:-moz-placeholder {
/* Firefox anterior a 19 */
color: rgba(var(--main-rgb), 0.2);
font-weight: 400;
opacity: 1;
letter-spacing: 0.03em;
font-family: var(--typo-primary);
text-decoration: none !important;
}
.form-text::-moz-placeholder {
/* Firefox 19 y superior */
color: rgba(var(--main-rgb), 0.2);
font-weight: 400;
opacity: 1;
letter-spacing: 0.03em;
font-family: var(--typo-primary);
text-decoration: none !important;
}
.form-text:-ms-input-placeholder {
/* Internet Explorer 10 y superior */
color: rgba(var(--main-rgb), 0.2);
font-weight: 400;
opacity: 1;
letter-spacing: 0.03em;
font-family: var(--typo-primary);
text-decoration: none !important;
}
input.form-text {
padding: 24px !important;
height: 72px;
line-height: 24px;
letter-spacing: 0.03em;
color: var(--main);
-webkit-appearance: none;
background-color: var(--card-bg) !important;
width: 100%;
font-size: 24px;
text-align: center;
transition: var(--transition);
box-shadow: var(--shadow-shoft);
border-radius: 16px;
outline: none;
font-family: var(--typo-primary);
border: 0.5px solid rgba(var(--main-rgb), 0);
margin: 0;
text-decoration: none;
}
input.form-text:hover {
border: 0.5px solid rgba(var(--main-rgb), 0.3);
}
input.form-text:focus,
input.form-text:active {
border: 0.5px solid rgba(var(--main-rgb), 0.6);
color: var(--main);
}
input.form-text:visited {
text-decoration: none;
background-color: var(--card-bg) !important;
}
/* FIN inputs general */
/* -------------------- botones */
.cta {
text-align: center;
}
.btn-main {
display: inline-block;
background-color: var(--main);
font-size: 18px;
line-height: 18px;
letter-spacing: 1px;
padding: 14px 48px;
font-weight: 600;
color: var(--neutral-80);
text-transform: uppercase;
transition: var(--transition);
border-radius: 40px;
margin: 0 auto;
border: 1px solid var(--main);
font-family: var(--typo-primary);
box-shadow: var(--shadow-shoft);
}
.btn-main:hover,
.btn-main:focus {
background-color: rgba(var(--bg-rgb), 0.5);
box-shadow: none;
color: var(--main);
}
.btn-neutral {
background-color: rgba(var(--black-rgb), .05);
font-size: 16px;
font-family: var(--typo-primary);
letter-spacing: 1px;
padding: 16px 32px;
font-weight: 600;
color: var(--neutral-20);
text-transform: uppercase;
transition: var(--transition);
border-radius: 10px;
margin: 0 auto;
display: block;
border: 4px solid rgba(var(--white-rgb), .7);
cursor: pointer;
text-align: center;
}
.btn-neutral:hover {
background: rgba(var(--black-rgb), .1);
color: var(--neutral-60);
}
.btn.disabled,
.btn:disabled {
opacity: .2;
}
/* FIN botones */
/* -------------------- menseje error y success */
.msgError {
padding: 0 0 0 20px;
margin: 10px 0 0px 16px;
color: var(--error);
font-weight: 400;
font-size: 12px;
background-image: url(/imgs/icon_error.svg);
background-size: 14px;
background-repeat: no-repeat;
background-position: top 1px left;
float: left;
width: calc(100% - 36px);
min-height: 20px;
text-align: left;
}
.success {
padding: 0 0 0 18px;
margin: 10px 0 0px;
color: var(--ok);
font-weight: 400;
font-size: 12px;
background-image: url(/imgs/check.svg);
background-size: 12px;
background-repeat: no-repeat;
background-position: top 4px left;
float: left;
width: 100%;
text-align: left;
}
/* FIN menseje error */
/* -------------------- tunear checkbox */
.acepto-condiciones {
padding: 0 8px;
float: left;
width: calc(100% - 16px);
}
.acepto-condiciones label {
display: flex;
align-items: flex-start;
color: var(--neutral-40);
position: relative;
min-height: inherit;
padding: inherit;
font-size: 12px;
letter-spacing: 0;
line-height: 14px;
font-weight: 300;
}
.acepto-condiciones label a {
color: var(--neutral-40);
padding-left: 5px;
text-decoration: underline;
font-weight: 500;
}
.acepto-condiciones input {
width: 0;
height: 0;
opacity: 0;
}
.acepto-condiciones label>span {
width: 20px;
height: 20px;
display: flex;
justify-content: center;
border: 0.5px solid var(--neutral-10);
margin-right: 10px;
transition: all 0.3s;
background-color: rgba(var(--white-rgb), 0.7);
margin-top: -4px;
}
.acepto-condiciones input:checked+label>span {
animation: bounce 250ms;
border-color: var(--main);
}
.acepto-condiciones input:checked+label>span::before {
content: "";
position: absolute;
top: 3px;
left: 12px;
border-right: 2px solid transparent;
border-bottom: 2px solid transparent;
transform: rotate(45deg);
transform-origin: 0% 100%;
animation: checked-box 125ms 250ms forwards;
}
@keyframes checked-box {
0% {
width: 0;
height: 0;
border-color: var(--main);
transform: translate(0, 12px) rotate(45deg);
}
33% {
width: 5px;
height: 0;
border-color: var(--main);
transform: translate(0, 4px) rotate(45deg);
}
100% {
width: 5px;
height: 10px;
border-color: var(--main);
transform: translate(0, -8px) rotate(45deg);
}
}
@keyframes bounce {
0% {
transform: scale(1);
}
33% {
transform: scale(0.7);
}
100% {
transform: scale(1);
}
}
/* FIN tunear checkbox */
/* -------------------- efecto al pulsar los botones */
.push-item {
display: block;
position: absolute;
height: 100%;
width: 100%;
top: 0;
border-radius: 16px;
overflow: hidden;
left: 0;
cursor: pointer;
}
.ink {
display: block;
position: absolute;
border-radius: 100%;
transform: scale(0);
background: rgba(var(--main-rgb), 0.3);
}
.card-cata .ink {
background: rgba(var(--secondary-rgb), 0.3);
}
.card-game .ink {
background: rgba(var(--tertiary-rgb), 0.3);
}
.animate {
animation: ripple 0.65s linear;
}
@keyframes ripple {
100% {
opacity: 0;
transform: scale(2.5);
}
}
/* FIN efecto al pulsar los botones */
/* cards */
.card-group {
display: flex;
gap: 16px;
flex-wrap: wrap;
width: 100%;
}
.card {
background-color: var(--card-bg);
border-radius: 16px !important;
box-shadow: var(--shadow-shoft);
width: 100%;
margin-bottom: 0 !important;
overflow: hidden;
flex: inherit !important;
}
.content-card {
padding: 32px;
}
.content-card::after {
content: "";
display: block;
width: 40px;
height: 100%;
position: absolute;
top: 0;
right: 0;
background-color: rgba(var(--white-rgb), 0.1);
transition: var(--transition);
}
.card-cata:hover .content-card::after {
background-color: var(--secondary);
}
.card h2 {
font-size: 27px;
line-height: 27px;
font-weight: 300;
letter-spacing: 1px;
text-transform: uppercase;
margin: 24px 0 16px;
color: var(--neutral-10);
}
.card h2 strong {
font-weight: 500;
}
.card h3 {
font-size: 24px;
line-height: 27px;
font-weight: 300;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0 0 16px;
color: var(--neutral-40);
}
.card h3 strong {
font-weight: 400;
}
.card.card-cata h3 strong {
color: var(--secondary);
}
.card.card-game h3 strong {
color: var(--tertiary);
}
.card p {
font-size: 15px;
line-height: 18px;
color: var(--neutral-40);
letter-spacing: 1px;
margin: 0;
}
/* FIN cards */
/* OPEN: icono tipo cata */
.icono-tipo-cata {
position: fixed;
top: 16px;
left: 16px;
border: 0.5px solid var(--secondary);
border-radius: 20px;
width: 36px;
height: 36px;
padding: 8px;
}
.juegoquizz .icono-tipo-cata {
border-color: var(--tertiary);
}
/* FIN: icono tipo cata */
/* ------------------------------------------------------ CLOSE: Generales ------------------------------------------------------ */
/* -----------------------------------------------------------
-----------------------------------------------------------
-----------------------------------------------------------
OPEN: Pantalla BIENVENIDA
-----------------------------------------------------------
-----------------------------------------------------------
----------------------------------------------------------- */
.logo-icon {
text-align: center;
margin-bottom: 72px;
opacity: 0.5;
}
.sc_bienvenida h1 {
font-size: 24px;
line-height: 32px;
text-align: center;
color: var(--neutral-60);
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 0 160px;
}
.sc_bienvenida h1 strong {
display: block;
font-size: 48px;
line-height: 42px;
color: var(--neutral-20);
font-weight: 300;
}
.sc_bienvenida h1 span {
line-height: 30px;
color: var(--main);
}
/* ------------------------------------------------------ CLOSE: Pantalla BIENVENIDA ------------------------------------------------------ */
/* -----------------------------------------------------------
-----------------------------------------------------------
-----------------------------------------------------------
OPEN: Pantalla Selección JUEGO
-----------------------------------------------------------
-----------------------------------------------------------
----------------------------------------------------------- */
.sc_games .container .logo-icon {
margin-bottom: 40px;
}
.sc_games h2.title2 {
margin-bottom: 40px;
color: var(--neutral-60);
}
.sc_games .card-group {
gap: 16px;
}
.sc_games .card-cata .content-card::after {
background-color: rgba(var(--secondary-rgb), 1);
}
.sc_games .card-game .content-card::after {
background-color: rgba(var(--tertiary-rgb), 1);
}
/* esto es para borrar cuando se haga que todo el card sea enlace */
.icon-game a {
position: relative;
z-index: 1;
display: inline-block;
}
/* FIN esto es para borrar cuando se haga que todo el card sea enlace */
/* ------------------------------------------------------ CLOSE: Pantalla Selección JUEGO ------------------------------------------------------ */
/* -----------------------------------------------------------
-----------------------------------------------------------
-----------------------------------------------------------
OPEN: Pantalla Modo JUEGO (sólo o grupo)
-----------------------------------------------------------
-----------------------------------------------------------
----------------------------------------------------------- */
.sc_modo_juego h2.title {
margin-bottom: 80px;
}
.sc_modo_juego .card-group {
gap: 16px;
}
.sc_modo_juego .icon-game {
position: absolute;
right: 56px;
top: 50%;
margin-top: -40px;
}
.sc_modo_juego .card h3 {
margin-top: 24px;
}
.sc_modo_juego .card p {
font-size: 12px;
line-height: 18px;
}
/* estilos diferenciadores para juegoquizz */
.juegoquizz .sc_modo_juego h2.title {
margin-bottom: 40px;
}
.juegoquizz .card.card-cata h3 strong {
color: var(--tertiary);
}
.juegoquizz .card-cata:hover .content-card::after {
background-color: var(--tertiary);
}
/* fin estilos diferenciadores para juegoquizz */
/* ------------------------------------------------------ CLOSE: Pantalla Modo JUEGO (sólo o grupo) ------------------------------------------------------ */
/* -----------------------------------------------------------
-----------------------------------------------------------
-----------------------------------------------------------
OPEN: Pantalla Selección vinos
-----------------------------------------------------------
-----------------------------------------------------------
----------------------------------------------------------- */
.sc_seleccion_vino {
margin-bottom: 80px;
text-align: center;
}
.sc_seleccion_vino h2.title2 {
margin-bottom: 16px;
}
.list-vinos {
display: flex;
flex-wrap: wrap;
padding-bottom: 80px;
}
.elige-vino input[type="checkbox"] {
display: none;
}
.elige-vino {
display: inline-block;
width: calc(100% / 4 - 8px);
float: left;
margin: 16px 4px;
cursor: pointer;
}
.elige-vino:nth-child(4n+5) {
clear: both;
}
.cont-img-vino {
background-color: var(--card-bg);
padding: 8px;
border: 1px solid var(--secondary);
border-radius: 16px;
height: 210px;
width: 100%;
opacity: .4;
transition: var(--transition);
margin-bottom: 8px;
}
.elige-vino-checked .cont-img-vino {
opacity: 1;
border-width: 3px;
}
.cont-img-vino .img-vino {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
border-radius: 8px;
background-color: var(--white);
}
.cont-img-vino .img-vino img {
width: auto;
object-fit: cover;
height: 100%;
border-radius: 8px;
}
.elige-vino label {
font-size: 15px;
line-height: 16px;
text-align: center;
letter-spacing: 0.03em;
color: var(--neutral-40);
display: block;
}
.elige-vino.elige-vino-checked label {
color: var(--secondary);
font-weight: 500;
}
.sc_seleccion_vino .btn {
position: fixed;
bottom: 80px;
left: 50%;
width: 200px;
max-width: 200px;
margin-left: -100px;
}
/* ------------------------------------------------------ CLOSE: Pantalla Modo JUEGO (sólo o grupo) ------------------------------------------------------ */
/* -----------------------------------------------------------
-----------------------------------------------------------
-----------------------------------------------------------
OPEN: Pantalla Cómo te llamas
-----------------------------------------------------------
-----------------------------------------------------------
----------------------------------------------------------- */
#form-login {
text-align: center;
padding-bottom: 80px;
}
.saludo {
text-align: center;
margin-bottom: 56px;
}
.saludo h1 {
font-size: 48px;
line-height: 40px;
font-weight: 300;
text-transform: uppercase;
color: var(--secondary);
}
.saludo p {
font-size: 18px;
line-height: 21px;
color: var(--neutral-40);
}
#form-login h2 {
margin-bottom: 24px;
}
#form-login .btn {
margin-top: 160px;
}
/* estilos diferenciadores para juegoquizz */
.juegoquizz .saludo h1 {
color: var(--tertiary);
}
/* fin estilos diferenciadores para juegoquizz */
/* ------------------------------------------------------ CLOSE: Pantalla Cómo te llamas ------------------------------------------------------ */
/* -----------------------------------------------------------
-----------------------------------------------------------
-----------------------------------------------------------
OPEN: Pantalla Ranking
-----------------------------------------------------------
-----------------------------------------------------------
----------------------------------------------------------- */
.titulo.ranking {
text-align: center;
margin-bottom: 80px;
margin-top: 80px;
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 8px;
justify-content: center;
}
.titulo h1 {
font-size: 40px;
line-height: 27px;
font-weight: 300;
text-transform: uppercase;
margin-bottom: 0px;
color: var(--neutral-40);
}
.container-ranking .card-group {
height: calc(95vh - 240px);
overflow: auto;
}
.card-ranking {
display: flex;
flex-direction: row;
align-items: center;
padding: 16px 48px 12px 24px;
gap: 16px;
justify-content: space-between;
}
.ranking-jugador {
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
}
.contador-ranking {
font-weight: 300;
font-size: 40px;
line-height: 24px;
letter-spacing: 0.03em;
margin-bottom: 0px;
color: var(--neutral-60);
}
.card h2.nombre-jugador {
font-weight: 400;
font-size: 21px;
line-height: 24px;
min-height: 24px;
margin: 0px;
letter-spacing: 0.03em;
text-transform: capitalize;
}
.puntuacion-ranking {
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 4px;
}
.puntuacion-ranking .puntos,
.puntuacion-participante .puntos {
font-weight: 400;
font-size: 24px;
line-height: 24px;
color: var(--neutral-40);
}
.puntuacion-ranking .label-puntos,
.puntuacion-participante .label-puntos {
font-weight: 300;
font-size: 14px;
line-height: 24px;
color: var(--neutral-40);
}
.container-ranking .card-group .card:nth-child(1) .card-ranking::after,
#ranking .card:nth-child(1) .card-ranking::after {
background: var(--main);
}
.container-ranking .card-group .card:nth-child(2) .card-ranking::after,
#ranking .card:nth-child(2) .card-ranking::after {
background: var(--neutral-40);
}
.container-ranking .card-group .card:nth-child(3) .card-ranking::after,
#ranking .card:nth-child(3) .card-ranking::after {
background: var(--tertiary);
}
.container-ranking .card-group .card:nth-child(1) span,
.container-ranking .card-group .card:nth-child(1) .contador-ranking,
.container-ranking .card-group .card:nth-child(1) .nombre-jugador,
.listado-ranking .card:nth-child(1) span,
.listado-ranking .card:nth-child(1) .contador-ranking,
.listado-ranking .card:nth-child(1) .nombre-jugador {
color: var(--main);
}
.container-ranking .card-group .card:nth-child(2) span,
.container-ranking .card-group .card:nth-child(2) .contador-ranking,
.container-ranking .card-group .card:nth-child(2) .nombre-jugador,
.listado-ranking .card:nth-child(2) span,
.listado-ranking .card:nth-child(2) .contador-ranking,
.listado-ranking .card:nth-child(2) .nombre-jugador {
color: var(--neutral-40);
}
.container-ranking .card-group .card:nth-child(3) span,
.container-ranking .card-group .card:nth-child(3) .contador-ranking,
.container-ranking .card-group .card:nth-child(3) .nombre-jugador,
.listado-ranking .card:nth-child(3) span,
.listado-ranking .card:nth-child(3) .contador-ranking,
.listado-ranking .card:nth-child(3) .nombre-jugador {
color: var(--tertiary);
}
.card-ranking::after {
width: 24px;
}
.cabecera-ranking .texto-enhorabuena {
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 18px;
text-align: center;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--neutral-20);
opacity: 0.6;
margin-bottom: 16px;
}
.puntuacion.cabecera-ranking {
margin-bottom: 24px;
}
.cabecera-ranking .texto-enhorabuena span {
line-height: 18px;
}
#solo .puntuacion.cabecera-ranking .label-puntuacion::before {
display: none;
}
#solo .puntuacion.cabecera-ranking .container-puntuacion {
margin-bottom: 20px;
text-align: center;
}
#solo .puntuacion.cabecera-ranking .titulo.ranking {
margin-top: 40px;
margin-bottom: 20px;
}
#solo .puntuacion.cabecera-ranking .label-puntuacion {
font-style: normal;
font-weight: 300;
font-size: 32px;
line-height: 32px;
text-align: center;
letter-spacing: 0.03em;
color: var(--neutral-20);
}
#solo .puntuacion.cabecera-ranking .numero-puntuacion {
font-style: normal;
font-weight: 300;
font-size: 32px;
line-height: 32px;
text-align: center;
letter-spacing: 0.03em;
color: var(--secondary);
}
.juegoquizz #solo .puntuacion.cabecera-ranking .numero-puntuacion {
color: var(--tertiary);
}
#solo .puntuacion.cabecera-ranking .titulo.ranking img {
filter: invert(40%) sepia(24%) saturate(234%) hue-rotate(126deg) brightness(55%) contrast(83%);
height: 26px;
padding-bottom: 4px;
}
.juegoquizz #solo .puntuacion.cabecera-ranking .titulo.ranking img {
filter: none;
}
.titulo.ranking h1 {
font-size: 32px;
line-height: 32px;
}
.listado-ranking {
display: flex;
gap: 16px;
flex-wrap: wrap;
width: 100%;
margin-bottom: 56px;
}
.ver-ranking {
text-align: center;
}
.ver-ranking a {
text-transform: uppercase;
font-size: 12px;
line-height: 18px;
color: var(--neutral-60);
transition: var(--transition);
border-bottom: 0.5px solid var(--neutral-60);
letter-spacing: 0.05em;
text-decoration: none;
}
.ver-ranking a:hover {
color: var(--neutral-20);
border-color: var(--neutral-40);
}
.posicion-ranking p {
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
text-align: center;
letter-spacing: 0.03em;
color: var(--neutral-40);
margin-top: 16px;
}
.posicion-ranking strong {
color: var(--white);
font-weight: 400;
}
/* ------------------------------------------------------ CLOSE: Pantalla Ranking ------------------------------------------------------ */
/* -----------------------------------------------------------
-----------------------------------------------------------
-----------------------------------------------------------
OPEN: Pantalla Preguntas
-----------------------------------------------------------
-----------------------------------------------------------
----------------------------------------------------------- */
#instrucciones h3 {
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 27px;
text-align: center;
letter-spacing: 0.03em;
color: var(--neutral-40);
opacity: 0.7;
margin: auto;
margin-bottom: 24px;
}
.grupo-instrucciones {
margin-bottom: 56px;
}
.card.pregunta {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border: 1px solid rgba(104, 104, 104, 0.1);
margin-bottom: 32px !important;
}
.card.pregunta .question {
width: 100%;
}
.card.pregunta h1.texto-pregunta {
width: 100%;
position: relative;
z-index: 0;
height: auto;
overflow: hidden;
border: none !important;
padding: 0.5px !important;
width: 100%;
box-shadow: var(--shadow-shoft);
transition: .2s all linear;
text-decoration: initial;
margin: 0px;
border-radius: 16px;
}
.card.pregunta h1.texto-pregunta::after {
content: "";
position: absolute;
z-index: -2;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
background-color: rgba(104, 104, 104, 0.1);
background-repeat: no-repeat;
background-size: 50% 50%, 50% 50%;
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
background-image: linear-gradient(90deg, rgba(var(--main-rgb), 0) 0%, rgba(var(--main-rgb), 1) 50%, rgba(var(--main-rgb), 0) 100%);
-webkit-animation: rotate 2s linear infinite;
animation: rotate 4s linear infinite;
}
.card.pregunta h1.texto-pregunta span {
position: relative;
z-index: 1;
width: 100%;
align-items: center;
display: flex;
border-radius: 16px !important;
background-color: var(--card-question-bg);
text-transform: inherit;
padding: 24px;
justify-content: center;
font-weight: 400;
font-size: 18px;
line-height: 24px;
text-align: center;
letter-spacing: 0.03em;
color: var(--neutral-20);
}
.card.respuesta {
margin-bottom: 15px !important;
/*padding: 24px 50px 24px 24px;*/
}
.card.respuesta a {
font-weight: 400;
font-size: 18px;
line-height: 24px;
letter-spacing: 0.03em;
text-decoration: none;
color: var(--neutral-40);
padding: 16px 40px 16px 24px;
display: block;
width: 100%;
height: 100%;
}
.card.respuesta::after {
content: "";
display: block;
width: 24px;
height: 100%;
position: absolute;
top: 0;
right: 0;
background-color: rgba(var(--white-rgb), 0.1);
}
#solo .card.respuesta.respondido::after {
background-color: var(--secondary);
}
.juegoquizz #solo .card.respuesta.respondido::after {
background-color: var(--tertiary);
}
#solo .card.respuesta.respondido a {
color: var(--secondary);
text-decoration: none;
}
.juegoquizz #solo .card.respuesta.respondido a {
color: var(--tertiary);
}
#solo .cabecera-descripcion {
margin-bottom: 24px;
}
/* .juegoquizz #solo .cabecera-descripcion {
margin-bottom: 24px;
margin-top: 160px;
} */
#solo .cabecera-descripcion h1 {
font-style: normal;
font-weight: 400;
font-size: 32px;
line-height: 27px;
text-align: center;
letter-spacing: 0.03em;
color: var(--secondary);
}
.juegoquizz #solo .cabecera-descripcion h1 {
color: var(--tertiary);
}
#solo .cabecera-descripcion h1 span {
display: block;
font-size: 14px;
text-transform: uppercase;
color: var(--neutral-60);
margin: -16px 0 8px;
line-height: 16px;
}
#solo .cabecera-descripcion p {
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 24px;
text-align: center;
letter-spacing: 0.03em;
color: var(--neutral-40);
opacity: 0.7;
margin-top: 16px;
}
.juegoquizz #solo .cabecera-descripcion p {
margin-bottom: 160px;
}
.cont-img-categoria {
height: 320px;
border-radius: 16px;
display: flex;
flex-direction: row;
justify-self: center;
justify-content: center;
width: 135px;
background-color: var(--white);
margin: 0 auto 40px;
padding: 8px;
box-shadow: var(--shadow-shoft);
}
.img-categoria {
height: 100%;
border-radius: 8px;
opacity: 0.95;
}
/* recolocación de los puntos en las pantallas de presentación de los vinos */
#solo .container-categoria .puntuacion {
position: absolute;
top: 20px;
right: 24px;
margin-bottom: 0;
}
#solo .container-categoria .puntuacion .container-puntuacion {
display: flex;
align-items: center;
flex-wrap: wrap;
text-align: right;
}
#solo .container-categoria .puntuacion .label-puntuacion::before {
display: none;
}
#solo .container-categoria .puntuacion .label-puntuacion {
font-size: 12px;
line-height: 12px;
display: block;
color: var(--neutral-60);
opacity: 0.5;
}
#solo .container-categoria .puntuacion .numero-puntuacion {
font-size: 14px;
line-height: 14px;
color: var(--neutral-60);
margin-top: 2px;
display: block;
text-align: right;
}
/* FIN recolocación de los puntos en las pantallas de presentación de los vinos */
.categoria1 .cont-img-categoria {
display: none;
}
.card.respuesta.respuestacorrecta::after {
background-color: var(--ok);
}
.card.respuesta.respuestacorrecta a {
color: var(--ok);
}
.card.respuesta.respuestaincorrecta::after {
background-color: var(--error);
}
.card.respuesta.respuestaincorrecta a {
color: var(--error);
}
.puntuacion {
margin-bottom: 40px;
}
#solo .puntuacion .label-puntuacion::before {
background-image: url("../imgs/icon_ranking.svg");
background-size: 18px 18px;
display: inline-block;
width: 18px;
height: 18px;
margin-right: 5px;
content: "";
filter: invert(40%) sepia(24%) saturate(234%) hue-rotate(126deg) brightness(55%) contrast(83%);
}
.juegoquizz #solo .puntuacion .label-puntuacion::before {
filter: none;
}
#solo .puntuacion .label-puntuacion {
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 18px;
letter-spacing: 0.03em;
color: var(--neutral-40);
}
#solo .puntuacion .numero-puntuacion {
font-size: 24px;
font-weight: 500;
line-height: 18px;
letter-spacing: 0.03em;
text-align: left;
color: var(--secondary);
}
.juegoquizz #solo .puntuacion .numero-puntuacion {
color: var(--tertiary);
}
.textoexplicativo p {
font-style: normal;
font-weight: 400;
font-size: 15px;
line-height: 15px;
letter-spacing: 0.03em;
color: var(--neutral-60);
padding-left: 20px;
position: relative;
}
.textoexplicativo p::before {
background-image: url("../imgs/icon_texto_explicativo.svg");
background-size: 14px 14px;
display: inline-block;
width: 14px;
height: 14px;
margin-right: 5px;
content: "";
background-position: center;
background-repeat: no-repeat;
margin-top: 2px;
margin-bottom: -2px;
position: absolute;
left: 0;
top: -2px;
}
.cta {
margin-top: 32px;
}
.container-ayuda {
text-align: right;
margin-top: 16px;
margin-bottom: 24px;
}
.btn-main.btn-ayuda {
display: inline-flex;
flex-direction: row;
align-items: center;
padding: 8px 8px 8px 16px;
gap: 8px;
background: none;
text-transform: none;
border: 0.5px solid var(--secondary);
border-radius: 30px;
}
.btn-main.btn-ayuda:active {
background-color: rgba(var(--secondary-rgb), 0.3);
}
#solo .btn-main.btn-ayuda {
border: 0.5px solid var(--secondary);
}
.btn-main.btn-ayuda span {
font-style: normal;
font-weight: 500;
font-size: 13px;
line-height: 18px;
text-align: right;
letter-spacing: 0.03em;
color: var(--secondary);
}
#solo .btn-main.btn-ayuda span {
color: var(--secondary);
}
@-webkit-keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
/* ------------------------------------------------------ CLOSE: Pantalla Preguntas ------------------------------------------------------ */
/* -----------------------------------------------------------
-----------------------------------------------------------
-----------------------------------------------------------
OPEN: Pantalla email
-----------------------------------------------------------
-----------------------------------------------------------
----------------------------------------------------------- */
h3.title-thanks {
font-style: normal;
font-weight: 400;
font-size: 32px;
line-height: 32px;
text-align: center;
letter-spacing: 0.03em;
color: var(--neutral-20);
margin-bottom: 16px;
}
#solo .cabecera-descripcion p.texto-segmentacion {
max-width: 144px;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 18px;
text-align: center;
letter-spacing: 0.05em;
color: var(--neutral-20);
margin: auto;
margin-top: 80px;
margin-bottom: 160px;
}
.texto-gracias {
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
text-align: center;
letter-spacing: 0.03em;
color: var(--neutral-40);
margin-bottom: 8px;
}
.texto-gracias-destacado {
color: var(--neutral-40);
margin-top: 30px;
}
#save-email,
#no-save-email {
text-align: center;
}
#save-email label.check-form {
font-weight: 400;
font-size: 16px;
line-height: 16px;
letter-spacing: 0.05em;
color: var(--neutral-40);
margin-top: 25px;
display: grid;
grid-template-columns: 40px auto;
text-align: left;
margin-bottom: 20px;
}
#save-email label.check-form span {
display: flex;
align-items: center;
}
#save-email label.check-form a {
font-weight: 400;
font-size: 18px;
line-height: 18px;
letter-spacing: 0.05em;
color: var(--neutral-60);
text-decoration: underline;
padding-left: 5px;
}
input[type="checkbox"] {
margin-right: 8px;
width: 32px;
height: 32px;
appearance: none;
margin: 0;
background-color: var(--card-bg);
border: 1px solid rgba(197, 159, 79, 0.2);
box-shadow: var(--shadow-shoft);
border-radius: 8px;
display: grid;
place-content: center;
}
input[type="checkbox"]::before {
content: "";
width: 21px;
height: 21px;
transform: scale(0);
transition: 120ms transform ease-in-out;
box-shadow: inset 1em 1em var(--form-control-color);
background-image: url("/imgs/icon_check.svg");
background-size: 21px;
background-repeat: no-repeat;
}
input[type="checkbox"]:checked::before {
transform: scale(1);
}
#save-email .btn-main {
margin-bottom: 40px;
margin-top: 40px;
}
.btn-main-light {
background-color: var(--neutral-80);
border-color: var(--neutral-80);
color: var(--neutral-60);
}
.btn-main-light:hover,
.btn-main-light:focus {
background-color: rgba(var(--bg-rgb), 0.5);
box-shadow: none;
color: var(--neutral-40);
}
#fincata {
text-align: center;
}
#fincata .btn-main {
margin-top: 40px;
margin-bottom: 40px;
}
/* ------------------------------------------------------ CLOSE: Pantalla email ------------------------------------------------------ */
/* -----------------------------------------------------------
-----------------------------------------------------------
-----------------------------------------------------------
OPEN: Popups
-----------------------------------------------------------
-----------------------------------------------------------
----------------------------------------------------------- */
.card.instruccion {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 8px 32px 8px 24px;
height: 80px;
background: var(--card-bg);
box-shadow: var(--shadow-shoft);
;
border-radius: 16px;
flex: none;
order: 1;
flex-grow: 0;
cursor: pointer;
}
.card.instruccion .content-instruccion {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.texto-instruccion {
display: flex;
flex-direction: column;
justify-content: start;
align-items: start;
gap: 4px;
}
.texto-instruccion .titulo-instruccion {
color: var(--neutral-20);
font-style: normal;
font-weight: 500;
font-size: 21px;
line-height: 21px;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.texto-instruccion .desc-instruccion {
font-weight: 400;
font-size: 13px;
line-height: 13px;
letter-spacing: 0.03em;
color: var(--neutral-40);
}
.modal-dialog {
width: 100%;
height: 100%;
margin: 0px;
}
.modal-dialog {
background: rgba(20, 23, 29, 0.75);
width: 100%;
height: 100%;
}
.modal-header {
border-bottom: none;
padding: 32px 0 24px;
}
.modal-content {
background: none;
width: 100%;
height: 100%;
padding: 0px 32px 40px 32px;
}
.modal-body {
background: var(--card-question-bg);
box-shadow: var(--shadow-shoft);
border-radius: 16px;
padding: 40px 20px 20px 20px;
height: 100%;
overflow: auto;
}
.nombre-tipo {
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 24px;
text-align: left;
margin-top: 25px;
margin-bottom: 30px;
letter-spacing: 0.03em;
color: var(--neutral-20);
}
.container-tipo {
margin-top: 24px;
}
.container-nariz .nombre-tipo {
margin-bottom: 10px;
}
.nombre-tipo strong {
color: var(--neutral-10);
font-weight: 400;
}
.descripcion-tipo {
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
letter-spacing: 0.03em;
margin-bottom: 20px;
color: var(--secondary);
}
.container-vinos {
display: grid;
grid-auto-flow: row;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.item-vino {
text-align: center;
}
.nombre-vino {
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 18px;
text-align: center;
letter-spacing: 0.03em;
color: var(--neutral-40);
margin-top: 15px;
}
.item-tipo-aroma {
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--neutral-40);
margin-top: 25px;
margin-bottom: 7px;
}
span.item-aroma {
border: 0.5px solid var(--neutral-60);
border-radius: 4px;
font-style: normal;
font-weight: 300;
font-size: 16px;
line-height: 50px;
letter-spacing: 0.05em;
color: var(--neutral-20);
padding: 4px 8px;
text-align: center;
white-space: nowrap;
margin-right: 4px;
}
.container-boca {
margin-top: 16px;
}
.descripcion-boca {
font-style: normal;
font-weight: 400;
font-size: 15px;
line-height: 18px;
letter-spacing: 0.03em;
color: var(--neutral-40);
}
.container-valoracion {
display: grid;
grid-auto-flow: row;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.container-valoracion .item-vino img {
opacity: .5;
}
.sabor {
margin-bottom: 40px;
}
.sabor .nombre-tipo {
margin-bottom: 10px;
}
.container-boca .container-valoracion {
display: block;
}
.container-boca .container-valoracion .item-vino {
display: inline-block;
width: 64px;
}
.modal-type {
margin-bottom: 15px;
}
.carousel_container {
height: calc(100% - 50px);
}
.carousel_items {
overflow-x: scroll;
overflow-y: hidden;
width: 100%;
height: 100%;
padding: 0px;
--slide-count: 4;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
.carousel_items ul {
width: calc(100% * var(--slide-count));
display: flex;
height: 95%;
}
li.carousel_item {
scroll-snap-align: start;
}
li.carousel_item img {
width: 100%;
height: 100%;
}
.nav_dots a {
display: inline-block;
}
.nav_dots nav {
text-align: center;
}
.dot {
height: 8px;
width: 8px;
border: 1px solid var(--neutral-60);
border-radius: 50%;
display: inline-block;
margin: 5px;
}
.nav_dots nav a:active .dot {
background-color: var(--neutral-20);
border: 1px solid var(--neutral-20);
}
/* popup director */
#ayuda-director h2 {
color: var(--tertiary);
font-size: 24px;
line-height: 27px;
font-weight: 300;
}
/* fin popup director */
/* ------------------------------------------------------ CLOSE: Popups ------------------------------------------------------ */
/* -----------------------------------------------------------
-----------------------------------------------------------
-----------------------------------------------------------
OPEN: Sorteo premios
-----------------------------------------------------------
-----------------------------------------------------------
----------------------------------------------------------- */
.sc-sorteo-premios {
margin-top: 40px;
text-align: center;
}
.sc-sorteo-premios .logo-icon {
margin-bottom: 24px;
max-height: 48px;
}
.sc-sorteo-premios .logo-icon img {
max-height: 48px;
}
.sc-sorteo-premios h1.titulo {
font-style: normal;
font-weight: 300;
font-size: 18px;
line-height: 24px;
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--neutral-40);
opacity: 0.5;
margin-bottom: 24px;
}
.sc-sorteo-premios .mensaje-premio {
font-style: normal;
font-weight: 300;
font-size: 24px;
line-height: 24px;
text-align: center;
letter-spacing: 0.05em;
color: var(--neutral-20);
margin-bottom: 8px;
}
.sc-sorteo-premios .titulo-premio {
font-style: normal;
font-weight: 500;
font-size: 27px;
line-height: 27px;
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.sc-sorteo-premios .titulo-premio.premiado {
color: var(--main);
}
.sc-sorteo-premios .titulo-premio.no-premiado {
color: var(--neutral-20);
}
.sc-sorteo-premios .mensaje-recordatorio {
max-width: 230px;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 16px;
text-align: center;
letter-spacing: 0.03em;
color: var(--neutral-60);
opacity: 0.5;
margin: auto;
margin-top: 40px;
}
.sc-sorteo-premios .mensaje-compra-vino {
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 21px;
text-align: center;
letter-spacing: 0.05em;
color: var(--neutral-60);
margin-top: 80px;
}
.sc-sorteo-premios .mensaje-compra-vino strong {
font-weight: 400;
color: var(--neutral-20);
display: block;
padding-top: 4px;
}
.sc-sorteo-premios .mensaje-compra-vino.premio {
margin-top: 24px;
}
.sc-sorteo-premios .cont-img-vino {
display: inline-block;
width: auto;
margin: 0 auto;
opacity: 0.9;
border-color: var(--neutral-60);
}
.sc-sorteo-premios .cont-img-vino .img-vino {
display: inline-block;
width: auto;
}
/* ------------------------------------------------------ CLOSE: Sorteo premios ------------------------------------------------------ */
/* -----------------------------------------------------------
-----------------------------------------------------------
-----------------------------------------------------------
OPEN: Pantalla QUIÉN VA A DIRIGIR
-----------------------------------------------------------
-----------------------------------------------------------
----------------------------------------------------------- */
#grupo .btn-main.btn-ayuda {
border: 0.5px solid var(--tertiary);
}
#grupo .btn-main.btn-ayuda span {
color: var(--tertiary);
}
/* ------------------------------------------------------ CLOSE: Pantalla QUIÉN VA A DIRIGIR ------------------------------------------------------ */
/* -----------------------------------------------------------
-----------------------------------------------------------
-----------------------------------------------------------
OPEN: Compartir Código
-----------------------------------------------------------
-----------------------------------------------------------
----------------------------------------------------------- */
.codigo {
text-align: center;
}
.codigo .texto-gracias strong {
font-weight: 500;
color: var(--neutral-10);
}
.codigo h4 {
color: var(--tertiary);
font-size: 32px;
line-height: 32px;
font-weight: 500;
border: 1px dashed var(--tertiary);
border-radius: 8px;
display: inline-block;
padding: 16px 40px;
letter-spacing: 2px;
margin: 16px auto 64px;
}
.codigo .conectados {
color: var(--neutral-20);
letter-spacing: 1px;
display: flex;
align-items: center;
gap: 8px;
justify-content: center;
font-size: 14px;
line-height: 14px;
margin-bottom: 32px;
}
.codigo .conectados p.numeroconectados {
color: var(--tertiary);
font-size: 18px;
line-height: 14px;
}
.codigo .nuevo-conectado {
color: var(--neutral-40);
margin-bottom: 64px;
letter-spacing: 0.05em;
font-size: 14px;
line-height: 14px;
}
.codigo .nuevo-conectado strong {
color: var(--tertiary);
font-weight: 400;
}
/* ------------------------------------------------------ CLOSE: Compartir Código ------------------------------------------------------ */
/* -----------------------------------------------------------
-----------------------------------------------------------
-----------------------------------------------------------
OPEN: Pantalla espera
-----------------------------------------------------------
-----------------------------------------------------------
----------------------------------------------------------- */
.espera .bienvenida {
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--neutral-40);
opacity: 1;
margin-bottom: 40px;
margin-top: 120px;
}
.espera .bienvenida strong {
font-weight: 400;
color: var(--tertiary);
padding-left: 8px;
}
.espera h3.title-thanks {
margin-bottom: 40px;
}
.juegoquizz .container-pregunta .num_respuestas {
color: var(--neutral-60);
margin-top: 32px;
letter-spacing: 0.05em;
font-size: 14px;
line-height: 14px;
text-align: center;
}
.juegoquizz .container-pregunta .num_respuestas strong {
color: var(--tertiary);
font-weight: 400;
}
/* ------------------------------------------------------ CLOSE: Pantalla espera ------------------------------------------------------ */
/* -----------------------------------------------------------
-----------------------------------------------------------
-----------------------------------------------------------
OPEN: Pantalla categorÃa ranking
-----------------------------------------------------------
-----------------------------------------------------------
----------------------------------------------------------- */
.container-categoria .ranking-categorias {
margin-top: -112px;
margin-bottom: 80px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.container-categoria .ranking-categorias .titulo.ranking {
text-align: center;
gap: 8px;
margin-bottom: 4px;
width: 100%;
margin-top: 0;
}
.container-categoria .ranking-categorias .titulo.ranking img {
height: 15px;
margin-bottom: 3px;
}
.container-categoria .ranking-categorias .titulo.ranking h2.title-rank-actual {
text-transform: uppercase;
font-size: 18px;
line-height: 16px;
font-weight: 300;
letter-spacing: 0.03em;
color: var(--neutral-60);
margin: 0;
}
.container-categoria .ranking-categorias .card {
background-color: initial;
border-radius: 8px !important;
flex: inherit !important;
border: 0.5px solid rgba(var(--white-rgb), 0.2);
}
.container-categoria .ranking-categorias .card-ranking {
padding: 8px 32px 6px 16px;
gap: 8px;
}
.container-categoria .ranking-categorias .card-ranking::after {
width: 16px;
background-color: rgba(var(--white-rgb), 0.08);
}
.container-categoria .ranking-categorias .contador-ranking {
font-size: 24px;
line-height: 18px;
color: var(--neutral-60);
opacity: 0.7;
}
.container-categoria .ranking-categorias .card h2.nombre-jugador {
font-size: 16px;
line-height: 18px;
min-height: 18px;
letter-spacing: 0.05em;
color: var(--neutral-60);
}
.container-categoria .ranking-categorias .puntuacion-participante .puntos {
font-size: 18px;
line-height: 18px;
color: var(--neutral-60);
}
.container-categoria .ranking-categorias .puntuacion-participante .label-puntos {
font-size: 12px;
line-height: 18px;
color: var(--neutral-60);
letter-spacing: 0.03em;
}
/* ------------------------------------------------------ CLOSE: Pantalla categorÃa ranking ------------------------------------------------------ */
.footer-cata .logo-home {
width: 166px;
}
.logo-home {
width: 83px;
}