/* ============================================================
   SYSNET · EFECTOS (transiciones, hover, animaciones)
   Reutilizable en todas las páginas. Depende de tema.css.
   ============================================================ */

.navlink { transition: color .18s; }
.navlink:hover { color: var(--heading); }

.btn--primary { transition: background .18s, transform .12s; }
.btn--primary:hover { background: var(--accent-hover); }
.btn--primary:active { transform: translateY(1px); }
.btn--ghost { transition: border-color .18s, color .18s; }
.btn--ghost:hover { border-color: rgba(255,255,255,0.6); color: var(--heading); }

.svc-card { transition: transform .2s ease, border-color .2s ease; }
.svc-card:hover { transform: translateY(-4px); border-color: rgba(0,166,224,0.5); }

.ind-tile { transition: transform .25s ease; }
.ind-tile:hover { transform: translateY(-5px); }

.brand-cell { transition: transform .2s ease, border-color .2s ease; }
.brand-cell:hover { transform: translateY(-3px); border-color: rgba(0,166,224,0.5); }

.social { transition: color .18s, border-color .18s, background .18s; }
.social:hover { color: var(--heading); border-color: rgba(0,166,224,0.6); background: var(--panel); }

a { transition: color .18s; }
a:hover { color: var(--accent-hover); }

/* Campos de formulario */
.fld { transition: border-color .18s, box-shadow .18s; }
.fld:focus { border-color: rgba(0,166,224,0.7); box-shadow: 0 0 0 3px rgba(0,166,224,0.15); }
.fld::placeholder { color: var(--faint-2); }

/* Banner de cookies: entra deslizándose desde abajo */
@keyframes cookie-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cookie-banner { animation: cookie-in .35s ease both; }