/* ==========================================================================

    ELENA ROSS
    ESTRUCTURA GENERAL DE LA WEB

========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Baskervville:ital,wght@0,400..700;1,400..700&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Luxurious+Script&display=swap');

:root {

    /* ----------------------------------------------------------------------
       COLORES
    ---------------------------------------------------------------------- */
    --color-fondo: #faf7f0;

    --color-principal: #a4a999;
    --color-secundario: #faf7f0;
    --color-terciario: #877960;
    --color-cuaternario: #cdc3a7;

    --color-marron-oscuro: #544b3b;

    --color-texto-titulo-verde: #a4a999;
    --color-texto-titulo-beige: #faf7f0;

    --color-texto-subtitulo-marron: #cdc3a7;
    --color-texto-subtitulo-verde: #a4a999;

    --color-texto-marron: #877960;
    --color-texto-beige: #faf7f0;
    --color-texto-verde: #a4a999;

    --color-boton-estandar-verde: #868e78;
    --color-boton-estandar-marron: #877960;
    
    --color-trama-hero: #a4a999;
    --color-trama-galeria: #cabba3;


    /* ----------------------------------------------------------------------
       TIPOGRAFÍAS
    ---------------------------------------------------------------------- */

    --fuente-romana: "Baskervville", serif;
    --fuente-script: "Luxurious Script", cursive;
    --fuente-textos: "DM Sans", sans-serif;

    --size-titulos: 3.8rem;
    --size-subtitulos: 4.2rem;
    --size-subtitulos-adicional: 1.25rem;
    --size-texto: 0.6rem;
    

    /* ----------------------------------------------------------------------
       ESTRUCTURA
    ---------------------------------------------------------------------- */

    --ancho-maximo-web: 1200px;
    --ancho-maximo-concreto: 760px;
    --ancho-maximo-estrecho: 420px;

    --altura-menu: 50px;


    /* ----------------------------------------------------------------------
       ESPACIADOS
    ---------------------------------------------------------------------- */

    --gap-galeria: 15px;


    /* ----------------------------------------------------------------------
       TRANSICIONES
    ---------------------------------------------------------------------- */

    --duracion-transicion: 1.5s;
    --curva-transicion: ease-out;

    /* Efectos Hover */
    --zoom-hover-estandar: 1.25;
    --zoom-hover-sutil: 1.02;

}

/* ==========================================================================
   CONFIGURACIÓN GENERAL
========================================================================== */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
    font-size: 16px;
    /* Eliminar el color por defecto del tap del dedo en la pantalla */
    -webkit-tap-highlight-color: transparent;
}


body{

    background: var(--color-fondo);
    line-height: 1.5;

    overflow-x: hidden;

}

/* ==========================================================================
   POSICIÓN SCROLL VIEW
========================================================================== */

#historias{
   scroll-margin-top: 180px;
}

#momentos{
   scroll-margin-top: 120px;
}

#detalles{
   scroll-margin-top: 85px;
}

#contacto{
   scroll-margin-top: 85px;
}

/* ==========================================================================
   COMPONENTE · BOTÓN ESTÁNDAR
========================================================================== */

.boton-estandar{

   display: block;

   font-family: var(--fuente-textos);

   text-decoration: none;

   font-size: 0.8rem;

   letter-spacing: 0.025rem;

   font-weight: 300;

   color: var(--color-boton-estandar-verde);

   background: none;

   border: none;

   padding: 0;

   cursor: pointer;

   margin-inline: auto;

   transition:
    color var(--duracion-transicion) var(--curva-transicion),
    transform var(--duracion-transicion) var(--curva-transicion);

}

.boton-estandar:hover{

   color: var(--color-boton-estandar-marron);

    transform: scale(var(--zoom-hover-estandar));

}

.llave:first-child{

   margin-right: 0.3rem;

}

.llave:last-child{

   margin-left: 0.3rem;

}


/* ==========================================================================
   COMPONENTE · BOTÓN ESTÁNDAR
========================================================================== */

#back-to-top{

   position: fixed;

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

   bottom: 40px;
   left: 10px;

   width: 60px;
   height: 60px;

   border-radius: 50%;

   background-color: var(--color-principal);

   font-family: var(--fuente-textos);
   text-decoration: none;
   font-size: 2rem;
   font-weight: 300;

   color: var(--color-texto-beige);

   cursor: pointer;

   z-index: 1000;

   opacity: 0;
   pointer-events: none;

   transition:
   opacity var(--duracion-transicion) var(--curva-transicion),
   transform var(--duracion-transicion) var(--curva-transicion),
   background-color var(--duracion-transicion) var(--curva-transicion);

}

#back-to-top span{

   display: block;

   font-size: 3.5rem;
   line-height: 1;

   transform: translateX(-3px) rotate(-90deg);

}

#back-to-top:hover{

   background-color: var(--color-terciario);

}

#back-to-top.show{

   opacity: 1;
   pointer-events: auto;

}

#firma-web-genotipe a{
   text-decoration: none;
   color: var(--color-texto-marron);
   transition:
   color var(--duracion-transicion) var(--curva-transicion);}
#firma-web-genotipe a:hover{color: #D20078;}


/* ==========================================================================
   RESPONSIVE · MÓVIL · TIPOGRAFÍA
========================================================================== */

@media (max-width: 600px){

   :root{

       --size-titulos: 3rem;
       --size-subtitulos: 3.5rem;
       --size-texto: 0.75rem;

   }

}