/**
 * Barra de contacto del header — las dos paginas.
 *
 * Kit de marca: negro + amarillo #FFE01B + blanco, Raleway, alto contraste.
 *
 * Es un elemento de conversion, no metadata: el visitante entra y tiene que ver
 * como contactarte sin scrollear. Por eso va en blanco pleno y no apagado en
 * gris.
 */

/* Franja: casi-negro de marca, separada del header por un hairline y no por
   otro color. */
#top #header_meta.container_wrap_meta {
	background-color: #0a0a0a;
	border-bottom: 1px solid #2a2a2a;
	color: #ffffff;
}

/* El contenedor que arma Enfold. La altura de 30px la maneja el tema (calcula
   con ella el offset del header sticky), asi que no se toca. */
#top #header_meta .phone-info {
	float: right;
	margin: 0;
	padding: 0;
	font-family: 'Raleway', Arial, Helvetica, sans-serif;
	line-height: 30px;
}

#top #header_meta .fp-contacto {
	display: inline-flex;
	align-items: center;
	gap: 20px;
	height: 30px;
}

/* El gesto de marca —la barra amarilla de 3px de la firma— ancla el grupo por
   la izquierda, marcando donde empieza el bloque. Antes iba suelta entre los
   dos textos, con el mismo aire de los dos lados: ahi no estructuraba nada y
   se leia como un guion pintado de amarillo. El acento aparece UNA sola vez;
   por eso significa. */
#top #header_meta .fp-contacto::before {
	content: "";
	display: block;
	width: 3px;
	height: 12px;
	background-color: #ffe01b;
}

/* Divisor entre mail y telefono: hairline neutro, que separa sin competir. */
#top #header_meta .fp-contacto__sep {
	display: block;
	width: 1px;
	height: 12px;
	background-color: #2a2a2a;
}

/* Tipografia de DATO, no de titular:
   - minusculas, porque un mail se escribe como se escribe;
   - peso 500 y no 700: sobre negro el blanco florece y el bold chico se
     empasta, perdiendo los contornos de Raleway;
   - tracking casi neutro: el letter-spacing amplio es lenguaje de mayusculas,
     y sin mayusculas no se justifica;
   - tabular-nums para que el telefono tenga los digitos parejos. */
#top #header_meta .fp-contacto__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 30px;
	color: #ffffff;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: none;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	transition: color 0.15s ease;
}

#top #header_meta .fp-contacto__link:hover {
	color: #ffe01b;
}

#top #header_meta .fp-contacto__link:focus-visible {
	color: #ffe01b;
	outline: 1px solid #ffe01b;
	outline-offset: 2px;
}

/* Heredan currentColor del link, asi que viran con el hover sin regla propia. */
#top #header_meta .fp-contacto__icon {
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
	display: block;
}

/* En movil los dos datos con texto no entran y la barra se parte en dos lineas,
   empujando el header. Se ocultan los TEXTOS, no un contacto: quedan los dos
   iconos tappeables, que es justo el dispositivo donde tel: y mailto: mas se
   usan. El nombre completo sigue disponible en el aria-label del link. */
@media only screen and (max-width: 767px) {
	#top #header_meta .phone-info {
		float: none;
		text-align: center;
	}

	#top #header_meta .fp-contacto {
		gap: 2px;
	}

	#top #header_meta .fp-contacto::before,
	#top #header_meta .fp-contacto__sep,
	#top #header_meta .fp-contacto__text {
		display: none;
	}

	#top #header_meta .fp-contacto__link {
		padding: 0 12px;
	}

	#top #header_meta .fp-contacto__icon {
		width: 15px;
		height: 15px;
	}
}