/* =========================================================
   SELAH — TEMPORADAS.CSS
   Sistema visual de temporadas

   TEMPORADA ACTUAL:
   NORMAL

   Principio:
   La decoración acompaña la página sin competir
   con el contenido principal.
   ========================================================= */


/* =========================================================
   TEMPORADA NORMAL
   ========================================================= */

body.tema-normal {

    /*
       IMPORTANTE:

       Cada SVG tiene un lienzo vertical transparente
       mucho más grande que el dibujo visible.

       Resultado:
       - los dibujos NO se estiran;
       - conservan su tamaño;
       - se repiten verticalmente;
       - existe mucho espacio entre ellos;
       - continúan apareciendo en páginas muy largas.
    */

    background-image:


        /* =================================================
           1. BIBLIA ABIERTA — LADO IZQUIERDO

           Lienzo:
           190px × 2300px

           La Biblia solamente ocupa una pequeña zona
           dentro del lienzo.
           ================================================= */

        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='2300' viewBox='0 0 190 2300'%3E%3Cg transform='translate(15 90)' fill='none' stroke='%23343b48' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='.065'%3E%3Cpath d='M80 98c-14-11-33-14-56-11V30c22-3 41 1 56 12z'/%3E%3Cpath d='M80 98c14-11 33-14 56-11V30c-22-3-41 1-56 12z'/%3E%3Cpath d='M80 42v56'/%3E%3Cpath d='M35 45c13-1 25 1 35 6M35 56c13-1 25 1 35 6M35 67c13-1 25 1 35 6M35 78c13-1 25 1 35 6'/%3E%3Cpath d='M125 45c-13-1-25 1-35 6M125 56c-13-1-25 1-35 6M125 67c-13-1-25 1-35 6M125 78c-13-1-25 1-35 6'/%3E%3C/g%3E%3C/svg%3E"),



        /* =================================================
           2. CRUZ — LADO DERECHO

           Lienzo:
           120px × 2750px
           ================================================= */

        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='2750' viewBox='0 0 120 2750'%3E%3Cg transform='translate(15 230)' fill='none' stroke='%23343b48' stroke-width='2' stroke-linecap='round' opacity='.055'%3E%3Cpath d='M45 15v98'/%3E%3Cpath d='M18 47h54'/%3E%3C/g%3E%3C/svg%3E"),



        /* =================================================
           3. LÁPIZ — LADO IZQUIERDO

           Lienzo:
           150px × 3200px

           Se repite menos que los demás.
           ================================================= */

        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='3200' viewBox='0 0 150 3200'%3E%3Cg transform='translate(15 700)' fill='none' stroke='%23343b48' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='.055'%3E%3Cpath d='M25 84l7-24 44-44 18 18-44 44z'/%3E%3Cpath d='M32 60l18 18'/%3E%3Cpath d='M76 16l18 18'/%3E%3Cpath d='M25 84l25-6'/%3E%3C/g%3E%3C/svg%3E"),



        /* =================================================
           4. BIBLIA SECUNDARIA — LADO DERECHO

           Lienzo:
           155px × 3500px

           Aparece con menor frecuencia para evitar
           demasiadas Biblias.
           ================================================= */

        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='155' height='3500' viewBox='0 0 155 3500'%3E%3Cg transform='translate(10 1100)' fill='none' stroke='%23343b48' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='.045'%3E%3Cpath d='M62 84c-11-9-25-12-44-9V28c18-3 33 1 44 10z'/%3E%3Cpath d='M62 84c11-9 25-12 44-9V28c-18-3-33 1-44 10z'/%3E%3Cpath d='M62 38v46'/%3E%3Cpath d='M28 45c10-1 19 1 27 5M28 55c10-1 19 1 27 5M97 45c-10-1-19 1-27 5M97 55c-10-1-19 1-27 5'/%3E%3C/g%3E%3C/svg%3E"),



        /* =================================================
           5. DESTELLO — IZQUIERDA

           Lienzo:
           70px × 1900px

           Es el elemento que aparece con más frecuencia,
           pero es también el más pequeño.
           ================================================= */

        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='1900' viewBox='0 0 70 1900'%3E%3Cg transform='translate(7 400)' fill='none' stroke='%23343b48' stroke-width='1.2' stroke-linecap='round' opacity='.05'%3E%3Cpath d='M27.5 8v39M8 27.5h39'/%3E%3Cpath d='M15 15l25 25M40 15L15 40' opacity='.35'/%3E%3C/g%3E%3C/svg%3E"),



        /* =================================================
           6. DESTELLO PEQUEÑO — DERECHA

           Lienzo:
           55px × 2400px
           ================================================= */

        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='2400' viewBox='0 0 55 2400'%3E%3Cg transform='translate(5 850)' fill='none' stroke='%23343b48' stroke-width='1.2' stroke-linecap='round' opacity='.045'%3E%3Cpath d='M22.5 5v35M5 22.5h35'/%3E%3C/g%3E%3C/svg%3E");



    /* =====================================================
       TAMAÑO REAL DE LOS LIENZOS

       MUY IMPORTANTE:
       Estos tamaños coinciden exactamente con cada SVG.

       Por eso los dibujos NO se deforman.
       ===================================================== */

    background-size:

        190px 2300px,
        120px 2750px,
        150px 3200px,
        155px 3500px,
        70px 1900px,
        55px 2400px;



    /* =====================================================
       POSICIÓN HORIZONTAL Y DESFASE INICIAL
       ===================================================== */

    background-position:

        3% 40px,          /* Biblia izquierda */

        96% 80px,         /* Cruz derecha */

        5% 150px,         /* Lápiz izquierda */

        95% 250px,        /* Biblia derecha */

        12% 100px,        /* Destello izquierda */

        88% 300px;        /* Destello derecha */



    /* =====================================================
       REPETICIÓN

       Solamente vertical.
       Nunca horizontal.
       ===================================================== */

    background-repeat:

        repeat-y,
        repeat-y,
        repeat-y,
        repeat-y,
        repeat-y,
        repeat-y;



    /*
       Los elementos pertenecen a la página.

       Al hacer scroll desaparecen por la parte superior
       junto con el contenido.
    */

    background-attachment: scroll;
}



