/*====================================================================
    QRESP®
    Plataforma para la Gestión Integral del Espacio Público
    Versión: 1.0
    Arquitectura, Diseño, Desarrollo e Implementación Tecnológica
    CECOMC Telecomunicaciones®
=====================================================================*/

/*====================================================================
    01. VARIABLES GLOBALES
=====================================================================*/

:root{

    /*==============================================================
        COLORES INSTITUCIONALES
    ==============================================================*/

    --qr-primary:#0F4C81;
    --qr-primary-dark:#09365C;

    --qr-secondary:#00A8E8;
    --qr-secondary-dark:#007CB0;

    --qr-accent:#00C896;
    --qr-success:#28C76F;
    --qr-warning:#FFB020;
    --qr-danger:#EA5455;


    /*==============================================================
        ESCALA DE GRISES
    ==============================================================*/

    --qr-dark:#0B172A;
    --qr-dark-2:#16253F;

    --qr-text:#4B5563;
    --qr-title:#10233F;

    --qr-light:#F6F8FB;
    --qr-border:#E5E7EB;

    --qr-white:#FFFFFF;

    /*==============================================================
        TIPOGRAFÍA
    ==============================================================*/

    --qr-font:'Montserrat',sans-serif;

    /*==============================================================
        PESOS
    ==============================================================*/

    --qr-light-weight:300;
    --qr-regular:400;
    --qr-medium:500;
    --qr-semibold:600;
    --qr-bold:700;
    --qr-extrabold:800;

    /*==============================================================
        TAMAÑOS
    ==============================================================*/

    --qr-h1:3.8rem;
    --qr-h2:2.8rem;
    --qr-h3:2rem;
    --qr-h4:1.35rem;

    --qr-body:1rem;
    --qr-small:.92rem;

    /*==============================================================
        ESPACIADOS
    ==============================================================*/

    --qr-space-xs:.5rem;
    --qr-space-sm:1rem;
    --qr-space-md:1.5rem;
    --qr-space-lg:2.5rem;
    --qr-space-xl:4rem;
    --qr-space-xxl:6rem;

    /*==============================================================
        BORDER RADIUS
    ==============================================================*/

    --qr-radius-sm:10px;
    --qr-radius-md:18px;
    --qr-radius-lg:28px;

    /*==============================================================
        SOMBRAS
    ==============================================================*/

    --qr-shadow-sm:0 6px 18px rgba(0,0,0,.05);

    --qr-shadow-md:0 12px 35px rgba(0,0,0,.08);

    --qr-shadow-lg:0 25px 60px rgba(0,0,0,.12);

    /*==============================================================
        TRANSICIONES
    ==============================================================*/

    --qr-transition:.35s ease;

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

    --qr-container:1400px;

    /*==============================================================
        HEADER
    ==============================================================*/

    --qr-header-height:90px;

    /*==============================================================
        Z-INDEX
    ==============================================================*/

    --qr-z-header:999;

    --qr-z-menu:998;

    --qr-z-overlay:997;

}

/*====================================================================
    02. RESET CSS
=====================================================================*/

*{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:var(--qr-font);

    font-size:var(--qr-body);

    font-weight:var(--qr-regular);

    line-height:1.7;

    color:var(--qr-text);

    background:var(--qr-white);

    overflow-x:hidden;

}

img{

    display:block;

    max-width:100%;

}

a{

    text-decoration:none;

    color:inherit;

    transition:var(--qr-transition);

}

ul{

    list-style:none;

}

button{

    border:none;

    outline:none;

    cursor:pointer;

    font-family:inherit;

}

input,
textarea,
select{

    outline:none;

    font-family:inherit;

}

section{

    position:relative;

    padding:50px 0;

}

/*====================================================================
    03. ESTILOS GENERALES
=====================================================================*/

.qr-container{

    width:90%;

    max-width:var(--qr-container);

    margin:auto;

}

.qr-section-header{

    max-width:980px;

    margin:0 auto 90px;

    text-align:center;

}

.qr-section-subtitle{

    display:inline-block;

    margin-bottom:15px;

    color:var(--qr-secondary);

    font-weight:var(--qr-bold);

    letter-spacing:1px;

    text-transform:uppercase;

}

.qr-section-title{

    color:var(--qr-title);

    font-size:var(--qr-h2);

    font-weight:var(--qr-extrabold);

    margin-bottom:25px;

    line-height:1.2;

}

.qr-section-text{

    font-size:1.08rem;

    color:var(--qr-text);

}

h1,h2,h3,h4{

    color:var(--qr-title);

    line-height:1.2;

}

p{

    margin-bottom:18px;

}

::selection{

    background:var(--qr-primary);

    color:var(--qr-white);

}

/*====================================================================
    04. UTILIDADES
=====================================================================*/

/*==============================
    FONDOS
==============================*/

.qr-bg-white{
    background:var(--qr-white);
}

.qr-bg-light{
    background:var(--qr-light);
}

.qr-bg-primary{
    background:var(--qr-primary);
}

.qr-bg-dark{
    background:var(--qr-dark);
}


/*==============================
    ALINEACIÓN
==============================*/

.qr-text-center{
    text-align:center;
}

.qr-text-left{
    text-align:left;
}

.qr-text-right{
    text-align:right;
}

/*==============================
    ESPACIADOS
==============================*/

.qr-mt-1{
    margin-top:1rem;
}

.qr-mt-2{
    margin-top:2rem;
}

.qr-mt-3{
    margin-top:3rem;
}

.qr-mb-1{
    margin-bottom:1rem;
}

.qr-mb-2{
    margin-bottom:2rem;
}

.qr-mb-3{
    margin-bottom:3rem;
}

/*==============================
    GRID
==============================*/

.qr-grid{

    display:grid;

    gap:40px;

}

.qr-grid-2{

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

}

.qr-grid-3{

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

}

.qr-grid-4{

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

}

/*==============================
    FLEX
==============================*/

.qr-flex{

    display:flex;

}

.qr-flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.qr-flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.qr-flex-column{

    display:flex;

    flex-direction:column;

}

/*====================================================================
    05. BOTONES
=====================================================================*/

.qr-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:16px 34px;

    border-radius:50px;

    font-size:1rem;

    font-weight:700;

    transition:var(--qr-transition);

    cursor:pointer;

}

/*==============================
    Botón Primario
==============================*/

.qr-btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:16px 32px;

    background:linear-gradient(
        135deg,
        var(--qr-primary),
        var(--qr-secondary)
    );

    color:var(--qr-white);

    font-size:1rem;

    font-weight:700;

    text-decoration:none;

    border:none;

    border-radius:14px;

    box-shadow:0 18px 35px rgba(15,76,129,.18);

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

}

.qr-btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 24px 45px rgba(15,76,129,.25);

}

/*==================================================
VENTANA GOOGLE MAPS
==================================================*/

.qr-map-window{

    width:260px;

    padding:8px;

    font-family:'Montserrat',sans-serif;

}

.qr-map-window h3{

    margin-bottom:15px;

    color:#0B2E59;

    font-size:1.2rem;

}

.qr-map-window p{

    margin-bottom:12px;

    color:#5B6472;

    line-height:1.6;

    font-size:.92rem;

}

.qr-map-btn{

    display:block;

    margin-top:18px;

    padding:12px;

    text-align:center;

    border-radius:10px;

    text-decoration:none;

    background:#0B4F8A;

    color:#FFFFFF;

    font-weight:700;

    transition:.3s;

}

.qr-map-btn:hover{

    background:#0069B4;

}

.qr-btn-primary i{

    font-size:1rem;

}

/*==============================
    Botón Secundario
==============================*/

.qr-btn-secondary{

    background:var(--qr-secondary);

    color:var(--qr-white);

}

.qr-btn-secondary:hover{

    background:var(--qr-secondary-dark);

    transform:translateY(-4px);

}

/*==============================
    Botón Outline
==============================*/

.qr-btn-outline{

    border:2px solid var(--qr-primary);

    color:var(--qr-primary);

    background:transparent;

}

.qr-btn-outline:hover{

    background:var(--qr-primary);

    color:var(--qr-white);

}

/*==============================
    Botón Blanco
==============================*/

.qr-btn-white{

    background:var(--qr-white);

    color:var(--qr-primary);

}

.qr-btn-white:hover{

    transform:translateY(-4px);

    box-shadow:var(--qr-shadow-md);

}

/*====================================================================
    06. COMPONENTES GENERALES
=====================================================================*/
/*==============================
    Cards
==============================*/

.qr-card{

    background:var(--qr-white);

    border-radius:var(--qr-radius-md);

    padding:40px;

    box-shadow:var(--qr-shadow-sm);

    transition:var(--qr-transition);

}

.qr-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--qr-shadow-lg);

}

/*==============================
    Iconos
==============================*/

.qr-icon{

    width:80px;

    height:80px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(15,76,129,.08);

    color:var(--qr-primary);

    font-size:2rem;

    margin-bottom:25px;

}

/*==============================
    Titulares
==============================*/

.qr-card h3{

    margin-bottom:18px;

    font-size:1.5rem;

}

.qr-card p{

    margin-bottom:0;

}

/*==============================
    Etiquetas
==============================*/

.qr-badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:50px;

    background:rgba(0,168,232,.10);

    color:var(--qr-secondary);

    font-size:.85rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

}

/*====================================================================
    06. HEADER PREMIUM 
=====================================================================*/
/*==============================================================
    HEADER
==============================================================*/

.qr-header{

    position:fixed;

    top:20px;

    left:0;

    width:100%;

    z-index:9999;

    transition:.35s ease;

}

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

.qr-header .qr-container{

    width:calc(100% - 60px);

    max-width:1700px;

    margin:auto;

    padding:0;

}

/*==============================================================
    GRID PRINCIPAL
==============================================================*/

.qr-header-grid{

    display:grid;

    grid-template-columns:

        220px
        minmax(0,1fr)
        auto;

    align-items:center;

    column-gap:24px;

    min-height:95px;

    padding:0 35px;

    background:#080024;

    border-radius:24px;

    box-shadow:

        0 10px 40px rgba(15,76,129,.08),

        0 2px 8px rgba(0,0,0,.04);

    transition:.35s ease;

}

/*==============================================================
    ACCIONES HEADER
==============================================================*/

.qr-header-actions{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:12px;

    flex-wrap:nowrap;

    white-space:nowrap;

}

/*==============================================================
    LOGOTIPO
==============================================================*/

.qr-header-logo{

     width:200px;

    flex-shrink:0;

}

/*==============================================================
    ENLACE DEL LOGO
==============================================================*/

.qr-logo-link{

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    transition:all .35s ease;

}

/*==============================================================
    IMAGEN
==============================================================*/

.qr-logo-link img{

    display:block;

    width:auto;

    height:64px;

    object-fit:contain;

    transition:all .35s ease;

}

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

.qr-logo-link:hover{

    transform:translateY(-2px);

}

.qr-logo-link:hover img{

    transform:scale(1.04);

}

/*==============================================================
    NAVEGACIÓN PRINCIPAL
==============================================================*/

.qr-header-nav{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

}

/*==============================================================
    MENÚ
==============================================================*/

.qr-menu{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:1px;

    list-style:none;

    margin:0;

    padding:0;

}

/*==============================================================
    ITEMS
==============================================================*/

.qr-menu li{

    position:relative;

}

/*==============================================================
    ENLACES
==============================================================*/

.qr-menu li a{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:14px 10px;

    border-radius:12px;

    font-size:15px;

    font-weight:500;

    color:#e4e4e4;

    text-decoration:none;

    transition:all .35s ease;

}

/*==============================================================
    LÍNEA INFERIOR
==============================================================*/

.qr-menu li a::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:4px;

    width:0;

    height:3px;

    border-radius:20px;

    background:#18adc7;

    transform:translateX(-50%);

    transition:.35s ease;

}

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

.qr-menu li a:hover{

    color:#18adc7;
    
    background:rgba(15, 76, 129, 0.05);

}


.qr-menu li a:hover::after{

    width:26px;

}

/*==============================================================
    ENLACE ACTIVO
==============================================================*/

.qr-menu li a.active{

    color:var(--qr-primary);

    background:rgba(15,76,129,.08);

}


.qr-menu li a.active::after{

    width:26px;

}

/*==============================================================
    FOCUS (ACCESIBILIDAD)
==============================================================*/

.qr-menu li a:focus-visible{

    outline:2px solid var(--qr-secondary);

    outline-offset:4px;

}

/*==============================================================
    LOGIN
==============================================================*/

.qr-header-login{

    display:flex;

    align-items:center;

}

/*==============================================================
    BOTÓN INGRESAR
==============================================================*/

.qr-btn-login{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-width:130px;

    height:48px;

    padding:0 22px;

    border:2px solid rgba(15,76,129,.15);

    border-radius:14px;

    background:#ffffff;

    color:var(--qr-title);

    font-size:15px;

    font-weight:600;

    text-decoration:none;

    transition:all .35s ease;

    cursor:pointer;

}

/*==============================================================
    ICONO
==============================================================*/

.qr-btn-login i{

    font-size:16px;

    color:var(--qr-primary);

    transition:all .35s ease;

}

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

.qr-btn-login:hover{

    background:rgba(15,76,129,.05);

    border-color:#18adc7;

    color:#18adc7;

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(11, 138, 170, 0.1);

}

.qr-btn-login:hover i{

    transform:translateX(-2px);

    color:#18adc7;

}

