/* ==========================================================================
   GPE Network — Componentes
   ========================================================================== */

/* --- Botones ------------------------------------------------------------- */
.gpe-btn {
  --btn-bg: var(--gpe-wine);
  --btn-fg: #fff;
  --btn-bd: var(--gpe-wine);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gpe-s3);
  padding: 0.72rem 1.35rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd); border-radius: var(--gpe-radius-sm);
  font-family: var(--gpe-font-sans); font-size: 0.9rem; font-weight: 500;
  letter-spacing: 0.005em; line-height: 1.2; text-align: center; text-decoration: none;
  transition: background var(--gpe-dur-fast) var(--gpe-ease),
              border-color var(--gpe-dur-fast) var(--gpe-ease),
              color var(--gpe-dur-fast) var(--gpe-ease),
              transform var(--gpe-dur-fast) var(--gpe-ease);
}
.gpe-btn:hover {
  --btn-bg: var(--gpe-wine-dark); --btn-bd: var(--gpe-wine-dark);
  color: #fff; text-decoration: none; transform: translateY(-1px);
}
.gpe-btn:active { transform: translateY(0); }

.gpe-btn--ghost { --btn-bg: transparent; --btn-fg: var(--gpe-carbon); --btn-bd: var(--gpe-line); }
.gpe-btn--ghost:hover { --btn-bg: var(--gpe-paper); --btn-bd: var(--gpe-carbon); color: var(--gpe-carbon); }

.gpe-btn--emerald { --btn-bg: var(--gpe-emerald); --btn-bd: var(--gpe-emerald); }
.gpe-btn--emerald:hover { --btn-bg: var(--gpe-emerald-dark); --btn-bd: var(--gpe-emerald-dark); }

.gpe-btn--sm { padding: 0.5rem 0.95rem; font-size: 0.82rem; }

/* Enlace con flecha: el "leer más" del sitio */
.gpe-link-arrow {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-size: 0.9rem; font-weight: 500; color: var(--gpe-wine);
}
.gpe-link-arrow svg { width: 1em; height: 1em; transition: transform var(--gpe-dur) var(--gpe-ease-out); }
.gpe-link-arrow:hover { text-decoration: none; }
.gpe-link-arrow:hover svg { transform: translateX(4px); }

/* --- Etiquetas ----------------------------------------------------------- */
.gpe-tag {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.28rem 0.6rem;
  background: var(--gpe-wine-tint); color: var(--gpe-wine-dark);
  border-radius: 999px;
  font-size: var(--gpe-fs-xs); font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.gpe-tag--emerald { background: var(--gpe-emerald-tint); color: var(--gpe-emerald-dark); }
.gpe-tag--neutral { background: var(--gpe-line-soft); color: var(--gpe-text-2); }

/* --- Filtros (chips) ----------------------------------------------------- */
.gpe-filters { display: flex; flex-wrap: wrap; gap: var(--gpe-s2); margin-bottom: var(--gpe-s6); }
.gpe-filter {
  padding: 0.45rem 0.9rem;
  background: transparent; color: var(--gpe-text-2);
  border: 1px solid var(--gpe-line); border-radius: 999px;
  font-size: 0.84rem; font-weight: 500;
  transition: all var(--gpe-dur-fast) var(--gpe-ease);
}
.gpe-filter:hover { border-color: var(--gpe-carbon); color: var(--gpe-carbon); }
.gpe-filter[aria-pressed="true"] {
  background: var(--gpe-carbon); border-color: var(--gpe-carbon); color: #fff;
}

/* --- Tarjeta de proyecto ------------------------------------------------- */
.gpe-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--gpe-paper);
  border: 1px solid var(--gpe-line);
  border-radius: var(--gpe-radius);
  overflow: hidden;
  transition: transform var(--gpe-dur) var(--gpe-ease-out),
              box-shadow var(--gpe-dur) var(--gpe-ease-out),
              border-color var(--gpe-dur) var(--gpe-ease);
}
.gpe-card:hover { transform: translateY(-4px); box-shadow: var(--gpe-shadow); border-color: #D9D6CE; }

/* Filete de color superior: alterna vinotinto / esmeralda vía --card-accent */
.gpe-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--card-accent, var(--gpe-wine));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--gpe-dur-slow) var(--gpe-ease-out);
  z-index: 2;
}
.gpe-card:hover::before { transform: scaleX(1); }

