/*
 * Empleos Ahora — identidad visual del tema.
 * Paleta de marca, cabeceras de archivo, listados, pie y accesibilidad.
 * White Hat Mgmt LLC.
 */

/* ==========================================================================
 *  LA PALETA
 *
 *  QUE ES ESTO
 *  Un "custom property" (las líneas que empiezan por dos guiones, como
 *  `--ea-principal`) es una variable de CSS: se le da un valor una sola vez
 *  aquí y luego el resto de la hoja la usa escribiendo `var(--ea-principal)`.
 *  Cambiar el valor de arriba repinta el sitio entero, sin tocar nada más.
 *
 *  POR QUE ESTAN TODOS AQUI Y NINGUNO SUELTO POR AHI
 *  Antes el rojo estaba escrito a mano en 27 sitios distintos. Eso tenía dos
 *  consecuencias malas: el panel de opciones ofrecía cambiar el color y en
 *  realidad casi nada cambiaba (la pantalla mentía), y para retocar un tono
 *  había que ir a buscarlo archivo por archivo. Con las variables el panel de
 *  opciones solo tiene que reescribir estas líneas.
 *
 *  POR QUE ESTOS TONOS Y NO OTROS
 *  El rojo anterior (#F00909) era rojo puro, saturación 93 %. Además de
 *  resultar agresivo, daba 4,42:1 de contraste sobre blanco, POR DEBAJO del
 *  4,5:1 que exige la norma para texto pequeño — y el tema lo usaba justo
 *  para textos de 12 px. O sea que no era solo cuestión de gusto: había texto
 *  que se leía mal. Los tonos de aquí abajo están medidos uno a uno; el
 *  número que acompaña a cada uno es su contraste real.
 * ========================================================================== */

:root {
	/* --- Familia del rojo de marca -----------------------------------
	 * La saturación baja del 93 % al 52 %: eso es lo que le quita el
	 * "grito" sin dejar de ser rojo. */
	--ea-principal:        #C0433D; /* botones, enlaces y acentos — 5,11:1 sobre blanco */
	--ea-principal-osc:    #9B322D; /* el mismo al pasar el ratón   — 7,27:1 con letra blanca */
	--ea-principal-sua:    #FF8A8A; /* SOLO sobre fondo oscuro      — 8,33:1 sobre el negro del hero */
	--ea-principal-fondo:  #FDF5F4; /* fondo de recuadro de marca */
	--ea-principal-borde:  #F0D3D1; /* borde de ese recuadro */
	--ea-sobre-principal:  #FFFFFF; /* la letra que va ENCIMA del rojo */

	/* Los tres números del rojo por separado (rojo, verde, azul).
	 * Hacen falta para las sombras y los halos translúcidos, donde se
	 * escribe `rgba(var(--ea-principal-rgb), .12)`: un color hexadecimal
	 * no se puede volver transparente, estos tres números sí. */
	--ea-principal-rgb:    192, 67, 61;

	/* --- Texto -------------------------------------------------------- */
	--ea-titulo:           #111111; /* titulares          — 18,88:1 */
	--ea-texto:            #3A4250; /* párrafos           — 10,12:1 */
	--ea-texto-suave:      #5B6473; /* texto secundario   —  5,97:1 */
	--ea-texto-tenue:      #6A7181; /* notas y pies       —  4,89:1 sobre blanco, 4,56:1 sobre la banda gris */

	/* --- Superficies --------------------------------------------------- */
	--ea-fondo:            #FFFFFF; /* fondo base */
	--ea-fondo-suave:      #F5F7FA; /* bandas alternas */
	--ea-fondo-caja:       #F7F9FC; /* fichas y recuadros */
	--ea-borde:            #E4E8EF; /* separadores */
	--ea-borde-campo:      #D7DEE8; /* bordes de los campos de formulario */

	/* --- Zonas oscuras (cabecera de categoría, hero, caja de reporte) --- */
	--ea-oscuro:           #0E1116; /* el fondo negro */
	--ea-sobre-oscuro:     #D6DAE2; /* texto encima   — 13,50:1 */
	--ea-sobre-oscuro-alto: #FFFFFF; /* titulares encima */

	/* --- Sombras ------------------------------------------------------- */
	/* Igual que con el rojo: los tres números sueltos para poder darles
	 * transparencia. Una sombra opaca se ve como una mancha. */
	--ea-sombra-rgb:       17, 17, 17;

	/* Nombres antiguos, conservados para no romper nada que aún los use. */
	--ea-rojo:      var(--ea-principal);
	--ea-rojo-osc:  var(--ea-principal-osc);
	--ea-negro:     var(--ea-titulo);
	--ea-negro-fondo: var(--ea-oscuro);
	--ea-texto-claro: var(--ea-sobre-oscuro);
	--ea-gris:      var(--ea-fondo-suave);
}

