/*
 * Empleos Ahora — estilos de los bloques propios del tema.
 * White Hat Mgmt LLC.
 *
 * AQUI NO HAY NI UN COLOR ESCRITO A MANO, Y ES A PROPOSITO.
 * Todos salen de las variables que define identidad.css (`var(--ea-...)`).
 * Antes el rojo estaba repetido en 27 sitios de este archivo: el panel de
 * opciones ofrecía cambiarlo y en realidad no cambiaba casi nada, porque
 * estos valores fijos ganaban siempre. Con variables, el panel reescribe la
 * variable y el sitio entero obedece.
 *
 * Si vas a añadir una regla con color, usa una variable. Si el color que
 * necesitas no existe todavía, créalo en identidad.css con su medida de
 * contraste al lado; no lo escribas suelto aquí.
 */
/* --- tarjetas de entradas --- */
.ea-grid{display:grid;gap:26px;grid-template-columns:repeat(3,minmax(0,1fr))}
.ea-grid.ea-cols-1{grid-template-columns:minmax(0,1fr)}
.ea-grid.ea-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ea-grid.ea-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1024px){.ea-grid,.ea-grid.ea-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.ea-grid,.ea-grid.ea-cols-2,.ea-grid.ea-cols-4{grid-template-columns:minmax(0,1fr)}}
.ea-card{display:flex;flex-direction:column;background:var(--ea-fondo);border:1px solid var(--ea-borde);border-radius:16px;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.ea-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(var(--ea-sombra-rgb),.10);border-color:var(--ea-principal)}
.ea-card__img{display:block;aspect-ratio:16/9;background:var(--ea-fondo-suave);overflow:hidden}
.ea-card__img img{width:100%;height:100%;object-fit:cover;display:block}
.ea-card__body{display:flex;flex-direction:column;gap:9px;padding:20px 22px 24px;flex:1}
.ea-card__meta{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ea-principal)}
.ea-card__title{margin:0;font-size:19px;line-height:1.35;font-weight:700}
.ea-card__title a{color:var(--ea-titulo);text-decoration:none}
.ea-card__title a:hover{color:var(--ea-principal)}
.ea-card__exc{margin:0;font-size:15px;line-height:1.6;color:var(--ea-texto-suave);flex:1}
.ea-card__cta{font-size:14.5px;font-weight:700;color:var(--ea-principal)}

/* --- buscador simple --- */
.ea-search{display:flex;gap:10px;width:100%;max-width:660px;background:var(--ea-fondo);border-radius:14px;padding:9px;box-shadow:0 12px 34px rgba(var(--ea-sombra-rgb),.16)}
.ea-search__input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:0 14px;font-size:16.5px;color:var(--ea-titulo)}
.ea-search__input::placeholder{color:var(--ea-texto-tenue)}
.ea-search__btn{flex:none;border:0;cursor:pointer;background:var(--ea-principal);color:var(--ea-sobre-principal);font-size:15.5px;font-weight:700;padding:15px 30px;border-radius:9px;transition:background .18s ease}
.ea-search__btn:hover{background:var(--ea-principal-osc)}
@media(max-width:600px){.ea-search{flex-direction:column;padding:12px}.ea-search__input{padding:12px 8px}.ea-search__btn{width:100%}}

/* --- buscador de empleos (texto + pais) --- */
.ea-bx{display:flex;gap:10px;width:100%;max-width:860px;margin:0 auto;background:var(--ea-fondo);border-radius:16px;padding:10px;box-shadow:0 14px 40px rgba(var(--ea-sombra-rgb),.18);align-items:stretch}
.ea-bx__campo{display:flex;align-items:center;flex:1;min-width:0}
.ea-bx__campo--texto{flex:1.4}
.ea-bx__campo--pais{border-left:1px solid var(--ea-borde)}
.ea-bx__input,.ea-bx__select{width:100%;min-width:0;border:0;outline:0;background:transparent;padding:14px 16px;font-size:16.5px;color:var(--ea-titulo);font-family:inherit}
.ea-bx__input::placeholder{color:var(--ea-texto-tenue)}
/* La flechita del desplegable es una imagen SVG metida en el propio CSS. Una
   imagen no puede leer variables, así que este gris va escrito: es el mismo
   valor que --ea-texto-suave. Si cambias esa variable, cámbialo aquí también
   (el %23 del principio es como se escribe una almohadilla dentro de una URL). */
