/* ============================================================
   CONTACTO.CSS
   ============================================================ */

#particles-canvas { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; opacity:0.2; }

body { display:flex; flex-direction:column; }

main {
    flex: 1;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 3.5rem 4rem;
}

.contact-wrapper {
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
}

.page-eyebrow { font-family:var(--font-mono); font-size:0.68rem; color:var(--gold); letter-spacing:0.2em; text-transform:uppercase; margin-bottom:1rem; opacity:0; transform:translateY(14px); animation:fadein 0.6s 0.1s forwards; }
.page-title { font-family:var(--font-display); font-size:clamp(2rem,4vw,3rem); font-weight:700; letter-spacing:-0.01em; line-height:1.1; margin-bottom:1rem; opacity:0; transform:translateY(14px); animation:fadein 0.6s 0.25s forwards; }
.page-subtitle { font-size:0.95rem; color:var(--muted-light); line-height:1.8; margin-bottom:2.5rem; opacity:0; transform:translateY(14px); animation:fadein 0.6s 0.4s forwards; }

.contact-items { display:flex; flex-direction:column; gap:1rem; opacity:0; transform:translateY(14px); animation:fadein 0.6s 0.55s forwards; }

.contact-item {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.1rem 1.5rem;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    transition: border-color 0.25s, transform 0.25s;
}

.contact-item::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:transparent; transition:background 0.25s; }
.contact-item:hover { border-color:var(--gold-border); transform:translateX(4px); }
.contact-item:hover::before { background:var(--gold); }

.ci-icon { width:42px; height:42px; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; background:var(--gold-dim); border:1px solid var(--gold-border); }
.ci-label { font-family:var(--font-mono); font-size:0.62rem; color:var(--muted); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:0.15rem; }
.ci-value { font-family:var(--font-display); font-size:0.92rem; font-weight:500; color:var(--text); }

@media (max-width:768px) { main { padding:90px 1.5rem 3rem; } }