/*==============================================================
    ACTIVE
==============================================================*/

.qr-btn-login:active{

    transform:translateY(0);

    box-shadow:none;

}

/*==============================================================
    FOCUS
==============================================================*/

.qr-btn-login:focus-visible{

    outline:2px solid var(--qr-secondary);

    outline-offset:4px;

}

/*==============================================================
    CTA - SOLICITAR DEMO
==============================================================*/

.qr-header-contact{

    display:flex;

    align-items:center;

}

/*==============================================================
    BOTÓN PRINCIPAL
==============================================================*/

.qr-header-contact .qr-btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-width:190px;

    height:52px;

    padding:0 28px;

    border:none;

    border-radius:16px;

    background:linear-gradient(135deg,#0F4C81 0%,#1976D2 100%);

    color:#ffffff;

    font-size:13px;

    font-weight:500;

    text-decoration:none;

    letter-spacing:.2px;

    cursor:pointer;

    box-shadow:
        0 12px 28px rgba(15,76,129,.25);

    transition:all .35s ease;

}

/*==============================================================
    ICONO
==============================================================*/

.qr-header-contact .qr-btn-primary i{

    font-size:15px;

    transition:transform .35s ease;

}

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

.qr-header-contact .qr-btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:
        0 18px 36px rgba(15,76,129,.35);

    background:linear-gradient(135deg,#1565C0 0%,#2196F3 100%);

}


.qr-header-contact .qr-btn-primary:hover i{

    transform:translateX(5px);

}

/*==============================================================
    ACTIVE
==============================================================*/

.qr-header-contact .qr-btn-primary:active{

    transform:translateY(0);

    box-shadow:
        0 8px 16px rgba(15,76,129,.20);

}

/*==============================================================
    FOCUS
==============================================================*/

.qr-header-contact .qr-btn-primary:focus-visible{

    outline:3px solid rgba(25,118,210,.35);

    outline-offset:4px;

}

/*==============================================================
    HEADER EN SCROLL
==============================================================*/

.qr-header.hide{

    transform:translateY(-100%);

}

.qr-header.scrolled{

    height:78px;

    box-shadow:var(--qr-shadow-md);

}

/*==============================================================
    MENU TOGGLE
==============================================================*/

.qr-menu-toggle{

    display:none !important;

}

/*==============================================================
    HEADER STICKY
==============================================================*/

.qr-header{

    transform:translateY(0);

    transition:
        transform .35s ease,
        top .35s ease;

}

/*--------------------------------------------------------------
    Ocultar Header
--------------------------------------------------------------*/

.qr-header.header-hidden{

    transform:translateY(-140%);

}

/*--------------------------------------------------------------
    Mostrar Header
--------------------------------------------------------------*/

.qr-header.header-visible{

    transform:translateY(0);

}

/*====================================================================
    07. HERO PREMIUM
=====================================================================*/
/*==============================================================
    HERO
==============================================================*/

.qr-hero{

    position:relative;

    width:100%;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background-image:url("../img/hero/hero-public-space.webp");

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;

}

/*==============================================================
    OVERLAY
==============================================================*/

.qr-hero-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            90deg,

            rgba(7,10,25,.72) 0%,

            rgba(7,10,25,.55) 30%,

            rgba(7,10,25,.25) 60%,

            rgba(7,10,25,.08) 100%

        );

    z-index:1;

}

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

.qr-hero .qr-container{

    position:relative;

    z-index:2;

}

/*==============================================================
    GRID
==============================================================*/

.qr-hero-grid{

    display:flex;

    align-items:center;

    min-height:100vh;

    max-width:760px;

    padding-top:70px;

}

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

.qr-hero-content{

    position:relative;

    z-index:2;

    max-width:920px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;

    padding:80px 20px 0 40px;

}

/*==============================================================
    ACCIONES HERO
==============================================================*/

.qr-hero-actions{

    display:flex;

    align-items:center;

    gap:20px;

    margin:42px 0 70px;

    flex-wrap:wrap;

}

/*==============================================================
    MÉTRICAS HERO
==============================================================*/

.qr-hero-metrics{

    display:flex;

    align-items:flex-start;

    gap:55px;

    margin-top:30px;

    flex-wrap:wrap;

}

/*==============================================================
    MÉTRICA
==============================================================*/

.qr-metric{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.qr-metric strong{

    color:#FFFFFF;

    font-size:34px;

    font-weight:800;

    line-height:1;

}

.qr-metric span{

    color:rgba(255,255,255,.88);

    font-size:15px;

    font-weight:500;

    line-height:1.5;

    max-width:130px;

}

.qr-metric:not(:last-child){

    padding-right:40px;

    border-right:1px solid rgba(255,255,255,.18);

}

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

.qr-hero-actions .qr-btn-primary{

    padding:18px 34px;

    border-radius:14px;

    font-size:17px;

}

.qr-hero-actions .qr-btn-secondary{

    padding:18px 34px;

    border:4px solid rgba(255,255,255,.35);

    background:transparent;

    color:#FFFFFF;

    border-radius:14px;

    font-size:17px;

}

.qr-hero-actions .qr-btn-secondary:hover{

    border-color:#18ADC7;

    color:#18ADC7;

    background:rgba(24,173,199,.12);

}

/*==============================================================
    BADGE HERO
==============================================================*/

.qr-hero-tag{

    display:inline-flex;

    align-items:center;

    margin-bottom:28px;

    padding:10px 18px;

    border-left:4px solid #18ADC7;

    background:rgba(24,173,199,.12);

    color:#8FEFFF;

    font-size:15px;

    font-weight:600;

    letter-spacing:.3px;

    text-shadow:0 2px 8px rgba(0,0,0,.30);

}

/*==============================================================
    TÍTULO HERO
==============================================================*/

.qr-hero-content h1{

    margin:0 0 24px;

    max-width:760px;

    color:#FFFFFF;

    font-size:65px;

    font-weight:700;

    line-height:1.08;

    letter-spacing:-2px;

    text-shadow:

        0 6px 18px rgba(0,0,0,.35);

}

/*==============================================================
    PÁRRAFO HERO
==============================================================*/

.qr-hero-content p{

    max-width:720px;

    margin:0 0 42px;

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

    font-size:22px;

    font-weight:400;

    line-height:1.75;

    letter-spacing:.2px;

    text-shadow:

        0 3px 12px rgba(0,0,0,.30);

}

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

.qr-hero-buttons{

    display:flex;

    align-items:center;

    gap:18px;

    margin:45px 0 60px;

    flex-wrap:wrap;

}

/*====================================================================
    08. BLOQUE 01
    LA IMPORTANCIA DE ADMINISTRAR EL ESPACIO PÚBLICO
====================================================================*/

/*==============================================================
    SECCIÓN PRINCIPAL
==============================================================*/

.qr-public-space{

    position:relative;

    background:var(--qr-white);

    overflow:hidden;

}

/*==============================================================
    FONDO DECORATIVO
==============================================================*/

.qr-public-space::before{

    content:"";

    position:absolute;

    top:-180px;

    right:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(15,76,129,.04);

}

.qr-public-space::after{

    content:"";

    position:absolute;

    bottom:-180px;

    left:-180px;

    width:320px;

    height:320px;

    border-radius:50%;

    background:rgba(0,168,232,.05);

}

/*==============================================================
    PORTAL INSTITUCIONAL DADEP
==============================================================*/

.qr-dadep-access{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:45px;

}

.qr-btn-dadep{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    padding:18px 38px;

    border-radius:16px;

    background:linear-gradient(
        135deg,
        var(--qr-primary),
        var(--qr-secondary)
    );

    color:var(--qr-white);

    font-size:1rem;

    font-weight:700;

    text-decoration:none;

    box-shadow:
        0 16px 35px rgba(15,76,129,.18);

    transition:all .35s ease;

}

.qr-btn-dadep i{

    font-size:1.1rem;

}

.qr-btn-dadep:hover{

    transform:translateY(-4px);

    box-shadow:
        0 24px 45px rgba(15,76,129,.28);

    background:linear-gradient(
        135deg,
        #1565C0,
        #18ADC7
    );

}

.qr-btn-dadep:active{

    transform:translateY(0);

}

.qr-btn-dadep:focus-visible{

    outline:3px solid rgba(24,173,199,.35);

    outline-offset:4px;

}

/*==============================================================
    GRID PRINCIPAL
==============================================================*/

.qr-public-grid{

    display:flex;

    flex-direction:column;

    gap:70px;

    margin-top:70px;

}

/*==============================================================
    CONTENIDO INFORMATIVO
==============================================================*/

.qr-public-content{

    max-width:980px;

    margin:0 auto;

    text-align:center;

}

/*==============================================================
    COLUMNA IZQUIERDA
==============================================================*/

.qr-public-content h3{

    font-size:2rem;

    color:var(--qr-title);

    margin-bottom:25px;

    font-weight:800;

}

.qr-public-content p{

    margin:0 auto 5px;

    font-size:1.05rem;

    line-height:1.9;

}

/*==============================================================
    TARJETAS INFORMATIVAS
==============================================================*/

.qr-public-highlights{

    display:grid;

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

    gap:30px;

    align-items:stretch;

}

/*==============================================================
    TARJETAS
==============================================================*/

.qr-highlight-card{

    background:#FFFFFF;

    padding:40px;

    border-radius:24px;

    border:1px solid rgba(15,35,75,.14);

    box-shadow:0 12px 35px rgba(15,35,75,.08);

    transition:all .35s ease;

    height:100%;

}

/*==============================================================
    EFECTO SUPERIOR
==============================================================*/

.qr-highlight-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:5px;

    height:100%;

    background:var(--qr-primary);

    transform:scaleY(0);

    transform-origin:top;

    transition:.4s;

}


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

.qr-highlight-card:hover{

    transform:translateY(-8px);

    box-shadow:0 24px 60px rgba(15,35,75,.15);

}

.qr-highlight-card:hover::before{

    transform:scaleY(1);

}


/*==============================================================
    ICONOS
==============================================================*/

.qr-highlight-card i{

    width:72px;

    height:72px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    margin-bottom:25px;

    background:rgba(15,76,129,.08);

    color:var(--qr-primary);

    font-size:2rem;

}


/*==============================================================
    TÍTULOS
==============================================================*/

.qr-highlight-card h4{

    margin-bottom:15px;

    color:var(--qr-title);

    font-size:1.35rem;

    font-weight:700;

}


/*==============================================================
    TEXTO
==============================================================*/

.qr-highlight-card p{

    margin:0;

    line-height:1.8;

    color:var(--qr-text);

}


/*==============================================================
    ETIQUETA DE SECCIÓN
==============================================================*/

.qr-section-tag{

    display:inline-flex;

    align-items:center;

    padding:14px 30px;

    margin-bottom:28px;

    background:rgba(0,168,232,.08);

    color:var(--qr-secondary);

    border-radius:50px;

    font-size:1rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

/*====================================================================
    09. BLOQUE 02
    ¿POR QUÉ NACE QRESP?
=====================================================================*/
/*==============================================================
    SECCIÓN PRINCIPAL
==============================================================*/

.qr-why-qresp{

    position:relative;

    padding:70px 0;

    background:linear-gradient(
        180deg,
        #F7FAFD 0%,
        #FFFFFF 100%
    );

    overflow:hidden;

}

/*==============================================================
    FONDO DECORATIVO
==============================================================*/

.qr-why-qresp::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(15,76,129,.05);

}

.qr-why-qresp::after{

    content:"";

    position:absolute;

    bottom:-180px;

    right:-180px;

    width:320px;

    height:320px;

    border-radius:50%;

    background:rgba(0,168,232,.05);

}


/*==============================================================
    GRID PRINCIPAL
==============================================================*/

.qr-why-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:start;

}

/*==============================================================
    COLUMNA IZQUIERDA
==============================================================*/

.qr-current-situation{

    background:#FFFFFF;

    padding:45px;

    border-radius:28px;

    border:1px solid rgba(15,35,75,.14);

    box-shadow:0 18px 45px rgba(15,35,75,.08);

}

.qr-current-situation h3{

    margin-bottom:30px;

    font-size:1.8rem;

    font-weight:800;

    color:var(--qr-title);

}


/*==============================================================
    LISTA DE DESAFÍOS
==============================================================*/