/* =========================================================
   PANTALLAS MUY GRANDES
   ========================================================= */

@media (min-width: 1600px) {

    body.tema-normal {

        /*
           Aprovechamos los grandes márgenes laterales.
        */

        background-position:

            8% 40px,

            92% 80px,

            10% 150px,

            91% 250px,

            15% 100px,

            86% 300px;
    }
}



/* =========================================================
   LAPTOPS
   ========================================================= */

@media (max-width: 1200px) {

    body.tema-normal {

        /*
           Acercamos los dibujos a los extremos de la pantalla
           para proteger el contenido central.
        */

        background-position:

            -25px 40px,

            calc(100% + 15px) 80px,

            -25px 150px,

            calc(100% + 25px) 250px,

            15px 100px,

            calc(100% - 20px) 300px;
    }
}



/* =========================================================
   TABLETS
   ========================================================= */

@media (max-width: 900px) {

    body.tema-normal {

        /*
           En tablet reducimos el sistema a cuatro elementos.

           Ya no necesitamos las dos Biblias grandes porque
           el espacio lateral disponible es mucho menor.
        */

        background-image:


            /* Cruz */
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='2800' viewBox='0 0 80 2800'%3E%3Cg transform='translate(5 250)' fill='none' stroke='%23343b48' stroke-width='2' stroke-linecap='round' opacity='.035'%3E%3Cpath d='M35 15v85'/%3E%3Cpath d='M12 43h46'/%3E%3C/g%3E%3C/svg%3E"),


            /* Biblia */
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='105' height='3300' viewBox='0 0 105 3300'%3E%3Cg transform='translate(5 850)' fill='none' stroke='%23343b48' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='.035'%3E%3Cpath d='M50 70c-9-7-20-9-34-7V25c14-2 25 1 34 8z'/%3E%3Cpath d='M50 70c9-7 20-9 34-7V25c-14-2-25 1-34 8z'/%3E%3Cpath d='M50 33v37'/%3E%3C/g%3E%3C/svg%3E"),


            /* Destello */
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='2100' viewBox='0 0 45 2100'%3E%3Cg transform='translate(3 350)' fill='none' stroke='%23343b48' stroke-width='1.2' stroke-linecap='round' opacity='.035'%3E%3Cpath d='M20 5v30M5 20h30'/%3E%3C/g%3E%3C/svg%3E"),


            /* Lápiz */
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='85' height='3700' viewBox='0 0 85 3700'%3E%3Cg transform='translate(2 1250)' fill='none' stroke='%23343b48' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' opacity='.03'%3E%3Cpath d='M18 65l5-17 31-31 13 13-31 31z'/%3E%3Cpath d='M23 48l13 13'/%3E%3C/g%3E%3C/svg%3E");


        background-size:

            80px 2800px,
            105px 3300px,
            45px 2100px,
            85px 3700px;


        background-position:

            calc(100% + 15px) 0,

            -30px 100px,

            calc(100% - 8px) 150px,

            -30px 250px;


        background-repeat:

            repeat-y,
            repeat-y,
            repeat-y,
            repeat-y;


        background-attachment: scroll;
    }
}



