/* Páginas legales (aviso legal, privacidad, cookies).
   Se carga después de styles.css y reutiliza sus colores y tipografías. */

/* Cabecera compacta: título + introducción, sin imagen ni pantalla completa */
.legal-head {
    padding: 2.5rem 5vw 1.5rem;
    border-bottom: 1px solid var(--line)
}
.legal-head .eyebrow { margin: 0 0 .8rem }
.legal-head h1 {
    max-width: 820px;
    margin: 0;
    font: 500 clamp(2rem, 4vw, 3rem) var(--display);
    letter-spacing: -.06em
}
.legal-head .lead {
    max-width: 720px;
    margin: 1rem 0 0;
    font-size: 1rem
}

/* Texto legal: empieza justo debajo de la cabecera */
.legal { padding: 1.5rem 5vw 6vw }
.legal .faq {
    max-width: 820px;
    margin: 0;
    border-top: 0
}
.legal details { padding: 1.3rem 0 }
.legal summary { font-size: 1.15rem }
.legal details p {
    max-width: none;
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.65
}

/* Enlaces dentro del texto: verde de marca, negrita y subrayado para que se noten */
.legal details p a {
    color: #167D32;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: .2s
}
.legal details p a:hover {
    color: var(--ink);
    text-decoration-thickness: 2px
}

@media (max-width: 650px) {
    .legal-head { padding: 1.8rem 6vw 1.2rem }
    .legal { padding-left: 6vw; padding-right: 6vw }
}

/* ===== Hero de las legales: sin altura mínima y poco espacio hasta la siguiente sección ===== */
.hero-legal {
    min-height: 0;
    padding: 2.5rem 5vw 15px
}
.hero-legal .eyebrow { margin: 0 0 .8rem }
.hero-legal h1 { font-size: clamp(2rem, 4vw, 3rem) }
.hero-legal .lead {
    max-width: 720px;
    margin: 1rem 0 0
}
.hero-legal + hr { margin: 0 }
.legal { padding-top: 15px }
.legal .label { margin-bottom: 1.5rem }

@media (max-width: 650px) {
    .hero-legal { padding: 1.8rem 6vw 15px }
}