/* ==========================================================================
   Causa & Efecto — estilos del blog (índice + ediciones)
   Depende de styles.css (tokens :root, tipografías, header y footer).
   Las páginas del blog son estáticas y en español canónico: sin main.js,
   sin toggle de idioma, sin data-reveal.
   ========================================================================== */

.ce-page { padding: 0 var(--pad-x) 96px; }
.ce-wrap { max-width: 780px; margin: 0 auto; }

/* ---- Cejilla editorial --------------------------------------------------- */
.ce-eyebrow { display: flex; align-items: center; gap: 12px; }
.ce-eyebrow-rule { width: 34px; height: 1px; background: var(--wine); flex: none; }
.ce-eyebrow-text { font: 500 11px/1.5 'Space Grotesk'; letter-spacing: .22em; color: var(--wine); }

/* ---- Índice --------------------------------------------------------------- */
.ce-hero { padding: clamp(56px, 10vh, 110px) 0 30px; }
.ce-hero-title {
  margin: 20px 0 0;
  font: 500 clamp(42px, 7.4vw, 76px)/1.02 'Space Grotesk';
  letter-spacing: -.02em;
  color: var(--ink);
}
.ce-hero-title em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--navy); }
.ce-hero-intro { margin: 24px 0 0; max-width: 58ch; font: 400 16px/1.75 'Space Grotesk'; color: rgba(12, 16, 35, .78); }
.ce-hero-formula { margin: 26px 0 0; font: 500 11px/1.8 'Space Grotesk'; letter-spacing: .18em; color: rgba(12, 16, 35, .55); }
.ce-hero-formula strong { font-weight: 500; color: var(--navy); }

.ce-list { margin-top: clamp(36px, 6vh, 64px); border-top: 1px solid rgba(1, 33, 105, .2); }
.ce-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 18px clamp(16px, 3vw, 34px);
  padding: 26px 0;
  border-bottom: 1px solid rgba(1, 33, 105, .2);
}
.ce-item-num { font: 500 11px/1 'Space Grotesk'; letter-spacing: .2em; color: var(--wine); white-space: nowrap; }
.ce-item-title { margin: 0; font: 500 clamp(20px, 3vw, 27px)/1.25 'Space Grotesk'; color: var(--ink); }
.ce-item-title em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--navy); }
.ce-item-meta { font: 500 11px/1.6 'Space Grotesk'; letter-spacing: .16em; color: rgba(12, 16, 35, .5); white-space: nowrap; }
a.ce-item { text-decoration: none; }
a.ce-item:hover .ce-item-title { color: var(--navy); }
a.ce-item:hover .ce-item-meta { color: var(--wine); }
.ce-item-soon .ce-item-title { color: rgba(12, 16, 35, .45); }
.ce-item-soon .ce-item-num { color: rgba(107, 18, 48, .55); }

/* ---- Edición (artículo) ---------------------------------------------------- */
.ce-article { padding-top: clamp(48px, 8vh, 92px); }
.ce-top { font: 500 11px/1.7 'Space Grotesk'; letter-spacing: .18em; color: rgba(12, 16, 35, .55); }
.ce-title {
  margin: 16px 0 0;
  font: 500 clamp(32px, 5.6vw, 54px)/1.12 'Space Grotesk';
  letter-spacing: -.015em;
  color: var(--ink);
  max-width: 24ch;
}
.ce-title em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--navy); }

.ce-sec { margin-top: clamp(44px, 7vh, 68px); display: flex; align-items: center; gap: 12px; }
.ce-sec-rule { width: 30px; height: 1px; flex: none; }
.ce-sec-label { font: 500 11px/1.5 'Space Grotesk'; letter-spacing: .22em; }
.ce-sec-causa .ce-sec-rule { background: var(--wine); }
.ce-sec-causa .ce-sec-label { color: var(--wine); }
.ce-sec-efecto .ce-sec-rule { background: var(--navy); }
.ce-sec-efecto .ce-sec-label { color: var(--navy); }
.ce-sec-eco .ce-sec-rule { background: var(--wine); }
.ce-sec-eco .ce-sec-label { color: var(--wine); }

