@font-face {
    font-family: "Satisfy";
    src: url("../fonts/Satisfy/Satisfy-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Libre Baskerville";
    src: url("../fonts/LibreBaskerville/LibreBaskerville-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Libre Baskerville";
    src: url("../fonts/LibreBaskerville/LibreBaskerville-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Libre Baskerville";
    src: url("../fonts/LibreBaskerville/LibreBaskerville-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "Jubilat";
    src: url("../fonts/Jubilat/Jubilat-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Jubilat";
    src: url("../fonts/Jubilat/Jubilat-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Jubilat";
    src: url("../fonts/Jubilat/Jubilat-Light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
}

:root {
    --pg-green: #858c50;
    --pg-brown: #823d24;
    --pg-red: #981914;
    --pg-ink: #222;
    --pg-paper: #f8f5ec;
    --pg-soft: #ebecf1;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

/* FONDO GENERAL */
body {
    background:
        linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)),
        url("img/0texturRecurso.webp");
    background-repeat: repeat;
    background-size: cover;
}

/* CAJAS TEMPORALES */
.sidebar-box,
.contenido-box {
    background:none;
    padding: 50px;
    
  }

    /* border-radius: 8px; */
    


/* HEADLINE */
.headline-row img {
    display: block;
    
}

.pg-ultratitle {
    font-family: "Jubilat", Georgia, serif;
    font-weight: 800;
    line-height: 1.05;
    font-size: 7.7cqw;
    color: var(--pg-green);
    /* CLAVE */
    width: 100%;
    display: block;
    overflow-wrap: break-word;
    word-break: break-word;
    letter-spacing: -6%;
}

.pg-title {
    color: var(--pg-brown);
    font-family: "Jubilat", Georgia, serif;
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 400;
    line-height: 1.05;
}

.pg-title span {
    display: block;
    color: var(--pg-brown);
    font-family: "Satisfy", cursive;
    font-weight: 400;
}

.pg-subtitle {
        display: block;
        font-size: clamp(1,6rem, 4.5vw, 3.2rem);
        color: var(--pg-brown);
        font-family: "Satisfy";
        margin-top: 3rem;
        margin-bottom: 1rem;
        
    }
.pg-subtitle2{
        display: block;
        font-size: clamp(1, 6rem, 4.5vw, 3.2rem);
        color: var(--pg-brown);
        font-family: "Satisfy";
        margin-bottom: 1rem;

    }

h3.pg-bajada {
    display: block;
    font-family: "Libre Baskerville", "Baskerville", serif;
    font-style: italic;
    font-size: clamp(21px, 1.5vw, 1.2rem);
    font-weight: 300;
    line-height: 1.5;
    color: var(--pg-green);
    margin-top: 3rem;
    margin-bottom: 0.5rem;
    white-space: pre-line;
}

p.texto {
    font-family: "Libre Baskerville", "Baskerville", serif;
    font-size: clamp(16px, 1.2vw, 18px);
    line-height: 1.7;
    color: var(--pg-ink);
    /* max-width: 70ch; */
    margin-bottom: 1rem;
}
.capitular {
    float: left;
    font-family: "Libre Baskerville", serif;
    font-style: italic;
    font-size: 3.5em;
    line-height: 0.8;
    margin-right: 0.08em;
    margin-top: 0.08em;
}
i,em,
.texto-italica {
    font-family: "Libre Baskerville", "Baskerville", serif;
    font-style: italic;
    color: var(--pg-ink);
}

p.datos {
    font-family: "Libre Baskerville", "Baskerville", serif;
    font-size: clamp(14px, 1vw, 17px);
    line-height: 1.6;
    color: var(--pg-ink);

    white-space: pre-line;
    margin-bottom: 1rem;
}

.sidebar-box img {
    container-type: inline-size;
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    
}

.epigrafe {
    margin-top: 10px;
    font-size: clamp(22px, 1.2vw, 20px);
    font-family: "Satisfy";
    color: var(--pg-ink);
}

.link {
    font-family: "Libre Baskerville", "Baskerville", serif;
    font-size: clamp(15px, 1.05vw, 18px);
    font-style: italic;
    color: var(--pg-green);

    text-decoration: none;
    border-bottom: 1px solid rgba(60, 110, 80, 0.35);

    cursor: pointer;
    display: block;
    width: fit-content;
    margin-bottom: 6px;

    transition:
        color 0.25s ease,
        transform 0.2s ease,
        border-color 0.25s ease;
}

.link::before {
    content: "• ";
    margin-right: 4px;
}

.texto-link:hover {
    color: var(--pg-red);
    border-bottom-color: var(--pg-red);
    transform: translateY(-1px);
}

.texto-link::after {
    content: " ↗";
    font-size: 0.85em;
    opacity: 0.6;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.texto-link:hover::after {
    opacity: 1;
    transform: translateX(2px);
}


.collapseCardGroup {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 40px 0;
}

.collapseCardBtn {
    border: none;
    background: transparent;
    padding: 0;
    transition: transform 0.25s ease;
}

.collapseCardBtn:hover {
    transform: scale(1.05);
}

.collapseCardBtn img {
    width: 260px;
    max-width: 100%;
    height: auto;
    max-height: 130px;
    display: block;
    object-fit: contain;
}

.collapseCardContent {
    margin-top: 30px;
}

#pg-player{

    position:fixed;
    left:0;
    right:0;
    bottom:0;
    background:white;
    border-top:1px solid #dfdfdf;
    padding:20px 40px 30px 12px;
    display:none;
    align-items:center;
    gap:15px;
    z-index:99999;
    box-shadow:0 -3px 15px rgba(0,0,0,.15);

}

#pg-player audio{

    flex:1;

}

#pg-player-title{
    font-family: "Libre Baskerville", "Baskerville", serif;
    padding-left: 5%;
    font-weight:bold;
    min-width:220px;

}

#pg-close{

    cursor:pointer;
    border:none;
    background:none;
    font-size:22px;

}

.audio-link {
    font-family: "Libre Baskerville", "Baskerville", serif;
    font-size: clamp(15px, 1.05vw, 18px);
    font-style: italic;
    color: var(--pg-red);

    text-decoration: none;

    display: block;
    width: fit-content;

    margin-bottom: 6px;
    padding: 4px 10px 4px 12px;

    border-radius: 6px;

    transition:
        background-color .25s ease,
        color .25s ease,
        transform .2s ease,
        padding-left .2s ease;
}

.audio-link::before {

    content: "▶";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    margin-right: 8px;
    font-size: .8em;
    line-height: 1;
    transform: translateY(1px);
    opacity: .45;
    transition: opacity .2s, transform .2s;

}

.audio-link:hover {
    background: rgba(0, 0, 0, .08);
    color: var(--pg-red);
    padding-left: 8px;
}

.audio-link:hover::before {
    width: 16px;
    opacity: 1;
    margin-right: 4px;
}


.video-container{
    width:100%;
    aspect-ratio:16 / 9;
    padding:20px 0;
    overflow: hidden;
    position: relative;
    background-color: black;
    
}

.video-container iframe{
    width:100%;
    height:100%;
    border:0;
    display:block;
}