@charset "utf-8";

/* ==============================================================
   EMAPASR-EP
   LOTAIP - CSS DE PÁGINAS ANUALES Y MENSUALES

   Archivo:
   assets/css/lotaip.css

   CONTIENE:

   1. PÁGINAS ANUALES
      Prefijo: .nlotaip-*

   2. PÁGINAS MENSUALES
      Prefijo: .lotaip-month-*
      .lotaip-transparency-*
      .lotaip-small-*
      .lotaip-passive-*
      .lotaip-download-*

   IMPORTANTE:
   Este archivo NO controla la página padre nlotaip.html.

   La página padre utiliza:
   assets/css/lotaip_padre.css
==============================================================*/


/* ==============================================================
   ==============================================================
   BLOQUE 1
   LOTAIP - PÁGINAS ANUALES
   Prefijo: .nlotaip-*
   ==============================================================
============================================================== */


/* ==============================================================
   CONTENEDOR GENERAL
============================================================== */

.nlotaip-page {

    width: 100%;

    padding: 48px 20px 75px;

    background:
        linear-gradient(
            180deg,
            #f8fbfd 0%,
            #ffffff 48%,
            #f7fafc 100%
        );

    font-family:
        "Open Sans",
        Arial,
        sans-serif;

    color: #1e293b;
}


.nlotaip-container {

    width: 100%;

    max-width: 1180px;

    margin: 0 auto;
}


/* ==============================================================
   HERO ANUAL
============================================================== */

.nlotaip-hero {

    position: relative;

    overflow: hidden;

    min-height: 235px;

    display: flex;

    align-items: center;

    padding: 42px 52px;

    border-radius: 22px;

    background:
        linear-gradient(
            120deg,
            #003b70 0%,
            #005aa9 56%,
            #087dbb 100%
        );

    box-shadow:
        0 18px 45px
        rgba(0,75,130,0.16);
}


/* círculo superior */

.nlotaip-hero::before {

    content: "";

    position: absolute;

    width: 440px;
    height: 440px;

    right: -190px;
    top: -285px;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.055);

    pointer-events: none;
}


/* círculo inferior */

.nlotaip-hero::after {

    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    left: -240px;
    bottom: -290px;

    border-radius: 50%;

    border:
        1px solid
        rgba(255,255,255,0.09);

    pointer-events: none;
}


/* ==============================================================
   DECORACIONES DEL HERO
============================================================== */

.nlotaip-hero-decoration {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.nlotaip-decoration-one {

    width: 150px;
    height: 150px;

    right: 145px;
    top: 35px;

    border:
        1px solid
        rgba(255,255,255,0.08);
}


.nlotaip-decoration-one::after {

    content: "";

    position: absolute;

    width: 45px;
    height: 45px;

    right: -75px;
    bottom: 8px;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.055);
}


.nlotaip-decoration-two {

    width: 75px;
    height: 75px;

    right: 35px;
    bottom: 25px;

    border:
        1px solid
        rgba(255,255,255,0.06);
}


/* ==============================================================
   CONTENIDO DEL HERO
============================================================== */

.nlotaip-hero-content {

    position: relative;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 23px;
}


.nlotaip-hero-icon {

    width: 74px;
    height: 74px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 19px;

    background:
        rgba(255,255,255,0.12);

    border:
        1px solid
        rgba(255,255,255,0.19);

    color: #ffffff;

    font-size: 28px;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,0.10);

    backdrop-filter:
        blur(6px);
}


.nlotaip-hero-text {

    position: relative;

    z-index: 5;

    max-width: 740px;
}


.nlotaip-eyebrow {

    display: inline-block;

    margin-bottom: 7px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

    color:
        rgba(255,255,255,0.72);
}


.nlotaip-hero h1 {

    margin: 0;

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size: 40px;

    line-height: 1.1;

    font-weight: 800;

    color: #ffffff;
}


