/* ================================== */
/* ====== ESTILOS RESPONSIVE====== */
/* ================================== */
@media (max-width: 900px) {

    /* =========================================================
       VARIABLES DE ALTURA
       ========================================================= */

    :root {
        --header-height: 90px;
        --nav-height: 48px;
        --mobile-header-height: 58px;
    }

    html, body {
        overflow-x: clip;
    }


    /* =========================================================
       HEADER FIJO
       ========================================================= */

    body > header {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: var(--mobile-header-height);
        box-sizing: border-box;

        padding: 1.5rem 1rem;

        z-index: 10;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    body > header p {
        display: none;

    }

    .zona-usuario {
    display: none;
    }

    .tarjeta-bienvenida {
        display:block;
        align-items: center;
        
    }

    .bienvenida-visual {
        margin-top: 5%;
    }


    /* =========================================================
       CONTENIDO PRINCIPAL
       El contenido comienza debajo del header + navegación
       ========================================================= */

    main {
        padding-top: 1rem;
    }
    


    /* =========================================================
       LAYOUTS GENERALES
       ========================================================= */

    .layout-general,
    .pregunta-biblica,
    .division-biblia,
    .reflexion-card {
        display: block;
        grid-template-columns: 1fr;
        gap: 2rem;
    }


    /* Imagen arriba / texto abajo */

    .pregunta-biblica.reverse .pregunta-texto,
    .pregunta-biblica .pregunta-texto {
        grid-row: 2;
    }

    .pregunta-biblica.reverse .pregunta-imagen,
    .pregunta-biblica .pregunta-imagen {
        grid-row: 1;
    }

    .columna-lateral {
        margin-top: 0;
    }


    /* =========================================================
       MENÚ SUPERIOR FIJO
       ========================================================= */

    .menu-superior {
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        height: var(--nav-height);
        min-height: var(--nav-height);
        background: var(--bg-dark);
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0 5%;
        z-index: 9999;
    }


    /* =========================================================
       TÍTULO DE SECCIÓN MÓVIL
       ========================================================= */

    .titulo-seccion-movil {
        display: block;
        max-width: 85%;
        color: var(--primary);
        font-size: 1.2rem;
        font-weight: 600;

        letter-spacing: 0.05em;
    }


    /* =========================================================
       BOTÓN HAMBURGUESA
       ========================================================= */

    #menu-hamburguesa {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 35px;
        height: 24px;
        padding: 0;
        background: transparent;
        border: none;
        cursor: pointer;
        position: absolute;
        top: 50%;
        right: 5%;
        transform: translateY(-50%);
        z-index: 10002;
    }


    #menu-hamburguesa .linea {
        position: absolute;

        left: 0;

        width: 100%;
        height: 3px;

        background-color: var(--text-light);

        border-radius: 3px;

        transition:
            transform 0.35s ease-in-out,
            opacity 0.25s ease-in-out;

        transform-origin: center;
    }


    /* Posición de las líneas */

    #menu-hamburguesa .linea:nth-child(1) {
        top: 0;
    }

    #menu-hamburguesa .linea:nth-child(2) {
        top: 10.5px;
    }

    #menu-hamburguesa .linea:nth-child(3) {
        top: 21px;
    }


    /* =========================================================
       HAMBURGUESA → X
       ========================================================= */

    #menu-hamburguesa.abierto {
        position: fixed;

        top: 25px;
        right: 25px;

        transform: none;
    }


    #menu-hamburguesa.abierto .linea:nth-child(1) {
        transform:
            translateY(10.5px)
            rotate(45deg);
    }


    #menu-hamburguesa.abierto .linea:nth-child(2) {
        opacity: 0;
        transform: translateX(20px);
    }


    #menu-hamburguesa.abierto .linea:nth-child(3) {
        transform:
            translateY(-10.5px)
            rotate(-45deg);
    }


    /* =========================================================
       MENÚ LATERAL PRINCIPAL
       ========================================================= */

    .titulo-menu {
    display: flex
    }

    #menu-enlaces {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        position: fixed;
        top: 0;
        right: 0;
        width: 280px;
        max-width: 82vw;
        height: 100vh;
        box-sizing: border-box;
        padding: 4rem 1.5rem 2rem;
        gap: 0.35rem;
        background:
            linear-gradient(
                145deg,
                rgba(106, 90, 205, 0.08),
                transparent 45%
            ),
            var(--bg-dark);
        border-left:
            1px solid
            rgba(255, 215, 0, 0.18);
        box-shadow:
            -12px 0 35px rgba(0, 0, 0, 0.45);
        z-index: 10001;
        transform: translateX(100%);
        transition:
            transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
    }


    #menu-enlaces.abierto {
        transform: translateX(0);
    }


    /* =========================================================
       ENLACES DEL MENÚ
       ========================================================= */

    #menu-enlaces > a {
        position: relative;

        display: flex;
        align-items: center;

        width: 100%;

        padding: 0.85rem 1rem;

        box-sizing: border-box;

        color: var(--muted);

        font-size: 1.05rem;
        font-weight: 500;

        text-decoration: none;

        border-radius: var(--radius);

        transition:
            color 0.25s ease,
            background 0.25s ease,
            padding-left 0.25s ease;
    }


    #menu-enlaces > a::before {
        content: "";

        position: absolute;

        left: 0;
        top: 50%;

        width: 3px;
        height: 0;

        transform: translateY(-50%);

        background: var(--primary);

        border-radius: 5px;

        transition: height 0.25s ease;
    }


    #menu-enlaces > a:hover {
        color: var(--text-light);

        background: var(--bg-secondary);

        padding-left: 1.3rem;
    }


    #menu-enlaces > a:hover::before {
        height: 60%;
    }


    /* =========================================================
       BUSCADOR
       ========================================================= */

    #menu-enlaces .buscador-global {
        order: -1; 
        margin-bottom: 1.5rem;
        margin-top: 0;
        background: rgba(0, 0, 0, 0.2);
    }


    #menu-enlaces .buscador-global input:focus {
        border-color: var(--primary);
    }



    /* =========================================================
       BOTÓN DE TEMA
       ========================================================= */

    #menu-enlaces .btn-tema {
        align-self: center; /* Lo centra horizontalmente */
        
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
        background: rgba(255, 215, 0, 0.05); /* Fondo sutil dorado */
        border: 1px solid rgba(255, 215, 0, 0.3);
        border-radius: 50%;
        cursor: pointer;
        transition: transform 0.25s ease, background 0.25s ease;
    }


    #menu-enlaces .btn-tema:hover {
        background: rgba(255, 215, 0, 0.15);
        transform: scale(1.05);
    }

    /* =========================================================
       SELECTOR Y MENÚS DESPLEGABLES
       ========================================================= */

    .selector-libro-container {
        position: static; 
    }

    #btn-selector-libro {
        display: none;
    }

    #btn-selector-nav {
        max-width: 40vw ; /* Ancho dinámico reservado solo para el libro */
        
        /* MAGIA: Anulamos flexbox aquí para que el texto se pueda cortar */
        display: inline-block ; 
        vertical-align: middle ;
        
        white-space: nowrap ;
        overflow: hidden ;
        text-overflow: ellipsis ; /* Añade los "..." al final */
    }

    /* Base de los cajones: En tablets nacen debajo del header y nav */
    .dropdown-libros-menu,
    .columna-contexto {
        display: none;
        position: fixed;
        top: calc(var(--header-height) + var(--nav-height));

        width: 70vw;
        max-height: 75vh;
        overflow-y: auto;
        
        background-color: var(--bg-dark);
        z-index: 9996;
        border-bottom: 3px solid var(--primary);
        box-shadow: 0 20px 40px rgba(0,0,0,0.8);
        box-sizing: border-box;
        margin: 0;
    }

    .selector-libro-container.activo .dropdown-libros-menu,
    .columna-contexto.activo {
        display: block;
        border-radius: 12px;
    }

    .testamento-seccion + .testamento-seccion {
        margin-top: 1.5rem;
    }

    .testamento-seccion h4 {
        margin: 0 0 0.75rem;
        padding-bottom: 0.45rem;
        color: var(--primary);
        font-size: 0.95rem;
        text-align: left;
        border-bottom: 1px solid rgba(255, 215, 0, 0.2);
    }

    /* --- GRILLA DE LIBROS (3 columnas) --- */
    .grid-libros-dropdown {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-bottom: 1.5rem;
    }

    .enlace-libro-drop {
        display: block;
        padding: 10px 4px;
        font-size: 0.85rem;
        background: var(--bg-secondary);
        border-radius: 6px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--muted);
        text-decoration: none;
    }

    .enlace-libro-drop.actual {
        background: var(--primary);
        color: var(--bg-dark);
        font-weight: bold;
    }

    /* =========================================================
       LAYOUT DE LECTURA
       ========================================================= */
    .vista-lectura-grid {
        display: block;
    }

    /* =========================================================
       PANEL DE CAPÍTULOS (5 columnas)
       ========================================================= */
    .panel-capitulos {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
        padding: 0;
    }

    .enlace-capitulo {
        display: flex;
        align-items: center;
        justify-content: center;
        
        /* MAGIA: Le quitamos el height fijo y obligamos a que sea un cuadrado 1:1 */
        height: auto;
        aspect-ratio: 1 / 1; 
        
        /* Ajustamos el padding para que no empuje el tamaño */
        padding: 0; 
        
        /* Achicamos un pelín la fuente para que el número no toque los bordes */
        font-size: 1rem; 
        
        border-radius: 8px;
        background-color: var(--bg-secondary);
        color: var(--text-light);
        text-decoration: none;
    }

    .enlace-capitulo.activo {
        background-color: var(--primary);
        color: var(--bg-dark);
        font-weight: bold;
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
    }

    .columna-contexto .panel-pegajoso {
        padding: 1rem;
        background-color: var(--bg-dark);
        border: 1px solid #333;
        border-radius: 12px;

    }

    .columna-contexto .panel-pegajoso h4 {
        display: block;
        text-align: center;
        color: var(--primary);
        margin-bottom: 15px;
        font-size: 1.2rem;
    }
   
    /* =========================================================
       TEXTO BÍBLICO
       ========================================================= */

    .texto-versiculo {
        font-size: 1.25rem;

        line-height: 1.7;
    }


    .numero-versiculo {
        font-size: 1rem;
    }


    /* =========================================================
       CAPÍTULO — FULL BLEED
       ========================================================= */

    .capitulo {
        width: 100%;

        position: relative;

        left: 50%;

        transform: translateX(-50%);

        border-radius: 0;

        border-left: none;
        border-right: none;
    }


    /* =========================================================
       TOOLTIPS Y MODALES (ESTILO APP NATIVA - BOTTOM SHEET)
       ========================================================= */
    
    .referencia-modal,
    .versiculo-tooltip {
        /* 1. Anulamos el centrado de escritorio */
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        
        /* 2. Hacemos que ocupe el 100% del ancho del celu */
        width: 100vw!important;
        max-width: 100vw ;
        max-height: 85vh; /* Un poco más alto para leer cómodo */
        
        /* 3. Diseño: Bordes redondos SOLO arriba y línea dorada */
        border-radius: 24px 24px 0 0; 
        border: none;
        border-top: 3px solid var(--primary) ;
        
        /* 4. Ajustamos el padding (más aire abajo para los gestos del celu) */
        padding: 1.5rem 1rem 2.5rem 1rem;
        box-sizing: border-box ;
    }


    /* El tooltip de versículos sí usa animación, así que lo hacemos subir desde abajo */
    .versiculo-tooltip,
    .referencia-modal {
        transform: translateY(100%) ; /* Comienza escondido abajo */
        transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .versiculo-tooltip.visible,
    .referencia-modal.visible {
        transform: translateY(0); /* Desliza hacia arriba al abrirse */
    }


    /* =========================================================
       TARJETA DE BIENVENIDA
       ========================================================= */

    .tarjeta-bienvenida {
        flex-direction: column-reverse;

        text-align: center;

        padding: 2rem 1.5rem;
    }


    .titulo-bienvenida {
        font-size: 2.2rem;
    }


    .bienvenida-acciones {
        justify-content: center;
    }


    .bienvenida-visual {
        flex: 0 0 auto;
        margin-bottom: 1rem;
    }

    .tarjeta-resultado.destacada {
        padding: 1.4rem;
        margin-bottom: 1.75rem;
    }

    .destacada-referencia a {
        font-size: 1.4rem;
    }

    .destacada-versiculo {
        font-size: 1.05rem;
        line-height: 1.65;
    }


    .separador-movil {
        display: flex;
    }
}



