/* Portada del clon, rediseño «paso a paso» (aprobado el 2026-11-09). Lo enlaza clon-estatico/portada.py.
   Misma estructura de la portada de WordPress, con menos peso a lo viejo. Cada cambio va bajo una clase en
   <html> (ilp-*), para poder quitar uno sin tocar los demás. Solo CSS: sin estilos inline ni JS propio. */

/* A. Arriba: sin el banner «Si vis pacem… VII aniversario» (fue hace años). */
html.ilp-banner #panel-gb93-6aee403eb29de-1-0-0{display:none}

/* B. Carrusel de fotos más bajo: franja en vez de foto casi cuadrada. */
html.ilp-carrusel #pg-gb93-6aee403eb29de-1 .sow-slider-image img.sow-slider-background-image{
  width:100%;height:clamp(200px,36vw,420px);object-fit:cover;object-position:50% 40%}

/* C. Foto de la conferencia (la del «IMPACT Accelerator») al lado del texto «Colaboramos con líderes…»,
   en vez de ocupar todo el ancho. portada.py la copia ahí; la fila original se oculta. */
.ilp-foto-lado{display:none}
html.ilp-foto #pg-gb93-6aee403eb29de-7{display:none}
html.ilp-foto .ilp-foto-lado{display:block;float:right;width:42%;margin:6px 0 14px 26px}
html.ilp-foto .ilp-foto-lado img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
@media (max-width:600px){
  html.ilp-foto .ilp-foto-lado{float:none;width:100%;margin:0 0 16px}
  html.ilp-foto .ilp-foto-lado img{aspect-ratio:16/9;object-position:55% 42%}
}

/* D. Las fotos de la columna lateral pasan arriba del texto «Colaboramos…», en una tira a color de lado
   a lado; la columna de texto queda a todo el ancho (antes 80 % + 20 % de fotos). */
html.ilp-lado #pg-gb93-6aee403eb29de-8{flex-direction:column}
html.ilp-lado #pg-gb93-6aee403eb29de-8>#pgc-gb93-6aee403eb29de-8-0,
html.ilp-lado #pg-gb93-6aee403eb29de-8>#pgc-gb93-6aee403eb29de-8-1{width:100%;margin:0}
html.ilp-lado #pg-gb93-6aee403eb29de-8>#pgc-gb93-6aee403eb29de-8-1{order:-1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0 0 40px}
html.ilp-lado #pgc-gb93-6aee403eb29de-8-1 .so-panel{margin:0}
html.ilp-lado #pgc-gb93-6aee403eb29de-8-1 .sow-image-container{display:block}
html.ilp-lado #pgc-gb93-6aee403eb29de-8-1 img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
@media (max-width:780px){
  html.ilp-lado #pg-gb93-6aee403eb29de-8>#pgc-gb93-6aee403eb29de-8-1{gap:6px;margin-bottom:28px}
  html.ilp-lado #pgc-gb93-6aee403eb29de-8-1 img{aspect-ratio:1;border-radius:4px}
}

/* E. La Agenda como galería: el mismo carrusel de Proyectos (carrusel.css/js) con la portada de La Agenda
   como primera tarjeta, los 10 artículos más recientes y «Ver todos». Se ocultan el logo suelto y la
   cuadrícula original del tema. */
