/* RESET */

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

    /*body{

        font-family:Arial, Helvetica, sans-serif;
        background-color:#ffffff;
        background-image:url("../img/fondo/fondo-kompass.webp");
        background-repeat:no-repeat;
        background-size:cover;
        background-position:center;
        background-attachment:fixed;

    }*/

    body{

        font-family:Arial, Helvetica, sans-serif;
        background:#ffffff;
        position:relative;
        animation:fadeUp .8s ease;
        scroll-behavior:smooth;

    }

    body::before{

        content:"";

        position:fixed;

        inset:0;

        background:url("../img/fondo/fondo-kompass.webp") center/cover no-repeat;

        opacity:.50;

        z-index:-2;

    }

    body::after{

        content:"";

        position:fixed;

        inset:0;

        background:rgba(255,255,255,.35);

        z-index:-1;

    }


    /* HEADER */

    .header{

    position:sticky;
    top:0;
    z-index:999;

    background:rgba(11,35,65,.95);

    backdrop-filter:blur(12px);

    padding:18px 60px;

    box-shadow:0 8px 20px rgba(0,0,0,.12);
    animation:fadeUp .8s ease;

    }

    .navbar{

        display:flex;
        justify-content:space-between;
        align-items:center;

    }

    .logo img{

    width:110px;
    transition:.35s ease;

    }

    .logo img:hover{

    transform:scale(1.05);

    }

    .menu{

        display:flex;

        gap:35px;

        list-style:none;
        animation:fadeUp .8s ease;

    }

    .menu a{

    position:relative;
    color:white;
    text-decoration:none;
    font-weight:600;
    padding:10px 0;
    transition:.35s ease;

    }

    .menu a::after{

    content:"";
    position:absolute;
    left:0;
    bottom:-5px;
    width:0;
    height:2px;
    background:#E53935;
    transition:.35s ease;

    }

    .menu a:hover{

    color:#E53935;

    }

    .menu a:hover::after{

    width:100%;

}

    .menu a::after{

    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:2px;
    background:#E53935;
    transition:.35s ease;

    }

    .menu a:hover::after{

    width:100%;

    }

    .menu a:hover{

        color:#E53935;

    }

    .btn-nav{

        background:#E53935;
        color:white;
        padding:14px 28px;
        border-radius:10px;
        transition:.35s ease;
        text-decoration:none;
        font-weight:600;
        display:inline-block;

    }

    .btn-nav:hover{

        background:#c62828;
        transform:translateY(-3px);

    }

    .hero{
        max-width:1600px;
        width:100%;
        margin:auto;
        padding:70px 80px;

        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:100px;
        border-bottom:1px solid #ECECEC;
        animation:fadeUp .8s ease;
    }

    .tag {

        color:#E53935;

        font-weight:bold;

        text-transform:uppercase;

        letter-spacing:2px;
    }

    .hero-text{

    flex:1;
    max-width:650px;

    animation:fadeLeft .9s ease;

    }

    .hero-image{

    flex:1.4;
    display:flex;
    justify-content:flex-end;

    animation:fadeRight 1s ease;

    }

    .hero-image img{

        width:100%;
        max-width:900px;
        border-radius:24px;
        transition:.4s;

        box-shadow:
            0 40px 90px rgba(15,23,42,.18);
        object-fit:cover;

    }

    .hero-image img:hover{

        transform:scale(1.02);

    }

    .hero h1{

        font-size:68px;
        line-height:1.05;
        letter-spacing:-2px;
        color:#0B2341;
        text-wrap:balance;
        max-width:650px;

    }

    .hero p{
        max-width:600px;
        font-size:22px;
        line-height:1.8;
        margin:35px 0 45px;
        color:#555;
    }

    .hero-buttons{

        display:flex;

        gap:20px;

    }

    .btn-hero{

        display:inline-block;

        background:#E53935;
        color:white;

        padding:18px 40px;

        border:none;
        outline:none;

        border-radius:12px;

        cursor:pointer;

        text-decoration:none;

        font-size:18px;

        font-weight:bold;

        transition:.35s;

        box-shadow:
        0 15px 35px rgba(229,57,53,.35);

    }

    .btn-hero:hover{

        background:#c62828;

        transform:translateY(-6px);

        box-shadow:
        0 20px 45px rgba(229,57,53,.45);

    }


    .btn-secondary{

        border:2px solid #0B2341;

        color:#0B2341;

        padding:18px 40px;

        border-radius:10px;

        text-decoration:none;

        font-weight:bold;

        transition:.35s ease;

    }

    .btn-secondary:hover{

        background:#0B2341;

        color:white;

    }

    .btn-hero,
    .btn-secondary{

        padding:20px 42px;
        font-size:18px;
    }

    /* ===================== */
    /* SERVICIOS */
    /* ===================== */

    .services{

        background:#F8F9FC;

        padding:70px 60px;
        border-bottom:1px solid #ECECEC;
        animation:fadeUp .8s ease;

    }

    .container{

        max-width:1200px;

        margin:auto;

    }

    .services h2{

        font-size:42px;

        color:#0B2341;

        text-align:center;

        margin-bottom:20px;

    }

    .services-subtitle{

        text-align:center;

        color:#666;

        font-size:21px;

        margin-bottom:70px;

    }

    .services-grid{

        display:grid;
        grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
        gap:35px;
        margin-top:50px;

    }

    .service-card{

        background:white;
        padding:40px 30px;
        border-radius:20px;
        overflow:hidden;
        text-align:center;
        transition:.35s ease;
        box-shadow:0 15px 35px rgba(0,0,0,.08);
        transition: 0.3s;
        border:1px solid #EEF1F4;

    }

    .service-card:hover{

        transform:translateY(-12px);
        box-shadow:
            0 30px 60px rgba(11,35,65,.15);

    }

    .service-card img{

        width:90px;
        margin-bottom:20px;
        transition:.4s ease;

    }

    .service-card:hover img{

    transform:scale(1.1);

    }

    .service-card h3{

        color:#0B2341;

        margin-bottom:18px;

        font-size:24px;

    }

    .service-card p{

        color:#666;

        line-height:1.6;

    }

    /*=============================
        ABOUT
    =============================*/

    .about{

        padding:70px 60px;

        background:#ffffff;
        border-bottom:1px solid #ECECEC;
        animation:fadeUp .8s ease;

    }

    .about .container{

        max-width:1200px;
        margin:auto;

    }

    .about-container{

        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:80px;
        max-width:1200px;
        margin:auto;

    }

    .about-text{

        flex:1;

    }

    .about-image{

        flex:1;

        display:flex;

        justify-content:center;

    }

    .about-image img{

        width:100%;
        max-width:520px;
        height:auto;
        display:block;
        border-radius:26px;
        box-shadow:0 20px 50px rgba(0,0,0,.12);

    }

    .section-tag{

        color:#E53935;

        font-weight:bold;

        text-transform:uppercase;

        letter-spacing:2px;

    }



    .about h2{

        font-size:48px;

        color:#0B2341;

        margin:20px 0;

        line-height:1.2;

    }

    .about-text p{

        max-width:600px;

    }

    .about p{

        color:#666;

        font-size:20px;

        line-height:1.8;

        margin-bottom:35px;

    }

    .about-list{

        list-style:none;

    }

    .about-list li{

        font-size:20px;

        margin-bottom:18px;

        color:#0B2341;

        font-weight:600;

    }

    @media (max-width:992px){

        .hero{

            flex-direction:column;
            text-align:center;
            padding:70px 30px;
            gap:50px;

        }

        .hero-text{

            max-width:100%;

        }

        .hero-buttons{

            justify-content:center;
            flex-wrap:wrap;

        }

        .hero h1{

            font-size:52px;

        }

        .services-grid{

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

        }

        .about-container{

            flex-direction:column;

        }

    }

    @media (max-width:576px){

        .hero h1{

            font-size:42px;

        }

        .hero p{

            font-size:18px;

        }

        .services-grid{

            grid-template-columns:1fr;

        }

        .menu{

            display:none;

        }

    }

    /*=============================
        PORTAFOLIO
    =============================*/

    .portfolio{

        padding:70px 60px;

        background:#F5F7FA;
        border-bottom:1px solid #ECECEC;
        animation:fadeUp .8s ease;

    }

    .portfolio h2{

        font-size:48px;

        color:#0B2341;

        margin:20px 0;

    }

    .portfolio-subtitle{

        font-size:20px;

        color:#666;

        margin-bottom:60px;

    }

    .portfolio-grid{

        display:grid;

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

        gap:35px;

    }

    .portfolio-card{

        background:#fff;

        border-radius:20px;

        overflow:hidden;

        box-shadow:0 20px 40px rgba(11,35,65,.08);

        transition:.35s ease;
        border:1px solid #EEF1F4;

    }

    .portfolio-card:hover{

        transform:translateY(-12px);
        box-shadow:
        0 30px 60px rgba(11,35,65,.15);

    }

    .portfolio-card img{

        width:100%;
        height:320px;
        object-fit:cover;
        display:block;
        transition:.5s ease;
    }

    .portfolio-card:hover img{

    transform:scale(1.05);

    }

    .portfolio-info{

        padding:30px;

    }

    .portfolio-info h3{

        color:#0B2341;

        font-size:26px;

        margin-bottom:12px;

    }

    .portfolio-info p{

        color:#666;

        line-height:1.7;

    }

    /*=============================
        CLIENTES
    =============================*/

    .clients{

        padding:70px 60px;
        background:#ffffff;
        border-bottom:1px solid #ECECEC;
        animation:fadeUp .8s ease;

    }

    .clients h2{

        color: #0b2341;
        text-align:center;
        font-size:46px;
        margin:20px 0;

    }

    .clients-subtitle{

        text-align:center;
        color:#666;
        font-size:20px;
        margin-bottom:60px;

    }

    .clients-grid{

        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:40px;
        align-items:center;

    }

    .clients-grid img{

        width:170px;
        margin:auto;

        filter:grayscale(100%);

        opacity:.6;

        transition:.35s ease;

    }

    .clients-grid img:hover{

        filter:none;

        opacity:1;

        transform:scale(1.05);

    }

    .stats{

        background:#0B2341;

        padding:70px 60px;
        border-bottom:1px solid #ECECEC;
        animation:fadeUp .8s ease;

    }

    .stats-grid{

        display:grid;

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

        text-align:center;

        color:white;

    }

    .stat h2{

        font-size:56px;

        color:#E53935;

    }

    .stat p{

        margin-top:15px;

        font-size:20px;

    }

    .cta{

        padding:70px 60px;

        text-align:center;
        border-bottom:1px solid #ECECEC;

    }

    .cta h2{

        font-size:48px;

        color:#0B2341;

        margin-bottom:25px;

    }

    .cta p{

        color:#666;

        font-size:22px;

        margin-bottom:45px;

    }

    /*==========================
    ANIMACIONES
==========================*/

