/* ==========================================================================
   FX Informática — Overrides de marca
   --------------------------------------------------------------------------
   Este archivo carga DESPUES de theme*.css y skin.css.
   Existe porque css/skin.css nunca se personalizo: sigue trayendo la paleta
   del template Porto de fabrica (#0053ce azul, #fbe91b amarillo, #5E5E61 gris).
   Aca se corrigen solo los selectores que el reordenamiento de CSS deja
   ganando al skin, llevandolos al azul de marca FX.

   Azul de marca FX: #0092cd
   Azul oscuro (accesible sobre blanco en texto chico): #007ba3
   ========================================================================== */

:root {
	--fx-azul: #0092cd;
	--fx-azul-oscuro: #007ba3;
	--fx-texto-oscuro: #2c3e50;
}

/* --------------------------------------------------------------------------
   1. Menu principal
   Antes del reorden ganaba theme.css con color #CCC sobre header blanco
   (contraste 1.6:1, ilegible). Despues del reorden ganaria skin.css con
   #0053ce, que no es el azul de FX.
   Reposo en oscuro (11:1) y azul de marca reservado para hover/activo,
   donde el tamano del texto lo tolera.
   -------------------------------------------------------------------------- */
#header .header-nav-main nav > ul > li > a,
#header .header-nav-main nav > ul > li > a:active {
	color: var(--fx-texto-oscuro);
}

#header .header-nav-main nav > ul > li:hover > a,
#header .header-nav-main nav > ul > li.open > a {
	background: transparent;
	color: var(--fx-azul);
}

#header .header-nav-main nav > ul > li > a.active {
	color: var(--fx-azul);
}

#header .header-nav-main nav > ul > li.dropdown:hover > a:before,
#header .header-nav-main nav > ul > li.dropdown.open > a:before {
	border-bottom-color: var(--fx-azul);
}

/* Boton hamburguesa (movil) */
#header .header-btn-collapse-nav {
	background: var(--fx-azul);
}

#header .header-btn-collapse-nav:hover {
	background: var(--fx-azul-oscuro);
}

/* --------------------------------------------------------------------------
   2. nav-pills
   skin.css le pone fondo #0053ce al item activo. El menu de la home usa
   .nav-pills, asi que sin esto el item activo aparece con una pastilla azul
   del template en vez del subrayado propio del header.
   -------------------------------------------------------------------------- */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
	background-color: transparent;
	color: var(--fx-azul);
}

/* --------------------------------------------------------------------------
   3. .icon-featured
   Son los iconos circulares de Historia / Vision / Estrategia de calidad.
   skin.css les mete background-color #C6C6CA (gris del template). Las
   tarjetas ya definen su propio color inline por icono, asi que el circulo
   va transparente.
   -------------------------------------------------------------------------- */
.icon-featured {
	background-color: transparent;
}

/* --------------------------------------------------------------------------
   4. .inverted
   skin.css le aplica fondo rojo #d1292e. No corresponde a la paleta FX.
   -------------------------------------------------------------------------- */
.inverted {
	background-color: var(--fx-azul);
}


/* --------------------------------------------------------------------------
   5. Contraste
   .custom-text-color-grey-1 se define en fxinformaticastyles.css como #acb4be.
   Sobre blanco da 2.1:1 — falla WCAG AA de lejos, y es el color de las
   etiquetas "CONTACTO" / "MUNDO" / "SERVICIOS", que quedan casi invisibles.
   Se corrige aca y no en fxinformaticastyles.css porque ese archivo lo
   comparten las demas paginas, que todavia no estamos tocando.
   #6c7a89 sobre blanco = 5.1:1
   -------------------------------------------------------------------------- */
.custom-text-color-grey-1 {
	color: #6c7a89 !important;
}

/* --------------------------------------------------------------------------
   6. Q&A — acordeon
   Las 5 secciones venian con .active, o sea todas abiertas a la vez, lo que
   deja de ser un acordeon y solo alarga la pagina. El titulo era un <a> sin
   href: no recibia foco de teclado.
   -------------------------------------------------------------------------- */
.toggle > section > .toggle-title {
	cursor: pointer;
}

.toggle > section > .toggle-title:focus-visible {
	outline: 2px solid var(--fx-azul);
	outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   7. Formulario de contacto
   El form era placeholder-only: sin <label>, el texto desaparece al escribir
   y el usuario pierde la referencia de que campo esta completando.
   Se agregaron <label> visibles; el placeholder queda como pista secundaria.
   -------------------------------------------------------------------------- */
.form-label-fx {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--fx-texto-oscuro);
}

.contact-form .form-control::placeholder {
	color: #8a949e;
	opacity: 1;
}

.contact-form .form-control:focus {
	border-color: var(--fx-azul);
	box-shadow: 0 0 0 0.2rem rgba(0, 146, 205, 0.2);
}