.ilp-agenda{display:none}
html.ilp-blog .ilp-agenda{display:block}
html.ilp-blog p:has(>img[src*="La-Agenda-150x150"]),html.ilp-blog #pl-gb93-6aee403eef74d{display:none}
.ilp-agenda{padding-top:8px}
.ilp-agenda .il-proyecto{grid-template-columns:1fr;padding:0;overflow:hidden;row-gap:6px;padding-bottom:16px}
.ilp-agenda .ilp-art img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:0;margin:0 0 8px;background:#f1f1f1}
.ilp-agenda .ilp-art>span{padding:0 16px}
.ilp-agenda .ilp-art .il-proyecto__nombre{font-size:15.5px;line-height:1.3}
.ilp-agenda .ilp-art:hover .il-proyecto__nombre{color:var(--rojo)}
.ilp-agenda__portada{place-content:center;justify-items:center;text-align:center;background:#f7f2fc;border-color:#eadff5;padding:24px 16px}
.ilp-agenda .ilp-agenda__portada img{width:min(70%,170px);height:auto;aspect-ratio:1;border-radius:0;background:none;margin:0 0 10px}
.ilp-agenda__portada .il-proyecto__texto{font-size:13.5px}
.ilp-agenda__final{place-content:center;text-align:center;padding:24px 16px}
.ilp-agenda__final .il-proyecto__nombre{color:var(--rojo)}

/* F. «¿Quiénes somos?»: los mismos textos (filas 2 y 5), presentados con calma y sin los gráficos del
   V Aniversario, que traen el logo viejo. portada.py arma la sección; las filas originales se ocultan. */
.ilp-quienes{display:none}
html.ilp-nosotros #pg-gb93-6aee403eb29de-2,html.ilp-nosotros #pg-gb93-6aee403eb29de-3,
html.ilp-nosotros #pg-gb93-6aee403eb29de-4,html.ilp-nosotros #pg-gb93-6aee403eb29de-5{display:none}
html.ilp-nosotros .ilp-quienes{display:block}
.ilp-quienes{--rojo:#c81e2b;--tinta:#15171b;--suave:#5f636a;--filete:#e1e2df;
  --letra:"IL Grotesk",-apple-system,"Helvetica Neue",Arial,sans-serif;margin:56px 0 64px;color:var(--tinta)}
.ilp-quienes *{box-sizing:border-box}
.ilp-quienes p{margin:0}
.ilp-quienes .ilp-ceja{margin:0 0 14px;font:600 12px/1.3 var(--letra);letter-spacing:.14em;text-transform:uppercase;color:var(--rojo)}
.ilp-quienes__intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:56px;
  padding-bottom:44px;border-bottom:1px solid var(--filete)}
.ilp-quienes__intro .ilp-ceja{grid-column:1 / -1}
.ilp-lead{font:400 clamp(22px,2.4vw,30px)/1.35 "Roboto Slab",Georgia,serif;color:var(--tinta)}
.ilp-quienes__texto p{font-size:16.5px;line-height:1.7;color:#3a3d42}
.ilp-pilares{padding:40px 0 44px;border-bottom:1px solid var(--filete)}
.ilp-pilares ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.ilp-pilares li{margin:0}
/* Retratos del V Aniversario, rediseñados: los tres al mismo tono (gris aclarado y teñido de rojo con
   una capa en modo «color»); cada uno con su brillo, porque los originales vienen muy distintos. */
.ilp-pilar__img{position:relative;margin:0 0 16px;border-radius:6px;overflow:hidden;background:var(--tinta);aspect-ratio:4/3}
.ilp-pilar__img::after{content:"";position:absolute;inset:0;background:var(--rojo);mix-blend-mode:color;opacity:.85;pointer-events:none}
.ilp-pilar__img img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%;
  filter:grayscale(1) contrast(1.1) brightness(var(--brillo,1.2));transition:transform .5s ease}
.ilp-pilares li:nth-child(2) .ilp-pilar__img img{--brillo:1.3}
.ilp-pilares li:nth-child(3) .ilp-pilar__img img{--brillo:2.3}
.ilp-pilares li:hover .ilp-pilar__img img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.ilp-pilar__img img{transition:none}}
.ilp-pilar__n{display:block;font:600 12px/1 var(--letra);letter-spacing:.1em;color:var(--suave);margin-bottom:10px;
  padding-top:14px;border-top:2px solid var(--tinta)}