.nlotaip-hero-text p {

    margin: 11px 0 0;

    font-size: 14px;

    line-height: 1.6;

    color:
        rgba(255,255,255,0.83);
}


/* ==============================================================
   AÑO DECORATIVO DEL HERO ANUAL
   2025

   Se mantiene visible a la derecha del encabezado,
   pero como elemento secundario y elegante.
============================================================== */

.nlotaip-year-mark {

    position: absolute;

    z-index: 2;

    right: 58px;

    top: 50%;

    transform:
        translateY(-50%)
        rotate(-5deg);

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size: 76px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -3px;

    color:
        rgba(255,255,255,0.13);

    text-shadow:
        0 2px 12px
        rgba(0,0,0,0.04);

    pointer-events: none;

    white-space: nowrap;
}


/* ==============================================================
   MARCA DECORATIVA DEL HERO
   Compatibilidad con versiones anteriores
============================================================== */

.nlotaip-hero-mark {

    position: absolute;

    z-index: 2;

    right: 55px;
    bottom: 20px;

    width: 112px;
    height: 112px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    border:
        1px solid
        rgba(255,255,255,0.07);

    color:
        rgba(255,255,255,0.055);

    font-size: 54px;

    pointer-events: none;
}


/* ==============================================================
   REFERENCIA / MARCO DE TRANSPARENCIA
============================================================== */

.nlotaip-reference {

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    gap: 20px;

    margin: 30px 0 34px;

    padding: 22px 24px;

    background: #ffffff;

    border:
        1px solid
        #e2e8f0;

    border-left:
        4px solid
        #00a7d8;

    border-radius: 16px;

    box-shadow:
        0 9px 28px
        rgba(0,67,125,0.065);
}


.nlotaip-reference::after {

    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    right: -110px;
    top: -105px;

    border-radius: 50%;

    border:
        1px solid
        rgba(0,167,216,0.09);

    pointer-events: none;
}


.nlotaip-reference-icon {

    position: relative;

    z-index: 2;

    width: 51px;
    height: 51px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: #e9f8fc;

    color: #005aa9;

    font-size: 19px;
}


.nlotaip-reference-content {

    position: relative;

    z-index: 2;

    flex: 1;
}


.nlotaip-reference-label {

    display: block;

    margin-bottom: 4px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.6px;

    color: #00a7d8;
}


.nlotaip-reference-content h2 {

    margin: 0 0 5px;

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size: 19px;

    line-height: 1.3;

    font-weight: 700;

    color: #1e293b;
}


.nlotaip-reference-content p {

    margin: 0;

    font-size: 12.5px;

    line-height: 1.65;

    color: #64748b;
}


.nlotaip-reference-badge {

    position: relative;

    z-index: 3;

    width: 60px;
    height: 60px;

    flex-shrink: 0;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #effbfd,
            #f8fcfd
        );

    border:
        1px solid
        #d8edf3;

    color: #005aa9;
}


.nlotaip-reference-badge i {

    margin-bottom: 4px;

    font-size: 15px;
}


.nlotaip-reference-badge span {

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;
}


/* ==============================================================
   SECCIÓN DE MESES
============================================================== */

.nlotaip-month-section {

    margin-top: 5px;
}


.nlotaip-section-heading {

    display: flex;

    align-items: center;

    gap: 19px;

    margin-bottom: 7px;
}


.nlotaip-section-title {

    flex-shrink: 0;
}


.nlotaip-section-title > span {

    display: block;

    margin-bottom: 4px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.6px;

    color: #00a7d8;
}


.nlotaip-section-title h2 {

    margin: 0;

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size: 23px;

    line-height: 1.2;

    font-weight: 700;

    color: #1e293b;
}


.nlotaip-section-line {

    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            #dce5eb,
            transparent
        );
}


.nlotaip-month-counter {

    display: flex;

    align-items: baseline;

    gap: 5px;

    flex-shrink: 0;

    padding-left: 5px;
}


