/* IA en Obra - landing estatica.
   Estos hover los aplicaba el runtime de Claude Design por JavaScript
   (style-hover) y los botones del design system por useState de React.
   Al quitar el JS se reescriben como CSS real. El !important es necesario
   porque los elementos llevan estilos inline. */

.nav-link { transition: color 200ms cubic-bezier(.2,.6,.2,1); }
.nav-link:hover { color: #F0997B !important; }

.nav-cta { transition: background 200ms cubic-bezier(.2,.6,.2,1), color 200ms cubic-bezier(.2,.6,.2,1); }
.nav-cta:hover { background: #993C1D !important; color: #FFFFFF !important; }

.hover-linkedin:hover {
  background: #FDEEE8 !important;
  border-color: #D85A30 !important;
  color: #D85A30 !important;
}
.hover-notion:hover { color: #D85A30 !important; border-bottom-color: #D85A30 !important; }

.btn-coral, .btn-teal {
  transition: background 200ms cubic-bezier(.2,.6,.2,1), color 200ms cubic-bezier(.2,.6,.2,1), transform 120ms cubic-bezier(.2,.6,.2,1);
}
.btn-coral:hover { background: #993C1D !important; color: #FFFFFF !important; }
.btn-teal:hover  { background: #00655F !important; }
/* Regla del DS: al presionar baja 1px, nunca se escala. */
.btn-coral:active, .btn-teal:active { transform: translateY(1px); }

/* El hover por JS no tenia equivalente de teclado. */
a:focus-visible, button:focus-visible { outline: 2px solid #D85A30; outline-offset: 2px; }