/*======================================================*/
/* La Escritura                                      */
/* Archivo.....: index.css                              */
/* Versión.....: 1.0.0                                  */
/* Fecha.......: 23-07-2026                             */
/* Descripción.: Portada de La Escritura.             */
/*======================================================*/

/*======================================================*/
/* Documento                                            */
/*======================================================*/

@font-face {
  font-display: swap; 
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  src: url('/public/assets/fonts/eb-garamond-v33-latin-regular.woff2') format('woff2'); 
}

@font-face {
  font-display: swap; 
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 700;
  src: url('/public/assets/fonts/eb-garamond-v33-latin-700.woff2') format('woff2'); 
}

@font-face
{
    font-family:'TTFirsNeue';

    src:url('/public/assets/fonts/TTFirsNeue-Medium.woff2')
        format('woff2');

    font-weight:500;

    font-style:normal;

    font-display:swap;
}

html,
body
{
    margin:0;
    padding:0;

    width:100%;
    height:100%;
}

/*======================================================*/
/* Página                                               */
/*======================================================*/

.home-page
{
    width:100%;

    min-height:100vh;
}

/*======================================================*/
/* Hero                                                 */
/*======================================================*/

.home-hero
{
    width:100%;

    height:100vh;

    overflow:hidden;
    background:#0C151E;
}

/*======================================================*/
/* Versículo del Día                                    */
/*======================================================*/

.home-daily-verse
{
    width:100%;
    height:100vh;
    position:relative;
    overflow:hidden;

}