.qr-challenge-list{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.qr-challenge-list li{

    display:flex;

    align-items:flex-start;

    gap:15px;

    line-height:1.8;

}

.qr-challenge-list i{

    color:var(--qr-danger);

    font-size:1.1rem;

    margin-top:5px;

}

/*==============================================================
    TARJETA SOLUCIÓN
==============================================================*/

.qr-solution-card{

    background:#FFFFFF;

    padding:45px;

    border-radius:28px;

    border:1px solid rgba(15,35,75,.14);

    box-shadow:0 18px 45px rgba(15,35,75,.08);

}


/*==============================================================
    EFECTO DECORATIVO
==============================================================*/

.qr-solution-card::before{

    content:"";

    position:absolute;

    top:-120px;

    right:-120px;

    width:260px;

    height:260px;

    border-radius:50%;

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

}


/*==============================================================
    ETIQUETA
==============================================================*/

.qr-card-tag{

    display:inline-block;

    padding:10px 22px;

    margin-bottom:25px;

    border-radius:50px;

    background:rgba(0,124,255,.10);

    color:var(--qr-primary);

    font-size:.90rem;

    font-weight:700;

    text-transform:uppercase;

}


/*==============================================================
    TITULOS
==============================================================*/

.qr-solution-card h3{

    color:var(--qr-dark);

    font-size:2rem;

    margin-bottom:25px;

}

.qr-solution-card p{

    color:var(--qr-text);

}


/*==============================================================
    ITEMS DE SOLUCIÓN
==============================================================*/

.qr-solution-items{

    display:flex;

    flex-direction:column;

    gap:28px;

    margin-top:40px;

}

.qr-solution-item{

    display:flex;

    gap:22px;

    align-items:flex-start;

}


/*==============================================================
    ICONOS
==============================================================*/

.qr-solution-item i{

    width:60px;

    height:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:rgba(0,124,255,.10);

    color:var(--qr-primary);

    font-size:1.4rem;

    flex-shrink:0;

}

/*==============================================================
    INFORMACIÓN
==============================================================*/

.qr-solution-item h4{

    color:var(--qr-dark);

    margin-bottom:8px;

    font-size:1.15rem;

}

.qr-solution-item p{

    margin:0;

    color:var(--qr-text);

}


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

.qr-solution-card:hover{

    transform:translateY(-8px);

    transition:var(--qr-transition);

}

.qr-current-situation:hover{

    transform:translateY(-8px);

    box-shadow:var(--qr-shadow-lg);

    transition:var(--qr-transition);

}

/*====================================================================
    10. BLOQUE 03
    LOS TRES PILARES DE QRESP
=====================================================================*/
/*==============================================================
    SECCIÓN PRINCIPAL
==============================================================*/

.qr-pillars{

    position:relative;

    background:var(--qr-white);

    overflow:hidden;

}

/*==============================================================
    FONDO DECORATIVO
==============================================================*/

.qr-pillars::before{

    content:"";

    position:absolute;

    top:-180px;

    right:-180px;

    width:380px;

    height:380px;

    border-radius:50%;

    background:rgba(15,76,129,.04);

}

.qr-pillars::after{

    content:"";

    position:absolute;

    bottom:-180px;

    left:-180px;

    width:320px;

    height:320px;

    border-radius:50%;

    background:rgba(0,168,232,.05);

}

/*==============================================================
    GRID PRINCIPAL
==============================================================*/

.qr-pillars-grid{

    display:grid;

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

    gap:35px;

    margin-top:70px;

}

/*==============================================================
    TARJETAS
==============================================================*/

.qr-pillar-card{

    position:relative;

    background:var(--qr-white);

    padding:45px;

    border-radius:var(--qr-radius-lg);

    border:1px solid var(--qr-border);

    box-shadow:var(--qr-shadow-sm);

    transition:var(--qr-transition);

    overflow:hidden;

}

/*==============================================================
    BORDE SUPERIOR
==============================================================*/

.qr-pillar-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:var(--qr-primary);

    transform:scaleX(0);

    transform-origin:left;

    transition:.40s;

}


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

.qr-pillar-card:hover{

    transform:translateY(-12px);

    box-shadow:var(--qr-shadow-lg);

}

.qr-pillar-card:hover::before{

    transform:scaleX(1);

}


/*==============================================================
    ICONO
==============================================================*/

.qr-pillar-icon{

    width:90px;

    height:90px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    margin-bottom:30px;

    background:rgba(15,76,129,.08);

}

.qr-pillar-icon i{

    font-size:2.2rem;

    color:var(--qr-primary);

}


/*==============================================================
    TITULOS
==============================================================*/

.qr-pillar-card h3{

    margin-bottom:20px;

    color:var(--qr-title);

    font-size:1.6rem;

    font-weight:700;

}


/*==============================================================
    DESCRIPCIÓN
==============================================================*/

.qr-pillar-card p{

    margin-bottom:30px;

    line-height:1.8;

}


/*==============================================================
    LISTA
==============================================================*/

.qr-pillar-card ul{

    display:flex;

    flex-direction:column;

    gap:18px;

}


/*==============================================================
    ITEMS
==============================================================*/

.qr-pillar-card li{

    display:flex;

    align-items:flex-start;

    gap:12px;

    line-height:1.7;

    color:var(--qr-text);

}


/*==============================================================
    VIÑETAS
==============================================================*/

.qr-pillar-card li::before{

    content:"";

    width:10px;

    height:10px;

    border-radius:50%;

    margin-top:10px;

    background:var(--qr-secondary);

    flex-shrink:0;

}


/*==============================================================
    MENSAJE INSTITUCIONAL
==============================================================*/

.qr-pillars-message{

    margin-top:90px;

    text-align:center;

}


/*==============================================================
    BLOCKQUOTE
==============================================================*/

.qr-pillars-message blockquote{

    max-width:980px;

    margin:auto;

    padding:50px;

    border-radius:var(--qr-radius-lg);

    background:linear-gradient(
        135deg,
        var(--qr-primary),
        var(--qr-secondary)
    );

    color:var(--qr-white);

    font-size:1.35rem;

    font-weight:600;

    line-height:1.8;

    box-shadow:var(--qr-shadow-lg);

}


/*==============================================================
    COMILLAS DECORATIVAS
==============================================================*/

.qr-pillars-message blockquote::before{

    content:"“";

    display:block;

    font-size:5rem;

    line-height:1;

    opacity:.20;

    margin-bottom:20px;

}

/*====================================================================
    11. BLOQUE 04
    EXPEDIENTE DIGITAL DEL VENDEDOR INFORMAL
=====================================================================*/


/*==============================================================
    SECCIÓN PRINCIPAL
==============================================================*/

.qr-digital-record{

    position: relative;

    background: var(--qr-light);

    overflow: hidden;

}


/*==============================================================
    FONDO DECORATIVO
==============================================================*/

.qr-digital-record::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(15,76,129,.04);

}

.qr-digital-record::after{

    content:"";

    position:absolute;

    bottom:-180px;

    right:-180px;

    width:320px;

    height:320px;

    border-radius:50%;

    background:rgba(0,168,232,.05);

}


/*==============================================================
    GRID PRINCIPAL
==============================================================*/

.qr-record-grid{

    display:grid;

    grid-template-columns:1fr 1.25fr;

    gap:70px;

    align-items:start;

    margin-top:70px;

}


/*==============================================================
    INFORMACIÓN
==============================================================*/

.qr-record-content h3{

    margin-bottom:25px;

    font-size:2rem;

    color:var(--qr-title);

    font-weight:800;

}

.qr-record-content p{

    margin-bottom:25px;

    line-height:1.9;

}


/*==============================================================
    GRID DE FUNCIONALIDADES
==============================================================*/

.qr-record-features{

    display:grid;

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

    gap:25px;

}


/*==============================================================
    TARJETAS
==============================================================*/

.qr-feature-card{

    background:var(--qr-white);

    padding:32px;

    border-radius:var(--qr-radius-md);

    border:1px solid var(--qr-border);

    box-shadow:var(--qr-shadow-sm);

    transition:var(--qr-transition);

    position:relative;

    overflow:hidden;

}

.qr-feature-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:var(--qr-secondary);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.qr-feature-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--qr-shadow-lg);

}

.qr-feature-card:hover::before{

    transform:scaleX(1);

}


/*==============================================================
    ICONOS
==============================================================*/

.qr-feature-card i{

    width:70px;

    height:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:18px;

    margin-bottom:22px;

    background:rgba(15,76,129,.08);

    color:var(--qr-primary);

    font-size:1.9rem;

}


/*==============================================================
    TÍTULOS
==============================================================*/

.qr-feature-card h4{

    margin-bottom:15px;

    font-size:1.25rem;

    color:var(--qr-title);

    font-weight:700;

}


/*==============================================================
    TEXTO
==============================================================*/

.qr-feature-card p{

    margin:0;

    line-height:1.8;

}


/*==============================================================
    BENEFICIOS
==============================================================*/

.qr-record-benefits{

    display:grid;

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

    gap:30px;

    margin-top:80px;

}


/*==============================================================
    TARJETAS BENEFICIOS
==============================================================*/

.qr-benefit{

    background:linear-gradient(
        135deg,
        var(--qr-primary),
        var(--qr-secondary)
    );

    color:var(--qr-white);

    text-align:center;

    padding:40px 30px;

    border-radius:var(--qr-radius-lg);

    box-shadow:var(--qr-shadow-lg);

    transition:var(--qr-transition);

}

.qr-benefit:hover{

    transform:translateY(-8px);

}

.qr-benefit i{

    font-size:2.6rem;

    margin-bottom:22px;

}

.qr-benefit h4{

    margin-bottom:15px;

    color:var(--qr-white);

    font-size:1.3rem;

}

.qr-benefit p{

    margin:0;

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

    line-height:1.8;

}


/*==============================================================
    MENSAJE INSTITUCIONAL
==============================================================*/

.qr-record-message{

    margin-top:80px;

}

.qr-record-message blockquote{

    max-width:1050px;

    margin:auto;

    padding:45px;

    text-align:center;

    background:var(--qr-white);

    border-left:6px solid var(--qr-primary);

    border-radius:var(--qr-radius-lg);

    box-shadow:var(--qr-shadow-sm);

    font-size:1.25rem;

    font-weight:600;

    line-height:1.8;

    color:var(--qr-title);

}

/*====================================================================
    11. BLOQUE 04
    EXPEDIENTE DIGITAL DEL VENDEDOR INFORMAL
=====================================================================*/
/*==============================================================
    SECCIÓN PRINCIPAL
==============================================================*/

.qr-digital-record{

    position: relative;

    background: var(--qr-light);

    overflow: hidden;

}

/*==============================================================
    FONDO DECORATIVO
==============================================================*/

.qr-digital-record::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(15,76,129,.04);

}

.qr-digital-record::after{

    content:"";

    position:absolute;

    bottom:-180px;

    right:-180px;

    width:320px;

    height:320px;

    border-radius:50%;

    background:rgba(0,168,232,.05);

}


/*==============================================================
    GRID PRINCIPAL
==============================================================*/

.qr-record-grid{

    display:grid;

    grid-template-columns:1fr 1.25fr;

    gap:70px;

    align-items:start;

    margin-top:70px;

}


/*==============================================================
    INFORMACIÓN
==============================================================*/

.qr-record-content h3{

    margin-bottom:25px;

    font-size:2rem;

    color:var(--qr-title);

    font-weight:800;

}

.qr-record-content p{

    margin-bottom:25px;

    line-height:1.9;

}


/*==============================================================
    GRID DE FUNCIONALIDADES
==============================================================*/

.qr-record-features{

    display:grid;

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

    gap:25px;

}


/*==============================================================
    TARJETAS
==============================================================*/

.qr-feature-card{

    background:var(--qr-white);

    padding:32px;

    border-radius:var(--qr-radius-md);

    border:1px solid var(--qr-border);

    box-shadow:var(--qr-shadow-sm);

    transition:var(--qr-transition);

    position:relative;

    overflow:hidden;

}

.qr-feature-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:var(--qr-secondary);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.qr-feature-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--qr-shadow-lg);

}

.qr-feature-card:hover::before{

    transform:scaleX(1);

}


/*==============================================================
    ICONOS
==============================================================*/

.qr-feature-card i{

    width:70px;

    height:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:18px;

    margin-bottom:22px;

    background:rgba(15,76,129,.08);

    color:var(--qr-primary);

    font-size:1.9rem;

}


/*==============================================================
    TÍTULOS
==============================================================*/

.qr-feature-card h4{

    margin-bottom:15px;

    font-size:1.25rem;

    color:var(--qr-title);

    font-weight:700;

}


/*==============================================================
    TEXTO
==============================================================*/

.qr-feature-card p{

    margin:0;

    line-height:1.8;

}


/*==============================================================
    BENEFICIOS
==============================================================*/

.qr-record-benefits{

    display:grid;

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

    gap:30px;

    margin-top:80px;

}


/*==============================================================
    TARJETAS BENEFICIOS
==============================================================*/

.qr-benefit{

    background:linear-gradient(
        135deg,
        var(--qr-primary),
        var(--qr-secondary)
    );

    color:var(--qr-white);

    text-align:center;

    padding:40px 30px;

    border-radius:var(--qr-radius-lg);

    box-shadow:var(--qr-shadow-lg);

    transition:var(--qr-transition);

}

.qr-benefit:hover{

    transform:translateY(-8px);

}

.qr-benefit i{

    font-size:2.6rem;

    margin-bottom:22px;

}

.qr-benefit h4{

    margin-bottom:15px;

    color:var(--qr-white);

    font-size:1.3rem;

}

.qr-benefit p{

    margin:0;

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

    line-height:1.8;

}


/*==============================================================
    MENSAJE INSTITUCIONAL
==============================================================*/

.qr-record-message{

    margin-top:80px;

}

.qr-record-message blockquote{

    max-width:1050px;

    margin:auto;

    padding:45px;

    text-align:center;

    background:var(--qr-white);

    border-left:6px solid var(--qr-primary);

    border-radius:var(--qr-radius-lg);

    box-shadow:var(--qr-shadow-sm);

    font-size:1.25rem;

    font-weight:600;

    line-height:1.8;

    color:var(--qr-title);

}

/*====================================================================
    12. BLOQUE 05
    GESTIÓN INTEGRAL DEL ESPACIO PÚBLICO
=====================================================================*/
/*==============================================================
    SECCIÓN PRINCIPAL
==============================================================*/

.qr-public-management{

    position: relative;

    background: var(--qr-white);

    overflow: hidden;

}


