/* ============================================================
   Argency — Editorial (Insights archive + Insight entry + Contacto)
   Hereda tokens, fuentes, nav, menú, botones y footer de styles.css.
   Tema claro de lectura; el footer conserva su fondo oscuro propio.
   ============================================================ */

.ed {
  background: var(--bg-1);
  color: var(--color-dark);
  -webkit-font-smoothing: antialiased;
}

/* Ancho/padding de página: usa el contenedor del sitio (.container = 1800px máx,
   32px de gutter / 16px en mobile), igual que el home y los casos.
   .ed-wide ocupa todo ese ancho; .ed-read es la columna de lectura del artículo,
   centrada dentro del mismo contenedor (mismo gutter de página). */
.ed-wide { width: 100%; }
.ed-read { max-width: 760px; margin-inline: auto; }

/* Eyebrow: usa la clase canónica .eyebrow de styles.css (guion teal + tracking).
   En páginas claras solo se ajusta el color del texto para que contraste. */
.ed .eyebrow { color: var(--dark-64); }

/* ---- Cabecera de página (archivo + contacto) --------------- */
.ed-head {
  padding-top: calc(var(--space-120) + var(--space-48));
  padding-bottom: var(--space-64);
  border-bottom: 1px solid var(--dark-8);
}
.ed-head__title {
  font-family: var(--font--heading);
  font-weight: var(--font-weight--light);
  text-transform: uppercase;
  font-size: clamp(40px, 6.5vw, 92px);
  line-height: 0.98;
  letter-spacing: -2px;
  margin: var(--space-24) 0 0;
  max-width: 16ch;
}
.ed-head__lead {
  margin-top: var(--space-32);
  max-width: 52ch;
  font-size: 18px;
  line-height: 28px;
  color: var(--dark-64);
}
/* Variante: título a la izquierda y bajada alineada a la derecha (como en Casos) */
.ed-head--split .ed-head__row {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 44ch);
  align-items: end;
  gap: var(--space-64);
}
.ed-head--split .ed-head__lead { margin-top: 0; max-width: none; }
/* título del header de Insights: tracking más abierto y aire entre líneas */
.ed-head--split .ed-head__title { letter-spacing: -1px; line-height: 1.02; }
@media (max-width: 680px) {
  .ed-head--split .ed-head__row { grid-template-columns: 1fr; gap: var(--space-24); align-items: start; }
}

/* ============================================================
   ARCHIVO DE INSIGHTS
   ============================================================ */
.ed-archive { padding-bottom: var(--space-160); }

/* destacado: primera nota a ancho completo (imagen + texto) */
.ed-featured {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-64);
  align-items: center;
  padding-block: var(--space-80);
  border-bottom: 1px solid var(--dark-8);
  color: inherit;
  text-decoration: none;
}
.ed-featured__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--dark-4);
}
.ed-featured__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.9s var(--ease-signature);
}
.ed-featured:hover .ed-featured__media img { transform: scale(1.04); }
.ed-featured__meta {
  display: flex; gap: var(--space-16); align-items: center;
  font-family: var(--font--ui); font-size: var(--text-small);
  letter-spacing: 0.5px; color: var(--dark-64);
  margin-bottom: var(--space-24);
}
.ed-featured__cat { color: var(--brand-teal); text-transform: uppercase; letter-spacing: 2px; }
.ed-featured__title {
  font-family: var(--font--heading);
  font-weight: var(--font-weight--light);
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.02;
  letter-spacing: -1.5px;
  text-transform: uppercase;
}
.ed-featured__excerpt {
  margin-top: var(--space-24);
  max-width: 46ch;
  color: var(--dark-64);
  font-size: 18px;
  line-height: 28px;
}
.ed-featured__more {
  display: inline-flex; align-items: center; gap: var(--space-8);
  margin-top: var(--space-32);
  font-family: var(--font--ui); font-size: var(--text-small);
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--color-dark);
  border-bottom: 1px solid var(--color-dark);
  padding-bottom: 2px;
  transition: gap 0.4s var(--ease-signature);
}
.ed-featured:hover .ed-featured__more { gap: var(--space-16); }