@keyframes fadeLeft{

    from{

        opacity:0;
        transform:translateX(-60px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

@keyframes fadeRight{

    from{

        opacity:0;
        transform:translateX(60px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

/*=============================
        FOOTER
=============================*/

.footer{

    background:#081A31;
    color:white;
    padding:80px 60px 40px;
    border-bottom:1px solid #ECECEC;
    animation:fadeUp .8s ease;

}

.footer-container{

    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:70px;

}

.footer-logo img{

    width:120px;
    margin-bottom:25px;

}

.footer-logo p{

    color:#BBB;
    line-height:1.8;
    max-width:320px;

}

.footer h3{

    margin-bottom:25px;
    color:white;

}

.footer-links{

    display:flex;
    flex-direction:column;
    gap:14px;

}

.footer-links a{

    color:#BBB;
    text-decoration:none;
    transition:.3s ease;

}

.footer-links a:hover{

    color:#E53935;

}

.footer-contact p{

    color:#BBB;
    margin-bottom:12px;

}

/*=============================
    CONTACTO
=============================*/

.contact{

    padding:80px 60px;
    border-bottom:1px solid #ECECEC;
    animation:fadeUp .8s ease;

}

.contact h1{

    font-size:48px;
    color:#0B2341;
    margin:20px 0;

}

.contact-subtitle{

    font-size:20px;
    color:#666;
    margin-bottom:50px;

}

.contact-form{

    max-width:700px;

}

.input-group{

    display:flex;
    flex-direction:column;
    margin-bottom:25px;
    animation:fadeUp .8s ease;

}

.input-group label{

    margin-bottom:10px;
    font-weight:600;
    color:#0B2341;

}

.input-group input,
.input-group textarea{

    padding:18px;

    border:1px solid #ddd;

    border-radius:12px;

    font-size:17px;

    transition:.3s;

}

.input-group input:focus,
.input-group textarea:focus{

    outline:none;

    border-color:#E53935;

    box-shadow:0 0 0 4px rgba(229,57,53,.15);

}

textarea{

    resize:vertical;

}

.contact-form input,
.contact-form textarea{

    border:1px solid #E5E7EB;

    background:#ffffff;

    transition:.3s;

}

.contact-form input:focus,
.contact-form textarea:focus{

    border-color:#E53935;

    box-shadow:

    0 0 0 5px rgba(229,57,53,.12);

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=========================
    MENSAJE DE ÉXITO
=========================*/

.success{

    min-height:80vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:150px 30px 100px;

}

.success-card{

    max-width:650px;

    width:100%;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(10px);

    padding:70px;

    border-radius:24px;

    text-align:center;

    box-shadow:0 30px 70px rgba(0,0,0,.12);

}

.success-icon{

    width:110px;
    height:110px;

    border-radius:50%;

    background:#E53935;

    color:white;

    font-size:58px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto;
    margin-bottom:35px;

    box-shadow:
    0 20px 40px rgba(229,57,53,.35);

    animation:
        pop .6s ease,
        pulse 2.5s infinite;

}

.success h1{

    font-size:48px;

    color:#0B2341;

    margin-bottom:25px;

}

.success p{

    color:#666;

    font-size:22px;

    line-height:1.8;

}

.success-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:45px;

    flex-wrap:wrap;

}

.success-buttons a{

    min-width:220px;

}

.success-line{

    width:90px;

    height:5px;

    background:#E53935;

    margin:30px auto;

    border-radius:20px;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}

/*=============================
    ANIMACIONES
=============================*/

.service-card,
.portfolio-card,
.success-card{

    animation:fadeUp .8s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/*=============================
    PANEL ADMIN
=============================*/

.admin{

    padding:70px 60px;

}

.admin h1{

    font-size:48px;
    color:#0B2341;
    margin:20px 0;

}

.admin-subtitle{

    color:#666;
    margin-bottom:40px;

}

.admin-table{

    width:100%;

    border-collapse:collapse;

    background:white;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.admin-table th{

    background:#0B2341;

    color:white;

    padding:18px;

}

.admin-table td{

    padding:18px;

    border-bottom:1px solid #eee;

}

.admin-table tr:hover{

    background:#F8F9FB;

}

.admin-stats{

    display:grid;

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

    gap:20px;

    margin:30px 0;

}

.admin-stat-card{

    background:#ffffff;

    padding:30px;

    border-radius:15px;

    box-shadow:0 10px 30px rgba(0,0,0,0.08);

    text-align:center;

}

.admin-stat-number{

    display:block;

    font-size:40px;

    font-weight:bold;

    color:#0B2341;

}

.admin-stat-label{

    display:block;

    margin-top:8px;

    color:#666;

}

.admin-table{

    width:100%;

    border-collapse:collapse;

    background:#ffffff;

    border-radius:12px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,0.08);

}

.admin-table th{

    background:#0B2341;

    color:#ffffff;

    padding:15px;

    text-align:left;

}

.admin-table td{

    padding:14px;

    border-bottom:1px solid #eeeeee;

}

.admin-table tr:hover{

    background:#f5f7fa;

}

@media (max-width:768px){

    .admin-stats{

        grid-template-columns:1fr;

    }

    .admin-table{

        display:block;

        overflow-x:auto;

        white-space:nowrap;

    }

}

/* ================================
   PÁGINA DE SERVICIOS
================================ */

.page-hero {
    padding: 80px 0 50px;
    background: transparent;
}

.page-hero .section-tag {
    display: block;
    margin-bottom: 12px;
}

.page-hero h1 {
    max-width: 900px;
    margin: 0 0 20px;
    font-size: 52px;
    line-height: 1.1;
    color: #102a43;
}

.page-hero p {
    max-width: 800px;
    margin: 0;
    font-size: 20px;
    line-height: 1.6;
    color: #666;
}


/* Servicios */

.services-page {
    padding: 50px 0 100px;
}

.services-page .services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.services-page .service-card {
    background: #fff;
    border-radius: 22px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.services-page .service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}

.services-page .service-card img {
    width: 100%;
    height: 180px;
    object-fit: contain;
    margin-bottom: 20px;
}

.services-page .service-card h3 {
    margin: 10px 0;
    font-size: 22px;
    color: #102a43;
}

.services-page .service-card p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #666;
}


/* Responsive */

@media (max-width: 900px) {

    .services-page .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-hero h1 {
        font-size: 42px;
    }

}


@media (max-width: 600px) {

    .services-page .services-grid {
        grid-template-columns: 1fr;
    }

    .page-hero {
        padding: 50px 0 30px;
    }

    .page-hero h1 {
        font-size: 34px;
    }

    .page-hero p {
        font-size: 17px;
    }

}

/* =================================
   PÁGINA NOSOTROS
================================= */

.nosotros-hero {
    padding: 80px 0 60px;
    background: transparent;
}

.nosotros-hero .section-tag {
    display: block;
    margin-bottom: 15px;
    color: #E53935;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.nosotros-hero h1 {
    max-width: 1200px;
    margin: 0 0 20px;
    color: #102a43;
    font-size: 48px;
    line-height: 1.15;
    font-weight: 700;
}

.nosotros-hero p {
    max-width: 1100px;
    margin: 0 0 8px;
    color: #555;
    font-size: 20px;
    line-height: 1.6;
}

/* =================================
   HERO NOSOTROS
================================= */

.about-page {

    padding: 80px 30px 60px;

    background: transparent;

}

.about-page .container {

    max-width: 1200px;

    margin: 0 auto;

}

.about-page .section-tag {

    display: block;

    margin-bottom: 15px;

}

.about-page h1 {

    max-width: 1200px;

    margin: 0 0 20px;

    color: #102a43;

    font-size: 48px;

    line-height: 1.15;

    font-weight: 700;

}

.about-page p {

    max-width: 1100px;

    margin: 0 0 8px;

    color: #555;

    font-size: 20px;

    line-height: 1.6;

}


/* =================================
   NUESTRA ESENCIA
================================= */

.nosotros-esencia {
    padding: 90px 0;
    background: #ffffff;
}

.nosotros-esencia-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
}

.nosotros-esencia-text h2 {
    margin: 15px 0 25px;
    color: #102a43;
    font-size: 52px;
    line-height: 1.15;
}

.nosotros-esencia-text p {
    color: #666;
    font-size: 20px;
    line-height: 1.7;
}

.nosotros-esencia-image img {
    width: 100%;
    display: block;
    border-radius: 25px;
}


/* =================================
   RESPONSIVE NOSOTROS
================================= */

@media (max-width: 900px) {

    .nosotros-esencia-container {
        grid-template-columns: 1fr;
    }

    .nosotros-esencia-text h2 {
        font-size: 42px;
    }

}

@media (max-width: 600px) {

    .nosotros-hero {
        padding: 60px 20px 40px;
    }

    .nosotros-hero h1 {
        font-size: 36px;
    }

    .nosotros-hero p {
        font-size: 17px;
    }

    .nosotros-esencia {
        padding: 60px 20px;
    }

    .nosotros-esencia-text h2 {
        font-size: 34px;
    }

}

/* =========================================
   FLIPBOOK KOMPASS
========================================= */

.portfolio-book {
    width: 100%;
    padding: 80px 30px;
    background: #f5f7fa;
    text-align: center;
}

.portfolio-book-header {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 40px;
}

.portfolio-book-header h2 {
    margin: 15px 0;
    color: #0B2341;
    font-size: 48px;
}

.portfolio-book-header p {
    font-size: 20px;
    color: #666;
    line-height: 1.6;
}


/* =========================================
   CONTENEDOR DEL FLIPBOOK
========================================= */

.flipbook-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 50px auto 0;

    display: flex;
    flex-direction: column;
    align-items: center;
}


/* =========================================
   FLIPBOOK
========================================= */

.flipbook {
    width: 100%;
    max-width: 1100px;
    height: 760px;
    margin: 0 auto;
    position: relative;
}

.flipbook .stf__parent {
    margin: 0 auto !important;
}

.flipbook .stf__wrapper {
    margin: 0 auto !important;
}


/* =========================================
   PÁGINAS
========================================= */

.flipbook .page {
    background: #ffffff;
    overflow: hidden;
}

.flipbook .page canvas {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
}


/* =========================================
   ERROR
========================================= */

.flipbook-error {
    color: #e53935;
    font-size: 18px;
}


/* =========================================
   CONTROLES
========================================= */

.flipbook-controls {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 18px;

    margin-top: 25px;
}


/* =========================================
   BOTONES
========================================= */

.flipbook-controls button {
    border: none;

    background: #0B2341;
    color: white;

    padding: 12px 20px;

    border-radius: 6px;

    font-size: 15px;
    font-weight: 600;

    cursor: pointer;

    transition: all 0.25s ease;
}

.flipbook-controls button:hover {
    background: #E53935;
    transform: translateY(-2px);
}


/* =========================================
   CONTADOR
========================================= */

#pageInfo {
    min-width: 70px;

    text-align: center;

    font-size: 16px;
    font-weight: 600;

    color: #0B2341;
}


/* =========================================
   PANTALLA COMPLETA
========================================= */

#fullscreenBtn {
    width: 45px;
    height: 45px;

    padding: 0;

    font-size: 20px;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .flipbook {
        height: 650px;
    }

}


/* =========================================
   CELULAR
========================================= */

@media (max-width: 600px) {

    .portfolio-book {
        padding: 60px 15px;
    }

    .flipbook-wrapper {
        margin-top: 30px;
    }

    .flipbook {
        width: 100%;
        height: 520px;
    }

    .flipbook-controls {
        gap: 8px;

        margin-top: 18px;

        flex-wrap: wrap;
    }

    .flipbook-controls button {
        padding: 10px 14px;
        font-size: 13px;
    }

    #pageInfo {
        font-size: 14px;
    }

    #fullscreenBtn {
        width: 40px;
        height: 40px;
    }

}