/*==============================================================
    FONDOS DECORATIVOS
==============================================================*/

.qr-public-management::before{

    content:"";

    position:absolute;

    top:-180px;

    right:-180px;

    width:380px;

    height:380px;

    border-radius:50%;

    background:rgba(15,76,129,.04);

}

.qr-public-management::after{

    content:"";

    position:absolute;

    bottom:-200px;

    left:-200px;

    width:340px;

    height:340px;

    border-radius:50%;

    background:rgba(0,168,232,.05);

}


/*==============================================================
    GRID PRINCIPAL
==============================================================*/

.qr-management-grid{

    display:grid;

    grid-template-columns:1fr 1.15fr;

    gap:70px;

    align-items:start;

    margin-top:70px;

}


/*==============================================================
    INFORMACIÓN
==============================================================*/

.qr-management-content h3{

    margin-bottom:25px;

    font-size:2rem;

    font-weight:800;

    color:var(--qr-title);

}

.qr-management-content p{

    margin-bottom:25px;

    line-height:1.9;

}


/*==============================================================
    GRID DE SERVICIOS
==============================================================*/

.qr-management-services{

    display:grid;

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

    gap:25px;

}


/*==============================================================
    TARJETAS
==============================================================*/

.qr-service-card{

    background:var(--qr-white);

    padding:35px;

    border-radius:var(--qr-radius-md);

    border:1px solid var(--qr-border);

    box-shadow:var(--qr-shadow-sm);

    transition:var(--qr-transition);

    position:relative;

    overflow:hidden;

}

.qr-service-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:var(--qr-primary);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.qr-service-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--qr-shadow-lg);

}

.qr-service-card:hover::before{

    transform:scaleX(1);

}


/*==============================================================
    ICONOS
==============================================================*/

.qr-service-card i{

    width:72px;

    height:72px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:18px;

    margin-bottom:22px;

    background:rgba(15,76,129,.08);

    color:var(--qr-primary);

    font-size:2rem;

}


/*==============================================================
    TITULOS
==============================================================*/

.qr-service-card h4{

    margin-bottom:15px;

    color:var(--qr-title);

    font-size:1.3rem;

    font-weight:700;

}


/*==============================================================
    TEXTO
==============================================================*/

.qr-service-card p{

    margin:0;

    line-height:1.8;

}


/*==============================================================
    CAPACIDADES
==============================================================*/

.qr-capabilities{

    margin-top:90px;

}

.qr-capabilities h3{

    text-align:center;

    margin-bottom:45px;

    font-size:2rem;

    color:var(--qr-title);

}


/*==============================================================
    GRID CAPACIDADES
==============================================================*/

.qr-capabilities-grid{

    display:grid;

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

    gap:30px;

}


/*==============================================================
    ITEMS
==============================================================*/

.qr-capability{

    display:flex;

    align-items:center;

    gap:18px;

    padding:28px;

    background:var(--qr-light);

    border-radius:var(--qr-radius-md);

    border:1px solid var(--qr-border);

    transition:var(--qr-transition);

}

.qr-capability:hover{

    background:var(--qr-primary);

    color:var(--qr-white);

    transform:translateY(-6px);

}

.qr-capability:hover span{

    color:var(--qr-white);

}

.qr-capability:hover i{

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

    color:var(--qr-white);

}


/*==============================================================
    ICONOS CAPACIDADES
==============================================================*/

.qr-capability i{

    width:58px;

    height:58px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:16px;

    background:rgba(15,76,129,.08);

    color:var(--qr-primary);

    font-size:1.4rem;

    transition:var(--qr-transition);

}

.qr-capability span{

    font-weight:700;

    color:var(--qr-title);

}


/*==============================================================
    MENSAJE INSTITUCIONAL
==============================================================*/

.qr-management-message{

    margin-top:90px;

}

.qr-management-message blockquote{

    max-width:1100px;

    margin:auto;

    padding:55px;

    border-radius:var(--qr-radius-lg);

    background:linear-gradient(
        135deg,
        var(--qr-primary),
        var(--qr-secondary)
    );

    color:var(--qr-white);

    text-align:center;

    font-size:1.3rem;

    font-weight:600;

    line-height:1.9;

    box-shadow:var(--qr-shadow-lg);

}



/*====================================================================
    BLOQUE 07.5
    UNA PLATAFORMA PARA MUNICIPIOS DE TODAS LAS CATEGORÍAS
=====================================================================*/

/*==============================================================
    SECCIÓN PRINCIPAL
==============================================================*/

.qr-municipalities{

    position:relative;

    padding:90px 0;

    background:linear-gradient(
        180deg,
        #FFFFFF 0%,
        #F8FBFF 100%
    );

    overflow:hidden;

}

/*==============================================================
    CONTENIDO CENTRAL
==============================================================*/

.qr-municipality-content{

    max-width:1200px;

    margin:0 auto 70px;

    text-align:center;

}

.qr-municipality-content h3{

    width:100%;

    max-width:1000px;

    margin:0 auto 40px;

    font-size:3.8rem;

    font-weight:800;

    line-height:1.10;

    letter-spacing:-1.5px;

    color:var(--qr-title);

}

.qr-municipality-content p{

    max-width:900px;

    margin:0 auto 28px;

    font-size:1.18rem;

    line-height:1.95;

    color:var(--qr-text);

}

.qr-municipality-content p:last-child{

    margin-bottom:0;

}

/*==============================================================
    COLUMNA IZQUIERDA
==============================================================*/

.qr-municipality-content{

    max-width:900px;

}

.qr-municipality-content h3{

    font-size:3rem;

    font-weight:800;

    line-height:1.12;

    color:var(--qr-title);

    margin-bottom:32px;

    letter-spacing:-1px;

}

.qr-municipality-content p{

    max-width:1100px;

    font-size:1.18rem;

    line-height:1.95;

    color:var(--qr-text);

    margin-bottom:28px;

}

.qr-municipality-content p:last-child{

    margin-bottom:0;

}

/*==============================================================
    CONTENEDOR TARJETAS
==============================================================*/

.qr-municipality-cards{

    display:grid;

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

    gap:32px;

    width:100%;

    max-width:1280px;

    margin:0 auto;

    align-items:stretch;

}

/*==============================================================
    TARJETAS MUNICIPIOS
==============================================================*/

.qr-municipality-card{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    height:100%;

    padding:28px 28px;

    min-height:360px;

    background:var(--qr-white);

    border:1px solid rgba(15,35,75,.14);

    border-radius:24px;

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

    transition:all .35s ease;

    overflow:hidden;

}

.qr-municipality-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        var(--qr-primary),
        var(--qr-secondary)
    );

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s ease;

}

.qr-municipality-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 70px rgba(15,35,75,.16);

}

.qr-municipality-card:hover::before{

    transform:scaleX(1);

}

/*==============================================================
    ICONO
==============================================================*/

.qr-municipality-card i{

    display:flex;

    align-items:center;

    justify-content:center;

    width:78px;

    height:78px;

    margin-bottom:28px;

    border-radius:22px;

    background:rgba(17,118,212,.08);

    color:var(--qr-primary);

    font-size:2rem;

    transition:.35s ease;

}

.qr-municipality-card:hover i{

    background:var(--qr-primary);

    color:var(--qr-white);

    transform:rotate(-8deg) scale(1.08);

}

/*==============================================================
    TITULO
==============================================================*/

.qr-municipality-card h4{

    margin-bottom:18px;

    font-size:1.45rem;

    font-weight:700;

    line-height:1.3;

    color:var(--qr-title);

}

/*==============================================================
    TEXTO
==============================================================*/

.qr-municipality-card p{

    margin:0;

    color:var(--qr-text);

    font-size:1rem;

    line-height:1.8;

}

/*==============================================================
    BENEFICIOS
==============================================================*/

.qr-benefits-grid{

    display:grid;

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

    gap:25px;

    margin-top:90px;

}

/*==============================================================
    TARJETA BENEFICIO
==============================================================*/

.qr-benefit-item{

    background:#FFFFFF;

    border:1px solid rgba(15,35,75,.14);

    border-radius:22px;

    padding:35px 28px;

    text-align:center;

    transition:all .35s ease;

    box-shadow:0 12px 30px rgba(15,35,75,.06);

    position:relative;

    overflow:hidden;

}

.qr-benefit-item::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--qr-primary),
        #43B4FF
    );

    transform:scaleX(0);

    transition:.35s ease;

}

.qr-benefit-item:hover{

    transform:translateY(-8px);

    box-shadow:0 22px 55px rgba(15,35,75,.14);

}

.qr-benefit-item:hover::before{

    transform:scaleX(1);

}

/*==============================================================
    ICONO
==============================================================*/

.qr-benefit-item i{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 24px;

    border-radius:20px;

    background:rgba(17,118,212,.08);

    color:var(--qr-primary);

    font-size:1.8rem;

    transition:.35s ease;

}

.qr-benefit-item:hover i{

    background:var(--qr-primary);

    color:#FFFFFF;

    transform:scale(1.08);

}

/*==============================================================
    TITULO
==============================================================*/

.qr-benefit-item h4{

    margin-bottom:15px;

    font-size:1.30rem;

    font-weight:700;

    color:var(--qr-title);

}

/*==============================================================
    TEXTO
==============================================================*/

.qr-benefit-item p{

    margin:0;

    font-size:1rem;

    line-height:1.75;

    color:var(--qr-text);

}

/*==============================================================
    MENSAJE INSTITUCIONAL
==============================================================*/

.qr-municipality-message{

    margin-top:90px;

    display:flex;

    justify-content:center;

}

.qr-municipality-message blockquote{

    position:relative;

    max-width:980px;

    padding:55px 70px;

    border-radius:28px;

    background:linear-gradient(
        135deg,
        var(--qr-primary),
        #0B5ED7
    );

    color:#FFFFFF;

    text-align:center;

    font-size:1.55rem;

    font-weight:500;

    line-height:1.8;

    box-shadow:0 25px 60px rgba(15,35,75,.18);

    overflow:hidden;

}

.qr-municipality-message blockquote::before{

    content:"“";

    position:absolute;

    top:-30px;

    left:35px;

    font-size:8rem;

    font-weight:700;

    color:rgba(255,255,255,.12);

    line-height:1;

}

.qr-municipality-message blockquote::after{

    content:"”";

    position:absolute;

    right:35px;

    bottom:-70px;

    font-size:8rem;

    font-weight:700;

    color:rgba(255,255,255,.12);

    line-height:1;

}


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

.qr-municipality-card,
.qr-benefit-item{

    will-change:transform;

}

.qr-municipality-card:hover{

    cursor:default;

}

.qr-benefit-item:hover{

    cursor:default;

}


/*==============================================================
    RESPONSIVE BASE
==============================================================*/

@media (max-width:1200px){

    .qr-municipality-grid{

        grid-template-columns:1fr;

        gap:60px;

    }

    .qr-municipality-content{

        max-width:100%;

    }

    .qr-benefits-grid{

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

    }

}


@media (max-width:768px){

    .qr-municipality-cards{

        grid-template-columns:1fr;

    }

    .qr-benefits-grid{

        grid-template-columns:1fr;

    }

    .qr-municipality-content h3{

        font-size:2.3rem;

    }

    .qr-municipality-message blockquote{

        padding:40px 30px;

        font-size:1.20rem;

    }

}

/*====================================================================
    14. BLOQUE 07
    ANALÍTICA E INTELIGENCIA TERRITORIAL
=====================================================================*/
/*==============================================================
    SECCIÓN PRINCIPAL
==============================================================*/

.qr-analytics{

    position:relative;

    background:var(--qr-white);

    overflow:hidden;

}

/*==============================================================
    FONDOS DECORATIVOS
==============================================================*/

.qr-analytics::before{

    content:"";

    position:absolute;

    top:-220px;

    right:-220px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(15,76,129,.04);

}

.qr-analytics::after{

    content:"";

    position:absolute;

    bottom:-180px;

    left:-180px;

    width:340px;

    height:340px;

    border-radius:50%;

    background:rgba(0,168,232,.05);

}


/*==============================================================
    GRID PRINCIPAL
==============================================================*/

.qr-analytics-grid{

    display:grid;

    grid-template-columns:1fr 1.2fr;

    gap:70px;

    align-items:start;

    margin-top:70px;

}


/*==============================================================
    CONTENIDO
==============================================================*/

.qr-analytics-content h3{

    font-size:2rem;

    font-weight:800;

    color:var(--qr-title);

    margin-bottom:25px;

}

.qr-analytics-content p{

    line-height:1.9;

    margin-bottom:25px;

}


/*==============================================================
    PANEL DE MÉTRICAS
==============================================================*/

.qr-metrics-grid{

    display:grid;

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

    gap:25px;

}


/*==============================================================
    TARJETAS
==============================================================*/

.qr-metric-card{

    background:var(--qr-white);

    border:1px solid var(--qr-border);

    border-radius:var(--qr-radius-md);

    padding:35px;

    box-shadow:var(--qr-shadow-sm);

    transition:var(--qr-transition);

    position:relative;

    overflow:hidden;

}

.qr-metric-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-top:4px solid var(--qr-primary);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.qr-metric-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--qr-shadow-lg);

}

.qr-metric-card:hover::before{

    transform:scaleX(1);

}


/*==============================================================
    ICONOS
==============================================================*/

