/*
====================================================
GUFO TECH - INFO PAGES CSS
Version: V1.2 English
Reusable stylesheet for Gufo Tech informational subpages.
====================================================
*/

:root{
    --bg-main:#07111f;
    --bg-soft:#0c1b30;
    --bg-card:rgba(12,30,54,.76);
    --blue-primary:#3aa8ff;
    --blue-soft:#7cc7ff;
    --cyan:#39f0ff;
    --white:#ffffff;
    --text:#eaf6ff;
    --muted:rgba(234,246,255,.74);
    --line:rgba(130,200,255,.18);
    --shadow:0 25px 80px rgba(0,0,0,.45);
    --radius-lg:34px;
    --radius-md:22px;
    --container:min(1120px,92%);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    font-family:Arial, Helvetica, sans-serif;
    background:
        linear-gradient(rgba(4,12,24,.92),rgba(4,12,24,.94)),
        url('../../imagenes/parallax-why.png'),
        radial-gradient(circle at top left, rgba(58,168,255,.18), transparent 28%),
        linear-gradient(135deg,#07111f,#0b1b32 45%,#102744);
    background-size:cover, cover, auto, auto;
    background-position:center, center, center, center;
    background-attachment:fixed, fixed, scroll, scroll;
    color:var(--text);
    overflow-x:hidden;
    -webkit-user-select:none;
    user-select:none;
}
img{max-width:100%;display:block;pointer-events:none;}
a{text-decoration:none;color:inherit;}

.info-topbar{
    position:fixed;
    top:0;left:0;width:100%;
    z-index:1000;
    height:78px;
    padding:0 4%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:rgba(5,14,27,.78);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(18px);
}
.mini-logo{display:flex;align-items:center;gap:10px;font-weight:900;}
.mini-logo img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 0 18px rgba(58,168,255,.4));}
.top-btn{
    padding:11px 17px;
    border-radius:999px;
    background:rgba(58,168,255,.14);
    border:1px solid rgba(58,168,255,.3);
    color:var(--text);
    font-weight:800;
    transition:.25s ease;
}
.top-btn:hover{background:rgba(58,168,255,.28);transform:translateY(-2px);}

