/* 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); }

/* Secundario en outline sobre fondo oscuro (variante "secondary" del DS).
   Acompana a .btn-teal en el CTA de "Fase piloto" con la misma geometria.
   Al hover rellena coral-pale con texto grafito, como manda la guia de marca
   ("sobre coral, texto grafito, nunca blanco"). */
.btn-outline-dark {
  transition: background 200ms cubic-bezier(.2,.6,.2,1), color 200ms cubic-bezier(.2,.6,.2,1),
              border-color 200ms cubic-bezier(.2,.6,.2,1), transform 120ms cubic-bezier(.2,.6,.2,1);
}
.btn-outline-dark:hover {
  background: #FDEEE8 !important;
  color: #14100E !important;
  border-color: #FDEEE8 !important;
}
.btn-outline-dark:active { transform: translateY(1px); }

/* Ambos botones del CTA de "Fase piloto" comparten ancho: el par queda
   simetrico en escritorio y, al apilarse en movil, no queda escalonado.
   .btn-teal aparece una sola vez en toda la pagina y es "Ver demo", asi que
   esta regla no alcanza a ningun otro boton. */
.btn-teal, .btn-outline-dark { min-width: 176px; }

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