.gpe-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--gpe-line-soft); }
.gpe-card__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform 700ms var(--gpe-ease-out); }
.gpe-card:hover .gpe-card__media img { transform: scale(1.04); }
/* Marcador de posición cuando aún no hay imagen del proyecto */
.gpe-card__media--empty {
  display: grid; place-items: center;
  border-bottom: 1px solid var(--gpe-line-soft);
  background:
    linear-gradient(135deg, var(--gpe-line-soft) 0%, var(--gpe-paper) 62%, var(--gpe-line-soft) 100%);
  color: var(--card-accent, var(--gpe-wine));
}
.gpe-card__media--empty svg { width: 84px; height: 84px; opacity: .16; }

.gpe-card__body { display: flex; flex-direction: column; gap: var(--gpe-s3); padding: var(--gpe-s5); flex: 1; }
.gpe-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gpe-s2); font-size: var(--gpe-fs-xs); color: var(--gpe-muted); }
.gpe-card__title { margin: 0; font-size: var(--gpe-fs-lg); line-height: 1.25; }
.gpe-card__title a { color: var(--gpe-carbon); }
.gpe-card__title a:hover { color: var(--gpe-wine); text-decoration: none; }
.gpe-card__excerpt { margin: 0; font-size: 0.925rem; line-height: 1.6; color: var(--gpe-text-2); }
.gpe-card__foot { margin-top: auto; padding-top: var(--gpe-s3); }

/* Toda la tarjeta clicable sin romper la accesibilidad del enlace real */
.gpe-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* Estado "en preparación": para líneas como Geoeconomía, que aún no se publican */
.gpe-card--draft { border-style: dashed; background: transparent; }
.gpe-card--draft:hover { transform: none; box-shadow: none; }

/* --- Proyecto destacado -------------------------------------------------- */
.gpe-featured {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 900px) { .gpe-featured { grid-template-columns: minmax(0, 1fr); } }
.gpe-featured__media { position: relative; border-radius: var(--gpe-radius-lg); overflow: hidden; box-shadow: var(--gpe-shadow-lg); }
.gpe-featured__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
.gpe-featured__media--empty {
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--gpe-wine) 0%, var(--gpe-wine-dark) 55%, #3A0D17 100%);
  color: rgba(255,255,255,.6);
}
.gpe-featured__title { font-size: var(--gpe-fs-2xl); margin-bottom: var(--gpe-s4); }
.gpe-featured__actions { display: flex; flex-wrap: wrap; gap: var(--gpe-s4); margin-top: var(--gpe-s6); }

/* Datos duros del proyecto */
.gpe-facts { display: flex; flex-wrap: wrap; gap: var(--gpe-s6); margin-top: var(--gpe-s6); }
.gpe-fact__value { font-family: var(--gpe-font-serif); font-size: var(--gpe-fs-xl); color: var(--gpe-carbon); line-height: 1; }
.gpe-fact__label { font-size: var(--gpe-fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gpe-muted); margin-top: var(--gpe-s2); }