.ilp-pilares li:first-child .ilp-pilar__n{border-top-color:var(--rojo)}
.ilp-pilares h3{margin:0 0 10px;font:600 22px/1.2 var(--letra);letter-spacing:-.01em;color:var(--tinta)}
.ilp-pilares li p{font-size:15px;line-height:1.6;color:var(--suave)}
.ilp-pilares li strong{font-weight:inherit}
.ilp-quienes__dos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;padding-top:44px;align-items:start}
.ilp-manifiesto p{font-size:16px;line-height:1.7;color:#3a3d42;margin:0 0 14px}
.ilp-quienes .ilp-lema{margin:18px 0 0;font:600 15px/1.4 var(--letra);letter-spacing:.06em;text-transform:uppercase;color:var(--rojo)}
.ilp-cita{margin:0;padding:30px 32px 28px;background:#f6f6f4;border-left:3px solid var(--rojo);border-radius:0 12px 12px 0}
.ilp-quienes .ilp-cita blockquote{margin:0;padding:0;border:0;background:none;quotes:none}
.ilp-cita blockquote p{font:italic 400 17px/1.65 "Roboto Slab",Georgia,serif;color:var(--tinta);margin:0 0 12px}
.ilp-quienes strong,.ilp-quienes em{color:inherit}
.ilp-cita blockquote strong{font-weight:700}
.ilp-cita figcaption{margin-top:18px;font:400 14px/1.45 var(--letra);color:var(--suave)}
.ilp-cita figcaption strong{display:block;color:var(--tinta);font-weight:600}
.ilp-cita figcaption span{display:block}
@media (max-width:780px){
  .ilp-quienes{margin:36px 0 44px}
  .ilp-quienes__intro,.ilp-quienes__dos{grid-template-columns:1fr;gap:18px}
  .ilp-quienes__intro{row-gap:18px;padding-bottom:32px}
  .ilp-pilares{padding:30px 0 32px}
  .ilp-pilares ol{grid-template-columns:1fr;gap:28px}
  .ilp-pilar__img{aspect-ratio:16/9}
}
/* Tableta: cada retrato al lado de su texto, para que no ocupe todo el ancho. */
@media (min-width:481px) and (max-width:780px){
  .ilp-pilares li{display:grid;grid-template-columns:36% minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:22px}
  .ilp-pilares li>*{grid-column:2}
  .ilp-pilares li>.ilp-pilar__img{grid-column:1;grid-row:1 / span 3;aspect-ratio:1;margin:0}
  .ilp-quienes__dos{padding-top:32px;gap:32px}
  .ilp-cita{padding:24px 22px}
}

/* G. Aliados: una sola fila que se desliza sola, continua y despacio; se detiene bajo el mouse o con el
   foco. Solo CSS: portada.py pone la fila dos veces y la animación corre media pista sin corte.
   Con «reducir movimiento» queda quieta y se desliza con el dedo. */
.ilp-socios{display:none}
html.ilp-aliados #pg-gb93-6aee403f2cb12-1{display:none}
html.ilp-aliados .ilp-socios{display:block}
.ilp-socios{margin:4px 0 48px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ilp-socios:focus-visible{outline:2px solid #c81e2b;outline-offset:4px}
.ilp-socios__pista{list-style:none;margin:0;padding:0;display:flex;width:max-content;
  animation:ilp-socios 60s linear infinite}
.ilp-socios:hover .ilp-socios__pista,.ilp-socios:focus-within .ilp-socios__pista{animation-play-state:paused}
@keyframes ilp-socios{to{transform:translateX(-50%)}}
.ilp-socios__pista li{flex:0 0 auto;width:200px;height:112px;margin:0;padding:0 24px;display:grid;place-items:center;box-sizing:border-box}
.ilp-socios__pista img{display:block;max-width:100%;max-height:80px;width:auto;height:auto;object-fit:contain}
@media (max-width:600px){
  .ilp-socios__pista{animation-duration:45s}
  .ilp-socios__pista li{width:150px;height:90px;padding:0 16px}
  .ilp-socios__pista img{max-height:62px}
}
@media (prefers-reduced-motion:reduce){
  .ilp-socios{overflow-x:auto}
  .ilp-socios__pista{animation:none}
  .ilp-socios__pista li[aria-hidden]{display:none}
}

/* H. Sin el bloque «Líderes de IDEAS» (widget del tema con la ficha de Luis E. Loría, en inglés). */
html.ilp-lideres #pl-gb93-6aee403f38f09{display:none}

/* I. Títulos más sobrios. «COLABORAMOS PARA CAMBIAR EL MUNDO…» (h1 rojo, centrado y en mayúsculas,
   con estilos en línea) pasa a una frase en minúsculas, en tinta y alineada a la izquierda, con un filete
   rojo corto arriba. «ALIADOS:» toma el estilo de los títulos «Proyectos» y «Blog». */
html.ilp-titulos #panel-gb93-6aee403eb29de-8-0-0 h1{position:relative;max-width:32em;margin:0;padding-top:20px;
  color:#15171b!important;text-align:left!important;text-transform:lowercase;letter-spacing:0;
  font:400 clamp(21px,2.3vw,29px)/1.4 "Roboto Slab",Georgia,serif}
html.ilp-titulos #panel-gb93-6aee403eb29de-8-0-0 h1::first-letter{text-transform:uppercase}
html.ilp-titulos #panel-gb93-6aee403eb29de-8-0-0 h1::before{content:"";position:absolute;top:0;left:0;width:48px;height:3px;background:#c81e2b}
html.ilp-titulos #panel-gb93-6aee403f2cb12-0-0-0 h1{margin:0 0 18px;text-align:left!important;color:#2f2f2f;
  font:700 26px/1.2 "Roboto Slab",Georgia,serif;letter-spacing:.02em;text-transform:uppercase}
@media (max-width:520px){html.ilp-titulos #panel-gb93-6aee403f2cb12-0-0-0 h1{font-size:22px}}