/* =========================================================
   TELÉFONOS
   ========================================================= */

@media (max-width: 600px) {

    body.tema-normal {

        /*
           En móvil la prioridad es completamente distinta.

           El espacio disponible es pequeño y el texto suele
           ocupar prácticamente todo el ancho.

           Dejamos solamente dos detalles extremadamente
           discretos.
        */

        background-image:


            /* Cruz pequeña */
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='3400' viewBox='0 0 55 3400'%3E%3Cg transform='translate(3 450)' fill='none' stroke='%23343b48' stroke-width='1.5' stroke-linecap='round' opacity='.022'%3E%3Cpath d='M25 5v50'/%3E%3Cpath d='M10 22h30'/%3E%3C/g%3E%3C/svg%3E"),


            /* Destello */
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='2600' viewBox='0 0 35 2600'%3E%3Cg transform='translate(2 1100)' fill='none' stroke='%23343b48' stroke-width='1' stroke-linecap='round' opacity='.02'%3E%3Cpath d='M16 4v24M4 16h24'/%3E%3C/g%3E%3C/svg%3E");


        background-size:

            55px 3400px,
            35px 2600px;


        background-position:

            calc(100% + 15px) 0,

            -5px 100px;


        background-repeat:

            repeat-y,
            repeat-y;


        background-attachment: scroll;
    }
}



/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    body.tema-normal {

        /*
           No existe animación, pero dejamos explícitamente
           el comportamiento natural del fondo.
        */

        background-attachment: scroll;
    }
}



/* =========================================================
   FUTURAS TEMPORADAS
   ========================================================= */


/* =========================================================
   NAVIDAD
   ========================================================= */

/*

body.tema-navidad {

    Futuro diseño:

    - copos de nieve
    - estrellas
    - ramas de pino
    - ornamentos discretos
    - composición sobria
    - sin elementos comerciales infantiles

}

*/



/* =========================================================
   PASCUA
   ========================================================= */

/*

body.tema-pascua {

    Futuro diseño:

    - ramas naturales
    - piedra
    - lirios
    - amanecer
    - elementos relacionados con la resurrección

}

*/



/* =========================================================
   REFORMA
   ========================================================= */

/*

body.tema-reforma {

    Futuro diseño:

    - pergaminos
    - páginas antiguas
    - pluma
    - referencias visuales a las Escrituras
    - estética histórica sobria

}

*/



/* =========================================================
   FIN — TEMPORADAS.CSS
   ========================================================= */