/* --- Tarjeta de persona -------------------------------------------------- */
.gpe-person { display: flex; flex-direction: column; gap: var(--gpe-s4); }
.gpe-person__photo {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: var(--gpe-radius); background: var(--gpe-line-soft);
}
.gpe-person__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; filter: grayscale(1); transition: filter var(--gpe-dur-slow) var(--gpe-ease), transform 700ms var(--gpe-ease-out); }
.gpe-person:hover .gpe-person__photo img { filter: grayscale(0); transform: scale(1.03); }
.gpe-person__photo--empty {
  display: grid; place-items: center;
  border: 1px solid var(--gpe-line);
  background:
    radial-gradient(70% 70% at 50% 42%, var(--gpe-paper) 0%, var(--gpe-line-soft) 100%);
}
.gpe-person__photo--empty span {
  font-family: var(--gpe-font-serif); font-size: 2.2rem; letter-spacing: 0.02em;
  color: var(--gpe-muted); opacity: .5;
}
.gpe-person__name { margin: 0; font-size: var(--gpe-fs-md); line-height: 1.3; }
.gpe-person__name a { color: var(--gpe-carbon); }
.gpe-person__name a:hover { color: var(--gpe-wine); text-decoration: none; }
.gpe-person__role { margin: var(--gpe-s1) 0 0; font-size: 0.85rem; color: var(--gpe-muted); line-height: 1.5; }
.gpe-person__links { display: flex; flex-wrap: wrap; gap: var(--gpe-s3); margin-top: var(--gpe-s3); font-size: var(--gpe-fs-xs); }
.gpe-person__links a { color: var(--gpe-text-2); }
.gpe-person__links a:hover { color: var(--gpe-wine); }

/* --- Lista de publicaciones / recursos ----------------------------------- */
.gpe-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gpe-line); }
.gpe-list > li { margin: 0; border-bottom: 1px solid var(--gpe-line); }
.gpe-item {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: var(--gpe-s4);
  padding: var(--gpe-s5) 0;
  transition: padding-inline var(--gpe-dur) var(--gpe-ease);
}
.gpe-list > li:hover .gpe-item { padding-inline: var(--gpe-s3); }
.gpe-item__year { font-family: var(--gpe-font-mono); font-size: 0.8rem; color: var(--gpe-muted); min-width: 3.2em; }
.gpe-item__body { min-width: 0; }
.gpe-item__title { display: block; font-size: var(--gpe-fs-md); color: var(--gpe-carbon); font-weight: 500; line-height: 1.4; }
.gpe-item__title:hover { color: var(--gpe-wine); text-decoration: none; }
.gpe-item__cite { margin: var(--gpe-s2) 0 0; font-size: 0.875rem; color: var(--gpe-text-2); line-height: 1.6; }
.gpe-item__aside { font-size: var(--gpe-fs-xs); color: var(--gpe-muted); white-space: nowrap; }
@media (max-width: 620px) {
  .gpe-item { grid-template-columns: minmax(0, 1fr); gap: var(--gpe-s2); }
  .gpe-item__aside { justify-self: start; }
}

/* Enlaces de recurso (videos, podcasts, datos) en fila compacta */
.gpe-resources { display: flex; flex-wrap: wrap; gap: var(--gpe-s3); list-style: none; margin: 0; padding: 0; }
.gpe-resources li { margin: 0; }
.gpe-resource {
  display: inline-flex; align-items: center; gap: var(--gpe-s2);
  padding: 0.42rem 0.8rem;
  border: 1px solid var(--gpe-line); border-radius: var(--gpe-radius-sm);
  background: var(--gpe-paper);
  font-size: 0.84rem; color: var(--gpe-text-2);
  transition: border-color var(--gpe-dur-fast) var(--gpe-ease), color var(--gpe-dur-fast) var(--gpe-ease);
}
.gpe-resource:hover { border-color: var(--gpe-carbon); color: var(--gpe-carbon); text-decoration: none; }
.gpe-resource svg { width: 14px; height: 14px; flex: none; opacity: .7; }

/* --- Bloque misión / visión / objetivos ---------------------------------- */
.gpe-statement { padding: var(--gpe-s6); background: var(--gpe-paper); border: 1px solid var(--gpe-line); border-radius: var(--gpe-radius); height: 100%; }
.gpe-statement__title {
  font-family: var(--gpe-font-sans); font-size: var(--gpe-fs-xs); font-weight: 600;
  letter-spacing: var(--gpe-track-wide); text-transform: uppercase;
  color: var(--gpe-wine); margin-bottom: var(--gpe-s4);
}
.gpe-statement--emerald .gpe-statement__title { color: var(--gpe-emerald); }
.gpe-statement p { margin: 0; font-size: 0.95rem; line-height: 1.65; }