.info-hero{
    min-height:92vh;
    display:grid;
    place-items:center;
    text-align:center;
    padding:120px 20px 80px;
    position:relative;
    overflow:hidden;
}
.info-hero::before{
    content:"";
    position:absolute;inset:0;
    background:
        radial-gradient(circle at 20% 30%, rgba(58,168,255,.22), transparent 28%),
        radial-gradient(circle at 80% 20%, rgba(57,240,255,.12), transparent 32%);
    z-index:0;
}
.hero-content{position:relative;z-index:1;max-width:980px;}
.info-logo{
    width:clamp(170px,24vw,320px);
    margin:0 auto 26px;
    filter:drop-shadow(0 0 38px rgba(58,168,255,.48));
}
.eyebrow,.section-kicker{
    display:inline-block;
    margin-bottom:14px;
    color:var(--cyan);
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:.78rem;
    font-weight:900;
}
.info-hero h1{
    font-size:clamp(2.4rem,6vw,5.8rem);
    line-height:.95;
    letter-spacing:-3px;
    margin-bottom:22px;
}
.hero-text{
    max-width:860px;
    margin:0 auto;
    color:var(--muted);
    font-size:clamp(1rem,2vw,1.2rem);
    line-height:1.8;
}
.hero-actions,.cta-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:34px;}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    padding:0 24px;
    border-radius:999px;
    font-weight:900;
    transition:.3s ease;
    border:1px solid transparent;
}
.btn-primary{background:linear-gradient(135deg,var(--blue-primary),var(--cyan));color:#03111f;box-shadow:0 14px 40px rgba(58,168,255,.28);}
.btn-primary:hover{transform:translateY(-4px);box-shadow:0 20px 55px rgba(58,168,255,.42);}
.btn-outline{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:var(--text);}
.btn-outline:hover{border-color:var(--blue-soft);transform:translateY(-4px);}

.info-section{width:var(--container);margin:auto;padding:90px 0;}
.section-header{text-align:center;max-width:860px;margin:0 auto 48px;}
.section-header h2,.cta-card h2{font-size:clamp(2rem,5vw,4rem);line-height:1;letter-spacing:-2px;margin-bottom:18px;}
.section-header p,.info-card p,.cta-card p{color:var(--muted);line-height:1.8;font-size:1.05rem;}
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.info-card,.cta-card{
    background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    box-shadow:0 14px 45px rgba(0,0,0,.22);
    backdrop-filter:blur(14px);
}
.info-card{padding:30px;transition:.3s ease;}
.info-card:hover{transform:translateY(-5px);border-color:rgba(58,168,255,.42);}
.info-card span{display:inline-block;color:var(--cyan);font-size:1.7rem;font-weight:950;margin-bottom:16px;}
.info-card h3{font-size:1.45rem;margin-bottom:12px;}
.highlight-card{background:linear-gradient(145deg,rgba(58,168,255,.18),rgba(57,240,255,.05));border-color:rgba(58,168,255,.34);}
.cta-section{width:var(--container);margin:auto;padding:40px 0 100px;}
.cta-card{text-align:center;padding:54px 34px;}

.info-footer{
    text-align:center;
    padding:30px 20px;
    color:rgba(234,246,255,.68);
    background:rgba(3,10,20,.62);
    border-top:1px solid var(--line);
    line-height:1.7;
}
.info-footer p{max-width:980px;margin:6px auto;}
.back-to-top{
    position:fixed;
    right:22px;
    bottom:22px;
    width:48px;height:48px;
    display:grid;place-items:center;
    border-radius:50%;
    background:linear-gradient(135deg,var(--blue-primary),var(--cyan));
    color:#03111f;
    font-size:1.4rem;
    font-weight:950;
    box-shadow:0 14px 38px rgba(58,168,255,.32);
    opacity:0;
    pointer-events:none;
    transform:translateY(10px);
    transition:.25s ease;
    z-index:999;
}
.back-to-top.show{opacity:1;pointer-events:auto;transform:none;}

@media(max-width:820px){
    body{background-attachment:scroll, scroll, scroll, scroll;}
    .info-topbar{height:72px;}
    .mini-logo span{display:none;}
    .top-btn{font-size:.88rem;padding:10px 14px;}
    .info-hero{padding-top:105px;min-height:86vh;}
    .info-hero h1{letter-spacing:-2px;}
    .info-grid{grid-template-columns:1fr;}
    .btn{width:100%;max-width:330px;}
    .info-card{padding:25px;}
    .cta-card{padding:34px 24px;}
}

@media(max-width:520px){
    .info-section{padding:70px 0;}
    .section-header h2,.cta-card h2{letter-spacing:-1px;}
    .hero-actions,.cta-actions{flex-direction:column;align-items:center;}
}

@media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}


/* ====================================================
   SOFTWARE SOLUTIONS - FLOATING PRODUCT GALLERY
   Images expected in /imagenes/: admini1.png to admini5.png
   Center/main image: admini4.png
==================================================== */
.software-showcase{
    width:var(--container);
    margin:auto;
    padding:40px 0 90px;
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:46px;
    align-items:center;
}
.software-intro-card{
    padding:42px;
    background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
    backdrop-filter:blur(14px);
}
.software-intro-card h2{
    font-size:clamp(2rem,4.5vw,4rem);
    line-height:1;
    letter-spacing:-2px;
    margin-bottom:18px;
}
.software-intro-card p{
    color:var(--muted);
    line-height:1.8;
    font-size:1.05rem;
    margin-bottom:18px;
}
.software-intro-card .mini-list{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:24px;
}
.software-intro-card .mini-list span{
    padding:10px 13px;
    border-radius:999px;
    background:rgba(58,168,255,.12);
    border:1px solid rgba(58,168,255,.24);
    color:var(--text);
    font-weight:800;
    font-size:.9rem;
}
.floating-scene{
    position:relative;
    min-height:650px;
}
.float-img{
    position:absolute;
    overflow:hidden;
    border-radius:28px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(130,200,255,.28);
    box-shadow:0 28px 80px rgba(0,0,0,.38), 0 0 35px rgba(58,168,255,.10);
    animation:floatMove 6.5s ease-in-out infinite;
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.float-img:hover{
    transform:translateY(-10px) scale(1.035);
    box-shadow:0 36px 100px rgba(0,0,0,.48), 0 0 45px rgba(58,168,255,.18);
    border-color:rgba(58,168,255,.55);
    z-index:20;
}
.float-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    filter:contrast(1.04) saturate(1.02);
}
.float-img.main{
    width:55%;
    height:365px;
    left:22%;
    top:90px;
    z-index:7;
}
.float-img.side-left-top{
    width:34%;
    height:230px;
    left:0;
    top:30px;
    z-index:3;
    animation-delay:-1s;
}
.float-img.side-right-top{
    width:32%;
    height:238px;
    right:0;
    top:42px;
    z-index:4;
    animation-delay:-2s;
}
.float-img.side-left-bottom{
    width:36%;
    height:250px;
    left:6%;
    bottom:52px;
    z-index:6;
    animation-delay:-3s;
}
.float-img.side-right-bottom{
    width:34%;
    height:245px;
    right:8%;
    bottom:20px;
    z-index:5;
    animation-delay:-4s;
}
@keyframes floatMove{
    0%,100%{translate:0 0;}
    50%{translate:0 -16px;}
}