/* ==========================================================================
 *  COLORES DE AVISO — ESTOS NO CAMBIAN CON EL TEMA, A PROPOSITO
 *
 *  Verde = correcto, ámbar = ten cuidado, rojo = peligro. Funcionan porque el
 *  visitante los tiene aprendidos de toda la vida. Si cambiaran al cambiar la
 *  paleta dejarían de significar algo, y un "oferta verificada" en color
 *  violeta no le diría nada a nadie.
 *
 *  Por eso el panel de opciones NO los ofrece, y está escrito allí para que
 *  nadie los busque pensando que falta una casilla.
 *
 *  Un apunte de accesibilidad: el verde y el rojo, vistos en escala de
 *  grises, se parecen mucho. Quien no distingue el rojo del verde no los
 *  separa por el color. Por eso cada aviso lleva ADEMAS su texto explícito
 *  ("Oferta verificada el 3 de agosto"), y nunca depende solo del color.
 * ========================================================================== */

:root {
	--ea-ok:            #1F6B39;   /* 6,04:1 sobre su fondo */
	--ea-ok-fondo:      #EEF9F1;
	--ea-ok-borde:      #BFE3CB;

	--ea-cuidado:       #7A5A12;   /* 6,06:1 sobre su fondo */
	--ea-cuidado-fondo: #FFF9E9;
	--ea-cuidado-borde: #EFD9A3;

	--ea-peligro:       #9B2C26;   /* 7,17:1 sobre su fondo */
	--ea-peligro-fondo: #FDF2F2;
	--ea-peligro-borde: #F3D3D3;
	--ea-peligro-texto: #6B2320;   /* el párrafo dentro del recuadro rojo */
}

/* ==========================================================================
   Paleta de la marca, vista por el tema

   El tema base guarda su paleta en unas variables con nombres propios
   (--global-palette1, 2, 3...). En vez de repetir los colores allí, se hacen
   apuntar a las nuestras: así hay UN solo sitio donde cambiar un color, y el
   puente de colores con Elementor lo hereda solo.
   ========================================================================== */

:root {
	--global-palette1: var(--ea-principal);      /* enlaces y acentos */
	--global-palette2: var(--ea-principal-osc);  /* hover */
	--global-palette3: var(--ea-titulo);         /* titulares */
	--global-palette4: var(--ea-texto);          /* texto */
	--global-palette5: var(--ea-texto-suave);    /* texto secundario */
	--global-palette6: var(--ea-texto-tenue);    /* texto tenue */
	--global-palette7: #EEF1F5;                  /* fondo alterno */
	--global-palette8: var(--ea-fondo-suave);    /* fondo suave */
	--global-palette9: var(--ea-fondo);          /* fondo base */

	--global-palette1rgb: var(--ea-principal-rgb);
	--global-palette3rgb: var(--ea-sombra-rgb);
	--global-palette9rgb: 255, 255, 255;

	/* Botones y resaltados del tema */
	--global-palette-btn: var(--ea-sobre-principal);
	--global-palette-btn-hover: var(--ea-sobre-principal);
	--global-palette-btn-bg: var(--ea-principal);
	--global-palette-btn-bg-hover: var(--ea-principal-osc);
	--global-palette-highlight: var(--ea-principal);
	--global-palette-highlight-alt: var(--ea-principal-osc);
	--global-palette-highlight-alt2: var(--ea-sobre-principal);
}

