:root{
      --bg:#1B1F29;      /* fondo oscuro */
      --fg:#E5E7EB;      /* texto principal */
      --muted:#9CA3AF;   /* texto secundario */
      --chip:#242B39;    /* superficie de botones */
      --ring:rgba(255,255,255,.12);
      --ringHover:rgba(255,255,255,.28);
      --accent:#FF6F00;  /* acento (mail icon) */
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial;
      color:var(--fg); background:var(--bg);
    }
    .wrap{
      min-height:100dvh; display:flex; flex-direction:column; align-items:center; padding:24px;
    }
    main{
      width:100%; max-width:720px; margin-top:8vh;
      display:flex; flex-direction:column; align-items:center; gap:20px;
    }
    .logo{
    width: clamp(160px, 18vw, 320px); height: auto; 
    filter: drop-shadow(0 2px 10px rgba(0,0,0,.35));
    }
    .tagline{
      margin:0; margin-top:4px; text-align:center; font-weight:600; letter-spacing:.2px;
      color:var(--muted);
    }
    .contacts{
      width:100%; display:grid; gap:12px; margin-top:10px;
    }
    @media (min-width:560px){
      .contacts{ grid-template-columns: 1fr 1fr 1fr; }
    }
    .contact{
      display:flex; align-items:center; justify-content:center; gap:10px;
      text-decoration:none; background:var(--chip); border:1px solid var(--ring);
      padding:12px 14px; border-radius:999px; transition:transform .08s ease, border-color .2s ease, background .2s ease;
      outline: none;
    }
    .contact:hover{ border-color:var(--ringHover); transform:translateY(-1px) }
    .contact:active{ transform:translateY(0) }
    .contact:focus-visible{ box-shadow:0 0 0 3px var(--ringHover); }
    .contact svg{ width:20px; height:20px; flex:0 0 20px; }
    .contact .text{ color:var(--fg); font-weight:600; }

    /* Colores de iconos por marca (el texto queda claro) */
    .ig svg{ color:#E1306C }
    .wa svg{ color:#25D366 }
    .mail svg{ color:var(--accent) }

    footer{
      width:100%; max-width:720px; margin-top:auto; padding:16px 8px; text-align:center; color:var(--muted); font-size:.95rem;
    }