@media(max-width:900px){
    .software-showcase{
        grid-template-columns:1fr;
        padding-top:20px;
    }
    .floating-scene{min-height:570px;}
}

@media(max-width:650px){
    .software-showcase{padding:20px 0 70px;}
    .software-intro-card{padding:28px;}
    .floating-scene{
        min-height:auto;
        display:grid;
        gap:18px;
    }
    .float-img,
    .float-img.main,
    .float-img.side-left-top,
    .float-img.side-right-top,
    .float-img.side-left-bottom,
    .float-img.side-right-bottom{
        position:relative;
        width:100%;
        height:260px;
        left:auto;
        right:auto;
        top:auto;
        bottom:auto;
        animation:none;
        border-radius:24px;
    }
    .float-img.mobile-extra{display:none;}
}

/* =========================
   CONTACT FORM - GUFO TECH
========================= */

.contact-section {
    min-height: 100vh;
    width: 100%;
    padding: 120px 20px 70px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.contact-box {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.contact-logo-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
}

.contact-logo {
    width: 260px;
    max-width: 90%;
    height: auto;
    filter: drop-shadow(0 0 30px rgba(0, 195, 255, 0.45));
}

.contact-form {
    width: 100%;
    margin: 35px auto 0;
    display: grid;
    gap: 22px;
    text-align: left;
}

.form-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    color: #d8ecff;
    font-weight: 600;
    font-size: 15px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 16px 17px;
    border-radius: 14px;
    border: 1px solid rgba(0, 195, 255, 0.28);
    background: rgba(3, 18, 35, 0.92);
    color: #ffffff;
    font-size: 16px;
    outline: none;
}

.form-group textarea {
    min-height: 180px;
    resize: vertical;
    line-height: 1.6;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #00c3ff;
    box-shadow: 0 0 22px rgba(0, 195, 255, 0.25);
}

.hidden-field {
    display: none !important;
}

.form-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 8px;
}

.main-btn,
.home-btn-form {
    width: 100%;
    min-height: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: 0.3s ease;
}

.main-btn {
    border: none;
    color: #03101f;
    background: linear-gradient(135deg, #00c3ff, #7df9ff);
    box-shadow: 0 0 24px rgba(0, 195, 255, 0.32);
}

.main-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 34px rgba(0, 195, 255, 0.48);
}

.home-btn-form {
    border: 1px solid rgba(0, 195, 255, 0.38);
    color: #d8ecff;
    background: rgba(0, 195, 255, 0.08);
}

.home-btn-form:hover {
    background: rgba(0, 195, 255, 0.16);
    box-shadow: 0 0 24px rgba(0, 195, 255, 0.24);
}

.form-alert {
    margin-top: 24px;
    padding: 15px 18px;
    border-radius: 14px;
    font-weight: 600;
    text-align: center;
}

.form-alert.success {
    background: rgba(0, 180, 100, 0.15);
    border: 1px solid rgba(0, 255, 160, 0.35);
    color: #b8ffd8;
}

.form-alert.error {
    background: rgba(180, 0, 0, 0.15);
    border: 1px solid rgba(255, 80, 80, 0.35);
    color: #ffd0d0;
}

@media (max-width: 768px) {
    .contact-section {
        padding: 95px 16px 55px;
        align-items: flex-start;
    }

    .contact-box {
        max-width: 100%;
    }

    .contact-logo {
        width: 210px;
    }

    .contact-form {
        gap: 18px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 15px;
        font-size: 15px;
    }

    .main-btn,
    .home-btn-form {
        min-height: 52px;
        font-size: 15px;
    }
}

@media (max-width: 420px) {
    .contact-section {
        padding: 85px 14px 45px;
    }

    .contact-logo {
        width: 185px;
    }

    .contact-box h1 {
        font-size: 32px;
    }
}