.qr-metric-card i{

    width:72px;

    height:72px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:18px;

    margin-bottom:22px;

    background:rgba(15,76,129,.08);

    color:var(--qr-primary);

    font-size:2rem;

}


/*==============================================================
    TÍTULOS
==============================================================*/

.qr-metric-card h4{

    margin-bottom:15px;

    color:var(--qr-title);

    font-size:1.25rem;

    font-weight:700;

}

.qr-metric-card p{

    margin:0;

    line-height:1.8;

}


/*==============================================================
    INDICADORES
==============================================================*/

.qr-indicators{

    margin-top:90px;

}

.qr-indicators-grid{

    display:grid;

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

    gap:25px;

}


/*==============================================================
    INDICADOR
==============================================================*/

.qr-indicator{

    text-align:center;

    background:linear-gradient(
        135deg,
        var(--qr-primary),
        var(--qr-secondary)
    );

    color:var(--qr-white);

    padding:40px 25px;

    border-radius:var(--qr-radius-lg);

    box-shadow:var(--qr-shadow-lg);

    transition:var(--qr-transition);

}

.qr-indicator:hover{

    transform:translateY(-8px);

}

.qr-indicator h3{

    color:var(--qr-white);

    font-size:2.7rem;

    font-weight:800;

    margin-bottom:10px;

}

.qr-indicator span{

    display:block;

    font-weight:600;

    line-height:1.6;

}


/*==============================================================
    TABLERO DESTACADO
==============================================================*/

.qr-dashboard-panel{

    margin-top:90px;

    padding:55px;

    background:var(--qr-light);

    border-radius:var(--qr-radius-lg);

    border:1px solid var(--qr-border);

    box-shadow:var(--qr-shadow-sm);

}

.qr-dashboard-panel h3{

    text-align:center;

    margin-bottom:20px;

    color:var(--qr-title);

}

.qr-dashboard-panel p{

    text-align:center;

    max-width:850px;

    margin:0 auto;

    line-height:1.9;

}


/*==============================================================
    MENSAJE INSTITUCIONAL
==============================================================*/

.qr-analytics-message{

    margin-top:80px;

}

.qr-analytics-message blockquote{

    max-width:1100px;

    margin:auto;

    padding:55px;

    text-align:center;

    border-radius:var(--qr-radius-lg);

    background:linear-gradient(
        135deg,
        var(--qr-primary),
        var(--qr-secondary)
    );

    color:var(--qr-white);

    font-size:1.3rem;

    font-weight:600;

    line-height:1.9;

    box-shadow:var(--qr-shadow-lg);

}

/*====================================================================
    15. BLOQUE 08
    BENEFICIOS PARA LOS ACTORES DEL ECOSISTEMA
=====================================================================*/
/*==============================================================
    SECCIÓN PRINCIPAL
==============================================================*/

/*==============================================================
    GRID DE BENEFICIOS
==============================================================*/

.qr-value-grid{

    display:grid;

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

    gap:34px;

    margin-top:70px;

}

/*==============================================================
    TARJETAS DE VALOR
==============================================================*/

.qr-value-card{

    position:relative;

    background:#FFFFFF;

    padding:48px 38px;

    border-radius:28px;

    border:1px solid #E2EAF3;

    box-shadow:0 18px 45px rgba(15,35,75,.05);

    overflow:hidden;

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

}

/*==============================================================
    HOVER TARJETA
==============================================================*/

.qr-value-card:hover{

    transform:translateY(-10px) scale(1.02);

    border-color:#C9D8EA;

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

    transition: transform 0.3s ease-in-out;

    border:1px solid #E2EAF3;

}

/*==============================================================
    DIFERENCIALES
==============================================================*/

.qr-differentials{

    margin-top:90px;

    text-align:center;

}

/*==============================================================
    TITULO
==============================================================*/

.qr-differentials h3{

    margin:0 0 50px;

    font-size:2.2rem;

    font-weight:800;

    color:var(--qr-title);

}

/*==============================================================
    GRID
==============================================================*/

.qr-differentials-grid{

    display:grid;

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

    gap:24px;

}

/*==============================================================
    DIFERENCIAL
==============================================================*/

.qr-differential{

    display:flex;

    align-items:center;

    gap:16px;

    padding:22px 24px;

    background:#FFFFFF;

    border:2px solid #D7E2EE;

    border-radius:20px;

    box-shadow:0 15px 35px rgba(15,35,75,.05);

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

}

/*==============================================================
    ICONO
==============================================================*/

.qr-differential i{

    color:#1AA8D8;

    font-size:1.4rem;

    flex-shrink:0;

}

/*==============================================================
    TEXTO
==============================================================*/

.qr-differential span{

    color:var(--qr-text);

    font-size:1rem;

    font-weight:600;

    line-height:1.6;

}

/*==============================================================
    HOVER DIFERENCIALES
==============================================================*/

.qr-differential:hover{

    transform:translateY(-6px) scale(1.02);

    border-color:#AFC5DD;

    box-shadow:0 22px 50px rgba(15,35,75,.10);

}

/*==============================================================
    HOVER ICONO
==============================================================*/

.qr-differential i{

    transition:
        transform .35s ease,
        color .35s ease;

}

.qr-differential:hover i{

    transform:scale(1.18) rotate(8deg);

    color:var(--qr-primary);

}

/*==============================================================
    LÍNEA SUPERIOR
==============================================================*/

.qr-differential{

    position:relative;

    overflow:hidden;

}

.qr-differential::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--qr-primary),
        #42B8E8
    );

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .35s ease;

}

.qr-differential:hover::before{

    transform:scaleX(1);

}

/*==============================================================
    TITULO
==============================================================*/

.qr-value-card h3{

    margin:0 0 18px;

    font-size:1.55rem;

    font-weight:800;

    line-height:1.2;

    color:var(--qr-title);

}

/*==============================================================
    DESCRIPCIÓN
==============================================================*/

.qr-value-card p{

    margin:0;

    font-size:1rem;

    line-height:1.8;

    color:var(--qr-text);

}

.qr-benefits{

    position:relative;

    background:var(--qr-light);

    overflow:hidden;

}

/*==============================================================
    FONDO DECORATIVO
==============================================================*/

.qr-benefits::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(15,76,129,.04);

}

.qr-benefits::after{

    content:"";

    position:absolute;

    bottom:-200px;

    right:-200px;

    width:340px;

    height:340px;

    border-radius:50%;

    background:rgba(0,168,232,.05);

}


/*==============================================================
    GRID PRINCIPAL
==============================================================*/

.qr-benefits-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}


/*==============================================================
    TARJETAS
==============================================================*/

.qr-benefit-card{

    position:relative;

    background:var(--qr-white);

    padding:40px;

    border-radius:var(--qr-radius-lg);

    border:1px solid var(--qr-border);

    box-shadow:var(--qr-shadow-sm);

    transition:var(--qr-transition);

    overflow:hidden;

}

.qr-benefit-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:5px;

    height:100%;

    background:var(--qr-primary);

    transform:scaleY(0);

    transform-origin:top;

    transition:.35s;

}

.qr-benefit-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--qr-shadow-lg);

}

.qr-benefit-card:hover::before{

    transform:scaleY(1);

}

/*==============================================================
    CABECERA
==============================================================*/

.qr-benefit-header{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:25px;

}

/*==============================================================
    ICONO
==============================================================*/

.qr-value-card i{

    width:78px;

    height:78px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:30px;

    border-radius:50%;

    background:#EEF5FD;

    color:var(--qr-primary);

    font-size:2rem;

}

/*==============================================================
    TITULOS
==============================================================*/

.qr-value-card h3{

    margin:0 0 18px;

    font-size:1.55rem;

    font-weight:800;

    line-height:1.2;

    color:var(--qr-title);

}

/*==============================================================
    LISTA DE BENEFICIOS
==============================================================*/

.qr-benefit-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.qr-benefit-list li{

    display:flex;

    align-items:flex-start;

    gap:14px;

    line-height:1.8;

}

.qr-benefit-list li::before{

    content:"";

    width:10px;

    height:10px;

    margin-top:10px;

    border-radius:50%;

    background:var(--qr-secondary);

    flex-shrink:0;

}

/*==============================================================
    PANEL RESUMEN
==============================================================*/

.qr-benefits-summary{

    margin-top:90px;

    display:grid;

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

    gap:25px;

}

/*==============================================================
    ITEMS RESUMEN
==============================================================*/

.qr-summary-item{

    text-align:center;

    padding:35px 25px;

    border-radius:var(--qr-radius-lg);

    background:linear-gradient(
        135deg,
        var(--qr-primary),
        var(--qr-secondary)
    );

    color:var(--qr-white);

    box-shadow:var(--qr-shadow-lg);

    transition:var(--qr-transition);

}

.qr-summary-item:hover{

    transform:translateY(-8px);

}

.qr-summary-item i{

    font-size:2.5rem;

    margin-bottom:20px;

}

.qr-summary-item h4{

    margin-bottom:12px;

    color:var(--qr-white);

    font-size:1.2rem;

}

.qr-summary-item p{

    margin:0;

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

    line-height:1.7;

}

/*==============================================================
    MENSAJE INSTITUCIONAL
==============================================================*/

.qr-benefits-message{

    margin-top:90px;

}

.qr-benefits-message blockquote{

    max-width:1100px;

    margin:auto;

    padding:55px;

    text-align:center;

    border-radius:var(--qr-radius-lg);

    background:var(--qr-white);

    border-left:6px solid var(--qr-primary);

    box-shadow:var(--qr-shadow-sm);

    color:var(--qr-title);

    font-size:1.3rem;

    font-weight:600;

    line-height:1.9;

}

/*==============================================================
    DETALLE SUPERIOR
==============================================================*/

.qr-value-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        var(--qr-primary),
        #4BA3FF
    );

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .35s ease;

}

.qr-value-card:hover::before{

    transform:scaleX(1);

}

/*====================================================================
    16. BLOQUE 09
    IMPLEMENTACIÓN Y ESCALABILIDAD
=====================================================================*/
/*==============================================================
    SECCIÓN PRINCIPAL
==============================================================*/

.qr-implementation{

    position:relative;

    background:var(--qr-white);

    overflow:hidden;

}

/*==============================================================
    FONDO DECORATIVO
==============================================================*/

.qr-implementation::before{

    content:"";

    position:absolute;

    top:-220px;

    right:-220px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(15,76,129,.04);

}

.qr-implementation::after{

    content:"";

    position:absolute;

    bottom:-180px;

    left:-180px;

    width:340px;

    height:340px;

    border-radius:50%;

    background:rgba(0,168,232,.05);

}


/*==============================================================
    GRID PRINCIPAL
==============================================================*/

.qr-implementation-grid{

    display:grid;

    grid-template-columns:1fr 1.2fr;

    gap:70px;

    align-items:start;

    margin-top:70px;

}


/*==============================================================
    CONTENIDO
==============================================================*/

.qr-implementation-content h3{

    margin-bottom:25px;

    font-size:2rem;

    font-weight:800;

    color:var(--qr-title);

}

.qr-implementation-content p{

    margin-bottom:25px;

    line-height:1.9;

}


/*==============================================================
    ETAPAS
==============================================================*/

.qr-implementation-steps{

    display:grid;

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

    gap:25px;

}

/*==============================================================
    TARJETAS
==============================================================*/

.qr-step-card{

    position:relative;

    background:var(--qr-white);

    padding:35px;

    border-radius:var(--qr-radius-lg);

    border:1px solid var(--qr-border);

    box-shadow:var(--qr-shadow-sm);

    transition:var(--qr-transition);

    overflow:hidden;

    border:2px solid rgba(15,76,129,.15);


}

.qr-step-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:var(--qr-secondary);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;
    
}

.qr-step-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--qr-shadow-lg);

}

.qr-step-card:hover::before{

    transform:scaleX(1);

}

/*==============================================================
    NÚMERO
==============================================================*/

.qr-step-number{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

    border-radius:50%;

    background:var(--qr-primary);

    color:var(--qr-white);

    font-size:1.4rem;

    font-weight:800;

}

/*==============================================================
    TÍTULOS
==============================================================*/

.qr-step-card h4{

    margin-bottom:15px;

    color:var(--qr-title);

    font-size:1.25rem;

    font-weight:700;

}

.qr-step-card p{

    margin:0;

    line-height:1.8;

}

/*==============================================================
    PANEL DE ESCALABILIDAD
==============================================================*/

.qr-scale-panel{

    display:grid;

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

    gap:30px;

    margin-top:90px;

}

/*==============================================================
    ITEMS
==============================================================*/

.qr-scale-item{

    text-align:center;

    padding:40px 30px;

    border-radius:var(--qr-radius-lg);

    background:linear-gradient(
        135deg,
        var(--qr-primary),
        var(--qr-secondary)
    );

    color:var(--qr-white);

    box-shadow:var(--qr-shadow-lg);

    transition:var(--qr-transition);

}

.qr-scale-item:hover{

    transform:translateY(-8px);

}

.qr-scale-item i{

    font-size:2.8rem;

    margin-bottom:20px;

}

.qr-scale-item h4{

    color:var(--qr-white);

    margin-bottom:12px;

    font-size:1.25rem;

}

.qr-scale-item p{

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

    margin:0;

    line-height:1.7;

}

/*==============================================================
    MENSAJE INSTITUCIONAL
==============================================================*/

.qr-implementation-message{

    margin-top:90px;

}

