/* =========================================================
   EXORA — Páginas legales (privacidad / términos)
   Páginas legales + links legales del footer (se carga en todas las páginas)
   ========================================================= */
:root {
    --legal-accent: #ff1c72;
    --legal-accent-soft: rgba(255, 28, 114, .07);
    --legal-line: rgba(127, 127, 127, .2);
    }

/* ---------- Header de páginas internas ----------
   Mismas clases que el index + .sticky-menu permanente (ver script en
   inc/footer.php). Acá solo se anula el posicionamiento: arriba de todo
   el header queda en su lugar en vez de flotar sobre el contenido. */
.page-inner .transparent-header { position: relative; }
.page-inner #sticky-header.is-static {
    position: relative !important;
    top: auto !important;
    animation: none !important;
    transform: none !important;
    box-shadow: none !important;   /* sin sombra en la posición inicial; vuelve en modo sticky */
}
.page-inner #sticky-header.is-static::before,
.page-inner #sticky-header.is-static::after { box-shadow: none !important; }

/* ---------- Breadcrumb ---------- */
.legal__breadcrumb .breadcrumb { margin-bottom: 18px; }
.legal__updated {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid var(--legal-line);
    border-radius: 100px;
    font-size: 14px;
    color: #11131a;
}
.legal__updated i { font-size: 18px; color: var(--legal-accent); }

/* ---------- Área de contenido ---------- */
.legal__area { padding: 80px 0 100px; }

/* Aside: pestañas + índice (fijo al scrollear en desktop) */
.legal__aside { position: sticky; top: 120px; margin-bottom: 40px; }
.legal__tabs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 30px; }
/*.legal__tab {
    display: block;
    padding: 12px 18px;
    border: 1px solid var(--legal-line);
    border-radius: 8px;
    font-weight: 600;
    color: inherit;
    transition: border-color .2s, background-color .2s, color .2s;
}
.legal__tab:hover { border-color: var(--legal-accent); color: var(--legal-accent); }
.legal__tab.is-active { background: var(--legal-accent); border-color: var(--legal-accent); color: #fff; }*/
.legal__tab {
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: block;
    padding: 12px 18px;
    border: 1px solid var(--legal-line);
    border-radius: 8px;
    font-weight: 600;
    color: rgba(17, 19, 26, .35);
    transition: color .35s ease-out, border-color .35s ease-out;
}

/* Relleno que sube de abajo hacia arriba (mismo efecto que .btn en custom.css) */
.legal__tab::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--legal-accent);
    transform: translateY(101%);
    transition: transform .35s ease-out;
}
.legal__tab:hover,
.legal__tab:focus-visible { color: #fff; border-color: var(--legal-accent); }
.legal__tab:hover::before,
.legal__tab:focus-visible::before { transform: translateY(0); }

/* Activo: igual que un .btn (rosa, y en hover sube el oscuro) */
.legal__tab.is-active { background: var(--legal-accent); border-color: var(--legal-accent); color: #fff; }
.legal__tab.is-active::before { background: #11131a; }
.legal__tab.is-active:hover,
.legal__tab.is-active:focus-visible { border-color: #11131a; }

.legal__toc-title {
    display: block;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--legal-accent);
}
.legal__toc ol { counter-reset: toc; padding: 0; border-left: 1px solid var(--legal-line); }
.legal__toc li { counter-increment: toc; }
.legal__toc a {
    display: block;
    padding: 5px 0 5px 16px;
    margin-left: -1px;
    border-left: 2px solid transparent;
    font-size: 14px;
    line-height: 1.4;
    color: #11131a;
    opacity: .75;
    transition: opacity .2s, color .2s, border-color .2s;
}
.legal__toc a::before { content: counter(toc, decimal-leading-zero) "  "; white-space: pre; opacity: .6; }
.legal__toc a:hover { opacity: 1; color: var(--legal-accent); border-left-color: var(--legal-accent); }

/* Intro */
.legal__intro { font-size: 18px; line-height: 1.7; margin-bottom: 10px; padding-bottom: 30px; border-bottom: 1px solid var(--legal-line); }

/* Secciones */
.legal__item {
    display: flex;
    gap: 22px;
    padding: 34px 0;
    border-bottom: 1px solid var(--legal-line);
    scroll-margin-top: 120px;   /* que el header sticky no tape el título al saltar desde el índice */
}
.legal__item:first-of-type { padding-top: 0; }
.legal__icon {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f6f6f6 !important;
    font-size: 30px;
}
.legal__icon i{
    color: #ff1c72;
}
.legal__body { flex: 1; min-width: 0; }
.legal__title {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 10px 0 14px;
    font-size: 22px;
    line-height: 1.3;
}
.legal__num { font-size: 14px; font-weight: 600; color: var(--legal-accent); letter-spacing: .05em; }
.legal__body p { margin-bottom: 14px; }
.legal__body p:last-child { margin-bottom: 0; }
.legal__body a { color: var(--legal-accent); word-break: break-word; }
.legal__body a:hover { color: #11131a; }

/* Listas con el mismo check del bloque de contacto */
.legal__list { padding: 0; margin: 4px 0 16px; }
.legal__list li { display: flex; gap: 10px; margin-bottom: 10px; line-height: 1.6; }
.legal__list li i { flex: 0 0 auto; margin-top: 4px; font-size: 18px; color: var(--legal-accent); }
.legal__list li span { color: #11131a; }

/* Recuadro destacado */
.legal__note {
    display: flex;
    gap: 12px;
    margin: 18px 0 0;
    padding: 16px 18px;
    border-left: 3px solid var(--legal-accent);
    border-radius: 0 8px 8px 0;
    background: var(--legal-accent-soft);
}
.legal__note i { flex: 0 0 auto; font-size: 22px; color: var(--legal-accent); }
.legal__note p { margin: 0; font-size: 15px; }

/*.legal__contact {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 34px;
    font-weight: 500;
}
.legal__contact i { color: var(--legal-accent); }*/
.legal__contact {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 34px;
}
.legal__contact i {
    flex: 0 0 auto;
    font-size: 24px;
    line-height: 1;
    color: var(--legal-accent);
}
.legal__contact p {
    display: flex;
    flex-wrap: wrap;          /* el correo baja solo si no entra en la misma línea */
    column-gap: .35em;        /* espacio normal entre la pregunta y el correo */
    margin: 0;
    font-weight: 500;
    line-height: 1.5;
}
.legal__contact a {
    color: var(--legal-accent);
    white-space: nowrap;      /* el correo nunca se parte al medio */
}
.legal__contact a:hover{
    color: #11131a;;
}

/* ---------- Links legales en el footer ---------- */
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; padding: 0; margin: 8px 0 0; }
.footer-legal a { font-size: 12px; opacity: .8; transition: opacity .2s, color .2s; }
.footer-legal a:hover { opacity: 1; color: var(--legal-accent); }


/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .legal__area { padding: 50px 0 70px; }
    .legal__aside { position: static; margin-bottom: 20px; }
    .legal__tabs { flex-direction: row; }
    .legal__tab { flex: 1; text-align: center; padding: 10px 12px; font-size: 15px; }
}
@media (max-width: 575.98px) {
    .legal__item { gap: 14px; padding: 26px 0; }
    .legal__icon { flex-basis: 44px; width: 44px; height: 44px; font-size: 24px; border-radius: 10px; }
    .legal__title { font-size: 19px; margin-top: 6px; }
    .footer-legal { gap: 6px 15px;}
}