/* ============================================
 Aventura con Mix, Max y Mex - Estilos Base
 Paleta calida de libro de cuentos
 Tema: Otono en Munich con gatos
 =========================================== */

/* --- 1. CSS Variables (Custom Properties) --- */
:root {
 /* Colores primarios calidos */
 --color-naranja: #e8812a;
 --color-marron: #4a2c17;
 --color-dorado: #f5a623;
 --color-crema: #fff8f0;
 --color-crema-oscuro: #f5e6d3;

 /* Colores de UI */
 --color-primario: #e8812a;
 --color-secundario: #4a2c17;
 --color-acento: #f5a623;
 --color-fondo: linear-gradient(135deg, #fff8f0 0%, #f5e6d3 50%, #fceabb 100%);
 --color-tarjeta: #ffffff;
 --color-borde: #e8d5b7;

 /* Colores de texto */
 --color-texto: #3a1f0d;
 --color-texto-claro: #6b4226;

 /* Feedback */
 --color-exito: #27ae60;
 --color-exito-fondo: #d4efdf;
 --color-exito-texto: #1a5c31;
 --color-error: #c0392b;
 --color-error-fondo: #fadbd8;
 --color-error-texto: #922b21;

 /* Acentos tematicos gato/raton */
 --color-gato-naranja: #e8812a;
 --color-raton-gris: #7f8c8d;
 --color-tejado-rojo: #c0392b;

 /* Tipografia */
 --font-size-base: 16px;
 --font-size-sm: 0.875rem;
 --font-size-md: 1rem;
 --font-size-lg: 1.15rem;
 --font-size-xl: 1.5rem;
 --font-size-2xl: 1.8rem;
 --font-size-3xl: 2.2rem;

 /* Bordes */
 --radio-sm: 8px;
 --radio-md: 12px;
 --radio-lg: 20px;
 --radio-full: 50px;

 /* Sombras */
 --sombra: 0 8px 32px rgba(74, 44, 23, 0.12);
 --sombra-hover: 0 12px 40px rgba(74, 44, 23, 0.2);
 --sombra-boton: 0 4px 15px rgba(232, 129, 42, 0.4);
 --sombra-boton-hover: 0 6px 20px rgba(232, 129, 42, 0.5);

 /* Transiciones */
 --transicion: 0.3s ease;
}

/* --- 2. Reset y Estilos Base --- */
*,
*::before,
*::after {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

html {
 font-size: var(--font-size-base);
}

body {
 font-family: "Comic Sans MS", "Chalkboard SE", "Arial Rounded MT Bold", sans-serif;
 background: var(--color-fondo);
 min-height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 20px;
 color: var(--color-texto);
 line-height: 1.6;
}

#app {
 width: 100%;
 max-width: 700px;
}

/* --- 3. Screen Management --- */
.screen {
 display: none;
 animation: fadeIn 0.4s ease;
}

.screen.active {
 display: block;
}

@keyframes fadeIn {
 from {
 opacity: 0;
 transform: translateY(20px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
}

@keyframes bounce {
 0%, 100% {
 transform: scale(1) translateY(0);
 }
 50% {
 transform: scale(1.05) translateY(-8px);
 }
}

@keyframes starPop {
 0% {
 transform: scale(0) rotate(0deg);
 }
 50% {
 transform: scale(1.3) rotate(180deg);
 }
 100% {
 transform: scale(1) rotate(360deg);
 }
}

@keyframes shake {
 0%, 100% {
 transform: translateX(0);
 }
 25% {
 transform: translateX(-5px);
 }
 75% {
 transform: translateX(5px);
 }
}

@keyframes pulse {
 0%, 100% {
 box-shadow: 0 0 0 0 rgba(232, 129, 42, 0.4);
 }
 50% {
 box-shadow: 0 0 0 10px rgba(232, 129, 42, 0);
 }
}

/* --- 4. Buttons --- */
.btn-principal {
 display: inline-block;
 background: linear-gradient(135deg, var(--color-primario), var(--color-acento));
 color: #ffffff;
 font-size: var(--font-size-lg);
 font-weight: bold;
 font-family: inherit;
 padding: 14px 32px;
 border: none;
 border-radius: var(--radio-full);
 cursor: pointer;
 transition: transform var(--transicion), box-shadow var(--transicion);
 box-shadow: var(--sombra-boton);
 margin-bottom: 12px;
 min-height: 44px;
 min-width: 44px;
}

.btn-principal:hover {
 transform: translateY(-2px) scale(1.03);
 box-shadow: var(--sombra-boton-hover);
}

.btn-principal:active {
 transform: translateY(0) scale(0.98);
}

.btn-secundario {
 display: inline-block;
 background: transparent;
 color: var(--color-primario);
 font-size: var(--font-size-md);
 font-weight: bold;
 font-family: inherit;
 padding: 12px 28px;
 border: 2px solid var(--color-primario);
 border-radius: var(--radio-full);
 cursor: pointer;
 transition: background var(--transicion), color var(--transicion), transform var(--transicion);
 margin-top: 8px;
 min-height: 44px;
 min-width: 44px;
}

.btn-secundario:hover {
 background: var(--color-primario);
 color: #ffffff;
 transform: translateY(-1px);
}

.btn-secundario:active {
 transform: translateY(0) scale(0.98);
}

/* --- 5. Typography --- */
h1 {
 font-size: var(--font-size-2xl);
 color: var(--color-secundario);
 line-height: 1.3;
}

h2 {
 font-size: var(--font-size-xl);
 color: var(--color-secundario);
 line-height: 1.4;
}

h3 {
 font-size: var(--font-size-lg);
 color: var(--color-marron);
 line-height: 1.4;
}

p, li, label, input, textarea, button {
 font-size: var(--font-size-md);
 line-height: 1.6;
}

/* --- 6. Start Screen (.inicio-container) --- */
.inicio-container {
 background: var(--color-tarjeta);
 border-radius: var(--radio-lg);
 padding: 40px 30px;
 text-align: center;
 box-shadow: var(--sombra);
 border: 2px solid var(--color-borde);
}

.titulo-principal h1 {
 font-size: var(--font-size-2xl);
 color: var(--color-secundario);
 text-shadow: 1px 1px 2px rgba(74, 44, 23, 0.15);
 margin-bottom: 8px;
}

.subtitulo {
 font-size: var(--font-size-md);
 color: var(--color-texto-claro);
 margin-bottom: 20px;
}

.subtitulo em {
 font-style: italic;
 color: var(--color-primario);
}

.inicio-visual {
 font-size: 3.5rem;
 margin: 20px 0;
 animation: bounce 2s ease-in-out infinite;
}

.instrucciones {
 font-size: var(--font-size-md);
 line-height: 1.6;
 color: var(--color-texto-claro);
 margin-bottom: 24px;
 padding: 0 10px;
}

/* --- 7. Level Header --- */
.nivel-header {
 background: var(--color-tarjeta);
 border-radius: var(--radio-lg);
 padding: 16px 20px;
 margin-bottom: 16px;
 box-shadow: var(--sombra);
 border: 2px solid var(--color-borde);
 display: flex;
 align-items: center;
 gap: 16px;
 flex-wrap: wrap;
}

.estrellas-counter {
 display: flex;
 align-items: center;
 gap: 6px;
 font-size: 1.2rem;
 font-weight: bold;
 color: var(--color-acento);
}

.estrellas-icono {
 font-size: 1.4rem;
}

.nivel-info {
 flex: 1;
 text-align: center;
}

.nivel-info h2 {
 font-size: 1.1rem;
 color: var(--color-secundario);
}

.progreso-bar {
 position: relative;
 width: 100%;
 height: 14px;
 background: var(--color-borde);
 border-radius: 10px;
 overflow: hidden;
}

.progreso-fill {
 height: 100%;
 background: linear-gradient(90deg, var(--color-primario), var(--color-acento));
 border-radius: 10px;
 transition: width 0.5s ease;
 width: 0%;
}

.progreso-bar span {
 position: absolute;
 right: 8px;
 top: 50%;
 transform: translateY(-50%);
 font-size: 0.7rem;
 color: var(--color-texto);
 font-weight: bold;
}

/* --- 8. Question Container --- */
#pregunta-container,
#libre-pregunta-container {
 background: var(--color-tarjeta);
 border-radius: var(--radio-lg);
 padding: 28px 24px;
 min-height: 300px;
 box-shadow: var(--sombra);
 border: 2px solid var(--color-borde);
}

.pregunta-texto {
 font-size: var(--font-size-lg);
 line-height: 1.6;
 color: var(--color-texto);
 margin-bottom: 20px;
}

/* --- 9. Interactive Buttons --- */
/* Option buttons for multiple choice */
.btn-opcion {
 display: block;
 width: 100%;
 text-align: left;
 background: var(--color-crema);
 color: var(--color-texto);
 font-size: var(--font-size-md);
 font-family: inherit;
 padding: 14px 18px;
 margin-bottom: 10px;
 border: 2px solid var(--color-borde);
 border-radius: var(--radio-md);
 cursor: pointer;
 transition: border-color var(--transicion), background var(--transicion), transform var(--transicion);
 min-height: 44px;
}

.btn-opcion:hover {
 border-color: var(--color-primario);
 background: #fff8f0;
 transform: translateX(4px);
}

.btn-opcion:active {
 transform: translateX(2px) scale(0.99);
}

.btn-opcion.correcta {
 border-color: var(--color-exito);
 background: var(--color-exito-fondo);
 color: var(--color-exito-texto);
}

.btn-opcion.incorrecta {
 border-color: var(--color-error);
 background: var(--color-error-fondo);
 color: var(--color-error-texto);
 animation: shake 0.4s ease;
}

/* Submit button for open/ordering questions */
.btn-enviar {
 display: inline-block;
 background: linear-gradient(135deg, var(--color-primario), var(--color-acento));
 color: #ffffff;
 font-size: var(--font-size-md);
 font-weight: bold;
 font-family: inherit;
 padding: 12px 28px;
 border: none;
 border-radius: var(--radio-full);
 cursor: pointer;
 transition: transform var(--transicion), box-shadow var(--transicion);
 box-shadow: 0 4px 12px rgba(232, 129, 42, 0.3);
 margin-top: 16px;
 min-height: 44px;
 min-width: 44px;
}

.btn-enviar:hover {
 transform: translateY(-2px);
 box-shadow: 0 6px 18px rgba(232, 129, 42, 0.4);
}

.btn-enviar:active {
 transform: translateY(0) scale(0.98);
}

.btn-enviar:disabled {
 opacity: 0.5;
 cursor: not-allowed;
 transform: none;
 box-shadow: none;
}

/* Next button in feedback */
.btn-siguiente {
 display: inline-block;
 background: linear-gradient(135deg, var(--color-secundario), #6b3a20);
 color: #ffffff;
 font-size: var(--font-size-md);
 font-weight: bold;
 font-family: inherit;
 padding: 12px 28px;
 border: none;
 border-radius: var(--radio-full);
 cursor: pointer;
 transition: transform var(--transicion), box-shadow var(--transicion);
 box-shadow: 0 4px 12px rgba(74, 44, 23, 0.3);
 margin-top: 16px;
 min-height: 44px;
 min-width: 44px;
}

.btn-siguiente:hover {
 transform: translateY(-2px);
 box-shadow: 0 6px 18px rgba(74, 44, 23, 0.4);
}

.btn-siguiente:active {
 transform: translateY(0) scale(0.98);
}

/* True/False buttons */
.btn-vf-verdadero,
.btn-vf-falso {
 display: inline-block;
 font-size: 1.1rem;
 font-weight: bold;
 font-family: inherit;
 padding: 16px 32px;
 border: 3px solid;
 border-radius: 16px;
 cursor: pointer;
 transition: transform var(--transicion), background var(--transicion), box-shadow var(--transicion);
 margin: 8px;
 min-width: 140px;
 min-height: 44px;
}

.btn-vf-verdadero {
 background: var(--color-exito-fondo);
 border-color: var(--color-exito);
 color: var(--color-exito-texto);
}

.btn-vf-verdadero:hover {
 background: var(--color-exito);
 color: #ffffff;
 transform: scale(1.05);
 box-shadow: 0 4px 12px rgba(39, 174, 96, 0.4);
}

.btn-vf-falso {
 background: var(--color-error-fondo);
 border-color: var(--color-error);
 color: var(--color-error-texto);
}

.btn-vf-falso:hover {
 background: var(--color-error);
 color: #ffffff;
 transform: scale(1.05);
 box-shadow: 0 4px 12px rgba(192, 57, 43, 0.4);
}

.btn-vf-verdadero:active,
.btn-vf-falso:active {
 transform: scale(0.97);
}

/* Options container for multiple choice */
.opciones-container {
 display: flex;
 flex-direction: column;
 gap: 8px;
 margin-top: 16px;
}
/* --- 10. Text Inputs --- */
input[type="text"],
textarea {
 width: 100%;
 font-size: var(--font-size-md);
 font-family: inherit;
 padding: 12px 16px;
 border: 2px solid var(--color-borde);
 border-radius: var(--radio-md);
 background: var(--color-crema);
 color: var(--color-texto);
 transition: border-color var(--transicion), box-shadow var(--transicion);
 line-height: 1.5;
 min-height: 44px;
}

input[type="text"]:focus,
textarea:focus {
 border-color: var(--color-primario);
 box-shadow: 0 0 0 3px rgba(232, 129, 42, 0.2);
 outline: none;
}

textarea {
 min-height: 100px;
 resize: vertical;
}

/* --- 11. Utility Classes --- */
.oculto {
 display: none !important;
}

/* Screen reader only - visually hidden but accessible */
.sr-only {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border-width: 0;
}

/* --- 12. Accessibility and Focus --- */
:focus-visible {
 outline: 3px solid var(--color-primario);
 outline-offset: 3px;
 border-radius: 4px;
}

:focus:not(:focus-visible) {
 outline: none;
}

/* Skip to content link */
.skip-link {
 position: absolute;
 top: -40px;
 left: 0;
 background: var(--color-primario);
 color: #ffffff;
 padding: 8px 16px;
 z-index: 100;
 border-radius: 0 0 var(--radio-sm) 0;
 transition: top var(--transicion);
}

.skip-link:focus {
 top: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
 *,
 *::before,
 *::after {
 animation-duration: 0.01ms !important;
 animation-iteration-count: 1 !important;
 transition-duration: 0.01ms !important;
 }
 .inicio-visual {
 animation: none;
 }
}

/* --- 13. Responsive (Mobile-First) --- */
@media (max-width: 500px) {
 body {
 padding: 12px;
 }

 .inicio-container {
 padding: 28px 18px;
 }

 .titulo-principal h1 {
 font-size: 1.4rem;
 }

 .inicio-visual {
 font-size: 2.8rem;
 }

 .instrucciones {
 font-size: 0.95rem;
 }

 .btn-principal {
 font-size: 1rem;
 padding: 12px 24px;
 width: 100%;
 }

 .btn-secundario {
 font-size: 0.9rem;
 padding: 10px 22px;
 width: 100%;
 }

 .nivel-header {
 padding: 12px 14px;
 gap: 10px;
 }

 .estrellas-counter {
 font-size: 1rem;
 }

 .nivel-info h2 {
 font-size: 1rem;
 }

 #pregunta-container,
 #libre-pregunta-container {
 padding: 20px 16px;
 min-height: 250px;
 }

 .pregunta-texto {
 font-size: 1.05rem;
 }

 .btn-opcion {
 padding: 12px 14px;
 font-size: 0.95rem;
 }

 .btn-vf-verdadero,
 .btn-vf-falso {
 padding: 14px 24px;
 font-size: 1rem;
 min-width: 120px;
 }

 .btn-enviar,
 .btn-siguiente {
 width: 100%;
 text-align: center;
 }
}

@media (max-width: 360px) {
 body {
 padding: 8px;
 }

 .inicio-container {
 padding: 20px 14px;
 border-radius: 16px;
 }

 .titulo-principal h1 {
 font-size: 1.2rem;
 }

 .inicio-visual {
 font-size: 2.2rem;
 margin: 14px 0;
 }

 .instrucciones {
 font-size: 0.9rem;
 }

 .btn-principal {
 font-size: 0.95rem;
 padding: 10px 20px;
 }

 .nivel-header {
 padding: 10px 12px;
 gap: 8px;
 border-radius: 14px;
 }

 #pregunta-container,
 #libre-pregunta-container {
 padding: 16px 12px;
 min-height: 220px;
 border-radius: 14px;
 }

 .pregunta-texto {
 font-size: 1rem;
 }

 .btn-opcion {
 padding: 10px 12px;
 font-size: 0.9rem;
 border-radius: 10px;
 }

 .btn-vf-verdadero,
 .btn-vf-falso {
 padding: 12px 18px;
 font-size: 0.9rem;
 min-width: 100px;
 margin: 4px;
 }

 .btn-enviar,
 .btn-siguiente {
 font-size: 0.9rem;
 padding: 10px 22px;
 }
}

/* --- 14. Adventure Map --- */
.mapa-titulo {
 text-align: center;
 font-size: var(--font-size-xl);
 color: var(--color-secundario);
 margin-bottom: 8px;
}

.mapa-subtitulo {
 text-align: center;
 color: var(--color-texto-claro);
 font-size: var(--font-size-sm);
 margin-bottom: 20px;
}

.mapa-niveles {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 12px;
 margin-bottom: 20px;
}

.mapa-nivel {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding: 16px 12px;
 border-radius: var(--radio-lg);
 border: 3px solid var(--color-borde);
 background: var(--color-tarjeta);
 cursor: pointer;
 transition: all var(--transicion);
 min-height: 90px;
 text-align: center;
}

.mapa-nivel:hover:not(:disabled) {
 transform: translateY(-3px);
 box-shadow: var(--sombra-hover);
}

.mapa-nivel__icono {
 font-size: 1.8rem;
 margin-bottom: 4px;
}

.mapa-nivel__numero {
 font-size: var(--font-size-sm);
 font-weight: bold;
 color: var(--color-texto-claro);
}

.mapa-nivel__nombre {
 font-size: 0.75rem;
 color: var(--color-texto-claro);
 margin-top: 2px;
}

/* Completed levels */
.mapa-nivel--completado {
 border-color: var(--color-dorado);
 background: linear-gradient(135deg, #fffdf5, #fef3cd);
}

.mapa-nivel--completado .mapa-nivel__nombre {
 color: var(--color-secundario);
 font-weight: bold;
}

/* Current level */
.mapa-nivel--actual {
 border-color: var(--color-primario);
 background: linear-gradient(135deg, #fff8f0, #fde8d0);
 animation: pulse 2s ease-in-out infinite;
}

.mapa-nivel--actual .mapa-nivel__nombre {
 color: var(--color-primario);
 font-weight: bold;
}

/* Blocked levels */
.mapa-nivel--bloqueado {
 border-color: #d5d5d5;
 background: #f0f0f0;
 cursor: not-allowed;
 opacity: 0.6;
}

.mapa-nivel--bloqueado .mapa-nivel__nombre {
 color: #999;
}

/* Unlock animation */
.desbloqueando {
 animation: starPop 1s ease !important;
}

/* Back button */
.mapa-btn-inicio {
 display: block;
 margin: 16px auto 0;
}
/* --- 15. Feedback Styles --- */
.feedback-card {
 background: var(--color-tarjeta);
 border-radius: var(--radio-lg);
 padding: 32px 24px;
 text-align: center;
 box-shadow: var(--sombra);
 border: 3px solid var(--color-borde);
}

.feedback-card--correcta {
 border-color: var(--color-exito);
 background: linear-gradient(135deg, #ffffff, var(--color-exito-fondo));
}

.feedback-card--incorrecta {
 border-color: var(--color-error);
 background: linear-gradient(135deg, #ffffff, var(--color-error-fondo));
}

.feedback-icon {
 font-size: 3.5rem;
 margin-bottom: 12px;
}

.feedback-titulo {
 font-size: var(--font-size-xl);
 margin-bottom: 12px;
}

.feedback-card--correcta .feedback-titulo {
 color: var(--color-exito-texto);
}

.feedback-card--incorrecta .feedback-titulo {
 color: var(--color-error-texto);
}

.feedback-respuesta {
 font-size: var(--font-size-md);
 color: var(--color-texto);
 font-weight: bold;
 margin-bottom: 12px;
 padding: 8px 12px;
 background: var(--color-crema);
 border-radius: var(--radio-sm);
}

.feedback-explicacion {
 font-size: var(--font-size-md);
 color: var(--color-texto-claro);
 line-height: 1.6;
 margin-bottom: 20px;
}

/* --- 16. Resumen Styles --- */
.resumen-container {
 background: var(--color-tarjeta);
 border-radius: var(--radio-lg);
 padding: 40px 24px;
 text-align: center;
 box-shadow: var(--sombra);
 border: 2px solid var(--color-borde);
}

.resumen-estrellas {
 font-size: 2rem;
 color: var(--color-acento);
 margin: 16px 0;
}

.resumen-estrellas-num {
 font-size: 2.5rem;
 font-weight: bold;
}

/* --- 17. V/F Container --- */
.vf-container {
 display: flex;
 justify-content: center;
 gap: 16px;
 flex-wrap: wrap;
 margin-top: 20px;
}

/* --- 18. Completar Container --- */
.completar-frase {
 font-size: var(--font-size-lg);
 line-height: 1.8;
 color: var(--color-texto);
 margin-bottom: 16px;
}

.completar-espacio {
 display: inline-block;
 border-bottom: 3px solid var(--color-primario);
 min-width: 120px;
 margin: 0 4px;
}

/* --- 19. Emparejar Container --- */
.emparejar-container {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 12px;
 margin-bottom: 16px;
}

.emparejar-columna {
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.emparejar-item {
 padding: 10px 14px;
 border: 2px solid var(--color-borde);
 border-radius: var(--radio-md);
 background: var(--color-crema);
 cursor: pointer;
 transition: all var(--transicion);
 font-size: var(--font-size-sm);
 min-height: 44px;
 display: flex;
 align-items: center;
}

.emparejar-item:hover {
 border-color: var(--color-primario);
 background: #fff8f0;
}

.emparejar-item.seleccionado {
 border-color: var(--color-primario);
 background: linear-gradient(135deg, #fff8f0, #fde8d0);
 font-weight: bold;
}

.emparejar-item.correcto {
 border-color: var(--color-exito);
 background: var(--color-exito-fondo);
}

.emparejar-item.incorrecto {
 border-color: var(--color-error);
 background: var(--color-error-fondo);
}

/* --- 20. Ordenar Container --- */
.ordenar-container {
 display: flex;
 flex-direction: column;
 gap: 8px;
 margin-bottom: 16px;
}

.ordenar-item {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 12px 14px;
 border: 2px solid var(--color-borde);
 border-radius: var(--radio-md);
 background: var(--color-crema);
 cursor: grab;
 transition: all var(--transicion);
 user-select: none;
 min-height: 44px;
}

.ordenar-item:active {
 cursor: grabbing;
 border-color: var(--color-primario);
 background: #fff8f0;
}

.ordenar-item .numero {
 background: var(--color-primario);
 color: white;
 width: 28px;
 height: 28px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: bold;
 font-size: 0.85rem;
 flex-shrink: 0;
}

.ordenar-item.selected {
 border-color: var(--color-primario);
 background: linear-gradient(135deg, #fff8f0, #fde8d0);
}

/* Estrella animation */
.estrella-animada {
 animation: starPop 0.6s ease;
}

/* --- Responsive Map --- */
@media (max-width: 500px) {
 .mapa-niveles {
 grid-template-columns: 1fr;
 gap: 10px;
 }

 .mapa-nivel {
 flex-direction: row;
 padding: 12px 16px;
 min-height: auto;
 gap: 10px;
 }

 .mapa-nivel__icono {
 font-size: 1.4rem;
 margin-bottom: 0;
 }

 .mapa-nivel__nombre {
 font-size: 0.85rem;
 margin-top: 0;
 }

 .feedback-card {
 padding: 24px 16px;
 }

 .feedback-icon {
 font-size: 2.5rem;
 }

 .vf-container {
 flex-direction: column;
 align-items: stretch;
 }

 .emparejar-container {
 grid-template-columns: 1fr;
 }
}