/*RESET*/

html{
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce){
    html{
        scroll-behavior: auto;
    }
}

*{
    margin: 0;  /*elimina margenes por defecto*/
    padding: 0; /*elimina espacios por defecto*/
    box-sizing: border-box; /*si se define 300px queda eso, no se suma con los otros px*/
}

img,
video{
    max-width: 100%;
    height: auto;
}

/*CMR SOFTWARE SOLUTIONS*/

.tag{
    display: inline-block; /*Forma de caja*/
    padding: 6px 14px; /*Espacio interno*/
    border-radius: 50px;
    background: rgba(255,255,255,0.1); /* fondo transparente */
    border: 1px solid rgba(255,255,255,0.3); /*Borde suave*/
    font-size: 20px;
    letter-spacing: 1px; /*Separacion entre letras*/
}


/*BODY*/

html{
    scroll-behavior: smooth;
    overflow-x: clip;
    max-width: 100%;
}

body{
    font-family: 'Poppins', sans-serif;
    line-height: 1.5;
    text-align: left;
    hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    overflow-x: clip;
    max-width: 100%;
}

body.nav-menu-open{
    overflow: hidden;
}

.skip-link{
    position: absolute;
    left: 12px;
    top: -48px;
    z-index: 10000;
    padding: 10px 14px;
    border-radius: 8px;
    background: #0f1a44;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-link:focus,
.skip-link:focus-visible{
    top: 12px;
    outline: 2px solid #7eb6ff;
    outline-offset: 2px;
}

.btn-primary:focus-visible,
.btn-whatsapp:focus-visible,
.btn-nav:focus-visible,
.btn-form-secondary:focus-visible,
.logo-link:focus-visible{
    outline: 2px solid rgba(40, 80, 192, 0.55);
    outline-offset: 3px;
}

.container{
    max-width: 1200px; /* limita el ancho */
    margin: 0 auto; /*centra horizontalmente*/
    padding: 20px; /*espacio interno para que no se pegue a los bordes*/
}

/* Logo del nav: tamaño completo. La franja blanca se achica con padding mínimo en nav, no encogiendo el logo. */

.logo{
    display: block;
    flex-shrink: 0;
}

header nav .logo,
header nav .logo-link img.logo{
    width: 200px;
    height: auto;
    max-width: none;
    object-fit: contain;
}


/*LA PRIMER PARTE QUE SE VE, HERO*/

#hero {
    /* Misma paleta de siempre (#404da0, #4d81b6, #ffffff): un solo degradé parejo de izquierda a derecha, sin oscuro “acumulado” al centro */
    background: linear-gradient(100deg, #404da0 0%, #4d81b6 50%, #ffffff 100%);
    color: white; /*Texto blanco*/
    padding: 25px ; /*Espacio arriba y abajo*/
    position: relative;
    overflow: hidden;
}

.texto-degradado{
    background: linear-gradient(90deg, #38bdf8, #22c55e);
    background-clip: text; 
    -webkit-background-clip: text; /*Algunos navegadores no lo utilizan*/
    -webkit-text-fill-color: transparent;
    
}

#hero .container{
    display: flex; /* convierte el contenido en fila horizontal */
    align-items: center; /* centra verticalmente */
    justify-content: space-between; /* separa izquierda y derecha */
    gap: 60px; /* espacio entre columnas */
    flex-wrap: nowrap;
    min-width: 0;
}

.hero-texto{
    flex: 1.2 1 0; /*tamaño de texto; 1 0 permite encoger sin pasar a columna*/
    max-width: 600px;
    min-width: 0;
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.22);
    text-align: left;
}

.hero-texto h1{
    font-size: 48px; /* tamaño de fuente (escritorio como antes) */
    margin: 20px 0; /* espacio arriba y abajo */
    line-height: 1.2;
}

.hero-texto p{
    max-width: 500px;/*Limita*/
    margin-bottom: 20px;
    color: rgba(255,255,255,0.8); 
}


.hero-img{
    /*flex: 1;  La imagen ocupa la otra mitad */
    display: flex;
    justify-content: flex-end; /*Forzar posicionamiento a la derecha*/
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
}
.hero-img img{
    width: 100%; /* La imagen ocupa todo el contenedor */
    max-width: 500px; /*limita el tamaño*/
    height: auto;
    transform: translateY(30px) scale(1.05);
    /* box-shadow: 0 30px 80px rgba(0,0,0,0.5);  efecto flotante */
}

/* Misma fila que siempre: los dos botones juntos (sin apilar) */
.hero-actions{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    margin-top: 0;
}

.hero-actions button{
    margin-right: 0;
    flex: 0 1 auto;
}

@media (max-width: 900px){
    #hero .container{
        flex-direction: column;
        flex-wrap: wrap;
        text-align: left;
        align-items: stretch;
    }

    .hero-texto{
        text-align: left;
        max-width: none;
    }

    .hero-texto p{
        margin-left: 0;
        margin-right: 0;
    }

    .hero-img{
        justify-content: center;
    }

    .hero-img img{
        transform: translateY(0) scale(1);
        max-width: min(500px, 100%);
    }

    .hero-actions{
        justify-content: stretch;
        flex-wrap: wrap;
    }
}

@media (max-width: 720px){
    .hero-texto h1{
        font-size: clamp(1.35rem, 4.5vw + 0.35rem, 2.75rem);
    }
}

@media (max-width: 520px){
    #hero .container{
        gap: clamp(12px, 3vw, 28px);
    }

    /* Los tamaños táctiles definitivos viven en mobile.css (≥44px) */
}

/*BOTONES EN EL HERO*/

button{
    padding: 10px 20px; /*Tamaño interno, hace el boton mas grande*/
    margin-right: 10px; /*Separa los botones*/
    border: none; /* Saca el borde feo negro  */
    cursor: pointer; /*Cambia el cursor, le pone manito*/
    border-radius: 30px; /*Redondea borde de boton*/
    font-weight: bold;
}



.btn-primary{
    background: linear-gradient(90deg, #2850c0, #178e86);
    /*background-color: #007BFF;*/
    color: white;
}

.btn-whatsapp{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.1); /* fondo transparente */
    border: 2px solid #458a90; /*Borde color*/
    /*background-color: #25D366;*/
    color: white;
}



button:hover{
    opacity: 1;
}

/*PARTE DE ARRIBA NAVBAR*/

.site-nav{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: 0 clamp(14px, 3vw, 28px);
    padding-right: max(clamp(14px, 3vw, 28px), env(safe-area-inset-right));
    padding-left: max(clamp(14px, 3vw, 28px), env(safe-area-inset-left));
    min-height: 0;
    box-sizing: border-box;
    gap: 0.5rem;
}

.site-nav .nav-primary{
    display: flex;
    list-style: none;
    gap: 10px;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
}

.site-nav .nav-primary li a{
    font-size: 0.85rem;
    color: #5a6270;
    transition: color 0.22s ease, text-decoration-color 0.22s ease, text-underline-offset 0.22s ease;
}

.site-nav .btn-nav{
    padding: 6px 12px;
    font-size: 0.78rem;
    margin-right: 0;
}

.site-nav a{
    text-decoration: none;
    color: black;
}

.site-nav .nav-primary li a:hover{
    color: #2850c0;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
    text-decoration-color: #178e86;
}

/* Menú compacto en pantallas angostas: misma información, acceso táctil claro */
.nav-toggle{
    display: none;
    position: relative;
    z-index: 2101;
    margin-left: auto;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    height: 2.65rem;
    padding: 0;
    border: 1px solid rgba(40, 80, 192, 0.28);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(236, 244, 252, 0.92) 100%);
    box-shadow: 0 2px 10px rgba(40, 80, 192, 0.08);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.nav-toggle:hover{
    border-color: rgba(23, 142, 134, 0.45);
    box-shadow: 0 4px 14px rgba(23, 142, 134, 0.12);
}

.nav-toggle:focus{
    outline: none;
}

