*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --purple: #5b2179;
    --purple-card: rgba(55, 18, 77, 0.72);
    --teal: #5fb3b0;
    --teal-glow: rgba(95, 179, 176, 0.45);
    --cream: #f4ead2;
    --gold: #ffbe3b;
    --white: #ffffff;
}

html, body { height: 100%; }

body {
    font-family: 'Poppins', sans-serif;
    color: #2a0b3c;
    /* "fixed" (no "scroll") en vez del patrón que usan landing/wizard a propósito —
       esta página es larga, con mucho scroll, y background-attachment:fixed se ve mal
       en iOS Safari en páginas largas (parpadea/se desalinea al hacer scroll). En
       landing/gracias no se nota porque ahí casi no hay scroll. */
    background: var(--purple) url('../img/fondo.webp') center / cover no-repeat scroll;
}

.legal-page {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2rem) 3.5rem;
    overflow-x: hidden;
}

/* Mismas flores decorativas que el resto del sitio (ver crear.css / landing.css),
   pero "absolute" en vez de "fixed" — ancladas al folio de arriba de la página, no al
   viewport. "fixed" aquí (página larga, con mucho scroll) hacía que las flores se
   quedaran flotando encima del texto mientras se hacía scroll, en vez de quedarse
   arriba donde van. */
.flor {
    position: absolute;
    pointer-events: none;
    user-select: none;
    z-index: 1;
    filter: drop-shadow(0 8px 24px rgba(20, 0, 35, .45));
}

.flor--top-der {
    top: -2vw;
    right: -2vw;
    width: clamp(110px, 15vw, 210px);
    transform: rotate(180deg) scaleX(-1);
}

.flor--bot-izq {
    bottom: -2vw;
    left: -2vw;
    width: clamp(90px, 11vw, 160px);
}

.legal-header {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(.5rem, 1.5vw, 1rem);
    max-width: 900px;
    margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
    text-align: center;
}

.legal-header__logo {
    width: clamp(130px, 11vw, 190px);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .25));
}

.legal-header__titulo {
    width: clamp(220px, 20vw, 320px);
    filter: drop-shadow(0 8px 20px rgba(20, 0, 35, .4));
}

.legal-back {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .5rem;
    padding: 0.45rem 1.1rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--white);
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-radius: 6px;
    backdrop-filter: blur(4px);
    text-decoration: none;
    transition: all .2s ease;
}

.legal-back:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--white);
    transform: translateY(-1px);
}

/* Misma tarjeta de vidrio morado que .wz-step en el wizard (crear.css) — una sola
   identidad en todo el sitio, no una página aparte con su propio estilo. */
.legal-card {
    position: relative;
    z-index: 3;
    max-width: 780px;
    margin: 0 auto;
    background: var(--purple-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 24px;
    padding: clamp(1.75rem, 4vw, 3rem);
    box-shadow: 0 24px 60px rgba(15, 0, 25, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.92);
}

.legal-card h1 {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.2rem;
}

.legal-card__subtitulo {
    color: var(--white);
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.legal-card__updated {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin-bottom: 1.75rem;
}

.legal-card h2 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--white);
    margin-top: 2.1rem;
    margin-bottom: 0.7rem;
}

.legal-card h2::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 1.2em;
    flex: none;
    background: linear-gradient(180deg, var(--gold), var(--teal));
    border-radius: 3px;
}

.legal-card p, .legal-card ul {
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.92);
}

.legal-card ul {
    padding-left: 1.4rem;
}

.legal-card li {
    margin-bottom: 0.6rem;
}

.legal-card a {
    color: #9fe2df;
    font-weight: 600;
}

.legal-card__note {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
}

@media (max-width: 540px) {
    .legal-page { padding: 1.25rem 0.85rem 2.5rem; }
}