/* Estilos compartidos por las seis páginas del sitio. */
:root {
    --fondo: #101914;
    --superficie: #19251e;
    --superficie-clara: #223128;
    --texto: #f5f0df;
    --suave: #c9c9b8;
    --oro: #e3bd72;
    --linea: #3c4a3d;
    --ancho: 1180px
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;    
    background: var(--fondo);
    color: var(--texto);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.65
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle at 85% 0%, #36492e55, transparent 38%), radial-gradient(circle at 0% 70%, #3d352755, transparent 38%)
}

a {
    color: inherit;
    text-decoration: none
}

img {
    display: block;
    max-width: 100%
}

button,
input {
    font: inherit
}

button {
    cursor: pointer
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 3px solid var(--oro);
    outline-offset: 3px
}

.contenedor {
    width: min(calc(100% - 40px), var(--ancho));
    margin-inline: auto
}

.salto {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--oro);
    color: #172018;
    padding: 10px;
    z-index: 20
}

.salto:focus {
    left: 12px
}

.cabecera {
    position: relative;
    z-index: 10;
    border-bottom: 1px solid #b89d6755;
    background: #101914ee
}

.barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 78px;
    gap: 20px
}

.marca {
    display: flex;
    align-items: center;
    font-family: Georgia, serif;
    font-size: 1.25rem;
    font-weight: bold;
    letter-spacing: .02em;
    white-space: nowrap
}

.marca small {
    display: block;
    font: normal .64rem Arial, sans-serif;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--oro)
}

.navegacion {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end
}

.navegacion a {
    padding: 10px 12px;
    border-radius: 4px;
    font-size: .88rem;
    color: var(--suave)
}

.navegacion a:hover,
.navegacion a[aria-current="page"] {
    color: var(--oro);
    background: #e3bd7218
}

.hero {
    display: grid;
    grid-template-columns: 1.04fr .96fr;
    align-items: center;
    gap: 48px;
    padding-block: 70px 84px
}

.hero-texto {
    max-width: 650px
}

.eyebrow {
    color: var(--oro);
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .24em;
    font-weight: bold;
    margin: 0 0 18px
}

.hero h1,
.intro h1 {
    font-family: Georgia, serif;
    font-size: clamp(3rem, 7vw, 6.3rem);
    line-height: 1.02;
    letter-spacing: -.045em;
    margin: 0 0 26px;
    font-weight: normal
}

.hero h1 em {
    color: var(--oro);
    font-style: normal
}

.hero p,
.intro p {
    color: var(--suave);
    font-size: 1.08rem;
    max-width: 58ch
}

.hero-arte {
    position: relative
}

.hero-arte img {
    width: 100%;
    border-radius: 180px 180px 10px 10px;
    border: 1px solid #e3bd7250;
    box-shadow: 0 24px 80px #0009
}

.hero-arte::after {
    content: "✦";
    position: absolute;
    bottom: -24px;
    left: -20px;
    font-size: 4rem;
    color: var(--oro)
}

.botones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px
}

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 20px;
    border: 1px solid var(--oro);
    border-radius: 5px;
    background: var(--oro);
    color: #172018;
    font-weight: bold;
    font-size: .9rem;
    transition: transform .2s, background .2s
}

.boton:hover {
    transform: translateY(-2px);
    background: #f2d29a
}

.boton.secundario {
    background: transparent;
    color: var(--oro)
}

.boton.secundario:hover {
    background: #e3bd7217
}

.seccion {
    padding-block: 55px
}

.seccion h2,
.intro h2 {
    font: normal clamp(2rem, 4vw, 3.4rem)/1.14 Georgia, serif;
    letter-spacing: -.03em;
    margin: 0 0 12px
}

.seccion-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    margin-bottom: 28px
}

.seccion-cabecera p {
    margin: 0;
    color: var(--suave);
    max-width: 55ch
}

.enlace {
    color: var(--oro);
    font-weight: bold;
    white-space: nowrap
}

.enlace:hover {
    text-decoration: underline
}

.historia {
    border-block: 1px solid var(--linea)
}

.historia-contenido {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center
}

.historia p {
    color: var(--suave)
}

.historia .cita {
    font: italic 1.8rem/1.35 Georgia, serif;
    color: var(--oro);
    padding: 35px;
    border-left: 2px solid var(--oro);
    background: #ffffff08
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px
}

.grid.dos {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.tarjeta {
    min-width: 0;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color .2s, transform .2s
}

.tarjeta:hover {
    border-color: #b99b64;
    transform: translateY(-3px)
}

.tarjeta-cuerpo {
    padding: 22px
}

.tarjeta h3 {
    font: normal 1.45rem/1.25 Georgia, serif;
    margin: 0 0 8px
}

.tarjeta p {
    color: var(--suave);
    margin: 0
}

.tarjeta img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    object-position: center;
    background: #27362c
}

.tarjeta img.retrato-vertical {
    aspect-ratio: 4/5;
    object-position: center top
}

.tarjeta .detalle {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--linea)
}

.tarjeta .detalle[hidden] {
    display: none
}

.texto-boton {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--oro);
    font-weight: bold;
    margin-top: 15px
}

.texto-boton:hover {
    text-decoration: underline
}

.etiqueta {
    display: inline-block;
    color: var(--oro);
    font-size: .72rem;
    font-weight: bold;
    letter-spacing: .13em;
    text-transform: uppercase;
    margin-bottom: 10px
}

