/*
* Expediente Abierto — Central Layout Stylesheet
*
* CSS Grid + Container Queries + clamp() + Accessibility
* No @media for layout — only prefers-reduced-motion and print.
*/
/* ==========================================================================
1. Custom Properties
========================================================================== */
:root {
--ea-font-body: var(--wp--preset--font-family--body, 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif);
--ea-font-heading: var(--wp--preset--font-family--heading, 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif);
--ea-page-max-width: 1440px;
--ea-focus-color: #1e40af;
--ea-transition: 150ms ease;
--ea-radius-sm: 2px;
--ea-radius-md: 4px;
--ea-radius-pill: 9999px;
--ea-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
--ea-card-bg: var(--wp--preset--color--background, #fff);
--ea-border: var(--wp--preset--color--border, #e0e0e0);
--ea-blue: #172d4d;
--ea-blue-hover: #162c4c;
}
body,
button,
input,
select,
textarea {
font-family: var(--ea-font-body);
}
h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-heading,
.wp-block-post-title,
.wp-block-post-title a,
.wp-block-query-title,
.elementor-heading-title,
[class*="ea-"][class*="title"],
[class*="ea-"][class*="title"] a,
[class*="ea-"][class*="heading"] {
font-family: var(--ea-font-heading);
font-weight: 600;
letter-spacing: 0;
text-transform: none;
}
/* ==========================================================================
2. Container Declarations
========================================================================== */
main.wp-block-group {
container-type: inline-size;
container-name: main-content;
}
.e-con.e-con-boxed > .e-con-inner,
.elementor-section.elementor-section-boxed > .elementor-container,
.wp-site-blocks > .wp-block-group.alignwide,
.wp-site-blocks > .wp-block-group:not(.alignfull) {
max-width: var(--ea-page-max-width);
}
.ea-site-header {
container-type: inline-size;
container-name: header;
}
.ea-site-footer {
container-type: inline-size;
container-name: footer;
padding-inline: 0;
}
/* Footer nav: los 3 menús en grid de 3 columnas iguales */
.ea-footer-nav-group {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
align-items: start;
}
.ea-footer-nav-group > * {
margin-block: 0;
}
@container footer (max-width: 50rem) {
.ea-footer-nav-group {
grid-template-columns: 1fr;
}
}
/* Search: alinear a la derecha en el grid */
.ea-header-bar > .ea-search {
justify-self: end;
}
.wp-block-query {
container-type: inline-size;
container-name: query-loop;
}
.ea-container {
container-type: inline-size;
}
/* ==========================================================================
2b. Grid System: 12 columnas
========================================================================== */
/*
* .ea-grid → contenedor de 12 columnas con container query propio
* .ea-col-N → hijo que abarca N columnas (1–12)
* Mobile-first: todo colapsa a span 12 por defecto.
* Breakpoint: @container ea-grid (min-width: 50rem)
* Usar --ea-gutter para ajustar el gap por contexto.
*/
.ea-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--ea-gap, 1.25rem);
row-gap: var(--ea-gap, 1.25rem);
padding-inline: var(--ea-pad, 2rem);
width: 100%;
box-sizing: border-box;
align-items: start;
container-type: inline-size;
container-name: ea-grid;
}
/* Mobile-first: todas las cols ocupan el ancho completo */
[class*="ea-col-"] {
grid-column: span 12;
min-width: 0;
}
/* Desktop: activar los spans declarados */
@container ea-grid (min-width: 50rem) {
.ea-col-1 { grid-column: span 1; }
.ea-col-2 { grid-column: span 2; }
.ea-col-3 { grid-column: span 3; }
.ea-col-4 { grid-column: span 4; }
.ea-col-5 { grid-column: span 5; }
.ea-col-6 { grid-column: span 6; }
.ea-col-7 { grid-column: span 7; }
.ea-col-8 { grid-column: span 8; }
.ea-col-9 { grid-column: span 9; }
.ea-col-10 { grid-column: span 10; }
.ea-col-11 { grid-column: span 11; }
.ea-col-12 { grid-column: span 12; }
.ea-col-start-1 { grid-column-start: 1 }
.ea-col-start-2 { grid-column-start: 2 }
.ea-col-start-3 { grid-column-start: 3 }
.ea-col-start-4 { grid-column-start: 4 }
.ea-col-start-5 { grid-column-start: 5 }
.ea-col-start-6 { grid-column-start: 6 }
.ea-col-start-7 { grid-column-start: 7 }
/* Artículos centrados: 8 cols (cols 3–10) ó 6 cols (cols 4–9) */
.ea-col-center-8 { grid-column: 3 / span 8; }
.ea-col-center-6 { grid-column: 4 / span 6; }
}
/* Mantener el contenido principal alineado al ancho editorial del sitio. */
/* Columna sidebar: oculta en mobile, visible en desktop */
.ea-col-sidebar {
display: none;
position: sticky;
top: 5rem;
align-self: start;
}
@container ea-grid (min-width: 50rem) {
.ea-col-sidebar {
display: block;
}
}
/* --------------------------------------------------------------------------
Single post — layout 3 columnas en el ea-grid de 12 cols
2 cols | 1 vacía | 6 content | 1 vacía | 2 cols
body.single garantiza especificidad sobre las reglas de WP
-------------------------------------------------------------------------- */
/* Mobile: columna completa por defecto */
.ea-single-col-left,
.ea-single-col-content,
.ea-single-col-right {
grid-column: span 12;
min-width: 0;
}
/* Desktop ≥ 768px: posicionamiento en las 12 columnas */
@media (min-width: 768px) {
body.single .ea-single-col-left { grid-column: 1 / span 2 !important; grid-row: 1 !important; }
body.single .ea-single-col-content { grid-column: 4 / span 6 !important; grid-row: 1 !important; }
body.single .ea-single-col-right { grid-column: 11 / span 2 !important; grid-row: 1 !important; }
}
/* Neutralizar margin-block-start que WP inyecta en hijos de grid */
body.single .wp-block-group.ea-grid > * {
margin-block-start: 0 !important;
}
/* Sidebars sticky en desktop */
@media (min-width: 768px) {
body.single .ea-single-col-left,
body.single .ea-single-col-right {
position: sticky;
top: 5rem;
align-self: start;
}
}
/* TOC oculto en mobile */
@media (max-width: 767px) {
.ea-toc { display: none; }
}
/* Bajada / excerpt — estilo global único para single y todas las cards */
.wp-block-post-excerpt__excerpt {
font-size: 1.0625rem;
line-height: 1.55;
color: var(--wp--preset--color--secondary, #4b5563);
margin: 0;
font-weight: 400;
}
.wp-block-post-excerpt__more-link { display: none; }
/* Excerpt en cards: limitar a 3 líneas. El single no aplica. */
.ea-home-card-body .wp-block-post-excerpt__excerpt,
.ea-search-card__body .wp-block-post-excerpt__excerpt,
.ea-articles-card__body .wp-block-post-excerpt__excerpt,
.ea-articles-row__body .wp-block-post-excerpt__excerpt {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* --- TOC (tabla de contenidos) --- */
.ea-toc__label,
.ea-sidebar-section-label,
.ea-more-on__label {
display: block;
font-size: .6875rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--wp--preset--color--secondary, #6b7280);
margin-bottom: .75rem;
padding-bottom: .5rem;
border-bottom: 1px solid var(--wp--preset--color--border, #e0e0e0);
}
.ea-toc__list {
list-style: none;
margin: 0;
padding: 0;
}
.ea-toc__list li {
margin-bottom: .5rem;
line-height: 1.3;
}
.ea-toc__list a {
font-size: .875rem;
color: var(--wp--preset--color--foreground, #111);
text-decoration: none;
}
.ea-toc__list a:hover {
text-decoration: underline;
}
.ea-toc__sub {
padding-left: .875rem;
}
.ea-toc__sub a {
font-size: .8125rem;
color: var(--wp--preset--color--secondary, #6b7280);
}
/* --- Sidebar download --- */
.ea-sidebar-download {
margin-top: 0;
padding-top: 0;
}
.ea-toc + .ea-sidebar-download {
margin-top: 1.75rem;
padding-top: 1.5rem;
}
.ea-sidebar-download__cover {
width: 100%;
height: auto;
border-radius: 4px;
margin-bottom: .75rem;
display: block;
}
.ea-sidebar-download__title {
margin: 0 0 .75rem;
color: var(--wp--preset--color--foreground, #111);
}
a.ea-sidebar-download__btn,
a.ea-sidebar-download__btn:link,
a.ea-sidebar-download__btn:visited {
display: flex;
align-items: center;
gap: .4rem;
justify-content: center;
padding: .6rem 1rem;
background: var(--e-global-color-ea_pdf_btn, #172E4D);
color: #fff !important;
border-radius: 4px;
font-size: .8125rem;
font-weight: 600;
text-decoration: none;
transition: opacity var(--ea-transition, 150ms ease);
}
a.ea-sidebar-download__btn:hover,
a.ea-sidebar-download__btn:focus,
a.ea-sidebar-download__btn:active {
opacity: .85;
color: #fff !important;
background: var(--e-global-color-ea_pdf_btn, #172E4D);
}
a.ea-sidebar-download__btn span,
a.ea-sidebar-download__btn * {
color: #fff !important;
}
/* --- Más sobre esto (sidebar derecho) --- */
.ea-more-on__sub-label {
display: block;
font-size: .625rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--wp--preset--color--secondary, #6b7280);
margin: .875rem 0 .2rem;
}
.ea-more-on__cat-link {
display: block;
font-size: .875rem;
font-weight: 500;
color: var(--wp--preset--color--foreground, #111);
text-decoration: none;
margin-bottom: .2rem;
line-height: 1.3;
}
.ea-more-on__cat-link:hover {
text-decoration: underline;
}
.ea-more-on__divider {
border: none;
border-top: 1px solid var(--wp--preset--color--border, #e0e0e0);
margin: 1rem 0;
}
.ea-more-on__list {
list-style: none;
margin: 0;
padding: 0;
}
.ea-more-on__list li {
margin-bottom: .75rem;
}
.ea-more-on__list a {
font-size: .8125rem;
line-height: 1.4;
color: var(--wp--preset--color--foreground, #111);
text-decoration: none;
display: block;
padding-left: 1rem;
position: relative;
border-bottom: 1px solid var(--wp--preset--color--border, #e0e0e0);
padding-bottom: .5rem;
transition: color .15s, border-color .15s;
}
.ea-more-on__list a::before {
content: "→";
position: absolute;
left: 0;
color: #172E4D;
font-size: .75rem;
top: .1em;
}
.ea-more-on__list a:hover {
color: #172E4D;
border-bottom-color: #172E4D;
}
/* ==========================================================================
2c. Mega Menu
========================================================================== */
/* --- Wrapper & header --- */
.ea-header-wrap {
position: sticky;
top: 0;
z-index: 9990;
background: var(--ea-blue) !important;
color: #fff;
}
/* Logo */
.ea-logo {
display: inline-flex;
align-items: center;
text-decoration: none;
line-height: 0;
}
.ea-logo img {
display: block;
height: 32px;
width: auto;
}
/* Header bar: 3-column layout — logo | nav centrado | search */
.ea-header-bar {
display: grid !important;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 1rem;
position: static !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}
/* Centrar verticalmente todos los hijos directos del header bar */
.ea-header-bar > * {
align-self: center;
margin-block: 0 !important;
}
/* Mobile nav links + hamburguesa en blanco */
.ea-header-wrap .ea-mobile-nav,
.ea-header-wrap .ea-mobile-nav a,
.ea-header-wrap .wp-block-navigation-item__content,
.ea-header-wrap .wp-block-navigation__responsive-container-open,
.ea-header-wrap .wp-block-navigation__responsive-container-open svg {
color: #fff;
fill: currentColor;
}
/* --- Header search: icon-only trigger + drop-down panel --- */
.ea-search {
position: static;
display: flex;
align-items: center;
margin: 0 !important;
}
.ea-search__toggle {
all: unset;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
color: #fff;
cursor: pointer;
transition: background-color 150ms ease, color 150ms ease;
}
.ea-search__toggle:hover,
.ea-search__toggle:focus-visible {
background: rgba(255, 255, 255, 0.1);
}
.ea-search__toggle:focus-visible {
outline: 2px solid var(--ea-focus-color, #1e40af);
outline-offset: 2px;
}
.ea-search__icon {
display: block;
flex-shrink: 0;
}
.ea-search__icon--close {
display: none;
}
.ea-search__toggle[aria-expanded="true"] .ea-search__icon--open {
display: none;
}
.ea-search__toggle[aria-expanded="true"] .ea-search__icon--close {
display: block;
}
/* Panel: full-width drop-down anchored to .ea-header-wrap */
.ea-search__panel {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--ea-blue, #172d4d);
color: #fff;
border-top: 1px solid rgba(255, 255, 255, 0.12);
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25), 0 1px 4px rgba(0, 0, 0, 0.15);
opacity: 0;
transform: translateY(-6px);
transition: opacity 180ms ease, transform 180ms ease;
z-index: 9998;
}
.ea-search__panel--visible {
opacity: 1;
transform: translateY(0);
}
.ea-search__form {
display: flex;
align-items: center;
gap: 1rem;
width: 100%;
max-width: 820px;
margin: 0 auto;
padding-inline: var(--ea-pad, 2rem);
padding-block: 1.75rem;
box-sizing: border-box;
}
.ea-search__form-icon {
color: rgba(255, 255, 255, 0.55);
flex-shrink: 0;
transition: color 150ms ease;
}
.ea-search__form:focus-within .ea-search__form-icon {
color: #fff;
}
.ea-search__input {
flex: 1;
min-width: 0;
background: transparent;
border: 0;
color: #fff;
font-family: inherit;
font-size: 1.5rem;
font-weight: 400;
line-height: 1.3;
padding: 0.25rem 0;
outline: 0 !important;
box-shadow: none !important;
-webkit-appearance: none;
appearance: none;
}
.ea-search__input:focus,
.ea-search__input:focus-visible {
outline: 0 !important;
box-shadow: none !important;
}
.ea-search__input::placeholder {
color: rgba(255, 255, 255, 0.4);
font-weight: 400;
}
/* Eliminar la X nativa del type="search" en Chrome/Safari */
.ea-search__input::-webkit-search-cancel-button,
.ea-search__input::-webkit-search-decoration,
.ea-search__input::-webkit-search-results-button,
.ea-search__input::-webkit-search-results-decoration {
-webkit-appearance: none;
appearance: none;
display: none;
}
.ea-search__submit {
all: unset;
box-sizing: border-box;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.6rem;
color: rgba(255, 255, 255, 0.55);
font-family: inherit;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
border-radius: 4px;
cursor: pointer;
transition: color 150ms ease, background-color 150ms ease;
white-space: nowrap;
flex-shrink: 0;
}
.ea-search__submit::after {
content: "↵";
font-size: 0.95rem;
line-height: 1;
opacity: 0.8;
}
.ea-search__submit:hover,
.ea-search__form:focus-within .ea-search__submit {
color: #fff;
}
.ea-search__submit:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.6);
outline-offset: 2px;
}
/* Underline animado debajo del form */
.ea-search__form {
position: relative;
}
.ea-search__form::after {
content: "";
position: absolute;
left: var(--ea-pad, 2rem);
right: var(--ea-pad, 2rem);
bottom: 1.25rem;
height: 1px;
background: rgba(255, 255, 255, 0.15);
transition: background-color 150ms ease;
pointer-events: none;
}
.ea-search__form:focus-within::after {
background: rgba(255, 255, 255, 0.6);
}
@media (max-width: 599px) {
.ea-search__form {
padding-block: 1.25rem;
gap: 0.75rem;
}
.ea-search__input {
font-size: 1.125rem;
}
.ea-search__submit {
display: none;
}
.ea-search__form::after {
bottom: 1rem;
}
}
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
/* Ensure no intermediate containers create a positioning context */
.ea-header-bar .ea-header-inner {
position: static !important;
}
/* Mega menu sits in the center column */
.ea-header-inner {
display: flex !important;
justify-content: center;
align-items: center;
gap: var(--wp--preset--spacing--30, 0.75rem);
}
.ea-mega {
position: static;
}
/* --- Bar: top-level triggers --- */
.ea-mega__bar {
display: flex;
align-items: center;
gap: 0;
}
.ea-mega__trigger {
all: unset;
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.5rem 0.75rem;
font-family: var(--wp--preset--font-family--body, Arial, sans-serif);
font-size: 1rem;
font-weight: 500;
color: #fff;
cursor: pointer;
transition: color 150ms ease;
white-space: nowrap;
box-sizing: border-box;
}
.ea-mega__trigger:hover {
color: rgba(255, 255, 255, 0.7);
}
.ea-mega__trigger[aria-expanded="true"] {
color: #fff;
}
.ea-mega__trigger[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.ea-mega__trigger svg {
transition: transform 200ms ease;
flex-shrink: 0;
opacity: 0.4;
}
.ea-mega__trigger:focus-visible {
outline: 2px solid var(--ea-focus-color, #1e40af);
outline-offset: 2px;
}
/* --- Panels (full-width, relative to .ea-header-wrap) --- */
.ea-mega__panel {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--ea-blue, #172d4d);
color: #fff;
border-top: 1px solid rgba(255, 255, 255, 0.12);
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25), 0 1px 4px rgba(0, 0, 0, 0.15);
opacity: 0;
transform: translateY(-6px);
transition: opacity 180ms ease, transform 180ms ease;
z-index: 9999;
}
.ea-mega__panel--visible {
opacity: 1;
transform: translateY(0);
}
/* --- Panel inner layout: grid 12 col alineado al sitio --- */
.ea-mega__inner {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--ea-gap, 1.25rem);
padding-inline: var(--ea-pad, 2rem);
padding-block: 1.25rem;
width: 100%;
box-sizing: border-box;
}
.ea-mega__columns {
grid-column: span 9;
display: flex;
gap: 0;
}
.ea-mega__col {
flex: 1;
min-width: 0;
padding: 0 1rem;
}
.ea-mega__col:first-child {
padding-left: 0;
}
.ea-mega__col:last-child {
padding-right: 0;
}
/* Separador vertical entre columnas */
.ea-mega__col + .ea-mega__col {
border-left: 1px solid var(--wp--preset--color--border, #e0e0e0);
}
.ea-mega__aside {
grid-column: span 3;
padding: 1rem 1.25rem;
background: var(--wp--preset--color--surface, #f5f5f5);
border-left: 1px solid var(--wp--preset--color--border, #e0e0e0);
}
/* --- Labels (h3 group headings) --- */
.ea-mega__label {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--wp--preset--color--secondary, #555);
margin: 0 0 0.5rem;
padding: 0;
}
/* --- Menu items --- */
.ea-mega__item {
display: block;
text-decoration: none;
padding: 0.4rem 0;
color: inherit;
transition: color 120ms ease;
}
.ea-mega__item:hover {
color: var(--wp--preset--color--secondary, #555);
}
.ea-mega__item strong {
display: block;
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.3;
color: inherit;
}
.ea-mega__item-eyebrow {
display: block;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #999;
margin-bottom: 0.15rem;
}
.ea-mega__item-desc {
display: block;
font-size: 0.8125rem;
color: #888;
line-height: 1.4;
margin-top: 0.1rem;
font-weight: 400;
}
/* Columna destacada dentro del panel Publicaciones — Diálogos Estratégicos */
/* Integrada al look del mega-menu, sin card sobresaliente. */
.ea-mega__featured-card {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.4rem 0;
text-decoration: none;
color: inherit;
transition: color 120ms ease;
}
.ea-mega__featured-card:hover {
color: rgba(255, 255, 255, 0.78);
text-decoration: none;
}
.ea-mega__featured-card__eyebrow {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #E59421;
}
.ea-mega__featured-card__title {
display: block;
color: #fff;
margin: 0;
}
.ea-mega__featured-card__desc {
display: block;
font-size: 0.8125rem;
line-height: 1.5;
color: rgba(255, 255, 255, 0.7);
margin-top: 0.15rem;
}
.ea-mega__featured-card__cta {
display: inline-block;
margin-top: 0.4rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #E59421;
}
.ea-mega__featured-card:hover .ea-mega__featured-card__cta {
color: #F0AB47;
}
/* --- Featured card (aside) --- */
.ea-mega__featured {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.ea-mega__feat-card {
display: flex;
flex-direction: column;
gap: 0.35rem;
text-decoration: none;
color: inherit;
transition: opacity 150ms ease;
}
.ea-mega__feat-card:hover {
opacity: 0.8;
}
.ea-mega__feat-img {
border-radius: 4px;
overflow: hidden;
aspect-ratio: 16 / 9;
background: #e8e8e8;
}
.ea-mega__feat-img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.ea-mega__feat-placeholder {
width: 100%;
height: 100%;
background: #e8e8e8;
}
.ea-mega__feat-title {
color: var(--wp--preset--color--foreground, #1a1a1a);
}
.ea-mega__feat-date {
font-size: 0.8125rem;
color: #999;
}
/* --- Contact aside (Sobre EA panel) --- */
.ea-mega__contact-email {
display: block;
font-size: 0.9375rem;
font-weight: 500;
color: var(--wp--preset--color--foreground, #1a1a1a);
margin-bottom: 0.75rem;
}
.ea-mega__contact-social {
display: flex;
gap: 0.75rem;
margin-bottom: 1rem;
}
.ea-mega__contact-social a {
font-size: 0.875rem;
color: var(--wp--preset--color--secondary, #555);
text-decoration: none;
transition: color 120ms ease;
}
.ea-mega__contact-social a:hover {
color: var(--wp--preset--color--foreground, #1a1a1a);
}
.ea-mega__contact-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1.25rem;
background: var(--wp--preset--color--foreground, #1a1a1a);
color: #fff;
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
border-radius: 4px;
transition: background 150ms ease;
}
.ea-mega__contact-btn:hover {
background: var(--wp--preset--color--secondary, #555);
color: #fff;
}
/* --- Tag pills inside Publicaciones panel --- */
.ea-mega__columns--tags {
align-items: flex-start;
}
.ea-mega__tag-group {
margin-bottom: 1rem;
}
.ea-mega__tag-group-label {
font-size: 0.5625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--wp--preset--color--secondary, #9ca3af);
margin: 0 0 0.35rem;
}
.ea-mega__tag-pills {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}
.ea-mega__tag-pill {
display: inline-flex;
align-items: center;
gap: 0.2rem;
padding: 0.15rem 0.45rem;
border: 1px solid var(--wp--preset--color--border, #d1d5db);
border-radius: 9999px;
font-size: 0.75rem;
color: var(--wp--preset--color--foreground, #111);
text-decoration: none;
background: #fff;
white-space: nowrap;
transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ea-mega__tag-pill:hover {
border-color: var(--wp--preset--color--primary, #c2185b);
color: var(--wp--preset--color--primary, #c2185b);
}
.ea-mega__tag-count {
font-size: 0.5625rem;
opacity: 0.55;
margin-left: 0.1rem;
}
/* Full-width inner layout (no aside) */
.ea-mega__inner--full {
display: grid;
grid-template-columns: 1fr;
padding-inline: var(--ea-pad, 2rem);
padding-block: 1.25rem;
width: 100%;
box-sizing: border-box;
}
.ea-mega__inner--full .ea-mega__columns {
grid-column: 1 / -1;
}
/* 4-column layout for Programas */
.ea-mega__columns--4col {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.ea-mega__columns--4col .ea-mega__col {
padding: 0 1.25rem;
}
.ea-mega__columns--4col .ea-mega__col:first-child {
padding-left: 0;
}
.ea-mega__columns--4col .ea-mega__col:last-child {
padding-right: 0;
}
/* 5-column layout for Programas */
.ea-mega__columns--5col {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
}
.ea-mega__columns--5col .ea-mega__col {
padding: 0 1rem;
}
.ea-mega__columns--5col .ea-mega__col:first-child {
padding-left: 0;
}
.ea-mega__columns--5col .ea-mega__col:last-child {
padding-right: 0;
}
/* 3-column layout for Sobre EA */
.ea-mega__columns--3col {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
}
.ea-mega__columns--3col .ea-mega__col {
padding: 0 1.25rem;
}
.ea-mega__columns--3col .ea-mega__col:first-child {
padding-left: 0;
}
.ea-mega__columns--3col .ea-mega__col:last-child {
padding-right: 0;
}
/* --- Backdrop on body --- */
body.ea-mega-open::before {
content: "";
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.08);
z-index: 9980;
pointer-events: none;
}
/* --- Desktop / Mobile toggle --- */
@media (min-width: 768px) {
.ea-mobile-nav { display: none !important; }
}
@media (max-width: 767px) {
.ea-mega { display: none; }
.ea-header-bar {
display: flex !important;
justify-content: space-between;
}
}
/* --- Mega menú: overrides azul/blanco --- */
.ea-mega__panel,
.ea-mega__panel * {
color: #fff;
}
.ea-mega__col + .ea-mega__col {
border-left-color: rgba(255, 255, 255, 0.15) !important;
}
.ea-mega__aside {
background: rgba(0, 0, 0, 0.18) !important;
border-left-color: rgba(255, 255, 255, 0.15) !important;
}
.ea-mega__label,
.ea-mega__tag-group-label {
color: rgba(255, 255, 255, 0.6) !important;
}
.ea-mega__item {
color: #fff;
}
.ea-mega__item:hover,
.ea-mega__item:hover strong {
color: rgba(255, 255, 255, 0.7) !important;
}
.ea-mega__item strong {
color: #fff;
}
.ea-mega__item-eyebrow,
.ea-mega__item-desc,
.ea-mega__feat-date {
color: rgba(255, 255, 255, 0.65) !important;
}
.ea-mega__feat-title,
.ea-mega__contact-email {
color: #fff !important;
}
.ea-mega__feat-img,
.ea-mega__feat-placeholder {
background: rgba(255, 255, 255, 0.08);
}
.ea-mega__contact-social a {
color: rgba(255, 255, 255, 0.75);
}
.ea-mega__contact-social a:hover {
color: #fff;
}
.ea-mega__contact-btn {
background: #fff !important;
color: var(--ea-blue, #172d4d) !important;
}
.ea-mega__contact-btn:hover {
background: rgba(255, 255, 255, 0.85) !important;
color: var(--ea-blue, #172d4d) !important;
}
.ea-mega__tag-pill {
background: transparent !important;
border-color: rgba(255, 255, 255, 0.3) !important;
color: #fff !important;
}
.ea-mega__tag-pill:hover {
background: rgba(255, 255, 255, 0.1) !important;
border-color: rgba(255, 255, 255, 0.6) !important;
color: #fff !important;
}
.ea-mega__tag-count {
color: rgba(255, 255, 255, 0.55);
}
/* Featured card "Diálogos Estratégicos": overrides para que los acentos
(eyebrow + CTA) queden dorados sobre fondo azul, y no se los coma
el override general .ea-mega__panel * { color:#fff } */
.ea-mega__panel .ea-mega__featured-card__eyebrow,
.ea-mega__panel .ea-mega__featured-card__cta {
color: #E59421 !important;
}
.ea-mega__panel .ea-mega__featured-card:hover .ea-mega__featured-card__cta {
color: #F0AB47 !important;
}
.ea-mega__panel .ea-mega__featured-card__desc {
color: rgba(255, 255, 255, 0.72) !important;
}
.ea-mega__panel .ea-mega__featured-card:hover {
color: rgba(255, 255, 255, 0.82) !important;
}
/* Altura uniforme de todos los paneles: el JS calcula el máximo y setea --ea-mega-panel-min-h */
.ea-mega__panel {
min-height: var(--ea-mega-panel-min-h, auto);
}
.ea-mega__inner,
.ea-mega__inner--full {
min-height: var(--ea-mega-panel-min-h, auto);
box-sizing: border-box;
}
/* ==========================================================================
3. Accessibility
========================================================================== */
/* Skip link */
.skip-link {
position: absolute;
top: -100%;
left: 50%;
transform: translateX(-50%);
z-index: 100000;
padding: 0.75rem 1.5rem;
background: var(--ea-focus-color);
color: #fff;
font-weight: 600;
font-size: 0.875rem;
text-decoration: none;
border-radius: 0 0 var(--ea-radius-md) var(--ea-radius-md);
transition: top var(--ea-transition);
}
.skip-link:focus {
top: 0;
outline: 3px solid var(--ea-focus-color);
outline-offset: 2px;
}
/* Screen reader text */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
word-wrap: normal !important;
}
.screen-reader-text:focus {
clip: auto !important;
clip-path: none;
display: block;
height: auto;
width: auto;
position: static;
overflow: visible;
}
/* Focus indicators */
:focus-visible {
outline: 3px solid var(--ea-focus-color);
outline-offset: 2px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
outline: none;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ==========================================================================
4. Layout: Header (grid)
========================================================================== */
.ea-site-header .wp-block-group.alignwide {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
}
@container header (min-width: 45rem) {
.ea-site-header .wp-block-group.alignwide {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
}
}
/* ==========================================================================
6. Layout: Archive/Home — Featured + Grid
========================================================================== */
/* Featured post: full-width hero style */
.ea-featured-query .wp-block-post-template {
display: block;
}
.ea-featured-card {
display: block;
}
@container main-content (min-width: 45rem) {
.ea-featured-card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--wp--preset--spacing--50, 2rem);
align-items: center;
}
}
.ea-featured-card .wp-block-post-featured-image {
border-radius: var(--ea-radius-sm);
overflow: hidden;
}
.ea-featured-card .wp-block-post-featured-image img {
width: 100%;
height: auto;
display: block;
}
/* Post grid: auto-fill responsive */
.ea-post-grid .wp-block-post-template {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
gap: var(--wp--preset--spacing--50, 2rem);
}
/* Post card styling within grid */
.ea-post-card {
display: flex;
flex-direction: column;
gap: 0.5rem;
container-type: inline-size;
}
.ea-post-card .wp-block-post-featured-image {
border-radius: var(--ea-radius-sm);
overflow: hidden;
}
.ea-post-card .wp-block-post-featured-image img {
width: 100%;
height: auto;
display: block;
}
/* Hide featured query on paginated pages */
body.paged .ea-featured-query {
display: none;
}
/* ==========================================================================
6a-home. Layout: Home — Blog articles (izq, 3fr) + Podcast sidebar (der, 1fr)
========================================================================== */
.ea-home-posts {
display: grid;
grid-template-columns: 1fr;
gap: var(--wp--preset--spacing--50, 2rem);
}
@media (min-width: 768px) {
.ea-home-posts {
grid-template-columns: 3fr 1fr;
gap: var(--wp--preset--spacing--60, 3rem);
align-items: start;
}
}
/* Heading "Publicaciones recientes" dentro del área de contenido */
.ea-home-section-title {
border-bottom: 2px solid #1c1c1a;
padding-bottom: 0.5rem;
margin-bottom: var(--wp--preset--spacing--40, 1.5rem) !important;
margin-top: 0 !important;
}
/* Podcast sidebar */
.ea-home-posts__sidebar .wp-block-heading {
font-size: clamp(1.1rem, 1.4vw, 1.35rem);
font-weight: 700;
line-height: 1.2;
border-bottom: 2px solid #1c1c1a;
padding-bottom: 0.5rem;
margin: 0 0 0.5rem;
}
.ea-home-posts__sidebar p {
font-size: 0.875rem;
line-height: 1.5;
color: #6a6a64;
margin: 0 0 var(--wp--preset--spacing--40, 1.5rem);
}
.ea-home-sidebar-more {
margin-top: var(--wp--preset--spacing--40, 1.5rem) !important;
}
.ea-home-sidebar-more a {
font-size: 0.875rem;
font-weight: 600;
color: #1c1c1a;
text-decoration: none;
border-bottom: 1px solid #1c1c1a;
padding-bottom: 1px;
}
.ea-home-sidebar-more a:hover {
opacity: 0.65;
}
/* Grid de cards del blog (publicaciones recientes) */
.ea-home-posts__content .wp-block-post-template {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
gap: var(--wp--preset--spacing--50, 2rem);
}
/* ==========================================================================
6a-inv. Layout: Home — Investigaciones (full width, grid 3 cols)
========================================================================== */
.ea-home-investigations__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
border-bottom: 2px solid #1c1c1a;
padding-bottom: 0.75rem;
margin-bottom: var(--wp--preset--spacing--50, 2rem);
flex-wrap: wrap;
}
.ea-home-investigations__title {
line-height: 1.2;
margin: 0 0 0.25rem;
}
.ea-home-investigations__desc {
font-size: 0.875rem;
color: #6a6a64;
margin: 0;
line-height: 1.4;
}
.ea-home-investigations__more {
font-size: 0.875rem;
font-weight: 600;
color: #1c1c1a;
text-decoration: none;
border-bottom: 1px solid #1c1c1a;
padding-bottom: 1px;
white-space: nowrap;
flex-shrink: 0;
}
.ea-home-investigations__more:hover {
opacity: 0.65;
}
.ea-home-investigations__grid.wp-block-post-template,
.ea-home-investigations .wp-block-post-template {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
gap: var(--wp--preset--spacing--50, 2rem);
}
.ea-home-investigations .wp-block-post-featured-image {
border-radius: var(--ea-radius-sm, 4px);
overflow: hidden;
margin-bottom: 0.5rem;
aspect-ratio: 3 / 2;
}
.ea-home-investigations .wp-block-post-featured-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
.ea-home-investigations .wp-block-post-title {
line-height: 1.3;
margin-bottom: 0.35rem;
}
/* Tipografía de los cards del home */
.ea-home-posts__content .wp-block-post-featured-image {
border-radius: var(--ea-radius-sm, 4px);
overflow: hidden;
margin-bottom: 0.5rem;
}
.ea-home-posts__content .wp-block-post-featured-image img {
width: 100%;
height: auto;
display: block;
}
.ea-home-posts__content .wp-block-post-terms {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.03em;
margin-bottom: 0.25rem;
}
.ea-home-posts__content .wp-block-post-title {
line-height: 1.3;
margin-bottom: 0.35rem;
}
.ea-home-posts__content .wp-block-post-date {
font-size: 0.8125rem;
color: #6a6a64;
}
/* ==========================================================================
6a-art. Layout: Home — Artículos (cards grandes + lista compacta)
========================================================================== */
/* Cards grandes: primeros 3 */
.ea-articles-featured {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
gap: var(--wp--preset--spacing--50, 2rem);
margin-bottom: var(--wp--preset--spacing--50, 2rem);
}
.ea-articles-card__img {
display: block;
border-radius: var(--ea-radius-sm, 4px);
overflow: hidden;
margin-bottom: 1rem;
background: #f0f0ee;
}
.ea-articles-card__img img {
width: 100%;
height: auto;
display: block;
}
.ea-articles-card__img--empty {
background: #f0f0ee;
aspect-ratio: 3 / 2;
border-radius: var(--ea-radius-sm, 4px);
margin-bottom: 1rem;
}
.ea-articles-card__cat {
margin: 0 0 0.25rem;
}
.ea-articles-cat {
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #6a6a64;
text-decoration: none;
}
.ea-articles-cat:hover {
text-decoration: underline;
}
.ea-articles-card__title {
margin: 0;
}
.ea-articles-card__title a {
color: inherit;
text-decoration: none;
}
.ea-articles-card__title a:hover {
text-decoration: none;
}
.ea-articles-card__date {
font-size: 0.8125rem;
color: #6a6a64;
display: block;
}
/* Lista compacta: posts 4+ */
.ea-articles-list {
border-top: 1px solid #e0e0e0;
}
.ea-articles-row {
display: grid;
grid-template-columns: 4.5rem 1fr;
gap: 1rem;
align-items: center;
padding: 0.85rem 0;
border-bottom: 1px solid #e0e0e0;
}
.ea-articles-row__date {
font-size: 0.8rem;
color: #6a6a64;
line-height: 1.3;
white-space: nowrap;
}
/* Meta global: misma medida y márgenes en single + todas las cards.
No agregar overrides por tipo de card — usar esta única regla. */
.ea-articles-row__thumb {
display: block;
width: 4.5rem;
height: 3.5rem;
overflow: hidden;
border-radius: 2px;
flex-shrink: 0;
}
.ea-articles-row__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ea-articles-row__thumb--empty {
display: block;
width: 4.5rem;
height: 3.5rem;
background: #f0f0ee;
border-radius: 2px;
}
.ea-articles-row__title {
color: #1c1c1a;
text-decoration: none;
display: block;
margin: 0;
}
.ea-articles-row__title:hover {
text-decoration: none;
}
.ea-articles-row .ea-articles-cat {
font-size: 0.72rem;
}
/* Home — split 8/4 dentro de Publicaciones recientes
(1 hero grande izq · 3 filas chicas der, proporción 12 cols) */
.ea-articles-home-split {
display: grid;
grid-template-columns: 1fr;
gap: var(--wp--preset--spacing--50, 2rem);
}
@media (min-width: 768px) {
.ea-articles-home-split {
grid-template-columns: 6fr 6fr;
gap: var(--wp--preset--spacing--60, 3rem);
align-items: start;
}
}
.ea-articles-home-split__hero {
min-width: 0;
}
.ea-articles-home-split__list {
display: flex;
flex-direction: column;
border-top: 1px solid #e0e0e0;
}
.ea-articles-home-split__list .ea-articles-row {
border-bottom: 1px solid #e0e0e0;
grid-template-columns: 10rem 1fr;
gap: 1.25rem;
padding: 1rem 0;
align-items: start;
}
.ea-articles-home-split__list .ea-articles-row__thumb {
width: 10rem;
height: auto;
border-radius: var(--ea-radius-sm, 4px);
overflow: hidden;
align-self: start;
}
.ea-articles-home-split__list .ea-articles-row__thumb img {
width: 100%;
height: auto;
object-fit: initial;
display: block;
}
/* Hero card grande: ratio nativo de la imagen, sin recorte */
.ea-articles-card--hero .ea-articles-card__img {
margin-bottom: 1rem;
border-radius: var(--ea-radius-sm, 4px);
overflow: hidden;
display: block;
background: #f0f0ee;
}
.ea-articles-card--hero .ea-articles-card__img--empty {
aspect-ratio: 3 / 2;
margin-bottom: 1rem;
border-radius: var(--ea-radius-sm, 4px);
}
.ea-articles-card--hero .ea-articles-card__img img {
width: 100%;
height: auto;
display: block;
}
.ea-articles-card--hero .ea-articles-card__title,
.ea-articles-home-split__list .wp-block-post-title {
margin: 0;
}
/* ==========================================================================
6b. Layout: Home — Pilares editoriales (grid 12 columnas)
========================================================================== */
/*
* Grid de pilares: cards estilo suizo editorial sin imágenes.
* Mobile-first: 1 columna → 2 → 3 → 5 en pantalla completa.
* Cada card: label tipo + descripción + título grande + flecha.
*/
.ea-pillars-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0;
width: 100%;
border-top: 2px solid #1c1c1a;
}
/* Tablet: 2 cols */
@media (min-width: 700px) {
.ea-pillars-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Desktop: 3 cols total. Intro ocupa col 1 todas las filas. 5 cards llenan cols 2-3. */
@media (min-width: 1024px) {
.ea-pillars-grid {
grid-template-columns: 1.2fr 1fr 1fr;
}
.ea-pillar-card--intro {
grid-column: 1;
grid-row: 1 / -1;
}
}
.ea-pillar-card {
display: flex;
flex-direction: column;
gap: 0.5rem;
background: transparent;
border-right: 1px solid #d8d8d4;
padding: 1.5rem 1.5rem 1.5rem;
min-height: 220px;
text-decoration: none;
color: inherit;
transition: background 0.18s ease;
position: relative;
}
/* Borders mobile (1 col) */
.ea-pillar-card {
border-right: none;
border-bottom: 1px solid #d8d8d4;
}
.ea-pillar-card:last-child {
border-bottom: none;
}
/* Tablet (2 cols) */
@media (min-width: 700px) {
.ea-pillar-card {
border-right: 1px solid #d8d8d4;
border-bottom: 1px solid #d8d8d4;
}
.ea-pillar-card:nth-child(2n) {
border-right: none;
}
.ea-pillar-card:nth-last-child(-n+2) {
border-bottom: none;
}
}
/* Desktop (3 cols con intro spanning col 1) */
@media (min-width: 1024px) {
.ea-pillar-card {
border-right: 1px solid #d8d8d4;
border-bottom: 1px solid #d8d8d4;
}
/* Resetear borders aplicados en mobile/tablet */
.ea-pillar-card:nth-child(2n) {
border-right: 1px solid #d8d8d4;
}
/* Intro: borders solo derecho */
.ea-pillar-card--intro {
border-right: 1px solid #d8d8d4;
border-bottom: none;
}
/* Cards (no intro): última col → sin border-right */
.ea-pillar-card:not(.ea-pillar-card--intro):nth-of-type(odd) {
border-right: 1px solid #d8d8d4;
}
.ea-pillar-card:not(.ea-pillar-card--intro):nth-of-type(even) {
border-right: none;
}
/* Últimas 2 cards: sin border-bottom */
.ea-pillar-card:nth-last-child(-n+2) {
border-bottom: none;
}
}
/* Card introductoria: sin hover, color editorial */
.ea-pillar-card--intro {
background: var(--ea-blue, #172d4d);
color: #fff;
}
.ea-pillar-card--intro .ea-pillar-title {
color: #fff;
}
.ea-pillar-card--intro .ea-pillar-desc {
color: rgba(255, 255, 255, 0.78);
}
/* Hover: sólo en cards con link */
a.ea-pillar-card:hover {
background: #f7f6f2;
}
a.ea-pillar-card:hover .ea-pillar-arrow svg {
stroke: #1c1c1a;
}
/* Heading principal (H1) por arriba de la línea superior del grid */
.ea-pillars-heading {
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 800;
line-height: 1.0;
letter-spacing: -0.035em;
color: #1c1c1a;
margin: 0 0 1.25rem;
padding-inline: var(--ea-pad, 2rem);
}
/* Párrafo introductorio — debajo del H1 en el home */
.ea-home-intro-lead {
font-size: clamp(1rem, 1.25vw, 1.25rem);
line-height: 1.55;
color: #4a4a44;
max-width: 72ch;
margin: 0 0 var(--wp--preset--spacing--50, 2rem);
padding-inline: var(--ea-pad, 2rem);
}
/* Título (arriba) */
.ea-pillar-title {
color: #1c1c1a;
margin: 0;
}
/* Descripción (debajo del título) — tamaño global del body */
.ea-pillar-desc {
font-size: 1rem;
line-height: 1.6;
color: #6a6a64;
margin: 0;
}
/* Flecha: esquina inferior derecha */
.ea-pillar-arrow {
margin-top: auto;
align-self: flex-end;
}
.ea-pillar-arrow svg {
width: 13px;
height: 13px;
fill: none;
stroke: #9a9a94;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke 0.18s ease;
}
/*
* Programas / Observatorios — banda navy estilo think-tank.
* Intro a la izquierda + grid de cards con media circular a la derecha.
* Mobile-first: 1 col → 2 cols → grid completo (intro 1/4 + cards 3/4 con 3 cols).
*/
.ea-programs {
background: #0e2444;
color: #fff;
padding: 4rem 0 4.5rem;
margin-inline: calc(-1 * var(--ea-pad, 2rem));
}
.ea-programs__inner {
padding-inline: var(--ea-pad, 2rem);
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
}
@media (min-width: 700px) {
.ea-programs {
padding: 5rem 0 5.5rem;
}
.ea-programs__inner {
grid-template-columns: repeat(2, 1fr);
gap: 2.5rem 2rem;
}
}
@media (min-width: 1100px) {
.ea-programs__inner {
grid-template-columns: repeat(3, 1fr);
gap: 3rem 2.25rem;
}
}
/* Intro: ocupa una celda del grid (1 col en mobile, primera col en desktop) */
.ea-programs__intro {
align-self: start;
}
.ea-programs__title {
font-size: clamp(2rem, 3.6vw, 3rem);
line-height: 1.05;
letter-spacing: -0.025em;
font-weight: 800;
color: #fff;
margin: 0 0 1rem;
}
.ea-programs__lead {
font-size: clamp(0.9375rem, 1vw, 1.0625rem);
line-height: 1.6;
color: rgba(255, 255, 255, 0.78);
margin: 0 0 1.75rem;
}
.ea-programs__cta {
display: inline-block;
background: #ea7a1c;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 0.9375rem;
letter-spacing: 0.005em;
padding: 0.875rem 1.25rem;
transition: background 0.18s ease;
}
.ea-programs__cta:hover,
.ea-programs__cta:focus-visible {
background: #c9651a;
color: #fff;
}
.ea-program-card {
margin: 0;
}
.ea-program-card__link {
display: flex;
flex-direction: column;
gap: 1rem;
text-decoration: none;
color: inherit;
height: 100%;
}
/* Media circular (placeholder con gradient + ícono; reemplazable por imagen real) */
.ea-program-card__media {
width: 100%;
max-width: 220px;
aspect-ratio: 1 / 1;
border-radius: 50%;
display: grid;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.04);
overflow: hidden;
transition: transform 0.25s ease, border-color 0.25s ease;
}
.ea-program-card__media svg {
width: 44%;
height: 44%;
}
.ea-program-card__media[data-program="gobernanza"] {
background: radial-gradient(circle at 30% 30%, rgba(214, 182, 90, 0.32), rgba(214, 182, 90, 0.06) 70%);
color: #e7c66a;
}
.ea-program-card__media[data-program="china"] {
background: radial-gradient(circle at 30% 30%, rgba(216, 99, 79, 0.32), rgba(216, 99, 79, 0.06) 70%);
color: #e88572;
}
.ea-program-card__media[data-program="rusia"] {
background: radial-gradient(circle at 30% 30%, rgba(107, 166, 219, 0.32), rgba(107, 166, 219, 0.06) 70%);
color: #8fbfe8;
}
.ea-program-card__media[data-program="seguridad"] {
background: radial-gradient(circle at 30% 30%, rgba(123, 201, 156, 0.32), rgba(123, 201, 156, 0.06) 70%);
color: #94d6ad;
}
.ea-program-card__media[data-program="publico"] {
background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.04) 70%);
color: #f1f1ee;
}
/* Si más adelante se agrega una imagen real (background-image inline o ![]()
), prevalece sobre el gradient */
.ea-program-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}
.ea-program-card__title {
font-size: clamp(1.125rem, 1.4vw, 1.375rem);
line-height: 1.2;
letter-spacing: -0.01em;
font-weight: 700;
color: #fff;
margin: 0;
}
.ea-program-card__desc {
font-size: 0.9375rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.72);
margin: 0;
}
.ea-program-card__more {
margin-top: auto;
padding-top: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.16);
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
color: #fff;
letter-spacing: 0.005em;
}
.ea-program-card__more svg {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 0.2s ease;
}
.ea-program-card__link:hover .ea-program-card__media,
.ea-program-card__link:focus-visible .ea-program-card__media {
transform: scale(1.03);
border-color: rgba(255, 255, 255, 0.32);
}
.ea-program-card__link:hover .ea-program-card__more svg,
.ea-program-card__link:focus-visible .ea-program-card__more svg {
transform: translateX(4px);
}
.ea-program-card__link:focus-visible {
outline: 2px solid #ea7a1c;
outline-offset: 6px;
}
/* Hero editorial: H1 + bajada en columnas */
.ea-hero-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
align-items: end;
padding-bottom: 2.5rem;
}
/* Hero home — descripción alineada al fondo de la fila */
.ea-home-hero.wp-block-group {
align-items: end !important;
}
/* Hero: mobile — apilado */
@media (max-width: 599px) {
.ea-home-hero > .wp-block-group {
grid-column: span 12 !important;
}
}
/* Hero: tablet / desktop — título 3col, bajada 3col */
@media (min-width: 600px) {
.ea-home-hero > .wp-block-group:first-child {
grid-column: span 3 !important;
}
.ea-hero-desc-col {
grid-column: span 3 !important;
}
}
@media (min-width: 700px) {
.ea-hero-grid {
grid-template-columns: 5fr 7fr;
gap: 4rem;
}
}
.ea-hero-title {
font-size: clamp(2.25rem, 5vw, 4rem);
font-weight: 800;
line-height: 1.0;
letter-spacing: -0.035em;
color: #1c1c1a;
margin: 0;
}
.ea-hero-desc {
font-size: clamp(0.9rem, 1.1vw, 1.05rem);
line-height: 1.7;
color: #4a4a44;
margin: 0;
}
/* Investigaciones — imagen completa sin recorte (portadas de informes) */
.ea-home-inv-section .wp-block-post-featured-image {
overflow: hidden;
border-radius: 4px 4px 0 0;
}
.ea-home-inv-section .wp-block-post-featured-image img {
object-fit: contain !important;
background-color: #172E4D;
width: 100%;
height: 100%;
display: block;
}
/* Cards de Investigaciones: altura uniforme ──────────────────────────── */
/* 1. Grid con filas que se ajustan al item más alto (stretch por defecto) */
.ea-home-inv-section .wp-block-post-template.is-layout-grid,
.ea-home-inv-section ul.wp-block-post-template {
align-items: stretch;
}
/* 2. Cada es flex-column para que la card interna llene su alto */
.ea-home-inv-section ul.wp-block-post-template > li {
display: flex;
flex-direction: column;
}
/* 3. La card ocupa todo el alto del y se vuelve flex-column */
.ea-home-inv-section ul.wp-block-post-template > li > .wp-block-group {
flex: 1;
display: flex;
flex-direction: column;
}
/* 4. El bloque de texto interior se estira; el título empuja la fecha al fondo */
.ea-home-inv-section ul.wp-block-post-template > li > .wp-block-group > .wp-block-group {
flex: 1;
display: flex;
flex-direction: column;
}
.ea-home-inv-section ul.wp-block-post-template .wp-block-post-title {
flex: 1;
}
.ea-home-inv-section .wp-block-read-more {
background: none !important;
color: var(--wp--preset--color--foreground, #1c1c1a) !important;
border: none;
border-radius: 0;
padding: 0;
display: inline;
font-size: 0.875rem;
font-weight: 400;
text-transform: none;
letter-spacing: normal;
text-decoration: none;
}
.ea-home-inv-section .wp-block-read-more:hover {
background: none !important;
text-decoration: underline;
}
@media (max-width: 767px) {
.ea-home-inv-section .wp-block-post-template.is-layout-grid,
.ea-home-inv-section ul.wp-block-post-template {
grid-template-columns: 1fr !important;
grid-auto-rows: auto !important;
}
}
/* ==========================================================================
6c. Layout: Post rows — imagen + contenido (home y archive)
========================================================================== */
/*
* Sobreescribe wp:columns con grid-template-columns: 200px 1fr.
* Más estable que flex-basis: no colapsa con títulos largos.
* En pantallas pequeñas: columna única (imagen arriba, texto abajo).
*/
.ea-post-row {
display: grid !important;
grid-template-columns: 2fr 7fr;
gap: var(--wp--preset--spacing--40, 1.5rem);
align-items: start;
min-width: 0;
}
.ea-post-row > .wp-block-column {
flex-basis: unset !important;
width: auto !important;
min-width: 0;
overflow: hidden;
}
/* Imagen ocupa el 100% del ancho de su columna — neutraliza ancho fijo del figure */
.ea-post-row .wp-block-post-featured-image,
.ea-post-row .wp-block-post-featured-image figure {
width: 100% !important;
max-width: 100% !important;
}
.ea-post-row .wp-block-post-featured-image a,
.ea-post-row .wp-block-post-featured-image img {
display: block;
width: 100% !important;
max-width: 100% !important;
height: auto;
}
@container main-content (max-width: 34rem) {
.ea-post-row {
grid-template-columns: 1fr;
}
}
/* Separador entre post rows: solo 1 línea gris, sin doble borde */
.wp-block-post-template .wp-block-separator {
border: none;
height: 1px;
background: var(--ea-border, #e0e0e0);
opacity: 1;
}
/* ==========================================================================
6d. Layout: Featured card — variante border-r (estilo editorial)
========================================================================== */
/*
* En lugar de gap entre las dos columnas, usa border-right en la primera
* celda. Aplicar .ea-featured-card--editorial cuando se quiera este estilo.
*/
.ea-featured-card--editorial {
gap: 0;
}
.ea-featured-card--editorial .wp-block-post-featured-image {
padding-right: var(--wp--preset--spacing--50, 2rem);
border-right: 1px solid var(--ea-border);
}
.ea-featured-card--editorial > *:last-child {
padding-left: var(--wp--preset--spacing--50, 2rem);
}
/* ==========================================================================
6e. Layout: Tag page — encabezado
========================================================================== */
.ea-category-eyebrow {
display: inline-block;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #999;
margin-bottom: 0.5rem;
}
.ea-category-desc {
font-size: 0.875rem;
line-height: 1.65;
color: #5a5a54;
margin: 0.75rem 0 0;
}
.ea-category-desc p {
margin: 0;
}
.ea-tag-page-header .wp-block-query-title {
font-size: var(--wp--preset--font-size--xx-large);
font-weight: 800;
line-height: 1.05;
margin: 0;
letter-spacing: -0.03em;
}
/* Módulo RPC — sidebar Observatorio China */
.ea-rpc-module {
margin-top: var(--wp--preset--spacing--30, 1rem);
padding-top: 0;
border-top: 0;
}
.ea-rpc-module__title {
color: #1c1c1a;
margin: 0 0 0.75rem;
}
.ea-rpc-module__desc {
font-size: 0.8125rem;
line-height: 1.65;
color: #5a5a54;
margin: 0 0 1rem;
}
.ea-rpc-module__btn {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
text-decoration: none;
color: var(--ea-blue, #172d4d);
border: 1px solid var(--ea-blue, #172d4d);
padding: 0.4rem 0.875rem;
border-radius: var(--ea-radius-md, 4px);
transition: background var(--ea-transition, 0.15s ease), color var(--ea-transition, 0.15s ease);
}
.ea-rpc-module__btn:hover {
background: var(--ea-blue, #172d4d);
color: #fff;
}
/* ==========================================================================
6f. Layout: Thematic Index — [ea_tag_thematic]
========================================================================== */
/*
* Cada sección = un programa (categoría).
* Desktop: 3 cols nombre del programa | 9 cols lista de posts.
* Mobile: apila verticalmente.
*
* Columnas de cada fila de post (dentro de las 9 cols del programa):
* 4rem fecha (M YYYY)
* 5rem imagen sello
* 1fr título
* 2rem flecha →
*/
.ea-theme-section {
display: grid;
grid-template-columns: 3fr 9fr;
column-gap: var(--ea-gap, 1.25rem);
padding-top: 1.75rem;
padding-bottom: 2.5rem;
align-items: start;
}
/* Columna izquierda: nombre del programa */
.ea-theme-meta {
padding-right: var(--wp--preset--spacing--40, 1.5rem);
}
.ea-theme-title {
margin: 0 0 0.35rem;
}
.ea-theme-title a {
text-decoration: none;
color: inherit;
}
.ea-theme-title a:hover {
text-decoration: none;
}
.ea-theme-count {
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--secondary, #555);
margin: 0 0 0.75rem;
}
.ea-theme-viewall {
display: inline-block;
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--foreground, #1a1a1a);
text-decoration: none;
border-bottom: 1px solid currentColor;
line-height: 1.2;
}
.ea-theme-viewall:hover {
opacity: 0.6;
}
/* Columna derecha: lista de posts */
.ea-theme-posts {
min-width: 0;
}
/*
* Cada fila: fecha | imagen | título | flecha
* grid-template-columns: 4rem 5rem 1fr 1.5rem
*/
.ea-thematic-row {
display: grid;
grid-template-columns: 4rem 5rem 1fr 1.5rem;
column-gap: 1rem;
padding-block: 0.9rem;
border-bottom: 1px solid var(--ea-border, #e0e0e0);
align-items: center;
}
.ea-theme-posts .ea-thematic-row:first-child {
border-top: none;
}
/* Fecha */
.ea-thematic-row__date {
font-size: 0.75rem;
color: var(--wp--preset--color--secondary, #555);
white-space: nowrap;
line-height: 1.2;
}
/* Imagen sello */
.ea-thematic-row__img {
display: block;
width: 100%;
height: 4rem;
overflow: hidden;
}
.ea-thematic-row__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ea-thematic-row__img--empty {
background: var(--wp--preset--color--surface, #f5f5f5);
}
/* Título */
.ea-thematic-row__title {
font-size: var(--wp--preset--font-size--medium);
font-weight: 600;
line-height: 1.3;
text-decoration: none;
color: inherit;
min-width: 0;
}
.ea-thematic-row__title:hover {
text-decoration: none;
}
/* Flecha */
.ea-thematic-row__arrow {
font-size: 1rem;
color: var(--wp--preset--color--secondary, #555);
text-decoration: none;
text-align: right;
line-height: 1;
}
.ea-thematic-row__arrow:hover {
color: var(--wp--preset--color--foreground, #1a1a1a);
}
/* Variante eventos: la última columna deja lugar al botón "IR AL EVENTO". */
.ea-thematic-row--event {
grid-template-columns: 4rem 5rem 1fr auto;
}
/* Mobile: apilar sección y simplificar fila */
@media (max-width: 767px) {
.ea-theme-section {
grid-template-columns: 1fr;
gap: 1rem 0;
padding-bottom: 2rem;
}
.ea-theme-meta {
padding-right: 0;
padding-bottom: 0.75rem;
}
.ea-thematic-row {
grid-template-columns: 5rem 1fr 1.25rem;
}
.ea-thematic-row--event {
grid-template-columns: 5rem 1fr auto;
}
/* Ocultar fecha en mobile para ganar espacio */
.ea-thematic-row__date {
display: none;
}
}
/* ==========================================================================
7. Layout: Footer (grid)
========================================================================== */
/* Forzar grid de 12 columnas en el footer — neutraliza WP is-layout-flow */
.ea-site-footer .ea-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--ea-gap, 1.25rem);
padding-inline: var(--ea-pad, 2rem);
align-items: start;
}
.ea-site-footer .ea-grid > * {
margin-block-start: 0;
margin-block-end: 0;
}
.ea-site-footer .ea-col-4 { grid-column: span 4; }
.ea-site-footer .ea-col-8 { grid-column: span 8; }
.ea-site-footer .ea-col-12 { grid-column: 1 / -1; }
@media (max-width: 767px) {
.ea-site-footer .ea-col-4,
.ea-site-footer .ea-col-8 {
grid-column: 1 / -1;
}
}
/* Tipografía y colores del footer (fondo navy #172E4D) */
.ea-site-footer { color: #ffffff; }
.ea-site-footer .wp-block-heading {
color: #ffffff;
margin: 0 0 1rem;
font-family: var(--wp--preset--font-family--heading, 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif);
font-weight: 400;
letter-spacing: 0.04em;
line-height: 1.1;
}
.ea-site-footer .ea-col-4 > .wp-block-heading {
font-size: 1.75rem;
text-transform: uppercase;
}
.ea-site-footer .ea-footer-nav-group .wp-block-heading {
font-size: 1.125rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.ea-site-footer p {
color: rgba(255, 255, 255, 0.78);
margin: 0;
font-family: var(--wp--preset--font-family--body, 'Geist', sans-serif);
font-size: 1rem;
line-height: 1.6;
}
.ea-site-footer .has-small-font-size {
font-size: 1rem;
}
.ea-footer-muted {
color: rgba(255, 255, 255, 0.7);
}
.ea-footer-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
font-family: var(--wp--preset--font-family--body, 'Geist', sans-serif);
}
.ea-footer-links li { margin: 0; }
.ea-footer-links a {
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
font-size: 1rem;
line-height: 1.5;
transition: color 0.15s;
}
.ea-footer-links a:hover {
color: #ffffff;
text-decoration: underline;
}
/* ==========================================================================
8. Components: Cards
========================================================================== */
/* Placeholder gris para posts sin imagen destacada */
.ea-thumb-placeholder {
margin: 0;
width: 100%;
aspect-ratio: 3 / 2;
background-color: #e8eaed;
border-radius: 6px;
}
/* Related posts grid */
.ea-related-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
gap: var(--wp--preset--spacing--40, 1.5rem);
}
.ea-card {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.ea-card-img {
border-radius: var(--ea-radius-sm);
display: block;
overflow: hidden;
}
.ea-card-img img,
.ea-card-img picture img {
width: 100%;
height: auto;
display: block;
}
.ea-card-cat {
font-size: var(--wp--preset--font-size--small, 0.8125rem);
color: var(--wp--preset--color--secondary, #6b7280);
}
.ea-card-cat a {
color: inherit;
text-decoration: none;
}
.ea-card-cat a:hover {
color: var(--wp--preset--color--foreground, #111);
}
.ea-card-title {
font-size: var(--wp--preset--font-size--medium, 1.0625rem);
font-weight: 600;
line-height: 1.3;
margin: 0;
}
.ea-card-title a {
color: inherit;
text-decoration: none;
}
.ea-card-title a:hover {
color: var(--wp--preset--color--primary, #c2185b);
}
.ea-card-meta {
font-size: var(--wp--preset--font-size--small, 0.8125rem);
color: var(--wp--preset--color--secondary, #6b7280);
display: flex;
flex-wrap: wrap;
gap: 0.35em;
align-items: center;
}
.ea-card-meta a {
color: inherit;
text-decoration: none;
}
/* Sidebar related */
.ea-sidebar-related .ea-sb-item {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding-bottom: var(--wp--preset--spacing--30, 0.75rem);
margin-bottom: var(--wp--preset--spacing--30, 0.75rem);
border-bottom: 1px solid var(--ea-border);
}
.ea-sidebar-related .ea-sb-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.ea-sidebar-related .ea-sb-img {
border-radius: var(--ea-radius-sm);
display: block;
overflow: hidden;
}
.ea-sidebar-related .ea-sb-img img,
.ea-sidebar-related .ea-sb-img picture img {
width: 100%;
height: auto;
display: block;
}
.ea-sidebar-related .ea-sb-title {
font-size: var(--wp--preset--font-size--small, 0.8125rem);
font-weight: 600;
line-height: 1.3;
margin: 0;
}
.ea-sidebar-related .ea-sb-title a {
color: inherit;
text-decoration: none;
}
.ea-sidebar-related .ea-sb-title a:hover {
color: var(--wp--preset--color--primary, #c2185b);
}
.ea-sidebar-related .ea-sb-date {
font-size: var(--wp--preset--font-size--small, 0.8125rem);
color: var(--wp--preset--color--secondary, #6b7280);
}
/* ==========================================================================
9. Components: Badges
========================================================================== */
.ea-category-badge {
display: inline-block;
padding: 0.15em 0.65em;
border-radius: var(--ea-radius-pill);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.025em;
line-height: 1.5;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
/* Badge colors via data-attribute */
.ea-category-badge[data-color="blue"] { background: #1e40af; }
.ea-category-badge[data-color="green"] { background: #15803d; }
.ea-category-badge[data-color="purple"] { background: #7c3aed; }
.ea-category-badge[data-color="orange"] { background: #c2410c; }
.ea-category-badge[data-color="teal"] { background: #0f766e; }
.ea-category-badge[data-color="red"] { background: #dc2626; }
.ea-category-badge[data-color="dark-blue"] { background: #1e3a5f; }
.ea-category-badge[data-color="violet"] { background: #6d28d9; }
.ea-category-badge[data-color="emerald"] { background: #047857; }
.ea-category-badge[data-color="gray"] { background: #6b7280; }
/* ==========================================================================
10. Components: Archive Filters
========================================================================== */
.ea-category-archive-page,
.elementor-element-eacatpg1 {
--ea-category-hero-blue: #172E4D;
--ea-category-hero-blue-dark: #0f223b;
--ea-category-hero-gold: #E1891D;
--ea-category-hero-ink: #172033;
font-family: "Geist", sans-serif;
color: var(--ea-category-hero-ink);
background: #FFFFFF;
}
.ea-category-archive-hero,
.elementor-element-eacather {
background: var(--ea-category-hero-blue);
color: #FFFFFF;
padding: 6rem max(5vw, 24px) 11rem !important;
box-sizing: border-box;
overflow-x: clip;
align-items: center !important;
}
.ea-category-archive-hero__inner,
.ea-category-archive-body__inner,
.elementor-element-eacathin,
.elementor-element-eacatbin {
width: 100%;
max-width: 1440px;
margin-right: auto !important;
margin-left: auto !important;
box-sizing: border-box;
min-width: 0;
align-self: center !important;
}
.ea-category-archive-eyebrow-row {
display: flex;
align-items: center;
gap: 10px;
width: auto !important;
max-width: max-content;
margin: 0 0 18px !important;
}
.ea-category-archive-eyebrow-line {
width: 44px;
max-width: 44px;
margin: 0 !important;
}
.ea-category-archive-eyebrow-line .elementor-divider {
padding: 0;
}
.ea-category-archive-eyebrow-line .elementor-divider-separator {
width: 44px !important;
border-top-color: var(--ea-category-hero-gold) !important;
border-top-width: 2px !important;
}
.ea-category-archive-eyebrow {
width: auto !important;
max-width: max-content;
margin: 0 !important;
color: #DCE7F6;
}
.ea-category-archive-eyebrow .elementor-heading-title {
margin: 0;
color: #DCE7F6 !important;
font-family: "Geist", sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.6px;
line-height: 1.1;
text-transform: uppercase;
}
.ea-category-archive-title .elementor-heading-title {
max-width: 960px;
margin: 0;
color: #FFFFFF !important;
font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 6rem;
font-weight: 500;
line-height: 0.9;
letter-spacing: 0;
text-transform: uppercase;
overflow-wrap: break-word;
}
.ea-category-archive-intro {
width: 100%;
max-width: 760px;
margin-top: 22px;
box-sizing: border-box;
}
.ea-category-archive-intro,
.ea-category-archive-intro p {
color: #E8EEF7;
font-size: 1.25rem;
line-height: 1.55;
}
.ea-category-archive-intro p {
margin: 0;
}
.ea-category-archive-body,
.elementor-element-eacatbod {
background: #FFFFFF;
margin-top: -104px !important;
padding: 42px max(5vw, 24px) 6.75rem !important;
box-sizing: border-box;
overflow-x: clip;
align-items: center !important;
}
.ea-category-archive-grid,
.ea-category-archive-grid .elementor-loop-container,
.ea-category-archive-grid .e-loop-item {
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.ea-category-archive-grid .elementor-grid {
gap: 34px 28px;
}
.ea-category-archive-grid .elementor-widget-theme-post-title .elementor-heading-title,
.ea-category-archive-grid .elementor-widget-theme-post-title .elementor-heading-title a {
white-space: normal !important;
overflow-wrap: break-word;
letter-spacing: 0 !important;
}
.ea-category-archive-grid .elementor-pagination {
padding-top: 24px;
}
@media (max-width: 1024px) {
.ea-category-archive-hero,
.elementor-element-eacather {
padding-top: 4.75rem;
padding-bottom: 9rem;
}
.ea-category-archive-title .elementor-heading-title {
font-size: 4.6rem;
}
}
@media (max-width: 767px) {
.ea-category-archive-hero,
.elementor-element-eacather {
padding-top: 3.5rem;
padding-right: 24px !important;
padding-bottom: 7.75rem;
padding-left: 24px !important;
}
.ea-category-archive-hero__inner,
.ea-category-archive-body__inner,
.elementor-element-eacathin,
.elementor-element-eacatbin {
width: 100% !important;
max-width: 100% !important;
}
.ea-category-archive-hero .elementor-widget,
.elementor-element-eacather .elementor-widget,
.ea-category-archive-body .elementor-widget,
.elementor-element-eacatbod .elementor-widget {
width: 100% !important;
max-width: 100% !important;
}
.ea-category-archive-eyebrow-row,
.elementor-element-eacather .ea-category-archive-eyebrow-row {
width: auto !important;
max-width: max-content !important;
}
.ea-category-archive-title .elementor-heading-title {
font-size: 2.75rem;
line-height: 0.95;
max-width: 100% !important;
}
.ea-category-archive-intro,
.ea-category-archive-intro p {
font-size: 1.05rem;
}
.ea-category-archive-intro,
.elementor-element-eacather .ea-category-archive-intro {
width: calc(100vw - 48px) !important;
max-width: calc(100vw - 48px) !important;
}
.ea-category-archive-body .ea-faceted-filter,
.ea-category-archive-grid,
.ea-category-archive-grid .elementor-loop-container,
.ea-category-archive-grid .e-loop-item,
.ea-category-archive-grid .elementor-widget-theme-post-title,
.ea-category-archive-grid .elementor-widget-theme-post-excerpt,
.ea-category-archive-grid .elementor-widget-post-info {
width: calc(100vw - 48px) !important;
max-width: calc(100vw - 48px) !important;
}
.ea-category-archive-body,
.elementor-element-eacatbod {
margin-top: -72px;
padding-top: 28px !important;
padding-right: 24px !important;
padding-bottom: 4rem;
padding-left: 24px !important;
}
}
.ea-archive-filters {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: center;
padding: 1rem 0;
margin-bottom: var(--wp--preset--spacing--40, 1.5rem);
border-bottom: 1px solid var(--ea-border);
}
.ea-archive-filters .ea-filter-label {
font-size: var(--wp--preset--font-size--small, 0.8125rem);
font-weight: 600;
color: var(--wp--preset--color--secondary, #6b7280);
white-space: nowrap;
}
.ea-filter-select {
appearance: none;
-webkit-appearance: none;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E") no-repeat right 0.75rem center / 10px 6px;
border: 1px solid var(--ea-border);
border-radius: var(--ea-radius-md);
padding: 0.5rem 2rem 0.5rem 0.75rem;
font-size: var(--wp--preset--font-size--small, 0.8125rem);
color: var(--wp--preset--color--foreground, #111);
cursor: pointer;
min-width: 160px;
font-family: inherit;
line-height: 1.4;
}
.ea-filter-select:focus-visible {
outline: 3px solid var(--ea-focus-color);
outline-offset: -1px;
border-color: var(--ea-focus-color);
}
.ea-filter-select:hover {
border-color: var(--wp--preset--color--secondary, #9ca3af);
}
.ea-filters-reset {
font-size: var(--wp--preset--font-size--small, 0.8125rem);
color: var(--wp--preset--color--secondary, #6b7280);
text-decoration: none;
white-space: nowrap;
}
.ea-filters-reset:hover {
color: var(--wp--preset--color--primary, #c2185b);
}
.ea-faceted-filter {
--ea-facet-navy: #172E4D;
--ea-facet-navy-2: #203A60;
--ea-facet-orange: #E1891D;
--ea-facet-panel: #FFFFFF;
--ea-facet-surface: #F3F5F7;
--ea-facet-rail: #E8ECF1;
--ea-facet-text: #172E4D;
--ea-facet-muted: #5F6875;
--ea-facet-line: #BAC5D2;
--ea-facet-shadow: 0 12px 26px rgba(23, 46, 77, 0.1);
box-sizing: border-box;
width: 100%;
margin: 0 0 2rem;
color: var(--ea-facet-text);
font-family: "Geist", sans-serif;
}
.ea-faceted-filter *,
.ea-faceted-filter *::before,
.ea-faceted-filter *::after {
box-sizing: border-box;
}
.ea-faceted-filter__eyebrow {
margin: 0 0 1.25rem;
color: var(--ea-facet-text);
font-size: 1rem;
font-weight: 700;
line-height: 1.3;
}
.ea-faceted-filter .ea-faceted-filter__bar {
display: flex;
align-items: stretch;
flex-wrap: wrap;
background: var(--ea-facet-rail);
border: 1px solid var(--ea-facet-line);
}
.ea-faceted-filter__bar-label {
display: inline-flex;
align-items: center;
min-height: 3.9rem;
padding: 0 1.1rem;
background: var(--ea-facet-navy);
color: #FFFFFF;
font-size: 0.95rem;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
}
.ea-faceted-filter button.ea-faceted-filter__tab,
.ea-faceted-filter .ea-faceted-filter__tab {
position: relative;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 3.9rem;
min-width: 10.5rem;
padding: 0 1.25rem;
border: 0 !important;
border-left: 1px solid var(--ea-facet-line) !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--ea-facet-navy) !important;
font: inherit;
font-size: 1rem;
font-weight: 700;
line-height: 1.2;
text-align: left;
cursor: pointer;
box-shadow: none !important;
}
.ea-faceted-filter .ea-faceted-filter__tab:first-child {
border-left: 0;
}
.ea-faceted-filter button.ea-faceted-filter__tab:hover,
.ea-faceted-filter button.ea-faceted-filter__tab:focus-visible {
background: #FFFFFF !important;
color: var(--ea-facet-navy) !important;
}
.ea-faceted-filter button.ea-faceted-filter__tab.is-open {
background: var(--ea-facet-panel) !important;
color: var(--ea-facet-navy) !important;
border-bottom: 1px solid var(--ea-facet-panel) !important;
box-shadow: none !important;
}
.ea-faceted-filter button.ea-faceted-filter__tab:focus-visible {
outline: 3px solid var(--ea-facet-orange) !important;
outline-offset: -3px;
}
.ea-faceted-filter__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.35rem;
height: 1.35rem;
border-radius: 999px;
background: var(--ea-facet-orange);
color: var(--ea-facet-navy);
font-size: 0.75rem;
font-weight: 700;
}
.ea-faceted-filter__chevron {
width: 0.7rem;
height: 0.7rem;
border-right: 3px solid currentColor;
border-bottom: 3px solid currentColor;
transform: rotate(45deg);
transition: transform 0.16s ease;
}
.ea-faceted-filter__tab.is-open .ea-faceted-filter__chevron {
transform: rotate(225deg);
}
.ea-faceted-filter__panels {
background: var(--ea-facet-panel);
box-shadow: var(--ea-facet-shadow);
overflow: hidden;
}
.ea-faceted-filter .ea-faceted-filter__panel {
margin: 0;
padding: 1.75rem 2rem 2rem;
border: 1px solid var(--ea-facet-line);
border-top: 0;
background: var(--ea-facet-panel);
color: var(--ea-facet-text);
}
.ea-faceted-filter__grid {
display: grid;
grid-template-columns: repeat(2, minmax(16rem, 1fr));
gap: 1.35rem 4rem;
}
.ea-faceted-filter__grid--compact {
grid-template-columns: repeat(4, minmax(7rem, 1fr));
}
.ea-faceted-filter .ea-faceted-filter__option {
display: grid;
grid-template-columns: 1.8rem minmax(0, auto) max-content;
align-items: center;
gap: 0.75rem;
justify-content: start;
min-width: 0;
color: var(--ea-facet-text) !important;
font-size: 1rem;
font-weight: 600;
line-height: 1.25;
text-decoration: none !important;
cursor: pointer;
}
.ea-faceted-filter__option input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.ea-faceted-filter__box {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
border: 2px solid var(--ea-facet-navy);
border-radius: 2px;
background: #fff;
}
.ea-faceted-filter__option input:checked + .ea-faceted-filter__box,
.ea-faceted-filter__option--link.is-selected .ea-faceted-filter__box {
border-color: var(--ea-facet-navy);
background: var(--ea-facet-navy);
}
.ea-faceted-filter__option input:checked + .ea-faceted-filter__box::after,
.ea-faceted-filter__option--link.is-selected .ea-faceted-filter__box::after {
content: "";
width: 0.45rem;
height: 0.8rem;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg) translate(-1px, -1px);
}
.ea-faceted-filter__option input:focus-visible + .ea-faceted-filter__box,
.ea-faceted-filter__option--link:focus-visible .ea-faceted-filter__box {
outline: 3px solid var(--ea-facet-orange);
outline-offset: 2px;
}
.ea-faceted-filter .ea-faceted-filter__text {
min-width: 0;
color: var(--ea-facet-text) !important;
overflow-wrap: break-word;
}
.ea-faceted-filter .ea-faceted-filter__count {
color: var(--ea-facet-muted);
font-weight: 600;
}
.ea-faceted-filter__bar-actions,
.ea-faceted-filter__actions {
display: flex;
align-items: center;
gap: 1rem;
}
.ea-faceted-filter__bar-actions {
min-height: 3.9rem;
margin-left: auto;
padding: 0 1rem;
border-left: 1px solid var(--ea-facet-line);
}
.ea-faceted-filter__actions {
padding-top: 0.9rem;
}
.ea-faceted-filter button.ea-faceted-filter__apply,
.ea-faceted-filter .ea-faceted-filter__apply {
min-height: 2.55rem;
padding: 0 1rem;
border: 1px solid var(--ea-facet-navy) !important;
border-radius: 0 !important;
background: var(--ea-facet-navy) !important;
color: #FFFFFF !important;
font: inherit;
font-size: 0.875rem;
font-weight: 700;
cursor: pointer;
}
.ea-faceted-filter button.ea-faceted-filter__apply:hover,
.ea-faceted-filter button.ea-faceted-filter__apply:focus-visible {
background: var(--ea-facet-navy-2) !important;
color: #FFFFFF !important;
}
.ea-faceted-filter button.ea-faceted-filter__apply:focus-visible {
outline: 3px solid var(--ea-facet-orange) !important;
outline-offset: 2px;
}
.ea-faceted-filter__clear {
color: var(--ea-facet-navy) !important;
font-size: 0.875rem;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
}
.ea-faceted-filter__clear:hover,
.ea-faceted-filter__clear:focus-visible {
color: var(--ea-facet-navy) !important;
text-decoration: underline;
}
.ea-faceted-filter__clear:focus-visible {
outline: 3px solid var(--ea-facet-orange);
outline-offset: 3px;
}
.ea-faceted-filter__empty {
margin: 0 0 2.5rem;
padding: 1.25rem 1.5rem;
border: 1px solid #BAC5D2;
border-left: 6px solid #E1891D;
background: #FFFFFF;
color: #172E4D;
font-family: "Geist", sans-serif;
font-size: 1rem;
font-weight: 700;
line-height: 1.45;
}
.ea-tag-archive-filter {
margin-bottom: 2.5rem;
}
@container main-content (max-width: 37.5rem) {
.ea-archive-filters {
flex-direction: column;
align-items: stretch;
}
.ea-filter-select {
width: 100%;
min-width: 0;
}
}
@media (max-width: 900px) {
.ea-faceted-filter .ea-faceted-filter__tab {
flex: 1 1 50%;
min-width: 0;
}
.ea-faceted-filter__grid,
.ea-faceted-filter__grid--compact {
grid-template-columns: 1fr;
gap: 1rem;
}
}
@media (max-width: 600px) {
.ea-faceted-filter {
max-width: 100%;
overflow-x: clip;
}
.ea-faceted-filter__eyebrow {
margin-bottom: 0.75rem;
}
.ea-faceted-filter .ea-faceted-filter__bar {
display: block;
width: 100%;
}
.ea-faceted-filter__bar-label {
min-height: 3rem;
padding: 0 1rem;
}
.ea-faceted-filter button.ea-faceted-filter__tab,
.ea-faceted-filter .ea-faceted-filter__tab {
width: 100%;
min-height: 3.5rem;
border-left: 0;
border-top: 1px solid var(--ea-facet-line) !important;
font-size: 1rem;
}
.ea-faceted-filter__bar-actions {
min-height: 3rem;
margin-left: 0;
padding: 0 1rem;
border-left: 0;
border-top: 1px solid var(--ea-facet-line);
}
.ea-faceted-filter__tab:first-child {
border-top: 0;
}
.ea-faceted-filter .ea-faceted-filter__panel {
padding: 1rem;
}
.ea-faceted-filter .ea-faceted-filter__option {
grid-template-columns: 1.45rem minmax(0, 1fr);
align-items: start;
gap: 0.45rem 0.65rem;
font-size: 1rem;
}
.ea-faceted-filter__box {
width: 1.45rem;
height: 1.45rem;
}
.ea-faceted-filter .ea-faceted-filter__count {
grid-column: 2;
justify-self: start;
font-size: 0.875rem;
}
.ea-faceted-filter__actions {
flex-wrap: wrap;
}
}
/* ==========================================================================
11. Components: Newsletter
========================================================================== */
.ea-newsletter {
background: #1a1a1a;
color: #fff;
border-radius: var(--ea-radius-md);
box-sizing: border-box;
}
.ea-newsletter--footer {
padding-block: var(--wp--preset--spacing--60, 3rem);
padding-inline: var(--ea-pad, 2rem);
text-align: center;
}
.ea-newsletter--sidebar {
padding: var(--wp--preset--spacing--40, 1.25rem);
text-align: left;
}
.ea-newsletter__heading {
font-size: 1.5rem;
font-weight: 700;
margin: 0 0 0.5rem;
color: #fff;
}
.ea-newsletter--sidebar .ea-newsletter__heading {
font-size: 1.125rem;
}
.ea-newsletter__subtext {
font-size: 0.9375rem;
color: #ccc;
margin: 0 0 1.25rem;
line-height: 1.5;
}
.ea-newsletter--sidebar .ea-newsletter__subtext {
font-size: 0.8125rem;
margin-bottom: 1rem;
}
/* CF7 form inside newsletter */
.ea-newsletter .wpcf7-form {
display: flex;
gap: 0.5rem;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
max-width: 480px;
margin: 0 auto;
}
.ea-newsletter--sidebar .wpcf7-form {
flex-direction: column;
max-width: none;
margin: 0;
}
.ea-newsletter .wpcf7-form p {
margin: 0;
flex: 1 1 auto;
min-width: 0;
}
.ea-newsletter .wpcf7-form input[type="email"] {
width: 100%;
padding: 0.625rem 0.875rem;
border: 1px solid #555;
border-radius: 3px;
background: #2a2a2a;
color: #fff;
font-size: 0.9375rem;
box-sizing: border-box;
}
.ea-newsletter .wpcf7-form input[type="email"]::placeholder {
color: #888;
}
.ea-newsletter .wpcf7-form input[type="email"]:focus {
outline: none;
border-color: #E59421;
}
.ea-newsletter .wpcf7-form input[type="submit"],
.ea-newsletter .wpcf7-form button[type="submit"] {
background: #E59421;
color: #1a1a1a;
border: none;
padding: 0.625rem 1.5rem;
border-radius: 3px;
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: background var(--ea-transition);
}
.ea-newsletter .wpcf7-form input[type="submit"]:hover,
.ea-newsletter .wpcf7-form button[type="submit"]:hover {
background: #C47E1C;
}
.ea-newsletter .wpcf7-form .wpcf7-response-output {
color: #ccc;
border-color: #555;
font-size: 0.8125rem;
margin: 1rem 0 0;
width: 100%;
}
.ea-newsletter .wpcf7-form label {
display: block;
font-size: 0;
}
.ea-newsletter .wpcf7-form label br {
display: none;
}
/* Fallback form */
.ea-newsletter .ea-nl-fallback {
display: flex;
gap: 0.5rem;
justify-content: center;
max-width: 480px;
margin: 0 auto;
}
.ea-newsletter--sidebar .ea-nl-fallback {
flex-direction: column;
max-width: none;
}
.ea-newsletter .ea-nl-fallback input[type="email"] {
flex: 1;
padding: 0.625rem 0.875rem;
border: 1px solid #555;
border-radius: 3px;
background: #2a2a2a;
color: #fff;
font-size: 0.9375rem;
}
.ea-newsletter .ea-nl-fallback input[type="email"]::placeholder {
color: #888;
}
.ea-newsletter .ea-nl-fallback button {
background: #E59421;
color: #1a1a1a;
border: none;
padding: 0.625rem 1.5rem;
border-radius: 3px;
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
}
.ea-newsletter .ea-nl-fallback button:hover {
background: #C47E1C;
}
/* ==========================================================================
12. Components: Podcast
========================================================================== */
.ea-podcast-list {
display: flex;
flex-direction: column;
gap: 0;
}
.ea-podcast-episode {
display: flex;
flex-direction: column;
gap: 1rem;
padding: var(--wp--preset--spacing--40, 1.5rem) 0;
border-bottom: 1px solid var(--ea-border);
}
.ea-podcast-episode:first-child {
padding-top: 0;
}
.ea-podcast-episode:last-child {
border-bottom: none;
}
.ea-podcast-header {
display: flex;
gap: 1.25rem;
align-items: flex-start;
}
@container main-content (max-width: 37.5rem) {
.ea-podcast-header {
flex-direction: column;
}
}
.ea-podcast-thumb {
flex-shrink: 0;
width: 160px;
}
.ea-podcast-thumb img,
.ea-podcast-thumb picture img {
width: 100%;
height: auto;
border-radius: var(--ea-radius-md);
display: block;
}
.ea-podcast-info {
flex: 1;
min-width: 0;
}
.ea-podcast-info h3 {
margin: 0 0 0.35rem;
font-size: var(--wp--preset--font-size--medium, 1.0625rem);
font-weight: 600;
line-height: 1.3;
}
.ea-podcast-info h3 a {
color: inherit;
text-decoration: none;
}
.ea-podcast-info h3 a:hover {
color: var(--wp--preset--color--primary, #c2185b);
}
.ea-podcast-meta {
font-size: var(--wp--preset--font-size--small, 0.8125rem);
color: var(--wp--preset--color--secondary, #6b7280);
margin-bottom: 0.5rem;
}
.ea-podcast-excerpt {
font-size: 0.9375rem;
line-height: 1.6;
color: var(--wp--preset--color--foreground, #333);
}
.ea-podcast-excerpt p {
margin: 0;
}
.ea-podcast-player {
max-width: 100%;
}
.ea-podcast-player iframe {
border-radius: 12px;
width: 100%;
}
.ea-podcast-pagination {
display: flex;
justify-content: center;
gap: 0.5rem;
padding-top: var(--wp--preset--spacing--40, 1.5rem);
}
.ea-podcast-pagination a,
.ea-podcast-pagination span {
display: inline-block;
padding: 0.4rem 0.8rem;
border: 1px solid var(--ea-border);
border-radius: var(--ea-radius-md);
font-size: var(--wp--preset--font-size--small, 0.8125rem);
text-decoration: none;
color: var(--wp--preset--color--foreground, #111);
}
.ea-podcast-pagination a:hover {
background: var(--wp--preset--color--primary, #c2185b);
color: #fff;
border-color: var(--wp--preset--color--primary, #c2185b);
}
.ea-podcast-pagination .current {
background: var(--wp--preset--color--primary, #c2185b);
color: #fff;
border-color: var(--wp--preset--color--primary, #c2185b);
}
/* ==========================================================================
13. Components: CTAs
========================================================================== */
/* Download */
.ea-cta-download {
margin: 1.5rem 0;
text-align: center;
}
.ea-cta-download .ea-cta-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.85rem 1.75rem;
border-radius: var(--ea-radius-md);
font-size: 1rem;
font-weight: 600;
text-decoration: none;
transition: opacity var(--ea-transition);
}
.ea-cta-download .ea-cta-btn:hover {
opacity: 0.85;
}
.ea-cta-btn--dl-primary {
background: var(--wp--preset--color--primary, #c2185b);
color: #fff;
}
.ea-cta-btn--dl-secondary {
background: var(--wp--preset--color--foreground, #111);
color: #fff;
}
.ea-cta-download .ea-cta-label {
font-size: 0.8125rem;
color: var(--wp--preset--color--secondary, #6b7280);
margin-top: 0.5rem;
}
/* Subscribe */
.ea-cta-subscribe {
border: 1px solid var(--ea-border);
border-radius: 6px;
padding: var(--wp--preset--spacing--40, 1.25rem);
margin: 1.5rem 0;
text-align: center;
}
.ea-cta-subscribe h4 {
margin: 0 0 0.35rem;
font-size: 1.125rem;
font-weight: 700;
color: var(--wp--preset--color--foreground, #111);
}
.ea-cta-subscribe p {
margin: 0 0 1rem;
font-size: 0.9rem;
color: var(--wp--preset--color--secondary, #6b7280);
}
.ea-cta-subscribe .ea-cta-btn {
display: inline-block;
padding: 0.7rem 1.5rem;
border-radius: var(--ea-radius-md);
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
background: var(--wp--preset--color--primary, #c2185b);
color: #fff;
transition: opacity var(--ea-transition);
}
.ea-cta-subscribe .ea-cta-btn:hover {
opacity: 0.85;
}
/* Share */
.ea-cta-share {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
margin: 1.5rem 0;
}
.ea-cta-share-label {
font-size: 0.8125rem;
font-weight: 600;
color: var(--wp--preset--color--secondary, #6b7280);
}
.ea-cta-share a,
.ea-cta-share button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--ea-border);
background: transparent;
color: var(--wp--preset--color--foreground, #111);
text-decoration: none;
font-size: 1.1rem;
cursor: pointer;
transition: background var(--ea-transition), color var(--ea-transition);
}
.ea-cta-share a:hover,
.ea-cta-share button:hover {
background: var(--wp--preset--color--foreground, #111);
color: #fff;
}
.ea-cta-share .ea-copied {
font-size: 0.75rem;
color: var(--wp--preset--color--primary, #c2185b);
display: none;
}
/* Explore */
.ea-cta-explore {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin: 1.5rem 0;
}
.ea-cta-explore a {
flex: 1 1 auto;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
border-radius: var(--ea-radius-md);
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
text-align: center;
transition: opacity var(--ea-transition);
min-width: 180px;
}
.ea-cta-explore a:hover {
opacity: 0.85;
}
.ea-cta-explore .ea-cta-btn--exp-primary {
background: var(--wp--preset--color--primary, #c2185b);
color: #fff;
}
.ea-cta-explore .ea-cta-btn--exp-outline {
border: 2px solid var(--wp--preset--color--foreground, #111);
color: var(--wp--preset--color--foreground, #111);
background: transparent;
}
.ea-cta-explore .ea-cta-btn--exp-outline:hover {
background: var(--wp--preset--color--foreground, #111);
color: #fff;
opacity: 1;
}
/* ==========================================================================
14. Components: Expediente Publico Feed
========================================================================== */
.ea-exppub-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
gap: var(--wp--preset--spacing--40, 1.5rem);
}
.ea-exppub-card {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding-bottom: var(--wp--preset--spacing--40, 1.5rem);
border-bottom: 1px solid var(--ea-border);
}
.ea-exppub-card:last-child {
border-bottom: none;
padding-bottom: 0;
}
.ea-exppub-card .ea-ep-title {
font-size: var(--wp--preset--font-size--medium, 1.0625rem);
font-weight: 600;
line-height: 1.3;
margin: 0;
}
.ea-exppub-card .ea-ep-title a {
color: inherit;
text-decoration: none;
}
.ea-exppub-card .ea-ep-title a:hover {
color: var(--wp--preset--color--primary, #c2185b);
}
.ea-exppub-card .ea-ep-meta {
font-size: var(--wp--preset--font-size--small, 0.8125rem);
color: var(--wp--preset--color--secondary, #6b7280);
}
.ea-exppub-card .ea-ep-excerpt {
font-size: 0.9375rem;
line-height: 1.6;
color: var(--wp--preset--color--foreground, #333);
}
.ea-exppub-more {
margin-top: var(--wp--preset--spacing--40, 1.5rem);
text-align: center;
}
.ea-exppub-more a {
display: inline-block;
padding: 0.7rem 1.75rem;
border: 2px solid var(--wp--preset--color--foreground, #111);
border-radius: var(--ea-radius-md);
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
color: var(--wp--preset--color--foreground, #111);
transition: background var(--ea-transition), color var(--ea-transition);
}
.ea-exppub-more a:hover {
background: var(--wp--preset--color--foreground, #111);
color: #fff;
}
/* ==========================================================================
14b. Components: Post Meta Bar (single)
========================================================================== */
.ea-post-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 0.6rem;
margin: 0;
padding: 0;
background: transparent;
border: none;
border-radius: 0;
font-size: 0.8125rem;
line-height: 1.4;
}
/* Card body: layout y spacing global para todas las cards del home.
Reemplaza las reglas con !important que vivían en inc/home-content.html. */
.ea-home-card-body {
display: flex;
flex-direction: column;
gap: 1rem;
}
.ea-home-card-body > * {
margin: 0;
}
.ea-home-card-body .wp-block-post-excerpt {
display: flex;
flex-direction: column;
gap: 1rem;
margin: 0;
}
.ea-home-card-body .wp-block-post-excerpt > *,
.ea-home-card-body .wp-block-post-excerpt__excerpt,
.ea-home-card-body .wp-block-post-excerpt__more-text {
margin: 0;
}
.ea-post-meta__item {
display: inline-flex;
align-items: baseline;
gap: 0.35em;
flex-wrap: wrap;
}
.ea-post-meta__label {
text-transform: uppercase;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--wp--preset--color--secondary, #6b7280);
white-space: nowrap;
}
.ea-post-meta__label::after {
content: ":";
}
.ea-post-meta__value {
color: var(--wp--preset--color--foreground, #111);
font-weight: 500;
}
.ea-post-meta__value a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color var(--ea-transition), color var(--ea-transition);
}
.ea-post-meta__value a:hover {
color: var(--wp--preset--color--primary, #c2185b);
border-bottom-color: currentColor;
}
.ea-post-meta__sep {
color: var(--wp--preset--color--secondary, #6b7280);
font-weight: 400;
flex-shrink: 0;
opacity: 0.5;
}
/* Variante inline — para cards y listados de posts */
.ea-post-meta--inline {
background: transparent;
border-left: none;
padding: 0.2rem 0;
border-radius: 0;
row-gap: 0.2rem;
column-gap: 0.6rem;
margin: 0.4em 0;
}
/* ==========================================================================
15. Components: Language Switcher
========================================================================== */
.ea-lang-switcher {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: var(--wp--preset--font-size--small, 0.8125rem);
font-weight: 600;
}
.ea-lang-current {
color: var(--wp--preset--color--foreground, #111);
}
.ea-lang-sep {
color: var(--wp--preset--color--secondary, #6b7280);
}
.ea-lang-link {
color: var(--wp--preset--color--secondary, #6b7280);
text-decoration: none;
}
.ea-lang-link:hover {
color: var(--wp--preset--color--primary, #c2185b);
}
/* ==========================================================================
16b. Post content: contención de imágenes en columnas
========================================================================== */
/*
* Sin min-width:0 los hijos flex/grid pueden crecer más allá de su celda.
* overflow:hidden recorta cualquier imagen que supere el ancho de la columna.
*/
.wp-block-post-content .wp-block-columns {
overflow: hidden;
}
.wp-block-post-content .wp-block-column {
min-width: 0;
overflow: hidden;
}
.wp-block-post-content .wp-block-column img,
.wp-block-post-content .wp-block-column figure {
max-width: 100%;
height: auto;
display: block;
}
/* ==========================================================================
16. Picture element
========================================================================== */
picture {
display: block;
}
picture img {
display: block;
max-width: 100%;
height: auto;
}
/* ==========================================================================
17. Page: Podcast
========================================================================== */
/* Columna intro izquierda (título + bajada + Spotify) */
.ea-podcast-intro {
padding-right: 1.5rem;
border-right: 1px solid var(--ea-border);
}
.ea-podcast-intro-eyebrow {
display: inline-block;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #999;
margin-bottom: 0.75rem;
}
.ea-podcast-intro-title {
font-size: clamp(1.5rem, 3vw, 2.25rem);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.03em;
color: #1c1c1a;
margin: 0 0 1rem;
}
.ea-podcast-intro-desc {
font-size: 0.9375rem;
line-height: 1.7;
color: #4a4a44;
margin: 0 0 1.5rem;
}
/* Label de sección (compartido por podcast y contacto) */
.ea-sidebar-label {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #888;
margin: 0 0 0.75rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--ea-border);
}
/* Plataforma link (Spotify, etc.) */
.ea-platform-link {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
border: 1px solid var(--ea-border);
border-radius: var(--ea-radius-md);
text-decoration: none;
color: #1c1c1a;
font-size: 0.9375rem;
font-weight: 500;
background: #fff;
transition: border-color var(--ea-transition);
margin-bottom: 0.5rem;
}
.ea-platform-link:hover {
border-color: #1db954;
}
/* ==========================================================================
18. Page: Podcast — Banner azul
========================================================================== */
.ea-page-flush {
margin-block-start: 0 !important;
padding-block-start: 0 !important;
}
.ea-podcast-page-banner {
background: var(--ea-blue, #172d4d);
padding: var(--wp--preset--spacing--60, 3rem) 0;
}
.ea-podcast-banner-eyebrow {
display: inline-block;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
margin-bottom: 0.75rem;
}
.ea-podcast-banner-title {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 800;
line-height: 1.0;
letter-spacing: -0.03em;
color: #fff;
margin: 0 0 1rem;
}
.ea-podcast-banner-desc {
font-size: 1rem;
line-height: 1.7;
color: rgba(255, 255, 255, 0.75);
margin: 0 0 2rem;
max-width: 55ch;
}
.ea-podcast-spotify-btn {
display: inline-flex;
align-items: center;
gap: 0.625rem;
background: #1db954;
color: #fff;
padding: 0.625rem 1.375rem;
border-radius: 2rem;
font-size: 0.9375rem;
font-weight: 600;
text-decoration: none;
transition: background var(--ea-transition, 0.15s ease);
}
.ea-podcast-spotify-btn:hover {
background: #1ed760;
color: #fff;
}
/* ==========================================================================
19. Page: Contacto
========================================================================== */
/* Sidebar izquierdo */
.ea-contact-sidebar {
padding-right: 2rem;
}
.ea-contact-eyebrow {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #999;
margin-bottom: 0.75rem;
}
.ea-contact-title {
font-size: clamp(1.75rem, 4vw, 2.75rem);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.03em;
color: #1c1c1a;
margin: 0 0 1rem;
}
.ea-contact-desc {
font-size: 0.9375rem;
line-height: 1.7;
color: #4a4a44;
margin: 0 0 2rem;
}
.ea-contact-info {
border-top: 1px solid var(--ea-border);
padding-top: 1.5rem;
margin-bottom: 1.5rem;
}
.ea-contact-info p {
font-size: 0.9rem;
line-height: 1.65;
color: #4a4a44;
margin: 0;
}
.ea-contact-social {
margin-top: 1.5rem;
}
.ea-contact-social-links {
display: flex;
gap: 0.75rem;
margin-top: 0.75rem;
}
.ea-social-link {
display: flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
border: 1px solid var(--ea-border);
border-radius: var(--ea-radius-md);
color: #4a4a44;
text-decoration: none;
transition: color var(--ea-transition), border-color var(--ea-transition);
}
.ea-social-link:hover {
color: #172E4D;
border-color: #172E4D;
}
/* Heading del formulario */
.ea-contact-form-heading {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 2px solid #172E4D;
}
/* CF7 form dentro de .ea-contact-form */
.ea-contact-form .wpcf7-form {
display: grid;
gap: 1.25rem;
}
.ea-contact-form .wpcf7-form p {
margin: 0;
}
.ea-contact-form .wpcf7-form label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: #1c1c1a;
margin-bottom: 0.4rem;
}
.ea-contact-form .wpcf7-form input[type="text"],
.ea-contact-form .wpcf7-form input[type="email"],
.ea-contact-form .wpcf7-form textarea {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid #d1d5db;
border-radius: var(--ea-radius-md);
font-size: 0.9375rem;
font-family: inherit;
color: #1c1c1a;
background: #fff;
transition: border-color var(--ea-transition), box-shadow var(--ea-transition);
box-sizing: border-box;
}
.ea-contact-form .wpcf7-form input[type="text"]:focus,
.ea-contact-form .wpcf7-form input[type="email"]:focus,
.ea-contact-form .wpcf7-form textarea:focus {
border-color: #172E4D;
outline: none;
box-shadow: 0 0 0 3px rgba(23, 45, 76, 0.08);
}
.ea-contact-form .wpcf7-form textarea {
min-height: 160px;
resize: vertical;
}
.ea-contact-form .wpcf7-form input[type="submit"] {
display: inline-block;
padding: 0.875rem 2rem;
background: #172E4D;
color: #fff;
font-weight: 700;
font-size: 0.9375rem;
font-family: inherit;
border: none;
border-radius: var(--ea-radius-md);
cursor: pointer;
transition: background var(--ea-transition);
}
.ea-contact-form .wpcf7-form input[type="submit"]:hover {
background: #0f1d32;
}
.ea-contact-form .wpcf7-response-output {
margin: 0.5rem 0 0;
padding: 0.75rem 1rem;
border-radius: var(--ea-radius-md);
font-size: 0.875rem;
}
/* Separador vertical entre sidebar y formulario */
.ea-contact-divider {
width: 1px;
height: 100%;
min-height: 200px;
background: var(--ea-border);
margin: 0 auto;
}
/* Responsive: separador oculto y sidebar sin padding en mobile */
@media (max-width: 767px) {
.ea-contact-sidebar {
padding-right: 0;
}
.ea-contact-divider {
display: none;
}
}
/* ==========================================================================
18b. Page: Sobre EA — componentes editoriales
========================================================================== */
/*
* Hero: título grande estilo suizo + descripción alineada.
* Borde superior negro como los pillar cards del home.
*/
.ea-about-hero {
padding-top: 1rem;
}
.ea-about-hero__inner {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
margin-top: 1rem;
}
@media (min-width: 700px) {
.ea-about-hero__inner {
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: end;
}
}
.ea-about-hero__label {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #9a9a94;
}
.ea-about-hero__title {
font-size: clamp(2.75rem, 6vw, 5rem);
font-weight: 800;
line-height: 1.0;
letter-spacing: -0.04em;
color: #1c1c1a;
margin: 0;
}
.ea-about-hero__desc {
font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
line-height: 1.75;
color: #4a4a44;
margin: 0;
align-self: end;
}
/*
* Program cards: borde superior + contenido editorial sin imágenes.
* La segunda card tiene borde izquierdo en desktop (separador visual).
*/
.ea-about-program-card {
border-top: 2px solid #1c1c1a;
padding-top: 1.25rem;
height: 100%;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.ea-about-program-card--alt {
border-top-color: #1c1c1a;
}
@container ea-grid (min-width: 50rem) {
.ea-about-program-card--alt {
border-left: 1px solid #d8d8d4;
padding-left: 1.5rem;
}
}
.ea-about-program-card__label {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #9a9a94;
}
.ea-about-program-card__title {
font-size: clamp(1.25rem, 2vw, 1.75rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.025em;
color: #1c1c1a;
margin: 0;
}
.ea-about-program-card__desc {
font-size: 0.875rem;
line-height: 1.7;
color: #6a6a64;
margin: 0;
flex: 1;
}
.ea-about-program-card__link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8125rem;
font-weight: 600;
color: #1c1c1a;
text-decoration: none;
margin-top: auto;
padding-top: 0.5rem;
border-top: 1px solid #d8d8d4;
transition: opacity 0.15s ease;
}
.ea-about-program-card__link:hover {
opacity: 0.6;
}
.ea-about-program-card__link svg {
width: 12px;
height: 12px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/*
* Visión/Misión: cards tipográficas con número grande como ancla visual.
* Sin imágenes de fondo — legibilidad y jerarquía pura.
*/
.ea-about-vm-card {
padding-top: 1.25rem;
border-top: 1px solid #d8d8d4;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.ea-about-vm-card__index {
font-size: clamp(3rem, 5vw, 4.5rem);
font-weight: 800;
line-height: 1;
letter-spacing: -0.05em;
color: #e8e8e4;
margin-bottom: 0.25rem;
user-select: none;
}
.ea-about-vm-card__title {
font-size: clamp(1.25rem, 2vw, 1.75rem);
font-weight: 800;
letter-spacing: -0.025em;
color: #1c1c1a;
margin: 0;
line-height: 1.1;
}
.ea-about-vm-card__text {
font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
line-height: 1.7;
color: #4a4a44;
margin: 0;
}
/*
* Líneas de trabajo: label a la izquierda, grid de items a la derecha.
* Desktop: 3 col + 9 col. Mobile: apila.
*/
.ea-about-lineas {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 700px) {
.ea-about-lineas {
grid-template-columns: 3fr 9fr;
gap: 3rem;
align-items: start;
}
}
.ea-about-lineas__header {
padding-top: 0.25rem;
}
.ea-about-lineas__label {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #9a9a94;
display: block;
}
.ea-about-lineas__grid {
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
@media (min-width: 700px) {
.ea-about-lineas__grid {
grid-template-columns: repeat(2, 1fr);
}
}
.ea-about-lineas__item {
display: flex;
gap: 0.75rem;
padding: 1.25rem 0;
border-top: 1px solid #d8d8d4;
align-items: start;
}
@media (min-width: 700px) {
.ea-about-lineas__item:nth-child(2) {
border-top-color: #d8d8d4;
}
.ea-about-lineas__item:nth-child(3),
.ea-about-lineas__item:nth-child(4) {
border-top: 1px solid #d8d8d4;
}
.ea-about-lineas__item:nth-child(odd) {
padding-right: 2rem;
}
.ea-about-lineas__item:nth-child(even) {
padding-left: 2rem;
border-left: 1px solid #d8d8d4;
}
}
.ea-about-lineas__item-num {
font-size: 1rem;
color: #b0b0a8;
flex-shrink: 0;
line-height: 1.6;
}
.ea-about-lineas__item-text {
font-size: 0.875rem;
line-height: 1.7;
color: #4a4a44;
margin: 0;
}
/* Label "Video institucional" */
.ea-about-video-label {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #9a9a94;
margin-bottom: 0.75rem;
}
/* ==========================================================================
20. Print
========================================================================== */
@media print {
.skip-link,
.ea-site-header,
.ea-site-footer,
.ea-cta-share,
.ea-cta-download,
.ea-cta-subscribe,
.ea-cta-explore,
.ea-newsletter,
.ea-archive-filters,
.ea-lang-switcher,
.ea-podcast-player,
.ea-sidebar-related,
nav {
display: none !important;
}
.ea-grid {
display: block !important;
}
.ea-col-sidebar {
display: none !important;
}
a[href]::after {
content: " (" attr(href) ")";
font-size: 0.8em;
color: #666;
}
body {
font-size: 12pt;
line-height: 1.5;
}
}
/* ==========================================================================
Expediente Público — Feed Grid
========================================================================== */
.ea-ep-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--wp--preset--spacing--50, 2rem);
}
@media (min-width: 700px) {
.ea-ep-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.ea-ep-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Card base */
.ea-ep-card {
display: flex;
flex-direction: column;
gap: 0.5rem;
border-bottom: 0;
margin: 0;
padding: 0;
}
.ea-ep-card__img-link {
display: block;
overflow: hidden;
border-radius: var(--ea-radius-sm, 4px);
margin-bottom: 0.5rem;
background: #f0f0ee;
}
.ea-ep-card__img {
width: 100%;
height: auto;
aspect-ratio: 5 / 3;
object-fit: cover;
object-position: center top;
display: block;
}
.ea-ep-card__body {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.ea-ep-card__cat {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #6a6a64;
}
.ea-ep-card__title {
font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.02em;
text-transform: uppercase;
margin: 0;
}
.ea-ep-card__title a {
color: #1c1c1a;
text-decoration: none;
}
.ea-ep-card__title a:hover {
color: var(--wp--preset--color--secondary, #555555);
}
.ea-ep-card__desc {
font-size: 0.875rem;
line-height: 1.6;
color: #5a5a54;
margin: 0.25rem 0 0;
}
.ea-ep-card__date {
font-family: "Geist", sans-serif;
font-size: 0.8125rem;
color: #6a6a64;
margin-top: 0.25rem;
}
/* Feed header + CTA link */
.ea-ep-feed__header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1.5rem;
margin-bottom: var(--wp--preset--spacing--40, 1.5rem);
}
.ea-ep-feed__title {
margin: 0;
}
.ea-ep-feed__cta {
margin: 0;
text-align: right;
flex-shrink: 0;
}
.ea-ep-feed__cta a {
display: inline-block;
padding-bottom: 1px;
border-bottom: 1px solid #1c1c1a;
font-size: 0.875rem;
font-weight: 600;
color: #1c1c1a;
text-decoration: none;
}
.ea-ep-feed__cta a:hover {
opacity: 0.65;
}
@media (max-width: 600px) {
.ea-ep-feed__header {
align-items: flex-start;
flex-direction: column;
gap: 0.5rem;
}
.ea-ep-feed__cta {
text-align: left;
}
}
/* List layout (compact) */
.ea-ep-feed--list {
list-style: none;
margin: 0;
padding: 0;
}
.ea-ep-feed--list .ea-ep-feed__item {
padding: 0.75rem 0;
border-bottom: 1px solid #e8e8e4;
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.ea-ep-feed--list .ea-ep-feed__item a {
font-weight: 600;
font-size: 0.9375rem;
color: #1c1c1a;
text-decoration: none;
line-height: 1.35;
}
.ea-ep-feed--list .ea-ep-feed__item a:hover {
color: #b02a30;
}
.ea-ep-feed--list .ea-ep-feed__date {
font-size: 0.75rem;
color: #9a9a94;
}
/* EP Hero section */
.ea-ep-hero {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
align-items: end;
padding-bottom: 2.5rem;
border-bottom: 2px solid #1c1c1a;
margin-bottom: 2.5rem;
}
@media (min-width: 700px) {
.ea-ep-hero {
grid-template-columns: 1fr 1fr;
gap: 4rem;
}
}
.ea-ep-hero__label {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #9a9a94;
margin-bottom: 0.75rem;
}
.ea-ep-hero__title {
font-size: clamp(2.25rem, 5vw, 4rem);
font-weight: 800;
line-height: 1.0;
letter-spacing: -0.04em;
color: #1c1c1a;
margin: 0;
}
.ea-ep-hero__desc {
font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
line-height: 1.75;
color: #4a4a44;
margin: 0;
}
.ea-ep-social {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1.25rem;
}
.ea-ep-social a {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.375rem 0.75rem;
border: 1px solid #e0e0dc;
border-radius: var(--ea-radius-md);
font-size: 0.8125rem;
font-weight: 500;
text-decoration: none;
color: #1c1c1a;
transition: all 0.15s ease;
}
.ea-ep-social a:hover {
background: #1c1c1a;
color: #fff;
border-color: #1c1c1a;
}
/* ==========================================================================
Home main grid — responsive con container queries (sin @media).
- >= 1920px: 2 reservado + 6 artículos + 2 sidebar (default).
- 960–1920px: oculta reservado, artículos = 8, sidebar = 4.
- < 960px: apila todo en 12 columnas.
========================================================================== */
.ea-home-main-grid {
container-type: inline-size;
container-name: ea-home;
}
@container ea-home (max-width: 959px) {
.ea-home-main-grid > .ea-home-articles-col,
.ea-home-main-grid > .ea-home-sidebar-col {
grid-column: span 12 !important;
}
}
/* ==========================================================================
Home — Investigaciones: grid responsive (4 / 2 / 1 columnas)
El display:grid y gap vienen inline desde el shortcode ea_home_investigations.
========================================================================== */
.ea-home-inv-grid {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1023px) {
.ea-home-inv-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 599px) {
.ea-home-inv-grid {
grid-template-columns: 1fr !important;
}
}
/* ==========================================================================
Home — Sección YouTube (full-width, 4 columnas como Investigaciones)
========================================================================== */
.ea-home-yt-section > .wp-block-heading {
font-size: clamp(1.5rem, 2.2vw, 2rem);
font-weight: 700;
color: #1c1c1a;
}
.ea-youtube-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--wp--preset--spacing--30, 1.25rem);
}
.ea-youtube-card {
display: flex;
flex-direction: column;
gap: .65rem;
text-decoration: none;
color: inherit;
}
.ea-youtube-card:hover {
color: inherit;
text-decoration: none;
}
.ea-youtube-card__thumb {
position: relative;
aspect-ratio: 16 / 9;
border-radius: 4px;
overflow: hidden;
background: #1c1c1a;
}
.ea-youtube-card__thumb img,
.ea-youtube-card__placeholder {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ea-youtube-card__play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 3.25rem;
height: 3.25rem;
border-radius: 50%;
background: #E59421;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
line-height: 1;
color: #1c1c1a;
text-shadow: none;
padding-left: .2rem;
box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
opacity: .95;
pointer-events: none;
}
.ea-youtube-card:hover .ea-youtube-card__play {
opacity: 1;
}
.ea-youtube-card__title {
font-size: clamp(1.4rem, 1.25rem + 0.75vw, 1.85rem);
line-height: 1.1;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
color: #172E4D;
}
.ea-youtube-card:hover .ea-youtube-card__title {
text-decoration: none;
}
@media (max-width: 1023px) {
.ea-youtube-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 599px) {
.ea-youtube-grid {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
Home — Card de X en el sidebar (bajo Podcast)
========================================================================== */
.ea-x-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .75rem;
padding: 1.5rem;
background: #000;
color: #fff;
text-decoration: none;
border-radius: 6px;
transition: transform .2s ease, box-shadow .2s ease;
}
.ea-x-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
color: #fff;
text-decoration: none;
}
.ea-x-card__logo {
flex-shrink: 0;
width: 2rem;
height: 2rem;
fill: #fff;
}
.ea-x-card__body {
display: flex;
flex-direction: column;
gap: .3rem;
min-width: 0;
width: 100%;
}
.ea-x-card__handle {
font-size: .8125rem;
letter-spacing: .02em;
color: rgba(255, 255, 255, .7);
font-weight: 500;
}
.ea-x-card__name {
font-size: 1.05rem;
font-weight: 700;
line-height: 1.25;
color: #fff;
}
.ea-x-card__desc {
font-size: .8125rem;
line-height: 1.45;
color: rgba(255, 255, 255, .82);
margin: .15rem 0 0;
}
.ea-x-card__cta {
margin-top: .5rem;
font-size: .75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: #fff;
}
/* ==========================================================================
Search results — estilo sutil, título discreto, filas compactas.
========================================================================== */
.ea-search-results .wp-block-query-title {
font-size: clamp(1.125rem, 1.5vw, 1.375rem);
font-weight: 500;
color: var(--wp--preset--color--secondary, #6b7280);
letter-spacing: -0.01em;
line-height: 1.3;
}
.ea-search-list {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--40, 1.75rem);
}
.ea-search-card {
display: grid !important;
grid-template-columns: 240px minmax(0, 1fr) !important;
gap: var(--wp--preset--spacing--40, 1.75rem);
align-items: start;
padding-bottom: var(--wp--preset--spacing--40, 1.75rem);
border-bottom: 1px solid #eee;
width: 100%;
box-sizing: border-box;
}
.ea-search-card:last-child {
border-bottom: none;
padding-bottom: 0;
}
.ea-search-card__img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 4px;
overflow: hidden;
background: #f2f2f2;
}
.ea-search-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ea-search-card__img--empty {
aspect-ratio: 16 / 9;
background: linear-gradient(135deg, #f2f2f2, #e8e8e8);
}
.ea-search-card__body {
display: flex;
flex-direction: column;
gap: 0.5rem;
min-width: 0;
}
.ea-search-card__title {
margin: 0;
}
.ea-search-card__title a {
color: var(--wp--preset--color--foreground, #1a1a1a);
text-decoration: none;
}
.ea-search-card__title a:hover {
text-decoration: none;
}
.ea-search-card .ea-post-meta {
padding: 0.4rem 0.7rem;
font-size: 0.75rem;
line-height: 1.4;
}
.ea-search-card .ea-post-meta__label {
font-size: 0.625rem;
}
.ea-search-card__excerpt {
font-size: 0.9375rem;
line-height: 1.55;
color: var(--wp--preset--color--secondary, #6b7280);
margin: 0;
}
.ea-search-empty {
font-size: 1rem;
color: var(--wp--preset--color--secondary, #6b7280);
padding: var(--wp--preset--spacing--40, 1.75rem) 0;
}
/* Paginación */
.ea-search-pagination {
margin-top: var(--wp--preset--spacing--50, 2.5rem);
}
.ea-search-pagination ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
justify-content: center;
}
.ea-search-pagination a,
.ea-search-pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.25rem;
height: 2.25rem;
padding: 0 0.7rem;
border-radius: 3px;
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
color: var(--wp--preset--color--foreground, #1a1a1a);
border: 1px solid #e5e5e5;
background: #fff;
transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}
.ea-search-pagination a:hover {
border-color: var(--ea-blue, #172d4d);
color: var(--ea-blue, #172d4d);
}
.ea-search-pagination .current {
background: var(--ea-blue, #172d4d);
color: #fff;
border-color: var(--ea-blue, #172d4d);
}
.ea-search-pagination .dots {
border: none;
background: transparent;
color: var(--wp--preset--color--secondary, #6b7280);
}
/* ==========================================================================
Pagination — sistema visual de marca para archivos, Elementor y busqueda
========================================================================== */
.elementor-pagination,
.ea-podcast-pagination,
.wp-block-query-pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center !important;
gap: 0.55rem;
}
.ea-search-pagination ul {
gap: 0.55rem;
}
.elementor-pagination {
padding-top: 2.75rem !important;
}
.elementor-pagination .page-numbers,
.ea-podcast-pagination a,
.ea-podcast-pagination span,
.ea-search-pagination a,
.ea-search-pagination span,
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination a,
a.wp-block-query-pagination-next,
a.wp-block-query-pagination-previous,
.wp-block-query-pagination-next a,
.wp-block-query-pagination-previous a {
position: relative;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 2.55rem;
height: 2.55rem;
padding: 0 0.78rem !important;
border: 1px solid rgba(23, 46, 77, 0.24) !important;
border-radius: 4px !important;
background: #FFFFFF !important;
color: #172E4D !important;
font-family: "Geist", sans-serif;
font-size: 0.875rem;
font-weight: 700;
line-height: 1;
text-decoration: none !important;
transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.elementor-pagination a.page-numbers:hover,
.ea-podcast-pagination a:hover,
.ea-search-pagination a:hover,
.wp-block-query-pagination a:hover,
a.wp-block-query-pagination-next:hover,
a.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next a:hover,
.wp-block-query-pagination-previous a:hover {
border-color: #172E4D !important;
background: #F3F6FA !important;
color: #172E4D !important;
box-shadow: inset 0 -3px 0 #E1891D;
}
.elementor-pagination .page-numbers.current,
.ea-podcast-pagination .current,
.ea-search-pagination .current,
.wp-block-query-pagination .page-numbers.current {
min-width: 4.6rem;
padding-right: 0.9rem !important;
padding-left: 0.85rem !important;
border-color: #172E4D !important;
background: #172E4D !important;
color: #FFFFFF !important;
box-shadow: inset 0 -4px 0 #E1891D, 0 8px 18px rgba(23, 46, 77, 0.16);
}
.elementor-pagination .page-numbers.current::before,
.ea-podcast-pagination .current::before,
.ea-search-pagination .current::before,
.wp-block-query-pagination .page-numbers.current::before {
content: "P\00E1g.";
margin-right: 0.35rem;
color: rgba(255, 255, 255, 0.78);
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
}
.elementor-pagination .page-numbers.dots,
.ea-podcast-pagination .dots,
.ea-search-pagination .dots,
.wp-block-query-pagination .page-numbers.dots {
min-width: auto;
border-color: transparent !important;
background: transparent !important;
color: rgba(23, 46, 77, 0.55) !important;
box-shadow: none !important;
}
.elementor-pagination a.page-numbers:focus-visible,
.ea-podcast-pagination a:focus-visible,
.ea-search-pagination a:focus-visible,
.wp-block-query-pagination a:focus-visible,
a.wp-block-query-pagination-next:focus-visible,
a.wp-block-query-pagination-previous:focus-visible,
.wp-block-query-pagination-next a:focus-visible,
.wp-block-query-pagination-previous a:focus-visible {
outline: 2px solid #E1891D;
outline-offset: 3px;
}
@media (max-width: 540px) {
.elementor-pagination,
.ea-podcast-pagination,
.wp-block-query-pagination,
.ea-search-pagination ul {
gap: 0.45rem;
}
.elementor-pagination .page-numbers,
.ea-podcast-pagination a,
.ea-podcast-pagination span,
.ea-search-pagination a,
.ea-search-pagination span,
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination a,
a.wp-block-query-pagination-next,
a.wp-block-query-pagination-previous,
.wp-block-query-pagination-next a,
.wp-block-query-pagination-previous a {
min-width: 2.35rem;
height: 2.35rem;
padding-right: 0.62rem !important;
padding-left: 0.62rem !important;
font-size: 0.82rem;
}
.elementor-pagination .page-numbers.current,
.ea-podcast-pagination .current,
.ea-search-pagination .current,
.wp-block-query-pagination .page-numbers.current {
min-width: 4.2rem;
}
}
@media (max-width: 540px) {
.ea-search-card {
grid-template-columns: 1fr !important;
gap: 0.75rem;
}
.ea-search-card__img {
max-width: 100%;
}
}
/* ==========================================================================
Side-box: contenedor de Eventos y Podcast en el home (sidebar derecho).
Borde fino redondeado que envuelve título + cards.
========================================================================== */
.ea-home-side-box {
border: 1px solid #e8e8e8;
border-top: 1px solid #1c1c1a;
border-radius: 6px;
padding: 1.25rem;
background: #fff;
}
.ea-home-side-box__title {
margin: 0 0 0 !important;
padding-bottom: .75rem;
border-bottom: 1px solid #e8e8e8;
}
/* Primera card pegada al título: sin padding-top extra. */
.ea-home-side-box .ea-home-event-card:first-of-type,
.ea-home-side-box .ea-podcast-compact > .ea-podcast-compact__item:first-child {
padding-top: .25rem;
}
/* ==========================================================================
Card buttons — usados en cards del home (pillars, articles, podcast,
investigations, eventos). Cuadrado amarillo con ícono + label gris/azul.
========================================================================== */
.ea-card-btn {
display: inline-flex;
align-items: stretch;
background: #f0f0ee;
color: #172E4D;
border-radius: 4px;
overflow: hidden;
text-decoration: none;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1;
width: max-content;
transition: filter 0.18s ease, transform 0.18s ease;
}
.ea-card-btn:hover {
filter: brightness(0.96);
color: #172E4D;
}
.ea-card-btn:focus-visible {
outline: 2px solid #172E4D;
outline-offset: 2px;
}
.ea-card-btn__icon {
display: inline-flex;
align-items: center;
justify-content: center;
background: #E59421;
color: #172E4D;
flex: 0 0 32px;
align-self: stretch;
min-height: 32px;
}
.ea-card-btn__icon svg {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.ea-card-btn--play .ea-card-btn__icon svg,
.ea-card-btn--calendar .ea-card-btn__icon svg {
fill: currentColor;
stroke: none;
}
.ea-card-btn__label {
display: inline-flex;
align-items: center;
padding: 0 0.875rem;
min-height: 32px;
white-space: nowrap;
}
/* Cards de artículos destacados: separación arriba del botón. */
.ea-articles-card .ea-card-btn {
margin-top: 0.75rem;
}
/* Podcast compacto: el botón reemplaza al "Escuchar →" de antes. */
.ea-podcast-compact__item .ea-card-btn {
margin-top: 0.4rem;
}
/* Investigations grid: separación arriba del botón. */
.ea-home-investigations .ea-card-btn {
margin-top: 0.6rem;
}
/* Final typography guard: Elementor and legacy blocks can set their own weights. */
body,
button,
input,
select,
textarea,
[class*="elementor-kit-"],
.elementor-widget-text-editor,
.elementor-widget-text-editor *,
.elementor-icon-list-item,
.elementor-icon-list-text,
.elementor-button,
.wp-block-post-excerpt,
.wp-block-post-content {
font-family: var(--ea-font-body) !important;
}
[class*="elementor-kit-"] {
--e-global-typography-primary-font-family: 'Geist';
--e-global-typography-primary-font-weight: 600;
--e-global-typography-primary-text-transform: none;
--e-global-typography-primary-letter-spacing: 0;
--e-global-typography-secondary-font-family: 'Geist';
--e-global-typography-secondary-font-weight: 600;
--e-global-typography-secondary-text-transform: none;
--e-global-typography-secondary-letter-spacing: 0;
--e-global-typography-text-font-family: 'Geist';
--e-global-typography-accent-font-family: 'Geist';
}
h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-heading,
.wp-block-post-title,
.wp-block-post-title a,
.wp-block-query-title,
.elementor-heading-title,
[class*="ea-"][class*="title"],
[class*="ea-"][class*="title"] a,
[class*="ea-"][class*="heading"] {
font-family: var(--ea-font-heading) !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}