/* =====================================================================
   caso.css — hoja única del sitio del caso Reconstrucción de Manabí
   Generada el 2026-09-08 desde el CSS del Personalizador, sin cambiar
   ni un color: los tokens de la Capa 0 están fijados a los valores que
   el sitio ya tenía. Cambiar de paleta = editar SOLO este bloque.
   Respaldo del original en _backups_wp/respaldo_completo_2026-09-08/
   ===================================================================== */

/* ── Capa 0 · tokens ─────────────────────────────────────────────── */
:root{
  /* superficies y tinta */
  --caso-fondo:        #fff;
  --caso-superficie:   #f4f3f0;
  --caso-superficie2:  #f4f1e8;
  --caso-tinta:        #22262b;
  --caso-tinta2:       #33383a;
  --caso-tinta-suave:  #6f6f6f;

  /* bordes */
  --caso-borde:        #dcd9d1;
  --caso-borde-suave:  #e4e1da;
  --caso-borde-suave2: #e6e3dc;

  /* acentos */
  --caso-acento:       #0E6E6E;   /* teal de los artículos */
  --caso-secundario:   #8a6d1f;   /* ámbar */
  --caso-pista:        #f0eee9;   /* canal de las barras de porcentaje */

  /* jerarquía de citas — decisión razonada, no tocar sin releer el handoff §6:
     la acusación va en gris apagado; darle el color de marca la validaría */
  --caso-cita-neutra-filete: #b3b0a8;
  --caso-cita-neutra-fondo:  #f4f3f0;
  --caso-cita-neutra-tinta:  #5a5a5a;
  --caso-cita-refut-filete:  #B8860B;
  --caso-cita-refut-fondo:   #fdf6e3;

  /* datos */
  --caso-gris-dato:    #8a8f98;   /* saldo no ejecutado */
  --caso-nota:         #6b6b6b;   /* notas al pie de tabla */

  /* marca de la portada */
  --caso-negro:        #1a1a1a;
  --caso-oro:          #C8A24A;   /* oro de la portada nueva */
  --caso-hero-fondo:   #0B0C0E;
}

/* ── Capa 1 · componentes ────────────────────────────────────────── */
/* El plugin Galleryberg pinta la leyenda como texto grande sobre un degradado
   negro encima de la foto. Aquí se convierte cada foto en una ficha: imagen
   arriba, leyenda debajo sobre fondo limpio, con jerarquía tipográfica. */