.casa {
    padding: 24px;
    border-top: 4px solid var(--acento)
}

.gryffindor {
    --acento: #c56756
}

.hufflepuff {
    --acento: #e8c365
}

.ravenclaw {
    --acento: #75a3c6
}

.slytherin {
    --acento: #81ab82
}

.casa h3 {
    display: flex;
    align-items: center;
    gap: 12px
}

.casa .simbolo {
    font-size: 1.8rem;
    color: var(--acento)
}

.casa .fundador {
    font-size: .88rem;
    margin-top: 13px;
    color: var(--texto)
}

.intro {
    padding-block: 66px 38px;
    border-bottom: 1px solid var(--linea)
}

.intro h1 {
    font-size: clamp(2.8rem, 6vw, 5.2rem);
    margin-bottom: 14px
}

.intro p {
    margin: 0 0 22px
}

.intro .numero {
    color: var(--oro);
    font: normal .9rem Georgia, serif
}

.franja {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-block: 28px 16px;
    color: var(--suave);
    font-size: .9rem
}

.franja::before {
    content: "✦";
    color: var(--oro)
}

[hidden] {
    display: none !important
}

.hechizo {
    padding: 25px
}

.hechizo h3 {
    font-size: 1.6rem
}

.hechizo .efecto {
    margin-bottom: 15px
}

.categoria {
    display: inline-block;
    border: 1px solid #e3bd7255;
    border-radius: 99px;
    padding: 4px 10px;
    color: var(--oro);
    font-size: .78rem
}

.dato {
    padding: 27px;
    min-height: 185px
}

.dato .numero {
    font: normal 2rem Georgia, serif;
    color: var(--oro);
    opacity: .7
}

.dato h3 {
    margin-top: 10px
}

.cuestionario {
    max-width: 850px;
    margin-inline: auto
}

.pregunta {
    border: 1px solid var(--linea);
    border-radius: 8px;
    background: var(--superficie);
    padding: 24px;
    margin-bottom: 18px
}

.pregunta legend {
    font: normal 1.28rem Georgia, serif;
    padding: 0 6px
}

.pregunta label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 9px 10px;
    border-radius: 5px;
    color: var(--suave);
    cursor: pointer
}

.pregunta label:hover {
    background: #ffffff0a
}

.pregunta input {
    accent-color: var(--oro);
    margin-top: 6px
}

.pregunta.correcta {
    border-color: #80ad79
}

.pregunta.incorrecta {
    border-color: #c78470
}

.resultado {
    padding: 25px;
    margin-top: 20px;
    border: 1px solid var(--oro);
    border-radius: 8px;
    background: #e3bd7210
}

.resultado h2 {
    margin: 0 0 8px;
    font: normal 1.8rem Georgia, serif
}

.resultado p {
    margin: 0 0 15px;
    color: var(--suave)
}

.pie {
    border-top: 1px solid var(--linea);
    margin-top: 70px;
    padding: 35px 0;
    color: var(--suave);
    font-size: .85rem
}

.pie .contenedor {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap
}

.pie p {
    margin: 0
}

.pie a {
    color: var(--oro)
}


/* El @media(max-width:900px) indica que los cambios se aplicarán cuando la pantalla tenga un ancho de 900 píxeles o menos. */
@media(max-width:900px) {
    /* Cambia la barra principal para que sus elementos se acomoden verticalmente, uno debajo del otro, y agrega espacio interno. */
    .barra {
        align-items: flex-start;
        flex-direction: column;
        padding-block: 14px
    }
    /* Hace que los elementos del menú de navegación comiencen desde la izquierda. */
    .navegacion {
        justify-content: flex-start
    }
    /* Ajusta el espacio interno de los enlaces del menú para que se vean mejor en pantallas pequeñas. */
    .navegacion a {
        padding: 7px 9px
    }
    /* Modifica el espacio entre los elementos de esta sección para que no queden demasiado separados. */
    .hero {
        gap: 24px
    }
    /* Organiza los elementos en dos columnas en lugar de mantener la distribución original. */
    .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

/* Indica que los cambios se aplican cuando la pantalla tiene un ancho de 650 píxeles o menos. */
@media(max-width:650px) {
    /* Ajusta el ancho del contenido para que tenga espacio a los lados y no quede pegado a los bordes de la pantalla. */
    .contenedor {
        width: min(calc(100% - 30px), var(--ancho))
    }
    /*  */
    .hero {
        grid-template-columns: 1fr;
        padding-block: 48px 50px
    }
    /*  */
    .hero-arte {
        max-width: 440px
    }
    /*  */
    .hero-arte img {
        max-height: 380px;
        object-fit: cover
    }
    /*  */
    .historia-contenido {
        grid-template-columns: 1fr;
        gap: 0
    }
    /*  */
    .historia .cita {
        margin: 0 0 30px
    }
    /*  */
    .grid,
    .grid.dos {
        grid-template-columns: 1fr
    }
    /*  */
    .seccion {
        padding-block: 42px
    }
    /*  */
    .seccion-cabecera {
        display: block
    }
    /*  */
    .seccion-cabecera .enlace {
        display: inline-block;
        margin-top: 15px
    }
    /*  */
    .intro {
        padding-block: 45px 28px
    }
    /*  */
    .marca {
        font-size: 1.05rem
    }
}