/* =========================================
   FLIPBOOK KOMPASS
========================================= */

.portfolio-book {
    width: 100%;
    padding: 80px 30px;
    text-align: center;
    background: #f5f7fa;
}

.flipbook-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 50px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flipbook {
    width: 1100px;
    height: 760px;
    margin: 0 auto;
    position: relative;
}

/* IMPORTANTE:
   No mover manualmente el libro interno */
.flipbook .stf__parent,
.flipbook .stf__wrapper {
    margin: 0 auto !important;
}


/* PÁGINAS */
.flipbook .page {
    background: #fff;
    overflow: hidden;
}

.flipbook .page canvas {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}


/* CONTROLES */

.flipbook-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-top: 25px;
}

.flipbook-controls button {
    border: none;
    background: #0B2341;
    color: white;
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all .25s ease;
}

.flipbook-controls button:hover {
    background: #E53935;
    transform: translateY(-2px);
}

#pageInfo {
    min-width: 70px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #0B2341;
}

#fullscreenBtn {
    width: 45px;
    height: 45px;
    padding: 0;
    font-size: 20px;
}


/* TABLET */

@media (max-width: 1200px) {

    .flipbook {
        width: 900px;
        height: 650px;
    }

}


/* CELULAR */

@media (max-width: 600px) {

    .portfolio-book {
        padding: 60px 15px;
    }

    .flipbook-wrapper {
        margin-top: 30px;
        padding: 0;
    }

    .flipbook {
        width: 100%;
        height: 520px;
    }

    .flipbook-controls {
        gap: 8px;
        margin-top: 18px;
        flex-wrap: wrap;
    }

    .flipbook-controls button {
        padding: 10px 14px;
        font-size: 13px;
    }

    #pageInfo {
        font-size: 14px;
    }

    #fullscreenBtn {
        width: 40px;
        height: 40px;
    }
}


