:root {
    --fuenteHeading: 'PT Sans', sans-serif;
    --fuenteParrafos: 'Open Sans', sans-serif;

    --primario: #181717;
    --gris: #555956;
    --blanco: #f8f5f5fd;
    --negro: #000000;
}
html {
    box-sizing: border-box;
    font-size: 62.5%; /* 1 rem = 10px */    
}
*, *:before, *:after {
    box-sizing: inherit;
}
body {
    font-family: var(--fuenteParrafos);
    font-size: 1.6rem;
    line-height: 2;
}

/** Globales **/
.contenedor {
    width: min(90%, 120rem);
    margin: 0 auto;
}
a {
    text-decoration: none;
}
h1, h2, h3, h4 {
    font-family: var(--fuenteHeading);
    line-height: 1.2;
}
h1 {
    font-size: 4.8rem;
}
h2 {
    font-size: 4rem;
}
h3 {
    font-size: 3.2rem;
}
h4 {
    font-size: 2.8rem;
}
img {
    max-width: 100%;
}
/** Utilidades **/
.no-margin {
    margin: 0;
}
.no-padding {
    padding: 0;
}
.centrar-texto {
    text-align: center;
}

/** Header **/
.webp .header {
    background-image: url(../img/bannernuevo.jpg);
}
.no-webp .header {
    background-image: url(../img/bannernuevo.jpg);
}
.header{
    min-height:100vh;
    background-image:url("../img/bannernuevo.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    display:flex;
    flex-direction:column;
}

.header{
    position:relative;
}

.header::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.60);
}

.header>*{
    position:relative;
    z-index:2;
}

.header__texto{
    flex:1;

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

    text-align:center;
    color:white;

    padding:2rem;
}

.header__texto h2{
    font-size: clamp(3.2rem, 9vw, 7rem);

    text-transform: uppercase;
    letter-spacing: clamp(1px, 0.6vw, 4px);
    line-height: .95;

    max-width: 95%;
    margin: 0 auto;

    overflow-wrap: break-word;
    text-wrap: balance;
}

.header__texto h2{
    text-shadow:
        0 0 15px black,
        3px 3px 8px black;
}

.header__texto p{
    font-size:2.4rem;
}




@media (min-width: 768px) {
    .header__texto {
        margin-top: 15rem;
    }
}
.barra {
    padding-top: 4rem;
}