.nlotaip-month-counter strong {

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size: 24px;

    line-height: 1;

    font-weight: 800;

    color: #005aa9;
}


.nlotaip-month-counter span {

    font-size: 10px;

    font-weight: 700;

    color: #94a3b8;

    text-transform: uppercase;

    letter-spacing: 0.8px;
}


.nlotaip-section-description {

    margin: 0 0 20px;

    font-size: 12.5px;

    line-height: 1.6;

    color: #64748b;
}


/* ==============================================================
   GRID DE MESES
============================================================== */

.nlotaip-months {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 13px;
}


/* ==============================================================
   TARJETA DE MES
============================================================== */

.nlotaip-month {

    position: relative;

    overflow: hidden;

    min-height: 82px;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 12px 14px 12px 13px;

    text-decoration: none !important;

    background: #ffffff;

    border:
        1px solid
        #e2e8f0;

    border-radius: 13px;

    box-shadow:
        0 5px 18px
        rgba(0,67,125,0.045);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


.nlotaip-month::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 3px;
    height: 100%;

    background: #dceef4;

    transition:
        background 0.25s ease;
}


.nlotaip-month:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(0,90,169,0.22);

    box-shadow:
        0 13px 30px
        rgba(0,67,125,0.11);

    background: #fbfdfe;
}


.nlotaip-month:hover::before {

    background:
        linear-gradient(
            180deg,
            #00a7d8,
            #18b7b0
        );
}


/* ==============================================================
   NÚMERO DEL MES
============================================================== */

.nlotaip-month-number {

    width: 40px;
    height: 40px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #eef9fc,
            #e8f6fa
        );

    color: #005aa9;

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size: 13px;

    font-weight: 800;

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}


.nlotaip-month:hover .nlotaip-month-number {

    transform:
        scale(1.06);

    background:
        #dff5fa;
}


/* ==============================================================
   ICONO DEL MES
============================================================== */

.nlotaip-month-icon {

    width: 39px;
    height: 39px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: #f2f8fb;

    color: #087dbb;

    font-size: 14px;

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}


.nlotaip-month:hover .nlotaip-month-icon {

    transform:
        scale(1.05);

    background:
        #e9f8fc;
}


/* ==============================================================
   INFORMACIÓN DEL MES
============================================================== */

.nlotaip-month-info {

    flex: 1;

    min-width: 0;
}


.nlotaip-month-info strong {

    display: block;

    margin-bottom: 3px;

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size: 15px;

    line-height: 1.25;

    font-weight: 700;

    color: #334155;

    transition:
        color 0.25s ease;
}


.nlotaip-month:hover
.nlotaip-month-info strong {

    color: #005aa9;
}


.nlotaip-month-info span {

    display: block;

    font-size: 10px;

    line-height: 1.4;

    color: #94a3b8;
}


/* ==============================================================
   FLECHA DEL MES
============================================================== */

.nlotaip-month-arrow {

    width: 29px;
    height: 29px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f1f5f9;

    color: #94a3b8;

    font-size: 13px;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        color 0.25s ease;
}


.nlotaip-month:hover .nlotaip-month-arrow {

    transform:
        translateX(3px);

    background:
        #e9f8fc;

    color:
        #005aa9;
}


/* ==============================================================
   PIE INFORMATIVO ANUAL
============================================================== */

.nlotaip-footer-note {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 36px;

    padding: 17px 21px;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #eef8fc,
            #f9fcfd
        );

    border:
        1px solid
        #dceef4;
}


.nlotaip-footer-icon {

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background: #ffffff;

    color: #00a7d8;

    font-size: 16px;

    box-shadow:
        0 5px 15px
        rgba(0,100,140,0.07);
}


.nlotaip-footer-note strong {

    display: block;

    margin-bottom: 3px;

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size: 12px;

    color: #005aa9;
}


.nlotaip-footer-note span {

    display: block;

    font-size: 10.5px;

    line-height: 1.55;

    color: #64748b;
}