.wp-block-galleryberg-gallery .wp-block-galleryberg-image{
  background:var(--caso-fondo, #fff);
  border:1px solid var(--caso-borde-suave, #e4e1da);
  border-radius:10px;
  overflow:hidden;
  transition:box-shadow .18s ease, transform .18s ease;
}
.wp-block-galleryberg-gallery .wp-block-galleryberg-image:hover{
  box-shadow:0 6px 20px rgba(20,30,30,.10);
  transform:translateY(-2px);
}
.wp-block-galleryberg-gallery .wp-block-galleryberg-image img{
  display:block;
  width:100%;
  height:auto;
  border-radius:0;
}
.wp-block-galleryberg-gallery .wp-element-caption{
  position:static !important;
  inset:auto !important;
  background:none !important;
  background-image:none !important;
  color:var(--caso-tinta2, #33383a) !important;
  text-shadow:none !important;
  font-size:14px !important;
  line-height:1.45 !important;
  padding:12px 15px 15px !important;
  margin:0 !important;
  text-align:left !important;
  border-top:1px solid var(--caso-pista, #f0eee9);
  opacity:1 !important;
  transform:none !important;
}
.wp-block-galleryberg-gallery .wp-element-caption .gb-obra{
  display:block;
  font-size:15.5px;
  font-weight:600;
  color:var(--caso-acento, #0E6E6E);
  line-height:1.3;
  margin-bottom:4px;
}
.wp-block-galleryberg-gallery .wp-element-caption .gb-meta{
  display:block;
  font-size:13px;
  color:var(--caso-tinta-suave, #6f6f6f);
  letter-spacing:.005em;
}
.wp-block-galleryberg-gallery .wp-element-caption .gb-estado{
  display:inline-block;
  margin-top:6px;
  padding:2px 8px;
  border-radius:999px;
  background:var(--caso-superficie2, #f4f1e8);
  color:var(--caso-secundario, #8a6d1f);
  font-size:11.5px;
  letter-spacing:.02em;
  text-transform:uppercase;
}
@media (max-width:600px){
  .wp-block-galleryberg-gallery .wp-element-caption{padding:10px 12px 12px !important}
  .wp-block-galleryberg-gallery .wp-element-caption .gb-obra{font-size:14.5px}
}

/* Respaldo de columnas: en pantalla angosta una ficha por fila.
   Con 3 columnas en 419 px cada ficha medía 114 px y el texto se veía enorme. */
@media (max-width:781px){
  .wp-block-galleryberg-gallery{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media (max-width:540px){
  .wp-block-galleryberg-gallery{grid-template-columns:minmax(0,1fr) !important}
}


/* ===== Tablas de los artículos de Análisis: tarjetas en pantalla angosta =====
   En móvil una tabla de cinco columnas se cortaba justo en la columna de las
   barras, que es donde está el dato. Aquí cada fila se apila como una ficha con
   la etiqueta de la columna encima del valor. La etiqueta sale de `data-th`,
   que inyecta `_generadores/tablas_responsivas.py`.
   Mismo patrón que la matriz de la portada, para que el sitio se lea igual. */

@media (max-width:760px){
  .tbl-caso-wrap{overflow-x:visible !important; margin:18px 0 !important}

  .tbl-caso{
    display:block;
    width:100% !important;
    min-width:0 !important;
    border-collapse:separate !important;
    font-size:15px !important;
  }
  .tbl-caso thead{display:none}
  .tbl-caso tbody,
  .tbl-caso tr,
  .tbl-caso td{display:block; width:auto !important}

  .tbl-caso tr{
    border:1px solid var(--caso-borde, #dcd9d1);
    border-radius:8px;
    background:var(--caso-fondo, #fff);
    margin:0 0 14px;
    overflow:hidden;
  }
  .tbl-caso tr:last-child{margin-bottom:0}

  .tbl-caso td{
    border:0 !important;
    border-bottom:1px solid var(--caso-pista, #f0eee9) !important;
    padding:10px 14px !important;
    min-width:0 !important;
    /* Astra pinta las celdas en gris claro. Sin esto la etiqueta pesa más que
       el dato y la jerarquía queda invertida. */
    color:var(--caso-tinta, #22262b) !important;
  }
  .tbl-caso tr td:last-child{border-bottom:0 !important}

  /* La etiqueta va arriba, pequeña y en el color de la marca: hace de
     encabezado de columna sin robarle peso al dato. */
  .tbl-caso td::before{
    content:attr(data-th);
    display:block;
    font-size:11.5px;
    font-weight:600;
    letter-spacing:.045em;
    text-transform:uppercase;
    color:var(--caso-acento, #0E6E6E);
    line-height:1.35;
    margin-bottom:3px;
  }
  /* Las tablas de comparación dejan vacío el encabezado de la primera columna
     (esa columna es el criterio). Sin esto quedaría una etiqueta en blanco. */
  .tbl-caso td:not([data-th])::before,
  .tbl-caso td[data-th=""]::before{content:none}

  /* Primera celda: identifica la ficha (el año, la obra, la fuente). */
  .tbl-caso tr td:first-child{
    background:var(--caso-superficie, #f4f3f0);
    font-weight:600;
    border-bottom:1px solid var(--caso-borde-suave2, #e6e3dc) !important;
  }

  /* La barra ya no compite con el resto de columnas: ocupa la ficha entera. */
  .tbl-caso td[data-th] > span[style*="display:inline-block"]{
    min-width:0 !important;
    text-align:left !important;
  }
}

@media (max-width:400px){
  .tbl-caso{font-size:14.5px !important}
  .tbl-caso td{padding:9px 12px !important}
}

/* ── Sangrado a todo el ancho, hecho bien ─────────────────────────────
   La portada actual lo intenta con `margin: 0 -20px`, que se pasa
   exactamente 20 px y provoca el desbordamiento horizontal medido en
   /. Este patrón sí funciona a cualquier ancho: la sección se extiende
   hasta el borde de la ventana y su contenido vuelve a la columna.
   Pensado para la portada nueva; hoy no lo usa nadie.              */
.caso-sangrado{
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(20px, calc(50vw - 570px));
  padding-right: max(20px, calc(50vw - 570px));
}

/* ── Fase 3 · secciones diseñadas (plantillas de categoría) ──────────
   Sustituyen al archivo por defecto de Astra en Análisis, Galería y
   Documentos. Todo el color sale de los tokens de la Capa 0.        */

.caso-seccion{ max-width:1140px; margin:0 auto; padding:0 24px 56px }

.caso-cabecera{ padding:8px 0 30px; border-bottom:2px solid var(--caso-acento, #0E6E6E); margin-bottom:34px }
.caso-sobretitulo{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:var(--caso-acento, #0E6E6E); margin-bottom:10px;
}
.caso-titulo{ font-size:clamp(30px,4vw,44px); line-height:1.12; margin:0 0 12px; color:var(--caso-tinta, #22262b) }
.caso-entradilla{ font-size:18px; line-height:1.55; max-width:760px; margin:0; color:var(--caso-tinta2, #33383a) }

/* rejilla de fichas */
.caso-rejilla{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:26px }
.caso-rejilla--docs{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px }

.caso-ficha{ border:1px solid var(--caso-borde, #dcd9d1); background:var(--caso-fondo, #fff); overflow:hidden;
  transition:box-shadow .18s ease, transform .18s ease }
.caso-ficha:hover{ box-shadow:0 8px 24px rgba(20,30,30,.10); transform:translateY(-2px) }
.caso-ficha-enlace{ display:block; text-decoration:none; color:inherit }
.caso-ficha-foto img{ display:block; width:100%; height:200px; object-fit:cover }
.caso-ficha-cuerpo{ padding:20px 22px 22px }
.caso-ficha-titulo{ font-size:21px; line-height:1.25; margin:0 0 10px; color:var(--caso-tinta, #22262b) }
.caso-ficha-resumen{ font-size:15px; line-height:1.5; margin:0 0 14px; color:var(--caso-tinta2, #33383a) }
.caso-ficha-mas{ font-size:14px; font-weight:600; color:var(--caso-acento, #0E6E6E) }

/* fichas de documento */
.caso-doc{ border:1px solid var(--caso-borde, #dcd9d1); border-top:3px solid var(--caso-acento, #0E6E6E);
  background:var(--caso-fondo, #fff); transition:box-shadow .18s ease }
.caso-doc:hover{ box-shadow:0 6px 18px rgba(20,30,30,.09) }
.caso-doc-enlace{ display:block; padding:18px 20px 20px; text-decoration:none; color:inherit }
.caso-doc-titulo{ font-size:17px; line-height:1.3; margin:0 0 9px; color:var(--caso-tinta, #22262b) }
.caso-doc-resumen{ font-size:14px; line-height:1.5; margin:0 0 12px; color:var(--caso-tinta2, #33383a) }
.caso-doc-mas{ font-size:13.5px; font-weight:600; color:var(--caso-acento, #0E6E6E) }

/* grupos de documentos */
.caso-grupo-doc{ margin-bottom:44px }
.caso-grupo-cabecera{ margin-bottom:18px }
.caso-grupo-titulo{ font-size:24px; line-height:1.2; margin:0 0 6px; color:var(--caso-tinta, #22262b) }
.caso-grupo-nota{ font-size:15px; line-height:1.5; margin:0; color:var(--caso-tinta-suave, #6f6f6f) }

/* galería visible */
.caso-galeria-bloque{ margin-bottom:52px }
.caso-galeria-cabecera{ display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding-bottom:10px; border-bottom:1px solid var(--caso-borde, #dcd9d1); margin-bottom:20px }
.caso-galeria-titulo{ font-size:24px; line-height:1.2; margin:0; color:var(--caso-tinta, #22262b) }
.caso-galeria-cuenta{ font-size:14px; color:var(--caso-tinta-suave, #6f6f6f); white-space:nowrap }
.caso-galeria{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px }
.caso-foto{ margin:0; border:1px solid var(--caso-borde-suave, #e4e1da); background:var(--caso-fondo, #fff); overflow:hidden }
.caso-foto img{ display:block; width:100%; height:190px; object-fit:cover }
.caso-foto figcaption{ padding:10px 12px 12px; font-size:13.5px; line-height:1.4; color:var(--caso-tinta2, #33383a) }
.caso-galeria-pie{ margin:16px 0 0; font-size:15px }
.caso-galeria-pie a, .caso-pie-seccion a{ color:var(--caso-acento, #0E6E6E); font-weight:600 }
.caso-pie-seccion{ margin:34px 0 0; padding-top:22px; border-top:1px solid var(--caso-borde, #dcd9d1);
  font-size:15px; line-height:1.55; color:var(--caso-tinta2, #33383a) }

@media (max-width:900px){
  .caso-rejilla--docs{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .caso-galeria{ grid-template-columns:repeat(2, minmax(0,1fr)) }
}
@media (max-width:640px){
  .caso-seccion{ padding:0 16px 40px }
  .caso-rejilla, .caso-rejilla--2, .caso-rejilla--docs, .caso-galeria{ grid-template-columns:1fr }
  .caso-ficha-foto img{ height:180px }
  .caso-foto img{ height:210px }
  .caso-galeria-cabecera{ flex-direction:column; align-items:flex-start; gap:4px }
}


/* ── Fase 4 · página /el-caso-explicado/ ─────────────────────────────
   CSS de la línea de tiempo (_generadores/linea_tiempo_16a.html),
   acotado bajo .caso-explicado para que sus clases genéricas (.wrap,
   .panel, .grid2, .stat) no colisionen con el resto del sitio.
   Se retiraron el modo oscuro y los conmutadores de tema: el sitio es claro.
   ──────────────────────────────────────────────────────────────────── */

.caso-explicado{--paper:#F7F6F3; --ink:#191D21; --muted:#5B6570; --faint:#8A929B;
    --line:var(--caso-borde, #DCD9D1); --panel:#FFFFFF; --panel2:#F1EFE9;
    --accent:var(--caso-acento, #0E6E6E); --accent-ink:#0B4F4F;
    --decline:#A6432E; --highlight:#9C7420; --good:#2E7D6B;
    --shadow:0 1px 2px rgba(25,29,33,.05),0 8px 24px rgba(25,29,33,.06);
    --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
    --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --mono:"SF Mono",ui-monospace,"JetBrains Mono","Roboto Mono",Menlo,monospace;}
.caso-explicado *{box-sizing:border-box}
.caso-explicado{margin:0}
.caso-explicado .wrap{background:var(--paper); color:var(--ink); font-family:var(--sans);
    line-height:1.55; -webkit-font-smoothing:antialiased; padding:clamp(18px,4vw,56px) clamp(16px,4vw,40px) 72px;}
.caso-explicado .doc{max-width:1000px;margin:0 auto}
.caso-explicado .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.caso-explicado h1{font-family:var(--serif);font-weight:600;font-size:clamp(26px,4.4vw,44px);line-height:1.08;margin:0 0 12px;text-wrap:balance;letter-spacing:-.01em}
.caso-explicado .lede{font-size:clamp(15px,1.7vw,18px);color:var(--muted);max-width:64ch;margin:0}
.caso-explicado .meta{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.caso-explicado .tag{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 10px;background:var(--panel)}
.caso-explicado .rule{height:1px;background:var(--line);border:0;margin:clamp(28px,4vw,44px) 0}
.caso-explicado h2{font-family:var(--serif);font-weight:600;font-size:clamp(19px,2.4vw,26px);margin:0 0 4px;letter-spacing:-.01em}
.caso-explicado .sub{color:var(--muted);font-size:14px;margin:0 0 20px}
.caso-explicado /* ---- thesis chart ---- */
  .thesis{display:grid;grid-template-columns:1.2fr .9fr;gap:clamp(20px,3vw,40px);align-items:center}
@media(max-width:760px){
.caso-explicado .thesis{grid-template-columns:1fr}}
.caso-explicado .chartcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 20px 8px;box-shadow:var(--shadow)}
.caso-explicado .chart-cap{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}
.caso-explicado .chart-cap b{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500}
.caso-explicado .legend{display:flex;gap:14px;flex-wrap:wrap;margin:10px 2px 4px;font-size:12px;color:var(--muted);font-family:var(--mono)}
.caso-explicado .legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.caso-explicado .keyfacts{display:flex;flex-direction:column;gap:16px}
.caso-explicado .kf{display:flex;gap:14px;align-items:flex-start}
.caso-explicado .kf .n{font-family:var(--serif);font-weight:600;font-size:clamp(28px,4vw,38px);line-height:1;color:var(--accent);font-variant-numeric:tabular-nums;min-width:2.6ch}
.caso-explicado .kf .n.bad{color:var(--decline)}
.caso-explicado .kf .t{font-size:14px;color:var(--ink)}
.caso-explicado .kf .t span{display:block;color:var(--muted);font-size:12.5px}
.caso-explicado /* ---- controls ---- */
  .controls{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.caso-explicado .controls button{font-family:var(--mono);font-size:12px;letter-spacing:.03em;cursor:pointer;border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:999px;padding:7px 13px;transition:all .15s}
.caso-explicado .controls button:hover{color:var(--ink);border-color:var(--faint)}
.caso-explicado .controls button[aria-pressed="true"]{color:var(--paper);background:var(--ink);border-color:var(--ink)}
.caso-explicado .controls button .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:0}
.caso-explicado /* ---- timeline ---- */
  .tl{position:relative;margin-top:6px}
.caso-explicado .band{position:relative;padding:2px 0 2px 0;margin:0}
.caso-explicado .band-h{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:10px;padding:10px 0;background:linear-gradient(var(--paper),var(--paper) 70%,transparent)}
.caso-explicado .band-h .gov{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.caso-explicado .band-h .yr{font-family:var(--mono);font-size:12px;color:var(--faint)}
.caso-explicado .band-h .exec{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted)}
.caso-explicado .rows{position:relative;margin-left:8px;padding-left:26px;border-left:2px solid var(--line)}
.caso-explicado .ev{position:relative;padding:12px 0 18px}
.caso-explicado .ev::before{content:"";position:absolute;left:-35px;top:16px;width:12px;height:12px;border-radius:50%;background:var(--panel);border:2px solid var(--faint);transition:all .15s}
.caso-explicado .ev.acc::before{border-color:var(--accent);background:var(--accent)}
.caso-explicado .ev.bad::before{border-color:var(--decline);background:var(--decline)}
.caso-explicado .ev.hl::before{border-color:var(--highlight);background:var(--highlight)}
.caso-explicado .ev .date{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.02em}
.caso-explicado .ev h3{font-family:var(--serif);font-weight:600;font-size:17px;margin:3px 0 5px;letter-spacing:-.005em}
.caso-explicado .ev p{margin:0;font-size:14.5px;color:var(--ink)}
.caso-explicado .ev .fig{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600}
.caso-explicado .ev .fig.bad{color:var(--decline)}
.caso-explicado .ev .fig.acc{color:var(--accent-ink)}
.caso-explicado .ev .src{margin-top:8px;font-family:var(--mono);font-size:11.5px;color:var(--faint);display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:6px;padding:3px 8px;background:var(--panel2)}
.caso-explicado .ev .src b{color:var(--muted);font-weight:600}
.caso-explicado .dim .ev{opacity:.28;filter:saturate(.4)}
.caso-explicado .dim .ev.match{opacity:1;filter:none}
.caso-explicado .ev{transition:opacity .2s,filter .2s}
.caso-explicado /* ---- neteo ---- */
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:760px){
.caso-explicado .grid2{grid-template-columns:1fr}}
.caso-explicado .panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--shadow)}
.caso-explicado .panel.brick{border-left:3px solid var(--decline)}
.caso-explicado .panel.teal{border-left:3px solid var(--accent)}
.caso-explicado .panel h4{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;font-weight:600}
.caso-explicado .stat{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:9px 0;border-bottom:1px dashed var(--line)}
.caso-explicado .stat:last-child{border-bottom:0}
.caso-explicado .stat .l{font-size:14px;color:var(--ink)}
.caso-explicado .stat .l span{display:block;color:var(--faint);font-size:12px;font-family:var(--mono)}
.caso-explicado .stat .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;font-size:15px;white-space:nowrap}
.caso-explicado .stat .v.bad{color:var(--decline)}
.caso-explicado .stat .v.good{color:var(--good)}
.caso-explicado /* ---- doble rasero ---- */
  .rasero{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
@media(max-width:680px){
.caso-explicado .rasero{grid-template-columns:1fr}}
.caso-explicado .rside{padding:24px;background:var(--panel)}
.caso-explicado .rside.then{border-right:1px solid var(--line)}
.caso-explicado .rside .yr{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.caso-explicado .rside .big{font-family:var(--serif);font-size:clamp(18px,2.3vw,22px);font-weight:600;margin:6px 0 10px;line-height:1.15}
.caso-explicado .rside p{margin:0;font-size:14px;color:var(--muted)}
.caso-explicado .rside.then .big{color:var(--decline)}
.caso-explicado .rside.now .big{color:var(--accent-ink)}
.caso-explicado .vs{display:flex;align-items:center;justify-content:center;padding:0 4px;background:var(--panel2)}
.caso-explicado .vs span{font-family:var(--serif);font-style:italic;color:var(--faint);font-size:15px}
@media(max-width:680px){
.caso-explicado .rside.then{border-right:0;border-bottom:1px solid var(--line)}
.caso-explicado .vs{padding:8px}}
.caso-explicado .callout{margin-top:20px;background:var(--panel2);border-radius:12px;padding:18px 20px;font-size:15px}
.caso-explicado .callout b{color:var(--highlight)}
.caso-explicado footer{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);color:var(--faint);font-size:12.5px}
.caso-explicado footer .srcs{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;margin:10px 0 0;font-family:var(--mono);font-size:11.5px}
@media(max-width:680px){
.caso-explicado footer .srcs{grid-template-columns:1fr}}
.caso-explicado footer .disc{margin-top:16px;font-style:italic;color:var(--faint)}
.caso-explicado .amount{color:var(--ink)}
@media (prefers-reduced-motion:reduce){
.caso-explicado *{transition:none!important;animation:none!important}}


/* ── Fase 4 · página /estado-del-proceso/ ───────────────────────────── */
.caso-estado{ max-width:840px; margin:0 auto }
.caso-estado .caso-eyebrow{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:var(--caso-acento, #0E6E6E); margin:0 0 10px;
}
.caso-estado .caso-h1{ font-size:clamp(30px,4.2vw,44px); line-height:1.12; margin:0 0 14px; color:var(--caso-tinta, #22262b) }
.caso-estado .caso-lede{ font-size:19px; line-height:1.55; margin:0 0 32px; color:var(--caso-tinta2, #33383a) }
.caso-estado h2{ font-size:26px; line-height:1.2; margin:40px 0 12px; padding-bottom:8px;
  border-bottom:2px solid var(--caso-acento, #0E6E6E); color:var(--caso-acento, #0E6E6E) }
.caso-estado h3{ font-size:19px; line-height:1.3; margin:28px 0 8px; color:var(--caso-tinta, #22262b) }
.caso-estado p{ font-size:16.5px; line-height:1.65; margin:0 0 14px; color:var(--caso-tinta2, #33383a) }

.caso-docket{ border:1px solid var(--caso-tinta, #22262b); background:var(--caso-fondo, #fff); margin:0 0 8px }
.caso-docket-fila{ display:flex; gap:18px; padding:11px 18px; border-bottom:1px solid var(--caso-borde-suave, #e4e1da); font-size:15.5px }
.caso-docket-fila:last-child{ border-bottom:0 }
.caso-docket-fila > span{ flex:0 0 190px; color:var(--caso-tinta-suave, #6f6f6f) }
.caso-docket-fila > b{ flex:1 1 auto; color:var(--caso-tinta, #22262b); font-weight:600 }
.caso-docket-destacada{ background:var(--caso-superficie, #f4f3f0) }
.caso-docket-destacada > b{ letter-spacing:.06em }

.caso-cita-fallo{ margin:16px 0 18px; padding:16px 20px; border-left:4px solid #b3b0a8;
  background:var(--caso-cita-neutra-fondo, #f4f3f0) }
.caso-cita-fallo p{ margin:0 0 8px; font-size:15.5px; line-height:1.6; color:var(--caso-cita-neutra-tinta, #5a5a5a) }
.caso-cita-fallo cite{ font-size:13px; font-style:normal; color:var(--caso-tinta-suave, #6f6f6f) }

.caso-enlaces-doc{ margin:0 0 18px; padding-left:20px }
.caso-enlaces-doc li{ font-size:16px; line-height:1.6; margin:0 0 10px; color:var(--caso-tinta2, #33383a) }
.caso-enlaces-doc a{ color:var(--caso-acento, #0E6E6E); font-weight:600 }
.caso-pie-nota{ margin-top:34px; padding-top:18px; border-top:1px solid var(--caso-borde, #dcd9d1);
  font-size:14px !important; color:var(--caso-tinta-suave, #6f6f6f) !important }

@media (max-width:640px){
  .caso-docket-fila{ flex-direction:column; gap:3px }
  .caso-docket-fila > span{ flex:none; font-size:13px }
}

/* ── Fase 5 · portada ────────────────────────────────────────────────
   Sustituye al monolito de 63 KB que vivía en el post_content.
   El sangrado a todo el ancho usa .caso-sangrado, no márgenes negativos. */

.caso-portada{ margin:0 }
.caso-portada section{ margin:0 0 56px }
.caso-portada section:last-child{ margin-bottom:0 }

/* — veredicto — */
.caso-hero{ background:var(--caso-hero-fondo, #0B0C0E); color:#F2F0EC; padding-top:0 !important; padding-bottom:0 !important }
.caso-hero-fig{ margin:0 calc(-1 * var(--caso-hero-pad, 0px)); }
.caso-hero-fig img{ display:block; width:100%; height:auto }
.caso-hero-pies{ display:flex; justify-content:space-between; gap:16px; padding:9px 2px 0;
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:12.5px; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(242,240,236,.72) }
.caso-hero-pies span:last-child{ color:var(--caso-oro, #C8A24A) }

.caso-hero-texto{ display:flex; flex-wrap:wrap; gap:20px 46px; align-items:flex-start;
  padding:28px 0 26px; margin-top:22px; border-top:2px solid var(--caso-oro, #C8A24A) }
.caso-chip{ flex:0 1 auto; max-width:100%; margin:0; border:1px solid var(--caso-oro, #C8A24A);
  padding:6px 13px; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; line-height:1.5; color:#E8D5A2; order:2 }
.caso-hero-h1{ flex:1 1 420px; margin:0; order:1;
  font-size:clamp(38px,5.6vw,66px); line-height:.98; letter-spacing:-.01em;
  text-transform:uppercase; font-weight:800; color:#F2F0EC }
.caso-hero-h1 span{ color:var(--caso-oro, #C8A24A) }
.caso-hero-sub{ flex:1 1 380px; order:3; margin:0; font-size:16.5px; line-height:1.55; color:rgba(242,240,236,.92) }
.caso-hero-sub a{ color:var(--caso-oro, #C8A24A); font-weight:600; white-space:nowrap }

.caso-cifras{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  background:rgba(242,240,236,.16); border-top:1px solid rgba(242,240,236,.16) }
.caso-cifra{ background:var(--caso-hero-fondo, #0B0C0E); padding:20px 24px 24px }
.caso-cifra b{ display:block; font-size:38px; line-height:1; font-weight:800; color:var(--caso-oro, #C8A24A) }
.caso-cifra p{ margin:8px 0 0; font-size:14.5px; line-height:1.45; color:rgba(242,240,236,.92) }
.caso-cifra cite{ display:block; margin-top:9px; font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:12px; font-style:normal; color:rgba(242,240,236,.62) }

/* — sinopsis — */
.caso-faq{ max-width:860px; margin-inline:auto }
.caso-faq-item{ padding:18px 0; border-bottom:1px solid var(--caso-borde, #dcd9d1) }
.caso-faq-item h2{ font-size:21px; line-height:1.25; margin:0 0 8px; color:var(--caso-acento, #0E6E6E) }
.caso-faq-item p{ margin:0; font-size:16.5px; line-height:1.6; color:var(--caso-tinta2, #33383a) }
.caso-faq-mas{ margin:18px 0 0; font-size:15.5px }
.caso-faq-mas a, .caso-cierre-enlaces a{ color:var(--caso-acento, #0E6E6E); font-weight:600 }

/* — reto — */
.caso-reto{ background:var(--caso-superficie2, #f4f1e8); padding-top:34px !important; padding-bottom:34px !important }
.caso-reto h2{ margin:0 0 12px; font-size:clamp(24px,3.2vw,32px); line-height:1.18; color:var(--caso-tinta, #22262b) }
.caso-reto p{ margin:0 0 10px; font-size:16.5px; line-height:1.6; max-width:820px; color:var(--caso-tinta2, #33383a) }
.caso-reto-cierre{ font-weight:600; color:var(--caso-tinta, #22262b) !important }

/* — bloques con enlaces — */
.caso-bloque-h2{ font-size:26px; line-height:1.2; margin:0 0 6px; color:var(--caso-tinta, #22262b) }
.caso-bloque-sub{ margin:0 0 20px; font-size:16px; color:var(--caso-tinta-suave, #6f6f6f) }
.caso-enlaces-rejilla{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px }
.caso-enlaces-rejilla--3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.caso-enlaces-rejilla a{ display:block; padding:16px 18px; text-decoration:none;
  border:1px solid var(--caso-borde, #dcd9d1); border-left:3px solid var(--caso-acento, #0E6E6E);
  background:var(--caso-fondo, #fff); transition:box-shadow .18s ease }
.caso-enlaces-rejilla a:hover{ box-shadow:0 6px 18px rgba(20,30,30,.09) }
.caso-enlaces-rejilla b{ display:block; font-size:16.5px; line-height:1.3; margin-bottom:5px; color:var(--caso-tinta, #22262b) }
.caso-enlaces-rejilla span{ font-size:14px; line-height:1.45; color:var(--caso-tinta2, #33383a) }

/* — tira de fotos — */
.caso-tira{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; align-items:stretch }
.caso-tira-foto{ margin:0; overflow:hidden; background:var(--caso-superficie, #f4f3f0) }
.caso-tira-foto img{ display:block; width:100%; height:150px; object-fit:cover }
.caso-tira-mas{ grid-column:1 / -1; margin-top:6px; font-size:15.5px; font-weight:600;
  color:var(--caso-acento, #0E6E6E); text-decoration:none }

/* — cierre — */
.caso-cierre{ background:var(--caso-negro, #1a1a1a); color:#F2F0EC; text-align:center;
  padding-top:44px !important; padding-bottom:44px !important }
.caso-cierre h2{ margin:0 0 10px; font-size:clamp(24px,3.4vw,34px); line-height:1.2; color:var(--caso-oro, #C8A24A) }
.caso-cierre p{ margin:0 0 8px; font-size:17px; line-height:1.55; color:rgba(242,240,236,.9) }
.caso-cierre-enlaces{ margin-top:18px !important; font-size:15.5px }
.caso-cierre-enlaces a{ color:var(--caso-oro, #C8A24A) }

@media (max-width:820px){
  .caso-cifras{ grid-template-columns:1fr }
  .caso-enlaces-rejilla, .caso-enlaces-rejilla--3{ grid-template-columns:1fr }
  .caso-tira{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .caso-hero-pies{ font-size:11px; letter-spacing:.05em }
  .caso-hero-texto{ gap:16px }
}

/* red de seguridad: ningún hijo de la portada puede desbordar el ancho.
   OJO: no tocar la altura en general — pisaría el height fijo de la tira. */
.caso-portada, .caso-portada *{ max-width:100% }
.caso-hero-fig img{ height:auto }
.caso-tira-foto{ align-self:start }

/* =====================================================================
   Capa 3 · portada editorial — 2026-09-09
   La portada nació con el hero del lienzo aprobado sobre el resto de la
   plantilla vieja: tres fondos distintos, dos negros y los títulos en el
   teal heredado. Esto la vuelve UNA pieza en el lenguaje que se aprobó.
   Ojo con el alcance: los artículos publicados llevan sus colores
   LITERALES en línea (#0E6E6E y compañía), no tokens, así que aquí no se
   toca la paleta global; se viste la portada y el marco, y nada más.
   ===================================================================== */

:root{
  --caso-display:  Anton, "Arial Narrow", Impact, sans-serif;
  --caso-texto:    Archivo, Roboto, "Helvetica Neue", Arial, sans-serif;
  --caso-mono:     "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --caso-noche:    #0B0C0E;   /* el ÚNICO negro del sitio */
  --caso-teja:     #111316;   /* superficie elevada sobre la noche */
  --caso-linea:    rgba(242,240,236,.14);
  --caso-crema:    #F2F0EC;
  --caso-crema2:   rgba(242,240,236,.74);
  --caso-crema3:   rgba(242,240,236,.56);
  --caso-oro-claro:#E8D5A2;
}

html body{ font-family:var(--caso-texto) }
html body h1, html body h2, html body h3,
html body h4, html body .site-title{ font-family:var(--caso-texto) }

/* ── el suelo de la portada ───────────────────────────────────────── */
body.home #content,
body.home .site-content,
body.home #primary,
body.home .ast-container,
body.home .entry-content,
.caso-portada{ background:var(--caso-noche) }
.caso-portada{ color:var(--caso-crema) }
.caso-portada h1, .caso-portada h2, .caso-portada h3{ color:var(--caso-crema) }
.caso-portada a{ color:var(--caso-oro, #C8A24A) }

/* Anton solo donde el lienzo lo usaba: el titular y las cifras */
.caso-hero-h1, .caso-cifra b{ font-family:var(--caso-display); font-weight:400; letter-spacing:.004em }
.caso-hero-h1{ line-height:.98 }
.caso-cifra b{ font-size:44px }
.caso-chip, .caso-hero-pies, .caso-cifra cite{ font-family:var(--caso-mono) }

/* ── sinopsis: se va el teal ──────────────────────────────────────── */
.caso-faq{ padding-block:46px 8px }
.caso-faq-item{ border-bottom:1px solid var(--caso-linea); padding:22px 0 }
.caso-faq-item:last-of-type{ border-bottom:0 }
.caso-faq-item h2{ color:var(--caso-crema); font-size:22px; font-weight:600 }
.caso-faq-item p{ color:var(--caso-crema2) }
.caso-faq-mas a, .caso-cierre-enlaces a{ color:var(--caso-oro, #C8A24A) }

/* ── el reto: superficie elevada, no beige ────────────────────────── */
.caso-reto{ background:var(--caso-teja); border-top:1px solid var(--caso-linea);
  border-bottom:1px solid var(--caso-linea) }
.caso-reto h2{ color:var(--caso-crema) }
.caso-reto p{ color:var(--caso-crema2) }
.caso-reto-cierre{ color:var(--caso-oro-claro) !important }

/* ── bloques de sección ───────────────────────────────────────────── */
.caso-bloque{ padding-block:40px 4px }
.caso-bloque-h2{ color:var(--caso-crema); font-weight:600 }
.caso-bloque-sub{ color:var(--caso-crema3) }

/* fichas de análisis */
.caso-portada .caso-ficha{ background:var(--caso-teja); border-color:var(--caso-linea) }
.caso-portada .caso-ficha:hover{ box-shadow:0 10px 30px rgba(0,0,0,.55); transform:translateY(-2px) }
.caso-portada .caso-ficha-titulo{ color:var(--caso-crema) }
.caso-portada .caso-ficha-resumen{ color:var(--caso-crema2) }
.caso-portada .caso-ficha-mas{ color:var(--caso-oro, #C8A24A) }

/* tarjetas de documentos */
.caso-portada .caso-enlaces-rejilla a{ background:var(--caso-teja);
  border:1px solid var(--caso-linea); border-left:3px solid var(--caso-oro, #C8A24A) }
.caso-portada .caso-enlaces-rejilla a:hover{ box-shadow:0 10px 30px rgba(0,0,0,.55) }
.caso-portada .caso-enlaces-rejilla b{ color:var(--caso-crema) }
.caso-portada .caso-enlaces-rejilla span{ color:var(--caso-crema3); font-family:var(--caso-mono); font-size:13px }

/* tira de fotos */
.caso-portada .caso-tira-foto{ background:var(--caso-teja) }
.caso-portada .caso-tira-mas a{ color:var(--caso-oro, #C8A24A) }

/* ── cierre: un solo negro, no dos ────────────────────────────────── */
.caso-cierre{ background:var(--caso-noche); border-top:2px solid var(--caso-oro, #C8A24A) }
.caso-cierre h2{ font-family:var(--caso-display); font-weight:400; letter-spacing:.005em }

/* ── el marco: cabecera y pie dejan de contradecir la página ──────── */
.ast-primary-header-bar, .ast-header-break-point .ast-mobile-header-wrap,
.ast-primary-header-bar.ast-primary-header{ background:var(--caso-noche) !important;
  border-bottom:1px solid var(--caso-linea) !important }
.main-header-menu .menu-link, .main-header-menu > .menu-item > .menu-link,
.ast-header-break-point .main-navigation .menu-link{ color:var(--caso-crema2) !important }
.main-header-menu .menu-item:hover > .menu-link,
.main-header-menu .current-menu-item > .menu-link{ color:var(--caso-oro, #C8A24A) !important }
.main-header-menu .current-menu-item, .main-header-menu .menu-item.current-menu-item{ background:transparent !important }
.ast-header-social-wrap a, .ast-header-social-wrap svg{ fill:var(--caso-crema2); color:var(--caso-crema2) }
.ast-custom-button{ background:var(--caso-oro, #C8A24A) !important; color:var(--caso-noche) !important;
  font-weight:600; border:0 !important }
.ast-custom-button:hover{ background:var(--caso-oro-claro) !important }
.ast-mobile-menu-trigger-fill, .ast-button-wrap .menu-toggle{ background:var(--caso-oro, #C8A24A) !important;
  color:var(--caso-noche) !important }
.ast-header-break-point .main-header-bar-navigation{ background:var(--caso-noche) }

.site-footer, .site-primary-footer-wrap, .site-below-footer-wrap,
.site-above-footer-wrap{ background:var(--caso-noche) !important; color:var(--caso-crema2) }
.site-footer .widget-area, .site-footer p, .site-footer .ast-footer-copyright,
.site-footer .footer-nav-wrap a{ color:var(--caso-crema2) !important }
.site-footer a:hover{ color:var(--caso-oro, #C8A24A) !important }
.site-footer .widget-title, .site-footer h2, .site-footer h3{ color:var(--caso-crema) !important }
.site-footer img.wp-image-1928, .site-footer .wp-image-16{ filter:brightness(0) invert(1); opacity:.85 }

/* ── logotipo tipográfico, en lugar del icono ─────────────────────── */
.crm-marca{ display:block; text-decoration:none; line-height:1.05 }
.crm-marca .crm-marca-alto{ display:block; font-family:var(--caso-mono); font-size:10.5px;
  letter-spacing:.18em; color:var(--caso-oro, #C8A24A); margin-bottom:4px }
.crm-marca .crm-marca-bajo{ display:block; font-family:var(--caso-display); font-weight:400;
  font-size:clamp(19px,2.1vw,25px); letter-spacing:.012em; color:var(--caso-crema) }
.crm-marca:hover .crm-marca-bajo{ color:var(--caso-oro-claro) }

@media (max-width:600px){
  .caso-cifra b{ font-size:38px }
  .crm-marca .crm-marca-bajo{ font-size:17px }
  .crm-marca .crm-marca-alto{ font-size:9.5px; letter-spacing:.14em }
}

/* ── Capa 3b · el canalón que faltaba ──────────────────────────────
   La página usa ast-page-builder-template, que deja el contenedor sin
   relleno lateral. Las franjas a sangre traen el suyo (.caso-sangrado);
   las demás secciones quedaban pegadas al borde y las tarjetas de la
   derecha se cortaban. Mismo canalón para todos, así se alinean.
   ------------------------------------------------------------------ */
.caso-portada > *:not(.caso-sangrado){
  padding-left:  max(20px, calc(50vw - 570px));
  padding-right: max(20px, calc(50vw - 570px));
}
/* la sinopsis ya no necesita centrarse: la red de seguridad
   .caso-portada *{max-width:100%} anulaba su max-width y la dejaba a
   todo lo ancho. Se le da medida de lectura al párrafo, no a la caja. */
.caso-faq{ max-width:none; margin-inline:0 }
.caso-faq-item p{ max-width:900px }

/* el botón de volver arriba también es parte del marco */
#ast-scroll-top{ background:var(--caso-oro, #C8A24A) !important; color:var(--caso-noche) !important }

/* ── Capa 3c · el elemento activo del menú ─────────────────────────
   Astra pinta el fondo del elemento actual en el <a>, no en el <li>
   (.ast-builder-menu-1 .menu-item.current-menu-item > .menu-link, en su
   CSS en línea): quedaba un bloque blanco #f6f7fd con el texto dorado
   encima, 2,25 de contraste. Se marca con una regla dorada, no con un
   bloque de color.
   ------------------------------------------------------------------ */
.ast-builder-menu-1 .menu-item.current-menu-item > .menu-link,
.ast-builder-menu-1 .menu-item.current-menu-ancestor > .menu-link,
.main-header-menu .current-menu-item > .menu-link{
  background:transparent !important;
  color:var(--caso-oro, #C8A24A) !important;
  box-shadow:inset 0 -2px 0 var(--caso-oro, #C8A24A);
}
.ast-header-break-point .main-header-menu .current-menu-item > .menu-link{ box-shadow:none }

/* ── Capa 3d · el pie ──────────────────────────────────────────────
   El icono seguía apareciendo en el widget del pie (wp-image-1928): se
   oculta, como en la cabecera, y en su lugar queda el nombre en texto.
   Los enlaces de los widgets heredaban un gris de la plantilla vieja
   que sobre negro no se leía.
   ------------------------------------------------------------------ */
.site-footer img.wp-image-1928,
.site-footer .wp-image-16{ display:none }
.site-footer .widget_media_image + *,
.site-footer .footer-widget-area p:first-of-type{ margin-top:0 }

.site-footer a, .site-footer .widget a, .site-footer li a{
  color:var(--caso-crema2) !important; text-decoration:none }
.site-footer a:hover, .site-footer .widget a:hover{ color:var(--caso-oro, #C8A24A) !important }
.site-footer .widget-title, .site-footer .widget h2, .site-footer h3{
  color:var(--caso-crema) !important; font-size:19px; font-weight:600;
  letter-spacing:.01em; margin-bottom:14px }
.site-footer .ast-footer-copyright, .site-footer .ast-footer-copyright p{
  color:var(--caso-crema3) !important; font-size:13.5px }
.site-footer .footer-social-item svg, .ast-footer-social-wrap svg{ fill:var(--caso-crema2) }
.site-footer .footer-social-item:hover svg{ fill:var(--caso-oro, #C8A24A) }

/* el nombre del sitio, en texto, donde estaba el icono */
.site-footer .widget_media_image::after{
  content:"LA VERDAD DE LA RECONSTRUCCIÓN DE MANABÍ";
  display:block; font-family:var(--caso-display); font-size:20px;
  line-height:1.15; letter-spacing:.012em; color:var(--caso-crema); margin-bottom:12px }

/* el logotipo de texto del pie caía debajo del párrafo por el orden de
   los widgets; el nombre ya está en la línea de copyright, así que se
   retira y la columna queda limpia. */
.site-footer .widget_media_image::after{ content:none }

/* «SIN MOTIVACIÓN.» va entero en su línea, como en el lienzo: en móvil
   se quedaba «SIN» colgado al final de la primera. */
.caso-hero-h1 span{ display:block }