:root {
    /* Alias que apuntan a la paleta global de base.css: una sola
       fuente de verdad para el color de marca (consistencia E4). */
    --lp-primario: var(--color-primario);
    --lp-primario-claro: var(--color-primario-claro);
    --lp-acento: var(--color-acento);
    --lp-texto: #1f2933;
    --lp-texto-suave: #4b5563;
    --lp-borde: #d8e0e2;
    --lp-fondo: #f7fbfc;
}

.lp-hero {
    padding: 3rem 1.25rem 2rem;
    /* Color sólido + gradiente: el sólido es el que miden los
       verificadores de contraste (no evalúan gradientes), evitando un
       falso "sin contraste" del texto blanco. */
    background-color: var(--color-primario);
    background-image: linear-gradient(135deg, rgba(5, 65, 80, 0.94), rgba(10, 106, 130, 0.92));
    color: #ffffff;
}

.lp-hero__content {
    max-width: 72rem;
    margin: 0 auto;
}

.lp-hero__eyebrow {
    display: inline-block;
    margin: 0 0 0.8rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lp-hero h1 {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    color: #ffffff;
}

.lp-hero__intro {
    max-width: 45rem;
    margin: 0 0 1.25rem;
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.94);
}

.lp-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.lp-hero__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-weight: 600;
}

.lp-main {
    padding: 2.5rem 1.25rem 3rem;
    background: #ffffff;
}

.lp-layout {
    max-width: 72rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.lp-content,
.lp-sidebar {
    min-width: 0;
}

.lp-card {
    padding: 1.4rem;
    border: 1px solid var(--lp-borde);
    border-radius: 1rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fbfc 100%);
    box-shadow: 0 10px 28px rgba(5, 65, 80, 0.05);
}

.lp-card + .lp-card {
    margin-top: 1rem;
}

.lp-card h2,
.lp-card h3 {
    margin-top: 0;
    color: var(--lp-primario);
}

.lp-card p,
.lp-card li {
    color: var(--lp-texto-suave);
    line-height: 1.75;
}

.lp-card ul {
    padding-left: 1.2rem;
}

.lp-card__list {
    display: grid;
    gap: 0.65rem;
    padding-left: 0;
    margin: 0;
    list-style: none;
}

.lp-card__list li {
    padding: 0.8rem 0.95rem;
    border-radius: 0.75rem;
    background: var(--lp-fondo);
    border: 1px solid var(--lp-borde);
}

.lp-sidebar {
    position: sticky;
    /* IMPORTANTE: la web tiene un header sticky de ~80 px (var
       --alto-header, definida en base.css). Si aquí ponemos "top: 1rem"
       a secas, al hacer scroll el sidebar se pega a 1 rem del borde
       superior de la ventana, JUSTO donde vive el header, y este lo
       tapa por arriba. Compensamos la altura del header + un pequeño
       aire para separarlo visualmente. */
    top: calc(var(--alto-header, 80px) + 1rem);
}

.lp-sidebar__nav {
    padding: 1.2rem;
    border: 1px solid var(--lp-borde);
    border-radius: 1rem;
    background: var(--lp-fondo);
}

.lp-sidebar__nav h2 {
    margin: 0 0 0.9rem;
    font-size: 1.05rem;
    color: var(--lp-primario);
}

.lp-sidebar__nav ul {
    padding-left: 1rem;
    margin: 0;
}

.lp-sidebar__nav li + li {
    margin-top: 0.45rem;
}

.lp-sidebar__nav a {
    color: var(--lp-primario-claro);
    font-weight: 600;
}

.lp-note {
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border-left: 4px solid var(--lp-acento);
    border-radius: 0.6rem;
    background: #fff7e8;
    color: var(--lp-texto);
}

@media (max-width: 900px) {
    .lp-layout {
        grid-template-columns: 1fr;
    }

    .lp-sidebar {
        position: static;
    }
}

@media (max-width: 600px) {
    .lp-hero {
        padding: 2.2rem 1rem 1.4rem;
    }

    .lp-main {
        padding: 1.5rem 1rem 2rem;
    }

    .lp-card {
        padding: 1.15rem;
    }
}


/* Tabla de bases jurídicas de la política de privacidad. Con scroll
   horizontal en móvil para que no rompa el layout, cabeceras en el
   color de marca y filas alternas para escanearla mejor. */
.lp-tabla {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 0.75rem;
    font-size: 0.95rem;
    display: block;
    overflow-x: auto;
    /* En móvil, si no cabe, aparece scroll horizontal SOLO en la
       tabla, no en la página. */
}

.lp-tabla thead {
    background: var(--lp-primario);
    color: #fff;
}

.lp-tabla th,
.lp-tabla td {
    padding: 0.65rem 0.85rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--lp-borde);
}

.lp-tabla th {
    font-weight: 700;
}

.lp-tabla tbody tr:nth-child(even) {
    background: var(--lp-fondo);
}

.lp-tabla strong {
    color: var(--lp-primario);
}

/* Subtítulos de bloque dentro de una tarjeta legal (h3 dentro de
   .lp-card): un poco más discretos que h2 pero claramente separados. */
.lp-card h3 {
    margin: 1.25rem 0 0.4rem;
    color: var(--lp-primario);
    font-size: 1.05rem;
}