/* Lista de objetivos numerada */
.gpe-objectives { list-style: none; margin: 0; padding: 0; counter-reset: gpe-obj; }
.gpe-objectives li {
  counter-increment: gpe-obj;
  position: relative;
  padding-left: 2.75rem; padding-block: var(--gpe-s4);
  border-bottom: 1px solid var(--gpe-line);
  color: var(--gpe-text-2); font-size: 0.95rem; line-height: 1.62; margin: 0;
}
.gpe-objectives li:last-child { border-bottom: none; }
.gpe-objectives li::before {
  content: counter(gpe-obj, decimal-leading-zero);
  position: absolute; left: 0; top: var(--gpe-s4);
  font-family: var(--gpe-font-mono); font-size: 0.78rem; color: var(--gpe-wine);
}

/* --- Conmutador de idioma ------------------------------------------------ */
.gpe-lang { display: inline-flex; align-items: center; border: 1px solid var(--gpe-line); border-radius: 999px; overflow: hidden; background: var(--gpe-paper); }
.gpe-lang a, .gpe-lang span {
  padding: 0.28rem 0.7rem;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gpe-muted);
  transition: background var(--gpe-dur-fast) var(--gpe-ease), color var(--gpe-dur-fast) var(--gpe-ease);
}
.gpe-lang a:hover { background: var(--gpe-line-soft); color: var(--gpe-carbon); text-decoration: none; }
.gpe-lang [aria-current="true"] { background: var(--gpe-carbon); color: #fff; }
.gpe-lang .is-disabled { opacity: .4; cursor: not-allowed; }

/* --- Aviso / nota -------------------------------------------------------- */
.gpe-note {
  display: flex; gap: var(--gpe-s4);
  padding: var(--gpe-s5);
  background: var(--gpe-emerald-tint);
  border-left: 3px solid var(--gpe-emerald);
  border-radius: 0 var(--gpe-radius-sm) var(--gpe-radius-sm) 0;
  font-size: 0.925rem; color: var(--gpe-carbon-soft);
}
.gpe-note--wine { background: var(--gpe-wine-tint); border-left-color: var(--gpe-wine); }

/* --- Contacto ------------------------------------------------------------ */
.gpe-contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 860px) { .gpe-contact { grid-template-columns: minmax(0, 1fr); } }
.gpe-contact__mail {
  display: inline-block;
  font-family: var(--gpe-font-serif); font-size: var(--gpe-fs-lg);
  color: var(--gpe-carbon); word-break: break-word;
  border-bottom: 1px solid var(--gpe-line); padding-bottom: 2px;
}
.gpe-contact__mail:hover { color: var(--gpe-wine); border-bottom-color: var(--gpe-wine); text-decoration: none; }

/* --- Migas de pan -------------------------------------------------------- */
.gpe-crumbs { display: flex; flex-wrap: wrap; gap: var(--gpe-s2); margin-bottom: var(--gpe-s5); font-size: var(--gpe-fs-sm); color: var(--gpe-muted); }
.gpe-crumbs a { color: var(--gpe-muted); }
.gpe-crumbs a:hover { color: var(--gpe-carbon); }

/* --- Paginación ---------------------------------------------------------- */
.gpe-pagination { display: flex; flex-wrap: wrap; gap: var(--gpe-s2); justify-content: center; margin-top: var(--gpe-s7); }
.gpe-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding-inline: var(--gpe-s3);
  border: 1px solid var(--gpe-line); border-radius: var(--gpe-radius-sm);
  color: var(--gpe-text-2); font-size: 0.875rem;
}
.gpe-pagination .page-numbers:hover { border-color: var(--gpe-carbon); color: var(--gpe-carbon); text-decoration: none; }
.gpe-pagination .page-numbers.current { background: var(--gpe-carbon); border-color: var(--gpe-carbon); color: #fff; }

/* --- Revelado al hacer scroll (lo activa app.js) ------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--gpe-ease-out), transform 700ms var(--gpe-ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
/* Si el navegador no soporta IntersectionObserver o el usuario pide menos
   movimiento, app.js añade .gpe-no-reveal a <html> y todo se muestra. */
.gpe-no-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}