/* =========================================
   APAPACHO - Hoja de estilos general
   ========================================= */

:root {
    --appa-morado: #772BFF;
    --appa-morado-oscuro: #160078;
    --appa-turquesa: #80F3F0;
    --appa-rosa-claro: #FFE3EF;
    --appa-rosa: #F042FF;
    --appa-amarillo: #FFD84D;
    --appa-navy: #010030;
}


/* --- Normalización global de imágenes --- */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* =========================================
   TIPOGRAFÍAS
   ========================================= */


@import url('https://fonts.googleapis.com/css2?family=Andika:ital,wght@0,400;0,700;1,400&display=swap');

.andika-regular-italic {
    font-family: 'Andika', sans-serif !important;
    font-style: italic !important;
}


.andika-regular {
  font-family: "Andika", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.andika-bold {
  font-family: "Andika", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.andika-regular-italic {
    font-family: "Andika", sans-serif !important;
    font-weight: 400 !important;
    font-style: italic !important;
}

.andika-bold-italic {
  font-family: "Andika", sans-serif;
  font-weight: 700;
  font-style: italic;
}


.amaranth-regular {
  font-family: "Amaranth", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.amaranth-bold {
  font-family: "Amaranth", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.amaranth-regular-italic {
  font-family: "Amaranth", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.amaranth-bold-italic {
  font-family: "Amaranth", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.geologica-titulo-principal {
  font-family: "Geologica", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "CRSV" 0,
    "SHRP" 0;
}

.kumbh-sans-texto-kumbh {
  font-family: "Kumbh Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "YOPQ" 300;
}


/* =========================================
   NAVBAR
   ========================================= */
.navbar-appa {
    background-color: var(--appa-navy);
}

.logo-navbar {
    max-height: 60px;
    width: auto;
}

.icon-navbar {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.avatar-navbar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--appa-rosa-claro);
    color: var(--appa-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.avatar-navbar:hover {
    opacity: 0.85;
    color: var(--appa-navy);
}

.btn-navbar-appa {
    border: 2px solid white;
    color: white;
    background: transparent;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 6.4px 19.2px;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.btn-navbar-appa:hover {
    background-color: white;
    color: var(--appa-navy);
}
.btn-navbar-appa-salir {
    background-color: var(--appa-rosa-claro);
    border-color: var(--appa-rosa-claro);
    color: var(--appa-navy);
}
.btn-navbar-appa-salir:hover {
    background-color: white;
    border-color: white;
    color: var(--appa-navy);
}


.navbar-appa .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.6);
}

/* =========================================
   DISEÑO PANTALLA DE LOGIN
   ========================================= */
.login-body-nuevo {
    background: radial-gradient(circle at center, #1a1763 0%, #06042b 80%, #010014 100%);
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Amaranth', sans-serif;
}


/*
.tagline-login{
    font-family: "Andika", sans-serif !important;
    font-weight: 400 !important;
    font-style: italic !important;
    font-size: 1.50rem;
    color: #FFD84D;
    margin-top: 0px;
    padding: 0px 0px 0px 0px;
}
*/
.pagina-404 {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0d0620; /* Color de fondo general de la página */
    padding: 20px;
}

.error-container {
    position: relative;
    max-width: 950px;
    width: 100%;
    min-height: 520px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    padding: 40px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    
    
    background-image: url('/uploads/404.gif');
    background-size: cover;      
    background-position: center; 
    background-repeat: no-repeat;
}


.error-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}


.error-container > * {
    position: relative;
    z-index: 2;
    color: #fff;
}

/* =========================================
   POSICIONAMIENTO DE PERSONAJES
   ========================================= */

.personaje-login {
    position: absolute;
    pointer-events: none;
    z-index: 2;
    object-fit: contain;
}

.personaje-morado-top {
    top: 0;
    right: 11s0px;
    width: 100vw;
    max-width: 80%;
}

.personaje-rosa-bottom {
    bottom: 0;
    left:120px;
    width: 100vw;
    max-width: 80%;
    transform: scaleX(-1);
}

/* Contenido central del login */
.contenido-login-nuevo {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 520px;
    padding: 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom:100px;
}


.logo-container-login {
    margin-bottom: 16px;
    width: 500px;
    display: flex;
    justify-content: center;
}

.img-logo-login {
    max-width: 100%; 
    width: 500px;      
    height: auto;
    display: block;
    margin: 0 auto;
}

.form-login-nuevo {
    width: 100%;
    max-width: 400px; 
    margin: 0 auto;
}

.form-login-nuevo .mb-3 {
    margin-bottom: 13.6px !important;
}

.form-login-nuevo .form-control {
    background-color: white;
    border: none;
    border-radius: 30px;
    padding: 8px 14.4px;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    text-align: center;
}


.form-login-nuevo.form-login-ancho {
    max-width: 500px;
}


.enlaces-login-nuevo.enlaces-login-centrado {
    justify-content: center;
    gap: 15px;
}


.form-login-nuevo .input-group {
    margin-bottom: 20px;
}

.form-login-nuevo .input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.form-login-nuevo .input-group .btn {
    background-color: white;
    border: none;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    color: #888;
    padding: 0 14.4px;
}

.form-login-nuevo .form-control::placeholder {
    color: #888;
}


.btn-entrar-nuevo {
    display: block;
    border: 2px solid white;
    color: white;
    background: transparent;
    border-radius: 15px;
    font-weight: 600;
    padding: 6.4px 24px;
    font-size: 0.8rem;
    margin: 12.8px auto 8px auto;
    width: 200px;
    transition: all 0.2s ease;
    font-family: "Amaranth", sans-serif;
}

.btn-entrar-nuevo:hover {
    background-color: white;
    color: var(--appa-navy, #010030);
}

.enlaces-login-nuevo {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 15px;
}

/* Enlaces inferiores más pequeños */
.enlaces-login-nuevo a {
    color: #80F3F0;
    font-size: 1rem;
    text-decoration: none;
}

.enlaces-login-nuevo a:hover {
    text-decoration: underline;
}


/* =========================================
   DISEÑO RESPONSIVO Y FLUIDO PARA MÓVILES
   ========================================= */

@media (max-width: 768px) {
    html, body {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        background-color: #06042b !important;
    }

    .login-body-nuevo {
        position: relative !important;
        width: 100% !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        overflow-x: hidden !important;
    }

    /* Ocultar elementos exclusivos de PC */
    .login-body-nuevo > img.d-none.d-md-block {
        display: none !important;
    }

    /* Personaje superior móvil (Morado) más arriba */
    .login-body-nuevo > img.personaje-movil-morado-top {
        position: absolute !important;
        top: -15px !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: 48vh !important;
        object-fit: cover !important;
        object-position: top center !important;
        z-index: 2 !important;
    }

    /* Contenedor central (Formulario y Logo) más arriba para encajar con la mano */
    .contenido-login-nuevo {
        position: relative !important;
        z-index: 10 !important;
        width: 100% !important;
        max-width: 280px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-top: 10px !important;
        padding: 10px 0 !important;
    }

    /* Personaje inferior móvil (Rosa) - Anclado estrictamente abajo */
    .login-body-nuevo > img.personaje-movil-rosa-bottom {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: 42vh !important;
        object-fit: cover !important;
        object-position: bottom center !important;
        z-index: 2 !important;
    }

    /* Elementos internos del formulario móvil */
    .logo-container-login {
        width: 100% !important;
        max-width: 270px !important;
        margin-bottom: 5px !important;
    }

    .img-logo-login {
        width: 100% !important;
		margin-bottom:50px;
    }

    .form-login-nuevo {
        width: 100% !important;
        max-width: 230px !important;
    }

    /* Más padding / espacio entre el email y la contraseña */
    .form-login-nuevo .mb-3:nth-child(1) {
        margin-bottom: 10px !important;
    }

    .form-login-nuevo .mb-3 {
        margin-bottom: 20px !important;
    }

    .form-login-nuevo .form-control {
        border-radius: 20px !important;
        padding: 4px 10px !important;
        font-size: 0.65rem !important;
    }

    /* Ajuste para que el input de contraseña y el botón del ojito no se corten */
    .form-login-nuevo .input-group {
        width: 100% !important;
        flex-wrap: nowrap !important;
        margin-bottom: 8px !important;
    }

    .form-login-nuevo .input-group .form-control {
        border-top-left-radius: 20px !important;
        border-bottom-left-radius: 20px !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        width: auto !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .form-login-nuevo .input-group .btn {
        border-top-right-radius: 20px !important;
        border-bottom-right-radius: 20px !important;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        padding: 0 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        background-color: white !important;
        border: none !important;
        color: #888 !important;
    }

    .btn-entrar-nuevo {
        width: 100px !important;
        border-radius: 3px !important;
        padding: 3px 6px !important;
        font-size: 0.6rem !important;
        margin: 8px auto !important;
        font-family: "Amaranth", sans-serif;
    }

  .enlaces-login-nuevo {
	    margin: 10px 0px 0px 10px !important;
        width: 100% !important;
        padding: 0px 4px 0px 40px !important;
        display: flex !important;
        justify-content: center !important;
        gap: 20px !important;
    }

    .enlaces-login-nuevo a {
        font-size: 0.7rem !important;
        white-space: nowrap !important;
		padding: 0px 0px 0px 0px !important;
    }
	
    .texto-contrasena{
		 font-size: 0.7rem !important;
	}
	
	.logo-mobile-registro{
		margin:10px 0px 26px 0px;
	}
}
/* =========================================
   PANTALLA PRINCIPAL (index.php)
   ========================================= */

.hero-monito {
    background: linear-gradient(180deg,
        var(--appa-morado) 0%,
        var(--appa-morado) 72%,
        var(--appa-rosa-claro) 100%) !important;
    min-height: 440px;
    position: relative;
    overflow: visible;
    padding: 0px 32px;
}

.hero-monito::before {
    content: '';
    position: absolute;
    width: 480px;
    height: 480px;
    max-width: 90%;
    background: radial-gradient(circle, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    z-index: 0;
    top: 60%;
}

.hero-monito img {
    position: absolute;
    bottom: -28px; 
    left: 50%;
    transform: translateX(-50%);
    max-height: clamp(260px, 55vh, 520px);
    width: auto;
    object-fit: contain;
    margin-top: 200px;
    z-index: 2;
}

.titulo-form {
    font-size: 1.5rem;
    font-family: "Geologica", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    margin:0px;
}

.bajada-form{ 
    font-size: 1.06rem;
    font-family: "Geologica", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: italic;
    margin:0px 0px 20px 0px;
}

@media (max-width: 767px) {
    .hero-monito {
        min-height: 320px;
        overflow: hidden; 
        background: linear-gradient(180deg,
            var(--appa-morado) 0%,
            var(--appa-morado) 42%,
            var(--appa-rosa-claro) 68%,
            var(--appa-rosa-claro) 100%) !important;
    }

    .hero-monito::before {
        width: 260px;
        height: 260px;
        top: 40%;
    }

    .hero-monito img {
        max-height: clamp(200px, 38vh, 260px);
        bottom: 12px;
        margin-top: 0;
    }

    .hero-formulario {
        padding: 28px 20px;
    }

    /* que "Dónde ocurrió" e "Involucrados" no queden tan apretados */
    .hero-formulario .row > [class*="col-6"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* navbar en móvil: logo centrado arriba y botones más chicos debajo */
    .navbar-appa .container-fluid {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        row-gap: 9.6px;
    }

    /* cuando hay 4 botones (Admin + Mi Panel + Mis registros + Cerrar sesión)
       no entran en una sola fila y se salían de la pantalla */
    .navbar-appa .container-fluid > div.d-flex {
        flex-wrap: wrap;
        justify-content: center;
    }

    .navbar-appa {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .navbar-appa .logo-navbar {
        max-height: 58px;
    }

    .navbar-appa .btn-navbar-appa {
        font-size: 0.7rem;
        padding: 4.8px 12.8px;
    }

    /* Panel de administración: el navbar oscuro tampoco colapsa en móvil */
    .navbar.bg-dark .container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        row-gap: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .navbar.bg-dark .container > div {
        flex-wrap: wrap;
        justify-content: center;
        display: flex;
        gap: 8px;
    }

    .navbar.bg-dark .logo-navbar {
        max-height: 46px;
    }

    .navbar.bg-dark .btn {
        font-size: 12px;
    }

    /* Encabezado del dashboard: título + botones de acción en columna */
    .font-alexandria {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px;
    }

    .font-alexandria > div {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .font-alexandria .btn {
        flex: 1 1 auto;
    }
	
     .seccion-biblioteca p {
        font-size: 1.05rem !important;
		width:350px;
		max-width:100%;
		align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
	}
    
}

@media (max-width: 480px) {
    .hero-monito {
        min-height: 260px;
        background: linear-gradient(180deg,
            var(--appa-morado) 0%,
            var(--appa-morado) 35%,
            var(--appa-rosa-claro) 60%,
            var(--appa-rosa-claro) 100%) !important;
    }

    .hero-monito::before {
        width: 190px;
        height: 190px;
        top: 35%;
    }

    .hero-monito img {
        max-height: 205px;
        bottom: 10px;
        margin-top: 0;
    }

    .seccion-biblioteca h1 {
        font-size: 2.1rem;
    }
	
	 .seccion-biblioteca p {
        font-size: 1rem;
    }
}

/* Rebote muy sutil para los personajes de emociones (no aplica al de calma) */
@keyframes rebote-sutil-kf {
    0%   { transform: translateX(-50%) translateY(0); }
    30%  { transform: translateX(-50%) translateY(-10px); }
    55%  { transform: translateX(-50%) translateY(0); }
    75%  { transform: translateX(-50%) translateY(-4px); }
    100% { transform: translateX(-50%) translateY(0); }
}

.rebote-sutil {
    animation: rebote-sutil-kf 0.6s ease-out;
}
.hero-formulario {
    background-color: var(--appa-turquesa) !important;
    padding: 40px;
}

.btn-appa-enviar {
    background-color: var(--appa-navy) !important;
    color: white;
    border-radius: 4px;
    font-weight: 700;
    padding: 8px 24px;
}

.hero-formulario .form-select {
    border-radius: 4px;
    border: none;
    padding: 8px 14.4px;
}
.hero-formulario .form-select:focus {
    box-shadow: 0 0 0 3.2px rgba(1, 0, 48, 0.15);
}

/* =========================================
   PERSONAJE: contenedor
   ========================================= */
.monito-img-container {
    cursor: pointer;
    position: relative;
}


/* =========================================
   SECCION NUMEROS DE AYUDA
   ========================================= */
.seccion-ayuda {
    background-color: var(--appa-rosa-claro) !important;
    color: var(--appa-navy) !important;
    padding: 48px 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 2.8rem;
}

.bajada {
    font-family: "Andika", sans-serif !important;
    font-weight: 400 !important;
    font-size: 1rem;
    padding: 10px 0px 0px 20px;
}

.apoyo{
    font-family: "Amaranth", sans-serif;
    font-weight: 400;
    font-style: normal, italic;
    font-size: 1.3rem;
    padding: 10px 0px 0px 20px;
}

.titulo{
    font-family: "Kumbh Sans", sans-serif;
    font-size:3.2rem;
    font-weight: 900;
    font-style: black;
    font-variation-settings:
    "YOPQ" 300;
}

.lugar{
   font-family: "Amaranth", sans-serif;
   font-weight: 700;
   font-style: italic;
   font-size:1.3rem;
}


.numero-ayuda {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 2.8rem;
    color:var(--appa-navy);
}

@media (max-width: 767px) {
    .numero-ayuda {
        font-size: 1.5rem;
    }
	
	.bajada{
		width: 300px;
		font-size: 1.2rem;
        align-items: center;
        justify-content: center;
        text-align: center;
	}
}

@media (max-width: 480px) {
    .numero-ayuda {
        font-size: 2rem;
    }
}

/* =========================================
   SECCION BIBLIOTECA VIRTUAL
   ========================================= */
.seccion-biblioteca {
    background: linear-gradient(180deg,
        var(--appa-morado) 0%,
        var(--appa-morado) 50%,
        var(--appa-rosa-claro) 100%) !important;
    font-style: white;
    padding: 10px 0 56px 0 !important;
    min-height: 400px;
}

.titulo-biblio{
    font-size: 2.8rem;
    color: rgba(255, 255, 255, 0.85);
    font-family: "Kumbh Sans", sans-serif;
    font-weight: 900;
    margin-top:54px !important;

}

.mente{
    font-family: "Kumbh Sans", sans-serif;
    font-weight:700;
    font-style: italic;
    color:#FFD84D;
    margin:0px;
    padding:0px;
}



.categoria-label{
    font-size: 1rem;
    letter-spacing: -0.3px;
    font-family: "Geologica", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
  
}


.seccion-biblioteca p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.3rem;
    font-family: "Andika", sans-serif !important;
    font-weight: 400 !important;
    margin-top: -10px !important;
    padding: 0px 0px 0px 0px !important;
}

.categoria-icono {
    width: 95px;
    height: 95px;
    background-color: var(--appa-amarillo);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    font-style: rgba(255, 255, 255, 0.85);
    margin: 0 auto 16px auto;
    transition: transform 0.2s ease-in-out;
}

/* Efecto opcional al pasar el mouse por encima de la tarjeta para que cobre vida */
.categoria-item:hover .categoria-icono {
    transform: translateY(-5px);
}


.categoria-item:nth-child(1) .categoria-icono { border-radius: 40px 40px 10px 10px; }
.categoria-item:nth-child(2) .categoria-icono { border-radius: 50px 10px 40px 10px; }
.categoria-item:nth-child(3) .categoria-icono { border-radius: 10px 50px 10px 40px; }
.categoria-item:nth-child(4) .categoria-icono { border-radius: 50px 50px 10px 10px; }


.categoria-label {
    color: var(--appa-navy);
}

.categoria-icono img {
    max-width: 48px;
    max-height: 48px;
    object-fit: contain;
    display: block;
}

/* Imagen cuadrada de las cards de la biblioteca: se ve completa, sin recortar */
.card-img-cuadrada {
    aspect-ratio: 1 / 1;
    width: 100%;
    object-fit: contain;
    background-color: #f4f4f4;
    padding: 8px;
}

/* Paginación de la biblioteca */
.pagination .page-link {
    color: var(--appa-morado);
    border-color: #ddd;
}

.pagination .page-item.active .page-link {
    background-color: var(--appa-morado);
    border-color: var(--appa-morado);
    color:#f4f4f4;
}

.pagination .page-link:hover {
    color: white;
    background-color: var(--appa-morado);
}

/* =========================================
   BOTONES DE EMOCIONES EN FORMULARIO
   ========================================= */
.emocion-opcion {
    border: none;
    background: transparent;
    opacity: 0.55;
    color: #55666B;
    transition: all 0.2s ease;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.emocion-opcion.seleccionada {
    opacity: 1;
    color: var(--appa-navy);
    transform: scale(1.15);
}

.emocion-opcion img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* =========================================
   FOOTER Y MODAL
   ========================================= */
.footer-appa {
    background-color: var(--appa-navy);
    color: white;
    padding: 32px 0;
}

.logo-footer {
    max-height: 65px;
    width: auto;
    margin: 0 auto;
    padding:0px;
}

.link-portafolio{
    color:#F042FF;
    text-decoration: none;
    font-size:0.9rem;
}


.boton-insta{
    padding:5px;
}

.monito-img-container img {
    transition: none;
    transform-origin: bottom center;
}

/* =========================================
   SECCIÓN TALLERES - ÁREA PÚBLICA (PRÓXIMAMENTE)
   ========================================= */

.talleres-hero {
    min-height: 100vh;
    background: radial-gradient(circle at center, #1a1763 0%, #06042b 80%, #010014 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Amaranth', sans-serif;
}

.talleres-nav {
    position: relative;
    z-index: 5;
    padding: 20px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.talleres-contenido {
    position: relative;
    z-index: 5;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
}

.talleres-badge {
    display: inline-block;
    background-color: var(--appa-amarillo);
    color: var(--appa-navy);
    font-family: "Kumbh Sans", sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 8px 20px;
    border-radius: 30px;
    margin-bottom: 24px;
}

.talleres-titulo {
    font-family: "Kumbh Sans", sans-serif;
    font-weight: 900;
    color: white;
    font-size: 3.2rem;
    max-width: 780px;
    line-height: 1.15;
    margin-bottom: 16px;
}

.talleres-titulo .resaltado {
    color: var(--appa-turquesa);
    font-style: italic;
}

.talleres-subtitulo {
    font-family: "Andika", sans-serif;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.15rem;
    max-width: 560px;
    margin-bottom: 36px;
}

.talleres-acciones {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-talleres-primario {
    background-color: var(--appa-turquesa);
    color: var(--appa-navy);
    border: 2px solid var(--appa-turquesa);
    border-radius: 30px;
    font-family: "Amaranth", sans-serif;
    font-weight: 700;
    padding: 12px 32px;
    text-decoration: none;
    transition: all 0.2s ease;
}
.btn-talleres-primario:hover {
    background-color: transparent;
    color: var(--appa-turquesa);
}

.btn-talleres-secundario {
    background: transparent;
    color: white;
    border: 2px solid white;
    border-radius: 30px;
    font-family: "Amaranth", sans-serif;
    font-weight: 700;
    padding: 12px 32px;
    text-decoration: none;
    transition: all 0.2s ease;
}
.btn-talleres-secundario:hover {
    background-color: white;
    color: var(--appa-navy);
}

/* Burbujas flotantes decorativas */
.burbuja {
    position: absolute;
    border-radius: 50%;
    opacity: 0.5;
    z-index: 1;
    pointer-events: none;
    animation: flotar-burbuja 7s ease-in-out infinite;
}

@keyframes flotar-burbuja {
    0%   { transform: translateY(0) translateX(0); }
    50%  { transform: translateY(-28px) translateX(10px); }
    100% { transform: translateY(0) translateX(0); }
}

.burbuja-1 { width: 90px;  height: 90px;  background-color: var(--appa-morado);    top: 12%; left: 8%;   animation-duration: 8s; }
.burbuja-2 { width: 50px;  height: 50px;  background-color: var(--appa-turquesa);  top: 22%; right: 12%;  animation-duration: 6s;  animation-delay: 0.5s; }
.burbuja-3 { width: 130px; height: 130px; background-color: var(--appa-rosa);      top: 60%; left: 5%;   animation-duration: 9s;  animation-delay: 1s;   opacity: 0.32; }
.burbuja-4 { width: 70px;  height: 70px;  background-color: var(--appa-amarillo);  bottom: 15%; right: 10%; animation-duration: 7s; animation-delay: 0.3s; }
.burbuja-5 { width: 45px;  height: 45px;  background-color: var(--appa-rosa-claro); top: 40%; left: 45%;  animation-duration: 5.5s; animation-delay: 0.8s; }
.burbuja-6 { width: 100px; height: 100px; background-color: var(--appa-turquesa);  bottom: 8%; left: 20%; animation-duration: 10s; animation-delay: 1.4s; opacity: 0.28; }
.burbuja-7 { width: 60px;  height: 60px;  background-color: var(--appa-morado);    top: 75%; right: 25%;  animation-duration: 6.5s; animation-delay: 0.2s; }

@media (max-width: 767px) {
    .talleres-titulo { font-size: 2.1rem; }
    .talleres-subtitulo { font-size: 1rem; }
    .burbuja { transform: scale(0.7); }
    .talleres-nav { justify-content: center; text-align: center; }
}

/* =====================================================================
   AJUSTES DE COHERENCIA (antes en consistencia.css)
   ===================================================================== */
.btn-navbar-appa.activo { background: rgba(255, 255, 255, .22); }

.btn-appa { background: var(--appa-morado); border: 1px solid var(--appa-morado); color: #fff; border-radius: 50px; }
.btn-appa:hover { background: var(--appa-morado-oscuro); border-color: var(--appa-morado-oscuro); color: #fff; }
.btn-outline-appa { background: transparent; border: 1px solid var(--appa-morado); color: var(--appa-morado); border-radius: 50px; }
.btn-outline-appa:hover, .btn-outline-appa.activo { background: var(--appa-morado); color: #fff; }

.pagination .page-link { color: var(--appa-morado); }
.pagination .page-item.active .page-link { background: var(--appa-morado); border-color: var(--appa-morado); color: #fff; }

.badge-categoria { background: var(--appa-morado-oscuro); color: #fff; font-weight: 500; }
.badge-animo { background: var(--appa-rosa-claro); color: var(--appa-morado-oscuro); font-weight: 600; }
.thead-appa th { background: var(--appa-morado-oscuro) !important; color: #fff !important; border: 0; }

.sello-ejemplo { display: inline-block; background: var(--appa-rosa-claro); color: var(--appa-morado-oscuro); font-size: .75rem; font-weight: 700; letter-spacing: .5px; padding: 3px 12px; border-radius: 50px; }
.barra-appa { background-color: var(--appa-morado); }
.barra-animo { background-color: var(--appa-turquesa); color: var(--appa-navy); }

.talleres-hero { transition: opacity .35s ease; }
.talleres-hero.salida-pagina { opacity: 0; }

/* ---------- Carrusel de naipes giratorios (home) ---------- */
.onboarding-home { max-width: 420px; margin: 0 auto; position: relative; z-index: 5; }
.onboarding-home .carousel-item { padding: 8px 0 52px; text-align: center; }
.onboarding-home .carousel-indicators { margin-bottom: 14px; }
.onboarding-home .carousel-control-prev, .onboarding-home .carousel-control-next { width: 12%; opacity: .8; }

.naipe-contenedor { perspective: 1200px; width: min(280px, 68vw); aspect-ratio: 400 / 520; margin: 0 auto 18px; cursor: pointer; outline-offset: 6px; }
.naipe { position: relative; width: 100%; height: 100%; transition: transform .8s cubic-bezier(.4, .2, .2, 1); transform-style: preserve-3d; }
.naipe-contenedor.volteado .naipe { transform: rotateY(180deg); }
@media (hover: hover) { .naipe-contenedor:hover .naipe { transform: rotateY(180deg); } }

.naipe-cara { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 20px; overflow: hidden; box-shadow: 0 15px 35px rgba(0, 0, 0, .35); }
.naipe-cara img { width: 100%; height: 100%; object-fit: contain; display: block; }
.naipe-reverso { transform: rotateY(180deg); }

.naipe-respaldo { display: flex; align-items: center; justify-content: center; padding: 24px; background: linear-gradient(160deg, var(--appa-morado), var(--appa-morado-oscuro)); color: #fff; }
.naipe-respaldo i { font-size: 5rem; color: var(--appa-turquesa); }
.naipe-respaldo span { font-size: 1.05rem; line-height: 1.4; }
.naipe-reverso.naipe-respaldo { background: linear-gradient(160deg, var(--appa-rosa), var(--appa-morado)); }

.naipe-titulo { font-size: 1.35rem; font-weight: 700; color: #fff; margin: 0 0 6px; }
.naipe-texto { color: rgba(255, 255, 255, .88); margin: 0 auto; max-width: 340px; }

/* ---------- Pop-up de bienvenida (tras iniciar sesión) ---------- */
.bienvenida .modal-content { background: #fff; color: var(--appa-navy); border: 0; border-radius: 28px; overflow: hidden; box-shadow: 0 25px 60px rgba(22, 0, 120, .45); }
.bienvenida.modal.fade .modal-dialog { transform: translateY(30px) scale(.94); transition: transform .45s cubic-bezier(.2, .9, .3, 1.2), opacity .3s; }
.bienvenida.modal.show .modal-dialog { transform: none; }
.bienvenida-cabecera { position: relative; height: 170px; background: linear-gradient(135deg, var(--appa-morado) 0%, var(--appa-rosa) 100%); overflow: hidden; }
.bienvenida-cabecera .burbuja-b { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .22); animation: flotar-b 6s ease-in-out infinite; }
.bienvenida-cabecera .b1 { width: 90px; height: 90px; left: -20px; top: -25px; }
.bienvenida-cabecera .b2 { width: 50px; height: 50px; right: 40px; top: 20px; animation-delay: -2s; }
.bienvenida-cabecera .b3 { width: 28px; height: 28px; left: 60px; bottom: 30px; animation-delay: -4s; }
.bienvenida-personaje { position: absolute; left: 50%; bottom: -18px; height: 160px; transform: translateX(-50%); animation: saludo-b 2.4s ease-in-out infinite; transform-origin: bottom center; }
.bienvenida .btn-close { position: absolute; top: 14px; right: 14px; z-index: 5; background-color: rgba(255, 255, 255, .85); border-radius: 50%; padding: 8px; opacity: 1; }
.bienvenida-cuerpo { padding: 26px 30px 8px; text-align: center; }
.bienvenida-saludo { font-family: 'Baloo 2', 'Montserrat', sans-serif; font-weight: 800; font-size: 1.9rem; line-height: 1.1; color: var(--appa-morado-oscuro); margin: 0 0 4px; }
.bienvenida-sub { color: #6b6b85; font-size: .95rem; margin: 0 0 18px; }
.bienvenida-frase { position: relative; background: var(--appa-rosa-claro); border-radius: 18px; padding: 22px 22px 18px; margin: 0; font-size: 1.15rem; font-weight: 600; line-height: 1.45; color: var(--appa-morado-oscuro); }
.bienvenida-frase::before { content: '\201C'; position: absolute; top: -6px; left: 14px; font-size: 3.6rem; line-height: 1; color: var(--appa-rosa); font-family: Georgia, serif; }
.bienvenida-pie { padding: 18px 30px 28px; text-align: center; }
.bienvenida-pie .btn-appa { padding: 10px 34px; font-weight: 700; font-size: 1rem; }
@keyframes flotar-b { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes saludo-b { 0%, 100% { transform: translateX(-50%) rotate(-3deg); } 50% { transform: translateX(-50%) rotate(3deg) translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .bienvenida-personaje, .bienvenida-cabecera .burbuja-b { animation: none; } }

/* ---------- Página 404 (sin cabecera ni footer) ---------- */
.pagina-404 { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px 20px; background: radial-gradient(circle at center, #1a1763 0%, #06042b 80%, #010014 100%); color: #fff; }
.pagina-404 .gif-404 { width: min(340px, 78vw); height: auto; border-radius: 28px; box-shadow: 0 20px 50px rgba(0, 0, 0, .45); margin-bottom: 22px; }
.pagina-404 .codigo { font-family: 'Baloo 2', 'Montserrat', sans-serif; font-size: 4.2rem; font-weight: 800; line-height: 1; margin: 0; color: var(--appa-turquesa); }
.pagina-404 h1 { font-size: 1.6rem; font-weight: 700; margin: 6px 0 10px; }
.pagina-404 p { max-width: 440px; opacity: .88; margin-bottom: 26px; }
.pagina-404 .btn-volver { background: var(--appa-turquesa); color: var(--appa-navy); font-weight: 700; border-radius: 50px; padding: 12px 36px; border: 0; text-decoration: none; display: inline-block; transition: transform .2s; }
.pagina-404 .btn-volver:hover { transform: translateY(-2px); color: var(--appa-navy); }