/* =================================
   PÁGINA PORTAFOLIO
================================= */

.portfolio-page {

    padding: 80px 30px 100px;

    background: transparent;

    min-height: 70vh;

}

.portfolio-page .container {

    max-width: 1200px;

    margin: 0 auto;

}


/* TÍTULO */

.portfolio-page .section-tag {

    display: block;

    margin-bottom: 15px;

}


.portfolio-page h1 {

    max-width: 900px;

    margin: 0 0 20px;

    color: #102a43;

    font-size: 52px;

    line-height: 1.1;

}


.portfolio-page .portfolio-subtitle {

    max-width: 800px;

    margin: 0 0 60px;

    color: #666;

    font-size: 20px;

    line-height: 1.6;

}


/* =================================
   PROYECTOS
================================= */

.portfolio-page .portfolio-grid {

    display: grid;

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

    gap: 35px;

}


.portfolio-page .portfolio-card {

    background: #fff;

    border-radius: 20px;

    overflow: hidden;

    border: 1px solid #EEF1F4;

    box-shadow:
        0 20px 40px rgba(11,35,65,.08);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


.portfolio-page .portfolio-card:hover {

    transform: translateY(-10px);

    box-shadow:
        0 30px 60px rgba(11,35,65,.15);

}


.portfolio-page .portfolio-card img {

    width: 100%;

    height: 320px;

    object-fit: cover;

    display: block;

    transition: transform .5s ease;

}


.portfolio-page .portfolio-card:hover img {

    transform: scale(1.05);

}


.portfolio-page .portfolio-info {

    padding: 30px;

}


.portfolio-page .portfolio-info h3 {

    margin: 0 0 12px;

    color: #0B2341;

    font-size: 26px;

}


.portfolio-page .portfolio-info p {

    margin: 0;

    color: #666;

    line-height: 1.7;

}


/* =================================
   TABLET
================================= */

@media (max-width: 900px) {

    .portfolio-page {

        padding: 60px 25px 80px;

    }

    .portfolio-page h1 {

        font-size: 42px;

    }

    .portfolio-page .portfolio-grid {

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

    }

}


/* =================================
   CELULAR
================================= */

@media (max-width: 600px) {

    .portfolio-page {

        padding: 50px 20px 70px;

    }

    .portfolio-page h1 {

        font-size: 34px;

    }

    .portfolio-page .portfolio-subtitle {

        font-size: 17px;

        margin-bottom: 40px;

    }

    .portfolio-page .portfolio-grid {

        grid-template-columns: 1fr;

    }

    .portfolio-page .portfolio-card img {

        height: 240px;

    }

}

/* ==========================================
   WHATSAPP FLOTANTE KOMPASS
========================================== */

.whatsapp-float {

    position: fixed;

    right: 25px;
    bottom: 25px;

    width: 60px;
    height: 60px;

    display: flex;

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

    background: #25D366;

    border-radius: 50%;

    text-decoration: none;

    z-index: 9999;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.25);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


/* ==========================================
   ÍCONO WHATSAPP
========================================== */

.whatsapp-icon {

    width: 31px;
    height: 31px;

    fill: #ffffff;

    display: block;

}


/* ==========================================
   EFECTO HOVER
========================================== */

.whatsapp-float:hover {

    transform:
        translateY(-4px)
        scale(1.08);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.35);

}