/* grilla del resto de notas */
.ed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-48) var(--space-32);
  padding-top: var(--space-80);
}
.ed-card { display: block; color: inherit; text-decoration: none; }
.ed-card__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--dark-4);
  margin-bottom: var(--space-20);
}
.ed-card__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.9s var(--ease-signature);
}
.ed-card:hover .ed-card__media img { transform: scale(1.05); }
.ed-card__meta {
  display: flex; gap: var(--space-12); align-items: center;
  font-family: var(--font--ui); font-size: 12px;
  letter-spacing: 0.5px; color: var(--dark-64);
  margin-bottom: var(--space-12);
}
.ed-card__cat { color: var(--brand-teal); text-transform: uppercase; letter-spacing: 1.5px; }
.ed-card__title {
  font-family: var(--font--heading);
  font-weight: var(--font-weight--light);
  font-size: var(--h5-size);
  line-height: 1.08;
  letter-spacing: -0.8px;
  text-transform: uppercase;
  transition: color 0.35s var(--ease-signature);
}
.ed-card:hover .ed-card__title { color: var(--brand-teal); }
.ed-card__excerpt {
  margin-top: var(--space-12);
  color: var(--dark-64);
  font-size: var(--text-small);
  line-height: 1.55;
  max-width: 40ch;
}

/* ---- Grilla principal del archivo: 2 columnas -------------- */
.ed-archive__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-64) var(--space-48);
  padding-top: var(--space-64);
}
/* en 2 columnas las cards son más grandes: media e título mayores */
.ed-archive__grid .ed-card__media { aspect-ratio: 16 / 10; margin-bottom: var(--space-24); }
.ed-archive__grid .ed-card__title { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.04; }
.ed-archive__grid .ed-card__excerpt { font-size: 18px; line-height: 28px; max-width: 48ch; }

/* card oculta hasta "Cargar más" */
.ed-card[hidden] { display: none; }

/* botón cargar más */
.ed-loadmore {
  display: flex; justify-content: center;
  margin-top: var(--space-64);
}
.ed-loadmore[hidden] { display: none; }

/* ---- Carrusel "Entradas anteriores" ------------------------ */
.ed-more { padding-top: var(--space-100); margin-top: var(--space-100); border-top: 1px solid var(--dark-8); }
.ed-more__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-24); margin-bottom: var(--space-40);
}
.ed-more__title {
  font-family: var(--font--heading); font-weight: var(--font-weight--light);
  text-transform: uppercase; font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1; letter-spacing: -1px;
}
.ed-more__nav { display: flex; gap: var(--space-12); flex-shrink: 0; }
.ed-more__arrow {
  width: 48px; height: 48px; display: grid; place-items: center;
  border: 1px solid var(--dark-32); border-radius: 50%;
  color: var(--color-dark); background: transparent;
  transition: background 0.3s var(--ease-signature), color 0.3s var(--ease-signature), border-color 0.3s;
}
.ed-more__arrow:hover { background: var(--color-dark); color: var(--color-light); border-color: var(--color-dark); }
.ed-more__arrow svg { width: 18px; height: 18px; }

.ed-carousel {
  display: flex; gap: var(--space-24);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--space-8);
}
.ed-carousel::-webkit-scrollbar { display: none; }
/* 4 columnas visibles; si hay más entradas, se desplazan con las flechas */
.ed-carousel .ed-card {
  flex: 0 0 calc((100% - 3 * var(--space-24)) / 4);
  scroll-snap-align: start;
}
.ed-carousel .ed-card__title { font-size: var(--h6-size, 22px); }

/* ============================================================
   ENTRADA (INSIGHT)
   ============================================================ */
.ed-article { padding-bottom: var(--space-120); }

.ed-back {
  display: inline-flex; align-items: center; gap: var(--space-8);
  margin-top: calc(var(--space-120) + var(--space-24));
  font-family: var(--font--ui); font-size: var(--text-small);
  letter-spacing: 1px; text-transform: uppercase; color: var(--dark-64);
  transition: color 0.3s var(--ease-signature);
}
.ed-back:hover { color: var(--brand-teal); }