.ea-bx__select{cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6473' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:20px;padding-right:38px}
.ea-bx__btn{flex:none;border:0;cursor:pointer;background:var(--ea-principal);color:var(--ea-sobre-principal);font-size:16px;font-weight:700;font-family:inherit;padding:16px 34px;border-radius:11px;transition:background .18s ease}
.ea-bx__btn:hover{background:var(--ea-principal-osc)}
/* Las sugerencias van debajo del buscador, sobre el fondo oscuro del hero. */
.ea-bx__sug{max-width:860px;margin:14px auto 0;font-size:14.5px;color:var(--ea-sobre-oscuro);text-align:center}
.ea-bx__sug span{margin-right:6px}
.ea-bx__sug a{display:inline-block;margin:4px 4px 0;padding:5px 13px;border:1px solid rgba(255,255,255,.28);border-radius:999px;color:inherit;text-decoration:none;transition:all .18s ease}
.ea-bx__sug a:hover{background:var(--ea-principal);border-color:var(--ea-principal);color:var(--ea-sobre-principal)}
/* El [href] de aqui abajo no es un capricho: hace falta para GANAR.
 *
 * Elementor define el color de TODOS los enlaces del sitio con la regla
 * `.elementor-kit-561 a`, que vale exactamente lo mismo que `.ea-bx__sug a`
 * (una clase y una etiqueta cada una). Cuando dos reglas valen lo mismo gana
 * la que se carga despues, y la de Elementor va detras: por eso estos chips
 * salian del rojo de marca aunque aqui arriba pusiera `color: inherit`.
 *
 * Y ese rojo esta pensado para fondo BLANCO. Sobre el fondo oscuro del hero
 * daba 3,7:1, por debajo del 4,5:1 que hace falta para leerlo.
 *
 * Anadir `[href]` sube el peso de la regla lo justo para ganar sin recurrir a
 * `!important`, que es un martillo que luego nadie sabe como quitar.
 */
.ea-bx__sug a[href]{color:var(--ea-sobre-oscuro)}
.ea-bx__sug a[href]:hover{color:var(--ea-sobre-principal)}
@media(max-width:760px){.ea-bx{flex-direction:column;padding:12px}.ea-bx__campo--pais{border-left:0;border-top:1px solid var(--ea-borde)}.ea-bx__btn{width:100%}}

/* --- filtro de paises --- */
.ea-filtro{display:flex;align-items:center;gap:12px;width:100%;max-width:520px;margin:0 auto;background:var(--ea-fondo);border:1px solid var(--ea-borde);border-radius:12px;padding:4px 6px 4px 16px}
.ea-filtro__input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:13px 0;font-size:16px;color:var(--ea-titulo);font-family:inherit}
.ea-filtro__input::placeholder{color:var(--ea-texto-tenue)}
.ea-filtro__n{flex:none;font-size:13.5px;font-weight:700;color:var(--ea-texto-suave);padding-right:10px;white-space:nowrap}

/* --- rejilla de paises --- */
.ea-paises{width:100%}
.ea-region{margin-top:44px}
.ea-region:first-child{margin-top:0}
.ea-region__titulo{display:flex;align-items:center;gap:10px;margin:0 0 20px;font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ea-titulo)}
.ea-region__titulo:after{content:"";flex:1;height:1px;background:var(--ea-borde)}
.ea-region__titulo span{order:3;flex:none;font-size:12px;letter-spacing:0;color:var(--ea-texto-tenue);background:var(--ea-fondo-suave);border-radius:999px;padding:3px 10px}
.ea-region__grid{display:grid;gap:18px;grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:1100px){.ea-region__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:760px){.ea-region__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:480px){.ea-region__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ea-pais{display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 10px 14px;background:var(--ea-fondo);border:1px solid var(--ea-borde);border-radius:14px;text-decoration:none;text-align:center;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.ea-pais:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(var(--ea-sombra-rgb),.10);border-color:var(--ea-principal)}
.ea-pais__bandera{display:block;width:100%;max-width:76px;aspect-ratio:4/3;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px rgba(var(--ea-sombra-rgb),.12);background:var(--ea-fondo-suave)}
.ea-pais__bandera img{width:100%;height:100%;object-fit:cover;display:block}
.ea-pais__nombre{font-size:14px;font-weight:600;line-height:1.3;color:var(--ea-titulo)}
.ea-pais__n{font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--ea-principal)}
/* Las banderas se dejan siempre a todo color: se destaca en positivo el país
   que ya tiene ofertas, en lugar de apagar a los demás. */