.ce-body { max-width: 62ch; }
.ce-body p { margin: 16px 0 0; font: 400 16.5px/1.8 'Space Grotesk'; color: rgba(12, 16, 35, .84); }
.ce-body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(1, 33, 105, .35); }
.ce-body a:hover { text-decoration-color: var(--wine); }
.ce-body sup { font-size: .68em; line-height: 0; }

.ce-fuentes { margin-top: 14px; font: 400 12px/1.8 'Space Grotesk'; letter-spacing: .04em; color: rgba(12, 16, 35, .5); max-width: 62ch; }
.ce-fuentes a { color: rgba(12, 16, 35, .6); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(12, 16, 35, .25); }
.ce-fuentes a:hover { color: var(--wine); }

.ce-thesis {
  margin: 22px 0 0;
  font: italic 400 clamp(21px, 3.4vw, 27px)/1.42 'Instrument Serif';
  color: var(--navy);
  max-width: 44ch;
}

.ce-jugada-label { margin-top: 34px; font: 500 11px/1.5 'Space Grotesk'; letter-spacing: .22em; color: var(--wine); }
.ce-body ol { margin: 14px 0 0; padding-left: 22px; max-width: 60ch; }
.ce-body ol li { margin: 10px 0 0; font: 400 16.5px/1.75 'Space Grotesk'; color: rgba(12, 16, 35, .84); }
.ce-body ol li::marker { font-weight: 500; color: var(--wine); }

/* ---- Cuerpo largo de LA CAUSA (formato v3: la causa es el grueso, ~75 %) ---- */
.ce-body h3 { margin: 36px 0 0; font: 500 12px/1.5 'Space Grotesk'; letter-spacing: .2em; color: var(--navy); text-transform: uppercase; }
.ce-body ul { margin: 14px 0 0; padding-left: 20px; max-width: 60ch; }
.ce-body ul li { margin: 8px 0 0; font: 400 16px/1.75 'Space Grotesk'; color: rgba(12, 16, 35, .84); }
.ce-body ul li::marker { color: var(--wine); }
.ce-table-wrap { margin: 24px 0 0; overflow-x: auto; }
.ce-body table { border-collapse: collapse; width: 100%; min-width: 480px; }
.ce-body caption { caption-side: top; text-align: left; font: 500 11px/1.5 'Space Grotesk'; letter-spacing: .18em; color: var(--wine); padding-bottom: 10px; }
.ce-body th { text-align: left; font: 500 11px/1.5 'Space Grotesk'; letter-spacing: .14em; color: var(--navy); padding: 8px 16px 8px 0; border-bottom: 1px solid rgba(1, 33, 105, .32); }
.ce-body td { vertical-align: top; font: 400 13.5px/1.65 'Space Grotesk'; color: rgba(12, 16, 35, .82); padding: 10px 16px 10px 0; border-bottom: 1px solid rgba(1, 33, 105, .16); }
.ce-body td:first-child { font-weight: 500; color: var(--ink); }

/* ---- EL ECO (formato v4: el párrafo-aforismo de Fran cierra la edición) ---- */
.ce-eco {
  margin: 24px 0 0;
  font: italic 400 clamp(20px, 3.2vw, 25px)/1.5 'Instrument Serif';
  color: var(--ink);
  max-width: 46ch;
}

/* ---- Compartir (v4.2: el eco viaja como preview del enlace;
        v4.3: + carrusel para Instagram) ---- */