/* ==========================================
   ETIQUETA ¿HABLAMOS?
========================================== */

.whatsapp-tooltip {

    position: absolute;

    right: 70px;

    top: 50%;

    transform:
        translateY(-50%)
        translateX(10px);

    background: #06111f;

    color: #ffffff;

    padding: 9px 15px;

    border-radius: 8px;

    font-size: 13px;

    font-weight: 600;

    white-space: nowrap;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;

    box-shadow:
        0 5px 15px rgba(0,0,0,0.18);

}


/* Pequeña flecha */

.whatsapp-tooltip::after {

    content: "";

    position: absolute;

    right: -6px;

    top: 50%;

    transform:
        translateY(-50%);

    border-width: 6px 0 6px 6px;

    border-style: solid;

    border-color:
        transparent
        transparent
        transparent
        #06111f;

}


/* Mostrar etiqueta */

.whatsapp-float:hover .whatsapp-tooltip {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(-50%)
        translateX(0);

}


/* ==========================================
   ANIMACIÓN SUAVE
========================================== */

@keyframes whatsappPulse {

    0% {

        box-shadow:
            0 0 0 0
            rgba(37, 211, 102, 0.45);

    }

    70% {

        box-shadow:
            0 0 0 12px
            rgba(37, 211, 102, 0);

    }

    100% {

        box-shadow:
            0 0 0 0
            rgba(37, 211, 102, 0);

    }

}