.daily-verse-background
{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

/*------------------------------------------------------*/
/* Capa de oscurecimiento                               */
/*------------------------------------------------------*/

.daily-verse-overlay
{
    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:
        rgba(0,0,0,.22);
}

/*------------------------------------------------------*/
/* Caja principal                                       */
/*------------------------------------------------------*/

.daily-verse-box
{
    width:90%;

    max-width:900px;

    padding:40px;

    border-radius:20px;

    background:
        rgba(255,255,255,.12);

    backdrop-filter:blur(10px);

    border:
        1px solid rgba(255,255,255,.25);

    text-align:center;

    color:#ffffff;
}

.home-video
{
    width:100%;

    height:100%;

    display:block;

    object-fit:cover;
}
/*------------------------------------------------------*/
/* Imagen título                                        */
/*------------------------------------------------------*/

.daily-verse-title
{
    display:block;

    margin:0 auto 35px;

    max-width:320px;

    width:100%;
}

/*------------------------------------------------------*/
/* Texto                                                 */
/*------------------------------------------------------*/

.daily-verse-text
{
    font-family:"EBGaramond", Georgia, serif;

    font-size:1.10rem;

    line-height:1.75;

    font-weight:400;
}

/*------------------------------------------------------*/
/* Referencia                                           */
/*------------------------------------------------------*/

.daily-verse-reference
{
    font-family:"EBGaramond", Georgia, serif;

    font-size:1.2rem;

    font-weight:700;
}
/*======================================================*/
/* Subtítulo Destacado                                  */
/*======================================================*/

.home-featured-subtitle
{
    width:100%;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    background:#ffffff;

    padding:70px 0 20px;

    position:relative;
}

/*------------------------------------------------------*/
/* Capa                                                 */
/*------------------------------------------------------*/

.featured-subtitle-overlay
{
    width:100%;

    display:flex;

    justify-content:center;

    align-items:flex-start;
}

/*------------------------------------------------------*/
/* Caja                                                 */
/*------------------------------------------------------*/

.featured-subtitle-box
{
    width:min(980px,92vw);

    min-height:650px;

    padding:55px;

    background:#fdfbf4;

    border-radius:20px;

    box-shadow:
        0 10px 35px rgba(0,0,0,.10);

    border:1px solid #ece4cf;
}

/*------------------------------------------------------*/
/* Título                                               */
/*------------------------------------------------------*/

.featured-subtitle-title
{
    margin:0 0 30px;

    font-size:2.3rem;

    font-weight:700;

    color:#3b3122;

    line-height:1.4;
}

/*------------------------------------------------------*/
/* Referencia                                           */
/*------------------------------------------------------*/

.featured-subtitle-reference
{
    margin-top:35px;

    color:#7a6b4f;

    font-size:1.10rem;

    font-weight:600;
}
.featured-subtitle-reference a,
.featured-subtitle-reference a:visited,
.featured-subtitle-reference a:hover
{
    color: inherit;
    text-decoration: none;
}

/*=====================================================*/
/* Enlaces del estudio                                 */
/*=====================================================*/

.chapter-verse a,
.chapter-subtitle a,
.chapter-reference a,
.featured-subtitle-verse a,
.featured-subtitle-title a {

    color: inherit;
    text-decoration: none;

}

.chapter-verse a:hover,
.chapter-subtitle a:hover,
.chapter-reference a:hover,
.featured-subtitle-verse a:hover,
.featured-subtitle-title a:hover,
.chapter-verse a:visited,
.chapter-subtitle a:visited,
.chapter-reference a:visited,
.featured-subtitle-verse a:visited,
.featured-subtitle-title a:visited {

    color: inherit;
    text-decoration: none;

}

.chapter-reference a::after,
.featured-subtitle-reference-cross a::after
{
    content:"▼";

    display:inline-block;

    margin-left:8px;

    font-size:.78em;

    color:#b88a2a;

    vertical-align:middle;

    transition:
        color .20s ease,
        transform .20s ease;
}

.chapter-reference a:hover::after
{
    color:#d4a93a;

    transform:scale(1.15);
}

.chapter-link-open::before,
.chapter-verse a::before,
.chapter-subtitle a::before,
.featured-subtitle-verse a::before,
.featured-subtitle-title a::before
{
    content:"▼";

    display:inline-block;

    margin-right:8px;

    font-size:.62em;

    color:#b88a2a;

    vertical-align:middle;

    transition:color .20s ease,
               transform .20s ease;
}

.study-open:hover::before,
.chapter-verse a:hover::before,
.chapter-subtitle a:hover::before,
.chapter-reference a:hover::before,
.featured-subtitle-verse a:hover::before,
.featured-subtitle-title a:hover::before
{
    color:#d4a93a;

    transform:scale(1.15);
}

/*=====================================================*/
/* Subtítulos                                          */
/*=====================================================*/

.chapter-subtitle,
.featured-subtitle-title
{
    font-family: "EB Garamond", Georgia, serif;

    font-weight: 700;
}

/*=====================================================*/
/* Tipografía del texto bíblico                        */
/*=====================================================*/

.chapter-verse,
.featured-subtitle-verse
{
    font-family: "EB Garamond", Georgia, serif;

    font-size: 1.10rem;

    line-height: 1.75;

    font-weight: 400;
}

/*=====================================================*/
/* Referencias del capítulo                            */
/*=====================================================*/

.chapter-reference {

    text-align: right;

    font-family:"EBGaramond", Georgia, serif;

    font-size:1.10rem;

    line-height:1.75;

}

/*=====================================================*/
/* Enlace del libro y capítulo                         */
/*=====================================================*/

.chapter-link a,
.chapter-link a:visited,
.chapter-link a:hover,
.chapter-link a:active
{
    color: inherit;
    text-decoration: none;
}

h2.chapter-title a,
h2.chapter-title a:link,
h2.chapter-title a:visited,
h2.chapter-title a:hover,
h2.chapter-title a:active
{
    text-decoration: none !important;
    color: inherit !important;
}

.book-title{

    display:block;

}

.book-subtitle{

    display:block;

    margin-top:4px;

    font-size:.85em;

    font-weight:400;

    color:#8a8a8a;

}

.featured-subtitle-chapter-break
{
    margin:22px 0 18px;

    text-align:left;
}

.featured-subtitle-chapter-break::before
{
    content:"";

    display:block;

    height:1px;

    background:rgba(255,255,255,.30);

    margin-bottom:12px;
}

.featured-subtitle-chapter-break span
{
    display:inline-block;

    padding:6px 18px;

    border-radius:30px;

    background:rgba(255,255,255,.12);

    color:#000;

    font-weight:700;

    letter-spacing:.5px;
}

.featured-subtitle-chapter{

    margin:18px 0 10px;

    font-size:1.10rem;

    font-weight:bold;

    color:#ffffff;

}

.featured-subtitle-reference-cross{

    text-align:right;

    margin:4px 0 12px;

    font-family:"EBGaramond", Georgia, serif;

    font-size:1.10rem;

    line-height:1.75;

}

.featured-subtitle-reference-cross a{

    color:inherit;

    text-decoration:none;

}
.featured-subtitle-ornament {

    display: block;

    width: 70%;

    max-width: 520px;

    margin: 30px auto 0;
}

/*=====================================================*/
/* Botón Continuar leyendo                             */
/*=====================================================*/

.daily-verse-action
{
    margin-top:36px;

    text-align:center;
}

.daily-verse-button
{
    display:inline-block;

    padding:12px 34px;

    border-radius:40px;

    border:1px solid rgba(255,255,255,.45);

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(8px);

    color:#ffffff;

    font-family:'TTFirsNeue',sans-serif;

    font-size:1rem;

    letter-spacing:.5px;

    text-decoration:none;

    transition:
        background .25s ease,
        transform .20s ease,
        border-color .25s ease;
}

.daily-verse-button:hover
{
    background:rgba(255,255,255,.20);

    border-color:#d4a93a;

    transform:translateY(-2px);
}

/*=====================================================*/
/* Botón del Subtítulo Destacado                       */
/*=====================================================*/

.featured-subtitle-action
{
    margin-top:34px;

    text-align:center;
}

.featured-subtitle-button
{
    display:inline-block;

    padding:12px 34px;

    border-radius:40px;

    border:1px solid #d8c59a;

    background:#f9f3e8;

    color:#6b5326;

    font-family:'TTFirsNeue',sans-serif;

    font-size:1rem;

    text-decoration:none;

    transition:
        background .25s ease,
        transform .20s ease,
        box-shadow .25s ease;
}

.featured-subtitle-button:hover
{
    background:#fff8ee;

    box-shadow:0 6px 16px rgba(184,138,42,.18);

    transform:translateY(-2px);
}

/*======================================================*/
/* Botones del capítulo                                 */
/*======================================================*/

.chapter-actions
{
    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    margin:22px 0;

    flex-wrap:wrap;
}

/*------------------------------------------------------*/

.chapter-actions .study-button
{
    display:inline-block;

    padding:12px 34px;

    border-radius:40px;

    border:1px solid #d8c59a;

    background:#f9f3e8;

    color:#6b5326;

    font-family:'TTFirsNeue',sans-serif;

    font-size:1rem;

    text-decoration:none;

    transition:
        background .25s ease,
        transform .20s ease,
        box-shadow .25s ease;
}

/*------------------------------------------------------*/

.chapter-actions .study-button:hover
{
    background:#fff8ee;

    box-shadow:0 6px 16px rgba(184,138,42,.18);

    transform:translateY(-2px);
}

/*=====================================================*/
/* Versículo seleccionado                              */
/*=====================================================*/

.chapter-verse-selected
{
    background:#fff8e8;

    border-left:4px solid #c9a13b;

    padding:10px 16px;

    border-radius:10px;

    margin-left:-16px;

    margin-right:-16px;

    transition:
        background 2.5s ease,
        border-color 2.5s ease;
}

.chapter-verse-selected.chapter-verse-fade
{
    background:transparent;

    border-left:4px solid transparent;
}

/*=====================================================*/
/* Barra de navegación fija                            */
/*=====================================================*/

.chapter-nav a,
.chapter-nav a:visited,
.chapter-nav a:hover,
.chapter-nav a:active
{
    color:#000;

    text-decoration:none;

    transition:color .20s ease;
}

.chapter-nav a:hover
{
    color:#b88a2a;
}

.chapter-nav-center a,
.chapter-nav-title a
{
    color:#000;

    text-decoration:none;
}

/*=====================================================*/
/* Panel de categorías                                 */
/*=====================================================*/

.study-categories
{
    display:flex;

    flex-direction:column;

    gap:6px;
}

.study-category
{
    border-bottom:1px solid #e8e2d2;
}

.study-category-button
{
    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 4px;

    background:none;

    border:none;

    cursor:pointer;

    font-family:'EBGaramond', serif;

    font-size:1.08rem;

    font-weight:600;

    color:#2c2c2c;

    text-align:left;

    transition:color .20s ease;
}

.study-category-button:hover
{
    color:#b88a2a;
}

.study-category-arrow
{
    color:#b88a2a;

    font-size:.95rem;

    transition:transform .20s ease;
}

.study-category-content
{
    display:none;

    padding:0 0 12px 18px;
}

.study-category-header
{
    display:flex;

    align-items:center;

    gap:10px;

    cursor:pointer;
}

.study-category-arrow
{
    color:#b88a2a;

    font-size:.70em;

    transition:transform .20s ease;
}

.study-subtitle-category
{
    display:flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:#111;

    font-family:"TTFirsNeue-Medium",sans-serif;

    font-size:1.08rem;

    padding:12px 0;
}

.study-category-arrow
{
    width:18px;

    color:#b88a2a;

    font-size:.70em;

    flex-shrink:0;

    transition:transform .20s ease;
}

/*=====================================================*/
/* Imagen de Información y bosquejo                    */
/*=====================================================*/

.book-info-image
{
    width:100%;

    max-width:1200px;

    margin:0 auto 30px;

    text-align:center;
}


.book-info-image img
{
    display:block;

    width:100%;

    max-width:1200px;

    height:auto;

    margin:0 auto;
}

/*=======================================================
   ACCIÓN ADMINISTRADOR - DICCIONARIO
=======================================================*/

.admin-dictionary-action
{
    display:inline-flex;
    align-items:center;
    margin-right:8px;
    vertical-align:middle;
}

.admin-dictionary-action-button
{
    display:inline-block;
    width:18px;
    height:18px;
    padding:0;
    border:0;
    border-radius:50%;
    cursor:pointer;
    vertical-align:middle;
    background:#f9a825;
}

/*======================================================*/
/* Adaptación de portada para otras dimensiones         */
/*======================================================*/

@media (max-width:1200px)
{
    .home-hero
    {
        width:100%;

        height:auto;

        overflow:hidden;
    }

    .home-video
    {
        display:block;

        width:100%;

        height:auto;

        aspect-ratio:16 / 9;

        object-fit:contain;
    }

    /*======================================================*/
/* Versículo Diario - otras dimensiones                 */
/*======================================================*/

.home-daily-verse
{
    width:100%;

    min-height:520px;

    height:auto;

    position:relative;

    overflow:hidden;
}

.daily-verse-background
{
    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    display:block;

    object-fit:fill;
}

.daily-verse-overlay
{
    position:relative;

    width:100%;

    min-height:520px;

    display:flex;

    justify-content:center;

    align-items:center;

    box-sizing:border-box;

    padding:30px 12px;
}

.daily-verse-box
{
    width:100%;

    max-width:900px;

    box-sizing:border-box;

    padding:16px;
}

/*======================================================*/
/* Subtítulo Diario - otras dimensiones                  */
/*======================================================*/

.home-featured-subtitle
{
    width:100%;

    min-height:0;

    height:auto;

    padding:50px 12px 40px;

    box-sizing:border-box;

    background:#f5f2ea;
}

.featured-subtitle-overlay
{
    width:100%;

    min-height:0;

    height:auto;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    box-sizing:border-box;
}

.featured-subtitle-box
{
    width:100%;

    max-width:980px;

    min-height:0;

    height:auto;

    padding:16px;

    box-sizing:border-box;

    background:#fdfbf4;

    border-radius:20px;

    box-shadow:
        0 10px 35px rgba(0,0,0,.10);

    border:1px solid #ece4cf;
}


/* Triángulos de enlaces - otras dimensiones */
    .chapter-link-open::before,
    .chapter-verse a::before,
    .chapter-subtitle a::before,
    .featured-subtitle-verse a::before,
    .featured-subtitle-title a::before,
    .chapter-reference a::after,
    .featured-subtitle-reference-cross a::after
    {
        font-size:.78em;
    }

.chapter-nav a::before
{
    content:"▼";

    display:inline-block;

    margin-right:8px;

    font-size:.78em;

    color:#b88a2a;

    vertical-align:middle;
}

#home-video-orar
    {
        transform:translateY(-20px);
    }

}
/*======================================================*/
/* CONTENIDO OCULTO INICIAL DEL MÓDULO DESTACADO        */
/*======================================================*/

.study-module-hidden
{
    display:none;
}