.ce-share { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.ce-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 11px/1 'Space Grotesk';
  letter-spacing: .18em;
  color: var(--wine);
  background: transparent;
  border: 1px solid rgba(107, 18, 48, .35);
  border-radius: 3px;
  padding: 12px 18px;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.ce-share-btn:hover { background: var(--wine); color: var(--cream); border-color: var(--wine); }
.ce-share-btn svg { width: 13px; height: 13px; flex: none; }
.ce-share-btn.ce-share-ok { color: var(--navy); border-color: rgba(1, 33, 105, .4); background: transparent; }

.ce-signoff { margin-top: 40px; }
.ce-signoff-name { margin: 0; font: italic 400 18px/1.4 'Instrument Serif'; color: var(--navy); }
.ce-signoff-org { margin: 5px 0 0; font: 500 11px/1.5 'Space Grotesk'; letter-spacing: .2em; color: rgba(12, 16, 35, .5); }

.ce-footline {
  margin-top: clamp(48px, 8vh, 72px);
  border-top: 1px solid rgba(1, 33, 105, .25);
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.ce-footline-brand { font: 400 11px/1.6 'Space Grotesk'; letter-spacing: .16em; color: rgba(12, 16, 35, .5); }
.ce-footline-cta { font: 500 11px/1.6 'Space Grotesk'; letter-spacing: .16em; color: var(--wine); }
.ce-footline-cta:hover { color: var(--navy); }

.ce-back { display: inline-block; margin-top: 26px; font: 500 11px/1.6 'Space Grotesk'; letter-spacing: .18em; color: rgba(12, 16, 35, .55); }
.ce-back:hover { color: var(--wine); }

/* ---- Carrusel para Instagram (v4.3) --------------------------------------
   Modal a pantalla completa con la identidad del sitio: las láminas 4:5
   generadas en canvas, acciones (compartir / zip / caption) y el caption
   curado. Los botones reutilizan .ce-share-btn. */
.ce-ig-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--cream);
  overflow-y: auto;
  overscroll-behavior: contain;
}
html.ce-ig-open, html.ce-ig-open body { overflow: hidden; }
.ce-ig-inner { max-width: 1080px; margin: 0 auto; padding: 26px var(--pad-x) 72px; }
.ce-ig-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 24px;
}
.ce-ig-close { padding: 10px 14px; }
.ce-ig-strip {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 2px 12px;
}
.ce-ig-card { flex: none; width: min(300px, 72vw); scroll-snap-align: center; }
.ce-ig-card canvas {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid rgba(1, 33, 105, .18);
}
.ce-ig-card-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; }
.ce-ig-card-num { font: 500 10px/1 'Space Grotesk'; letter-spacing: .2em; color: rgba(12, 16, 35, .45); }
.ce-ig-card-dl {
  font: 600 10px/1 'Space Grotesk';
  letter-spacing: .16em;
  color: var(--wine);
  background: none;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
}
.ce-ig-card-dl:hover { color: var(--navy); }
.ce-ig-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ce-ig-btn-solid { background: var(--wine); color: var(--cream); border-color: var(--wine); }
.ce-ig-btn-solid:hover { background: transparent; color: var(--wine); }
.ce-ig-note { margin: 14px 0 0; font: 500 10.5px/1.8 'Space Grotesk'; letter-spacing: .14em; color: rgba(12, 16, 35, .5); }
.ce-ig-caption-label { display: flex; align-items: center; gap: 12px; margin-top: 34px; }
.ce-ig-caption {
  margin-top: 14px;
  max-width: 72ch;
  border: 1px solid rgba(1, 33, 105, .2);
  border-radius: 3px;
  padding: 18px 20px;
  font: 400 13.5px/1.75 'Space Grotesk';
  color: rgba(12, 16, 35, .84);
  white-space: pre-wrap;
}

@media (max-width: 640px) {
  .ce-item { grid-template-columns: 1fr; gap: 8px; }
  .ce-item-meta { letter-spacing: .12em; }
  .ce-ig-actions { flex-direction: column; align-items: stretch; }
  .ce-ig-actions .ce-share-btn { justify-content: center; }
}