/*
░█▀▀░█▀█░█▀█░█▀▄░█▀▄░█▀█░█▀▀░█░░
░▀▀█░█▀█░█░█░█░█░█▀▄░█▀█░▀▀█░█░░
░▀▀▀░▀░▀░▀░▀░▀▀░░▀░▀░▀░▀░▀▀▀░▀▀▀
░█░█░█▀▀░█▀▄
░█▄█░█▀▀░█▀▄
░▀░▀░▀▀▀░▀▀░
- Abril 19 del 2041
*/
/* Activo unidades de fuentes REM */
html {font-size: 100%;}

/*
PARA BLOQUES 
width: 40%;
display: inline-block;
*/

:root{
/* colores Web */
/* Gris violeta 01 */
--colorWeb00: #ddd1f3;
/* Lila vivo 01 */
--colorWeb01: #7a4aa9;
/* Lila pastel 01 */
--colorWeb02: #9b59ba;
/* Lila vivo 02 */
--colorWeb03: #8a2eff;
/* Gris violeta 02 */
--colorWeb04: #604292;
/* Violete textos */
--colorWeb05: #7822c5;
/*Pasteles*/
--colorWeb06: #4e308a;
/*Obscuro*/
--colorWeb07: #6a109b;
/*Pasteles*/
--colorweb08: #f9f5f8;

/* Color para la carpa */
--colorWeb03:  #c092d3;
}

main {width: 97%;margin: 0 auto;}

@font-face {
font-display: swap;
font-style: normal;
font-family: 'tituloFuente00';
/* Ojo que la carpeta de fonts esta afuera */
src: url('../font/LeagueSpartan-SemiBold.woff2') format("woff2"); 
}

@font-face {
font-display: swap;
font-style: normal;
font-family: 'tituloFuente01';
/* Ojo que la carpeta de fonts esta afuera */
src: url('../font/LeagueSpartan-Regular.woff2') format("woff2"); 
}

.contenedorheader00{
display: grid;
grid-template-areas:
    'cabRedesSociales'
    'panelCabezote00'
    'linksCabezote00';
grid-template-columns: auto;
grid-template-rows: auto auto auto;
/* alto ancho */
gap: 0px 0px;
}