.ea-pais--activo{border-color:rgba(var(--ea-principal-rgb),.38);box-shadow:0 4px 14px rgba(var(--ea-principal-rgb),.07)}
.ea-pais--pronto{background:var(--ea-fondo-suave)}
.ea-pais--pronto .ea-pais__bandera{opacity:.92}
.ea-pais--pronto .ea-pais__nombre{color:var(--ea-texto)}
.ea-pais--pronto .ea-pais__n{color:var(--ea-texto-tenue);font-weight:600}
.ea-pais--pronto:hover .ea-pais__bandera{opacity:1}
.ea-paises__vacio{margin:34px 0 0;text-align:center;font-size:16px;color:var(--ea-texto-suave)}

/* --- ficha de la oferta --- */
.ea-ficha{margin:0 0 34px;padding:24px 26px;background:var(--ea-fondo-caja);border:1px solid var(--ea-borde);border-radius:16px;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
/* Los dos avisos de abajo usan los colores FIJOS de estado (verde y ámbar):
   no cambian aunque se cambie la paleta, porque su significado depende de que
   el visitante los reconozca siempre igual. */
.ea-ficha__fresca{margin:0 0 16px;font-size:14px;font-weight:600;color:var(--ea-ok);background:var(--ea-ok-fondo);border:1px solid var(--ea-ok-borde);border-radius:8px;padding:9px 13px;display:inline-block}
.ea-ficha__caduca{margin:0 0 16px;font-size:14.5px;line-height:1.6;color:var(--ea-cuidado);background:var(--ea-cuidado-fondo);border:1px solid var(--ea-cuidado-borde);border-radius:10px;padding:12px 15px}
.ea-ficha__datos{margin:0;display:grid;gap:0}
.ea-ficha__fila{display:flex;gap:14px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--ea-borde)}
.ea-ficha__fila:first-child{border-top:0;padding-top:0}
.ea-ficha__fila dt{flex:none;width:112px;margin:0;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ea-texto-tenue);padding-top:2px}
.ea-ficha__fila dd{flex:1;min-width:180px;margin:0;font-size:16.5px;line-height:1.5;color:var(--ea-titulo);font-weight:600}
.ea-ficha__cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:20px 0 0;padding-top:20px;border-top:1px solid var(--ea-borde)}
.ea-ficha__btn{display:inline-block;background:var(--ea-principal);color:var(--ea-sobre-principal)!important;font-size:16px;font-weight:700;text-decoration:none;padding:15px 30px;border-radius:10px;transition:background .18s ease}
.ea-ficha__btn:hover{background:var(--ea-principal-osc);color:var(--ea-sobre-principal)!important}
.ea-ficha__fuente{font-size:14px;color:var(--ea-texto-tenue)}
.ea-ficha__aclara{margin:12px 0 0;font-size:14px;line-height:1.6;color:var(--ea-texto-tenue)}
@media(max-width:600px){.ea-ficha{padding:20px 18px}.ea-ficha__fila dt{width:100%}.ea-ficha__btn{width:100%;text-align:center}}

