:root{
    /* Paleta para tema claro */
    --bg1: #f7fafc; /* off-white */
    --bg2: #eef2f6; /* sutil degradado */
    --accent: #184eff; /* naranja más cálido para contraste */
    --muted: #2d3546; /* gris azulado para textos secundarios */
    --card: #ffffff; /* tarjetas blancas */
    --glass: rgba(2, 6, 23, 0.103); /* ligero vidrio oscuro sobre claro */
    --fontColor: #0b1220; /* color de texto principal oscuro */
}
*{
    box-sizing:border-box
}

html,body{
    height:100%;
    margin:0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: linear-gradient(135deg,var(--bg1),var(--bg2));
    color:var(--fontColor);
}

.container{
    min-height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:3rem
}
.card{
    width:100%;
    max-width:980px;
    background: var(--card);
    border-radius:16px;
    padding:36px;
    position:relative;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(16, 24, 40, 0.192);
    border: 1px solid rgba(16,24,40,0.04);
}
        /* animated background lines */
.card::before, 
.card::after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none

}

.card::before {
    /* sutil brillo diagonal para claridad */
    background:linear-gradient(90deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.0) 60%);
    transform:skewX(-12deg);
    mix-blend-mode:normal;
    opacity:0.5
}

.card::after {
    /* textura muy sutil */
    background:repeating-linear-gradient(45deg, rgba(2,6,23,0.02) 0 2px, transparent 2px 20px);
    animation:move 12s linear infinite;
    opacity:0.18
}

 @keyframes move { 
    from {background-position:0 0} 
    to {background-position:400px 400px}
}

.left {
    padding-right:28px
}
.logo {
    display:flex;
    align-items:center;
    gap:14px
}

h1 { 
    margin:6px 0 0;
    font-size:30px;
    line-height:1.05
}

p.lead {
    color:var(--muted);
    margin-top:8px
}

        /* Status animation */
.status {
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:18px
}

.pulse { 
    width:12px;
    height:12px;
    border-radius:50%;
    margin-right: 12px;
    background:var(--accent);
    box-shadow:0 0 0 rgba(255,122,24,0.28);
    animation:pulse 1.8s infinite
}

@keyframes pulse{
    0% {
        transform:scale(0.9);
        box-shadow:0 0 0 0 rgba(3, 154, 255, 0.35)
    }
    70% {
        transform:scale(1);
        box-shadow:0 0 0 18px rgba(255,183,3,0)
    } 
    100% {
        transform:scale(0.9);
        box-shadow:0 0 0 0 rgba(255,183,3,0)
    }
}

/* contact panel */
.contacts{ 
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-top:22px
}

.contact {
    background: linear-gradient(180deg, rgba(250,250,250,0.6), rgba(245,245,245,0.8));
    padding:18px;
    border-radius:12px;
    border:1px solid rgba(16, 24, 40, 0.116);
    display:flex;
    gap:12px;
    align-items:center;
    transition:transform .28s ease,box-shadow .28s ease
}

.contact:hover {
    transform:translateY(-6px);
    box-shadow:0 12px 30px rgba(102, 153, 255, 0.363)
} 

.icon {
    width:44px;
    height:44px;
    border-radius:10px;
    background:var(--glass);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--accent);
    flex-shrink:0
}

.contact .meta{
    font-size:14px
}

.contact .meta .title {
    color:var(--muted);
    font-size:12px
}


.contact a {
    color:inherit;
    text-decoration:none
}

 
/* decorative image */
.illustration {
    position:absolute;
    right:-80px;
    top:-60px;
    opacity:0.06;
    transform:rotate(-12deg);
    filter:blur(0.6px);
    width:420px;
    height:420px
}

  
/* footer note */
.note { 
    margin-top: 5px;
    color:var(--muted);
    font-size:13px
}

 
/* responsive */
@media (max-width:880px){
    .contacts {
        grid-template-columns:repeat(1,1fr)
    }        
    .illustration {
        display:none
    }
    h1 {
        font-size:24px
    }
    .card {
        padding:22px
    }
}

#subtitle {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1.5px;
    color: var(--accent);
    margin-bottom: 4px;
    font-weight: 600;
}

.logo-image{
    width:80px;
    height:80px;
    border-radius:10px;
    object-fit:cover;
    display:block;
    box-shadow:0 6px 18px rgba(0,0,0,0.08), inset 0 -4px 12px rgba(255,255,255,0.06);
    transform:translateY(-2px);
}