/* ==============================================================
   RESPONSIVE - ANUAL
============================================================== */

@media (max-width: 991px) {

    .nlotaip-hero {

        padding:
            38px 40px;
    }


    .nlotaip-hero h1 {

        font-size:
            35px;
    }


    .nlotaip-hero-mark {

        right:
            35px;

        width:
            90px;

        height:
            90px;

        font-size:
            45px;
    }


    /* AÑO 2025 */

    .nlotaip-year-mark {

        right:
            35px;

        font-size:
            62px;

        letter-spacing:
            -2px;
    }

}


@media (max-width: 767px) {

    .nlotaip-page {

        padding:
            30px 15px 55px;
    }


    .nlotaip-hero {

        min-height:
            215px;

        padding:
            32px 25px;
    }


    .nlotaip-hero-icon {

        width:
            62px;

        height:
            62px;

        border-radius:
            16px;

        font-size:
            23px;
    }


    .nlotaip-hero h1 {

        font-size:
            31px;
    }


    .nlotaip-hero-mark {

        right:
            20px;

        bottom:
            15px;

        width:
            75px;

        height:
            75px;

        font-size:
            38px;
    }


    /* AÑO 2025 */

    .nlotaip-year-mark {

        right:
            22px;

        font-size:
            48px;

        letter-spacing:
            -1.5px;

        opacity:
            0.75;
    }


    .nlotaip-reference-badge {

        display:
            none;
    }


    .nlotaip-months {

        grid-template-columns:
            1fr;
    }

}


@media (max-width: 480px) {

    .nlotaip-hero {

        padding:
            28px 21px;
    }


    .nlotaip-hero-content {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            14px;
    }


    .nlotaip-hero h1 {

        font-size:
            28px;
    }


    .nlotaip-eyebrow {

        font-size:
            9px;

        letter-spacing:
            1.4px;
    }


    .nlotaip-hero-text p {

        font-size:
            12.5px;
    }


    /* AÑO 2025 */

    .nlotaip-year-mark {

        right:
            15px;

        bottom:
            18px;

        top:
            auto;

        transform:
            rotate(-5deg);

        font-size:
            38px;

        letter-spacing:
            -1px;
    }


    .nlotaip-hero-mark {

        right:
            -5px;

        bottom:
            10px;

        width:
            65px;

        height:
            65px;

        font-size:
            32px;
    }


    .nlotaip-reference {

        align-items:
            flex-start;

        gap:
            13px;

        padding:
            18px;
    }


    .nlotaip-reference-icon {

        width:
            44px;

        height:
            44px;

        font-size:
            17px;
    }


    .nlotaip-reference-content h2 {

        font-size:
            16px;
    }


    .nlotaip-reference-content p {

        font-size:
            11.5px;
    }


    .nlotaip-section-heading {

        gap:
            10px;

        align-items:
            flex-end;
    }


    .nlotaip-section-title h2 {

        font-size:
            20px;
    }


    .nlotaip-month-counter {

        display:
            none;
    }


    .nlotaip-month {

        min-height:
            72px;

        gap:
            8px;

        padding:
            10px 10px 10px 9px;
    }


    .nlotaip-month-number {

        width:
            36px;

        height:
            36px;

        font-size:
            12px;
    }


    .nlotaip-month-icon {

        width:
            35px;

        height:
            35px;

        font-size:
            13px;
    }


    .nlotaip-month-info strong {

        font-size:
            14px;
    }


    .nlotaip-month-info span {

        font-size:
            9px;
    }


    .nlotaip-month-arrow {

        width:
            25px;

        height:
            25px;
    }


    .nlotaip-footer-note {

        align-items:
            flex-start;

        padding:
            16px;
    }

}


/* ==============================================================
   ==============================================================
   BLOQUE 2
   LOTAIP - PÁGINAS MENSUALES

   Prefijos:
   .lotaip-month-*
   .lotaip-transparency-*
   .lotaip-small-*
   .lotaip-passive-*
   .lotaip-download-*
   ==============================================================
============================================================== */


