html,body{
    height:100%;
}
html{
    font-size:16px;
}
*{
    box-sizing:border-box;
}
.contenido-pagina {
    flex: 1;
}
.pantalla{
    display:none;
}
.pantalla.activa{
    display:block;
}
:root{
    --escala-ui:1.03;
}
/*Fondo animado*//*--------------------------------------------------------------------------------------------------------------------------------------------*/
body {
    background: #000;
    overflow-x: hidden;
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.fondo {
    position: fixed;

    inset: 0;

    z-index: -1;
}
.fondo::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background: #00aaff;

    filter: blur(80px);

    top: 10%;
    left: 15%;

    animation: respirar 12s infinite ease-in-out;
}
.glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(80px);

    animation: respirar 12s infinite ease-in-out;
}
.glow-1 {
    width: 180px;
    height: 180px;

    background: #00aaff;

    top: 10%;
    left: 15%;
}
.glow-2 {
    width: 140px;
    height: 140px;

    background: #0088ff;

    top: 55%;
    right: 12%;

    animation-delay: -4s;
}
.glow-3 {
    width: 120px;
    height: 120px;

    background: #8fdfff;

    bottom: 15%;
    left: 35%;

    animation-delay: -8s;
}

.fondo::after{
    content:"";
    position:absolute;
    width:200px;
    height:200px;
    background:#00ffff;
    bottom:18%;
    right:25%;
    border-radius:50%;
    filter:blur(80px);
    animation:respirar 15s infinite ease-in-out;
}
@keyframes respirar {

    0%, 100% {
        transform: scale(1);
        opacity: .25;
    }

    50% {
        transform: scale(1.4);
        opacity: .55;
    }

}
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*Navegación*//*-------------------------------------------------------------------------------------------------------------------------------------------------------------*/ 
nav{
    position:fixed;
    top:20px;
    left:50%;
    transform:translateX(-50%);
    width:fit-content;
    max-width:95vw;
    height:50px;
    padding:0 clamp(30px,3vw,70px);
    display:flex;
    align-items:center;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:50px;
    backdrop-filter:blur(12px);
    z-index:1000;
}
.logo{
    display:flex;
    align-items:center;
}
.logo img{
    width:auto;
    height:38px;
    max-height:38px;
    display:block;
    padding-right:20px;
}
.nav-links{
    display:flex;
    align-items:center;
    gap:clamp(24px,2.4vw,58px);
    list-style:none;
    padding:0;
    margin:0 0 0 6px;
}
.nav-links a{
    text-decoration:none;
    color:white;
    font-size:clamp(12px,.95rem,1.1rem);
    position:relative;
    white-space:nowrap;
    z-index:1;
}
.nav-links a.activo{
    color:#78E6F3;
}
.nav-links a:hover {
    color: #78E6F3;
}
.nav-links a.activo::before{
    content:"";
    position:absolute;
    left:50%;
    bottom:-15px;
    transform:translateX(-50%);
    width:100%;
    height:2px;
    background:rgba(120,230,243,.35);
    border-radius:50px;
    box-shadow:
        0 -4px 10px rgba(120,230,243,.20),
        0 -10px 20px rgba(120,230,243,.10);
    pointer-events:none;
}
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*Contenido de inicio*//*-------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.popo{
    width:min(90%,1163px);
    height:0;
    border:1px solid rgba(208,208,208,0.2);
    margin:20px auto;
}
.contenido-inicio{
    display:flex;
    flex-direction:column;
    justify-content:center;
    width:min(90%,1200px);
    min-height:clamp(600px,78vh,780px);
    margin:0 auto 18px auto;
    padding-top:85px;
    position:relative;
}
.botones-inicio{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:15px;
    margin-top:8px;
    max-width:550px;
}
.s-1{
    font-style:normal;
    font-weight:700;
    font-size:clamp(2rem,4vw,3.4rem);
    line-height:1.2;
    color:#FFFFFF;
}
.s-2{
    font-style:normal;
    font-weight:200;
    font-size:clamp(2rem,4vw,3.4rem);
    line-height:1.2;
    text-align:left;
    color:#FFFFFF;
}
.sub-texto {
    font-style: normal;
    font-weight: 400;
    font-size: clamp(16px, 2vw, 24px);
    line-height: 1.4;
    color: #FFFFFF;
    max-width: 550px;
    margin-top: 15px;
}
.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 20px;
    background: linear-gradient(150deg, #0095FF 20%, #78E6F3 49.56%);
    border-radius: 15px;
    text-decoration: none; 
    color: white;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 2px 20px rgba(0,0,0,.1);
    text-shadow: 1px 1px 2px rgba(0,0,0,.7);
    transition: .3s;
}
.btn-whatsapp img {
    width: 24px;
    height: 24px;
    display: block;
}
.btn-whatsapp:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 25px rgba(120,230,243,.3);
}
.btn-portafolio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 20px;
    background: rgba(255,255,255,.04);
    border-radius: 15px;
    text-decoration: none;
    color: white;
    font-size: 16px;
    font-weight: 600;
    transition: .3s;
}
.btn-portafolio:hover {
    background: rgba(255,255,255,.08);
    transform: translateY(-2px);
}
.logo-a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: relative;
    z-index: 2;
}
.logo-b {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(150deg, #0095FF 20%, #78E6F3 49.56%);
    position: relative;
    margin-left: -15px;
    z-index: 1;
    padding: 2px;
    box-sizing: border-box;
}
.textos-a {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.t-a-1 {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: #FFFFFF;
    margin: 0;
}
.t-a-2{
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    background: linear-gradient(135deg, #0095FF 0%, #78E6F3 49.56%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    margin: 0;
}
.mockup{
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    width:min(40vw,580px);
    height:auto;
}
.slogan,
.sub-texto,
.btn-whatsapp,
.btn-portafolio,
.text-a{
    max-width: 620px;
}
.text-a{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 25px;
}
@media (max-width: 900px) {
    .contenido-inicio {
        align-items: center;
        text-align: center;
        justify-content: flex-start;
        padding-top: 120px;
        min-height: auto;
    }

    .s-2 {
        text-align: center;
    }

    .mockup {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        width: min(90vw, 500px);
        margin-top: 50px;
        margin-bottom: 50px;
    }

    .botones-inicio{
    justify-content:center;
    }

    .text-a {
        justify-content: center;
        margin-top: 35px;
    }
}

@media (max-width: 600px) {
    .s-1, .s-2 {
        font-size: clamp(2.2rem, 8vw, 3rem);
    }

    .sub-texto {
        font-size: clamp(16px, 4vw, 18px);
    }

    .botones-inicio{
    flex-direction:column;
    width:100%;
    }

    .btn-whatsapp, .btn-portafolio {
        width: 100%;
        max-width: 320px;
    }
}
/*inicio pero cajitas*//*-------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.cajitas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(20px, 2vw, 40px);
    width: min(90%, 1200px);
    max-width: 1200px;
    margin: clamp(10px, 2vh, 25px) auto 50px auto;
    padding-top: 25px;
}
.cajita{
    flex:1 1 280px;
    max-width:340px;
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto;
    column-gap:clamp(12px,2vw,18px);
    row-gap:2px;
    align-items:center;
    padding:clamp(14px,1.6vw,20px);
    border-radius:20px;
    border:2px solid transparent;
    background:
        linear-gradient(#121212,#121212) padding-box,
        linear-gradient(135deg,#0095FF 0%,#78E6F3 100%) border-box;
}
.icono{
    grid-row:1/3;
    width:clamp(55px,6vw,72px);
    height:clamp(55px,6vw,72px);
    border-radius:50%;
    background:#202020;
    display:flex;
    justify-content:center;
    align-items:center;
}
.icono img{
    width:clamp(22px,4vw,30px);
    height:clamp(22px,4vw,30px);
}
.cajita h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: clamp(14px, 3.5vw, 16px);
    color: #FFFFFF;
    margin: 0;
    align-self: end;
}
.cajita p{
    font-family:'Inter',sans-serif;
    font-weight:400;
    font-size:clamp(12px,3vw,14px);
    line-height:1.3;
    color:#D0D0D0;
    margin:0;
    align-self:start;
    padding-top:2px;
}
@media (max-width: 450px) {
    .cajita {
        padding: 20px 15px;
        gap: 15px;
    }
    
    .icono {
        min-width: 65px;
        height: 65px;
    }
}
/*parte2inicio*//*-------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.sobre-nosotros{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:flex-start;
    gap:clamp(30px,3vw,40px);
    padding:clamp(15px,2vw,25px) 0;
    width:min(95%,1200px);
    margin:20px auto;
    border:1px solid rgba(208,208,208,0.2);
    border-radius:20px;
    box-sizing:border-box;
}
.texto-s-n {
    flex: 1 1 350px;
    max-width: 100%;
    padding-left: 40px;
}
.cajas-s-n {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px;
    flex: 1 1 auto;
    padding: 0 20px;
}
.sn-1 {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 4px 12px;
    height: 24px;
    border: 0.5px solid #78E6F3;
    border-radius: 25px;
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 500;
    background: linear-gradient(135deg, #0095FF 0%, #78E6F3 49.56%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.g-d-d{
    font-family:'Montserrat',sans-serif;
    padding-top:17px;
    font-weight:700;
    font-size:clamp(24px,4vw,32px);
    color:#FFFFFF;
    margin:0 0 15px 0;
    line-height:1.1;
    text-align:left;
}
.g-d-d span {
    font-size: clamp(16px, 3vw, 20px);
}
.sn-2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: #FFFFFF;
    margin: 0;
    text-align: left;
    max-width: 400px;
}
.c-s-n-j, .c-s-n-h {
    width: 100%;
    max-width: 280px;
    height: auto;
    min-height: 280px;
    background: #202020;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px 20px;
    box-sizing: border-box;
    text-align: center;
}
.c-s-n-j > img:first-of-type, .c-s-n-h > img:first-of-type {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin-bottom: 10px;
    object-fit: cover;
}
.c-s-n-j h5, .c-s-n-h h5 {
    margin: 0 0 10px 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #FFFFFF;
}
.c-s-n-j p, .c-s-n-h p {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 11px;
    line-height: 1.4;
    color: #FFFFFF;
    max-width: 199px;
}
.links-sociales {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: auto;
    padding-top: 10px;
}
.btn-instagram-j, .btn-instagram-h, .btn-github-h {
    display: inline-flex;
    font-size: 0;
    width: 25px;
    height: 25px;
}
.btn-instagram-j {
    margin-top: auto;
}
.btn-instagram-j img, .btn-instagram-h img, .btn-github-h img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
@media (max-width: 850px) {
    .sobre-nosotros {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }
    
    .texto-s-n {
        padding-left: 0;
        margin-bottom: 30px;
        text-align: left;
    }
    
    .cajas-s-n {
        padding: 0;
        justify-content: center;
        width: 100%;
    }
}
/*asdjklahsdjkasdhasdhasdkahdlashdasdkasdhasdjkashdalshdsjkldhjadjklshadsj.ashjdas-----------------------------------------------------------------------*/
.sec-final-g {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.p-q-g{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:clamp(50px,8vw,120px);
    width:95%;
    max-width:1200px;
    margin:60px 0;
}
.logo-g-pq{
    height:65px;
    width:auto;
    display:block;
    object-fit:contain;
    margin:8px 0;
}
.txt-izq-g {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.pq-1, .pq-2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(20px, 3vw, 26px);
    color: #FFFFFF;
    margin: 8px 0;
}
.cajas-d-g {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.c-opt-g {
    box-sizing: border-box;
    width: 100%;
    max-width: 500px;
    padding: 12px 35px;
    background: rgba(217, 217, 217, 0.04);
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: clamp(15px, 2vw, 18px);
    color: #FFFFFF;
    text-align: center;
    white-space: nowrap;
}
.l-p-w {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 40px 0 80px 0;
    padding: 0 20px;
}
.t-listo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(20px, 3vw, 30px);
    color: #FFFFFF;
    margin: 0 0 8px 0;
}
.t-escribenos {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 2.5vw, 18px);
    color: #D0D0D0;
    margin: 0 0 30px 0;
}
.btn-wsp-g {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 30px;
    background: transparent;
    border: 2px solid #78E6F3;
    border-radius: 15px;
    text-decoration: none;
    transition: transform 0.3s ease;
}
.btn-wsp-g:hover {
    transform: scale(1.05);
}
.logo-titulo-g {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 10px 0;
}
.logo-titulo-g .txt-f-logo {
    font-size: 50px;
    font-family: 'Montserrat';
    font-weight: 400;
    background: linear-gradient(135deg, #0095FF 0%, #78E6F3 49.56%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 78px;
    display: inline-block;
}
.i-wsp {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.txt-wsp-b {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.wsp-titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #FFFFFF;
}

.wsp-num {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: #FFFFFF;
}
/*---------------------------------footer---------------------------------*/
.f-gris-g{
    width:100%;
    background:#141414;
    padding:25px 20px 10px 20px;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    align-items:center;
}
.f-sup{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    align-items:center;
    width:100%;
    max-width:1400px;
    margin:0 auto;
    gap:0;
}
.f-logo-c{
    min-height:100px;
    width:auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
}
.img-f-logo{
    width:auto;
    height:95px;
}
.txt-f-logo {
    font-size: 26px;
    font-family: 'Montserrat';
    font-weight: 400;
    background: linear-gradient(135deg, #0095FF 0%, #78E6F3 49.56%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 78px;
    display: inline-block;
}
.f-links-izq,.f-links-der,.f-contacto-c{
    min-height:100px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    gap:12px;
    border-left:2px solid rgba(208,208,208,0.3);
    padding-left:clamp(28px,4vw,55px);
}
.f-links-izq a, .f-links-der a {
    font-family: 'Montserrat Alternates', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #FFFFFF;
    text-decoration: none;
    transition: color 0.3s;
}
.f-links-izq a:hover, .f-links-der a:hover {
    color: #78E6F3;
}
.f-item-c {
    display: flex;
    align-items: center;
    gap: 12px;
}
.f-item-c a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}
.f-item-c img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}
.f-item-c span, .f-tels span {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 13px;
    color: #FFFFFF;
}
.f-tels {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.f-inf {
    text-align: center;
    margin-top: 20px;
}
.f-inf p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 2vw, 16px);
    color: #FFFFFF;
    letter-spacing: -0.05em;
    margin: 0;
}
@media (max-width: 900px) {
    .p-q-g {
        gap: 50px;
    }
    
    .c-opt-g {
        white-space: normal;
    }

    .f-links-izq, .f-links-der, .f-contacto-c {
        border-left: none;
        border-top: 2px solid rgba(208, 208, 208, 0.3);
        padding-left: 0;
        padding-top: 20px;
        align-items: center;
        text-align: center;
    }

    .f-item-c, .f-item-c a {
        flex-direction: column;
        text-align: center;
    }

    .f-logo-c {
        align-items: center;
    }

    .f-sup{
    grid-template-columns:1fr;
    justify-items:center;
    }
}
.modal-terminos{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    visibility:hidden;
    transition:opacity .3s ease, visibility .3s ease;
    z-index:99999;
}
.modal-terminos.activo{
    opacity:1;
    visibility:visible;
}
.panel-terminos{
    width:min(90%,800px);
    max-height:80vh;
    background:#0c0c0c;
    border:1px solid rgba(120,230,243,.35);
    border-radius:20px;
    padding:30px;
    box-sizing:border-box;
    color:white;
    position:relative;
    transform:translateY(25px) scale(.97);
    opacity:0;
    transition:transform .3s ease, opacity .3s ease;
}
.modal-terminos.activo .panel-terminos{
    transform:translateY(0) scale(1);
    opacity:1;
}
.cerrar-terminos{
    position:absolute;
    top:18px;
    right:22px;
    background:none;
    border:none;
    color:white;
    font-size:32px;
    cursor:pointer;
}
.contenido-terminos{
    max-height:60vh;
    overflow-y:auto;
    padding-right:15px;
}
.contenido-terminos::-webkit-scrollbar{
    width:8px;
}
.contenido-terminos::-webkit-scrollbar-thumb{
    background:#78E6F3;
    border-radius:20px;
}
.contenido-terminos::-webkit-scrollbar-track{
    background:rgba(255,255,255,.08);
}
/*CONTACTO:-------------------------------------------------------------------------------------------------------------------*/
#contacto{
    min-height:100vh;
    padding:clamp(100px,8vw,145px) clamp(30px,5vw,80px) clamp(60px,6vw,100px) clamp(30px,5vw,80px);
    box-sizing:border-box;
}
.texto-c{
    width:min(92%,1320px);
    margin:0 auto;
}
.c-1{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 4px 12px;
    height: 24px;
    border: 0.5px solid #78E6F3;
    border-radius: 25px;
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 500;
    background: linear-gradient(135deg, #0095FF 0%, #78E6F3 49.56%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-left:auto;
    margin-right:auto;
}
.chs{
    margin:0;
    font-family:'Montserrat',sans-serif;
    font-size:clamp(48px,4.5vw,72px);
    line-height:1.15;
    color:#FFFFFF;
}
.chs-1{
    font-weight:700;
}
.chs-2,.chs-3{
    font-weight:200;
}
.chs-3{
    color: #0095FF;
}
.popo2{
    width:min(90%,725px);
    border:1px solid rgba(208,208,208,0.3);
    margin:16px 0 30px 0;
}
.c-2{
    max-width:820px;
    margin:0;
    font-family:'Montserrat',sans-serif;
    font-weight:400;
    font-size:clamp(18px,1.6vw,26px);
    line-height:1.35;
    color:#D0D0D0;
}
.cajitas-de-contacto{
    width:min(92%,1320px);
    margin:45px auto 0 auto;
    display:flex;
    flex-wrap:nowrap;
    justify-content:flex-start;
    gap:clamp(16px,2vw,28px);
    flex-direction:row;
}
.caja-contacto{
    flex:1 1 0;
    max-width:397px;
    min-width:0;
    min-height:300px;
    border:0.5px solid #78E6F3;
    border-radius:30px;
    box-sizing:border-box;
    padding:21px 23px 26px 23px;
}
.c-header{
    display:grid;
    grid-template-columns:clamp(100px,7vw,120px) 1fr;
    column-gap:clamp(26px,2vw,34px);
    align-items:start;
}   
.c-logo{
    width:clamp(100px,7vw,120px);
    height:clamp(100px,7vw,120px);
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    background-color:#000000ec;
    border:0.5px solid #78E6F3;
}
.c-logo svg{
    width:100%;
    height:100%;
    object-fit:cover;
}
.c-logo-png{
    width:100%;
    height:100%;
    object-fit:cover;
}
.c-titulo h5{
    margin:0;
    display:flex;
    flex-direction:column;
}
.contacto-general{
    font-family:'Montserrat',sans-serif;
    font-weight:400;
    font-size:12px;
    line-height:15px;
    background:linear-gradient(135deg,#0095FF 0%,#78E6F3 49.56%,#FFFFFF 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}
.c-titulotitulo{
    margin-top:6px;
    font-family:'Montserrat',sans-serif;
    font-weight:400;
    font-size:24px;
    line-height:29px;
    color:#FFFFFF;
}
.c-titulo p{
    margin:0;
    font-family:'Montserrat',sans-serif;
    font-weight:400;
    font-size:12px;
    line-height:15px;
    color:#D0D0D0;
}
.c-descripcion{
    grid-column:1 / 3;
    width:239px;
    margin:20px 0 0 0;
    font-family:'Montserrat',sans-serif;
    font-weight:400;
    font-size:12px;
    line-height:15px;
    color:#FFFFFF;
}
.opciones-contacto-1{
    display:flex;
    padding:0;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    justify-content:center;
    margin-top:20px;
}
.c-btn-mail,.c-btn-whatsapp{
    width:100%;
    display:grid;
    grid-template-columns:30px 1fr;
    grid-template-rows:auto auto;
    column-gap:11px;
    align-items:center;
    text-decoration:none;
    border-radius:50px;
    box-sizing:border-box;
    padding:8px 9px;
    background: rgba(0, 0, 0, 0.583);
    border:0.5px solid #78E6F3;
}
.c-btn-mail img,.c-btn-whatsapp img{
    grid-row:1 / 3;
    width:30px;
    height:30px;
    border-radius:50%;
    padding:7px;
    box-sizing:border-box;
    background:linear-gradient(135deg,rgba(0,149,255,0.3) 0%,rgba(120,230,243,0.3) 49.56%,rgba(255,255,255,0.3) 100%);
    object-fit:contain;
}
.c-mail-icon,.c-wa{
    font-family:'Montserrat',sans-serif;
    font-weight:400;
    font-size:10px;
    line-height:12px;
    color:#FFFFFF;
}
.c-mail,.c-number{
    font-family:'Montserrat',sans-serif;
    font-weight:300;
    font-size:10px;
    line-height:12px;
    color:#D0D0D0;
}
@media(max-width:900px){
    #contacto{
        padding:120px 20px 60px 20px;
    }
    .chs{
        font-size:clamp(36px,8vw,64px);
        line-height:1.15;
    }
    .c-2{
        font-size:clamp(16px,4vw,24px);
        line-height:1.4;
    }
    .cajitas-de-contacto{
        flex-direction:column;
        flex-wrap:nowrap;
        align-items:center;
        gap:20px;
        margin-top:60px;
    }
    .caja-contacto{
        width:100%;
        max-width:397px;
    }
    .c-btn-mail,.c-btn-whatsapp{
        width:100%;
    }
}
/*------------------------------------------*servicios------------------------------------------------------------------------------------------*/
#servicios{
    min-height:100vh;
    padding:clamp(100px,8vw,145px) clamp(30px,5vw,80px) clamp(60px,6vw,100px) clamp(30px,5vw,80px);
    box-sizing:border-box;
}
.cajas-servicio{
    width:min(92%,1320px);
    margin:80px auto;
    display:flex;
    flex-direction:column;
    gap:24px;
}
.caja-servicio{
    width:100%;
    min-height:240px;
    box-sizing:border-box;
    border-radius:25px;
    background:rgba(0,0,0,0.55);
    border:1px solid rgba(120,230,243,0.22);
    display:grid;
    grid-template-columns:80px 1fr;
    grid-template-rows:auto auto;
    column-gap:26px;
    row-gap:4px;
    padding:33px 36px 29px 36px;
}
.caja-servicio .img-icon{
    grid-row:1 / 3;
    width:80px;
    height:80px;
    border-radius:50%;
    padding:16px;
    box-sizing:border-box;
    background:linear-gradient(135deg,#023173 0%,#0255ca 49.56%,#FFFFFF 100%);
    object-fit:contain;
}
.caja-servicio h5{
    margin:0;
    max-width:430px;
    font-family:'Montserrat',sans-serif;
    font-weight:600;
    font-size:clamp(26px,2.5vw,36px);
    line-height:1.22;
    color:#FFFFFF;
}
.caja-servicio h5 span{
    display:block;
}
.caja-servicio p{
    margin:0;
    max-width:805px;
    font-family:'Montserrat',sans-serif;
    font-weight:400;
    font-size:clamp(16px,1.35vw,20px);
    line-height:1.5;
    color:#FFFFFF;
}
.caja-servicio-cliente{
    width:100%;
    min-height:240px;
    box-sizing:border-box;
    border-radius:25px;
    background:
        radial-gradient(circle at 15% 20%,rgba(120,230,243,0.16),transparent 35%),
        rgba(0,0,0,0.62);
    border:1px solid rgba(120,230,243,0.35);
    display:grid;
    grid-template-columns:80px 1fr auto;
    align-items:center;
    column-gap:26px;
    padding:33px 36px;
}
.caja-servicio-cliente .img-servicios{
    width:80px;
    height:80px;
    border-radius:50%;
    padding:16px;
    box-sizing:border-box;
    background:linear-gradient(135deg,#023173 0%,#0255ca 49.56%,#FFFFFF 100%);
    object-fit:contain;
}
.caja-servicio-cliente h5{
    margin:0;
    max-width:520px;
    font-family:'Montserrat',sans-serif;
    font-weight:600;
    font-size:clamp(22px,2.1vw,32px);
    line-height:1.25;
    color:#FFFFFF;
}
.login-cliente{
    width:min(100%,360px);
    display:flex;
    flex-direction:column;
    gap:12px;
}
.login-cliente input{
    width:100%;
    height:48px;
    box-sizing:border-box;
    border-radius:50px;
    border:1px solid rgba(120,230,243,0.45);
    background:rgba(0,0,0,0.45);
    padding:0 18px;
    font-family:'Montserrat',sans-serif;
    font-size:14px;
    color:#FFFFFF;
    outline:none;
}
.login-cliente input::placeholder{
    color:rgba(255,255,255,0.55);
}
.login-cliente button{
    height:48px;
    border:none;
    border-radius:50px;
    background:linear-gradient(150deg,#0095FF 20%,#78E6F3 49.56%);
    font-family:'Montserrat',sans-serif;
    font-size:15px;
    font-weight:600;
    color:#FFFFFF;
    cursor:pointer;
    transition:.3s;
}
.login-cliente button:hover{
    transform:translateY(-2px);
    box-shadow:0 5px 25px rgba(120,230,243,.25);
}
@media(max-width:900px){
    .caja-servicio,.caja-servicio-cliente{
        grid-template-columns:1fr;
        justify-items:center;
        text-align:center;
        padding:28px 22px;
    }
    .caja-servicio .img-icon,.caja-servicio-cliente .img-servicios{
        grid-row:auto;
        margin-bottom:18px;
    }
    .caja-servicio h5,.caja-servicio p,.caja-servicio-cliente h5{
        max-width:100%;
    }
    .login-cliente{
        margin-top:22px;
    }
}
/*------------------------------------------*proyectos------------------------------------------------------------------------------------------*/
#proyectos{
    min-height:100vh;
    padding:clamp(100px,8vw,145px) clamp(30px,5vw,80px) clamp(60px,6vw,100px) clamp(30px,5vw,80px);
    box-sizing:border-box;
}





.s-1,.s-2{
    font-size:clamp(2rem,calc(4vw * var(--escala-ui)),3.5rem);
}
.sub-texto{
    font-size:clamp(16px,calc(2vw * var(--escala-ui)),25px);
}
.chs{
    font-size:clamp(50px,calc(4.5vw * var(--escala-ui)),74px);
}
.c-2{
    font-size:clamp(18px,calc(1.6vw * var(--escala-ui)),27px);
}
.caja-servicio h5{
    font-size:clamp(27px,calc(2.5vw * var(--escala-ui)),37px);
}
.caja-servicio p{
    font-size:clamp(16px,calc(1.35vw * var(--escala-ui)),21px);
}

@media(min-width:1600px){
    :root{
        --escala-ui:1.08;
    }

    .contenido-inicio,
    .cajitas,
    .sobre-nosotros,
    .p-q-g,
    .cajas-servicio,
    .texto-c,
    .cajitas-de-contacto{
        max-width:1360px;
    }

    .mockup{
        width:min(42vw,620px);
    }

    .caja-contacto{
        width:clamp(360px,28vw,420px);
    }

    .caja-servicio,
    .caja-servicio-cliente{
        min-height:255px;
    }
}

.tyc{
    color:#00aaff;
}

@media(max-width:1145px){
    .sobre-nosotros{
        flex-direction:column;
        align-items:center;
        justify-content:center;
        width:min(95%,1200px);
        padding:30px 20px;
        gap:30px;
    }

    .texto-s-n{
        width:min(90%,520px);
        flex:none;
        padding-left:0;
        text-align:center;
    }

    .sn-1{
        margin-left:auto;
        margin-right:auto;
    }

    .g-d-d{
        text-align:center;
    }

    .sn-2{
        max-width:520px;
        text-align:center;
    }

    .cajas-s-n{
        width:min(90%,520px);
        flex-direction:column;
        align-items:center;
        justify-content:center;
        padding:0;
        gap:20px;
    }

    .c-s-n-j,
    .c-s-n-h{
        width:100%;
        max-width:280px;
    }
}




@media(max-width:900px){
    nav{
        padding:0 18px;
    }

    .nav-links{
        gap:14px;
    }

    .nav-links a{
        font-size:13px;
    }

    .logo img{
        height:34px;
    }
}
@media(max-width:500px){
    nav{
        padding:0 12px;
    }

    .nav-links{
        gap:10px;
    }

    .nav-links a{
        font-size:12px;
    }

    .logo img{
        height:30px;
    }
}
@media(max-width:350px){
    nav{
        padding:0 8px;
    }

    .nav-links{
        gap:8px;
    }

    .nav-links a{
        font-size:11px;
    }

    .logo img{
        height:26px;
    }
}

@media(max-width:700px){
    .chs{
        font-size:clamp(32px,7vw,50px);
    }
}
@media(max-width:1115px){
    .cajitas-de-contacto{
        flex-wrap:wrap;
        justify-content:center;
        gap:24px;
    }

    .caja-contacto{
        flex:none;
        width:397px;
        max-width:100%;
    }
}
@media(max-width:900px){
    #contacto{
        padding:120px 20px 60px 20px;
    }

    .chs{
        font-size:clamp(36px,8vw,64px);
        line-height:1.15;
    }

    .c-2{
        font-size:clamp(16px,4vw,24px);
        line-height:1.4;
    }

    .cajitas-de-contacto{
        flex-direction:column;
        flex-wrap:nowrap;
        align-items:center;
        gap:20px;
        margin-top:60px;
    }

    .caja-contacto{
        width:100%;
        max-width:397px;
    }

    .c-btn-mail,.c-btn-whatsapp{
        width:100%;
    }
}

@media(max-width:900px){
    .f-gris-g{
        padding:20px 15px 10px 15px;
    }

    .f-sup{
        grid-template-columns:1fr;
        justify-items:center;
        gap:20px;
    }

    .f-logo-c{
        min-height:auto;
        gap:0;
    }

    .img-f-logo{
        height:60px;
    }

    .txt-f-logo{
        font-size:22px;
        line-height:1.2;
    }

    .f-links-izq,
    .f-links-der,
    .f-contacto-c{
        width:100%;
        min-height:auto;
        border-left:none;
        border-top:1px solid rgba(208,208,208,.2);
        padding:15px 0 0 0;
        align-items:center;
        text-align:center;
        gap:10px;
    }

    .f-links-izq a,
    .f-links-der a{
        font-size:12px;
    }

    .f-item-c{
        gap:8px;
    }

    .f-item-c img{
        width:18px;
        height:18px;
    }

    .f-item-c span,
    .f-tels span{
        font-size:12px;
    }

    .f-inf{
        margin-top:15px;
    }

    .f-inf p{
        font-size:12px;
    }
}

@media(max-width:1198px){
    .contenido-inicio{
        align-items:center;
        text-align:center;
        justify-content:flex-start;
        padding-top:120px;
        min-height:auto;
    }

    .s-2{
        text-align:center;
    }

    .mockup{
        position:relative;
        top:auto;
        right:auto;
        transform:none;
        width:min(90vw,500px);
        margin-top:50px;
        margin-bottom:50px;
    }

    .botones-inicio{
        justify-content:center;
    }

    .text-a{
        justify-content:center;
        margin-top:35px;
    }
}