.ed-article__head { padding-top: calc(var(--space-120) + var(--space-48)); padding-bottom: var(--space-40); }
.ed-article__eyebrow { display: block; margin-bottom: var(--space-24); }
.ed-article__title {
  font-family: var(--font--heading);
  font-weight: var(--font-weight--light);
  text-transform: uppercase;
  font-size: clamp(40px, 6.5vw, 92px);
  line-height: 1.0;
  letter-spacing: -2px;
  margin: 0;
  max-width: 1060px;   /* columna del título (la meta sigue a ancho completo) */
}
/* fila meta: fecha · marca · lectura — alineada a los bordes de la imagen */
.ed-article__meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-16);
  margin-top: var(--space-48);
  padding-bottom: var(--space-24);
  font-family: var(--font--ui); font-size: var(--text-small);
  letter-spacing: 0.5px; text-transform: uppercase; color: var(--dark-64);
}
.ed-article__meta-center { flex: 0 0 auto; color: var(--dark-32); }
.ed-article__meta-left,
.ed-article__meta-right { flex: 1 1 0; }
.ed-article__meta-right { text-align: right; }
.ed-article__lead {
  font-family: var(--font--heading-serif);
  font-weight: var(--font-weight--light);
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.35;
  letter-spacing: -0.4px;
  color: var(--color-dark);
}
/* la bajada vive como primer párrafo de la prosa; anula el tamaño/color base */
.ed-prose .ed-article__lead {
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.35;
  color: var(--color-dark);
  margin-bottom: var(--space-16);
}

/* imagen hero de la nota a ancho amplio */
.ed-article__hero {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--dark-4);
  margin-bottom: var(--space-64);
}
.ed-article__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Prosa de lectura -------------------------------------- */
.ed-prose { font-family: var(--font--body); }
.ed-prose > * + * { margin-top: var(--space-24); }
.ed-prose p {
  font-size: 18px;
  line-height: 28px;
  color: color-mix(in srgb, var(--color-dark) 82%, transparent);
}
.ed-prose h2 {
  font-family: var(--font--heading);
  font-weight: var(--font-weight--light);
  text-transform: uppercase;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--color-dark);
  margin-top: var(--space-64);
}
.ed-prose strong { font-weight: var(--font-weight--semi-bold); color: var(--color-dark); }
.ed-prose em { font-style: italic; }

/* cita destacada (pullquote) entre párrafos */
.ed-pull {
  margin: var(--space-64) 0;
  padding-left: var(--space-32);
  border-left: 2px solid var(--brand-teal);
}
.ed-pull p {
  font-family: var(--font--heading-serif);
  font-weight: var(--font-weight--normal);
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.8px;
  color: var(--brand-teal);
}

/* figura dentro del artículo (vive dentro de .ed-wide, más ancha que la lectura) */
.ed-figure {
  margin: var(--space-64) 0;
  background: var(--dark-4);
  overflow: hidden;
}
.ed-figure img { width: 100%; height: auto; display: block; }
.ed-figure figcaption {
  font-family: var(--font--ui); font-size: 12px; letter-spacing: 0.5px;
  color: var(--dark-64); padding: var(--space-12) 0;
}

/* pie de autor */
.ed-author {
  display: flex; align-items: center; gap: var(--space-20);
  margin-top: var(--space-80);
  padding-top: var(--space-40);
  border-top: 1px solid var(--dark-8);
}
.ed-author__avatar {
  width: 56px; height: 56px; border-radius: 50%;
  overflow: hidden; background: var(--dark-8); flex-shrink: 0;
}
.ed-author__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ed-author__name { font-weight: var(--font-weight--semi-bold); }
.ed-author__role { font-size: var(--text-small); color: var(--dark-64); margin-top: 2px; }

/* navegación entre notas */
.ed-readmore { padding-block: var(--space-80); border-top: 1px solid var(--dark-8); }
.ed-readmore__label { color: var(--dark-64); }

/* ============================================================
   CONTACTO
   ============================================================ */
.ed-contact { padding-block: var(--space-64) var(--space-120); }

/* layout en dos columnas: formulario (izq) + datos de contacto (der) */
.ed-contact__layout {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--space-80);
  align-items: start;
  text-align: left;
}

/* columna derecha: datos de contacto */
.ed-contact__aside { position: sticky; top: calc(var(--space-120) + var(--space-24)); }
.ed-contact__item { padding-block: var(--space-32); }
.ed-contact__item:first-child { border-top: 0; padding-top: 0; }
.ed-contact__label {
  display: block;
  font-family: var(--font--ui); font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--dark-64);
  margin-bottom: var(--space-12);
}
.ed-contact__value {
  font-family: var(--font--heading-serif);
  font-weight: var(--font-weight--light);
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: -0.5px;
  line-height: 1.25;
  color: var(--color-dark);
}
a.ed-contact__value { transition: color 0.3s var(--ease-signature); }
a.ed-contact__value:hover { color: var(--brand-teal); }
.ed-contact__socials { display: flex; gap: var(--space-20); margin-top: var(--space-4); }
.ed-contact__socials a {
  font-family: var(--font--ui); font-size: var(--text-small);
  letter-spacing: 1px; color: var(--dark-64);
  transition: color 0.3s var(--ease-signature);
}
.ed-contact__socials a:hover { color: var(--brand-teal); }