/* ==============================================================
   CONTENEDOR GENERAL
============================================================== */

.lotaip-month-page {

    width: 100%;

    padding: 50px 20px 80px;

    background:
        linear-gradient(
            180deg,
            #f8fbfd 0%,
            #ffffff 45%,
            #f7fafc 100%
        );

    font-family:
        "Open Sans",
        Arial,
        sans-serif;

    color: #1e293b;
}


.lotaip-month-container {

    width: 100%;

    max-width: 1180px;

    margin: 0 auto;
}


/* ==============================================================
   BANNER SUPERIOR MENSUAL
============================================================== */

.lotaip-month-hero {

    position: relative;

    overflow: hidden;

    min-height: 270px;

    display: flex;

    align-items: center;

    padding: 44px 55px;

    border-radius: 22px;

    background:
        linear-gradient(
            120deg,
            #003b70 0%,
            #005aa9 55%,
            #087dbb 100%
        );

    box-shadow:
        0 18px 45px
        rgba(0,75,130,0.17);
}


.lotaip-month-hero::before {

    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    right: -175px;
    top: -270px;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.065);

    pointer-events: none;
}


.lotaip-month-hero::after {

    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    right: 60px;
    bottom: -285px;

    border-radius: 50%;

    border:
        1px solid
        rgba(255,255,255,0.10);

    pointer-events: none;
}


/* ==============================================================
   EFECTO AGUA
============================================================== */

.lotaip-month-hero-water {

    position: absolute;

    left: -110px;
    bottom: -145px;

    width: 430px;
    height: 240px;

    border-radius: 50%;

    background:
        rgba(0,180,220,0.14);

    transform:
        rotate(-8deg);

    pointer-events: none;
}


/* ==============================================================
   CÍRCULOS DECORATIVOS
============================================================== */