.qr-implementation-message blockquote{

    max-width:1100px;

    margin:auto;

    padding:55px;

    border-radius:var(--qr-radius-lg);

    background:linear-gradient(
        135deg,
        var(--qr-primary),
        var(--qr-secondary)
    );

    color:var(--qr-white);

    text-align:center;

    font-size:1.3rem;

    font-weight:600;

    line-height:1.9;

    box-shadow:var(--qr-shadow-lg);

}

/*==============================================================
    SECCIÓN PRINCIPAL
==============================================================*/

.qr-contact-center{

    position:relative;

    background:#F8FAFD;

    overflow:hidden;

}

/*==============================================================
    GRID PRINCIPAL
==============================================================*/

.qr-contact-grid{

    display:grid;

    grid-template-columns:430px 1fr;

    gap:50px;

    align-items:start;

    margin-top:70px;

}

/*==============================================================
    INFORMACIÓN INSTITUCIONAL
==============================================================*/

.qr-contact-information{

    background:#FFFFFF;

    padding:45px;

    border-radius:28px;

    border:2px solid #D7E2EE;

    box-shadow:0 18px 45px rgba(15,35,75,.05);

}

/*==============================================================
    GEOLOCALIZACIÓN
==============================================================*/

.qr-geolocation{

    background:#FFFFFF;

    padding:45px;

    border-radius:28px;

    border:2px solid #D7E2EE;

    box-shadow:0 18px 45px rgba(15,35,75,.05);

}

.qr-map-wrapper{

    margin-top:70px;

    border-radius:28px;

    overflow:hidden;

    border:2px solid #D7E2EE;

    box-shadow:0 18px 45px rgba(15,35,75,.05);

}

/*==============================================================
    MAPA
==============================================================*/

.qr-map-wrapper iframe{

    display:block;

    width:100%;

    height:480px;

    border:0;

}

/*==============================================================
    SECCIÓN PRINCIPAL
==============================================================*/

.qr-contact-center{

    position:relative;

    padding:120px 0;

    background:#F8FAFD;

    overflow:hidden;

}

/*==============================================================
    FONDO DECORATIVO
==============================================================*/

.qr-contact-center::before{

    content:"";

    position:absolute;

    top:-220px;

    right:-220px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(15,76,129,.04);

}

.qr-contact-center::after{

    content:"";

    position:absolute;

    bottom:-180px;

    left:-180px;

    width:340px;

    height:340px;

    border-radius:50%;

    background:rgba(0,168,232,.05);

}

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

.qr-contact-center .qr-container{

    position:relative;

    z-index:2;

}

/*==============================================================
    GRID PRINCIPAL
==============================================================*/

.qr-contact-grid{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:50px;

    align-items:start;

    margin-top:70px;

}

/*==============================================================
    INFORMACIÓN INSTITUCIONAL
==============================================================*/

.qr-contact-information{

    background:#FFFFFF;

    padding:45px;

    border-radius:28px;

    border:2px solid #D7E2EE;

    box-shadow:0 18px 45px rgba(15,35,75,.05);

}

/*==============================================================
    TÍTULO
==============================================================*/

.qr-contact-information h3{

    margin:0 0 35px;

    color:var(--qr-title);

    font-size:2rem;

    font-weight:800;

}

/*==============================================================
    LISTA
==============================================================*/

.qr-contact-information ul{

    list-style:none;

    margin:0;

    padding:0;

}

/*==============================================================
    ITEM
==============================================================*/

.qr-contact-information li{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:28px;

    line-height:1.8;

    color:var(--qr-text);

}

/*==============================================================
    ICONOS
==============================================================*/

.qr-contact-information li i{

    width:52px;

    height:52px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

    border-radius:50%;

    background:#EEF5FD;

    color:var(--qr-primary);

    font-size:1.25rem;

}

/*==============================================================
    DESTACADOS
==============================================================*/

.qr-contact-information strong{

    color:var(--qr-title);

    font-weight:700;

}

/*==============================================================
    GEOLOCALIZACIÓN
==============================================================*/

.qr-geolocation{

    background:#FFFFFF;

    padding:45px;

    border-radius:28px;

    border:2px solid #D7E2EE;

    box-shadow:0 18px 45px rgba(15,35,75,.05);

}

/*==============================================================
    TÍTULO
==============================================================*/

.qr-geolocation h3{

    margin:0 0 30px;

    color:var(--qr-title);

    font-size:2rem;

    font-weight:800;

}


/*==============================================================
    TARJETA DE COORDENADAS
==============================================================*/

.qr-coordinate-card{

    display:grid;

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

    gap:20px;

    margin:35px 0;

}

.qr-coordinate-card div{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    min-height:130px;

    padding:25px;

    background:#F8FAFD;

    border:2px solid #D7E2EE;

    border-radius:18px;

    text-align:center;

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

}

.qr-coordinate-card span{

    display:block;

    margin-bottom:12px;

    font-size:.85rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#7B8CA5;

}

.qr-coordinate-card strong{

    display:block;

    font-size:1.35rem;

    font-weight:800;

    color:var(--qr-title);

}

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

.qr-coordinate-card div:hover{

    transform:translateY(-6px);

    border-color:#AFC5DD;

    box-shadow:0 20px 40px rgba(15,35,75,.10);

}

/*====================================================================
    17. BLOQUE 10
    SEGURIDAD, TRANSPARENCIA Y GOBIERNO DIGITAL
=====================================================================*/
/*==============================================================
    SECCIÓN PRINCIPAL
==============================================================*/

.qr-governance{

    position:relative;

    background:var(--qr-light);

    overflow:hidden;

}

/*==============================================================
    FONDO DECORATIVO
==============================================================*/

.qr-governance::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(15,76,129,.04);

}

.qr-governance::after{

    content:"";

    position:absolute;

    bottom:-200px;

    right:-200px;

    width:340px;

    height:340px;

    border-radius:50%;

    background:rgba(0,168,232,.05);

}


/*==============================================================
    GRID PRINCIPAL
==============================================================*/

.qr-governance-grid{

    display:grid;

    grid-template-columns:1fr 1.20fr;

    gap:70px;

    align-items:start;

    margin-top:70px;

}

/*==============================================================
    CONTENIDO
==============================================================*/

.qr-governance-content h3{

    font-size:2rem;

    font-weight:800;

    color:var(--qr-title);

    margin-bottom:25px;

}

.qr-governance-content p{

    line-height:1.9;

    margin-bottom:25px;

}

/*==============================================================
    GRID PRINCIPIOS
==============================================================*/

.qr-governance-cards{

    display:grid;

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

    gap:25px;

}

/*==============================================================
    TARJETAS
==============================================================*/

.qr-governance-card{

    position:relative;

    background:var(--qr-white);

    padding:35px;

    border-radius:var(--qr-radius-lg);

    border:1px solid var(--qr-border);

    box-shadow:var(--qr-shadow-sm);

    transition:var(--qr-transition);

    overflow:hidden;

}

.qr-governance-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    background:var(--qr-primary);

    transform:scaleY(0);

    transform-origin:top;

    transition:.35s;

}

.qr-governance-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--qr-shadow-lg);

}

.qr-governance-card:hover::before{

    transform:scaleY(1);

}

/*==============================================================
    ICONOS
==============================================================*/

.qr-governance-card i{

    width:72px;

    height:72px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:22px;

    border-radius:18px;

    background:rgba(15,76,129,.08);

    color:var(--qr-primary);

    font-size:2rem;

}

/*==============================================================
    TITULOS
==============================================================*/

.qr-governance-card h4{

    margin-bottom:15px;

    color:var(--qr-title);

    font-size:1.25rem;

    font-weight:700;

}

.qr-governance-card p{

    margin:0;

    line-height:1.8;

}

/*==============================================================
    PANEL DE CONFIANZA
==============================================================*/

.qr-trust-grid{

    display:grid;

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

    gap:25px;

    margin-top:90px;

}

/*==============================================================
    INDICADORES
==============================================================*/

.qr-trust-item{

    text-align:center;

    padding:40px 25px;

    border-radius:var(--qr-radius-lg);

    background-image:url("../img/hero/hero-public-space.webp");

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;

    color:var(--qr-white);

    box-shadow:var(--qr-shadow-lg);

    transition:var(--qr-transition);

}

.qr-trust-item:hover{

    transform:translateY(-8px);

}

.qr-trust-item i{

    font-size:2.6rem;

    margin-bottom:20px;

}

.qr-trust-item h4{

    color:var(--qr-white);

    margin-bottom:12px;

    font-size:1.2rem;

}

.qr-trust-item p{

    margin:0;

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

    line-height:1.7;

}

/*==============================================================
    MENSAJE INSTITUCIONAL
==============================================================*/

.qr-governance-message{

    margin-top:90px;

}

.qr-governance-message blockquote{

    max-width:1100px;

    margin:auto;

    padding:55px;

    border-radius:var(--qr-radius-lg);

    background:var(--qr-white);

    border-left:6px solid var(--qr-primary);

    box-shadow:var(--qr-shadow-sm);

    text-align:center;

    color:var(--qr-title);

    font-size:1.3rem;

    font-weight:600;

    line-height:1.9;

}

/*==============================================================
    INFORMACIÓN DE UBICACIÓN
==============================================================*/

.qr-location-info{

    display:grid;

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

    gap:22px;

    margin:35px 0;

}

.qr-location-item{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:28px 22px;

    background:#F8FAFD;

    border:2px solid #D7E2EE;

    border-radius:18px;

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

}

.qr-location-item:hover{

    transform:translateY(-6px);

    border-color:#AFC5DD;

    box-shadow:0 18px 35px rgba(15,35,75,.10);

}

.qr-location-item i{

    font-size:2rem;

    color:var(--qr-primary);

    margin-bottom:18px;

}

.qr-location-item h4{

    margin:0 0 10px;

    color:var(--qr-title);

    font-size:1rem;

    font-weight:700;

}

.qr-location-item p{

    margin:0;

    color:var(--qr-text);

    line-height:1.7;

}



/*====================================================================
    18. BLOQUE 11
    CIERRE INSTITUCIONAL - CALL TO ACTION
=====================================================================*/
/*==============================================================
    SECCIÓN PRINCIPAL
==============================================================*/

.qr-final-cta{

    position:relative;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        var(--qr-primary) 0%,
        #115b96 40%,
        var(--qr-secondary) 100%
    );

}

/*==============================================================
    FONDO DECORATIVO
==============================================================*/

.qr-final-cta::before{

    content:"";

    position:absolute;

    top:-260px;

    left:-260px;

    width:520px;

    height:520px;

    border-radius:50%;

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

}

.qr-final-cta::after{

    content:"";

    position:absolute;

    bottom:-220px;

    right:-220px;

    width:420px;

    height:420px;

    border-radius:50%;

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

}


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

.qr-final-wrapper{

    position:relative;

    z-index:2;

    max-width:1200px;

    margin:auto;

    text-align:center;

}


/*==============================================================
    ETIQUETA
==============================================================*/

.qr-final-tag{

    display:inline-block;

    padding:12px 26px;

    margin-bottom:30px;

    border-radius:60px;

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

    color:var(--qr-white);

    font-size:.90rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

}


/*==============================================================
    TITULO
==============================================================*/

.qr-final-cta h2{

    color:var(--qr-white);

    font-size:clamp(2.5rem,5vw,4rem);

    font-weight:800;

    line-height:1.2;

    margin-bottom:30px;

}


/*==============================================================
    DESCRIPCIÓN
==============================================================*/

.qr-final-cta p{

    max-width:900px;

    margin:0 auto 50px;

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

    font-size:1.18rem;

    line-height:2;

}


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

.qr-final-actions{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

    margin-bottom:80px;

}


/*==============================================================
    BOTÓN PRINCIPAL
==============================================================*/

.qr-final-actions .qr-btn-primary{

    min-width:240px;

}


/*==============================================================
    BOTÓN SECUNDARIO
==============================================================*/

.qr-final-actions .qr-btn-outline{

    min-width:240px;

    border-color:rgba(255,255,255,.45);

    color:var(--qr-white);

}

.qr-final-actions .qr-btn-outline:hover{

    background:var(--qr-white);

    color:var(--qr-primary);

}


/*==============================================================
    INDICADORES
==============================================================*/

.qr-final-stats{

    display:grid;

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

    gap:30px;

}


/*==============================================================
    TARJETAS
==============================================================*/

.qr-final-stat{

    padding:35px 20px;

    border-radius:var(--qr-radius-lg);

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

    backdrop-filter:blur(8px);

    border:1px solid rgba(255,255,255,.14);

    transition:var(--qr-transition);

}

.qr-final-stat:hover{

    transform:translateY(-8px);

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

}


/*==============================================================
    ICONOS
==============================================================*/

.qr-final-stat i{

    font-size:2.4rem;

    color:#ffffff;

    margin-bottom:20px;

}


/*==============================================================
    NÚMEROS
==============================================================*/

.qr-final-stat h3{

    color:var(--qr-white);

    font-size:2.4rem;

    margin-bottom:10px;

    font-weight:800;

}


/*==============================================================
    TEXTO
==============================================================*/

.qr-final-stat span{

    display:block;

    color:rgba(255,255,255,.90);

    font-size:1rem;

    font-weight:600;

    line-height:1.6;

}


/*==============================================================
    FRASE FINAL
==============================================================*/

.qr-final-quote{

    max-width:1000px;

    margin:90px auto 0;

    padding-top:60px;

    border-top:1px solid rgba(255,255,255,.15);

}