.whatsapp-float {

    animation:
        whatsappPulse 2.8s infinite;

}


/* ==========================================
   MÓVIL
========================================== */

@media (max-width: 768px) {

    .whatsapp-float {

        width: 54px;
        height: 54px;

        right: 18px;
        bottom: 18px;

    }

    .whatsapp-icon {

        width: 28px;
        height: 28px;

    }

    /*
       En móvil no mostramos
       ¿Hablamos? porque no existe
       hover de la misma manera.
    */

    .whatsapp-tooltip {

        display: none;

    }

}

/* ================================
   RESPONSIVE - CELULARES
================================ */

@media (max-width: 768px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    * {
        box-sizing: border-box;
    }

    /* Contenedores */
    .container,
    .section-container,
    section {
        width: 100%;
        max-width: 100%;
    }

    /* Grillas */
    .services-grid,
    .servicios-grid,
    .portfolio-grid,
    .clientes-grid {
        grid-template-columns: 1fr !important;
        width: 100%;
    }

    /* Tarjetas */
    .service-card,
    .servicio-card,
    .portfolio-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    /* Imágenes */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Textos */
    h1 {
        font-size: clamp(2rem, 8vw, 3.5rem);
        line-height: 1.1;
    }

    h2 {
        font-size: clamp(1.8rem, 7vw, 3rem);
        line-height: 1.15;
    }

    p {
        max-width: 100%;
    }

    /* Logos de clientes */
    .clientes-logos,
    .logos-clientes {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
        width: 100%;
    }

    .clientes-logos img,
    .logos-clientes img {
        width: 100%;
        max-width: 150px;
        height: auto;
        object-fit: contain;
        margin: auto;
    }

    /* Footer */
    footer {
        width: 100%;
        overflow: hidden;
    }

    .footer-container {
        grid-template-columns: 1fr;
        width: 100%;
    }
}