.nav-toggle:focus-visible{
    outline: 2px solid rgba(40, 80, 192, 0.45);
    outline-offset: 2px;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after{
    display: block;
    width: 1.15rem;
    height: 2px;
    background: linear-gradient(90deg, #2850c0, #178e86);
    border-radius: 1px;
    transition: transform 0.28s ease, opacity 0.2s ease, top 0.28s ease;
}

.nav-toggle-bars{
    position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after{
    content: "";
    position: absolute;
    left: 0;
}

.nav-toggle-bars::before{
    top: -6px;
}

.nav-toggle-bars::after{
    top: 6px;
}

.site-nav.menu-open .nav-toggle-bars{
    background: transparent;
}

.site-nav.menu-open .nav-toggle-bars::before{
    top: 0;
    transform: rotate(45deg);
}

.site-nav.menu-open .nav-toggle-bars::after{
    top: 0;
    transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce){
    html{
        scroll-behavior: auto;
    }
}

@media (min-width: 1600px){
    .container,
    .proyectos-envoltura,
    .planes-envoltura,
    .footer-container,
    .servicios-envoltura{
        max-width: 1280px;
    }
}

@media (max-width: 1366px) and (min-width: 961px){
    header nav .logo,
    header nav .logo-link img.logo{
        width: 170px;
    }

    .plan-card{
        padding: 1.25rem 1.2rem;
    }

    .plan-card__amount{
        font-size: clamp(1.75rem, 2vw + 0.5rem, 2.2rem);
    }
}

@supports not (overflow: clip){
    html,
    body{
        overflow-x: hidden;
    }
}

@media (max-width: 960px){
    .site-nav > .logo,
    .site-nav > .logo-link{
        position: relative;
        z-index: 2101;
    }

    .nav-toggle{
        display: inline-flex;
    }

    .site-nav .nav-primary{
        position: fixed;
        z-index: 2100;
        inset: 0;
        width: 100%;
        max-width: none;
        height: 100%;
        min-height: 100dvh;
        margin: 0;
        padding: calc(env(safe-area-inset-top) + 5.25rem) clamp(1.25rem, 5vw, 2rem) calc(env(safe-area-inset-bottom) + 2rem);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.35rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        list-style: none;
        background: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 0 0 1px rgba(64, 77, 160, 0.08);
        transform: translateX(100%);
        visibility: hidden;
        pointer-events: none;
        transition:
            transform 0.32s cubic-bezier(0.33, 1, 0.32, 1),
            visibility 0.32s step-end;
    }

    .site-nav .nav-primary.is-open{
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
        transition:
            transform 0.32s cubic-bezier(0.33, 1, 0.32, 1),
            visibility 0s step-start;
    }

    .site-nav .nav-primary li{
        width: 100%;
    }

    .site-nav .nav-primary li a{
        display: block;
        padding: 0.65rem 0.35rem;
        font-size: 1rem;
        border-radius: 10px;
    }

    .site-nav .nav-primary li a:hover{
        text-decoration: none;
        background: rgba(40, 80, 192, 0.06);
    }

    .site-nav .nav-primary .btn-nav{
        width: 100%;
        margin-top: 0.35rem;
        padding: 0.7rem 1rem;
        font-size: 0.9rem;
        border-radius: 12px;
    }
}

@media (prefers-reduced-motion: reduce){
    .site-nav .nav-primary{
        transition-duration: 0.01ms;
    }

    .nav-toggle-bars,
    .nav-toggle-bars::before,
    .nav-toggle-bars::after{
        transition-duration: 0.01ms;
    }
}

.btn-nav{
    background: linear-gradient(90deg, #2850c0, #178e86);
    color: white;
}

.logo-link{
    display: inline-flex;
    line-height: 0;
    flex-shrink: 0;
}

.logo-link img.logo{
    display: block;
}

body.page-asesoramiento{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.page-asesoramiento main{
    flex: 1;
    display: flex;
    flex-direction: column;
}

body.page-asesoramiento .asesoramiento--page{
    flex: 1;
}

body.page-asesoramiento > header{
    background: #fff;
    border-bottom: 1px solid rgba(64, 77, 160, 0.12);
    box-shadow: 0 2px 14px rgba(10, 15, 44, 0.06);
}

body.page-asesoramiento nav a .fa-arrow-left{
    margin-right: 0.35rem;
    opacity: 0.75;
}

.footer-col h3 .logo-link{
    text-decoration: none;
}

/* CONTENEDOR PROBLEMA */

#problema{
    background: linear-gradient(135deg,#d7e7f8 20%, #eaf1fa 35%, #f2f4f8 85%);
    color: #070f37;
    padding: clamp(1.75rem, 4vw, 2.75rem) clamp(12px, 4vw, 24px);
    position: relative;
    overflow: hidden;
}

/* Misma forma biselada (arriba-izq + abajo-der) en Problema y Servicios */
.problema-intro-card,
.problema-item,
.servicios-item{
    --card-chamfer: clamp(10px, 1.6vw, 14px);
    clip-path: polygon(
        var(--card-chamfer) 0%,
        100% 0%,
        100% calc(100% - var(--card-chamfer)),
        calc(100% - var(--card-chamfer)) 100%,
        0% 100%,
        0% var(--card-chamfer)
    );
}

/* Tarjeta intro: misma “escala” visual que las tres tarjetas (padding, tipografía, radio) */
.problema-intro-card{
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-height: 0;
    background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 0;
    padding: 1.25rem 1.35rem 1.35rem 1.35rem;
    border: none;
    box-shadow:
        inset 0 0 0 1px rgba(64, 77, 160, 0.1),
        0 10px 24px rgba(10, 15, 44, 0.07);
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.problema-intro-card:hover{
    box-shadow:
        inset 0 0 0 1px rgba(64, 77, 160, 0.14),
        0 14px 28px rgba(10, 15, 44, 0.09);
    transform: translateY(-2px);
}

.problema-intro-card::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #2850c0 0%, #178e86 55%, #38bdf8 100%);
    border-radius: 0;
}

/* Etiquetas de sección: forma biselada; degradados azul/verde (brillo moderado) */

.problema-intro-card .tag-problem,
.tag-servicios,
.tag-proyectos,
.tag-planes,
.tag-sobre{
    --section-tag-chamfer: clamp(9px, 1.5vw, 13px);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px 7px;
    margin: 0;
    border: none;
    border-radius: 0;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 2px rgba(10, 15, 44, 0.28);
    clip-path: polygon(
        var(--section-tag-chamfer) 0%,
        100% 0%,
        100% calc(100% - var(--section-tag-chamfer)),
        calc(100% - var(--section-tag-chamfer)) 100%,
        0% 100%,
        0% var(--section-tag-chamfer)
    );
    transition:
        transform 0.3s cubic-bezier(0.33, 1, 0.32, 1),
        box-shadow 0.3s ease,
        filter 0.3s ease;
}

/* El problema: ancla a la izquierda; azul → teal → cian (un toque menos brillo) */
.problema-intro-card .tag-problem{
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    letter-spacing: 0.1em;
    background: linear-gradient(118deg, #2f5ad4 0%, #147a74 46%, #19b0c8 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.34),
        0 2px 14px rgba(40, 80, 192, 0.32);
}

/*
 * Nuestra solución: fondo de sección ya es azul — acento teal/menta (casi sin azul eléctrico)
 * para que no compita con el gradiente del bloque.
 */
.tag-servicios{
    letter-spacing: 0.14em;
    background: linear-gradient(118deg, #0f5c52 0%, #138a7d 38%, #1ba090 72%, #22a898 100%);
    box-shadow:
        inset 0 0 0 1px rgba(204, 251, 241, 0.28),
        0 2px 12px rgba(0, 0, 0, 0.28);
}

/* Proyectos: verde azulado → azul → cian (ligero bajón de brillo vs. antes) */
.tag-proyectos{
    letter-spacing: 0.14em;
    background: linear-gradient(118deg, #147a74 0%, #2448a8 52%, #2a96b8 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.34),
        0 2px 14px rgba(23, 142, 134, 0.34);
}

.tag-planes{
    letter-spacing: 0.14em;
    background: linear-gradient(118deg, #2850c0 0%, #178e86 55%, #38bdf8 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.34),
        0 2px 14px rgba(40, 80, 192, 0.3);
}

/* Sobre nosotros: azul → teal → cian (alineado al hero y al resto de la marca) */
.tag-sobre{
    letter-spacing: 0.14em;
    background: linear-gradient(118deg, #2850c0 0%, #1a6d9e 42%, #178e86 72%, #2a9eb8 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.36),
        0 2px 14px rgba(40, 80, 192, 0.36);
}

.problema-intro-card .tag-problem:hover,
.tag-servicios:hover,
.tag-proyectos:hover,
.tag-planes:hover,
.tag-sobre:hover{
    transform: translateY(-3px);
    filter: brightness(1.04) saturate(1.04);
}

.problema-intro-card .tag-problem:hover{
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.44),
        0 10px 24px rgba(40, 80, 192, 0.38);
}

.tag-servicios:hover{
    box-shadow:
        inset 0 0 0 1px rgba(236, 253, 250, 0.38),
        0 10px 22px rgba(0, 0, 0, 0.32);
}

.tag-proyectos:hover{
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.44),
        0 10px 24px rgba(23, 142, 134, 0.4);
}

.tag-planes:hover{
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.44),
        0 10px 24px rgba(40, 80, 192, 0.38);
}

.tag-sobre:hover{
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.44),
        0 10px 24px rgba(40, 80, 192, 0.42);
}

@media (prefers-reduced-motion: reduce){
    .problema-intro-card .tag-problem,
    .tag-servicios,
    .tag-proyectos,
    .tag-planes,
    .tag-sobre{
        transition-duration: 0.01ms;
    }

    .problema-intro-card .tag-problem:hover,
    .tag-servicios:hover,
    .tag-proyectos:hover,
    .tag-planes:hover,
    .tag-sobre:hover{
        transform: none;
        filter: none;
    }
}

.problema-intro-title{
    margin: 0.75rem 0 0.5rem;
    padding: 0;
    font-size: clamp(1.1rem, 1.5vw + 0.65rem, 1.45rem);
    font-weight: 700;
    line-height: 1.3;
    color: #070f37;
    letter-spacing: -0.02em;
}

.problema-highlight{
    background: linear-gradient(90deg, #2850c0, #178e86);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.problema-intro-desc{
    margin: 0;
    padding: 0;
    max-width: none;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #64748b;
    font-weight: 400;
}

/* Dos mitades iguales: el div "El problema" y el bloque de cards comparten escala */
.problema-envolvente{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: clamp(1rem, 2.5vw, 1.5rem);
    max-width: 1200px;
    margin: 0 auto;
}

.problema-texto{
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.problema-container{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.65rem, 1.5vw, 0.9rem);
    min-width: 0;
    align-content: stretch;
}

.problema-item{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    width: 100%;
    min-height: 0;
    background-color: #fff;
    padding: 1.15rem 0.95rem;
    border: none;
    border-radius: 0;
    box-shadow:
        inset 0 0 0 1px rgba(64, 77, 160, 0.1),
        0 10px 24px rgba(10, 15, 44, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.icono-problema{
    flex-shrink: 0;
    font-size: clamp(1.65rem, 2.8vw, 2.1rem);
    color: #2563eb;
    background: rgba(37, 99, 235, 0.1);
    padding: clamp(8px, 1.2vw, 12px);
    border-radius: 10px;
}

.icono-excel{
    flex-shrink: 0;
    font-size: clamp(1.65rem, 2.8vw, 2.1rem);
    color: #239d84;
    background: rgba(35, 157, 132, 0.12);
    padding: clamp(8px, 1.2vw, 12px);
    border-radius: 10px;
}    

.problema-item > div{
    flex: 1;
    min-width: 0;
    text-align: left;
    text-justify: auto;
}

.problema-item h4{
    margin: 0 0 0.35rem;
    font-size: clamp(0.88rem, 1.1vw, 1rem);
    line-height: 1.25;
}

.problema-item:hover{
    transform: translateY(-4px);
    box-shadow:
        inset 0 0 0 1px rgba(64, 77, 160, 0.14),
        0 16px 32px rgba(10, 15, 44, 0.1);
}

.problema-item p{
    margin: 0;
    font-size: clamp(0.78rem, 0.95vw, 0.88rem);
    line-height: 1.45;
    color: #64748b;
}

@media (max-width: 960px){
    .problema-envolvente{
        grid-template-columns: 1fr;
    }

    .problema-intro-card{
        flex: 0 1 auto;
        justify-content: flex-start;
    }
}

@media (max-width: 600px){
    .problema-container{
        grid-template-columns: 1fr;
    }
}


/* CONTENEDOR SERVICIOS — gama del sitio: indigos #404da0 / #4d81b6, CTA #2850c0 / #178e86, acento hero #38bdf8 / #22c55e */

#servicios{
    background: linear-gradient(135deg, #1a1f52 0%, #2c3578 28%, #404da0 58%, #4d81b6 100%);
    color: #f8fafc;
    padding: clamp(2rem, 5vw, 3.25rem) clamp(12px, 4vw, 24px);
    position: relative;
    overflow: hidden;
}

#servicios::before{
    content: "";
    position: absolute;
    top: -15%;
    right: -8%;
    width: min(52vw, 440px);
    height: min(52vw, 440px);
    background: radial-gradient(circle, rgba(64, 77, 160, 0.45) 0%, transparent 65%);
    pointer-events: none;
}

#servicios::after{
    content: "";
    position: absolute;
    bottom: -20%;
    left: -6%;
    width: min(42vw, 340px);
    height: min(42vw, 340px);
    background: radial-gradient(circle, rgba(77, 129, 182, 0.35) 0%, transparent 62%);
    pointer-events: none;
}

.servicios-envoltura{
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
}

.servicios-head{
    text-align: center;
    max-width: min(100%, 52rem);
    margin: 0 auto clamp(1.75rem, 4vw, 2.5rem);
}

.servicios-title{
    margin: 1rem 0 0.65rem;
    font-size: clamp(1.35rem, 2.5vw + 0.6rem, 2rem);
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

@media (max-width: 640px){
    .servicios-title{
        white-space: normal;
    }
}

.servicios-gradient{
    background: linear-gradient(90deg, #38bdf8, #22c55e);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.servicios-lead{
    margin: 0;
    font-size: clamp(0.9rem, 1.1vw, 1rem);
    line-height: 1.6;
    color: rgba(248, 250, 252, 0.72);
    font-weight: 400;
}

.servicios-container{
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1rem, 2.5vw, 1.35rem);
    justify-content: center;
}

.servicios-item{
    flex: 1 1 260px;
    max-width: 360px;
    min-width: 0;
    padding: 1.35rem 1.25rem;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.09);
    border: none;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.18),
        0 8px 28px rgba(15, 20, 60, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}

.servicios-item:hover{
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.14);
    box-shadow:
        inset 0 0 0 1px rgba(56, 189, 248, 0.45),
        0 18px 36px rgba(15, 20, 60, 0.32);
}

.servicios-item-icon{
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    border-radius: 12px;
    font-size: 1.35rem;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(40, 80, 192, 0.85), rgba(23, 142, 134, 0.75));
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.servicios-item h4{
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
}

.servicios-item p{
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(248, 250, 252, 0.75);
}


/* PROYECTOS — fondo azul–verde suave (menos “papel blanco”), cards alineadas a la marca */


/* ========== PROYECTOS — spotlight carousel (premium) ========== */

#proyectos{
    --px-brand: #404da0;
    --px-brand-mid: #4d81b6;
    --px-glow: #38bdf8;
    --px-teal: #178e86;
    --px-ink: #f4f7fb;
    --px-muted: rgba(226, 236, 248, 0.72);
    --px-ease: cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
    color: var(--px-ink);
    padding: clamp(1.35rem, 3.2vw, 2.25rem) clamp(14px, 3.5vw, 24px);
    background:
        radial-gradient(ellipse 70% 55% at 50% 0%, rgba(64, 77, 160, 0.45) 0%, transparent 58%),
        radial-gradient(ellipse 50% 40% at 12% 80%, rgba(56, 189, 248, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse 45% 40% at 90% 70%, rgba(23, 142, 134, 0.14) 0%, transparent 50%),
        linear-gradient(165deg, #070b1c 0%, #0c1430 38%, #101c3d 72%, #0a1628 100%);
}

#proyectos::before{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.18;
    background-image:
        linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(ellipse 65% 55% at 50% 42%, #000 15%, transparent 72%);
}

.proyectos-envoltura{
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* ——— Header: un solo bloque centrado ——— */
.px-head{
    width: 100%;
    max-width: 36rem;
    margin: 0 auto 0.65rem;
    padding: 0 0.25rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    transition: filter 0.35s var(--px-ease), opacity 0.35s ease, transform 0.35s var(--px-ease);
}

.px-head .tag-proyectos{
    margin: 0;
}

.px-title{
    margin: 0;
    font-size: clamp(1.4rem, 2.2vw + 0.5rem, 2.05rem);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.028em;
    color: #fff;
}

.px-title-accent{
    background: linear-gradient(90deg, #38bdf8, #22c55e);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.px-lead{
    margin: 0;
    max-width: 32rem;
    font-size: clamp(0.88rem, 1vw, 0.98rem);
    line-height: 1.5;
    color: var(--px-muted);
}

/* ——— Stage: flechas pegadas al carrusel ——— */
.px-stage{
    position: relative;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 0.5rem;
    transition: filter 0.35s var(--px-ease), opacity 0.35s ease, transform 0.35s var(--px-ease);
}

.px-viewport{
    position: relative;
    width: 100%;
    height: clamp(280px, 38vw, 360px);
    overflow: hidden;
    border-radius: 14px;
    isolation: isolate;
}

.px-track{
    position: absolute;
    inset: 0;
}

.px-card{
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(480px, 62%);
    margin: 0;
    transform-origin: center center;
    isolation: isolate;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition:
        transform 0.4s var(--px-ease),
        opacity 0.35s ease,
        filter 0.35s ease;
    will-change: transform, opacity;
}

.px-card.is-active{
    z-index: 8;
}

.px-card-frame{
    position: relative;
    border-radius: clamp(14px, 1.8vw, 20px);
    overflow: hidden;
    background: #0a1024;
    border: 1px solid rgba(148, 180, 220, 0.14);
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: box-shadow 0.35s ease, border-color 0.35s ease;
    cursor: pointer;
    /* capa opaca: nada de otras tarjetas atraviesa */
    transform: translateZ(0);
}

.px-card.is-active .px-card-frame{
    border-color: rgba(56, 189, 248, 0.45);
    box-shadow:
        0 0 0 1px rgba(56, 189, 248, 0.18),
        0 0 32px rgba(64, 77, 160, 0.38),
        0 18px 40px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.px-card:not(.is-active) .px-card-frame{
    filter: brightness(0.72);
}

/* Media: captura completa, sin recorte */
.px-card-media{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 168px;
    max-height: 248px;
    padding: 0.55rem 0.55rem 3.6rem;
    box-sizing: border-box;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 60% at 50% 30%, rgba(64, 77, 160, 0.28) 0%, transparent 70%),
        linear-gradient(145deg, #121a36, #0a1024);
}

.px-card-media img{
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 196px;
    object-fit: contain;
    object-position: center center;
    filter: brightness(1);
    transition: transform 0.35s var(--px-ease), filter 0.35s ease;
}

.px-card.is-active .px-card-frame:hover .px-card-media img,
.px-card.is-active .px-card-frame:focus-within .px-card-media img{
    transform: scale(1.03);
    filter: brightness(1.07);
}

.px-card-overlay{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    gap: 0.65rem;
    padding: 2.4rem 0.95rem 0.85rem;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(5, 8, 20, 0.55) 38%,
        rgba(5, 8, 20, 0.94) 78%,
        rgba(5, 8, 20, 0.98) 100%
    );
}

.px-card-copy{
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.px-card-title{
    margin: 0 0 0.2rem;
    font-size: clamp(0.92rem, 1.15vw, 1.08rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    line-height: 1.2;
}

.px-card-desc{
    margin: 0;
    font-size: clamp(0.74rem, 0.85vw, 0.84rem);
    line-height: 1.35;
    color: rgba(220, 232, 245, 0.78);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.px-card-link{
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    margin-top: 0.45rem;
    max-width: 100%;
    padding: 0.28rem 0.62rem 0.28rem 0.48rem;
    border-radius: 999px;
    border: 1px solid rgba(56, 189, 248, 0.28);
    background:
        linear-gradient(135deg, rgba(40, 80, 192, 0.22), rgba(23, 142, 134, 0.18));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 4px 14px rgba(8, 16, 40, 0.28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: 'Poppins', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.2;
    color: #b8e7ff;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition:
        color 0.28s ease,
        border-color 0.28s ease,
        background 0.28s ease,
        box-shadow 0.28s ease,
        transform 0.28s var(--px-ease);
}

.px-card-link i{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 999px;
    font-size: 0.58rem;
    color: #e8f8ff;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.55), rgba(23, 142, 134, 0.55));
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
}

.px-card-link:hover,
.px-card-link:focus-visible{
    outline: none;
    color: #f0fbff;
    border-color: rgba(56, 189, 248, 0.55);
    background:
        linear-gradient(135deg, rgba(40, 80, 192, 0.38), rgba(23, 142, 134, 0.32));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 6px 18px rgba(56, 189, 248, 0.18);
    transform: translateY(-1px);
}

.px-card.is-active .px-card-link{
    opacity: 1;
}

.px-card-more{
    pointer-events: auto;
    position: relative;
    z-index: 4;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(56, 189, 248, 0.4);
    background: rgba(12, 22, 48, 0.88);
    color: #e8f4ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s var(--px-ease),
        box-shadow 0.3s ease,
        color 0.3s ease;
}

.px-card-more:hover,
.px-card-more:focus-visible{
    outline: none;
    background: linear-gradient(135deg, #404da0, #178e86);
    border-color: transparent;
    color: #fff;
    transform: scale(1.06);
    box-shadow: 0 8px 18px rgba(64, 77, 160, 0.4);
}

.px-nav{
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(120, 160, 210, 0.3);
    background: rgba(10, 16, 36, 0.7);
    color: #e8f1ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.06);
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s var(--px-ease);
    z-index: 9;
}

.px-nav:hover,
.px-nav:focus-visible{
    outline: none;
    border-color: rgba(56, 189, 248, 0.55);
    background: rgba(64, 77, 160, 0.5);
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.22);
    transform: scale(1.06);
}

.px-dots{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.45rem;
    transition: filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}

.px-dot{
    width: 12px;
    height: 3px;
    border: none;
    padding: 0;
    border-radius: 999px;
    background: rgba(148, 175, 210, 0.28);
    cursor: pointer;
    transition:
        width 0.3s var(--px-ease),
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.px-dot.is-active{
    width: 26px;
    background: linear-gradient(90deg, #38bdf8, #404da0);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

.px-dot:hover:not(.is-active){
    background: rgba(148, 175, 210, 0.5);
}

.px-cta{
    width: 100%;
    max-width: 480px;
    margin: 0.7rem auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: nowrap;
    padding: 0.62rem 0.7rem 0.62rem 1.05rem;
    border-radius: 999px;
    border: 1px solid rgba(120, 160, 210, 0.18);
    background: rgba(8, 14, 32, 0.58);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}

.px-cta-text{
    margin: 0;
    font-size: 0.88rem;
    color: rgba(226, 236, 248, 0.88);
    font-weight: 500;
    line-height: 1.3;
}

.px-cta-btn{
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    border: 1px solid rgba(56, 189, 248, 0.32);
    background: linear-gradient(120deg, rgba(64, 77, 160, 0.95), rgba(23, 142, 134, 0.88));
    color: #fff;
    font: inherit;
    font-weight: 600;
    font-size: 0.84rem;
    letter-spacing: 0.02em;
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.3s var(--px-ease), box-shadow 0.3s ease, filter 0.3s ease;
}

.px-cta-btn:hover,
.px-cta-btn:focus-visible{
    outline: none;
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 8px 20px rgba(64, 77, 160, 0.38);
}

#proyectos.is-viewer-open .px-head,
#proyectos.is-viewer-open .px-stage,
#proyectos.is-viewer-open .px-dots,
#proyectos.is-viewer-open .px-cta{
    filter: blur(12px) saturate(0.85);
    opacity: 0.18;
    transform: scale(0.988);
    pointer-events: none;
}

/* ——— Responsive: breakpoints dedicados ——— */
@media (max-width: 1100px){
    .px-stage{ max-width: 960px; }
    .px-card{ width: min(440px, 64%); }
    .px-viewport{ height: clamp(270px, 40vw, 340px); }
}

@media (max-width: 900px){
    .px-head{
        max-width: 32rem;
        margin-bottom: 0.55rem;
        gap: 0.35rem;
    }
    .px-stage{
        max-width: 100%;
        gap: 0.35rem;
        grid-template-columns: 36px minmax(0, 1fr) 36px;
    }
    .px-viewport{ height: clamp(260px, 48vw, 320px); }
    .px-card{ width: min(400px, 70%); }
    .px-card-media{ max-height: 220px; padding-bottom: 3.4rem; }
    .px-card-media img{ max-height: 168px; }
}

@media (max-width: 768px){
    #proyectos{ padding: 1.25rem clamp(12px, 3vw, 18px); }
    .px-stage{
        grid-template-columns: 1fr;
        gap: 0;
    }
    .px-nav{
        position: absolute;
        top: 42%;
        z-index: 12;
        width: 36px;
        height: 36px;
    }
    .px-nav--prev{ left: 0.2rem; }
    .px-nav--next{ right: 0.2rem; }
    .px-viewport{
        height: clamp(250px, 62vw, 310px);
        margin: 0;
    }
    .px-card{ width: min(86%, 380px); }
}

@media (max-width: 480px){
    .px-head{ margin-bottom: 0.5rem; }
    .px-title{ font-size: clamp(1.25rem, 6vw, 1.55rem); }
    .px-lead{ font-size: 0.86rem; }
    .px-viewport{ height: clamp(240px, 78vw, 290px); }
    .px-card{ width: min(92%, 340px); }
    .px-card-media{
        min-height: 140px;
        max-height: 190px;
        padding: 0.4rem 0.4rem 3.2rem;
    }
    .px-card-media img{ max-height: 140px; }
    .px-card-desc{ -webkit-line-clamp: 2; }
    .px-dots{ margin-top: 0.4rem; }
    .px-cta{
        max-width: 100%;
        border-radius: 16px;
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 0.8rem 0.9rem;
        gap: 0.55rem;
        margin-top: 0.55rem;
    }
    .px-cta-btn{ justify-content: center; width: 100%; }
}

@media (max-width: 360px){
    .px-nav--prev{ left: 0; }
    .px-nav--next{ right: 0; }
    .px-card{ width: 94%; }
    .px-card-title{ font-size: 0.88rem; }
}

@media (prefers-reduced-motion: reduce){
    .px-card,
    .px-card-frame,
    .px-card-media img,
    .px-card-more,
    .px-nav,
    .px-dot,
    .px-cta-btn,
    .px-viewer-backdrop,
    .px-viewer-shell,
    .px-viewer-canvas img,
    #proyectos.is-viewer-open .px-head,
    #proyectos.is-viewer-open .px-stage,
    #proyectos.is-viewer-open .px-dots,
    #proyectos.is-viewer-open .px-cta{
        transition: none !important;
    }
}

/* ========== VISOR DE PROYECTO (premium, sin recorte) ========== */

.px-viewer[hidden]{
    display: none !important;
}

.px-viewer:not([hidden]){
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding:
        max(1rem, env(safe-area-inset-top))
        max(1rem, env(safe-area-inset-right))
        max(1rem, env(safe-area-inset-bottom))
        max(1rem, env(safe-area-inset-left));
    box-sizing: border-box;
    pointer-events: none;
}

.px-viewer.is-open{
    pointer-events: auto;
}

.px-viewer-backdrop{
    position: absolute;
    inset: 0;
    border: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
    background:
        radial-gradient(ellipse 70% 55% at 50% 20%, rgba(64, 77, 160, 0.42) 0%, transparent 58%),
        radial-gradient(ellipse 50% 40% at 15% 85%, rgba(56, 189, 248, 0.12) 0%, transparent 55%),
        linear-gradient(165deg, rgba(7, 11, 28, 0.78) 0%, rgba(12, 20, 48, 0.84) 45%, rgba(10, 22, 40, 0.88) 100%);
    backdrop-filter: blur(22px) saturate(1.1);
    -webkit-backdrop-filter: blur(22px) saturate(1.1);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.px-viewer.is-open .px-viewer-backdrop{
    opacity: 1;
}

.px-viewer-shell{
    position: relative;
    z-index: 1;
    width: min(960px, 100%);
    max-height: min(92vh, 900px);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.9rem 0.9rem 0.95rem;
    border-radius: 20px;
    border: 1px solid rgba(148, 180, 220, 0.16);
    background:
        linear-gradient(160deg, rgba(18, 28, 58, 0.96) 0%, rgba(10, 16, 36, 0.97) 55%, rgba(8, 14, 30, 0.98) 100%);
    box-shadow:
        0 0 0 1px rgba(56, 189, 248, 0.08),
        0 28px 70px rgba(0, 0, 0, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    transform: translateY(14px) scale(0.96);
    transform-origin: center center;
    transition:
        opacity 0.35s var(--px-ease),
        transform 0.4s var(--px-ease);
    overflow: hidden;
}

.px-viewer.is-open .px-viewer-shell{
    opacity: 1;
    transform: translateY(0) scale(1);
}

.px-viewer-bar{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.1rem 0.1rem 0 0.3rem;
    flex-shrink: 0;
}

.px-viewer-kicker{
    margin: 0 0 0.15rem;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(56, 189, 248, 0.9);
}

.px-viewer-title{
    margin: 0;
    font-size: clamp(1rem, 1.6vw, 1.28rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    line-height: 1.25;
}

.px-viewer-close{
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(148, 180, 220, 0.2);
    background: rgba(12, 20, 42, 0.8);
    color: #e8f1ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.28s ease, border-color 0.28s ease, transform 0.28s var(--px-ease);
}

.px-viewer-close:hover,
.px-viewer-close:focus-visible{
    outline: none;
    background: rgba(64, 77, 160, 0.55);
    border-color: rgba(56, 189, 248, 0.4);
    transform: scale(1.04);
}

.px-viewer-frame{
    position: relative;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.px-viewer-canvas{
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    max-height: min(68vh, 620px);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(148, 180, 220, 0.14);
    background:
        radial-gradient(ellipse 70% 50% at 50% 30%, rgba(64, 77, 160, 0.22) 0%, transparent 65%),
        #070b18;
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.px-viewer-canvas img{
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(68vh, 620px);
    object-fit: contain;
    object-position: center center;
    user-select: none;
    -webkit-user-drag: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.px-viewer-canvas.is-fading img{
    opacity: 0;
}

.px-viewer-nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(200, 220, 245, 0.22);
    background: rgba(8, 14, 30, 0.72);
    color: #e8f1ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition:
        background 0.28s ease,
        border-color 0.28s ease,
        transform 0.28s var(--px-ease),
        box-shadow 0.28s ease;
}

.px-viewer-nav[hidden]{
    visibility: hidden;
    pointer-events: none;
}

.px-viewer-nav:hover,
.px-viewer-nav:focus-visible{
    outline: none;
    border-color: rgba(56, 189, 248, 0.5);
    background: rgba(64, 77, 160, 0.62);
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.18);
    transform: translateY(-50%) scale(1.05);
}

.px-viewer-nav--prev{ left: 0.55rem; }
.px-viewer-nav--next{ right: 0.55rem; }

.px-viewer-footer{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.05rem 0.3rem 0.1rem;
    flex-shrink: 0;
}

.px-viewer-footer__copy{
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.px-viewer-desc{
    margin: 0;
    flex: 1 1 auto;
    font-size: 0.88rem;
    line-height: 1.45;
    color: rgba(220, 232, 245, 0.72);
    max-width: 62ch;
}

.px-viewer-link{
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: fit-content;
    max-width: 100%;
    padding: 0.38rem 0.78rem 0.38rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(56, 189, 248, 0.3);
    background:
        linear-gradient(135deg, rgba(40, 80, 192, 0.28), rgba(23, 142, 134, 0.22));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 6px 16px rgba(8, 16, 40, 0.35);
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: #c8ecff;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition:
        color 0.28s ease,
        border-color 0.28s ease,
        background 0.28s ease,
        box-shadow 0.28s ease,
        transform 0.28s var(--px-ease);
}

.px-viewer-link[hidden]{
    display: none !important;
}

.px-viewer-link:hover,
.px-viewer-link:focus-visible{
    outline: none;
    color: #ffffff;
    border-color: rgba(56, 189, 248, 0.58);
    background:
        linear-gradient(135deg, rgba(40, 80, 192, 0.45), rgba(23, 142, 134, 0.38));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.07) inset,
        0 8px 22px rgba(56, 189, 248, 0.22);
    transform: translateY(-1px);
}

.px-viewer-link i{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    font-size: 0.62rem;
    color: #f0fbff;
    background: linear-gradient(135deg, #38bdf8, #178e86);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
}

.px-viewer-counter{
    flex: 0 0 auto;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: rgba(148, 180, 220, 0.75);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 768px){
    .px-viewer-shell{
        padding: 0.75rem;
        border-radius: 16px;
        max-height: 94vh;
        gap: 0.55rem;
    }
    .px-viewer-canvas,
    .px-viewer-canvas img{
        max-height: min(58vh, 480px);
    }
}

@media (max-width: 480px){
    .px-viewer-shell{ padding: 0.65rem; }
    .px-viewer-canvas,
    .px-viewer-canvas img{
        max-height: min(52vh, 380px);
    }
    .px-viewer-nav{
        width: 36px;
        height: 36px;
    }
    .px-viewer-nav--prev{ left: 0.35rem; }
    .px-viewer-nav--next{ right: 0.35rem; }
    .px-viewer-footer{
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }
}

@media (prefers-reduced-motion: reduce){
    .px-viewer-backdrop,
    .px-viewer-shell,
    .px-viewer-canvas img{
        transition: none !important;
    }
}

/* SOBRE NOSOTROS — panel unificado (foto + texto), encaje con la marca */

/* ========== PLANES — pricing premium ========== */

#planes{
    --plan-ink: #0f1a3a;
    --plan-muted: rgba(15, 26, 58, 0.68);
    --plan-line: rgba(40, 80, 192, 0.12);
    --plan-ease: cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(2.25rem, 5.5vw, 3.75rem) clamp(14px, 4vw, 28px);
    color: var(--plan-ink);
    background:
        radial-gradient(ellipse 70% 50% at 10% 0%, rgba(56, 189, 248, 0.14), transparent 55%),
        radial-gradient(ellipse 60% 45% at 92% 100%, rgba(23, 142, 134, 0.12), transparent 50%),
        linear-gradient(165deg, #eef3fb 0%, #f7f9fd 42%, #e8f0fa 100%);
}

.planes-ambiance{
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.planes-ambiance__glow{
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.55;
    animation: cmr-orb-float 18s var(--plan-ease) infinite alternate;
}

.planes-ambiance__glow--a{
    width: min(48vw, 380px);
    height: min(48vw, 380px);
    top: -12%;
    right: -6%;
    background: radial-gradient(circle, rgba(40, 80, 192, 0.28), transparent 68%);
}

.planes-ambiance__glow--b{
    width: min(40vw, 320px);
    height: min(40vw, 320px);
    bottom: -10%;
    left: -8%;
    background: radial-gradient(circle, rgba(23, 142, 134, 0.22), transparent 70%);
    animation-delay: -6s;
}

.planes-ambiance__grid{
    position: absolute;
    inset: -8%;
    opacity: 0.35;
    background-image:
        linear-gradient(rgba(40, 80, 192, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(40, 80, 192, 0.06) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
    animation: cmr-grid-drift 30s linear infinite;
}

.planes-envoltura{
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.planes-head{
    width: 100%;
    max-width: 40rem;
    text-align: center;
    margin-bottom: clamp(1.5rem, 3.5vw, 2.35rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
}

.planes-title{
    margin: 0;
    font-size: clamp(1.45rem, 2.3vw + 0.55rem, 2.15rem);
    font-weight: 700;
    line-height: 1.2;
    color: #0c1636;
}

.planes-title-accent{
    background: linear-gradient(100deg, #2850c0 0%, #178e86 55%, #38bdf8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.planes-lead{
    margin: 0;
    font-size: clamp(0.92rem, 0.3vw + 0.85rem, 1.02rem);
    line-height: 1.55;
    color: var(--plan-muted);
    max-width: 36rem;
}

.planes-grid{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 1.5rem);
    align-items: stretch;
}

.plan-card{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    padding: clamp(1.35rem, 2.5vw, 1.85rem);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 12px 32px -16px rgba(20, 40, 90, 0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition:
        transform 0.35s var(--plan-ease),
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.plan-card::before{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.12), transparent 55%);
    transition: opacity 0.35s ease;
}

@media (hover: hover) and (pointer: fine){
    .plan-card:hover{
        transform: translateY(-8px);
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.95) inset,
            0 22px 48px -18px rgba(40, 80, 192, 0.28);
        border-color: rgba(56, 189, 248, 0.35);
    }

    .plan-card:hover::before{
        opacity: 1;
    }

    .plan-card--featured:hover{
        box-shadow:
            0 0 0 1px rgba(56, 189, 248, 0.35),
            0 28px 56px -18px rgba(40, 80, 192, 0.4),
            0 0 40px rgba(56, 189, 248, 0.18);
    }
}

.plan-card--featured{
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(244, 249, 255, 0.94));
    border: 1px solid transparent;
    background-clip: padding-box;
    box-shadow:
        0 0 0 1px rgba(40, 80, 192, 0.22),
        0 18px 44px -16px rgba(40, 80, 192, 0.35),
        0 0 32px rgba(56, 189, 248, 0.12);
    transform: scale(1.02);
    z-index: 1;
}

.plan-card--featured::after{
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(145deg, #2850c0, #38bdf8 45%, #178e86);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.85;
}

.plan-card__badge{
    position: absolute;
    top: 1rem;
    right: 1rem;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(100deg, #2850c0, #178e86);
    box-shadow: 0 6px 16px rgba(40, 80, 192, 0.28);
}

.plan-card__top{
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding-right: 0.25rem;
}

.plan-card--featured .plan-card__top{
    padding-right: 6.5rem;
}

.plan-card__name{
    margin: 0;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #2850c0;
}

.plan-card--featured .plan-card__name{
    background: linear-gradient(100deg, #2850c0, #178e86);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.plan-card__price{
    margin: 0.15rem 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.35rem;
    line-height: 1;
}

.plan-card__currency{
    font-size: 1rem;
    font-weight: 600;
    color: rgba(15, 26, 58, 0.7);
}

.plan-card__amount{
    font-size: clamp(2rem, 3vw + 0.6rem, 2.55rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #0c1636;
}

.plan-card__period{
    font-size: 0.92rem;
    color: rgba(15, 26, 58, 0.55);
    font-weight: 500;
}

.plan-card__subtitle{
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--plan-muted);
}

.plan-card__features{
    list-style: none;
    margin: 0;
    padding: 0.85rem 0 0;
    border-top: 1px solid var(--plan-line);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1;
}

.plan-card__features li{
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.9rem;
    line-height: 1.4;
    color: rgba(15, 26, 58, 0.82);
}

.plan-card__features i{
    flex-shrink: 0;
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.08rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.58rem;
    color: #178e86;
    background: rgba(23, 142, 134, 0.12);
    transition: transform 0.25s var(--plan-ease), background 0.25s ease;
}

.plan-card.is-inview .plan-card__features i,
.plan-card__features li{
    animation: none;
}

[data-reveal].is-inview .plan-card__features li{
    animation: plan-check-in 0.45s var(--plan-ease) both;
}

[data-reveal].is-inview .plan-card__features li:nth-child(1){ animation-delay: 0.08s; }
[data-reveal].is-inview .plan-card__features li:nth-child(2){ animation-delay: 0.12s; }
[data-reveal].is-inview .plan-card__features li:nth-child(3){ animation-delay: 0.16s; }
[data-reveal].is-inview .plan-card__features li:nth-child(4){ animation-delay: 0.2s; }
[data-reveal].is-inview .plan-card__features li:nth-child(5){ animation-delay: 0.24s; }
[data-reveal].is-inview .plan-card__features li:nth-child(6){ animation-delay: 0.28s; }
[data-reveal].is-inview .plan-card__features li:nth-child(7){ animation-delay: 0.32s; }

@keyframes plan-check-in{
    from{ opacity: 0; transform: translateX(-6px); }
    to{ opacity: 1; transform: translateX(0); }
}

@media (hover: hover) and (pointer: fine){
    .plan-card:hover .plan-card__features i{
        transform: scale(1.12);
        background: rgba(56, 189, 248, 0.18);
        color: #2850c0;
    }
}

.plan-card__feature--highlight{
    font-weight: 600;
    color: #0c1636;
}

.plan-card__feature--highlight i{
    color: #2850c0;
    background: rgba(40, 80, 192, 0.14);
}

.plan-card__cta{
    margin-top: auto;
    width: 100%;
    appearance: none;
    border: 1px solid rgba(40, 80, 192, 0.28);
    border-radius: 14px;
    padding: 0.85rem 1.1rem;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    color: #2850c0;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 6px 16px rgba(40, 80, 192, 0.08);
    transition:
        transform 0.25s var(--plan-ease),
        background 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.plan-card__cta--primary{
    color: #fff;
    border-color: transparent;
    background: linear-gradient(100deg, #2850c0, #178e86 70%, #2a96b8);
    box-shadow: 0 10px 24px rgba(40, 80, 192, 0.28);
}

@media (hover: hover) and (pointer: fine){
    .plan-card__cta:hover{
        transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) - 2px), 0);
        border-color: #2850c0;
        box-shadow: 0 12px 26px rgba(40, 80, 192, 0.16);
    }

    .plan-card__cta--primary:hover{
        filter: brightness(1.05);
        box-shadow: 0 14px 30px rgba(40, 80, 192, 0.34);
    }
}

.planes-note{
    margin: clamp(1.35rem, 3vw, 1.85rem) auto 0;
    max-width: 42rem;
    text-align: center;
    font-size: 0.86rem;
    line-height: 1.55;
    color: rgba(15, 26, 58, 0.62);
}

.planes-cta{
    width: 100%;
    margin-top: clamp(1.35rem, 3vw, 1.85rem);
    padding: clamp(1.15rem, 2.5vw, 1.5rem) clamp(1.1rem, 2.5vw, 1.6rem);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    background:
        linear-gradient(120deg, rgba(40, 80, 192, 0.08), rgba(23, 142, 134, 0.08));
    border: 1px solid rgba(40, 80, 192, 0.14);
    box-shadow: 0 10px 28px -18px rgba(20, 40, 90, 0.25);
}

.planes-cta__copy{
    flex: 1 1 16rem;
    min-width: 0;
}

.planes-cta__title{
    margin: 0 0 0.3rem;
    font-size: 1.08rem;
    font-weight: 700;
    color: #0c1636;
}

.planes-cta__text{
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--plan-muted);
}

.planes-cta__btn{
    appearance: none;
    border: none;
    border-radius: 14px;
    padding: 0.9rem 1.25rem;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    background: linear-gradient(100deg, #2850c0, #178e86);
    box-shadow: 0 10px 24px rgba(40, 80, 192, 0.28);
    transition: transform 0.25s var(--plan-ease), filter 0.25s ease, box-shadow 0.25s ease;
    flex: 0 1 auto;
}

.planes-cta__btn i{
    transition: transform 0.25s var(--plan-ease);
}

@media (hover: hover) and (pointer: fine){
    .planes-cta__btn:hover{
        transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) - 2px), 0);
        filter: brightness(1.05);
        box-shadow: 0 14px 28px rgba(40, 80, 192, 0.34);
    }

    .planes-cta__btn:hover i{
        transform: translateX(3px);
    }
}

@media (max-width: 900px){
    .plan-card--featured{
        transform: none;
    }

    .planes-grid{
        gap: 1rem;
    }
}

@media (max-width: 760px){
    .planes-grid{
        grid-template-columns: 1fr;
        gap: 1.15rem;
    }

    .plan-card--featured{
        order: -1;
    }

    .planes-cta{
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .planes-cta__btn{
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce){
    .planes-ambiance__glow,
    .planes-ambiance__grid,
    [data-reveal].is-inview .plan-card__features li{
        animation: none !important;
    }

    .plan-card,
    .plan-card__cta,
    .planes-cta__btn{
        transition: none !important;
    }
}

.sobre-nosotros{
    position: relative;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 3.25rem) clamp(12px, 4vw, 24px);
    color: #f8fafc;
}

.sobre-nosotros-backdrop{
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: #0b1224;
    background-image:
        radial-gradient(ellipse 75% 55% at 18% 22%, rgba(56, 189, 248, 0.2) 0%, transparent 55%),
        radial-gradient(ellipse 65% 50% at 88% 72%, rgba(23, 142, 134, 0.24) 0%, transparent 52%),
        radial-gradient(ellipse 50% 42% at 50% 100%, rgba(251, 191, 36, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255, 237, 213, 0.07) 0%, transparent 45%),
        linear-gradient(118deg, #0a1430 0%, #152a4f 36%, #1a4a62 62%, #163d48 100%);
    background-size: cover;
    background-position: center;
}

/* Para foto de fondo: añadí IMG/sobre-nosotros-bg.jpg en la carpeta IMG y descomentá la última capa en .sobre-nosotros-backdrop arriba (background-image). */

.sobre-nosotros-inner{
    position: relative;
    z-index: 1;
    max-width: min(1040px, 100%);
    margin-left: auto;
    margin-right: auto;
}

.sobre-nosotros-head{
    text-align: center;
    max-width: min(38rem, 100%);
    margin: 0 auto clamp(2rem, 4.5vw, 2.85rem);
    padding: 0 clamp(4px, 2vw, 12px);
}

.sobre-nosotros-head .tag-sobre{
    margin-bottom: 0.45rem;
}

.sobre-nosotros-head h2{
    margin: 0.75rem 0 1rem;
    font-size: clamp(1.32rem, 2.2vw + 0.55rem, 1.95rem);
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -0.018em;
    color: #fffefb;
    text-shadow: 0 2px 28px rgba(0, 0, 0, 0.32);
}

.sobre-gradient{
    background: linear-gradient(90deg, #7dd3fc, #5eead4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sobre-lead{
    margin: 0 auto;
    max-width: min(34em, 100%);
    font-size: clamp(0.95rem, 1.1vw, 1.06rem);
    line-height: 1.72;
    color: rgba(254, 249, 239, 0.9);
    font-weight: 400;
    letter-spacing: 0.01em;
}

.sobre-nosotros-panel{
    --panel-chamfer: clamp(14px, 2vw, 22px);
    display: block;
    max-width: min(720px, 100%);
    margin: 0 auto;
    overflow: hidden;
    clip-path: polygon(
        var(--panel-chamfer) 0%,
        100% 0%,
        100% calc(100% - var(--panel-chamfer)),
        calc(100% - var(--panel-chamfer)) 100%,
        0% 100%,
        0% var(--panel-chamfer)
    );
    background: linear-gradient(
        150deg,
        rgba(255, 255, 255, 0.11) 0%,
        rgba(255, 247, 237, 0.06) 38%,
        rgba(255, 255, 255, 0.05) 52%,
        rgba(15, 23, 42, 0.22) 100%
    );
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow:
        0 24px 56px rgba(5, 12, 35, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.sobre-copy{
    --copy-chamfer: clamp(12px, 1.8vw, 18px);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    padding: clamp(1.45rem, 3.2vw, 2.35rem) clamp(1.35rem, 3vw, 2rem);
    background: transparent;
    border: none;
    box-shadow: none;
    clip-path: none;
}

.sobre-copy::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #3b63d4 0%, #1a9a8e 52%, #5ad4e8 100%);
    border-radius: 0;
    opacity: 0.95;
}

.sobre-copy-texto{
    margin: 0 0 1.15rem;
    font-size: clamp(0.9rem, 1.02vw, 1.03rem);
    line-height: 1.78;
    font-weight: 400;
    color: rgba(252, 251, 248, 0.94);
    max-width: none;
    letter-spacing: normal;
    word-spacing: normal;
    text-wrap: pretty;
    text-align: justify;
    text-justify: inter-word;
    hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
}

.sobre-copy-texto:last-child{
    margin-bottom: 0;
}

.sobre-copy-location{
    margin: 1.15rem 0 0;
    font-size: clamp(0.82rem, 0.95vw, 0.92rem);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: rgba(148, 200, 230, 0.88);
}

@media (max-width: 900px){
    .sobre-nosotros-inner{
        max-width: min(100%, 640px);
    }

    .sobre-nosotros-panel{
        max-width: 100%;
    }

    .sobre-copy{
        padding: clamp(1.35rem, 3.5vw, 2rem) clamp(1.2rem, 4vw, 1.65rem);
    }

    .sobre-copy-texto{
        font-size: clamp(0.9rem, 2.6vw, 1rem);
        line-height: 1.76;
    }
}

@media (max-width: 520px){
    .sobre-nosotros-head{
        margin-bottom: clamp(1.5rem, 5vw, 2rem);
    }

    .sobre-copy-texto{
        font-size: clamp(0.89rem, 3.6vw, 0.99rem);
        line-height: 1.74;
    }
}

/* ASESORAMIENTO — formulario pre-entrevista */

.asesoramiento{
    background: linear-gradient(135deg, #dce8f5 0%, #e8f0fa 35%, #f4f7fb 100%);
    color: #070f37;
    padding: clamp(2rem, 5vw, 3.25rem) clamp(12px, 4vw, 24px);
    position: relative;
    overflow: hidden;
}

.asesoramiento::before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: min(55%, 380px);
    height: min(45%, 320px);
    background: radial-gradient(circle, rgba(40, 80, 192, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.asesoramiento-envoltura{
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
}

.asesoramiento-head{
    text-align: center;
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.tag-asesoramiento{
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #2850c0;
    background: rgba(40, 80, 192, 0.1);
    border: 1px solid rgba(40, 80, 192, 0.22);
    margin: 0;
}

.asesoramiento-head h1,
.asesoramiento-head h3{
    margin: 1rem 0 0.65rem;
    font-size: clamp(1.35rem, 2.2vw + 0.55rem, 1.85rem);
    font-weight: 700;
    line-height: 1.25;
    color: #070f37;
    letter-spacing: -0.02em;
}

.asesoramiento-lead{
    margin: 0 auto;
    max-width: 560px;
    font-size: clamp(0.9rem, 1.05vw, 1rem);
    line-height: 1.6;
    color: #64748b;
    font-weight: 400;
}

.asesoramiento-form{
    background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(64, 77, 160, 0.12);
    border-radius: 16px;
    padding: clamp(1.25rem, 3vw, 1.85rem);
    box-shadow:
        0 4px 6px -1px rgba(10, 15, 44, 0.06),
        0 16px 36px -8px rgba(40, 80, 192, 0.12);
}

.form-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1rem, 2vw, 1.25rem);
}

.form-field--full{
    grid-column: 1 / -1;
}

.form-field label,
.form-fieldset legend{
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.4rem;
}

.legend-hint{
    font-weight: 400;
    color: #64748b;
    font-size: 0.8rem;
}

.req{
    color: #dc2626;
    font-weight: 700;
}

/*
 * Marco biselado con grosor uniforme: el borde es el padding del shell (gradiente);
 * el control interior lleva un clip paralelo (chamfer − 2×grosor) para que el trazo mida igual en rectas y en cortes.
 */
.form-input-shell{
    --form-borde-w: 2px;
    --form-chamfer: clamp(10px, 1.35vw, 14px);
    --form-chamfer-in: calc(var(--form-chamfer) - 2 * var(--form-borde-w));
    display: block;
    width: 100%;
    padding: var(--form-borde-w);
    box-sizing: border-box;
    background: linear-gradient(90deg, #2850c0, #178e86);
    clip-path: polygon(
        var(--form-chamfer) 0%,
        100% 0%,
        100% calc(100% - var(--form-chamfer)),
        calc(100% - var(--form-chamfer)) 100%,
        0% 100%,
        0% var(--form-chamfer)
    );
    transition: background 0.2s ease, filter 0.2s ease;
}

.form-input-shell:focus-within{
    background: linear-gradient(90deg, #3568d4, #1aa090);
    filter: drop-shadow(0 0 6px rgba(40, 80, 192, 0.28));
}

.form-input-shell > input,
.form-input-shell > select,
.form-input-shell > textarea{
    display: block;
    width: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 0.92rem;
    padding: 0.65rem 0.85rem;
    color: #fff;
    caret-color: #fff;
    background: linear-gradient(90deg, #2850c0, #178e86);
    outline: none;
    clip-path: polygon(
        var(--form-chamfer-in) 0%,
        100% 0%,
        100% calc(100% - var(--form-chamfer-in)),
        calc(100% - var(--form-chamfer-in)) 100%,
        0% 100%,
        0% var(--form-chamfer-in)
    );
}

.form-input-shell > input::placeholder,
.form-input-shell > textarea::placeholder{
    color: rgba(255, 255, 255, 0.5);
    opacity: 1;
}

.form-input-shell > input:focus,
.form-input-shell > select:focus,
.form-input-shell > textarea:focus{
    background: linear-gradient(90deg, #3568d4, #1aa090);
}

.form-input-shell > select{
    cursor: pointer;
    color-scheme: dark;
}

.form-input-shell > select option{
    background: #2850c0;
    color: #fff;
}

.form-input-shell > input:-webkit-autofill,
.form-input-shell > textarea:-webkit-autofill,
.form-input-shell > select:-webkit-autofill{
    -webkit-text-fill-color: #fff;
    box-shadow: 0 0 0 1000px #2850c0 inset;
    transition: background-color 99999s ease-out 0s;
}

.form-input-shell > textarea{
    resize: vertical;
    min-height: 2.5rem;
    line-height: 1.5;
}

.form-fieldset{
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.form-fieldset legend{
    padding: 0;
    margin-bottom: 0.55rem;
}

.form-check-grid{
    display: grid;
    gap: 0.5rem;
}

.form-check{
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 400;
    color: #475569;
    cursor: pointer;
    line-height: 1.4;
}

.form-check input{
    margin-top: 0.2rem;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    accent-color: #2850c0;
}

.form-privacy{
    margin: 1.25rem 0 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: #64748b;
}

.form-actions{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-top: 1.25rem;
}

.form-actions .btn-primary{
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
}

.btn-form-secondary{
    display: inline-block;
    padding: 10px 18px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    color: #2850c0;
    border: 2px solid rgba(40, 80, 192, 0.35);
    background: transparent;
    transition: background 0.2s ease, color 0.2s ease;
}

.btn-form-secondary:hover{
    background: rgba(40, 80, 192, 0.08);
    color: #1e3a8a;
}

.form-error{
    margin-top: 1rem;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.25);
    color: #b91c1c;
    font-size: 0.88rem;
    font-weight: 500;
}

@media (max-width: 640px){
    .form-grid{
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce){
    .form-input-shell:focus-within{
        filter: none;
    }
}

h1, h2, h3, h4{
    font-weight: 600;
}
p{
    font-weight: 300;
}



/*FOOTER*/

#footer{
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 55% at 12% 0%, rgba(40, 80, 192, 0.28), transparent 58%),
        radial-gradient(ellipse 55% 45% at 88% 100%, rgba(23, 142, 134, 0.18), transparent 55%),
        linear-gradient(165deg, #0a0f2c 0%, #0c1538 48%, #0a122e 100%);
    color: white;
    padding: clamp(1.6rem, 3.5vw, 2.4rem) clamp(16px, 4vw, 28px) clamp(0.9rem, 2vw, 1.2rem);
    padding-bottom: max(clamp(0.9rem, 2vw, 1.2rem), env(safe-area-inset-bottom));
}

#footer::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.22;
    background-image:
        linear-gradient(rgba(56, 189, 248, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56, 189, 248, 0.07) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.55), transparent 85%);
}

.footer-container{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(1.35rem, 3.5vw, 2.4rem);
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}
 
.footer-col{
    flex: 1;
    min-width: min(100%, 220px);
}

.footer-col--brand{
    flex: 1.35;
    min-width: min(100%, 260px);
}

.footer-col--contact{
    flex: 1.15;
    min-width: min(100%, 250px);
}

.footer-col h3{
    margin-top: 0;
}

.footer-col h3 img,
.footer-col h3 .logo-link img{
    max-width: 150px;
    width: 100%;
    height: auto;
    display: block;
}

.footer-descripcion{
    max-width: 34rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: rgba(226, 236, 255, 0.78);
    margin: 0.65rem 0 0.85rem;
}

.footer-mini{
    max-width: 500px;
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    margin-top: 4px;
}

.footer-col h3,
.footer-col h4{
    margin-bottom: 0.85rem;
    font-family: 'Orbitron', sans-serif;
}

.footer-col h4{
    margin-top: 0;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #e8f2ff;
    position: relative;
    padding-bottom: 0.55rem;
}

.footer-col h4::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 2rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #2850c0, #178e86);
}

.footer-nav{
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-nav li{
    margin-bottom: 0.2rem;
}

.footer-nav a{
    display: inline-flex;
    align-items: center;
    min-height: 1.85rem;
    text-decoration: none;
    color: rgba(214, 228, 248, 0.72);
    font-size: 0.9rem;
    transition: color 0.22s ease, transform 0.22s ease;
}

.footer-nav a:hover{
    color: #7dd3fc;
    transform: translateX(2px);
}

.footer-contact{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.footer-contact__link{
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(148, 180, 220, 0.12);
    transition:
        background 0.22s ease,
        border-color 0.22s ease,
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

.footer-contact__link:hover{
    background: rgba(56, 189, 248, 0.08);
    border-color: rgba(56, 189, 248, 0.35);
    box-shadow: 0 8px 22px rgba(8, 16, 48, 0.28);
    transform: translateY(-1px);
    color: inherit;
}

.footer-contact__icon{
    flex-shrink: 0;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    color: #e8f4ff;
    background: linear-gradient(145deg, rgba(40, 80, 192, 0.55), rgba(23, 142, 134, 0.35));
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-contact__icon--wa{
    background: linear-gradient(145deg, rgba(34, 197, 94, 0.45), rgba(23, 142, 134, 0.4));
}

.footer-contact__icon--ig{
    background: linear-gradient(145deg, rgba(225, 48, 108, 0.45), rgba(131, 58, 180, 0.4), rgba(253, 29, 29, 0.28));
}

.footer-contact__text{
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.footer-contact__label{
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(170, 196, 230, 0.7);
}

.footer-contact__value{
    font-size: 0.88rem;
    color: rgba(236, 244, 255, 0.92);
    word-break: break-word;
}

.footer-contact__link:hover .footer-contact__value{
    color: #fff;
}

#footer .btn-nav{
    padding: 0.55rem 0.95rem;
    margin: 0.45rem 0 0;
    font-size: 0.8rem;
}

.footer-bottom{
    max-width: 1200px;
    margin: 1.35rem auto 0;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 0.85rem;
    font-size: 0.75rem;
    color: rgba(210, 224, 245, 0.78);
}

.footer-bottom p{
    margin: 0;
    text-align: center;
}

@media (hover: hover) and (pointer: fine){
    .footer-contact__link:active{
        transform: translateY(0);
    }
}