/* ============================================================
   MÓVILES PEQUEÑOS — HASTA 600PX
   ============================================================ */

@media (max-width: 600px) {


    /* =========================================================
       HEADER MÓVIL
       ========================================================= */

    body > header {
        position: relative;
        display: flex;

        align-items: center;
        justify-content: center;

        height: var(--mobile-header-height);

        padding: 0 1rem;

        box-sizing: border-box;

        background:
            linear-gradient(
                90deg,
                rgba(148, 230, 228, 0.3),
                rgba(230, 149, 151, 0.3)
            );

        box-shadow: var(--shadow);

        z-index: 10;
    }


    body > header h1 {
        margin: 0;

        font-size: 1.35rem;

        line-height: 1;

        color: var(--primary);

        letter-spacing: 0.05em;
    }


    body > header p,
    .zona-usuario {
        display: none;
    }


    /* =========================================================
       MENÚ SUPERIOR MÓVIL
       ========================================================= */

    .menu-superior {
        position: sticky;
        top: 0;
        height: var(--nav-height);
        min-height: var(--nav-height);
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0 1rem;
        box-sizing: border-box;
        border-bottom:
            1px solid
            var(--bg-secondary);

        z-index: 9999;
    }


    /* =========================================================
       CONTENIDO MÓVIL
       ========================================================= */

    main {
        padding-top: 1rem;
        padding-left: 5%;
        padding-right: 5%;
    }


    /* =========================================================
       HAMBURGUESA
       ========================================================= */

    #menu-hamburguesa {
        right: 1rem;
    }


    #menu-enlaces a {
        font-size: 1rem;
    }


    /* =========================================================
       TÍTULOS
       ========================================================= */

    .titulo-libro,
    .entrada-individual h2 {
        font-size: 2rem;
    }


    .cultura-biblica h3,
    .ultimas-entradas h3 {
        font-size: 1.6rem;
    }


    .pregunta-texto h4 {
        font-size: 1.3rem;
    }


    /* =========================================================
       BUSCADOR
       ========================================================= */

    .buscador-global input {
        width: 100%;
    }


    /* =========================================================
       CONTENEDORES DE LECTURA
       ========================================================= */

    .capitulo,
    .entrada-individual {
        padding: 1.5rem;
    }


    /* =========================================================
       LIBROS
       ========================================================= */

    .libro-card {
        padding: 1rem;
    }


    .categoria-libros a {
        padding: 0.6rem;
    }


    /* =========================================================
       TOOLTIP
       ========================================================= */

    .versiculo-tooltip {
        width: 95%;
        max-height: 80vh;
    }


    /* =========================================================
       PAGINACIÓN
       ========================================================= */

    .step-links {
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 15px;
        padding: 1rem;
        gap: 0.8rem;
    }


    .btn-pag,
    .current {
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
    }


    .paginacion-inferior {
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
    }


    .paginacion-superior {
        justify-content: center;
    }


    .btn-accion-secundario {
        padding: 0.55rem 0.9rem;
        font-size: 0.85rem;
        border-width: 1.5px;
        border-radius: 6px;
    }

    .btn-accion-secundario:hover {
        border-color: var(--secondary);
        color: var(--secondary);
        background-color: rgba(106, 90, 205, 0.1);
    }


    /* =========================================================
       TESTIMONIOS
       ========================================================= */

    .testimonio-container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }


    .bloque-relato {
        margin-bottom: 0;
        padding-bottom: 0;
        padding: 0;
    }


    .testimonio-cuerpo p {
        font-size: 1.15em;
    }


    .tarjeta-resultado.destacada {
        padding: 1.15rem;
        margin-bottom: 1.5rem;
        border-left-width: 3px;
        border-radius: 12px;
    }


    .destacada-encabezado {
        gap: 0.45rem;
        margin-bottom: 0.7rem;
    }


    .destacada-icono {
        width: 27px;
        height: 27px;
        font-size: 0.95rem;
    }


    .destacada-encabezado h3 {
        font-size: 0.75rem;
        letter-spacing: 0.06em;
    }


    .destacada-referencia {
        margin-bottom: 0.7rem;
    }


    .destacada-referencia a {
        display: block;
        font-size: 1.25rem;
        line-height: 1.35;
    }


    .destacada-versiculo {
        margin-bottom: 1rem;
        font-size: 1rem;
        line-height: 1.65;
    }


    .destacada-enlace {
        font-size: 0.9rem;
    }


    .destacada-flecha {
        font-size: 1.15rem;
    }


    .testimonio-cuerpo .imagen-central {
        margin: 1.8rem 0; /* Menos espacio vertical en celular y cero margen lateral */
    }

    .testimonio-cuerpo .imagen-central img {
        border-radius: 8px; /* Bordes un poco menos curvos para pantallas chicas */
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
    }

    .testimonio-cuerpo .imagen-central figcaption {
        font-size: 0.85rem;
        max-width: 95%; /* Le damos un poco más de ancho al texto en celular */
        margin-top: 1rem;
        padding-bottom: 0.5rem;
    }


    .donacion-container {
        margin: 1.5rem 0;
    }

    .btn-donar {
        width: min(100%, 260px);
        min-height: 46px;
        padding: 0.75rem 1.4rem;
        font-size: 0.9rem;
    }
}