.ea-notas{margin:52px 0 0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.ea-nota{margin:0 0 26px;padding:26px 28px;background:var(--ea-fondo-caja);border:1px solid var(--ea-borde);border-radius:16px}
.ea-nota__t{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-size:20px;line-height:1.3;font-weight:700;color:var(--ea-titulo)}
.ea-nota__i{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--ea-principal);color:var(--ea-sobre-principal);font-size:15px;font-weight:700}
.ea-nota__lista{margin:0;padding-left:22px}
.ea-nota__lista li{margin:0 0 10px;font-size:16px;line-height:1.65;color:var(--ea-texto)}
.ea-nota__lista li:last-child{margin-bottom:0}
.ea-nota code{background:var(--ea-fondo);border:1px solid var(--ea-borde);border-radius:5px;padding:1px 6px;font-size:14.5px}
.ea-plantilla{margin:18px 0 0;padding:18px 20px;background:var(--ea-fondo);border:1px dashed var(--ea-borde-campo);border-radius:12px}
.ea-plantilla__t{margin:0 0 10px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ea-texto-tenue)}
.ea-plantilla p{margin:0 0 9px;font-size:15.5px;line-height:1.6;color:var(--ea-texto)}
.ea-plantilla p:last-child{margin-bottom:0}
/* Recuadro de "oferta sospechosa": colores FIJOS de peligro, no de la paleta. */
.ea-aviso{margin:0 0 26px;padding:26px 28px;background:var(--ea-peligro-fondo);border:1px solid var(--ea-peligro-borde);border-left:5px solid var(--ea-peligro);border-radius:16px}
.ea-aviso__t{margin:0 0 12px;font-size:20px;font-weight:700;color:var(--ea-peligro)}
.ea-aviso__intro{margin:0 0 14px;font-size:16px;line-height:1.65;color:var(--ea-peligro-texto)}
.ea-aviso__lista{margin:0;padding-left:22px}
.ea-aviso__lista li{margin:0 0 10px;font-size:16px;line-height:1.65;color:var(--ea-peligro-texto)}
.ea-aviso__cierre{margin:16px 0 0;font-size:15.5px;line-height:1.6;font-weight:600;color:var(--ea-peligro)}
.ea-reportar{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;margin:0;padding:24px 28px;background:var(--ea-oscuro);border-radius:16px}
.ea-reportar__txt{flex:1;min-width:240px}
.ea-reportar__t{margin:0 0 6px;font-size:18px;font-weight:700;color:var(--ea-sobre-oscuro-alto)}
.ea-reportar__d{margin:0;font-size:15px;line-height:1.6;color:var(--ea-sobre-oscuro)}
.ea-reportar__btn{flex:none;display:inline-block;background:var(--ea-principal);color:var(--ea-sobre-principal)!important;font-size:15.5px;font-weight:700;text-decoration:none;padding:15px 28px;border-radius:10px;transition:background .18s ease}
.ea-reportar__btn:hover{background:var(--ea-sobre-oscuro-alto);color:var(--ea-oscuro)!important}
/* Mismo motivo que en los chips del buscador: cualquier enlace suelto dentro
   de esta caja oscura heredaria el rojo de marca de Elementor, que esta
   pensado para fondo blanco y aqui no se leeria. */
.ea-reportar__txt a[href]{color:var(--ea-sobre-oscuro-alto);text-decoration:underline}
@media(max-width:600px){.ea-nota,.ea-aviso,.ea-reportar{padding:20px 18px}.ea-reportar__btn{width:100%;text-align:center}}

/* --- formulario de reporte --- */
.ea-form{max-width:640px;margin:0 auto}
.ea-form__oferta{display:flex;flex-direction:column;gap:4px;margin:0 0 22px;padding:16px 18px;background:var(--ea-fondo-caja);border:1px solid var(--ea-borde);border-radius:12px}
.ea-form__oferta span{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ea-texto-tenue)}
.ea-form__oferta strong{font-size:17px;color:var(--ea-titulo);line-height:1.4}
.ea-form__oferta a{font-size:14.5px;color:var(--ea-principal)}
.ea-form__campo{display:flex;flex-direction:column;gap:7px;margin:0 0 18px}
.ea-form__campo label{font-size:15px;font-weight:600;color:var(--ea-titulo)}
.ea-form__campo label span{color:var(--ea-principal)}
.ea-form__opc{font-weight:400;color:var(--ea-texto-tenue)}
.ea-form__campo input,.ea-form__campo select,.ea-form__campo textarea{width:100%;border:1px solid var(--ea-borde-campo);border-radius:10px;padding:13px 15px;font-size:16px;font-family:inherit;color:var(--ea-titulo);background:var(--ea-fondo)}
.ea-form__campo input:focus,.ea-form__campo select:focus,.ea-form__campo textarea:focus{outline:0;border-color:var(--ea-principal);box-shadow:0 0 0 3px rgba(var(--ea-principal-rgb),.12)}
.ea-form__btn{border:0;cursor:pointer;background:var(--ea-principal);color:var(--ea-sobre-principal);font-size:16px;font-weight:700;font-family:inherit;padding:16px 34px;border-radius:10px;transition:background .18s ease}
.ea-form__btn:hover{background:var(--ea-principal-osc)}
.ea-form__nota{margin:14px 0 0;font-size:14px;line-height:1.6;color:var(--ea-texto-tenue)}
.ea-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ea-msg{margin:0 auto 26px;max-width:640px;padding:16px 20px;border-radius:12px;font-size:16px;line-height:1.6}
.ea-msg--ok{background:var(--ea-ok-fondo);border:1px solid var(--ea-ok-borde);color:var(--ea-ok)}
.ea-msg--error{background:var(--ea-peligro-fondo);border:1px solid var(--ea-peligro-borde);color:var(--ea-peligro)}
.ea-msg--aviso{background:var(--ea-cuidado-fondo);border:1px solid var(--ea-cuidado-borde);color:var(--ea-cuidado)}
.ea-msg a{color:inherit;text-decoration:underline}