.lotaip-month-circle {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.lotaip-month-circle.circle-one {

    width: 86px;
    height: 86px;

    right: 235px;
    top: 35px;

    border:
        1px solid
        rgba(255,255,255,0.10);
}


.lotaip-month-circle.circle-two {

    width: 45px;
    height: 45px;

    right: 175px;
    top: 120px;

    background:
        rgba(255,255,255,0.05);
}


/* ==============================================================
   CONTENIDO DEL BANNER MENSUAL
============================================================== */

.lotaip-month-hero-content {

    position: relative;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 24px;
}


.lotaip-month-hero-icon {

    width: 78px;
    height: 78px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 20px;

    background:
        rgba(255,255,255,0.13);

    border:
        1px solid
        rgba(255,255,255,0.20);

    color: #ffffff;

    font-size: 29px;

    backdrop-filter:
        blur(8px);
}


.lotaip-month-hero-text {

    max-width: 760px;
}


.lotaip-month-eyebrow {

    display: inline-block;

    margin-bottom: 7px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

    color:
        rgba(255,255,255,0.73);
}


.lotaip-month-hero h1 {

    margin: 0;

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size: 40px;

    line-height: 1.1;

    font-weight: 800;

    color: #ffffff;
}


.lotaip-month-hero-text p {

    margin: 12px 0 14px;

    font-size: 15px;

    line-height: 1.6;

    color:
        rgba(255,255,255,0.84);
}


/* ==============================================================
   INDICADOR DEL MES
============================================================== */

.lotaip-month-current {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 8px 14px;

    border-radius: 30px;

    background:
        rgba(255,255,255,0.12);

    border:
        1px solid
        rgba(255,255,255,0.18);

    color: #ffffff;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.7px;
}


.lotaip-month-current i {

    color:
        #7de2ed;
}


/* ==============================================================
   AÑO DECORATIVO MENSUAL
============================================================== */

.lotaip-month-mark {

    position: absolute;

    z-index: 2;

    right: 75px;
    bottom: 12px;

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size: 135px;

    line-height: 1;

    font-weight: 800;

    color:
        rgba(255,255,255,0.055);

    transform:
        rotate(-8deg);

    pointer-events: none;
}


/* ==============================================================
   INTRODUCCIÓN MENSUAL
============================================================== */

.lotaip-month-intro {

    display: flex;

    align-items: center;

    gap: 20px;

    margin: 34px 0 28px;

    padding: 21px 24px;

    background: #ffffff;

    border:
        1px solid
        #e2e8f0;

    border-left:
        4px solid
        #00a7d8;

    border-radius: 16px;

    box-shadow:
        0 10px 35px
        rgba(0,67,125,0.08);
}


.lotaip-month-intro-icon {

    width: 50px;
    height: 50px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: #e9f8fc;

    color: #005aa9;

    font-size: 19px;
}


.lotaip-month-kicker {

    display: block;

    margin-bottom: 4px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.7px;

    color: #00a7d8;
}


.lotaip-month-intro h2 {

    margin: 0 0 4px;

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size: 18px;

    line-height: 1.35;

    font-weight: 700;

    color: #1e293b;
}


.lotaip-month-intro p {

    margin: 0;

    font-size: 13px;

    line-height: 1.65;

    color: #64748b;
}


/* ==============================================================
   TRANSPARENCIA ACTIVA
============================================================== */

.lotaip-transparency-main {

    margin-bottom: 14px;
}


.lotaip-transparency-card {

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    gap: 20px;

    min-height: 120px;

    padding: 23px 26px;

    text-decoration: none !important;

    background: #ffffff;

    border:
        1px solid
        #dce8ef;

    border-left:
        4px solid
        #005aa9;

    border-radius: 16px;

    box-shadow:
        0 9px 25px
        rgba(0,67,125,0.075);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


.lotaip-transparency-card::after {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -100px;
    top: -90px;

    border-radius: 50%;

    border:
        1px solid
        rgba(0,167,216,0.10);

    pointer-events: none;
}


.lotaip-transparency-card:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 16px 35px
        rgba(0,67,125,0.14);

    border-color:
        rgba(0,90,169,0.28);
}


.lotaip-card-icon {

    width: 57px;
    height: 57px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 15px;

    background: #e9f8fc;

    color: #005aa9;

    font-size: 21px;
}


.lotaip-card-content {

    position: relative;

    z-index: 2;

    flex: 1;
}


.lotaip-card-label {

    display: block;

    margin-bottom: 4px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;

    color: #00a7d8;
}


.lotaip-card-content h3 {

    margin: 0 0 5px;

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size: 21px;

    font-weight: 700;

    color: #00447f;
}


.lotaip-card-content p {

    margin: 0;

    font-size: 13px;

    line-height: 1.6;

    color: #64748b;
}


.lotaip-card-arrow {

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f1f5f9;

    color: #64748b;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}


.lotaip-transparency-card:hover
.lotaip-card-arrow {

    background:
        #e9f8fc;

    color:
        #005aa9;

    transform:
        translateX(3px);
}


/* ==============================================================
   FOCALIZADA + COLABORATIVA
============================================================== */

.lotaip-secondary-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 14px;

    margin-bottom: 30px;
}


.lotaip-small-card {

    position: relative;

    display: flex;

    align-items: center;

    gap: 15px;

    min-height: 105px;

    padding: 18px 19px;

    text-decoration: none !important;

    background: #ffffff;

    border:
        1px solid
        #e2e8f0;

    border-radius: 14px;

    box-shadow:
        0 6px 20px
        rgba(0,67,125,0.055);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


.lotaip-small-card:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(0,167,216,0.30);

    box-shadow:
        0 13px 28px
        rgba(0,67,125,0.12);
}


.lotaip-small-icon {

    width: 45px;
    height: 45px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #eef9fc;

    color: #005aa9;

    font-size: 17px;

    transition:
        transform .25s ease,
        background .25s ease;
}


.lotaip-small-card:hover
.lotaip-small-icon {

    transform:
        scale(1.05);

    background:
        #dff7fa;
}


.lotaip-small-content {

    flex: 1;
}


.lotaip-small-content > span {

    display: block;

    margin-bottom: 4px;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.2px;

    color: #00a7d8;
}


.lotaip-small-content h3 {

    margin: 0 0 4px;

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size: 16px;

    line-height: 1.3;

    font-weight: 700;

    color: #334155;
}


.lotaip-small-content p {

    margin: 0;

    font-size: 11px;

    line-height: 1.5;

    color: #64748b;
}


.lotaip-small-arrow {

    width: 29px;
    height: 29px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f1f5f9;

    color: #64748b;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}


.lotaip-small-card:hover
.lotaip-small-arrow {

    background:
        #e9f8fc;

    color:
        #005aa9;

    transform:
        translateX(3px);
}


/* ==============================================================
   TRANSPARENCIA PASIVA
============================================================== */

.lotaip-passive-section {

    padding: 27px 29px 29px;

    background:
        linear-gradient(
            135deg,
            #f5fbfd 0%,
            #ffffff 100%
        );

    border:
        1px solid
        #dceef4;

    border-radius: 18px;

    box-shadow:
        0 9px 28px
        rgba(0,67,125,0.065);
}


.lotaip-passive-header {

    display: flex;

    align-items: flex-start;

    gap: 17px;

    margin-bottom: 22px;
}


.lotaip-passive-icon {

    width: 51px;
    height: 51px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: #ffffff;

    color: #005aa9;

    font-size: 19px;

    box-shadow:
        0 5px 16px
        rgba(0,80,130,0.07);
}


.lotaip-passive-header span {

    display: block;

    margin-bottom: 4px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;

    color: #00a7d8;
}


.lotaip-passive-header h2 {

    margin: 0 0 5px;

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size: 21px;

    font-weight: 700;

    color: #00447f;
}


.lotaip-passive-header p {

    margin: 0;

    font-size: 12px;

    line-height: 1.6;

    color: #64748b;
}


/* ==============================================================
   DESCARGAS
============================================================== */

.lotaip-download-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;
}


.lotaip-download-card {

    position: relative;

    display: flex;

    align-items: center;

    gap: 11px;

    min-height: 84px;

    padding: 14px;

    text-decoration: none !important;

    background: #ffffff;

    border:
        1px solid
        #e2e8f0;

    border-radius: 12px;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


.lotaip-download-card:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(0,90,169,0.25);

    box-shadow:
        0 11px 25px
        rgba(0,67,125,0.11);
}


.lotaip-download-number {

    position: absolute;

    top: 7px;
    right: 9px;

    font-size: 8px;

    font-weight: 800;

    color: #cbd5e1;
}


.lotaip-download-icon {

    width: 39px;
    height: 39px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: #e9f8fc;

    color: #005aa9;

    font-size: 15px;
}


.lotaip-download-content {

    flex: 1;

    min-width: 0;
}


.lotaip-download-content h3 {

    margin: 0 0 3px;

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size: 13px;

    line-height: 1.3;

    font-weight: 700;

    color: #334155;
}


.lotaip-download-content span {

    font-size: 10px;

    color: #64748b;
}


.lotaip-download-arrow {

    width: 28px;
    height: 28px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f1f5f9;

    color: #64748b;

    font-size: 11px;

    transition:
        background .25s ease,
        color .25s ease;
}


.lotaip-download-card:hover
.lotaip-download-arrow {

    background:
        #e9f8fc;

    color:
        #005aa9;
}


/* ==============================================================
   BOTÓN REGRESO AL ARCHIVO ANUAL
============================================================== */

.lotaip-month-return {

    display: flex;

    justify-content: center;

    margin-top: 32px;
}


.lotaip-month-return-link {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 14px;

    min-width: 275px;

    padding: 10px 15px 10px 10px;

    text-decoration: none !important;

    background: #ffffff;

    border:
        1px solid
        #dce7ee;

    border-radius: 50px;

    box-shadow:
        0 7px 20px
        rgba(0,67,125,0.07);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


.lotaip-month-return-link:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(0,90,169,0.28);

    box-shadow:
        0 12px 27px
        rgba(0,67,125,0.12);
}


.lotaip-month-return-icon {

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #005aa9,
            #087dbb
        );

    color: #ffffff;

    font-size: 13px;

    box-shadow:
        0 5px 13px
        rgba(0,90,169,0.20);

    transition:
        transform .25s ease;
}


