/* *********************************** */
/* *** ESTILOS GENERALES *** */
/* *********************************** */

/* Variables */
:root
{
    /* Colores */
    --fondo-pagina: #E5E5E5;
    --fondo-elemento: #FFFAFA;
    --color-texto: #000000;
    /* Tipo de fuente */
    --tipo-fuente-Roboto: "robotoregular", "sans-serif";
    --tamano-fuente: 16px;

    --btn-enviar-color: var(--fondo-pagina);
    

}


/* Fuentes propias */
@font-face 
{
    font-family: "robotoregular";
    font-weight: normal;
    font-style: normal;
    src:
        url("../font/roboto-regular-webfont.woff2") format("woff2"),
        url("../font/roboto-regular-webfont.woff") format("woff");

}

/* Fuente roboto mas bold de lo normal */
@font-face 
{
    font-family: "Roboto-Black";

    src: 
        url("../font/Roboto-Black.woff2") format("woff2"),
        url("../font/Roboto-Black.woff") format("woff"); 
    font-weight: normal;
    font-style: normal;
}

/* Familia Spartan ligth, medium, bold, black, ... con diferentes font-weigths */

@font-face {
    font-family: "Spartan";
    src: url("../font/Spartan-Thin.woff2") format("woff2"),
        url("../font/Spartan-Thin.woff") format("woff");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Spartan";
    src: url("../font/Spartan-Light.woff2") format("woff2"),
        url("../font/Spartan-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Spartan";
    src: url("../font/Spartan-Regular.woff2") format("woff2"),
        url("../font/Spartan-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Spartan";
    src: url("../font/Spartan-ExtraLight.woff2") format("woff2"),
        url("../font/Spartan-ExtraLight.woff") format("woff");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Spartan";
    src: url("../font/Spartan-Bold.woff2") format("woff2"),
        url("../font/Spartan-Bold.woff") format("woff");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Spartan";
    src: url("../font/Spartan-ExtraBold.woff2") format("woff2"),
        url("../font/Spartan-ExtraBold.woff") format("woff");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Spartan";
    src: url("../font/Spartan-SemiBold.woff2") format("woff2"),
        url("../font/Spartan-SemiBold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Spartan";
    src: url("../font/Spartan-Black.woff2") format("woff2"),
        url("../font/Spartan-Black.woff") format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Spartan";
    src: url("../font/Spartan-Medium.woff2") format("woff2"),
        url("../font/Spartan-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

html
{
    font-size: var(--tamano-fuente);
    font-family: var(--tipo-fuente-Roboto);
    font-weight: 700;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    background-color: var(--fondo-pagina);
    color: var(--color-texto);

}

.contenidoCentrado
{
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Cambiar posicion Variable */
    height: 733px;
    width: 608px;
}

.componenteImagen
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;

}

figure
{
    margin-block-start: -20px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    margin-right: 29px;
    margin-bottom: 9px;

}

.divLineaIzquierda
{

    position: absolute;
    border: 1px solid var(--color-texto);
    transform: rotate(45.5deg);
    top: 67px;
    left: 0px;
    width: 150px;


}

.divLineaDerecha
{
    
    position: absolute;
    border: 1px solid var(--color-texto);
    transform: rotate(134deg);
    top: 67px;
    left: 0px;
    width: 150px;
}

.imagenFigure
{
    
    width: 150px;
    height: 150px;
    border: 1px solid var(--color-texto);
    background-color: var(--fondo-elemento);

    border-radius: 10px 10px 0px 0px;

}

.figureImagenPeke
{
    width: 150px;
    height: 150px;
    border-radius: 10px 10px 0px 0px;
    
}

.descripcionFoto
{
    margin-top: 8px;

    font-weight: 400;
    line-height: 18px;
    
    background-color: var(--fondo-elemento);
    text-align: center;
    
    border: 1px solid var(--color-texto);
    border-radius: 0px 0px 10px 10px;


}

.textoMayor
{
    background-color: var(--fondo-elemento);
    width: 143px;
    height: 160px;

    border: 1px solid var(--color-texto);
    border-radius: 10px;
    padding: 8px;

}