@media (min-width: 768px) {
    .barra {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
.logo {
    color: var(--blanco);
}
.logo{
    text-shadow:
        3px 3px 0 #000,
        0 0 20px rgba(255,255,255,.25);
}



.logo__nombre {
    font-weight: 400;
}
.logo__bold {
    font-weight: 700;
}
@media (min-width: 768px) {
    .navegacion {
        display: flex;
        gap: 2rem;
    }
}
.navegacion__enlace {
    display: block;
    text-align: center;
    font-size: 1.8rem;
    color: var(--blanco);
}

@media (min-width: 768px) {
    .contenido-principal {
        display: grid;
        grid-template-columns: 2fr 1fr;
        column-gap: 4rem;
    }
}

.entrada {
    border-bottom: 1px solid var(--gris);
    margin-bottom: 2rem;
}
.entrada:last-of-type {
    border: none;
    margin-bottom: 0;
}
.boton {
    display: block;
    font-family: var(--fuenteHeading);
    color: var(--blanco);
    text-align: center;
    padding: 1rem 3rem;
    font-size: 1.8rem;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2rem;
    border:2px solid #fff;
}

@media (min-width: 768px) {
    .boton {
        display: inline-block;

    }
}
.boton:hover {
    cursor: pointer;
    background:#fff;
    color:#000;
}
.boton--primario {
    
    background:#111;
    color:#fff;
}
.boton--secundario {
    background:#111;
    color:#fff;
}

.cursos {
    list-style: none;
}

.widget-curso {
    border-bottom: 1px solid var(--gris);
    margin-bottom: 2rem;
}
.widget-curso:last-of-type {
    border: none;
    margin-bottom: 0;
}
.widget-curso__label {
    font-family: var(--fuenteHeading);
    font-weight: bold;
}
.widget-curso__info {
    font-weight: normal;
}
.widget-curso__label,
.widget-curso__info {
    font-size: 2rem;
}

.footer {
    background-color: var(--negro);
    padding-bottom: 3rem;
    margin-top: 4rem;
}

/** Sobre Nosotros **/
@media (min-width: 768px) {
    .sobre-nosotros {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 2rem;
    }
}

/** Cursos **/
.curso {
    padding: 3rem 0;
    border-bottom: 1px solid var(--gris);
}
@media (min-width: 768px) {
    .curso {
        display: grid;
        grid-template-columns: 1fr 2fr;
        column-gap: 2rem;
    }
}
.curso:last-of-type {
   border: none;
}
.curso__label {
    font-family: var(--fuenteHeading);
    font-weight: bold;
}
.curso__info {
    font-weight: normal;
}
.curso__label,
.curso__info {
    font-size: 2rem;
}

/** Contacto **/
.contacto-bg {
    background-image: url(../img/bannernuevo.jpg);
    height: 20rem;
    background-size: cover;
    background-repeat: no-repeat;
}

.formulario {
    background-color: var(--blanco);
    margin: -5rem auto 0 auto;
    width: 95%;
    padding: 5rem;
}
.campo {
    display: flex;
    margin-bottom: 2rem;
}
.campo__label {
    flex: 0 0 9rem;
    text-align: right;
    padding-right: 2rem;
}
.campo__field {
    flex: 1;
    border: 1px solid var(--gris);
}
.campo__field--textarea {
    height: 20rem;
}

.radio-card{

    background:#090909;

    border-left:8px solid white;

    border-right:2px solid white;

    border-top:2px solid white;

    border-bottom:6px solid white;

    padding:35px;

    transform:rotate(-0.8deg);

    margin:60px auto;

}

.radio-card::before{

    content:"";

    position:absolute;

    top:-6px;
    left:-6px;
    right:-6px;
    bottom:-6px;

    border:2px dashed rgba(255,255,255,.35);

    pointer-events:none;

}

.radio-card iframe{

    transform:rotate(.8deg);

}

.radio-title{

    text-transform:uppercase;

    letter-spacing:8px;

    font-size:3.2rem;

    font-weight:900;

    color:white;

    text-shadow:

        -2px 0 black,
        2px 0 black,
        0 -2px black,
        0 2px black,

        4px 4px rgba(255,255,255,.15);

}

.radio-card{

    transition:.3s;

}

.radio-card:hover{

    border-color:white;

    box-shadow:
        0 0 40px rgba(255,255,255,.20);

    transform:translateY(-3px);

}

.radio-card::after{

    content:"";

    position:absolute;

    width:120px;

    height:28px;

    background:rgba(255,255,255,.08);

    top:-12px;

    right:40px;

    transform:rotate(10deg);

}


/* =====================================================
   CONTENEDOR PRINCIPAL
   ===================================================== */

   .contenedor{
    width:90%;
    max-width:1200px;
    margin:0 auto;
}

/* =====================================================
   CENTRAR EL CONTENIDO DEL MAIN
   ===================================================== */

.contenido-principal{
    display:flex;
    flex-direction:column;
    align-items:center;
}

/* Limita el ancho del contenido */
.blog{
    width:100%;
    max-width:900px;
}

/* =====================================================
   CENTRAR IMÁGENES
   ===================================================== */

.entrada__imagen,
.sobre-nosotros__imagen{
    text-align:center;
}

.entrada__imagen img,
.sobre-nosotros__imagen img{
    display:block;
    margin:0 auto;
}

/* =====================================================
   CENTRAR IFRAMES
   ===================================================== */

iframe{
    display:block;
    margin:0 auto;
    max-width:100%;
}

/* =====================================================
   TARJETA DE LA RADIO
   ===================================================== */

.radio-card{
    width:100%;
    max-width:900px;
    margin:5rem auto;
}

/* =====================================================
   TÍTULOS
   ===================================================== */

h1,
h2,
h3,
h4{
    text-align:center;
}

/* =====================================================
   PÁRRAFOS
   ===================================================== */

.blog p,
.sobre-nosotros__texto p{
    max-width:750px;
    margin-left:auto;
    margin-right:auto;
}

.radio-title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;

    color: #fff;
    text-align: center;
    text-transform: uppercase;
}

.radio-play {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    width: 6rem;
    height: 6rem;

    padding: 0;
    border: 3px solid #fff;
    border-radius: 50%;

    background: #000;
    color: #fff;

    font-family: inherit;
    font-size: 2.5rem;
    line-height: 1;

    cursor: pointer;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.radio-play:hover {
    background: #fff;
    color: #000;
    transform: rotate(-3deg) scale(1.08);
}

.radio-play:focus-visible {
    outline: 3px dashed #fff;
    outline-offset: 5px;
}

.radio-play.is-playing {
    background: #fff;
    color: #000;

    box-shadow:
        4px 4px 0 #555,
        -2px -2px 0 #fff;
}


.now-playing {
    display: flex;
    align-items: center;
    gap: 2rem;

    width: 100%;
    max-width: 650px;

    margin: 2rem auto;
    padding: 1.5rem;

    border: 2px dashed #fff;
    background-color: #000;
    color: #fff;
}

.song-artwork {
    width: 140px;
    height: 140px;

    flex-shrink: 0;
    object-fit: cover;

    border: 3px solid #fff;
    filter: grayscale(100%) contrast(120%);
}

.song-info {
    flex: 1;
    min-width: 0;
}

.now-playing-label {
    margin: 0 0 1rem;

    font-family: 'Special Elite', cursive;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
}

.song-title {
    margin: 0 0 0.5rem;

    font-size: 2.4rem;
    font-weight: bold;
    overflow-wrap: anywhere;
}

.song-artist {
    margin: 0 0 1rem;

    font-size: 2rem;
}

.song-detail {
    margin: 0.3rem 0;

    font-size: 1.5rem;
    opacity: 0.8;
}

.radio-audio {
    display: block;

    width: 100%;
    max-width: 650px;

    margin: 2rem auto 0;
}

@media (max-width: 600px) {
    .now-playing {
        flex-direction: column;
        text-align: center;
    }

    .song-artwork {
        width: 180px;
        height: 180px;
    }
}

.social-buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:1.5rem;

    margin-top:3rem;
}

.social-buttons .boton{
    margin:0;
}

.schedule-card{
    max-width:900px;
    margin:5rem auto;

    padding:3rem;

    background:#090909;

    border-left:8px solid #fff;
    border-right:2px solid #fff;
    border-top:2px solid #fff;
    border-bottom:6px solid #fff;

    text-align:center;
}

.schedule-frame{
    display:block;

    width:100%;
    height:850px;

    margin:2rem auto 0;

    border:none;
}