.lotaip-month-return-link:hover
.lotaip-month-return-icon {

    transform:
        translateX(-2px);
}


.lotaip-month-return-text {

    display: flex;

    flex-direction: column;

    flex: 1;
}


.lotaip-month-return-text small {

    margin-bottom: 2px;

    font-size: 8px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 1.5px;

    color: #00a7d8;
}


.lotaip-month-return-text strong {

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size: 14px;

    line-height: 1.2;

    font-weight: 700;

    color: #00447f;
}


.lotaip-month-return-arrow {

    width: 30px;
    height: 30px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f1f5f9;

    color: #64748b;

    font-size: 12px;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}


.lotaip-month-return-link:hover
.lotaip-month-return-arrow {

    background:
        #e9f8fc;

    color:
        #005aa9;

    transform:
        translateX(3px);
}


/* ==============================================================
   RESPONSIVE - PÁGINAS MENSUALES
============================================================== */

@media (max-width: 991px) {

    .lotaip-month-hero {

        padding:
            40px;
    }


    .lotaip-month-hero h1 {

        font-size:
            35px;
    }


    .lotaip-download-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 767px) {

    .lotaip-month-page {

        padding:
            30px 15px 55px;
    }


    .lotaip-month-hero {

        min-height:
            250px;

        padding:
            35px 25px;
    }


    .lotaip-month-hero-content {

        align-items:
            flex-start;
    }


    .lotaip-month-hero-icon {

        width:
            62px;

        height:
            62px;

        border-radius:
            16px;

        font-size:
            24px;
    }


    .lotaip-month-hero h1 {

        font-size:
            31px;
    }


    .lotaip-month-hero-text p {

        font-size:
            13px;
    }


    .lotaip-month-mark {

        right:
            -15px;

        bottom:
            -20px;

        font-size:
            110px;
    }


    .lotaip-secondary-grid {

        grid-template-columns:
            1fr;
    }


    .lotaip-download-grid {

        grid-template-columns:
            1fr;
    }


    .lotaip-passive-section {

        padding:
            23px;
    }

}


@media (max-width: 480px) {

    .lotaip-month-hero {

        padding:
            30px 21px;
    }


    .lotaip-month-hero-content {

        flex-direction:
            column;

        gap:
            15px;
    }


    .lotaip-month-hero h1 {

        font-size:
            28px;
    }


    .lotaip-month-eyebrow {

        font-size:
            9px;

        letter-spacing:
            1.5px;
    }


    .lotaip-month-intro {

        align-items:
            flex-start;

        padding:
            18px;
    }


    .lotaip-month-intro h2 {

        font-size:
            17px;
    }


    .lotaip-transparency-card {

        align-items:
            flex-start;

        padding:
            20px;
    }


    .lotaip-card-content h3 {

        font-size:
            18px;
    }


    .lotaip-card-arrow {

        display:
            none;
    }


    .lotaip-small-card {

        align-items:
            flex-start;
    }


    .lotaip-small-arrow {

        display:
            none;
    }


    .lotaip-passive-header {

        align-items:
            flex-start;
    }


    .lotaip-month-return {

        margin-top:
            27px;
    }


    .lotaip-month-return-link {

        width:
            100%;

        min-width:
            0;
    }

}