.elementor-1036 .elementor-element.elementor-element-80fc137{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-765fcc0 *//* ===================================================
   FONDOS POR PANTALLA (GIFS)
=================================================== */
.pantalla-1   { background-image: url('https://carrots.io/wp-content/uploads/2026/01/ba8dd2e68102512160cef08982d06e592ab356c7.gif'); }
.pantalla-2   { background-image: url('https://carrots.io/wp-content/uploads/2026/01/19355c696ccc187c0955c7e70f4c46a076329840.gif'); }
.pantalla-2-1 { background-image: url('https://carrots.io/wp-content/uploads/2026/01/d65a1b2f40bd297d3e71d3df6f2024ca0a7c2da6.gif'); }
.pantalla-2-2 { background-image: url('https://carrots.io/wp-content/uploads/2026/01/9b28d9f48a0858dcb00ed96b17979d9556b57570.gif'); }
.pantalla-2-3 { background-image: url('https://carrots.io/wp-content/uploads/2026/01/7f55bad0d387743878226b39eb1c3dae00dac693.gif'); }
.pantalla-3   { background-image: url('https://carrots.io/wp-content/uploads/2026/01/7e28511bfb14a341add3b474b398914a1f98f5ec.gif'); }
.pantalla-3-1 { background-image: url('https://carrots.io/wp-content/uploads/2026/01/8e490f4ad0318c9773658d8e1276846062a3e973.gif'); }
.pantalla-3-2 { background-image: url('https://carrots.io/wp-content/uploads/2026/01/52da5d5b0f13ebec58fff7470c1a9d883a1e94d0.gif'); }
.pantalla-3-3 { background-image: url('https://carrots.io/wp-content/uploads/2026/01/799e8d053e4f358ffd9e8044076a3295e38febeb.gif'); }
.pantalla-4   { background-image: url('https://carrots.io/wp-content/uploads/2026/01/3e32ed3292e2f7d3cc02049dce21d5814042a067.gif'); }
.pantalla-4-1 { background-image: url('https://carrots.io/wp-content/uploads/2026/01/9aa6c6cdc0aada4c3aa0cd4cb275caa255c61e70.gif'); }
.pantalla-4-2 { background-image: url('https://carrots.io/wp-content/uploads/2026/01/6ac110f889a52f0cb4afe8c88ee0cdc3550ab0b4.gif'); }
.pantalla-4-3 { background-image: url('https://carrots.io/wp-content/uploads/2026/01/157291225d1647fd29f2167d9b23336db1173859.gif'); }
.pantalla-5   { background-image: url('https://carrots.io/wp-content/uploads/2026/01/b70885bda553cc1dc89e1f26d1250ddab3f2600d.gif'); }

/* ===================================================
   LAYOUT BASE
=================================================== */
#minijuego {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    color: #fff;
}

.pantalla {
    position: absolute;
    inset: 0;
    display: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.pantalla.activa { display: flex; }
.centro { text-align: center; padding: 20px; }
.bottom { position: absolute; bottom: 40px; width: 100%; text-align: center; }

/* ===================================================
   TIPOGRAFÍA
=================================================== */
#minijuego h1, #minijuego h2 {
    font-family: 'interd', sans-serif;
    font-size: 75px;
    text-transform: uppercase;
    color: white;
    -webkit-text-stroke: 2px black;
    font-weight: 900;
    line-height: 0.9em;
    margin: 0;
}

/* ===================================================
   BOTONES Y HOVERS (MODO CLARO)
=================================================== */
.opciones {
    display: flex;
    gap: 20px;
    margin-top: 30px;
    justify-content: center;
}

button, .cta {
    padding: 14px 26px;
    background: white;
    color: #000 !important;
    border: 2px solid white;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    font-family: 'interd';
    font-size: 32px;
    text-transform: uppercase;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    display: inline-block;
}

/* Hover Modo Claro: Fondo Blanco -> Fondo Negro */
button:hover, .cta:hover {
    background: #000 !important;
    color: #fff !important;
    border-color: #000;
}

/* ===================================================
   MODO OSCURO (body.dark-mode)
=================================================== */
body.dark-mode #minijuego h1, 
body.dark-mode #minijuego h2 {
    color: black;
    -webkit-text-stroke: 2px white;
}

/* Botones Modo Oscuro: Por defecto Fondo Negro */
body.dark-mode button, 
body.dark-mode .cta {
    background: #000 !important;
    color: #fff !important;
    border-color: #fff;
}

/* Hover Modo Oscuro: Fondo Negro -> Fondo Blanco */
body.dark-mode button:hover,
body.dark-mode .cta:hover {
    background: #fff !important;
    color: #000 !important;
    border-color: #fff;
}

/* ===================================================
   RESPONSIVE
=================================================== */
@media (max-width: 768px) {
    #minijuego h1, #minijuego h2 { font-size: 40px !important; }
    button, .cta { font-size: 24px; padding: 10px 20px; }
    .opciones { flex-direction: column; align-items: center; }
}/* End custom CSS */