.qr-final-quote blockquote{

    color:var(--qr-white);

    font-size:1.45rem;

    font-weight:600;

    line-height:1.9;

}


/*==============================================================
    COMILLAS
==============================================================*/

.qr-final-quote blockquote::before{

    content:"“";

    display:block;

    font-size:5rem;

    opacity:.20;

    line-height:1;

    margin-bottom:15px;

}

/*====================================================================
    18. BLOQUE 11
    CIERRE INSTITUCIONAL - CALL TO ACTION
=====================================================================*/
/*==============================================================
    SECCIÓN PRINCIPAL
==============================================================*/

.qr-final-cta{

    position:relative;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        var(--qr-primary) 0%,
        #115b96 40%,
        var(--qr-secondary) 100%
    );

}


/*==============================================================
    FONDO DECORATIVO
==============================================================*/

.qr-final-cta::before{

    content:"";

    position:absolute;

    top:-260px;

    left:-260px;

    width:520px;

    height:520px;

    border-radius:50%;

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

}

.qr-final-cta::after{

    content:"";

    position:absolute;

    bottom:-220px;

    right:-220px;

    width:420px;

    height:420px;

    border-radius:50%;

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

}


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

.qr-final-wrapper{

    position:relative;

    z-index:2;

    max-width:1200px;

    margin:auto;

    text-align:center;

}


/*==============================================================
    ETIQUETA
==============================================================*/

.qr-final-tag{

    display:inline-block;

    padding:12px 26px;

    margin-bottom:30px;

    border-radius:60px;

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

    color:var(--qr-white);

    font-size:.90rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

}


/*==============================================================
    TITULO
==============================================================*/

.qr-final-cta h2{

    color:var(--qr-white);

    font-size:clamp(2.5rem,5vw,4rem);

    font-weight:800;

    line-height:1.2;

    margin-bottom:30px;

}


/*==============================================================
    DESCRIPCIÓN
==============================================================*/

.qr-final-cta p{

    max-width:900px;

    margin:0 auto 50px;

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

    font-size:1.18rem;

    line-height:2;

}


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

.qr-final-actions{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

    margin-bottom:80px;

}


/*==============================================================
    BOTÓN PRINCIPAL
==============================================================*/

.qr-final-actions .qr-btn-primary{

    min-width:240px;

}


/*==============================================================
    BOTÓN SECUNDARIO
==============================================================*/

.qr-final-actions .qr-btn-outline{

    min-width:240px;

    border-color:rgba(255,255,255,.45);

    color:var(--qr-white);

}

.qr-final-actions .qr-btn-outline:hover{

    background:var(--qr-white);

    color:var(--qr-primary);

}


/*==============================================================
    INDICADORES
==============================================================*/

.qr-final-stats{

    display:grid;

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

    gap:30px;

}


/*==============================================================
    TARJETAS
==============================================================*/

.qr-final-stat{

    padding:35px 20px;

    border-radius:var(--qr-radius-lg);

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

    backdrop-filter:blur(8px);

    border:1px solid rgba(255,255,255,.14);

    transition:var(--qr-transition);

}

.qr-final-stat:hover{

    transform:translateY(-8px);

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

}


/*==============================================================
    ICONOS
==============================================================*/

.qr-final-stat i{

    font-size:2.4rem;

    color:#ffffff;

    margin-bottom:20px;

}


/*==============================================================
    NÚMEROS
==============================================================*/

.qr-final-stat h3{

    color:var(--qr-white);

    font-size:2.4rem;

    margin-bottom:10px;

    font-weight:800;

}


/*==============================================================
    TEXTO
==============================================================*/

.qr-final-stat span{

    display:block;

    color:rgba(255,255,255,.90);

    font-size:1rem;

    font-weight:600;

    line-height:1.6;

}


/*==============================================================
    FRASE FINAL
==============================================================*/

.qr-final-quote{

    max-width:1000px;

    margin:90px auto 0;

    padding-top:60px;

    border-top:1px solid rgba(255,255,255,.15);

}

.qr-final-quote blockquote{

    color:var(--qr-white);

    font-size:1.45rem;

    font-weight:600;

    line-height:1.9;

}


/*==============================================================
    COMILLAS
==============================================================*/

.qr-final-quote blockquote::before{

    content:"“";

    display:block;

    font-size:5rem;

    opacity:.20;

    line-height:1;

    margin-bottom:15px;

}

/*====================================================================
    19. BLOQUE 12
    EXPERIENCIA QRESP
=====================================================================*/

/*==============================================================
    SECCIÓN PRINCIPAL
==============================================================*/

.qr-demo{

    position:relative;

    background:linear-gradient(
        180deg,
        #F8FBFF 0%,
        #FFFFFF 100%
    );

    overflow:hidden;

}

.qr-demo::before{

    content:"";

    position:absolute;

    top:-220px;

    right:-220px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(15,76,129,.04);

}

.qr-demo::after{

    content:"";

    position:absolute;

    bottom:-180px;

    left:-180px;

    width:340px;

    height:340px;

    border-radius:50%;

    background:rgba(0,168,232,.05);

}

/*==============================================================
    GRID EXPERIENCIA
==============================================================*/

.qr-demo-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:420px 120px 420px;

    justify-content:center;

    align-items:center;

    gap:45px;

    margin-top:80px;

}

/*==============================================================
    PANEL QR
==============================================================*/

.qr-demo-qr{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    padding:50px 45px;

    background:#FFFFFF;

    border:2px solid #D7E2EE;

    border-radius:28px;

    box-shadow:0 20px 50px rgba(15,35,75,.08);

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

}

.qr-demo-qr:hover{

    transform:translateY(-8px);

    border-color:#AFC5DD;

    box-shadow:0 28px 60px rgba(15,35,75,.12);

}

/*==============================================================
    TÍTULO QR
==============================================================*/

.qr-demo-qr h3{

    margin:0 0 18px;

    color:var(--qr-title);

    font-size:2rem;

    font-weight:800;

    line-height:1.2;

}

.qr-demo-qr p{

    margin:0 0 40px;

    color:var(--qr-text);

    font-size:1.05rem;

    line-height:1.8;

}

/*==============================================================
    CONTENEDOR QR
==============================================================*/

.qr-demo-code{

    width:250px;

    height:250px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

    border-radius:24px;

    border:2px dashed #C7D7E8;

    background:#F8FBFF;

}

.qr-demo-qr span{

    color:#7B8BA3;

    font-size:.95rem;

    font-weight:600;

    letter-spacing:.4px;

}

/*==============================================================
    FLECHA DE EXPERIENCIA
==============================================================*/

.qr-demo-arrow{

    display:flex;

    align-items:center;

    justify-content:center;

}

.qr-demo-arrow i{

    font-size:3.8rem;

    color:var(--qr-primary);

    opacity:.85;

}

/*==============================================================
    MOCKUP TELÉFONO
==============================================================*/

.qr-demo-phone{

    display:flex;

    justify-content:center;

    align-items:center;

}

/*==============================================================
    IMAGEN TELÉFONO
==============================================================*/

.qr-demo-phone img{

    width:100%;

    max-width:360px;

    height:auto;

    display:block;

    border-radius:38px;

    border:2px solid #D7E2EE;

    background:#FFFFFF;

    box-shadow:0 28px 70px rgba(15,35,75,.15);

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

}

/*==============================================================
    HOVER TELÉFONO
==============================================================*/

.qr-demo-phone img:hover{

    transform:translateY(-10px) scale(1.02);

    box-shadow:0 35px 80px rgba(15,35,75,.20);

}

/*==============================================================
    BENEFICIOS
==============================================================*/

.qr-demo-features{

    display:grid;

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

    gap:22px;

    margin-top:80px;

}

/*==============================================================
    TARJETAS
==============================================================*/

.qr-demo-feature{

    display:flex;

    align-items:center;

    gap:15px;

    padding:22px 24px;

    background:#FFFFFF;

    border:2px solid #D7E2EE;

    border-radius:18px;

    box-shadow:0 15px 35px rgba(15,35,75,.06);

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

}

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

.qr-demo-feature:hover{

    transform:translateY(-6px);

    border-color:#AFC5DD;

    box-shadow:0 22px 45px rgba(15,35,75,.10);

}

/*==============================================================
    ICONO
==============================================================*/

.qr-demo-feature i{

    flex-shrink:0;

    color:#18ADC7;

    font-size:1.35rem;

}

/*==============================================================
    TEXTO
==============================================================*/

.qr-demo-feature span{

    color:var(--qr-title);

    font-size:1rem;

    font-weight:600;

    line-height:1.5;

}

/*==============================================================
    CALL TO ACTION
==============================================================*/

.qr-demo-cta{

    display:flex;

    justify-content:center;

    margin-top:70px;

}

.qr-demo-cta .qr-btn-primary{

    padding:18px 38px;

    font-size:1.05rem;

    border-radius:16px;

}

/* ==========================================================
BLOQUE 13
CENTRO DE ATENCIÓN INSTITUCIONAL
========================================================== */

.qr-contact{

    padding:100px 0;

    background:#F8FAFD;

}

.qr-contact-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:center;

}

/*==================================
TARJETA DE CONTACTO
==================================*/

.qr-contact-card{

    background:#FFFFFF;

    padding:45px;

    border-radius:24px;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.qr-contact-card h3{

    color:#0B2E59;

    font-size:1.8rem;

    margin-bottom:18px;

}

.qr-contact-card p{

    color:#667085;

    line-height:1.8;

    margin-bottom:35px;

}

.qr-contact-card ul{

    list-style:none;

    padding:0;

    margin:0;

}

.qr-contact-card li{

    display:flex;

    align-items:flex-start;

    gap:18px;

    margin-bottom:28px;

}

.qr-contact-card i{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#EEF6FD;

    color:#0B4F8A;

    font-size:1.2rem;

    flex-shrink:0;

}

.qr-contact-card strong{

    display:block;

    color:#0B2E59;

    margin-bottom:6px;

}

.qr-contact-card span{

    color:#6B7280;

}

.qr-contact-card a{

    color:#0B4F8A;

    text-decoration:none;

    font-weight:600;

    transition:.30s;

}

.qr-contact-card a:hover{

    color:#d6d6d6;

}

/*==================================
BOTÓN
==================================*/

.qr-contact-buttons{

    margin-top:40px;

}

.qr-contact-buttons .qr-btn-primary{

    width:100%;

    justify-content:center;

    color:#e3ebe7;

}

/*==================================
MAPA
==================================*/

.qr-contact-map{

    background:#FFFFFF;

    border-radius:24px;

    overflow:hidden;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

#qrOfficeMap{

    width:100%;

    height:380px;

}

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

@media(max-width:992px){

    .qr-contact-grid{

        grid-template-columns:1fr;

    }

    #qrOfficeMap{

        height:320px;

    }

}

/*====================================================================
    FOOTER
=====================================================================*/
/*==============================================================
    ESTRUCTURA GENERAL
==============================================================*/

.qr-footer{

    position: relative;
    background: linear-gradient(180deg,#06213d 0%,#041729 100%);
    color:#ffffff;
    overflow:hidden;
}


/*==============================================================
    CONTENEDOR PRINCIPAL
==============================================================*/

.qr-footer .qr-container{

    width:100%;
    max-width:1300px;
    margin:0 auto;
    padding:90px 40px 40px;

}

/*==============================================================
    GRID PRINCIPAL
==============================================================*/

.qr-footer .qr-footer-grid{

    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1.1fr;
    gap:70px;
    align-items:flex-start;

}

/*==============================================================
    COLUMNAS
==============================================================*/

.qr-footer .qr-footer-about,
.qr-footer .qr-footer-column{

    display:flex;
    flex-direction:column;

}

/*==============================================================
    LOGO
==============================================================*/

.qr-footer .qr-footer-logo{

    width:190px;
    height:auto;
    margin-bottom:32px;
    display:block;

}

/*==============================================================
    TÍTULOS DEL FOOTER
==============================================================*/

.qr-footer .qr-footer-column h4{

    margin:0 0 28px;
    font-size:1.18rem;
    font-weight:700;
    color:#2188b1;
    letter-spacing:.3px;

}

/*==============================================================
    LÍNEA DIVISORIA
==============================================================*/

.qr-footer .qr-footer-divider{

    margin:70px 0 35px;
    border:none;
    border-top:1px solid rgba(255,255,255,.12);

}

/*==============================================================
    PIE INFERIOR
==============================================================*/

.qr-footer .qr-footer-bottom{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    align-items:center;
    margin-top:-10px;
    margin-bottom:-80px;
    font-size:14px;

}

/*==============================================================
    FRANJA INSTITUCIONAL
==============================================================*/

.qr-footer .qr-footer-signature p{

    margin:0;
    text-align:center;
    line-height:1.8;
    font-size:14px;

}

.qr-footer .qr-footer-signature{

    margin-top:45px;
    border-top:1px solid rgba(255,255,255,.08);
    background:rgba(0,0,0,.18);

}

.qr-footer .qr-footer-signature .qr-container{

    padding:20px 40px;

}

/* ==========================================================
BLOQUE 11
COBERTURA TERRITORIAL INTELIGENTE
========================================================== */

.qr-territory{

    padding:100px 0;

    background:#F5F8FC;

}

.qr-section-header{

    max-width:850px;

    margin:0 auto 60px;

    text-align:center;

}

.qr-section-tag{

    display:inline-block;

    padding:8px 18px;

    border-radius:40px;

    background:#E8F4FF;

    color:#0B4F8A;

    font-size:.9rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

}

.qr-section-header h2{

    margin-top:20px;

    font-size:2.5rem;

    color:#0B2E59;

}

.qr-section-header p{

    max-width:980px;

    margin-top:20px;

    color:#6B7280;

    line-height:1.8;

    font-size:1.05rem;

}

/*==================================================
MAPA TERRITORIAL
==================================================*/

.qr-map-info{

    padding:30px;

    border-top:1px solid #edf1f6;

}

.qr-map-info h3{

    color:#0B3C6D;

    font-size:1.45rem;

    margin-bottom:12px;

}

.qr-map-info p{

    color:#5f6b7a;

    line-height:1.8;

}

/*========================*/

.qr-territory-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:35px;

    align-items:start;

}

