/* ==========================================================
   CYBERFRACTAL
   02-portada.css
   Arquitectura v3.0
==========================================================*/


/* ==========================================================
   VARIABLES
========================================================== */

:root{

    --negro:#000000;

    --blanco:#f5f5f5;

    --oro:#d6b85c;

    --oro-claro:#f2d47b;

    --oro-oscuro:#8b6d28;

    --gris:#bdbdbd;

    --ancho:900px;

    --duracion:.35s;

}


/* ==========================================================
   DOCUMENTO
========================================================== */

html{

    width:100%;

    min-height:100%;

}


body{

    min-height:100vh;
    min-height:100dvh;

    background:var(--negro);

    color:var(--blanco);

    font-family:Verdana, Arial, sans-serif;

    overflow-x:hidden;

}


/* ==========================================================
   PORTADA
========================================================== */

#portada{

    position:relative;

    z-index:10;

    width:min(calc(100% - 32px),var(--ancho));

    min-height:100vh;

    margin:0 auto;

    padding:28px;

    display:grid;

    grid-template-rows:

        auto

        auto

        1fr

        auto

        auto;

    row-gap:28px;

    align-items:center;

    justify-items:center;

}


/* ==========================================================
   HERO
========================================================== */

#hero{

    width:100%;

    text-align:center;

}


#hero h1{

    color:var(--oro);

    font-size:clamp(40px,6vw,58px);

    letter-spacing:12px;

    text-transform:uppercase;

    text-shadow:

        0 0 8px rgba(214,184,92,.35),

        0 0 20px rgba(214,184,92,.18);

}

/* ==========================================================
   TEMPORIZADOR
========================================================== */

#contador-portada{

    text-align:center;

    color:#bfbfbf;

    font-family:Verdana, Arial, sans-serif;

    font-size:14px;

    letter-spacing:1px;

}

#cuenta-regresiva{

    color:var(--oro);

    font-size:22px;

    font-weight:bold;

}


/* ==========================================================
   SUBTÍTULO
========================================================== */

#subtitulo{

    width:100%;

    text-align:center;

}


#lema{

    color:#d8d8d8;

    font-size:clamp(15px,2vw,18px);

    letter-spacing:2px;

    line-height:1.6;

}


/* ==========================================================
   OBSERVATORIO

   El visor será definido completamente
   desde 04-observatorio.css
========================================================== */

#observatorio{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

}


/* ==========================================================
   MENSAJE PARA MÓVILES
========================================================== */

#mensaje-movil{

    display:none;

    width:100%;

    max-width:420px;

    margin:0 auto;

    padding:18px;

    border:1px solid rgba(214,184,92,.30);

    border-radius:10px;

    background:rgba(0,0,0,.45);

    text-align:center;

    color:#d8d8d8;

    line-height:1.7;

}

#mensaje-movil strong{

    display:block;

    margin:0 0 14px 0;

    color:var(--oro);

    font-size:18px;

    font-weight:bold;

}

#mensaje-movil br{

    display:none;

}

/* ==========================================================
   ACCESO
========================================================== */

#acceso{

    display:flex;

    justify-content:center;

    align-items:center;

}


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

.boton-principal{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    min-width:210px;

    padding:14px 42px;

    border:1px solid var(--oro);

    border-radius:4px;

    color:var(--oro);

    letter-spacing:4px;

    text-transform:uppercase;

    transition:

        background var(--duracion),

        color var(--duracion),

        border-color var(--duracion),

        box-shadow var(--duracion),

        transform var(--duracion);

}


.boton-principal:hover{

    background:rgba(214,184,92,.12);

    box-shadow:

        0 0 16px rgba(214,184,92,.30);

    transform:translateY(-2px);

}


.boton-principal:focus-visible{

    outline:2px solid var(--oro);

    outline-offset:4px;

}


/* ==========================================================
   FOOTER
========================================================== */

#footer{

    width:100%;

    text-align:center;

    color:#9c9c9c;

    font-size:12px;

    letter-spacing:1px;

}


#footer small{

    display:block;

}