.reglamento-pequesF-2025{
background-image: url(../img/descargar-horarios-festival-teatro.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
border-radius: 17px;
color: whitesmoke;
font-size: 1rem;
border: 3px solid transparent;
box-sizing: border-box;
padding: 30px 0px 30px 0px;
}

.reglamento-pequesF-2025:hover {
border: 3px solid #1e8e8b;
filter: hue-rotate(90deg);
}

.txtReglamento2025{
    font-size: 0.9rem;
    text-decoration: none;
}

.linkreglamento2025{
    text-decoration: none;
}

.cabRedesSociales{ grid-area: cabRedesSociales; }
.panelCabezote00{ grid-area: panelCabezote00; }
.linksCabezote00{ grid-area: linksCabezote00; }

.cabRedesSociales{
font-family: "Arial", sans-serif;
font-size: 1.10rem;
font-weight: bold;
letter-spacing: -0.45px;
color: var(--colorWeb05);
margin: 25px 0px 25px 0px;
display: flex;
justify-content: space-around;
}
 
.logoCabezote00--pf{
    width: 121px;
    margin-right: 30px;
}

.tituloCabezote00, .itemMenu00{
font-family: 'tituloFuente00', sans-serif;
font-size: 2.5rem;
}

.tituloBioAutor00{
font-family: 'tituloFuente01', sans-serif;
font-size: 2.5rem;
color: var(--colorWeb05);
margin: 10px 0px 0px 0px;
}

.subtituloBioAutor00 {
font-family: "Arial";
font-size: 1.25rem;
line-height: 1.7rem;
color: var(--colorWeb04);
}

.subTitNombreAutor{
margin: 5px;
color: var(--colorWeb05);
font-size: 1rem;
line-height: 1.45rem;
}

.tituloCabezote00{text-align: right;}

/* primer panel morado claro. Unidad cabezote 00 (logo y texto) */
.pCab00{
    display: grid;
    grid-template-areas: 'tituloCabezote00 tituloCabezote00';
    grid-template-columns: 180px 120px;
    grid-template-rows: auto;
    justify-items: end;
    align-items: center;
    height: auto;
    justify-content: center;
    /* background-color: var(--colorWeb00); */
    border-radius: 25px 25px 0px 0px;
    background-color: white;
}

/* Area que empuja los otros colores */
.fondoDetras00{
    background-color: white;
    height: 0px;
    z-index: -1;
    position: relative;
}

.bolaAlerta00{
animation-name: bolita;
animation-duration: 0.55s;
animation-iteration-count: infinite;
color: var(--colorWeb01);
  }

  @keyframes bolita {
      80% { opacity:0;}
      90% { opacity:1; }
  }

.logosContacto00 {
    display: flex;
    justify-content: center;
    gap: 50px;
}

/* LOGOS REDES SOCIALES AL LADO DE FOTO DE AUTOR DE ARTICULO */
.logosRedesAutor00{
display: flex;
justify-content: left;
margin: 10px 0px 0px 91px;
}

.iconoAutor00, .iconoAutor01 {border-radius: 20%;padding-right: 10px;}
.iconoAutor01{width: 2.6rem;}

.fotoAutor00 {
    width: auto;
    border-radius: 50%;
    margin: 15px 15px 17px 0px;
    float: left;
/*filter: drop-shadow(3px 0px 3px #ff11ed) drop-shadow(-3px 0px 3px #089bff);*/
/*box-shadow: 0 0 0 50px #f4aab9, 0 0 0 1px #66ccff;*/
}

.iconoAutor00{
filter: saturate(45%);
/*filter: hue-rotate(299deg);*/
}

iconoAutor00:hover{
background-color: var(--colorWeb06);
padding: 10px;
filter: saturate(100%);
}

/*.iconoAutor01:hover{
background-color: #f8f0f9;
padding: 10px;
filter: saturate(100%);
}
*/
/* Area que empuja los otros colores */
.fondoBlanco001{
width: auto;
    height: 247px;
    /* background-color: red; */
    background-color: var(--colorWeb01);
}

/* Area que empuja los otros colores */
.fondoBlanco002{
    width: auto;
    height: 50px;
    /* background-color: yellow; */
       background-color: #824f9b;
}

.fondoBlanco003{
width: auto;
     height: 178px;
    /* background-color: red; */
    background-color: var(--colorWeb01);
    background: linear-gradient(180deg, rgba(255,255,255,1) 67%, #573080 87%, var(--colorWeb01) 100%);
}

/* Area que empuja los otros colores */
.fondoBlanco004{
    width: auto;
    height: 50px;
    /* background-color: yellow; */
       background-color: #824f9b;
}

/* Items links arriba */
.linkItem00, .linkItem01{
font-family: 'tituloFuente00', sans-serif;
color: var(--colorWeb04);
}

.linkItem03{
font-family: 'Arial', sans-serif;
color: var(--colorWeb04);
background-color: white;
padding: 0.56px;
}

/* Nombre de area */
.tituloCabezote00{ 
    grid-area: tituloCabezote00;
    color: var(--colorWeb06);
    text-transform: uppercase;
    margin-right: 120px;
    line-height: 33px;
    letter-spacing: -1.5px;
}

.logoCabezote00{ grid-area: tituloCabezote00;}
 
.linksCabezote00{ 
font-size: 1.55rem;
line-height: 270%;
text-align: center;
width: 98%;
}

/* OJO es lItem  */
.lItem00, .lItem01, .lItem02, .lItem03{background-color: silver;}

.linkItem00, 
.linkItem01{
    font-size: 1.12rem;
    text-align: center;
    border-radius: 17px;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}

/*.linkItem01{
    width: 48%;
    display: inline-block;
}*/

.lItem00{ 
    /* background: linear-gradient(180deg, var(--colorWeb06) -3%, var(--colorWeb06) 40%, var(--colorWeb06) 250%); */
    background-color: var(--colorWeb06);
}

.lItem01{
background-color: var(--colorWeb01);
/*    background: linear-gradient(180deg, #643891 -3%, var(--colorWeb01) 40%, var(--colorWeb01) 250%);*/
}

.lItem02{
background-color: var(--colorWeb02);
/*background: linear-gradient(180deg, #9b59ba 9%, #a664c2 31%, #bc87d5 150%);*/
}

.lItem03{
background-color: var(--colorWeb03);
/*background: linear-gradient(180deg, var(--colorWeb03) 9%, var(--colorWeb03) 31%, #bc87d5 150%);*/
}

.lItem00, .lItem01, .lItem02, .lItem03{color: white;border-bottom: 2.75px solid white;}

/*La linea toma el mismo color de la fuente*/
.linkItem00:hover{ 
text-underline-offset: 3.5px;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-thickness: 3px;
color: var(--colorWeb05);
}

/* Se debe quitar la línea antes del :hover */
.linkItem02{text-decoration-line: none;}


.linkItem02:hover{ 
text-underline-offset: 3.5px;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-thickness: 3px;
color: white;
}

/* OJO. Eliminado margen raro */
ul{list-style-type: none;margin: 0px;padding: 0px;}

/*.lItem00:hover{color: var(--colorWeb04);}*/

.fotoBioAutor00 {
    position: relative;
    height: 440px;
    width: 100%;
    object-fit: cover;
    object-position: 52% 50%;
    border-bottom: 4px solid var(--colorWeb05);
    border-radius: 20px;
}

.linkItem00-colorVivo{color: #008be9;}

header.bioAutor00, 
.tituloBioAutor00, 
.subtituloBioAutor00, 
.linkItem00, 
.logosContacto00{
max-width: 97%;
margin: 0 auto;
padding-top: 1rem;
}

footer{
font-family: arial;
font-size: 0.8rem;
color: var(--colorWeb04);
text-align: center;
margin-top: 1rem;
}

.linkSobreFondoColor00{
color: white;
}