/*========================*/

.qr-territory-map{

    background:#FFFFFF;

    border-radius:24px;

    padding:35px;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

    min-height:520px;

}

#qrMap{

    width:100%;

    height:560px;

    border-radius:18px;

    overflow:hidden;

}

#qrMap h3{

    color:#0B2E59;

    margin-bottom:20px;

}

#qrMap p{

    width:75%;

    color:#6B7280;

    line-height:1.8;

}

/*========================*/

.qr-territory-panel{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.qr-territory-card{

    background:#FFFFFF;

    border-radius:20px;

    padding:30px;

    text-align:center;

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

    transition:.35s;

}

.qr-territory-card:hover{

    transform:translateY(-6px);

}

.qr-territory-card i{

    font-size:2.3rem;

    color:#0B4F8A;

    margin-bottom:15px;

}

.qr-territory-card h3{

    font-size:2rem;

    color:#00A651;

    margin-bottom:10px;

}

.qr-territory-card span{

    color:#5B6472;

    font-weight:600;

    line-height:1.6;

}

/*========================*/

.qr-territory-footer{

    text-align:center;

    margin-top:60px;

}

.qr-btn-primary{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:18px 36px;

    border-radius:50px;

    background:linear-gradient(135deg,#0B4F8A,#00AEEF);

    color:#FFFFFF;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.qr-btn-primary:hover{

    transform:translateY(-4px);

}

/*==============================================================
    RESPONSIVE BREAKPOINTS (index.html)
==============================================================*/

/* 1. DESKTOP LARGE (1440px) */
@media (max-width: 1440px) {
    .qr-container {
        max-width: 1200px;
        margin: 0 auto;
    }
}

/* 2. TABLET HORIZONTAL / DESKTOP SMALL (980px) */

@media (max-width: 980px) {

    /* Ocultar botones de acción para que no se desborden en celular */
    .qr-header-actions {
        display: none !important;
    }

    /* Redefinir la barra del header (Solo Logo e Ícono) */
    .qr-header-grid {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 20px !important;
        min-height: 70px !important;
    }

    /* Activar botón hamburguesa */
    /* Estilo del botón hamburguesa transparente y grande */
    .qr-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        cursor: pointer;
    }

    /* Ícono limpio, blanco y de mayor tamaño */
    .qr-menu-toggle i {
        color: #FFFFFF !important;
        font-size: 2rem !important; /* Tamaño aumentado */
        line-height: 1 !important;
    }

    /* Menú desplegable con efecto Fader suave y azul del logo RESP */
    .qr-header-nav {
        display: flex !important;
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        width: 100%;
        background: linear-gradient(135deg, #0F4C81 0%, #09365C 100%);
        padding: 25px 20px;
        border-radius: 20px 20px 24px 24px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
        z-index: 999;
        
        /* Efecto Fader (Animación de entrada/salida) */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-12px);
        transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
        pointer-events: none;
    }

    /* Estado desplegado al hacer clic */
    .qr-header-nav.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .qr-header-nav .qr-menu {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .qr-header-nav .qr-menu li {
        width: 100%;
        text-align: center;
    }

    .qr-header-nav .qr-menu li a {
        display: block;
        padding: 12px 18px;
        width: 100%;
        color: #FFFFFF;
        font-weight: 600;
        border-radius: 12px;
        transition: background 0.3s ease, color 0.3s ease;
    }

    .qr-header-nav .qr-menu li a:hover {
        background: rgba(255, 255, 255, 0.15);
        color: #00A8E8;
    }
}

/* 3. TABLET PORTRAIT (760px) */
@media (max-width: 760px) {
    .qr-container {
        padding: 0 20px;
    }

    .qr-hero-content h1 {
        font-size: 2.2rem !important;
        line-height: 1.25 !important;
    }

    .qr-hero-actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .qr-hero-actions .qr-btn-primary,
    .qr-hero-actions .qr-btn-secondary {
        width: 100%;
        text-align: center;
    }

    .qr-hero-metrics,
    .qr-record-features,
    .qr-municipality-cards,
    .qr-benefits-grid,
    .qr-pillars-grid,
    .qr-value-grid,
    .qr-record-benefits {
        grid-template-columns: 1fr !important;
    }

    .qr-demo-grid {
        flex-direction: column;
        align-items: center;
    }

    .qr-demo-arrow {
        transform: rotate(90deg);
        margin: 15px 0;
    }

    .qr-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 25px;
    }

    .qr-public-highlights,
    .qr-public-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }

    .qr-highlight-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 15px 0 !important;
        box-sizing: border-box !important;
    }
}

/* 4. PHABLET / MOBILE LARGE (570px) */
@media (max-width: 570px) {
    .qr-hero-content h1 {
        font-size: 1.8rem !important;
    }

    .qr-hero-tag, 
    .qr-section-tag {
        font-size: 0.8rem !important;
    }

    .qr-section-header h2 {
        font-size: 1.5rem !important;
    }

    .qr-capabilities-grid,
    .qr-differentials-grid,
    .qr-demo-features {
        grid-template-columns: 1fr !important;
    }

    .qr-territory-panel {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .qr-footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
}

/* 5. MOBILE MEDIUM (480px) */
@media (max-width: 480px) {
    *, *::before, *::after {
        box-sizing: border-box !important;
    }

    html, body {
        overflow-x: hidden !important;
    }

    .qr-container {
        padding: 0 12px;
    }

    .qr-hero-content h1 {
        font-size: 1.5rem !important;
    }

    .qr-btn-primary, 
    .qr-btn-secondary, 
    .qr-btn-login,
    .qr-btn-dadep {
        width: 100% !important;
        justify-content: center;
    }

    .qr-territory-panel {
        grid-template-columns: 1fr !important;
    }

    #qrMap, 
    #qrOfficeMap {
        height: 250px !important;
    }
}

/* 6. MOBILE SMALL (320px) */
@media (max-width: 320px) {
    .qr-hero-content h1 {
        font-size: 1.3rem !important;
    }

    .qr-hero-content p,
    .qr-section-header p {
        font-size: 0.85rem !important;
    }

    .qr-metric strong {
        font-size: 1.5rem !important;
    }

    .qr-highlight-card,
    .qr-pillar-card,
    .qr-feature-card,
    .qr-municipality-card,
    .qr-value-card,
    .qr-contact-card {
        padding: 15px !important;
    }
}

/*==============================================================
    AJUSTE DE MAPA LEAFLET Y POPUPS/MODALES EN MÓVIL
==============================================================*/

/* 1. Darle mayor altura al mapa en dispositivos móviles */
@media (max-width: 760px) {
    #qrMap, 
    #qrOfficeMap {
        height: 420px !important; /* Aumenta la altura para dar espacio al mapa y modal */
        min-height: 380px !important;
    }
}

@media (max-width: 480px) {
    #qrMap, 
    #qrOfficeMap {
        height: 450px !important; /* Espacio suficiente para ver marcadores y ficha */
    }
}

/*========================================================================================*/
/* 2. Formatear y limitar el ancho de las ventanas emergentes (popups/modales) de Leaflet */
/*========================================================================================*/

.leaflet-popup-content-wrapper {
    max-width: 280px !important;
    padding: 5px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.leaflet-popup-content {
    margin: 8px 10px !important;
    width: auto !important;
    max-height: 300px !important;
    overflow-y: auto !important; /* Permite scroll si la ficha del comerciante es larga */
}

/* Ajuste del encabezado del comerciante dentro del popup */
.leaflet-popup-content h3,
.leaflet-popup-content h4,
.leaflet-popup-content .qr-card-header {
    font-size: 0.9rem !important;
    word-break: break-word !important;
}


/*==============================================================
    REGLAS GENERALES PARA PC Y MÓVIL (POPUP MAPA)
==============================================================*/

/* 1. Control global del contenedor para que la cabecera azul no se salga de las esquinas */
.leaflet-popup-content-wrapper {
    padding: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important; /* Fuerza las esquinas redondeadas en PC y móvil */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
}

/* 2. Ajuste del contenido interno para PC */
.leaflet-popup-content {
    margin: 0 !important;
    padding: 12px !important;
    width: 300px !important; /* Ancho cómodo y fijo para PC */
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important; /* Elimina la barra de scroll horizontal */
}

/* 3. Asegura que el encabezado azul encaje perfecto en cualquier pantalla */
.leaflet-popup-content > div:first-child,
.leaflet-popup-content header,
.leaflet-popup-content .card-header {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/*==============================================================
    AJUSTES EXCLUSIVOS PARA PANTALLAS MÓVILES (HASTA 760PX)
==============================================================*/

@media (max-width: 760px) {
    /* Mantiene el mapa grande a pantalla completa */
    .qr-territory-grid,
    .qr-territory-map,
    .qr-map-card,
    .qr-map-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #qrMap {
        width: 100% !important;
        height: 620px !important;
        min-height: 600px !important;
    }

    /* Ancho compacto del Popup para móviles */
    .leaflet-popup-content-wrapper {
        width: 260px !important;
        max-width: 80vw !important;
    }

    .leaflet-popup-content {
        width: 100% !important;
        padding: 10px !important;
        max-height: 350px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* Botón "VER EXPEDIENTE DIGITAL" adaptable en celular */
    .leaflet-popup-content a,
    .leaflet-popup-content .btn,
    .leaflet-popup-content button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 40px !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================
   AJUSTE DE UX RESPONSIVA: BLOQUE DEMO (QR + TELÉFONO)
========================================================== */

/* Contenedor flexible principal */
.qr-demo-grid {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
    flex-wrap: wrap;
}

/* Tarjeta contenedora del QR */
.qr-demo-qr {
    flex: 1 1 300px;
    max-width: 380px;
    background: #ffffff;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.qr-demo-code img {
    width: 100%;
    max-width: 200px;
    height: auto;
    display: block;
    margin: 15px auto;
}

/* Flecha de conexión */
.qr-demo-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #005D8F;
}

/* Contenedor del Celular */
.qr-demo-phone {
    flex: 1 1 300px;
    max-width: 380px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.qr-demo-phone img {
    width: 100%;
    max-width: 280px;
    height: auto;
    object-fit: contain;
}

/* Optimización UX exclusiva para pantallas de celular */
@media (max-width: 768px) {
    .qr-demo-grid {
        flex-direction: column;
        gap: 20px;
    }

    .qr-demo-qr, 
    .qr-demo-phone {
        width: 100%;
        max-width: 100%;
    }

    /* La flecha apunta hacia abajo en móviles */
    .qr-demo-arrow {
        transform: rotate(90deg);
        margin: 5px 0;
    }

    .qr-demo-phone img {
        max-width: 240px; /* Tamaño adaptado para pantallas pequeñas */
    }
}

/* ==========================================================
   RESET COMPLETO INFERIOR FOOTER (RESPONSIVE MÓVIL)
========================================================== */
@media (max-width: 768px) {
    /* Selecciona cualquier div contenedor dentro del footer */
    footer div[class*="-bottom"],
    footer div[class*="-legal"],
    footer div[class*="-copyright"],
    footer .container > div:last-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        text-align: center !important;
        gap: 20px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
    }

    /* Permite que cada bloque (texto/links) tome el ancho completo */
    footer div[class*="-bottom"] > *,
    footer div[class*="-legal"] > *,
    footer div[class*="-copyright"] > * {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        white-space: normal !important;
    }

    /* Corrige los links para que no se rompan letra por letra */
    footer a {
        display: inline-block !important;
        width: auto !important;
        word-break: normal !important;
        white-space: normal !important;
        margin: 5px 0 !important;
    }
}

/* ==========================================================
   AJUSTE DE ESPACIADO EN BOTONES LEGALES FOOTER (MÓVIL)
========================================================== */
@media (max-width: 768px) {
    /* Reduce el espacio vertical del contenedor de links */
    footer div[class*="-legal"],
    footer .legal-links {
        gap: 2px !important;
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }

    /* Ajusta los enlaces para reducir su padding/margin */
    footer div[class*="-legal"] a,
    footer .legal-links a {
        margin: 2px 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
    }

    /* Oculta los separadores verticales en móvil si los tienes como tags o pseudo-elementos */
    footer div[class*="-legal"] span,
    footer div[class*="-legal"] .separator {
        margin: 2px 0 !important;
        opacity: 0.5;
        line-height: 1 !important;
    }
}

@media (max-width: 980px) {
    .qr-why-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
}

@media (max-width: 980px) {
    .qr-record-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
}

@media (max-width: 980px) {
    .qr-management-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    .qr-management-services {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 980px) {
    .qr-territory-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
}