/* ---- Formulario (alineado a la izquierda, campos en dos columnas) --- */
.ed-form { display: grid; gap: var(--space-32); text-align: left; }
.ed-form__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-32);
}
/* campos que ocupan toda la fila */
.ed-field--full,
.ed-form__foot { grid-column: 1 / -1; }
.ed-field { display: flex; flex-direction: column; gap: var(--space-8); align-items: stretch; }
.ed-field label {
  font-family: var(--font--ui); font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--dark-64);
}
.ed-field label .req { color: var(--brand-teal); }
.ed-field input,
.ed-field select,
.ed-field textarea {
  font-family: var(--font--body);
  font-size: var(--text-base, 16px);
  text-align: left;
  color: var(--color-dark);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--dark-32);
  padding: var(--space-12) 0;
  border-radius: 0;
  transition: border-color 0.3s var(--ease-signature);
}
.ed-field select { appearance: none; cursor: pointer; }
.ed-field textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
/* placeholders chicos, en mayúsculas */
.ed-field input::placeholder,
.ed-field textarea::placeholder {
  color: var(--dark-32);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.ed-field input:focus,
.ed-field select:focus,
.ed-field textarea:focus { outline: none; border-bottom-color: var(--brand-teal); }
.ed-field input:focus-visible,
.ed-field select:focus-visible,
.ed-field textarea:focus-visible { outline: 2px solid var(--brand-teal); outline-offset: 4px; }

.ed-form__foot {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-24); margin-top: var(--space-16);
}
.ed-form__note { font-size: var(--text-small); color: var(--dark-64); max-width: 32ch; }

/* estado de éxito tras enviar */
.ed-form__success {
  display: none;
  padding: var(--space-32);
  border: 1px solid var(--brand-teal);
  background: color-mix(in srgb, var(--brand-teal) 8%, transparent);
}
.ed-form.is-sent .ed-form__success { display: block; }
.ed-form.is-sent .ed-form__fields { display: none; }
.ed-form__success-title {
  font-family: var(--font--heading);
  font-weight: var(--font-weight--light);
  text-transform: uppercase;
  font-size: var(--h5-size);
  letter-spacing: -0.8px;
  margin-bottom: var(--space-12);
}
.ed-form__success p { color: var(--dark-64); font-size: 18px; line-height: 28px; }

/* ---- CTA "Sumate al equipo" (debajo del grid, a la izquierda) ---- */
.ed-join {
  margin-top: var(--space-80);
  padding-top: var(--space-64);
  border-top: 1px solid var(--dark-8);
  text-align: left;
}
.ed-join .eyebrow { display: inline-block; margin-bottom: var(--space-16); }
.ed-join__title {
  font-family: var(--font--heading);
  font-weight: var(--font-weight--light);
  text-transform: uppercase;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.04;
  letter-spacing: -1px;
  margin: 0;
}
.ed-join__copy {
  margin: var(--space-20) 0 0;
  max-width: 52ch;
  color: var(--dark-64);
  font-size: 18px;
  line-height: 28px;
}
.ed-join__cta { margin-top: var(--space-32); }

/* botón claro: variante sobre fondo claro */
.btn--solid-dark {
  background: var(--color-dark);
  color: var(--color-light);
  border: 1px solid var(--color-dark);
}
.btn--solid-dark:hover { background: #000; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .ed-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .ed-featured { grid-template-columns: 1fr; gap: var(--space-32); }
  .ed-featured__media { order: -1; }
  /* contacto: form arriba, datos debajo */
  .ed-contact__layout { grid-template-columns: 1fr; gap: var(--space-48); }
  .ed-contact__aside { position: static; }
}
@media (max-width: 1024px) {
  /* entradas anteriores: 2 columnas en tablet */
  .ed-carousel .ed-card { flex-basis: calc((100% - var(--space-24)) / 2); }
}
@media (max-width: 600px) {
  .ed-grid { grid-template-columns: 1fr; }
  .ed-archive__grid { grid-template-columns: 1fr; gap: var(--space-48); }
  .ed-form__fields { grid-template-columns: 1fr; }
  /* entradas anteriores: ~1 columna en mobile (carrusel) */
  .ed-carousel .ed-card { flex-basis: 80vw; }
}