/* --- atajo a las preguntas frecuentes --- */
.ea-atajo{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;max-width:640px;margin:0 auto 28px;padding:20px 24px;background:var(--ea-fondo-caja);border:1px solid var(--ea-borde);border-radius:14px}
.ea-atajo__txt{flex:1;min-width:220px}
.ea-atajo__t{margin:0 0 5px;font-size:16.5px;font-weight:700;color:var(--ea-titulo)}
.ea-atajo__d{margin:0;font-size:14.5px;line-height:1.6;color:var(--ea-texto-suave)}
.ea-atajo__btn{flex:none;display:inline-block;background:var(--ea-oscuro);color:var(--ea-sobre-oscuro-alto)!important;font-size:14.5px;font-weight:700;text-decoration:none;padding:12px 22px;border-radius:9px;transition:background .18s ease}
.ea-atajo__btn:hover{background:var(--ea-principal);color:var(--ea-sobre-principal)!important}

/* --- preguntas frecuentes --- */
.ea-faq{width:100%;max-width:820px;margin:0 auto}
.ea-faq__grupo{margin:0 0 38px}
.ea-faq__grupo:last-child{margin-bottom:0}
.ea-faq__gt{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ea-principal)}
.ea-faq__gt:after{content:"";flex:1;height:1px;background:var(--ea-borde)}
.ea-faq__item{border:1px solid var(--ea-borde);border-radius:12px;margin:0 0 10px;background:var(--ea-fondo);overflow:hidden}
.ea-faq__item[open]{border-color:var(--ea-principal);box-shadow:0 6px 20px rgba(var(--ea-sombra-rgb),.06)}
.ea-faq__p{list-style:none;cursor:pointer;padding:18px 52px 18px 22px;font-size:17px;font-weight:600;line-height:1.45;color:var(--ea-titulo);position:relative}
.ea-faq__p::-webkit-details-marker{display:none}
.ea-faq__p:after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:22px;font-weight:400;color:var(--ea-principal);line-height:1}
.ea-faq__item[open] .ea-faq__p:after{content:"\2212"}
.ea-faq__p:hover{color:var(--ea-principal)}
.ea-faq__r{padding:0 22px 20px}
.ea-faq__r p{margin:0;font-size:16px;line-height:1.7;color:var(--ea-texto)}
@media(max-width:600px){.ea-faq__p{font-size:16px;padding:16px 46px 16px 18px}.ea-faq__r{padding:0 18px 18px}}

/* ==========================================================================
 *  Comportamiento en pantallas pequeñas
 *
 *  Las rejillas ya tenían sus cortes, pero faltaban dos cosas que son las que
 *  de verdad rompen una página en un móvil:
 *
 *  1. El texto que no cabe. Una URL larga del portal de una empresa, o el
 *     nombre de una empresa sin espacios, ensancha su caja, y con ella la
 *     página entera: aparece barra horizontal y todo se descoloca. No se ve
 *     en un ordenador porque ahí sobra sitio.
 *  2. Nada por debajo de 480px. El corte más pequeño dejaba fuera a los
 *     móviles de 360px y 320px, que siguen siendo muchos en América Latina.
 *
 *  Las reglas van sobre nuestras clases, no sobre el sitio entero: así no se
 *  pisa nada de Elementor ni del resto del tema.
 * ========================================================================== */

