/* ══════════════════════════════════════════════════════════════
   POLÍTICAS — politicas.css
   Prefijo BEM: pol-
   Sin Bootstrap inline / sin var() no definidas
══════════════════════════════════════════════════════════════ */

/* ── Fondo ── */
.pol-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(160deg,
        var(--color-primary-xlight) 0%,
        #fff 40%,
        #f0f5f9 75%,
        var(--color-primary-xlight) 100%);
    pointer-events: none;
}
.pol-bg__shape {
    position: absolute;
    border-radius: 50%;
    opacity: .06;
    background: var(--color-primary);
}
.pol-bg__shape--1 { width: 500px; height: 500px; top: -120px; left: -140px; }
.pol-bg__shape--2 { width: 320px; height: 320px; bottom: 4%;  right: -80px; }

/* ── Header ── */
.pol-header {
    background: var(--color-navy);
    padding: 40px 24px 36px;

    opacity: 0;
    transform: translateY(-20px);
    transition: opacity .5s ease, transform .5s ease;
}
.pol-header.is-visible { opacity: 1; transform: none; }

.pol-header__inner {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.pol-header__logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 16px;
    background: rgba(255,255,255,.10);
    padding: 8px;
    flex-shrink: 0;

    /* flotante suave */
    animation: polFloat 3s ease-in-out infinite;
}
@keyframes polFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

.pol-header__title {
    font-family: var(--font-primary);
    font-size: 1.9rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
}
.pol-header__sub {
    color: rgba(255,255,255,.55);
    font-size: 0.85rem;
    margin: 0;
}

/* ── Wrap ── */
.pol-wrap {
    max-width: 860px;
    margin: 40px auto 72px;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Tarjeta ── */
.pol-card {
    display: flex;
    gap: 0;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
    overflow: hidden;

    opacity: 0;
    transform: translateY(24px);
    transition: opacity .55s ease, transform .55s ease;
}
.pol-card.is-visible { opacity: 1; transform: none; }

/* Franja lateral */
.pol-card__stripe {
    width: 56px;
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--color-navy) 0%, #006699 100%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 24px;
    color: rgba(255,255,255,.5);
    font-size: 1.1rem;
}

/* Cuerpo */
.pol-card__body {
    flex: 1;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Secciones de contenido ── */
.pol-section {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .45s ease, transform .45s ease;
}
.pol-section.is-visible { opacity: 1; transform: none; }

/* Estilos para el HTML generado por splitSections */
.pol-section h2,
.pol-section h3 {
    font-family: var(--font-primary);
    color: var(--color-navy);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--color-primary-xlight);
}
.pol-section p {
    color: #3a5060;
    font-size: 0.92rem;
    line-height: 1.7;
    margin: 0 0 8px;
}
.pol-section ul,
.pol-section ol {
    padding-left: 20px;
    margin: 0 0 8px;
    color: #3a5060;
    font-size: 0.92rem;
    line-height: 1.7;
}
.pol-section li { margin-bottom: 4px; }
.pol-section strong { color: var(--color-navy); }
.pol-section a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* ── Botón volver ── */
.pol-actions {
    display: flex;
    justify-content: flex-start;

    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s ease, transform .5s ease;
}
.pol-actions.is-visible { opacity: 1; transform: none; }

.pol-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 10px;
    background: var(--color-navy);
    color: #fff;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: filter .2s, transform .15s;
}
.pol-btn:hover  { filter: brightness(1.15); transform: translateY(-2px); color: #fff; }
.pol-btn:active { transform: translateY(0); }

/* ── Responsive ── */
@media (max-width: 600px) {
    .pol-header__title { font-size: 1.4rem; }
    .pol-card__stripe  { width: 36px; font-size: 0.9rem; }
    .pol-card__body    { padding: 20px 16px; }
}

.pol-card__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-navy);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 2px solid var(--color-primary);
}