/* ==========================================================================
   Cabecera de archivos y entradas

   El problema original: la descripción de la categoría heredaba el color de
   texto normal (#2D3748) sobre un fondo negro, y no se leía nada. Aquí la
   cabecera se define entera —fondo, título y descripción— para que el
   contraste no dependa de qué color tenga puesto el tema padre.
   ========================================================================== */

.entry-hero-container-inner {
	background-color: var(--ea-oscuro);
}

.entry-hero .entry-header {
	padding-top: clamp(2.5rem, 5vw, 4.5rem);
	padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.entry-hero .page-title,
.entry-hero .entry-title,
.entry-hero h1 {
	color: var(--ea-sobre-oscuro-alto);
	letter-spacing: -0.02em;
}

.entry-hero .archive-description,
.entry-hero .archive-description p,
.entry-hero .taxonomy-description,
.entry-hero .taxonomy-description p,
.entry-hero .entry-meta,
.entry-hero .entry-taxonomies {
	color: var(--ea-sobre-oscuro);
}

.entry-hero .archive-description {
	max-width: 62ch;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.05rem;
	line-height: 1.7;
}

/* Enlaces dentro de la cabecera oscura: el rojo de marca es demasiado oscuro
   para leerse sobre negro, así que se usa blanco con subrayado, y el rojo
   CLARO (--ea-principal-sua) solo para el paso del ratón. Es el mismo color
   del rótulo "Empleos en todo el continente americano". */
.entry-hero a,
.entry-hero .entry-meta a,
.entry-hero .entry-taxonomies a {
	color: var(--ea-sobre-oscuro-alto);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.entry-hero a:hover,
.entry-hero .entry-meta a:hover,
.entry-hero .entry-taxonomies a:hover {
	color: var(--ea-principal-sua);
}

/* ==========================================================================
   Listados
   ========================================================================== */

.loop-entry .entry-taxonomies,
.loop-entry .entry-taxonomies a {
	color: var(--ea-principal);
	font-weight: 700;
	letter-spacing: 0.04em;
}

.loop-entry .entry-taxonomies a:hover {
	color: var(--ea-principal-osc);
}

.loop-entry {
	border-radius: 16px;
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}

.loop-entry:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(var(--ea-sombra-rgb), .10);
}

/* ==========================================================================
   Pie de página
   ========================================================================== */

.site-bottom-footer-inner-wrap {
	font-size: 0.95rem;
}

.site-footer a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.site-footer a:hover {
	color: var(--ea-principal);
}

/* ==========================================================================
   Accesibilidad
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--ea-principal);
	outline-offset: 2px;
}

/* El salto al contenido debe verse al tabular, no quedarse invisible. */
.skip-link:focus {
	background: var(--ea-principal);
	color: var(--ea-sobre-principal);
	padding: 12px 20px;
	border-radius: 0 0 8px 0;
	z-index: 100000;
}

/* Respeta a quien ha pedido menos animación en su sistema. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}


/* ==========================================================================
 *  Movil
 *
 *  La cabecera de categoria usa clamp() y se adapta sola, pero el titulo y la
 *  descripcion siguen ocupando demasiado en una pantalla estrecha: el
 *  visitante llega a una oferta y ve media pantalla de cabecera antes del
 *  primer resultado.
 * ========================================================================== */

@media (max-width: 600px) {
	.entry-hero .entry-header {
		padding-top: 2rem;
		padding-bottom: 1.75rem;
	}

	.entry-hero .archive-description,
	.entry-hero .archive-description p {
		font-size: 0.95rem;
		line-height: 1.55;
	}

	/* Sin esto, un titulo largo de oferta desborda a lo ancho. */
	.entry-hero .page-title,
	.entry-hero .entry-title,
	.entry-hero h1 {
		overflow-wrap: break-word;
		hyphens: auto;
	}
}

/* Nada del sitio debe provocar barra horizontal. */
html,
body {
	overflow-x: hidden;
	max-width: 100%;
}