/* --- Que ningún texto ensanche su caja --- */
.ea-card, .ea-ficha, .ea-nota, .ea-aviso, .ea-reportar, .ea-atajo,
.ea-faq, .ea-form, .ea-pais, .ea-msg, .ea-plantilla {
	min-width: 0;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Las direcciones web son el caso peor: no tienen espacios donde cortar. */
.ea-ficha a, .ea-ficha__fuente, .ea-card__exc, .ea-nota__lista a, .ea-form__oferta {
	overflow-wrap: anywhere;
}

/* Un hijo de flex o grid no se encoge por debajo de su contenido si no se le
   dice. Sin esto, min-width:180px gana y la caja desborda. */
.ea-ficha__fila dd, .ea-reportar__txt, .ea-atajo__txt, .ea-card__body {
	min-width: 0;
}

/* --- Contenido ancho que no se puede partir --- */
.ea-ficha table, .ea-nota table, .ea-faq table {
	display: block;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.ea-card img, .ea-ficha img, .ea-nota img, .ea-faq img, .ea-form img {
	max-width: 100%;
	height: auto;
}

.ea-ficha pre, .ea-faq pre {
	overflow-x: auto;
	max-width: 100%;
}

/* --- Móviles estrechos: 480px y menos --- */
@media (max-width: 480px) {
	/* Se recorta el aire, pero sin dejarlo apretado: en pantalla pequeña el
	   relleno de escritorio se come media pantalla. */
	.ea-grid { gap: 18px; }
	.ea-region { margin-top: 32px; }
	.ea-region__grid { gap: 12px; }
	.ea-pais { padding: 12px 8px 10px; gap: 7px; }
	.ea-pais__bandera { max-width: 60px; }
	.ea-pais__nombre { font-size: 13px; }

	/* La fila de la ficha pasa a dos líneas: etiqueta arriba, dato debajo. */
	.ea-ficha__fila { gap: 4px; padding: 12px 0; }
	.ea-ficha__fila dt { width: 100%; }

	/* Los botones necesitan 44px de alto para el dedo. */
	.ea-ficha__btn, .ea-reportar__btn, .ea-atajo__btn,
	.ea-search__btn, .ea-bx__btn, .ea-form__btn {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.ea-region__titulo { font-size: 13px; margin-bottom: 14px; }
}

/* --- Los más estrechos que quedan en circulación: 360px --- */
@media (max-width: 360px) {
	/* Dos columnas siguen cabiendo si la bandera cede un poco. */
	.ea-region__grid { gap: 10px; }
	.ea-pais__bandera { max-width: 52px; }
	.ea-pais__nombre { font-size: 12px; line-height: 1.25; }
	.ea-ficha, .ea-nota, .ea-aviso, .ea-reportar, .ea-atajo { padding: 16px 14px; }
	.ea-faq__p { padding: 14px 40px 14px 14px; }
	.ea-faq__r { padding: 0 14px 14px; }
}

/* --- Pantallas muy anchas --- */
@media (min-width: 1600px) {
	/* Sin tope, la rejilla de países estira las tarjetas hasta que la bandera
	   nada en medio de la nada. */
	.ea-region__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* --- Quien prefiere menos movimiento --- */
@media (prefers-reduced-motion: reduce) {
	.ea-pais, .ea-card { transition: none; }
	.ea-pais:hover, .ea-card:hover { transform: none; }
}

/* ==========================================================================
 *  Buscador de las páginas de categoría
 *
 *  Reutiliza el aspecto del buscador general (.ea-search): así los dos se ven
 *  igual y no hay que mantener dos diseños. Aquí solo se ajusta la separación
 *  respecto a la lista de ofertas que viene debajo.
 * ========================================================================== */

.ea-buscador-archivo {
	margin: 0 0 28px;
}

.ea-search--cat {
	max-width: 640px;
}

@media (max-width: 480px) {
	.ea-buscador-archivo {
		margin-bottom: 20px;
	}
}