/* ==================================================================
   Micrositio Convocatoria Ofek 2026 — maqueta v1.4 · DTS
   Construido sobre el Manual de identidad (julio 2026) y el Documento
   Rector de Comunicación v7 (sep 2026).

   Reglas del manual que gobiernan este archivo:
   · Blanco y negro dominan; turquesa conduce; oro y morado puntúan.
   · Turquesa y oro son colores de FONDO: llevan texto negro, nunca
     blanco en tamaños pequeños. El morado sí admite texto blanco.
   · Poppins en títulos con tracking positivo (2–3%); en mayúsculas 10%.
   · Inter en cuerpo, interlineado 1.5–1.6, 60–80 caracteres, NUNCA
     justificado.
   · Los puntos son círculos sólidos: nunca con borde ni degradado.
   · El camino va anclado al borde inferior y centrado, nunca rotado.
   Tema único: es una marca en aprobación y el manual no define un modo
   oscuro alterno.
   ================================================================== */
:root{
  --turquesa:#12908B;      /* primario · conduce */
  --oro:#EFB94D;           /* acento · puntúa */
  --morado:#573189;        /* acento · puntúa */
  --negro:#0A0D11;         /* base, según manual */
  --blanco:#FFFFFF;

  /* Derivados de trabajo. El turquesa de marca da 3.90:1 sobre blanco y
     no alcanza AA para texto pequeño; se usa un tono más hondo para
     texto, conservando la familia. */
  --turquesa-texto:#0F7C77;
  --turquesa-hondo:#0A5F5B;
  --morado-texto:#4A2A75;
  --gris:#5B6462;          /* neutro con sesgo verde, no gris puro */
  --gris-claro:#8A9491;
  --linea:#E3E8E7;
  --hueso:#F6F9F8;
  --oro-suave:#FDF7EA;
  --turquesa-suave:#E6F2F1;
  --morado-suave:#EFE9F5;
  --error:#B3261E;
  --error-fondo:#FDF3F2;

  --acento:var(--turquesa);
  --acento-texto:var(--turquesa-texto);
  --acento-suave:var(--turquesa-suave);
}
body[data-track="shorashim"]{ --acento:var(--morado); --acento-texto:var(--morado-texto); --acento-suave:var(--morado-suave); }

*{box-sizing:border-box}
body{
  margin:0; background:var(--blanco); color:var(--negro);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.55; text-align:left; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:Poppins,-apple-system,"Segoe UI",sans-serif; margin:0 0 .5em; text-align:left; text-wrap:balance; }
/* Tracking POSITIVO en títulos, como manda el manual (2–3%). */
h1{ font-weight:600; font-size:clamp(2.3rem,5.6vw,4.4rem); line-height:1.04; letter-spacing:.03em }
h2{ font-weight:500; font-size:clamp(1.55rem,3.2vw,2.4rem); line-height:1.2; letter-spacing:.02em }
h3{ font-weight:600; font-size:1.1rem; line-height:1.3; letter-spacing:.02em }
h4{ font-weight:600; font-size:.95rem; line-height:1.35; letter-spacing:.02em }
p{ margin:0 0 1rem; max-width:72ch }        /* 60–80 caracteres */
a{ color:var(--acento-texto) }
:focus-visible{ outline:3px solid var(--acento); outline-offset:3px }
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.eyebrow{
  font-family:Poppins,sans-serif;font-weight:600;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--acento-texto);margin:0 0 14px;
}

section{padding:78px 0}
section.hueso{background:var(--hueso)}
section.linea{border-top:1px solid var(--linea)}
.pie{font-size:.87rem;line-height:1.45;color:var(--gris)}

/* ---------- marca ---------- */
.marca{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.marca .iso{width:30px;height:30px;flex:none}
.marca .palabra{
  font-family:Poppins,sans-serif;font-weight:600;font-size:1.42rem;
  letter-spacing:.02em;color:var(--negro);line-height:1;
}
.marca.clara .palabra{color:#fff}



header.top{background:var(--blanco);border-bottom:1px solid var(--linea)}
.topbar{display:flex;align-items:center;gap:24px;padding:16px 0;flex-wrap:wrap}
.topnav{display:flex;gap:24px;list-style:none;margin:0;padding:0;font-size:.96rem;flex-wrap:wrap}
.topnav a{color:var(--negro);text-decoration:none}
.topnav a:hover{color:var(--acento-texto)}
.topbar .sp{flex:1}

/* ---------- botones: CAPS + tracking 10%, según manual ---------- */
.btn{
  font-family:Poppins,sans-serif;font-weight:600;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.1em;
  padding:15px 26px;border-radius:4px;border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;display:inline-block;transition:filter .15s;
}
.btn:hover{filter:brightness(.94)}
.btn-oro{background:var(--oro);color:var(--negro);border-color:var(--oro)}          /* oro lleva texto negro */
.btn-turquesa{background:var(--turquesa);color:var(--negro);border-color:var(--turquesa)} /* turquesa lleva texto negro */
.btn-negro{background:var(--negro);color:#fff;border-color:var(--negro)}
.btn-linea{background:transparent;color:var(--negro);border-color:var(--negro)}
.btn-linea-clara{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn[disabled]{opacity:.4;cursor:not-allowed}


/* ---------- HERO: negro con el camino al pie ---------- */
.hero{background:var(--negro);color:#fff;position:relative;overflow:hidden;padding:74px 0 0}
.hero .wrap{position:relative;z-index:2}
.hero h1{color:#fff;max-width:15ch}
.hero .umbral{
  font-family:Inter,sans-serif;font-size:clamp(1rem,1.55vw,1.16rem);line-height:1.6;
  max-width:60ch;color:rgba(255,255,255,.88);margin:0 0 6px;
}
.hero .glosa-ofek{color:var(--oro);font-style:italic}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.hero-datos{display:flex;gap:44px;flex-wrap:wrap;margin-top:48px;padding-top:26px;border-top:1px solid rgba(255,255,255,.2)}
.hero-datos div{min-width:118px}
/* El crédito de la Alianza, bajo la tira de datos. Va en voz baja: es una
   atribución, no una de las cuatro cosas que el banner vende.

   El 2026-10-01 salió del banner, a la derecha y sobre blanco; el 2026-10-02
   volvió al banner y, ese mismo día, subió aquí: justo bajo el párrafo de
   apertura y antes de los botones. Ya no cierra el bloque, va en medio, así
   que el margen se reparte arriba y abajo. */
.hero-credito{
  margin:22px 0 0; font-size:1.02rem; line-height:1.6;
  letter-spacing:.015em; color:rgba(255,255,255,.80);
}
.hero-credito strong{ color:#fff; font-weight:600 }
.hero-datos b{display:block;font-family:Poppins,sans-serif;font-weight:600;font-size:1.6rem;line-height:1.1;color:var(--oro);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.hero-datos span{font-size:.82rem;color:rgba(255,255,255,.78)}
/* El camino: anclado al borde inferior, centrado, nunca rotado.
   Turquesa sobre negro, como indica el manual. */
.camino{display:block;width:min(560px,86%);margin:52px auto 0;height:auto}
.chip{
  display:inline-flex;align-items:center;gap:10px;background:var(--oro);color:var(--negro);
  font-family:Poppins,sans-serif;font-weight:600;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.1em;padding:8px 16px;border-radius:100px;margin-bottom:22px;
}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--negro);display:block}

/* ---------- puntos: círculos sólidos, sin borde ni degradado ---------- */




/* ---------- rejillas ---------- */
.cols2{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:30px;margin-top:36px}



/* ---------- los tres pilares del Message House ---------- */





















/* ---------- manifiesto: el arco recortado por el borde ---------- */
.manifiesto{position:relative;overflow:clip;background:var(--hueso)}

.manifiesto .wrap{position:relative;z-index:2}

/* ---------- programas ---------- */
.track{border:1px solid var(--linea);background:var(--blanco);padding:34px;position:relative;overflow:hidden;border-radius:6px}

/* ---------- tablas ---------- */
.tabla-env{overflow-x:auto;margin-top:32px;border:1px solid var(--linea);border-radius:6px;background:var(--blanco)}
table.tb{width:100%;border-collapse:collapse;font-size:.88rem;min-width:680px}
table.tb th,table.tb td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--linea);vertical-align:top}
table.tb thead th{font-family:Poppins,sans-serif;font-weight:600;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;border-bottom:none}
table.tb thead th.n{background:var(--negro);color:#fff}
table.tb thead th.t{background:var(--turquesa);color:var(--negro)}
table.tb thead th.m{background:var(--morado);color:#fff}
table.tb tbody th{font-weight:600;color:var(--negro);width:19%;background:var(--hueso);font-family:Inter,sans-serif;font-size:.86rem}
table.tb td{color:var(--gris)}
table.tb tr:last-child th,table.tb tr:last-child td{border-bottom:none}

/* ---------- proceso ---------- */















/* ---------- formulario ---------- */
.rejilla-form{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:36px;align-items:start;margin-top:36px}
@media (max-width:940px){ .rejilla-form{grid-template-columns:1fr;gap:28px} }





.paso{display:none}

@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.paso h3{font-size:1.32rem;margin-bottom:.4em}























.aviso{border-left:3px solid var(--acento);background:var(--acento-suave);padding:16px 18px;margin:18px 0 4px;font-size:.86rem;line-height:1.55;color:var(--negro)}
.aviso.malo{border-left-color:var(--error);background:var(--error-fondo)}
/* --- Menú: con seis entradas hay que apretar el espaciado antes de
   que la barra se parta en dos renglones.

   Este tramo NO sube de tamaño con el resto. Medido el 2026-10-02: a 920px
   de ventana la barra se queda con 4px de holgura, así que cualquier
   aumento aquí la parte en dos renglones. --- */
@media (max-width:1180px){ .topnav{gap:15px;font-size:.83rem} .topbar{gap:16px} }

/* --- Subíndice del bloque de convocatoria --- */
.subindice{list-style:none;display:flex;flex-wrap:wrap;gap:9px;padding:0;margin:20px 0 0}
.subindice a{display:inline-block;font-family:Poppins,sans-serif;font-weight:600;font-size:.79rem;color:var(--acento-texto);background:var(--acento-suave);border-radius:100px;padding:8px 15px;text-decoration:none}
.subindice a:hover{background:var(--acento);color:var(--blanco)}

/* --- Comunidad Ofek --- */




.personas{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px;margin-top:6px}
.persona{border:1px solid var(--linea);border-radius:6px;padding:20px;background:var(--blanco);text-align:center}
.persona .retrato{display:block;width:74px;height:74px;border-radius:50%;background:var(--linea);margin:0 auto 14px}
.persona b{display:block;margin-bottom:7px}


/* --- Eventos --- */
.eventos{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:18px;margin-top:34px}
.evento{border:1px solid var(--linea);border-radius:6px;padding:22px;background:var(--blanco);display:flex;flex-direction:column}

.evento time{font-family:Poppins,sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--acento-texto)}
.evento h3{font-size:1.06rem;margin:9px 0 10px}
.evento .acceso{align-self:flex-start;font-size:.72rem;font-family:Poppins,sans-serif;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--gris);border:1px solid var(--linea);border-radius:100px;padding:4px 11px;margin-bottom:12px}

.evento p{font-size:.86rem;color:var(--gris);margin:0}

/* --- Información pública, comunicados y prensa --- */
.docs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:34px}
.doc{border:1px solid var(--linea);border-radius:6px;padding:22px;background:var(--blanco);display:flex;flex-direction:column}
.doc .tipo{display:inline-block;align-self:flex-start;font-family:Poppins,sans-serif;font-weight:600;font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--acento-texto);background:var(--acento-suave);padding:4px 9px;border-radius:3px;margin-bottom:13px}
.doc h3{font-size:1rem;margin:0 0 8px}
.doc p{font-size:.86rem;color:var(--gris);margin:0 0 18px;flex:1}
.doc a{font-family:Poppins,sans-serif;font-weight:600;font-size:.84rem;color:var(--acento-texto)}
.pendiente{display:inline-block;align-self:flex-start;font-size:.76rem;color:var(--gris);border:1px dashed var(--gris-claro);border-radius:3px;padding:5px 10px}
.nota-maqueta{font-size:.84rem;color:var(--gris);margin:30px 0 14px}
.comunicados{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.com{border:1px solid var(--linea);border-radius:6px;padding:22px;background:var(--blanco)}
.com time{font-family:Poppins,sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.com h3{font-size:1.05rem;margin:10px 0}
.com .mas{font-family:Poppins,sans-serif;font-weight:600;font-size:.84rem;color:var(--acento-texto)}
/* Barras grises en vez de texto inventado: se entiende la maquetación
   sin que nadie confunda un ejemplo con un comunicado real. */















.pie-enlaces{list-style:none;display:flex;flex-wrap:wrap;gap:8px 26px;padding:0;margin:0 0 20px}
.pie-enlaces a{color:rgba(255,255,255,.8);text-decoration:none;font-size:.86rem}
.pie-enlaces a:hover{color:#fff;text-decoration:underline}








































.lateral{position:sticky;top:72px;display:flex;flex-direction:column;gap:16px}
@media (max-width:940px){ .lateral{position:static} }
.panel{background:var(--blanco);border:1px solid var(--linea);border-radius:6px;padding:24px}
.panel h3{font-size:.98rem;margin-bottom:12px}
.panel ul{list-style:none;padding:0;margin:0;font-size:.85rem}
.panel li{padding:8px 0 8px 20px;position:relative;color:var(--gris)}
.panel li::before{content:"";position:absolute;left:0;top:16px;width:8px;height:8px;border-radius:50%;background:var(--acento)}
.panel .pill{display:inline-block;font-family:Poppins,sans-serif;font-weight:600;font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;padding:6px 11px;border-radius:3px;background:var(--acento-suave);color:var(--acento-texto);margin-bottom:14px}
.panel.negro{background:var(--negro);color:#fff;border-color:var(--negro)}
.panel.negro h3{color:#fff}
.panel.negro p{color:rgba(255,255,255,.82);font-size:.86rem;margin-bottom:0;line-height:1.6}
.panel.negro b{color:var(--oro)}














details{border-bottom:1px solid var(--linea);padding:16px 0}
details summary{font-family:Poppins,sans-serif;font-weight:600;font-size:.94rem;letter-spacing:.01em;cursor:pointer}
details p{margin:11px 0 0;font-size:.89rem;color:var(--gris)}

.cierre{background:var(--negro);color:#fff;position:relative;overflow:hidden}
.cierre h2{color:#fff;max-width:20ch}
.cierre p{color:rgba(255,255,255,.85)}


footer{background:var(--negro);color:#8D9996;padding:44px 0;font-size:.83rem;line-height:1.6}
footer b{color:#E2EBEA}


/* ==================================================================
   Añadidos del tema de WordPress — lo que la maqueta estática no
   necesitaba: menú plegable, salto de contenido y estilos del
   contenido que se edita desde el administrador.
   ================================================================== */

.saltar{position:absolute;left:-9999px;top:0;z-index:100;background:var(--negro);color:#fff;padding:12px 18px;font-family:Poppins,sans-serif;font-weight:600;font-size:.85rem}
.saltar:focus{left:0}

/* --- Menú plegable --- */
/* El icono de sándwich: tres rayas apiladas.

   Hasta el 2026-10-27 salían EN FILA y escalonadas —«— — _»— en vez de
   apiladas. El botón es `inline-flex`, así que sus hijos se colocan en
   fila; el `margin-top:-9px` y los dos `translateY` que pretendían
   apilarlas estaban escritos para un contexto de bloque, y ahí lo único
   que hacían era bajar cada raya un poco más que la anterior. Con
   `flex-direction:column` se apilan de verdad y no hace falta ningún
   desplazamiento.

   El cuadro mide 48 x 44 px, que es el mínimo cómodo para un dedo. */
.menu-boton{
  display:none; flex-direction:column; justify-content:center; gap:4px;
  background:none; border:1px solid var(--linea); border-radius:5px;
  padding:14px 13px; cursor:pointer; font:inherit;
}
.menu-boton span{ display:block; width:20px; height:2px; background:var(--negro); margin:0 }
/* «Menú» se queda en el marcado, fuera de la vista: es el nombre
   accesible del botón, y sin él un lector de pantalla anunciaría un
   botón sin nombre. En pantalla no hace falta —tres rayas apiladas son
   la señal más reconocible que hay en un teléfono— y escrita obligaba a
   una barra de 157 px que no cabía en los teléfonos estrechos. */
.menu-boton em{
  position:absolute; width:1px; height:1px; margin:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.menu-envoltura{display:contents}

@media (max-width:900px){
  .menu-boton{display:inline-flex}
  .menu-envoltura{display:none;order:9;flex-basis:100%;width:100%}
  .menu-envoltura.abierto{display:block}
  .menu-envoltura .topnav{flex-direction:column;gap:0;border-top:1px solid var(--linea);margin-top:12px}
  .menu-envoltura .topnav li{border-bottom:1px solid var(--linea)}
  .menu-envoltura .topnav a{display:block;padding:15px 2px;font-size:.95rem}
}

/* --- Contenido editado desde el administrador --- */
.entrada{font-size:1rem;line-height:1.75}
.entrada > *+*{margin-top:1.1em}
.entrada h2{font-size:1.5rem;margin-top:1.8em}
.entrada h3{font-size:1.18rem;margin-top:1.6em}
.entrada ul,.entrada ol{padding-left:1.3em}
.entrada li+li{margin-top:.5em}
.entrada img{height:auto;border-radius:6px}
.entrada blockquote{border-left:3px solid var(--acento);padding-left:20px;margin-left:0;color:var(--gris)}
.entrada a{color:var(--acento-texto)}
.evento-cuerpo p{font-size:.86rem;color:var(--gris);margin:0}
.evento-cuerpo p+p{margin-top:.7em}
.com h3 a{color:inherit;text-decoration:none}
.com h3 a:hover{color:var(--acento-texto)}
.meta{font-family:Poppins,sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}

/* --- Gravity Forms: que herede la marca en vez de traer su propio gris --- */
















/* ==================================================================
   Calendario en línea de tiempo horizontal

   Ocho hitos alternando arriba y abajo de un riel, con los tres
   colores de marca rotando. En pantallas chicas no se intenta meter
   ocho columnas a la fuerza: se vuelve una lista vertical, que es lo
   que un teléfono sabe leer.
   ================================================================== */

.linea-tiempo{
  --riel:#E6E9E8;
  list-style:none;
  padding:0;
  margin:52px 0 0;
  position:relative;
  display:grid;
  grid-template-columns:repeat(var(--hitos,8),1fr);
  grid-template-rows:1fr auto 1fr;
  align-items:center;
  min-height:330px;
}

/* El riel: una barra que cruza toda la fila del medio. */
.linea-tiempo::before{
  content:"";
  grid-row:2;
  grid-column:1 / -1;
  height:14px;
  border-radius:100px;
  background:var(--riel);
}

.hito{
  /* Cada hito ocupa SU columna. Sin esto, la colocación automática de
     la rejilla mete el 1 y el 2 en la misma columna —uno arriba, otro
     abajo— y los tallos se encabalgan en vez de escalonarse. */
  grid-column:var(--col);
  /* Sin min-width:0 las columnas 1fr no pueden encoger por debajo del ancho
     del texto, y la rejilla se desborda del contenedor. El texto SÍ debe
     salirse de su columna —la de al lado está vacía—, pero la columna no. */
  min-width:0;
  grid-row:1;                 /* los de arriba */
  align-self:end;
  display:flex;
  flex-direction:column-reverse;   /* marca abajo, texto encima */
  align-items:flex-start;
  position:relative;
  z-index:1;
}
.hito.abajo{
  grid-row:3;
  align-self:start;
  flex-direction:column;           /* marca arriba, texto debajo */
}

/* Los colores rotan: turquesa, oro, morado. */
.hito:nth-child(3n/**/+1){ color:var(--turquesa) }
.hito:nth-child(3n/**/+2){ color:var(--oro) }
.hito:nth-child(3n/**/+3){ color:var(--morado) }

/* El tallo, con un punto en cada extremo. El de abajo queda encima del
   riel; el de arriba remata junto al texto. */
.hito .marca{
  position:relative;
  width:3px;
  height:76px;
  background:currentColor;
  margin-left:26px;
  flex:none;
}
.hito .marca::before,
.hito .marca::after{
  content:"";
  position:absolute;
  left:50%;
  width:30px;
  height:30px;
  margin-left:-15px;
  border-radius:50%;
  background:currentColor;
}
.hito .marca::before{ top:-15px }
.hito .marca::after{ bottom:-15px }

/* El texto se sale de su columna a propósito: la de al lado está vacía,
   porque el hito vecino vive en la otra fila. */
.hito .texto{
  width:230px;
  max-width:none;
  padding:0 18px 0 4px;
  margin-bottom:14px;
}
.hito.abajo .texto{ margin:14px 0 0 }

.hito .texto b{
  display:block;
  font-family:Poppins,sans-serif;
  font-weight:600;
  font-size:.95rem;
  color:var(--negro);
  line-height:1.3;
  margin-bottom:6px;
}
.hito .texto span{
  display:block;
  font-size:.86rem;
  line-height:1.5;
  color:var(--gris);
}

/* El último no tiene columna a la derecha donde derramarse. */
.hito:nth-last-child(-n/**/+2) .texto{ width:178px }

@media (max-width:1180px){
  .hito .texto{ width:190px }
  .hito .texto b{ font-size:.88rem }
  .hito .texto span{ font-size:.8rem }
  .hito .marca{ height:64px }
}

/* Debajo de esto, ocho columnas dejan de caber. Vertical y en paz. */
@media (max-width:900px){
  .linea-tiempo{
    display:block;
    min-height:0;
    margin-top:34px;
    padding-left:26px;
    border-left:3px solid var(--riel);
  }
  .linea-tiempo::before{ display:none }
  .hito,.hito.abajo{
    display:block;
    padding:0 0 26px;
  }
  .hito:last-child{ padding-bottom:0 }
  .hito .marca{
    position:absolute;
    left:-26px;
    top:4px;
    width:15px;
    height:15px;
    margin:0;
    border-radius:50%;
    background:currentColor;
    transform:translateX(-50%);
  }
  .hito .marca::before,.hito .marca::after{ display:none }
  .hito .texto,.hito.abajo .texto{
    width:auto;
    margin:0;
    padding:0;
  }
}

/* ==================================================================
   Lo que nos hace distintos — seis diferenciadores
   ================================================================== */
.distintos{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:22px;margin-top:38px}
.distintos article{border-top:3px solid var(--linea);padding:20px 0 0}
.distintos article:nth-child(3n/**/+1){border-top-color:var(--turquesa)}
.distintos article:nth-child(3n/**/+2){border-top-color:var(--oro)}
.distintos article:nth-child(3n/**/+3){border-top-color:var(--morado)}
.distintos .num{font-family:Poppins,sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.12em;color:var(--gris-claro)}
.distintos h3{font-size:1.04rem;margin:8px 0 9px}
.distintos p{font-size:.88rem;color:var(--gris);margin:0}

/* ==================================================================
   Ofek en acción — podcast, encuentros y boletín
   ================================================================== */
.iniciativas{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px;margin-top:38px}
.iniciativa{border:1px solid var(--linea);border-radius:6px;padding:26px;background:var(--blanco);display:flex;flex-direction:column}
.iniciativa .etiqueta{align-self:flex-start;font-family:Poppins,sans-serif;font-weight:600;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--acento-texto);background:var(--acento-suave);border-radius:3px;padding:5px 10px;margin-bottom:14px}
.iniciativa h3{font-size:1.2rem;margin:0 0 4px}
.iniciativa .lema{font-family:Poppins,sans-serif;font-weight:500;font-size:.92rem;color:var(--negro);margin:0 0 12px}
.iniciativa p{font-size:.88rem;color:var(--gris);margin:0}
.iniciativa .mas{font-family:Poppins,sans-serif;font-weight:600;font-size:.84rem;color:var(--acento-texto);text-decoration:none}
.iniciativa .mas:hover{text-decoration:underline}
.boletin{margin-top:auto;padding-top:20px}
.boletin .forminator-ui{--forminator-gap:0}
.boletin .pie{font-size:.8rem;color:var(--gris);margin:0}

/* ==================================================================
   Retro de Ofek, 2026-09-23 — jerarquía tipográfica

   Pidieron respetar un mismo criterio en los cuatro niveles y subir un
   poco el título principal de sección. También que el cuerpo de texto
   no mezcle gris y negro dentro del mismo bloque.
   ================================================================== */

h2{ font-size:clamp(1.7rem,3.5vw,2.7rem) }

/* La frase corta grande va justo debajo del título de sección. */
/* Aquí vivía `section > .wrap > h2 + p`. NO LA DEVUELVAS.
   Daba cuerpo al párrafo que sigue al título de una sección, pero con
   combinadores `>` que le dan (0,1,3) de especificidad: más que a cualquier
   clase suelta. Medido antes de quitarla, alcanzaba a nueve párrafos y ocho
   ya tenían su propia clase con su tamaño; a dos les ganaba y los dejaba en
   1.12rem cuando su clase decía 0.98. También pintó de negro cinco textos
   sobre fondo oscuro, hasta que se le quitó el `color`.
   El único que la necesitaba, el del cierre, usa ahora `.entrada-cierre`. */
.entrada-cierre{
  font-family:Inter,sans-serif; font-weight:400;
  font-size:1.12rem; line-height:1.6; max-width:74ch;
}
section > .wrap > h3{ font-size:1.3rem;margin-top:52px }
/* Aquí había un `section > .wrap > p:not(.eyebrow){color:var(--negro)}`.
   No lo devuelvas. Sus combinadores `>` le daban (0,2,2) de especificidad,
   más que a cualquier regla de sección escrita como descendiente —`.hero
   .lema` es (0,2,0)—, así que ganaba y pintaba de negro cinco textos que
   van sobre fondo oscuro, dos de ellos sobre el negro del cierre.
   Cada sección ya declara su color; los párrafos lo heredan. */
.cols2 > div > p{ color:var(--gris) }

/* Llamada al pie de una lista de beneficios. */
.llamada{ font-size:.78rem;line-height:1.5;color:var(--gris);margin:14px 0 0;max-width:46ch }

/* Contacto */
.contacto-directo{ margin:22px 0 18px }
.contacto-directo a{
  font-family:Poppins,sans-serif;font-weight:600;font-size:1.12rem;
  color:var(--acento-texto);text-decoration:none;
  border-bottom:2px solid var(--acento);padding-bottom:2px;
}
.contacto-directo a:hover{ color:var(--negro);border-bottom-color:var(--negro) }
.form-contacto{ border:1px solid var(--linea);border-radius:6px;padding:24px;background:var(--blanco) }

/* «Lo que nos hace distintos»: Ofek lo vio «demasiado formato texto». Se le
   da cuerpo con tarjeta y número grande, sin copiar la referencia. */
.distintos article{
  border:1px solid var(--linea);border-top:4px solid var(--linea);
  border-radius:6px;padding:24px 22px;background:var(--blanco);
}
.distintos .num{
  display:block;font-family:Poppins,sans-serif;font-weight:600;
  font-size:1.9rem;line-height:1;color:var(--linea);margin-bottom:10px;
}
.distintos article:nth-child(3n/**/+1) .num{ color:var(--turquesa) }
.distintos article:nth-child(3n/**/+2) .num{ color:var(--oro) }
.distintos article:nth-child(3n/**/+3) .num{ color:var(--morado) }
.distintos h3{ font-size:1.06rem;margin:0 0 10px }

/* Línea de tiempo: los cuatro hitos son comunes a los dos programas, así que
   rotar colores no significaba nada. Ofek pidió criterio: turquesa para
   Aceleradora, morado para Incubadora. Lo común va en turquesa de marca. */
.hito:nth-child(3n/**/+1),.hito:nth-child(3n/**/+2),.hito:nth-child(3n/**/+3){ color:var(--turquesa) }

/* ==================================================================
   v1.5 — Ajuste al mockup del diseñador (2026-09-30)

   El mockup NO cambia la paleta: el turquesa que trae es #12908C y el
   morado #573089, los mismos del manual que ya gobernaban este archivo.
   Lo que cambia es el peso de cada color y el aire de las secciones:
   bandas a sangre con foto, tarjetas con cabecera sólida, y el oro
   subiendo de acento discreto a color de llamada.

   Las fotos todavía no llegan. Donde el mockup lleva fotografía, este
   archivo deja un degradado con los colores de marca y la variable
   lista: el día que el archivo exista en assets/fotos/, entra solo y
   no hay que tocar CSS. Ver `ofek_fondo()` en functions.php.
   ================================================================== */

:root{
  --morado-hondo:#3E2063;
  --sombra-tarjeta:0 2px 4px rgba(10,13,17,.04), 0 12px 28px rgba(10,13,17,.07);
}

/* ---------- Etiqueta de sección: marca + versalita ---------- */
.eyebrow{
  display:flex; align-items:center; gap:9px;
  font-family:Poppins,sans-serif; font-weight:600; font-size:.78rem;
  letter-spacing:.10em; text-transform:uppercase; color:var(--morado-texto);
  margin:0 0 14px;
}
.eyebrow::before{
  content:""; width:3px; height:15px; border-radius:2px;
  background:var(--morado); flex:none;
}
section.hueso .eyebrow{ color:var(--turquesa-texto) }
section.hueso .eyebrow::before{ background:var(--turquesa) }

/* ---------- Hero ---------- */
.hero{
  position:relative; isolation:isolate; color:#fff;
  /* El fondo va más abajo, con el resto de la homologación. Aquí había un
     segundo degradado lila completo que no llegaba a aplicarse nunca. */
}
.hero .wrap{ padding-top:72px; padding-bottom:0 }
.hero h1{ color:#fff; max-width:15ch }
.hero .umbral{ color:rgba(255,255,255,.90); max-width:64ch; font-size:1.02rem }
.hero .glosa-ofek{ color:var(--oro) }
.hero .umbral strong{ color:#fff }

/* Frase de arranque en oro, como en el mockup. */
.hero .lema{
  font-family:Poppins,sans-serif; font-weight:600; color:var(--oro);
  font-size:clamp(1.15rem,2.6vw,1.85rem); letter-spacing:.02em;
  margin:.2em 0 .9em;
}

/* Píldora de la cuenta regresiva: contorno de oro sobre el velo. */
.hero .chip{
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid rgba(244,185,67,.75); background:rgba(244,185,67,.12);
  color:var(--oro); border-radius:999px; padding:7px 16px;
  font-size:.76rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  margin-bottom:26px;
}
.hero .chip i{ width:7px; height:7px; border-radius:50%; background:var(--oro); flex:none }


.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin:30px 0 0 }

/* ---------- Tira de datos bajo el hero ---------- */
.hero-datos{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  margin:54px 0 0; border-top:1px solid rgba(255,255,255,.16);
  background:rgba(10,13,17,.34);
}
.hero-datos>div{
  padding:20px 22px; border-left:1px solid rgba(255,255,255,.12);
  display:flex; flex-direction:column; gap:2px;
}
.hero-datos>div:first-child{ border-left:0 }
.hero-datos b{
  font-family:Poppins,sans-serif; font-size:.9rem; font-weight:600;
  color:var(--oro); letter-spacing:.01em;
}
.hero-datos span{ font-size:.8rem; color:rgba(255,255,255,.78); line-height:1.4 }
@media(max-width:900px){
  .hero-datos{ grid-template-columns:repeat(2,1fr) }
  .hero-datos>div:nth-child(3){ border-left:0 }
  .hero-datos>div:nth-child(n/**/+3){ border-top:1px solid rgba(255,255,255,.12) }
}
@media(max-width:560px){
  .hero-datos{ grid-template-columns:1fr }
  .hero-datos>div{ border-left:0; border-top:1px solid rgba(255,255,255,.12) }
  .hero-datos>div:first-child{ border-top:0 }
}

/* ---------- Banda de los dos programas ---------- */
/* En el mockup va sobre una foto de un camino que se bifurca. Mientras
   no llegue, el negro de marca con un apunte de morado. */
/* El fondo de esta sección se define más abajo, junto al resto de la
   homologación con el mockup. Aquí solo queda lo que no se repite allí. */
#programas{ position:relative; color:#fff }
#programas h2{ color:#fff }
#programas>.wrap>p:not(.eyebrow){ color:rgba(255,255,255,.82) }
#programas .eyebrow{ color:#fff }

/* Sin panel: el texto va directo sobre la ilustración, como en el mockup
   del 2026-10-01.

   ⚠️ Medido sobre el propio mockup del diseñador, el blanco donde cae sobre
   el naranja queda en 1.48 el antetítulo, 1.59 el título, 1.68 la entrada y
   3.05 la nota, cuando hacen falta 4.5 —3 para el título, que es grande—.
   El diseño ya viene así; no lo introdujo el sitio.

   Si hay que arreglarlo sin paneles y sin tocar la ilustración, lo que
   funciona es el encuadre: la misma imagen tiene escaleras oscuras donde el
   blanco llega a 10-12:1, y eso es `background-position`. */
/* Sin tope: con 74ch el bloque medía 746.94 px y «Dos caminos, un mismo
   horizonte.» necesita 775 para ir de una pieza. Se partía por 28 píxeles,
   teniendo 1180 de sección. */
/* Centrado, como en la referencia del 2026-10-02. El texto ya era blanco.

   El titular se nombra aparte a propósito: `text-align` se hereda, pero hay
   un `h1, h2, h3, h4{ text-align:left }` global, y una regla que apunta al
   elemento le gana siempre a lo heredado, por floja que sea. El antetítulo
   va con `justify-content` porque es un contenedor flex —lleva el círculo
   al lado— y ahí `text-align` no coloca nada; y además se le suelta el
   ancho, porque venía topado en 580px y centrar dentro de esos 580 lo
   dejaba a la izquierda de la sección, no en medio.

   El párrafo pierde su medida: con el bloque centrado, un `max-width` menor
   que el contenedor deja el centrado descuadrado respecto al titular. */
.programas-intro{ max-width:none; text-align:center }
.programas-intro h2{ text-align:center }
.programas-intro .eyebrow{ max-width:none; justify-content:center }
#programas .entrada-programas{ max-width:none; margin-inline:auto }
#programas .nota-elegir{ text-align:center }
.programas-intro > *:last-child{ margin-bottom:0 }
#programas .nota-elegir{ margin-top:36px; max-width:none }
#programas .eyebrow::before{ background:var(--oro) }

.track{
  background:#fff; color:var(--negro); border:0; border-radius:10px;
  padding:0; overflow:hidden; box-shadow:var(--sombra-tarjeta);
}
.track-cab{
  padding:16px 24px; text-align:center;
  font-family:Poppins,sans-serif; font-weight:600; color:#fff;
  font-size:1.02rem; letter-spacing:.01em;
}
.track.shor .track-cab{ background:var(--morado) }
.track.acel .track-cab{ background:var(--turquesa) }

/* ---------- Tabla de elegibilidad ---------- */



/* ---------- Barra lateral del formulario ---------- */
.lateral .panel{
  border:1px solid var(--linea); border-radius:10px; padding:20px 22px;
  background:#fff; box-shadow:var(--sombra-tarjeta);
}
.lateral .panel .pill{
  display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--turquesa-texto);
  background:var(--turquesa-suave); border-radius:999px; padding:4px 11px; margin-bottom:10px;
}
/* «Fechas que importan» va en morado con las fechas en oro. */
.lateral .panel.negro{ background:var(--morado); border-color:var(--morado); color:#fff }
.lateral .panel.negro h3{ color:#fff }
.lateral .panel.negro p{ color:rgba(255,255,255,.88); font-size:.88rem }
.lateral .panel.negro b{ color:var(--oro) }

/* ---------- Formulario: solo lo visual ---------- */
/* El formulario toma el color del programa que se elige en la pregunta de
   categoría. Turquesa para Aceleradora · Emprendedores Ofek, morado para
   Incubadora · Emprendedores Shorashim: los mismos con los que cada programa
   aparece en el diagrama del proceso, en la tabla de elegibilidad y en las
   tarjetas. Quien llega hasta aquí ya los tiene asociados.

   Para cambiarlos de lado basta con intercambiar los dos bloques de abajo:
   todo lo demás lee estas variables y no menciona ningún color.

   Se usan variables propias `--form-*` y no `--acento`, que es la del sitio
   entero: navegación, enlaces, antetítulos y paneles la leen, y redefinirla
   repintaría la página completa al marcar una categoría.

   Van separadas las de fondo y las de texto porque no son intercambiables.
   El oro sobre blanco da 1.8:1 y el turquesa de marca 3.90:1: valen para
   pintar un punto o una franja, no para escribir encima. */
:root{
  /* Antes de elegir no se adelanta ningún programa. El botón se queda en
     oro, que es la llamada neutra del sitio, pero las marcas de selección
     van en negro: el oro sobre blanco da 1.8:1 y un punto de radio o el
     borde de una casilla son componentes de interfaz, que necesitan 3:1
     (WCAG 1.4.11). Forminator las pintaba de azul a 4.74:1; dejarlas en oro
     habría empeorado lo que ya había. */
  --form-acento:var(--negro);
  --form-texto:var(--gris);
  --form-boton:var(--oro);
  --form-boton-hover:#E0A62F;
  --form-boton-texto:var(--negro);
  --form-suave:var(--oro-suave);
}

:root[data-ofek-categoria="aceleradora"]{
  --form-acento:var(--turquesa);
  --form-texto:var(--turquesa-texto);
  /* El botón no usa el turquesa de marca: blanco sobre #12908B da 3.90:1 y
     el texto es de 14 px, que cuenta como pequeño y necesita 4.5:1. El tono
     hondo da 5.04:1 y es de la misma familia. */
  --form-boton:var(--turquesa-texto);
  --form-boton-hover:var(--turquesa-hondo);
  --form-boton-texto:#fff;
  --form-suave:var(--turquesa-suave);
}

:root[data-ofek-categoria="shorashim"]{
  --form-acento:var(--morado);
  --form-texto:var(--morado-texto);
  /* El morado de marca sí aguanta blanco encima: 9.52:1. */
  --form-boton:var(--morado);
  --form-boton-hover:var(--morado-hondo);
  --form-boton-texto:#fff;
  --form-suave:var(--morado-suave);
}

.form-card{
  position:relative;
  background:#fff; border:1px solid var(--linea); border-radius:10px;
  padding:26px 28px 30px; box-shadow:var(--sombra-tarjeta);
}
@media (max-width:560px){ .form-card{ padding:22px 18px 24px } }

/* Una franja arriba de la tarjeta, para que el cambio se note aunque no
   haya un botón a la vista. Sin categoría elegida no se dibuja.

   Lleva su propio redondeo en lugar de recortarse con `overflow:hidden` en
   la tarjeta: `overflow` crea un contenedor de desplazamiento y deja de
   funcionar cualquier `position:sticky` que caiga dentro. */
.form-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  border-radius:9px 9px 0 0;
  background:var(--form-acento); transform:scaleX(0); transform-origin:left;
  transition:transform .45s ease;
}
.form-card[data-categoria]::before{ transform:scaleX(1) }

/* El cambio se cruza en vez de saltar. Medio segundo: se nota que responde
   a lo que acabas de marcar, sin que parezca que la página se recarga. */
.form-card .forminator-button-submit,
.form-card .forminator-button-next,
.form-card .forminator-button-back,
.form-card .forminator-radio-bullet,
.form-card .forminator-checkbox-box,
.form-card .forminator-step-dot,
.form-card .forminator-step-label{
  transition:background-color .4s ease, border-color .4s ease, color .4s ease;
}
@media (prefers-reduced-motion:reduce){
  .form-card::before,
  .form-card .forminator-button-submit,
  .form-card .forminator-button-next,
  .form-card .forminator-button-back,
  .form-card .forminator-radio-bullet,
  .form-card .forminator-checkbox-box,
  .form-card .forminator-step-dot,
  .form-card .forminator-step-label{ transition:none }
}

/* ---- Botones ----
   Van con `!important` porque Forminator publica sus colores en una hoja
   propia, generada por formulario, con un selector que lleva el id del
   módulo: `#forminator-module-29.forminator-design--default …`. Sin un id
   de por medio no hay forma de ganarle por especificidad. */
.form-card .forminator-button-submit,
.form-card .forminator-button-next{
  background:var(--form-boton) !important; color:var(--form-boton-texto) !important;
  border:0 !important; border-radius:6px !important;
  font-family:Poppins,sans-serif !important; font-weight:600 !important;
  letter-spacing:.06em !important; text-transform:uppercase !important;
  padding:13px 28px !important;
}
.form-card .forminator-button-submit:hover,
.form-card .forminator-button-next:hover{ background:var(--form-boton-hover) !important }
.form-card .forminator-button-back{
  background:transparent !important; color:var(--gris) !important;
  border:1px solid var(--linea) !important;
}
.form-card .forminator-button-back:hover{
  border-color:var(--form-acento) !important; color:var(--form-texto) !important;
}

/* ---- Los pasos de arriba ---- */
.form-card .forminator-pagination-steps .forminator-step .forminator-step-dot{
  background-color:var(--form-acento) !important;
  border-color:var(--form-acento) !important;
}
.form-card .forminator-pagination-steps .forminator-step .forminator-step-label{
  color:var(--form-texto) !important;
}
/* El hilo entre pasos: el elemento es el tramo por recorrer, su `::before`
   el ya recorrido. Forminator encoge ese `::before` a altura cero en los
   pasos que todavía no tocan, y así marca por dónde vas. */
.form-card .forminator-pagination-steps .forminator-break{
  background-color:var(--linea) !important;
}
.form-card .forminator-pagination-steps .forminator-break::before{
  background-color:var(--form-acento) !important;
}

/* ---- Lo que se marca: radios, casillas, consentimiento ---- */
.form-card .forminator-radio input:checked + .forminator-radio-bullet{
  border-color:var(--form-acento) !important;
}
.form-card .forminator-radio .forminator-radio-bullet::before{
  background-color:var(--form-acento) !important;
}
.form-card .forminator-checkbox .forminator-checkbox-box,
.form-card .forminator-consent .forminator-checkbox-box{
  color:var(--form-acento) !important;
}
.form-card .forminator-checkbox input:checked + .forminator-checkbox-box,
.form-card .forminator-consent input:checked + .forminator-checkbox-box{
  border-color:var(--form-acento) !important;
}

/* ---- El campo con el foco ---- */
.form-card .forminator-input:focus,
.form-card .forminator-textarea:focus,
.form-card .forminator-select2 + .forminator-select .selection .select2-selection--single:focus{
  border-color:var(--form-acento) !important;
  box-shadow:0 0 0 3px var(--form-suave) !important;
}

/* ---- El desplegable de los <select> ----
   Select2 lo saca del formulario y lo cuelga del <body>, así que no hereda
   nada de `.form-card`: se engancha al atributo que el JS deja en <html>. */
:root[data-ofek-categoria] .forminator-select-dropdown-container--open
  .select2-results__option--selected{
  background-color:var(--form-acento) !important; color:#fff !important;
}

/* ---------- Diagrama del proceso de selección ---------- */
/* Homologado con el mockup de alta resolución del 2026-09-30.
   Lo que el diagrama tiene que dejar ver de un vistazo es la bifurcación:
   dos etapas comunes y, a partir de ahí, dos caminos con su propio color.
   Por eso el tronco va centrado y angosto, y las ramas van en dos columnas
   con su línea de enlace dibujada. */

.flujo{ margin-top:34px }

/* ---- La tarjeta de un paso ---- */
.flujo .paso{
  display:flex; gap:16px; align-items:flex-start;
  background:#F5F7F9; border:1px solid var(--linea); border-radius:11px;
  padding:18px 22px; margin:0; text-align:left;
  box-shadow:0 1px 3px rgba(10,13,17,.05);
}
/* Las dos etapas comunes van centradas y más angostas: son el tronco. */
.flujo .paso.tronco{ max-width:640px; margin-inline:auto }

/* Dentro de un disco con aro fino y centrados en vertical, como en la
   referencia del 2026-10-02. Antes iban sueltos y pegados a la parte de
   arriba de la tarjeta.

   El disco se le pone al propio icono, sin envoltorio: `ofek_icono()`
   devuelve el elemento solo. Funciona porque el relleno lo absorbe la caja
   —`box-sizing:border-box` es global—, así que el dibujo encoge dentro del
   disco en vez de agrandarlo. */
.flujo .paso .icono{
  width:58px; height:58px; flex:none; align-self:center; margin-top:0;
  padding:13px; background:#fff;
  border:1px solid var(--linea); border-radius:50%;
}
.flujo .paso .n{
  display:block; font-family:Poppins,sans-serif; font-weight:700;
  font-size:.7rem; letter-spacing:.14em; color:var(--gris-claro);
  margin-bottom:3px;
}
.flujo .paso h3{ margin:0 0 4px; font-size:1.02rem; line-height:1.3 }
.flujo .paso p{ margin:0; font-size:.86rem; line-height:1.55; color:var(--gris); max-width:none }

/* ---- Las flechas que encadenan los pasos ---- */
/* Una por salto, todas iguales: línea recta y punta al llegar a la caja
   siguiente. Decorativas, que el orden ya lo dicen los números, así que
   van con `aria-hidden` en el marcado.

   El trazo era `var(--linea)`, el color de los bordes de caja, y se veían
   casi blancas. Cada una toma ahora el color de donde está, a través de
   `--flecha`: gris en el tronco, morado en Shorashim, turquesa en
   Emprendedores Ofek. */
.flujo{ --flecha:var(--gris-claro) }
.flujo .rama.shor{ --flecha:var(--morado) }
.flujo .rama.acel{ --flecha:var(--turquesa) }

.flujo .conector{
  display:block; width:2px; height:34px; margin:14px auto 0;
  background:var(--flecha); position:relative;
}
/* La punta cierra justo en el borde de la caja a la que llega: el conector
   no lleva margen por abajo, así que su borde inferior ya es ese borde.
   Triángulo con bordes y no un cuadrado girado, que mide 12.7 px de
   diagonal por cada 9 de lado y habría que compensarlo a ojo. */
.flujo .conector::after{
  content:""; position:absolute; left:50%; bottom:0;
  width:0; height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:7px solid var(--flecha);
  transform:translateX(-50%);
}

/* ---- La pastilla de la bifurcación ---- */
.flujo .bifurca{
  position:relative;
  text-align:center; font-size:.84rem; color:var(--negro); font-weight:500;
  background:#F5F7F9; border:1px solid var(--linea); border-radius:999px;
  padding:11px 24px; max-width:640px; margin:0 auto;
}

/* ---- Las dos ramas ---- */
.flujo .ramas{
  display:grid; grid-template-columns:1fr 1fr; gap:26px;
  position:relative; padding-top:46px; margin-top:0;
}
/* El enlace en forma de horquilla: un tramo horizontal entre los centros de
   las dos columnas, y de él baja una vertical a cada cabecera. El tramo que
   sube hasta la pastilla lo pone `.ramas::after`. */
.flujo .ramas::before{
  content:""; position:absolute; top:22px; height:2px; background:var(--gris-claro);
  /* El centro de una columna no cae en el 25 % del contenedor, sino en
     `25% - separación/4`: la rejilla reparte el ancho menos la separación.
     Con 25 % a secas la horizontal se quedaba 6 px corta de cada lado y no
     llegaba a tocar las verticales. */
  left:calc(25% - 6.5px); right:calc(25% - 6.5px);
}
/* El TRAZO que baja de la pastilla hasta la horizontal. Cuelga de `.ramas`
   y no de la pastilla: como hijo en flujo le crecería el fondo blanco 22 px
   hacia abajo en lugar de dibujar una línea entre las dos cajas. */
.flujo .ramas::after{
  content:""; position:absolute; top:0; left:50%; margin-left:-1px;
  width:2px; height:22px; background:var(--gris-claro);
}
.flujo .rama{ position:relative }
/* La vertical de color baja desde la horizontal hasta la cabecera, no desde
   la pastilla: 46 px de relleno menos los 22 px a los que está la horizontal. */
.flujo .rama::before{
  content:""; position:absolute; top:-24px; left:50%;
  width:2px; height:24px; margin-left:-1px;
}
.flujo .rama.shor::before{ background:var(--morado) }
.flujo .rama.acel::before{ background:var(--turquesa) }
/* Y su punta, cerrando en el borde superior de la cabecera. */
.flujo .rama::after{
  content:""; position:absolute; top:-7px; left:50%;
  width:0; height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:7px solid var(--flecha);
  transform:translateX(-50%);
}

/* En una sola columna la horquilla no describe nada: se apila y estorba. */
@media(max-width:820px){
  .flujo .ramas{ grid-template-columns:1fr; padding-top:26px }
  .flujo .ramas::before,
  .flujo .rama::before,
  .flujo .rama::after,
  .flujo .ramas::after{ display:none }
}

.rama-cab{
  display:flex; align-items:center; gap:11px; color:#fff;
  font-family:Poppins,sans-serif; font-weight:600; font-size:.95rem;
  border-radius:10px; padding:14px 20px; margin:0 0 14px;
}
.rama.shor .rama-cab{ background:var(--morado) }
.rama.acel .rama-cab{ background:var(--turquesa) }
/* El icono de la cabecera va sobre fondo de color: se pinta en blanco. */
.rama-cab .icono{ width:30px; height:30px; flex:none; stroke:#fff }

/* El aire entre pasos lo pone el conector, que va justo detrás de cada
   uno. Con margen aquí además, el hueco quedaba más grande en las ramas
   que en el tronco. */
.rama .paso{ max-width:none; margin-bottom:0 }

/* ---- El cierre de cada rama: cuántos entran ---- */
.rama-final{
  display:flex; align-items:center; gap:13px;
  border-radius:10px; padding:16px 20px; font-size:.9rem;
}
.rama.shor .rama-final{ background:var(--morado-suave); color:var(--morado-texto) }
.rama.acel .rama-final{ background:var(--turquesa-suave); color:var(--turquesa-texto) }
.rama-final .palomita{
  width:28px; height:28px; border-radius:50%; flex:none;
  display:grid; place-items:center; color:#fff; font-size:.82rem; font-weight:700;
}
.rama.shor .rama-final .palomita{ background:var(--morado) }
.rama.acel .rama-final .palomita{ background:var(--turquesa) }
.rama-final b{
  display:block; font-family:Poppins,sans-serif; font-size:.95rem;
  margin-bottom:1px;
}

/* ---- El aviso de cierre: se puede terminar en el otro programa ---- */
.cierre-proceso{
  display:flex; align-items:center; gap:16px;
  margin-top:26px; background:#F5F7F9; border:1px solid var(--linea);
  border-radius:11px; padding:18px 22px;
}
.cierre-proceso .icono{ width:36px; height:36px; flex:none }
.cierre-proceso p{
  margin:0; font-size:.86rem; line-height:1.6; color:var(--gris); max-width:none;
}

/* El botón de la cabecera va turquesa, como en el mockup: es la llamada
   permanente del sitio y el negro la dejaba confundirse con la barra. */
/* En negro, como dice su clase. Hasta el 2026-10-15 una regla de aquí lo
   repintaba de turquesa solo dentro de la cabecera; se quitó a petición del
   cliente. Queda el `:hover`, que sí hace falta. */
header .btn-negro:hover{ background:#1C242E; border-color:#1C242E }

/* ---------- Línea de tiempo sobre banda turquesa ---------- */
/* El mockup pinta la línea de tiempo en blanco sobre turquesa, así que la
   banda se va a sangre y el riel, las marcas y el texto pasan a blanco.
   Se respeta la disposición que Ofek ya aprobó el 2026-09-23 —hitos
   alternando arriba y abajo del riel—: lo que se pidió cambiar fue el color.

   Un ajuste medido, no estético: el turquesa de marca #12908B da 3.90:1
   contra blanco y la descripción de cada hito, que es texto chico, no
   alcanza AA. Con #0F7C77 —el mismo turquesa un punto más hondo, que ya
   era token del tema— sube a 5.04:1. A simple vista es el mismo color; la
   diferencia se nota al leerlo, que es de lo que se trata. */
/* Aquí había el fondo turquesa de `#fechas`. Se fue el 2026-10-01: el
   cronograma nuevo va sobre fondo claro, como en el mockup. Estaba
   declarado también en `.banda-turquesa, #fechas`, cien líneas más abajo,
   y quitar solo uno no cambiaba nada. */


/* El tallo y los dos puntos de cada hito heredan `currentColor`, así que
   basta con blanquear el hito. Se anula de paso la rotación de colores. */


/* ==================================================================
   v1.6 — Los artes del diseñador en su sitio (2026-09-30)
   ================================================================== */

/* Texto e imagen lado a lado. `invertido` pone la imagen a la derecha.
   En cuanto no caben dos columnas cómodas, se apilan y la imagen pasa
   debajo: una foto de gente aplastada a 200 px no aporta nada. */
.con-arte{
  display:grid; grid-template-columns:minmax(260px,.85fr) 1.15fr;
  gap:40px; align-items:center;
}
.con-arte.invertido{ grid-template-columns:1.15fr minmax(260px,.85fr) }
.con-arte>img{ width:100%; height:auto; display:block }
.con-arte h2{ margin-top:0 }
@media(max-width:860px){
  .con-arte, .con-arte.invertido{ grid-template-columns:1fr; gap:26px }
  /* Apilado, la imagen siempre va después del texto. */
  .con-arte.invertido>img{ order:2 }
  .con-arte>img{ order:2; max-width:420px; margin-inline:auto }
}

/* En preguntas frecuentes la imagen es un apoyo, no la protagonista. */
.faq-arte{ align-items:start }
.faq-arte>img{ max-width:320px; margin-inline:auto }
.faq-arte details{ max-width:none }

/* La rueda de la Red Ofek. */
/* Aquí vivían `.red-ofek` y `.lista-red`, del montaje anterior de
   Comunidad Ofek: el diagrama al lado de una lista con filetes de
   color. El marcado nuevo no las usa. */

/* Consejo Consultivo: retratos reales en lugar de los esqueletos. */
.persona .retrato{
  display:block; width:120px; height:120px; border-radius:50%;
  object-fit:cover; margin:0 auto 12px; background:var(--hueso);
}
.persona{ text-align:center }
.persona b{
  display:block; font-family:Poppins,sans-serif; font-weight:600;
  font-size:.95rem; line-height:1.3;
}

/* Portada de cada iniciativa de «Ofek en acción». */
.iniciativa{ overflow:hidden }
.iniciativa .portada{
  display:block; width:calc(100% + 2px); height:150px; object-fit:cover;
  margin:-1px -1px 18px; border-radius:9px 9px 0 0;
}

/* ---------- Banda turquesa a sangre ---------- */
/* La usa «La oportunidad que vemos». El tono es #0F7C77 y no el #12908B de
   marca por lo mismo que la línea de tiempo: con el turquesa de marca el
   blanco da 3.90:1 y el párrafo no alcanza AA; con este da 5.04:1. */
.banda-turquesa{
  background:var(--turquesa-texto);
  color:#fff;
}
.banda-turquesa h2{ color:#fff }
.banda-turquesa p{ color:rgba(255,255,255,.94) }
.banda-turquesa .eyebrow{ color:#fff }
.banda-turquesa .eyebrow::before{ background:var(--oro) }
.banda-turquesa a{ color:var(--oro) }

/* ==================================================================
   v1.7 — Logo oficial, banda del manifiesto y textura turquesa
   ================================================================== */

:root{
  /* El morado de marca sobre negro es ilegible. Este es el mismo morado
     aclarado, solo para fondos oscuros. No sustituye al de marca. */
  --morado-claro:#B79FDA;
}

/* ---------- El logotipo ---------- */
.marca .logotipo{
  display:block; width:auto; height:30px;
}
.marca{ display:flex; align-items:center; gap:10px }
footer .marca .logotipo{ height:34px }
footer .marca{ margin-bottom:18px }
@media(max-width:560px){
  .marca .logotipo{ height:26px }
}

/* ---------- Manifiesto: banda negra, como el mockup ---------- */
/* El diseñador mandó `Banner-Ofek-negro.png`, que es negro plano. Un color
   pesa cero y se ve igual que una imagen de un solo color, así que la banda
   es color y la imagen no se usa. El recorte del grupo sí se rehizo: estaba
   aplanado sobre el hueso claro y ahora va sobre este negro. */
.manifiesto{ background:var(--negro); color:#fff }


/* ---------- Textura de las bandas turquesa ---------- */
/* `Banner-verde.png`: un pasillo en perspectiva, del mismo turquesa. Va de
   fondo, muy bajado, para que la banda no sea un rectángulo plano. El color
   sigue debajo: si la imagen no carga, la banda se ve igual de bien. */
/* `#fechas` salió de aquí el 2026-10-01: el cronograma nuevo va sobre fondo
   claro, como en el mockup. */
.banda-turquesa{
  background-color:var(--turquesa-texto);
  background-image:linear-gradient(rgba(15,124,119,.86), rgba(15,124,119,.92)), var(--textura-turquesa, none);
  background-size:cover;
  background-position:center;
}

/* El logotipo oficial es más ancho que el isotipo dibujado que sustituyó, y
   la cabecera se pasaba por 16 px: el botón se caía a una segunda línea a
   partir de 1180 px de ancho. Se recupera holgura en tres sitios a la vez,
   sin encoger el logo hasta que no se lea. */
.topbar{ gap:18px }
/* El hueco baja de 20 a 16 para pagar la letra más grande del menú
   (.88rem -> .96rem, 2026-10-02). Con seis entradas, a 1181px de ventana
   —lo más estrecho de este tramo— quedan unos 25px de holgura. */
.topnav{ gap:16px }
.marca .logotipo{ height:30px }

/* ==================================================================
   v1.8 — El hero, homologado con el mockup de alta resolución
   (2026-09-30)

   Ahora sí se pudo medir: el mockup llegó a 2000 × 1200 y los colores
   salieron del archivo, no del ojo.
   ================================================================== */

/* ---------- El velo ---------- */
/* Medido franja por franja sobre el cielo del mockup:

     0–40 %   #513F73   violeta plano, el velo manda
     50–60 %  #B4969B   empieza a abrirse
     70–80 %  #E7C2AC
     90–100 % #FDD9AC   el atardecer, sin velo

   Es VIOLETA, no negro: el velo que había antes arrancaba casi en negro y
   apagaba la foto. Y se abre antes, para que el sol quede limpio. */
.hero{
  /* Sin velo: la fotografía va limpia. Pedido del cliente el 2026-10-01.
     Aquí había un degradado lila de 100° y otro que oscurecía el pie.
     Medido al quitarlos: el lema en oro queda en 2.07:1, el párrafo en
     2.70 y la tira de datos en 2.13, donde hacen falta 3 y 4.5. Si hay que
     recuperarlos, va un fondo local detrás del texto —no un degradado sobre
     la foto entera—. */
  background:
    var(--hero-img, linear-gradient(120deg,#2A1747 0%,#573089 45%,#C98A3A 78%,#F4B943 100%));
  background-size:cover; background-position:center 42%;
}
/* El segundo degradado, el que baja, no está en el mockup: es un resguardo.
   La tira de datos va sobre la foto sin banda propia y, si mañana entra otra
   fotografía más clara abajo, el texto blanco dejaría de leerse. */

.hero h1{ font-weight:700; letter-spacing:.01em }

/* ---------- Píldora de la cuenta regresiva ---------- */
/* En el mockup es oro sólido con texto oscuro, no un contorno. Y así debe
   ser: el manual dice que el oro es color de FONDO y lleva texto negro. */
.hero .chip{
  background:var(--oro); border-color:var(--oro);
  color:var(--negro);
}
.hero .chip i{ background:var(--negro) }

/* ---------- El párrafo de entrada ---------- */
/* «Ofek, que en hebreo significa horizonte,» va entero en oro; la glosa,
   además, en cursiva. Antes «Ofek» iba en blanco y negrita. */
.hero .glosa-ofek{ color:var(--oro); font-weight:400 }
.hero .glosa-ofek em{ font-style:italic }

/* ---------- Tira de datos ---------- */
/* Sin banda de fondo y sin separadores verticales: en el mockup solo hay una
   línea fina arriba y los cuatro datos apoyados sobre la propia fotografía. */
.hero-datos{
  background:none;
  border-top:1px solid rgba(255,255,255,.28);
  gap:26px;
}
.hero-datos>div{
  border:0; padding:22px 0 26px;
  display:flex; flex-direction:row; align-items:center; gap:14px;
}
/* Sobre disco blanco: en turquesa a secas los dos últimos iconos caían en
   1.27 y 1.36 sobre la zona clara de la fotografía, cuando un gráfico pide
   3:1. El turquesa de marca es un tono medio y no se salva ni aclarándolo
   ni oscureciéndolo, porque debajo tiene desde sombra hasta sol. Con fondo
   propio da 3.60, y el disco se ve contra cualquier parte de la foto.

   Es el mismo recurso que ya usan las tarjetas de «Lo que nos hace
   distintos» y las de Misión y Visión. */
.hero-datos .icono{
  width:52px; height:52px; flex:none;
  background:#fff; border-radius:50%; padding:11px;
}
.hero-datos p{ margin:0; max-width:none }
/* La primera línea en negrita desde el 2026-10-14: antes las dos pesaban
   igual a propósito, y ahora el primer renglón es el titular del dato. */
/* Titular y apoyo pesaban igual —0.92rem los dos, solo cambiaba la
   negrita— y Ofek pidió separarlos por tamaño el 2026-10-16. El titular
   sube a 1.06rem y el apoyo baja a .84rem: 17 px contra 13.4 px, que se
   distingue de un vistazo sin que el segundo renglón se vuelva ilegible. */
.hero-datos b{
  display:block; color:#fff; font-family:Inter,sans-serif;
  font-weight:700; font-size:1.06rem; line-height:1.3; letter-spacing:0;
  margin-bottom:3px;
}
.hero-datos span{ display:block; color:rgba(255,255,255,.88); font-size:.84rem; line-height:1.4 }

@media(max-width:1100px){
  .hero-datos{ gap:18px }
  .hero-datos .icono{ width:44px; height:44px }
  /* Sin esto los dos renglones volvían a medir igual por debajo de 1100. */
  .hero-datos b{ font-size:.97rem }
  .hero-datos span{ font-size:.8rem }
}
@media(max-width:900px){
  .hero-datos>div:nth-child(n/**/+3){ border-top:0 }
}
@media(max-width:560px){
  .hero-datos>div{ border-top:0; padding:14px 0 }
  .hero-datos>div:first-child{ padding-top:20px }
}



/* ---------- Iconos de «Lo que nos hace distintos» ---------- */
/* Vienen sobre un círculo blanco, pensados para fondo claro, y cada uno trae
   su color: el número grande que llevaban las tarjetas deja de hacer falta.
   Se conserva como respaldo por si alguna tarjeta se queda sin icono. */
.distintos article .icono{
  display:block; width:56px; height:56px; margin:0 0 14px;
}

/* ==================================================================
   v1.9 — «Acerca de Ofek», homologado con el mockup (2026-09-30)
   ================================================================== */

/* ---------- La marca de la etiqueta de sección ---------- */
/* Un círculo relleno, no una barra sólida ni un rombo. Toma el color del
   propio texto, así que no hay que declararlo por sección. Hasta el
   2026-10-01 era solo contorno; se rellena del mismo color a petición.

   Las reglas anteriores le ponían un `background` distinto en cada banda;
   aquí se igualan todas al color del texto con `currentColor`.

   Mide 12 px y no 11: el rombo era un cuadrado de 11 px girado, y girado
   ocupa 15.5 px en diagonal. Un círculo de 11 px se habría visto más chico
   que la marca a la que sustituye. */
.eyebrow::before,
section.hueso .eyebrow::before,
#programas .eyebrow::before,
.banda-turquesa .eyebrow::before,
.manifiesto .eyebrow::before{
  width:12px; height:12px; border-radius:50%;
  background:currentColor;
  border:1.6px solid currentColor;
  margin-right:4px;
}
.eyebrow{ gap:11px; letter-spacing:.16em }

/* ---------- El bloque de Acerca ---------- */
/* El titular es la frase larga, así que necesita respirar más que un h2
   normal y no puede llevar el tracking positivo de los títulos cortos. */
#acerca h2{
  font-size:clamp(1.5rem,2.7vw,2.15rem);
  line-height:1.28;
  letter-spacing:0;
  font-weight:500;
  max-width:none;
  margin-bottom:.9em;
}
#acerca .entrada-acerca{
  font-size:.98rem; line-height:1.7; color:var(--negro); max-width:none;
}

/* Misión y Visión, en dos columnas a todo el ancho de la sección. Hasta
   el 2026-10-19 vivían dentro de la columna de la fotografía y arrancaban
   390 px más adentro que los cuadros de las demás secciones. */
.mv-par{
  display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:38px;
}
@media(max-width:720px){ .mv-par{ grid-template-columns:1fr; gap:26px } }


/* Proporción de «Acerca de Ofek», medida sobre el mockup: la imagen ocupa
   alrededor del 28 % del ancho y el texto el 52 %, con un aire generoso en
   medio. La proporción general de `.con-arte` —más pareja— deja el texto
   demasiado angosto y Misión y Visión salen en dos hilos. */
#acerca .con-arte{
  grid-template-columns:minmax(220px,.62fr) 1.38fr;
  gap:56px;
}
@media(max-width:860px){
  #acerca .con-arte{ grid-template-columns:1fr; gap:26px }
}

/* El titular de «Acerca de Ofek» va justificado, como lo pidió el cliente.
   Nota para quien lo lea después: el manual dice que el CUERPO nunca se
   justifica —y así sigue—; esto es un título, en Poppins, y es una decisión
   tomada a la vista del resultado. */
/* Sin justificar. Medido palabra por palabra: justificado, los huecos iban
   de 8.9 px —el espacio natural— hasta 80 px en escritorio y 189 px en una
   pantalla de 340. Y no hay punto de corte que lo salve: de 340 a 900 px el
   resultado es errático, porque depende de dónde caigan las palabras.

   `text-wrap:pretty` reparte los cortes para que las líneas queden casi
   iguales, así que el borde derecho baja de 214 px a 79 sin tocar el
   espaciado, que se queda en 8.9 px en todas las líneas y en todos los
   anchos. `hyphens:auto` no aportó nada y no llegó a partir ninguna palabra. */
#acerca h2{ text-align:left; text-wrap:pretty }

/* ==================================================================
   v2.0 — Manifiesto, homologado con el mockup (2026-09-30)

   Los colores salieron medidos del archivo y son los de siempre: la
   barra de la primera cita es #F0BE50 —el oro de marca— y la de la
   última #502882 —el morado—. La etiqueta va en turquesa.
   ================================================================== */

.manifiesto .eyebrow{ color:var(--turquesa) }

/* El texto del manifiesto es largo: se lee de corrido, así que necesita
   más interlineado que el resto y una medida que no pase de 66 caracteres. */
.texto-manifiesto p{
  font-size:.98rem; line-height:1.78; max-width:66ch;
  margin:0 0 26px; color:rgba(255,255,255,.88);
}
.texto-manifiesto em{ font-style:italic; color:#fff }
.texto-manifiesto strong{ color:#fff }

/* Las dos citas: más grandes, en blanco puro y con su barra al costado.
   El morado sobre negro no llega al contraste de un texto, pero aquí no
   es texto: es una barra. El texto de la cita va en blanco. */
.texto-manifiesto .cita{
  border-left:4px solid;
  padding:4px 0 4px 26px;
  margin:0 0 34px;
  font-size:1.14rem; line-height:1.55; color:#fff;
  max-width:62ch;
}
.texto-manifiesto .cita.oro{ border-color:var(--oro) }
.texto-manifiesto .cita.morado{ border-color:var(--morado) }
.texto-manifiesto .cita:last-child{ margin-bottom:0 }

/* En el mockup el texto ocupa algo más de la mitad y la fotografía se
   queda a la derecha, centrada contra todo el bloque. */
#manifiesto .con-arte{
  grid-template-columns:1.32fr 1fr;
  gap:40px;
  align-items:start;
}
/* El texto del manifiesto mide el doble de alto que la fotografía, así que
   centrarla dejaba un vacío grande arriba y otro abajo. Agrandarla más no
   resuelve: la columna de texto se angostaría, el texto crecería a lo alto y
   el hueco volvería. En vez de eso la foto **acompaña** la lectura: se queda
   pegada mientras se baja por el manifiesto y nunca hay texto sin imagen al
   lado.

   `top` es 48 y no 0 porque pegada al filo de la pantalla se ve accidental. */
#manifiesto .con-arte>img{
  max-width:none;
  position:sticky;
  top:48px;
}
/* Apilado no hay dos columnas que acompañar: la foto vuelve a su sitio. */
@media(max-width:860px){
  #manifiesto .con-arte>img{ position:static }
}
@media(max-width:860px){
  #manifiesto .con-arte{ grid-template-columns:1fr; gap:26px }
}

/* Una etiqueta de sección con icono propio en vez del rombo. El rombo es el
   comodín: cuando hay icono, manda el icono. */
.eyebrow.con-icono::before{ display:none }
.eyebrow .icono{ width:28px; height:28px; flex:none }

/* ==================================================================
   v2.1 — «La oportunidad que vemos» y «Lo que nos hace distintos»,
   homologadas con el mockup (2026-09-30)
   ================================================================== */

/* ---------- La oportunidad que vemos ---------- */
/* Sin medida: a 74ch dejaba 506 px de espacio muerto a la derecha. A ancho
   completo cabe en una línea, y al estrecharse la ventana pasa a dos de 72
   caracteres. Ver la nota de `.entrada-distintos p`. */
.entrada-oportunidad{
  font-size:.98rem; line-height:1.65; max-width:none;
  color:rgba(255,255,255,.95); margin-bottom:46px;
}

.oportunidades{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:0 30px;
  position:relative;
}

/* El riel: una línea que cruza por el centro de los números. Se dibuja con
   `scaleX` desde la izquierda para poder animarla; por eso el origen está
   fijado a la izquierda y no al centro. */
.oportunidades::before{
  content:""; position:absolute; left:0; right:0; top:14px; height:1px;
  background:rgba(255,255,255,.55);
  transform-origin:left center;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1);
}

.oportunidades li{ position:relative; padding-right:10px }

.punto{
  display:grid; place-items:center;
  width:29px; height:29px; border-radius:50%;
  background:#fff; color:var(--turquesa-texto);
  font-family:Poppins,sans-serif; font-weight:700; font-size:.82rem;
  margin-bottom:18px; position:relative; z-index:1;
  transform-origin:center;
  transition:transform .42s cubic-bezier(.34,1.56,.64,1);
  transition-delay:calc(var(--turno) * .18s + .15s);
}

/* ---------- El estado de partida vive detrás de `.js-anima` ----------
   La clase la pone un script minúsculo en el `<head>`. Si ese script no
   corre —JavaScript apagado, un error más arriba, un rastreador— nada se
   esconde y la sección se ve entera, quieta. Es la única forma honesta de
   animar contenido: **lo que se anima ya estaba ahí**. Esconderlo con CSS y
   confiar en que el JS lo revele es cómo un texto desaparece para siempre
   sin que nadie se entere. */
.js-anima .oportunidades::before{ transform:scaleX(0) }
.js-anima .oportunidades .punto{ transform:scale(0) }

/* Y el estado de llegada, después, para que gane por orden. */
.oportunidades.visible::before{ transform:scaleX(1) }
.oportunidades.visible .punto{ transform:scale(1) }

/* En negrita, y en blanco entero: el texto pesa más y la transparencia que
   servía para una frase ligera aquí lo ensuciaría. Los textos nuevos son
   casi el doble de largos que los anteriores, así que la medida se suelta
   de 26ch a 30ch para que no caigan en cinco renglones. */
.oportunidades p{
  font-size:.88rem; line-height:1.55; font-weight:600; color:#fff;
  margin:0; max-width:30ch;
}
/* El texto entra detrás de su número, con el mismo desfase. */
.oportunidades li p{
  transition:opacity .5s ease, transform .5s ease;
  transition-delay:calc(var(--turno) * .18s + .3s);
}
.js-anima .oportunidades li p{
  opacity:0; transform:translateY(10px);
}
.oportunidades.visible li p{
  opacity:1; transform:none;
}

@media(max-width:880px){
  .oportunidades{ grid-template-columns:repeat(2,1fr); gap:34px 30px }
  /* Con dos filas, un riel horizontal miente. Se quita. */
  .oportunidades::before{ display:none }
}
@media(max-width:560px){
  .oportunidades{ grid-template-columns:1fr; gap:26px }
  .oportunidades p{ max-width:none }
}

/* Quien pidió menos movimiento no lo recibe: se ve todo, quieto. */
@media (prefers-reduced-motion:reduce){
  .oportunidades::before{ transform:scaleX(1); transition:none }
  .oportunidades .punto{ transform:scale(1); transition:none }
  .oportunidades li p{ opacity:1; transform:none; transition:none }
}

/* ---------- Lo que nos hace distintos ---------- */
/* La etiqueta es el encabezado real de la sección: se ve como etiqueta y
   pesa como h2, que es lo que el mockup muestra y lo que de verdad es. */
h2.eyebrow{ font-size:.78rem; margin-bottom:34px }

.entrada-distintos{
  display:flex; gap:28px; align-items:center; margin-bottom:52px;
}
.entrada-distintos .marca-suelta{ width:96px; height:auto; flex:none }
/* Sin medida, como `.entrada-oportunidad`: a 74ch sobraban 343 px. El
   límite de 75 caracteres existe porque el ojo tiene que encontrar el
   principio del renglón siguiente; en un texto de entrada de dos o tres
   líneas, ancho y corto, pesa mucho menos que el hueco que dejaba.
   El resto de los párrafos conserva sus 74ch. */
.entrada-distintos p{
  font-size:.98rem; line-height:1.65; max-width:none; margin:0;
}
@media(max-width:700px){
  .entrada-distintos{ flex-direction:column; align-items:flex-start; gap:18px }
  .entrada-distintos .marca-suelta{ width:76px }
}

.distintos{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
@media(max-width:920px){ .distintos{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:600px){ .distintos{ grid-template-columns:1fr } }

.distintos article,
.mv{
  background:var(--hueso); border:0; border-radius:10px;
  padding:34px 30px 38px; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}

/* El icono va dentro de un disco blanco, como en el mockup. */
.distintos .disco,
.mv .disco{
  width:70px; height:70px; border-radius:50%; background:#fff;
  display:grid; place-items:center; margin-bottom:22px; flex:none;
}
.distintos .disco .icono,
.mv .disco .icono{ width:44px; height:44px; margin:0 }

.distintos h3,
.mv h3{
  font-size:1.02rem; font-weight:600; line-height:1.3; letter-spacing:0;
  margin:0 0 14px; text-align:center;
}
/* El filete bajo el título repite el color del icono de su tarjeta. */
.distintos h3::after,
.mv h3::after{
  content:""; display:block; width:34px; height:2px; margin:12px auto 0;
  background:var(--tono, var(--turquesa));
}
.distintos article.tono-turquesa,
.mv.tono-turquesa{ --tono:var(--turquesa) }
.distintos article.tono-oro,
.mv.tono-oro{ --tono:var(--oro) }
.distintos article.tono-morado{ --tono:var(--morado) }

.distintos p,
.mv p{
  font-size:.9rem; line-height:1.6; color:var(--gris); margin:0; max-width:none;
}
.distintos em{ font-style:italic }

/* ---------- Ajustes pedidos el 2026-09-30 ---------- */

/* Sin rombo en estas dos etiquetas. El rombo se queda en las demás
   secciones; aquí la etiqueta va sola. */
/* Aquí se escondía el círculo de estas dos etiquetas. Desde el 2026-10-01
   usan `.sublabel`, que nunca lo ha tenido, así que no hace falta. */

/* Los iconos de las tarjetas se veían chicos: el disco pasa de 70 a 84 y el
   icono de 44 a 56. Crece más el icono que el disco, que es donde estaba el
   problema —había demasiado blanco alrededor—. */
.distintos .disco{ width:84px; height:84px; margin-bottom:24px }
.distintos .disco .icono{ width:56px; height:56px }
@media(max-width:600px){
  .distintos .disco{ width:76px; height:76px }
  .distintos .disco .icono{ width:50px; height:50px }
}

/* ==================================================================
   v2.2 — Incubadora y Aceleradora, homologada con el mockup
   (2026-09-30)
   ================================================================== */

/* El velo estaba al 90–94 % de negro: tapaba la foto del camino casi por
   completo. En el mockup la fotografía se ve. Baja a un velo que oscurece lo
   justo para que el texto blanco de arriba se lea, y se refuerza donde de
   verdad hay texto —la franja superior— en vez de a plancha. */
#programas{
  /* La fotografía, teñida con el turquesa hondo de la paleta. No es un velo
     que la tape: `multiply` la tiñe entera y el camino que se bifurca se
     sigue viendo.

     SIN FILTRO. El arte es una ilustración en la paleta de Ofek —dos
     escaleras, turquesa y morada, sobre dorado— y teñirla la estropea.

     A cambio, el texto que va encima necesita fondo propio: esa ilustración
     tiene dorado claro (240,167,82) y escalera oscura (6,60,82) en la misma
     franja, así que ningún color de texto gana a los dos. Medido: en blanco
     2.03-2.07, en oscuro 1.64-1.69, donde hacen falta 4.5. Lo resuelve
     `.programas-intro`, un panel contenido, no un velo sobre la imagen. */
  background:
    var(--fondo-programas, linear-gradient(135deg,#1A1420,#3E2063 60%,#5A3A24));
  background-size:cover;
  background-position:center;
}
/* En blanco, no en oro: el oro obligaba a dejar el tinte opaco y la
   fotografía no se veía. Ver la nota del fondo, más arriba. */
#programas .eyebrow{ color:#fff }
#programas .eyebrow::before{ border-color:currentColor; background:currentColor }
#programas h2{ color:#fff; text-shadow:0 1px 14px rgba(0,0,0,.45) }
#programas .entrada-programas{
  color:rgba(255,255,255,.94); max-width:none; font-size:1rem;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}

/* ---------- Las dos tarjetas ---------- */
/* Solo de columna: el de fila separaría los seis renglones de `subgrid`
   dentro de cada tarjeta, y el aire entre bloques ya lo da su margen. */
#programas .cols2{ column-gap:34px; row-gap:0; margin-top:38px }

.track{
  background:#fff; border:0; border-radius:12px;
  padding:26px; overflow:visible;
  box-shadow:0 10px 40px rgba(0,0,0,.28);
}

/* La cabecera no va a sangre: es un bloque redondeado dentro de la tarjeta,
   con aire alrededor, como en el mockup. */
.track-cab{
  border-radius:8px; padding:17px 22px; margin:0 0 22px;
  text-align:center; color:#fff;
  font-family:Poppins,sans-serif; font-weight:600; font-size:1.06rem;
  letter-spacing:.01em; line-height:1.3;
}
.track.shor .track-cab{ background:var(--morado) }
.track.acel .track-cab{ background:var(--turquesa) }

.track-cuerpo{ padding:0 4px }
.track .quien{ font-size:.95rem; line-height:1.6; margin:0 0 14px; color:var(--negro) }

/* La línea de datos, en el color de su programa.
   Ojo: hay una `.meta` global en Poppins y versalitas que otras secciones sí
   usan así. Aquí se reescriben sus tres propiedades —no se borra la global,
   que no es de esta sección— porque el mockup la pone en caja normal. */
.track .meta{
  font-family:Inter,sans-serif;
  text-transform:none;
  letter-spacing:0;
  font-size:.93rem; font-weight:600; line-height:1.55; margin:0 0 20px;
  padding-bottom:20px; border-bottom:1px solid var(--linea);
}
.track.shor .meta{ color:var(--morado-texto) }
.track.acel .meta{ color:var(--turquesa-texto) }

.track h4{ margin:0 0 14px; font-size:.97rem; font-weight:600 }
.track ul{ margin:0; padding-left:1.15rem }
.track li{ font-size:.94rem; line-height:1.55; margin-bottom:9px }
.track .llamada{
  font-size:.78rem; line-height:1.5; color:var(--gris-claro);
  font-style:italic; margin:20px 0 0;
}

/* ---------- La nota de cierre ---------- */
#programas .nota-elegir{
  margin-top:36px; font-size:.98rem; line-height:1.7; max-width:none;
  color:var(--oro); text-shadow:0 1px 10px rgba(0,0,0,.5);
}
#programas .nota-elegir strong{ color:#fff }
/* El enlace iba en `--oro`, y sobre el ocre del banner se perdía: dorado
   sobre dorado. Pasa a blanco, como el resto de la línea.

   Lo que lo distingue como enlace es el subrayado, no el color. Es lo
   correcto de todos modos: el color por sí solo nunca debería ser la única
   señal de que algo es un enlace. */
#programas .nota-elegir a{ color:#fff; text-decoration:underline }

/* ==================================================================
   v2.3 — Convocatoria 2026, homologada con el mockup (2026-09-30)
   ================================================================== */

/* Igual que `.entrada-sub`; se conserva el nombre porque el marcado de
   la Convocatoria lo usa y no aporta nada renombrarlo. */
.entrada-convocatoria{ max-width:74ch; font-size:.98rem; line-height:1.65 }

/* Las pastillas del índice: turquesa suave, texto turquesa. */
.subindice{ gap:10px; margin:24px 0 0 }
.subindice a{
  font-family:Inter,sans-serif; font-weight:600; font-size:.82rem;
  color:var(--turquesa-texto); background:var(--turquesa-suave);
  border-radius:100px; padding:9px 17px;
}
.subindice a:hover{ background:var(--turquesa); color:#fff }

/* Los subtítulos de la sección: versalitas moradas, sin rombo. Son los que
   las pastillas enlazan, así que llevan el mismo texto una a una. */
/* El tamaño va aquí y no se hereda de la etiqueta que la lleve. La primera
   que existió era un `<h3>` y `section > .wrap > h3` la subía a 1.3rem sin
   que nadie lo hubiera escrito; las que son `<h2>` no recibían ese empujón
   y salían a 0.82. Mismo aspecto para las cinco, lleve `h2` o `h3`. */
/* Suben de 1.3rem a 1.5rem el 2026-10-02, a petición del cliente. Se toca
   aquí y no sección por sección: los morados, el jade de «Lo que nos hace
   distintos» y el blanco de «El problema que resuelve» son el mismo estilo
   con distinto fondo detrás, y así se pidió que fueran. */
.wrap > .sublabel{
  font-family:Poppins,sans-serif; font-weight:600; font-size:1.5rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--morado-texto);
  line-height:1.3; margin:56px 0 12px;
}
/* Cuando abre la sección no hay nada de lo que separarse: el relleno de la
   propia sección ya pone el aire. Los 56 px son para cuando va detrás de
   otro bloque, como en «¿Quién puede postularse?». */
.wrap > .sublabel:first-child{ margin-top:0 }
/* Todo lo que va bajo un título de sección. El `.wrap >` viene de cuando
   había que ganarle a una regla que ya no existe; se queda porque además
   acota el alcance a los párrafos de primer nivel de la sección. */
.wrap > .entrada-sub{
  font-size:.98rem; line-height:1.65; max-width:74ch; margin:0 0 4px;
}
.wrap > .entrada-sub + .entrada-sub{ margin-top:6px }

/* ---------- La tabla de elegibilidad ---------- */
.tabla-env{ margin-top:22px; border-radius:8px; border-color:var(--linea) }

table.tb thead th{
  font-size:.72rem; letter-spacing:.09em; line-height:1.35;
  padding:16px 18px; vertical-align:bottom;
}
/* La segunda línea —«Aceleradora», «Incubadora»— va en cursiva y más fina,
   como en el mockup: dice de qué programa es la columna, no la titula. */
table.tb thead th span{
  display:block; font-style:italic; font-weight:400; opacity:.92;
  letter-spacing:.06em; margin-top:3px;
}
table.tb thead th.n{ background:var(--negro); color:#fff }
table.tb thead th.t{ background:var(--turquesa); color:#fff }
table.tb thead th.m{ background:var(--morado); color:#fff }

table.tb tbody th{
  background:var(--hueso); font-weight:600; font-size:.86rem;
  width:19%; color:var(--negro);
}
table.tb tbody td{ font-size:.87rem; line-height:1.55; color:var(--gris) }
table.tb tbody tr:nth-child(even) td{ background:#FCFDFD }

/* La pertenencia a la comunidad es el único criterio excluyente de la
   convocatoria. Va marcada: fondo turquesa suave y texto en negro, no en
   gris. Que se vea distinta no es decoración — es el filtro de entrada. */
table.tb tbody tr.clave th,
table.tb tbody tr.clave td{
  background:var(--turquesa-suave);
  color:var(--negro); font-weight:600;
}

@media(max-width:760px){
  table.tb thead th, table.tb tbody th, table.tb tbody td{ padding:12px 13px }
  table.tb tbody th{ width:auto }
}

/* Las etiquetas que el mockup pone en turquesa. El resto se queda con el
   morado de la regla base. `#pilares` y `#problema` usan `.sublabel` desde el
   2026-10-01 —mismo cuerpo y versalitas que «¿Quién puede postularse?»— pero
   conservan su color: turquesa sobre fondo claro, blanco sobre la banda. */
#convocatoria .eyebrow{ color:var(--turquesa-texto) }
#pilares .sublabel{ color:var(--turquesa-texto) }
#problema .sublabel{ color:#fff }
#convocatoria .eyebrow::before{ border-color:currentColor }

/* Los subtítulos de Convocatoria 2026 —proceso, aplicación, fechas, preguntas
   y documentos— van en morado, como «¿Quién puede postularse?». En el mockup
   son todos el mismo nivel y el mismo color: son las paradas del índice. */
/* Aquí hubo reglas de antetítulo para `#fechas`, de cuando era una banda
   turquesa con texto blanco. Desde el 2026-10-01 va sobre fondo claro y usa
   `.sublabel`, igual que proceso, aplicar, faq y documentos. */


/* ==================================================================
   La cabecera sobre el banner — solo en la portada
   ==================================================================
   Transparente y montada encima de la fotografía, en vez de una barra
   blanca que la empuja hacia abajo.

   Va atada a `body.home` a propósito. Las demás páginas no tienen banner:
   ahí el texto blanco no se vería contra nada y la barra se queda blanca.
   ================================================================== */

body.home header.top{
  position:absolute; left:0; right:0; z-index:20;
  background:transparent; border-bottom:0;
}
body.home header.top .topnav a{ color:#fff }
body.home header.top .topnav a:hover{ color:var(--oro) }
body.home header.top .menu-boton{ border-color:rgba(255,255,255,.45) }
body.home header.top .menu-boton span{ background:#fff }
body.home header.top .menu-boton em{ color:#fff }

/* El resguardo de la navegación.
   Sobre la fotografía limpia los seis enlaces en blanco van de 4.60:1 el
   primero a 1.70:1 el último: el cielo pasa de morado oscuro a atardecer
   justo debajo de la barra, y no hay un color de texto que sirva para los
   seis. En negro pasa lo contrario —«Acerca de Ofek» 3.34, «Eventos» 10.56—.

   Con estos 160 px que se desvanecen, el peor queda en 4.67:1. No es un
   filtro sobre el banner: de aquí hacia abajo la fotografía sigue limpia. */
body.home .hero::before{
  content:""; position:absolute; top:0; left:0; right:0; height:160px;
  background:linear-gradient(180deg, rgba(10,13,17,.65), rgba(10,13,17,0));
  pointer-events:none; z-index:1;
}

/* Con el menú desplegado en pantalla chica la lista cae sobre la foto, así
   que ahí sí lleva fondo propio: sin él no se lee ninguna de las seis. */
@media (max-width:900px){
  body.home .menu-envoltura.abierto{
    background:rgba(10,13,17,.94); border-radius:10px;
    margin-top:14px; padding:2px 16px 6px;
  }
  body.home .menu-envoltura .topnav{ border-top-color:rgba(255,255,255,.20) }
  body.home .menu-envoltura .topnav li{ border-bottom-color:rgba(255,255,255,.20) }
}

/* ---------- Cronograma de la generación ---------- */
/* Homologado con el mockup del 2026-10-01. La posición de cada pieza viene en
   `--x` y `--w`, que PHP calcula a partir de las fechas: aquí no hay ni un
   porcentaje escrito a mano. */

.cronograma{
  --crono-gris:#C9CED3;
  --crono-pizarra:#6B7C86;
  margin-top:40px;
}
.crono-hito.tono-morado{   --tono:var(--morado) }
.crono-hito.tono-oro{      --tono:var(--oro) }
.crono-hito.tono-pizarra{  --tono:var(--crono-pizarra) }
/* Faltaba: los hitos solo tenían morado, oro y pizarra. Sin `--tono` el
   borde de la caja se queda en `none` y sale sin recuadro. */
.crono-hito.tono-turquesa{ --tono:var(--turquesa) }
.crono-etapa.tono-gris{     --tono:var(--crono-gris) }
.crono-etapa.tono-pizarra{  --tono:var(--crono-pizarra) }
.crono-etapa.tono-turquesa{ --tono:var(--turquesa) }
.crono-etapa.tono-morado{   --tono:var(--morado) }

/* ---- Los hitos, colgando sobre el eje ---- */
.crono-hitos{
  list-style:none; margin:0; padding:0;
  position:relative;

  /* `--base` es la altura de la primera fila sobre el eje y `--paso` lo que
     sube cada fila siguiente. `--niveles` lo pone PHP: es cuántas filas
     hicieron falta para que ninguna caja tape a otra. Antes esto era 190px
     fijos y la última fila quedaba recortada. */
  --base:42px; --paso:88px;
  height:calc(var(--base) + (var(--niveles,2) - 1) * var(--paso) + 72px);
}
.crono-hito{
  position:absolute; left:var(--x); bottom:0;
  width:0;   /* ancho cero: la caja se centra sobre el punto exacto */
}
/* El tallo que baja de la caja al eje. */
.crono-hito::after{
  content:""; position:absolute; left:-1px; bottom:0;
  width:2px; background:var(--tono);
}
.crono-hito::after{ height:calc(var(--base) + (var(--fila,1) - 1) * var(--paso)) }

/* Por omisión la caja se centra sobre su punto. `ancla-fin` la alinea por
   el borde derecho, con el tallo a 18 px de ese borde: es lo que hace falta
   para el último hito, que centrado se sale del contenedor. */
.crono-hito .caja{
  position:absolute; left:0; transform:translateX(-50%);
  display:block; width:max-content; max-width:230px;
  background:#fff; border:1.5px solid var(--tono); border-radius:8px;
  padding:11px 16px; text-align:center;
}
.crono-hito.ancla-inicio .caja{ transform:translateX(-18px) }
.crono-hito.ancla-fin .caja{ transform:translateX(calc(-100% + 18px)) }
.crono-hito .caja{ bottom:calc(var(--base) + (var(--fila,1) - 1) * var(--paso)) }

.crono-hito b{
  display:block; font-family:Poppins,sans-serif; font-weight:600;
  font-size:.86rem; line-height:1.3; color:var(--negro);
}
.crono-hito time{
  display:block; font-style:italic; font-size:.82rem;
  line-height:1.35; color:var(--gris); margin-top:2px;
}

/* ---- El eje con los meses ---- */
.crono-eje{
  /* Tantas columnas como meses haya. Estaba fijo en 12 y el eje pasó a 18
     el 2026-10-15: los seis de más se metían en una segunda fila y los
     rótulos salían repetidos. */
  display:grid; grid-template-columns:repeat(var(--meses,12),1fr);
  border-top:1px solid var(--linea);
  position:relative;
}
/* El punto de cada hito se dibuja sobre el eje, no en la lista, para que
   quede por encima de la línea y de las divisiones. */
.crono-hitos::after{ content:none }
.crono-hito::before{
  content:""; position:absolute; left:-5px; bottom:-5px;
  width:10px; height:10px; border-radius:50%;
  background:var(--tono); z-index:2;
}
.crono-eje span{
  font-family:Poppins,sans-serif; font-weight:600; font-size:.72rem;
  letter-spacing:.08em; color:var(--gris);
  padding:10px 0 0; text-align:center;
  border-left:1px solid var(--linea);
}
.crono-eje span:first-child{ border-left:0 }

/* ---- Las etapas, en barras ---- */
.crono-etapas{ list-style:none; margin:30px 0 0; padding:0 }
.crono-etapa{ position:relative; margin-bottom:26px }
.crono-etapa:last-child{ margin-bottom:0 }

.crono-rotulo{
  margin:0 0 6px; margin-left:var(--x); font-size:.88rem; line-height:1.4;
  max-width:none;
}
.crono-rotulo b{
  font-family:Poppins,sans-serif; font-weight:600; color:var(--negro);
}
/* En `--gris` y no en `--gris-claro`: sobre el lila de la banda, el claro
   se queda en 2.62 y estos son textos de 14px. */
.crono-rotulo time{ color:var(--gris); font-style:italic; margin-left:8px }
.crono-rotulo .dura{ color:var(--gris); font-style:italic }

.crono-etapa .barra{
  display:block; margin-left:var(--x); width:var(--w);
  height:34px; border-radius:7px; background:var(--tono);
}

/* ---- En pantalla chica, una lista ---- */
/* Doce meses en 375 px no son un cronograma, son una mancha. El marcado ya
   lleva cada fecha en texto, así que basta con soltar las posiciones y
   dejar que se lea en vertical. */
@media(max-width:900px){
  .crono-hitos{ height:auto; display:grid; gap:10px }
  .crono-hito{
    position:static; width:auto;
    border-left:3px solid var(--tono); padding-left:14px;
  }
  .crono-hito::before,
  .crono-hito::after{ display:none }
  /* Las reglas de ancla tienen tres clases y le ganan a esta, que tiene dos:
     sin nombrarlas aquí, el último hito se queda desplazado y se sale por la
     izquierda. */
  .crono-hito .caja,
  .crono-hito.ancla-inicio .caja,
  .crono-hito.ancla-fin .caja{
    position:static; transform:none; max-width:none;
    border:0; padding:0; text-align:left; background:none;
  }
  .crono-hito time{ display:inline-block }

  .crono-eje{ display:none }

  .crono-etapas{ margin-top:26px; display:grid; gap:16px }
  .crono-etapa{ margin-bottom:0 }
  .crono-rotulo{ margin-left:0 }
  .crono-etapa .barra{
    margin-left:0; width:100%; height:8px; border-radius:4px;
  }
}

/* ==================================================================
   Comunidad Ofek — homologada con el mockup del 2026-10-01
   ================================================================== */

/* Los cinco colores salen del PROPIO DIAGRAMA, muestreados del arte, y no de
   la paleta general. No es un descuido: lo que ata las tarjetas al dibujo es
   que el oro de «Emprendedores y Alumni» sea exactamente el de su porción.
   El oro de marca (#EFB94D) es más claro y rompería la correspondencia. */
:root{
  --red-oro:#F8B231;
  --red-turquesa:#00938B;
  --red-morado:#5D308F;
  --red-pizarra:#29404C;
  --red-lila:#8A8EBA;
}

/* ---- Arriba: texto a la izquierda, diagrama a la derecha ---- */
.comunidad-intro{
  display:grid; grid-template-columns:1fr minmax(300px,440px);
  gap:52px; align-items:center; margin-bottom:12px;
}
.comunidad-texto p{ font-size:.98rem; line-height:1.7; max-width:62ch }
.comunidad-texto p + p{ margin-top:1.1em }
.comunidad-texto em{ font-style:italic }
.red-diagrama{ width:100%; height:auto; display:block }

@media(max-width:940px){
  .comunidad-intro{ grid-template-columns:1fr; gap:34px }
  .red-diagrama{ max-width:420px; margin:0 auto }
}

/* ---- Abajo: los cinco papeles de la red ---- */
.red-roles{
  list-style:none; margin:46px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:16px;
}
@media(max-width:1040px){
  .red-roles{ grid-template-columns:repeat(auto-fit,minmax(215px,1fr)) }
}

.red-roles li{
  background:var(--tono); color:var(--tinta);
  border-radius:10px; padding:20px 18px;
}
.red-roles b{
  display:block; font-family:Poppins,sans-serif; font-weight:600;
  font-size:.96rem; line-height:1.3; margin-bottom:10px;
}
.red-roles p{
  margin:0; font-size:.84rem; line-height:1.6; max-width:none; color:inherit;
  /* Sin justificar. Justificar solo se puede hacer estirando los espacios
     o partiendo palabras, y en una columna de 200px lo primero abre huecos
     y lo segundo llena el texto de guiones. Alineado a la izquierda no pasa
     ninguna de las dos cosas.

     `text-wrap:pretty` reparte las palabras mirando el párrafo entero y no
     renglón a renglón: empareja el borde y evita que el último quede con
     una palabra suelta. */
  text-wrap:pretty;
}

/* El color de la letra NO es el del mockup, donde las cinco van en blanco.
   Medido sobre los colores del diagrama, el blanco solo se lee en dos:

                  blanco   oscuro
     oro            1.84    10.57
     turquesa       3.79     5.14
     morado         9.19     2.12
     pizarra       10.87     1.79
     lila           3.15     6.17

   Así que cada tarjeta lleva la que pasa. Los fondos se quedan intactos,
   que es lo que las ata al diagrama. */
.red-roles .tono-oro{      --tono:var(--red-oro);      --tinta:var(--negro) }
.red-roles .tono-turquesa{ --tono:var(--red-turquesa); --tinta:var(--negro) }
.red-roles .tono-morado{   --tono:var(--red-morado);   --tinta:#fff }
.red-roles .tono-pizarra{  --tono:var(--red-pizarra);  --tinta:#fff }
.red-roles .tono-lila{     --tono:var(--red-lila);     --tinta:var(--negro) }

/* ---- El Consejo Consultivo, en banda morada a sangre ---- */
.consejo-banda{
  background:#573189;
  margin-top:64px;
  padding:52px 0 56px;
}
/* El título va en blanco por obligación: `.sublabel` es morado, y morado
   sobre #573189 es el mismo color sobre sí mismo. En blanco da 9.52:1. */
.consejo-banda .sublabel{
  color:#fff; text-align:center; margin:0 0 30px;
}
.consejo-banda .personas{ margin-top:0 }
.consejo-banda .nota-maqueta{ color:rgba(255,255,255,.85); text-align:center }

/* ---- El cargo de cada consejero ---- */
/* En el mismo amarillo que la tarjeta de «Emprendedores y Alumni», que es
   el del diagrama de la Red Ofek. Lo pidió el cliente el 2026-10-02,
   conociendo ya la medición.

   Lo que cuesta, para que conste: sobre el blanco de la tarjeta ese
   amarillo da 1.84:1 y el texto mide 12.8 px, así que pediría 4.5. La
   negrita ayuda a la vista pero no mueve el umbral, que depende del tamaño.
   Antes iba en #9E6B00, con 4.61.

   La salida que NO toca el amarillo: el problema es el fondo blanco, no el
   tono. Ese mismo amarillo sobre el morado de la banda da 5.2:1, así que
   bastaría con que la tarjeta del retrato dejara de ser blanca. */
:root{ --oro-texto:var(--red-oro) }

.persona .puesto{
  display:block; margin-top:5px;
  font-size:.8rem; line-height:1.4; font-weight:600; color:var(--oro-texto);
}

/* ---- «Ofek en acción»: el rótulo va sobre la portada ---- */
.portada-env{
  position:relative; display:block;
  margin:-1px -1px 0; border-radius:9px 9px 0 0; overflow:hidden;
}
.portada-env .portada{ margin:0; width:100%; display:block }

/* El velo va solo en esta tarjeta, bajo el rótulo. Las tres fotografías
   tienen zonas claras donde el blanco no se leería: la de los micrófonos un
   gris claro justo donde cae el título, la del escenario su azul.

   Medido con el velo suave que tenía al principio: 2.46 el podcast, 3.60 los
   eventos. Con este, 3.17, 3.38 y 5.46 —el título es de 24 px, así que le
   basta 3— y la etiqueta «Próximamente», que es pequeña y pide 4.5, queda en
   14.45 porque cae donde el velo es más denso. */
.portada-env::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(10,13,17,.58) 0%,
    rgba(10,13,17,.25) 40%,
    rgba(10,13,17,.70) 68%,
    rgba(10,13,17,.84) 100%);
}
.portada-texto{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:22px 24px 24px;
}
.portada-texto h3{
  margin:0; color:#fff; font-family:Poppins,sans-serif; font-weight:600;
  font-size:1.5rem; line-height:1.18; letter-spacing:0;
}
.portada-texto .aviso-portada{
  display:block; margin-top:10px;
  font-family:Poppins,sans-serif; font-weight:600; font-size:.68rem;
  letter-spacing:.17em; text-transform:uppercase; color:rgba(255,255,255,.92);
}

/* El cuerpo de la tarjeta, debajo de la portada. */
.iniciativa .lema{ margin-top:20px }

@media(max-width:600px){
  .flujo .paso .icono{ width:48px; height:48px; padding:11px }
  .portada-texto{ padding:18px 18px 20px }
  .portada-texto h3{ font-size:1.3rem }
}

/* ==================================================================
   v2.2 — Cambios del 2026-10-02
   ================================================================== */

/* ---------- Cuatro etiquetas toman el tamaño de los subtítulos ----------
   «El problema que resuelve» es un `.sublabel`: 1.5rem, versalitas, .13em.
   Estas eran `.eyebrow` a .78rem. Se igualan en tamaño y espaciado, y
   conservan su color y su círculo, que no se pidió quitar.

   Empezaron siendo cuatro; ese mismo día se sumaron «Última llamada» y
   «Contacto», las dos en oro, y después «Comunidad Ofek», «Prensa» y «Ofek
   en acción», que viven en su propia página y por eso se habían quedado
   fuera de las pasadas anteriores.

   El círculo sí crece —de 12 a 15px—: junto a un texto del doble de alto,
   el de 12 parecía un error de maquetación más que una marca. */
#acerca .eyebrow,
#manifiesto .eyebrow,
#programas .eyebrow,
#convocatoria .eyebrow,
.cierre .eyebrow,
#contacto .eyebrow,
#comunidad .eyebrow,
#prensa .eyebrow,
#ofek-en-accion .eyebrow{
  font-size:1.5rem; letter-spacing:.13em; line-height:1.3; margin-bottom:12px;
}
#acerca .eyebrow::before,
#manifiesto .eyebrow::before,
#programas .eyebrow::before,
#convocatoria .eyebrow::before,
.cierre .eyebrow::before,
#contacto .eyebrow::before,
#comunidad .eyebrow::before,
#prensa .eyebrow::before,
#ofek-en-accion .eyebrow::before{ width:15px; height:15px }

/* ---------- «¿Cómo es el proceso de selección?» sobre negro ----------
   El fondo pasa de hueso a negro. Las tarjetas de cada paso ya traen su
   propio blanco, así que su contenido no se toca: lo que había que mover es
   lo que se apoyaba directamente en el fondo.

   Las flechas de las ramas sí cambian de tono. El morado de marca sobre
   negro da 1.87:1 y la línea se perdía; estos son los mismos colores
   aclarados hacia el blanco, que conservan el código de color —gris el
   tronco, morado Shorashim, turquesa Ofek— sin desaparecer. */
#proceso{ background:var(--negro) }
#proceso .sublabel{ color:#fff }
#proceso .entrada-sub{ color:rgba(255,255,255,.88) }
#proceso .flujo{ --flecha:rgba(255,255,255,.50) }
#proceso .flujo .rama.shor{ --flecha:#A38EBE }
#proceso .flujo .rama.acel{ --flecha:#71BCB9 }

/* ---------- El isotipo de «Lo que nos hace distintos» ----------
   Entra cuando la sección entra, no antes: la clase la pone el observador
   de `ofek.js`. El estado de partida vive detrás de `.js-anima`, como el
   resto de las animaciones del tema, para que sin JavaScript el logotipo
   se vea igual, quieto, en vez de desaparecer para siempre. */
.entrada-distintos .marca-suelta{
  transition:opacity .55s ease, transform .75s cubic-bezier(.34,1.3,.64,1);
}
.js-anima .entrada-distintos .marca-suelta{
  opacity:0; transform:scale(.74) translateY(10px);
}
.entrada-distintos.visible .marca-suelta{ opacity:1; transform:none }

/* Quien pidió menos movimiento no lo recibe: se ve, quieto. */
@media (prefers-reduced-motion:reduce){
  .entrada-distintos .marca-suelta{ opacity:1; transform:none; transition:none }
}

/* ---------- Contacto, la banda pizarra ----------
   Homologada con el mockup del 2026-10-02. El fondo sale medido del
   archivo: rgb(45,61,74). El botón, rgb(241,189,81), que es el oro de
   marca redondeado, así que se usa el token. */
.contacto-banda{
  position:relative; overflow:hidden;
  background:#2D3D4A; color:#fff;
  padding:64px 0;
}
.contacto-banda .eyebrow{ color:var(--oro) }
.contacto-banda h2{
  margin:0; color:#fff;
  font-size:2.3rem; line-height:1.18; letter-spacing:-.01em;
}
.contacto-directo{
  margin:22px 0 0; font-size:.95rem; line-height:1.6;
  color:rgba(255,255,255,.86);
}
.contacto-directo a{ color:var(--oro); font-weight:600 }

.contacto-rejilla{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,.84fr) minmax(0,1fr);
  gap:46px; align-items:start;
}

/* El isotipo, grande y cortado por el borde derecho. No estorba al
   formulario: va detrás y sin capturar el ratón. */
.contacto-marca{
  position:absolute; right:-86px; top:50%; transform:translateY(-50%);
  width:300px; height:auto; z-index:0; pointer-events:none; opacity:.92;
}

/* ---------- El formulario, sobre la banda ----------
   Forminator pone cada campo en su propia `.forminator-row`, y entre medias
   deja varios `div` vacíos. En una rejilla, un `div` vacío sigue ocupando
   celda: por eso se esconden primero. */
.contacto-banda .forminator-custom-form{
  display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; align-items:start;
}
.contacto-banda .forminator-custom-form > *:empty{ display:none }
.contacto-banda .forminator-response-message{ grid-column:1 / -1; order:-1 }
.contacto-banda .forminator-row{ grid-column:1; margin:0 }
/* La consulta ocupa la columna derecha y el alto de los dos campos. */
.contacto-banda .forminator-row:has(.forminator-field-textarea){
  grid-column:2; grid-row:1 / span 2;
}
.contacto-banda .forminator-row:has(.forminator-field-consent),
.contacto-banda .forminator-row-last{ grid-column:1 / -1 }
.contacto-banda .forminator-row-last{ justify-self:end }

/* Las etiquetas se quedan. El mockup mete el nombre del campo dentro de la
   caja, pero ese texto se borra en cuanto alguien escribe y deja el campo
   sin nombre justo mientras lo llena. Aquí van arriba, pequeñas. */
.contacto-banda .forminator-label{
  display:block; margin:0 0 5px;
  font-family:Poppins,sans-serif !important; font-weight:600 !important;
  font-size:.7rem !important; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.80) !important;
}
/* En el mockup los campos se apoyan sobre la pizarra, sin tarjeta. */
.contacto-banda .form-contacto{
  border:0; border-radius:0; padding:0; background:transparent;
}

/* Con `!important`, por lo mismo que los botones del formulario de
   postulación: Forminator publica sus colores en una hoja generada por
   formulario, con un selector que lleva el id del módulo
   —`#forminator-module-31…`—, y sin un id no hay cómo ganarle. */
.contacto-banda .forminator-input,
.contacto-banda .forminator-textarea{
  width:100%; background:#fff !important; color:var(--negro) !important;
  border:0 !important; border-radius:9px !important; padding:13px 16px !important;
  font-family:Inter,sans-serif !important; font-size:.95rem; line-height:1.5;
}
.contacto-banda .forminator-textarea{ min-height:118px !important; resize:vertical }
.contacto-banda .forminator-input:focus-visible,
.contacto-banda .forminator-textarea:focus-visible{
  outline:3px solid var(--oro) !important; outline-offset:2px;
}
.contacto-banda .forminator-button-submit{
  background:var(--oro) !important; color:var(--negro) !important;
  border:0 !important; border-radius:7px !important;
  padding:12px 26px !important; cursor:pointer;
  font-family:Poppins,sans-serif !important; font-weight:700 !important;
  font-size:.78rem !important; letter-spacing:.14em !important;
  text-transform:uppercase !important;
}
.contacto-banda .forminator-button-submit:hover{ background:#F5C765 !important }

/* El consentimiento y los errores, legibles sobre la pizarra. */
.contacto-banda .forminator-field-consent,
.contacto-banda .forminator-field-consent *,
.contacto-banda .forminator-field-consent a{ color:rgba(255,255,255,.88) !important }
/* La casilla, visible sobre la pizarra: el borde que trae el plugin es casi
   del color del fondo y desaparecía. */
.contacto-banda .forminator-checkbox-box{
  background:#fff !important; border-color:#fff !important;
}
.contacto-banda .forminator-field-consent{ font-size:.82rem; line-height:1.5 }
.contacto-banda .forminator-error-message{ color:#FFC9C4; font-size:.8rem }

@media(max-width:900px){
  .contacto-rejilla{ grid-template-columns:1fr; gap:34px }
  .contacto-banda h2{ font-size:1.85rem }
  .contacto-marca{ display:none }
  .contacto-banda .forminator-custom-form{ grid-template-columns:1fr }
  .contacto-banda .forminator-row,
  .contacto-banda .forminator-row:has(.forminator-field-textarea){
    grid-column:1; grid-row:auto;
  }
  .contacto-banda .forminator-row-last{ justify-self:stretch }
}

/* ---------- La convocatoria ----------
   Estuvo sobre lila unos días; se quitó el 2026-10-15 con el resto de los
   pasteles. Queda en blanco: tiene una tabla grande y es la sección que
   abre su propia página, así que el peso lo llevan las bandas de más
   abajo. El filete de arriba se queda quitado. */
#convocatoria{ background:#fff; border-top:0 }

/* Las pastillas del subíndice iban en turquesa suave, que sobre el lila se
   queda en 1.04 de separación: dos tintes casi idénticos. Pasan a blanco
   con filete jade —el filete es lo que las dibuja contra la banda— y de
   paso su texto sube de 4.40 a 5.20 sobre el blanco, que es lo que pide a
   ese tamaño. El relleno baja 1px por lado para que el filete no las
   engorde. */
#convocatoria .subindice a{
  background:#fff; border:1px solid var(--turquesa-texto);
  padding:7px 14px;
}
#convocatoria .subindice a:hover{
  background:var(--turquesa-texto); border-color:var(--turquesa-texto); color:#fff;
}

/* ---------- Los fondos de sección ----------
   Nada de esto es color nuevo: son los tres tintes suaves de la paleta más
   el hueso. Lo que se decide aquí es el reparto.

   La regla: ninguna sección comparte fondo con la de al lado, y tiene que
   cumplirse en las DOS secuencias en que salen, porque la portada pone faq
   antes que fechas y /convocatoria-2026/ al revés.

   El turquesa suave apenas se puede usar de banda: es el tinte de acento y
   lo llevan por dentro la insignia «PDF», las pastillas del subíndice y las
   fichas de prensa. Sobre una banda de su mismo color desaparecen. Por eso
   solo lo llevan las dos secciones que no lo usan dentro. */
#aplicar{ background:var(--hueso) }
#faq{ background:var(--turquesa-texto); border-top:0 }
#fechas{ background:#fff; border-top:0 }
#documentos{ background:var(--morado) }

/* Las páginas sueltas vuelven a neutro: el color de marca se reserva para
   las dos bandas de arriba. */
#comunidad{ background:#fff; border-top:0 }
#prensa{ background:var(--hueso) }
#ofek-en-accion{ background:#fff }

/* ---------- Las dos bandas de color ----------
   Lo que se apoya en ellas pasa a blanco. Las tarjetas de documentos no se
   tocan: son blancas y sobre el morado destacan solas. */
#faq .sublabel,
#faq summary,
#documentos .sublabel{ color:#fff }
#faq .entrada-sub,
#faq details p,
#documentos .entrada-sub{ color:rgba(255,255,255,.92) }
/* El enlace va en blanco subrayado y no en oro: sobre el turquesa el oro se
   queda corto, y el subrayado ya dice que es un enlace. */
#faq a{ color:#fff; text-decoration:underline }
#faq details{ border-color:rgba(255,255,255,.28) }

/* Dos tonos que se quedaron cortos al llegar las bandas de color. El
   turquesa hondo es el tono de la paleta pensado para texto pequeño. */
.doc .tipo{ color:var(--turquesa-hondo) }

/* ---------- El antetítulo del banner ----------
   Línea nueva del 2026-10-14, encima del titular. En oro, como el resto de
   los acentos sobre la fotografía.

   No usa `.eyebrow`: esa clase mide 24px desde que se homologaron las
   etiquetas de sección, y aquí compite con un titular de 70px. Aquí
   funciona como lo que es —un antetítulo— y va pequeña y espaciada. */
.hero .hero-kicker{
  margin:0 0 18px;
  font-family:Poppins,sans-serif; font-weight:600; font-size:.92rem;
  letter-spacing:.17em; text-transform:uppercase; color:var(--oro);
}
@media(max-width:700px){
  .hero .hero-kicker{ font-size:.8rem; letter-spacing:.14em; margin-bottom:14px }
}

/* ---------- La constelación del banner ----------
   Va entre la fotografía y el texto: z-index 1, con `.hero .wrap` en 2.

   Ya no lleva máscara. Hasta el 2026-10-15 una elipse de CSS la recortaba a
   la franja derecha; ahora el apartado lo hace el propio dibujo, midiendo la
   distancia de cada punto al bloque de texto más cercano. Así cubre todo el
   cielo en vez de una esquina, y sigue sin tocar una letra. Está en
   `ofek.js`. */
.hero .constelacion{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; display:block; pointer-events:none;
}

/* ---------- El velo bajo la tira de iconos ----------
   Cinco de esos textos fallaban desde antes de la constelación: los nuevos
   son más largos y bajan hasta la zona del atardecer, que es la parte clara
   de la fotografía. El peor —«Arvut: tu talento es nuestra apuesta»— daba
   1.81 sobre un fondo de luminancia 0.53, y el mínimo es 4.5.

   Va en `::after` del banner y no en la tira: así cubre todo el ancho y no
   solo la columna de contenido. Queda encima de la constelación (z-index 1,
   y un pseudo-elemento pinta después de los hijos) y debajo del texto, que
   va en `.wrap` con z-index 2. */
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:40%; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(10,13,17,0) 0%,
    rgba(10,13,17,.34) 46%,
    rgba(10,13,17,.75) 100%);
}

/* ---------- «La oportunidad que vemos»: cinco puntos con título ----------
   Eran cuatro frases sueltas; desde el 2026-10-15 son cinco y cada una
   lleva título. Dos cosas cambian con eso:

     · La fila pasa de cuatro columnas a cinco, y el hueco se aprieta para
       que quepan sin que el texto se parta en demasiados renglones.
     · El cuerpo deja de ir en negrita —la llevaba cuando el punto era una
       sola frase— y se la queda el título, que es lo que ahora pesa. */
/* Cuatro columnas desde el 2026-10-16, que es cuando los frentes pasaron
   de cinco a cuatro. En cinco, los cuatro puntos medían 209 px, ocupaban
   cuatro quintos del ancho y el riel cruzaba sobre una columna vacía. */
.oportunidades{ grid-template-columns:repeat(4,1fr); gap:0 22px }
.oportunidades p{ font-weight:400; max-width:none }
.oportunidades p b{
  display:block; margin-bottom:5px; font-weight:700;
}
@media(max-width:1100px){
  /* Dos y dos. En tres columnas el cuarto punto se queda solo abajo. */
  .oportunidades{ grid-template-columns:repeat(2,1fr); gap:30px 24px }
}
@media(max-width:880px){
  .oportunidades{ grid-template-columns:repeat(2,1fr) }
}
@media(max-width:560px){
  .oportunidades{ grid-template-columns:1fr }
}

/* ---------- «A quiénes buscamos» ----------
   Cuatro fichas sobre hueso, en dos columnas: cada criterio trae un párrafo
   y una línea de cierre, y en cuatro columnas el texto se parte en una tira
   de renglones de tres palabras.

   Dos columnas declaradas y filas de igual alto desde el 2026-10-16, que es
   lo que pedía la maqueta de Ofek. Antes era `auto-fit` con un mínimo de
   380 px —daba dos columnas por casualidad, no por decisión— y cada fila
   medía lo que midiera su contenido. */
.buscamos{
  position:relative;
  display:grid; grid-template-columns:repeat(2,1fr); grid-auto-rows:1fr;
  gap:20px; margin-top:34px; align-items:stretch;
}

/* El isologo en el cruce de los cuatro. El borde del color del fondo lo
   separa de las fichas: sin él se vería pegado encima de una de ellas, y
   con él parece que las une, que es lo que buscaba la maqueta. */
.buscamos .cruce{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:2; width:76px; height:76px; border-radius:50%;
  background:#fff; border:5px solid var(--hueso);
  box-shadow:0 2px 14px rgba(10,13,17,.14);
  display:grid; place-items:center;
}
.buscamos .cruce img{ width:44px; height:auto; display:block; margin:0 }

@media(max-width:620px){
  /* Apilado en una columna no hay cruce que marcar. */
  .buscamos .cruce{ display:none }
}

/* Cada ficha toma un color de marca. Mismo mecanismo que las tarjetas de la
   Red Ofek: una variable para el fondo, otra para la tinta, otra para los
   rellenos translúcidos de dentro.

   La tinta está medida, no elegida: sobre oro y turquesa el blanco da 1.84 y
   3.79 —no pasa— y el oscuro 10.57 y 5.14; sobre morado y pizarra, al revés.
   Las cifras están en la nota de `.red-roles`, que usa los mismos colores. */
.busca.tono-oro{
  --tono:var(--red-oro); --tinta:var(--negro);
  --vel:rgba(10,13,17,.12); --filete:rgba(10,13,17,.45);
}
.busca.tono-turquesa{
  --tono:var(--red-turquesa); --tinta:var(--negro);
  --vel:rgba(10,13,17,.12); --filete:rgba(10,13,17,.45);
}
.busca.tono-morado{
  --tono:var(--red-morado); --tinta:#fff;
  --vel:rgba(255,255,255,.18); --filete:rgba(255,255,255,.55);
}
.busca.tono-pizarra{
  --tono:var(--red-pizarra); --tinta:#fff;
  --vel:rgba(255,255,255,.18); --filete:rgba(255,255,255,.55);
}

.busca{
  background:var(--tono); color:var(--tinta); border:0; border-radius:10px;
  padding:26px 28px 24px;
  /* En columna, para que la línea de «Evaluamos…» se pegue abajo y las
     fichas de una misma fila cierren a la misma altura. */
  display:flex; flex-direction:column;
}
.busca .num{
  display:block; font-family:Poppins,sans-serif; font-weight:700;
  font-size:.72rem; letter-spacing:.14em; color:inherit; opacity:.7;
  margin-bottom:8px;
}
.busca h3{ margin:0 0 10px; font-size:1.12rem; line-height:1.3; color:inherit }
.busca p{
  margin:0; font-size:.92rem; line-height:1.6; color:inherit;
  /* Aquí la columna mide 556px y el justificado se sostiene sin partir
     palabras: los espacios se estiran tan poco que no se nota. */
  text-align:justify; text-wrap:pretty;
}

/* Las industrias iban en pastillas. El texto del 2026-10-16 las nombra en
   una sola frase y la lista desapareció del marcado; la regla se queda por
   si vuelven, que no estorba. */
.sectores{
  list-style:none; display:flex; flex-wrap:wrap; gap:7px;
  margin:14px 0 0; padding:0;
}
.sectores li{
  font-size:.82rem; line-height:1.4; color:inherit;
  background:var(--vel); border-radius:100px; padding:6px 13px;
}

/* La línea de cierre. En el documento iba precedida de un «>»; aquí ese
   signo se convierte en lo que quería decir: un bloque aparte. */
/* `margin-top:auto` la empuja al fondo de la ficha, así que las de una
   misma fila cierran a la misma altura aunque el cuerpo mida distinto. El
   hueco mínimo, cuando no sobra espacio, lo pone su relleno de arriba. */
.busca .evalua{
  margin-top:auto; padding:18px 0 2px 14px;
  border-left:3px solid var(--filete);
  font-size:.88rem; line-height:1.55; color:inherit;
  text-align:left;   /* es corta: justificarla la abriría */
}

@media(max-width:620px){
  .busca{ padding:22px 20px 20px }
  .buscamos{ grid-template-columns:1fr }
}

/* ---------- Tres retoques del 2026-10-15 ----------

   La glosa del banner, en un oro más hondo. El de marca es claro y esa
   frase cae sobre la zona luminosa de la fotografía, donde además ahora
   pasa la constelación. */
.hero .glosa-ofek{ color:#C98A14 }

/* La entrada de «A quiénes buscamos», a todo el ancho y justificada. */
#buscamos .entrada-sub,
#convocatoria .entrada-convocatoria{ max-width:none; text-align:justify }

/* «¿Por qué Ofek?»: el título del sexto pilar es una palabra en hebreo
   transcrita y va en cursiva, así que el `<em>` tiene que sobrevivir. */
.distintos h3 em{ font-style:italic }

/* ---------- El cronograma, a los dos lados del eje ----------
   Los hitos se alternan: uno arriba, el siguiente abajo. Con eso el grupo
   de enero-febrero deja de crecer en escalera hacia arriba.

   Y el tallo va DETRÁS de las cajas. Antes un tallo largo cruzaba por
   encima de las de las filas bajas —se veía la línea atravesando
   «Selection Day»—, porque sin orden de pintado declarado gana el que se
   dibuja después. */
.crono-hito::after{ z-index:0 }
.crono-hito .caja{ z-index:1 }

/* El bloque de abajo es el de arriba del revés: las cajas cuelgan y el
   tallo sube hasta el eje. */
.crono-abajo{ margin-top:0 }

/* El hito se ancla por el pie de su bloque; en el de abajo el origen tiene
   que ser el techo, que es donde está el eje. */
.crono-abajo .crono-hito{ bottom:auto; top:0 }
.crono-abajo .crono-hito::after{ bottom:auto; top:0 }
.crono-abajo .crono-hito .caja{ bottom:auto; top:calc(var(--base) + (var(--fila,1) - 1) * var(--paso)) }

/* El punto va montado sobre la línea: arriba sobresale por abajo, abajo por
   arriba. */
.crono-abajo .crono-hito::before{ bottom:auto; top:-5px }

@media(max-width:900px){
  /* Sin eje los hitos se apilan, y en dos listas se apilarían en dos
     grupos: primero los de arriba y luego los de abajo. `display:contents`
     saca los <li> al contenedor común para poder devolverlos al orden del
     calendario con `--orden`, que trae cada uno desde PHP. */
  .cronograma{ display:flex; flex-direction:column }
  .crono-arriba, .crono-abajo{ display:contents }
  .crono-hito{ order:var(--orden,0) }
  .crono-etapas{ order:999 }
}

/* ---------- El cronograma no encoge ----------
   El reparto en filas lo calcula PHP en porcentaje del eje, y una caja mide
   lo mismo en píxeles caiga donde caiga la ventana: cuanto más estrecha la
   columna, más porcentaje ocupa y antes se encima. Medido a 937 px, dos
   cajas se solapaban y una se salía.

   Con el ancho fijo la geometría es una sola y el cálculo siempre acierta;
   si la columna no da, el bloque se desplaza en horizontal. Por debajo de
   900 px manda la lista apilada y nada de esto aplica. */
@media(min-width:901px){
  .cronograma{ overflow-x:auto; overscroll-behavior-x:contain }
  .crono-hitos, .crono-eje, .crono-etapas{ min-width:1132px }
}

/* ---------- La línea de tiempo se dibuja al llegar ----------
   Usa el reveal del tema: `data-anima` en el contenedor y la clase
   `visible` al asomar. El estado de partida va en el atributo, que está en
   el HTML desde el primer pintado, así que no hay un instante con el
   cronograma ya visible antes de que corra el script.

   Ese helper trae su propia red de seguridad: si el observador no dispara,
   a los cuatro segundos marca todo como visible. Y con
   `prefers-reduced-motion` lo marca de entrada, que es lo que hace falta
   porque el reinicio global de arriba mata las transiciones y sin ellas el
   bloque se quedaría en opacidad cero para siempre.

   La transición va en `visible` y no en `anima`: si la trajera la clase de
   partida, el navegador transicionaría desde lo que hubiera —visible— hasta
   oculto, y se vería el cronograma aparecer, desvanecerse y volver. Así el
   bloque espera quieto y solo anima al entrar.

   El reparto del tiempo, unos 4.7 s en total:

       0.0 – 1.8 s   la línea del eje, de izquierda a derecha
       0.5 – 2.3 s   los meses encendiéndose detrás de ella
       0.9 – 3.6 s   los diez hitos, por fecha: punto, tallo y caja
       2.6 – 4.7 s   las cinco barras de etapa creciendo desde su inicio

   Lo que marca el ritmo no es la duración de cada transición sino el
   escalonado entre hitos: a 180 ms se leen uno a uno; por debajo de 100 se
   ve un barrido. */

/* El eje, de izquierda a derecha. Se dibuja con un pseudo-elemento y no con
   el borde porque un borde no se puede escalar. */
.cronograma[data-anima] .crono-eje{ border-top-color:transparent }
.cronograma[data-anima] .crono-eje::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:1px;
  background:var(--linea);
  transform:scaleX(0); transform-origin:left;
}
.cronograma[data-anima].visible .crono-eje::before{
  transform:scaleX(1);
  transition:transform 1.8s cubic-bezier(.22,.61,.36,1);
}

.cronograma[data-anima] .crono-eje span{ opacity:0 }
.cronograma[data-anima].visible .crono-eje span{
  opacity:1;
  transition:opacity .6s ease calc(.5s + var(--mes,0) * .07s);
}

/* Cada hito, por fecha: primero el punto, el tallo creciendo desde el eje y
   la caja al final. `--orden` lo pone PHP y es el número de hito en el
   calendario; ya se usaba para reordenarlos en pantalla chica. */
.crono-arriba .crono-hito::after{ transform-origin:bottom }
.crono-abajo  .crono-hito::after{ transform-origin:top }

.cronograma[data-anima] .crono-hito::before{ transform:scale(0) }
.cronograma[data-anima].visible .crono-hito::before{
  transform:scale(1);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1) calc(.9s + var(--orden,0) * .18s);
}

.cronograma[data-anima] .crono-hito::after{ transform:scaleY(0) }
.cronograma[data-anima].visible .crono-hito::after{
  transform:scaleY(1);
  transition:transform .8s cubic-bezier(.22,.61,.36,1) calc(1s + var(--orden,0) * .18s);
}

/* Solo la opacidad: el `transform` de la caja lleva el `translateX(-50%)`
   que la centra sobre su fecha, y tocarlo la movería de sitio. */
.cronograma[data-anima] .crono-hito .caja{ opacity:0 }
.cronograma[data-anima].visible .crono-hito .caja{
  opacity:1;
  transition:opacity .7s ease calc(1.25s + var(--orden,0) * .18s);
}

/* Las barras de etapa, creciendo desde su fecha de inicio. */
.cronograma[data-anima] .crono-rotulo{ opacity:0 }
.cronograma[data-anima].visible .crono-rotulo{
  opacity:1;
  transition:opacity .7s ease calc(2.6s + var(--orden,0) * .22s);
}

.cronograma[data-anima] .crono-etapa .barra{ transform:scaleX(0); transform-origin:left }
.cronograma[data-anima].visible .crono-etapa .barra{
  transform:scaleX(1);
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1) calc(2.7s + var(--orden,0) * .22s);
}

/* Con movimiento reducido el helper marca `visible` de entrada, pero se
   fuerza el estado final también aquí: si alguna vez se cambia el helper,
   lo que no puede pasar es que las fechas se queden invisibles. */
@media (prefers-reduced-motion:reduce){
  .cronograma[data-anima] .crono-eje{ border-top-color:var(--linea) }
  .cronograma[data-anima] .crono-eje::before{ display:none }
  .cronograma[data-anima] .crono-eje span,
  .cronograma[data-anima] .crono-hito .caja,
  .cronograma[data-anima] .crono-rotulo{ opacity:1 }
  .cronograma[data-anima] .crono-hito::before,
  .cronograma[data-anima] .crono-hito::after,
  .cronograma[data-anima] .crono-etapa .barra{ transform:none }
}

/* ---------- Comentarios de Ofek, 2026-10-16 ---------- */

/* ---- «¿Por qué Ofek?»: que las cajas se vean ----
   Estaban en hueso sobre blanco: 1.06:1, sin borde y sin sombra. El ojo no
   distingue dónde empieza una tarjeta. El relleno baja un paso, se le pone
   filete y una sombra corta.

   Se toca solo `.distintos article`: `.mv` —Misión y Visión— comparte la
   regla base y es otra sección, con otro fondo detrás. */
.distintos article{
  background:#EAF1F0;
  border:1px solid #D8E4E2;
  /* El filete superior, en el color de la tarjeta: el mismo `--tono` que
     llevan su icono y la rayita bajo el título. Declarado y no heredado de
     las reglas `nth-child` de la hoja vieja, que lo sacaban de la posición
     en la rejilla y se romperían al reordenar los pilares. */
  border-top:3px solid var(--tono, var(--turquesa));
  box-shadow:0 3px 16px rgba(10,13,17,.06);
}

/* ---- «Ofek en acción»: las tarjetas, en turquesa ----
   Eran blancas sobre blanco. En el turquesa de marca el cuerpo —14 px—
   se quedaba en 3.90:1 contra el blanco, así que va sobre el hondo. */
/* Un color de marca por tarjeta, con las mismas variables que «A quiénes
   buscamos» y la Red Ofek. La tinta viene medida de ahí: sobre oro y
   turquesa el blanco no llega y va oscura; sobre morado, clara. */
.iniciativa{ background:var(--tono); color:var(--tinta); border-color:var(--tono) }
.iniciativa.tono-turquesa{ --tono:var(--red-turquesa); --tinta:var(--negro) }
.iniciativa.tono-morado{   --tono:var(--red-morado);   --tinta:#fff }
.iniciativa.tono-oro{      --tono:var(--red-oro);      --tinta:var(--negro) }

.iniciativa .lema,
.iniciativa p{ color:inherit }
/* El párrafo, un punto por debajo del título: con `currentColor` y una
   transparencia sirve igual sobre tinta clara que sobre oscura.

   92% y no 88%: a 88 el de la tarjeta turquesa se quedaba en 4.59 contra
   el 4.5 que pide un texto de 14 px, y ese margen es demasiado fino para
   dejarlo. */
.iniciativa p{ color:color-mix(in srgb, currentColor 92%, transparent) }

/* El enlace, subrayado: sobre un fondo de color no basta con cambiar el
   tono para que se lea como enlace. */
.iniciativa .mas{ color:inherit; text-decoration:underline; text-underline-offset:3px }

/* El título de la portada va sobre la fotografía y su velo, no sobre el
   color de la tarjeta: se queda en blanco pase lo que pase. */
.iniciativa .portada-texto h3{ color:#fff }

/* El boletín vive en la tarjeta de oro, que lleva tinta oscura, así que
   sus campos vuelven a lo normal. El botón es lo único que necesita mano:
   en oro sobre oro no se vería. Forminator publica lo suyo con un selector
   de id, de ahí los `!important` —el mismo patrón que ya usa
   `.form-card`—. */
.iniciativa .boletin .forminator-label,
.iniciativa .boletin .forminator-checkbox{ color:var(--tinta) !important }
.iniciativa .boletin .forminator-input{
  background:#fff !important; color:var(--negro) !important;
  border-color:rgba(10,13,17,.35) !important;
}
.iniciativa .boletin .forminator-button{
  background:var(--negro) !important; color:#fff !important;
  border-color:var(--negro) !important;
}
.iniciativa .boletin .pie{ color:color-mix(in srgb, currentColor 82%, transparent) }

/* ---------- Entrada escalonada, reutilizable ----------
   Marcar el contenedor con `data-anima class="entrada"` y sus hijos
   directos entran uno detrás de otro al asomar la sección. Una línea por
   sección, en vez de un bloque de CSS cada vez que alguien quiera animar
   una rejilla.

   El estado de partida vive detrás de `.js-anima`, igual que el de «La
   oportunidad que vemos»: si el script del `<head>` no corre, no se
   esconde nada y la sección se ve entera y quieta. Lo que se anima ya
   estaba ahí.

   La transición va en `visible` y no en el estado de partida: si la
   trajera la clase de partida, el navegador animaría DESDE lo visible
   HASTA lo oculto y se vería la sección aparecer y desvanecerse. */
/* `:not(.cruce)` no es un capricho: el isologo del cruce se centra con su
   propio `transform`, y `transform` no se reparte entre dos reglas. Si
   entra aquí, el desplazamiento de la entrada sustituye al centrado y el
   isologo se va 38 px a la derecha del cruce. */
/* Solo opacidad, sin levantar la tarjeta. Llevaba `translateY(16px)` y
   eso, con el escalonado, pone las tarjetas de una misma fila a alturas
   distintas mientras entra: se lee como un desfase de maquetación, y en
   octubre de 2026 así se reportó. El turno ya da el efecto; el movimiento
   solo añadía la confusión. */
.js-anima .entrada[data-anima] > *:not(.cruce){
  opacity:0;
}
.entrada[data-anima].visible > *:not(.cruce){
  opacity:1;
  transition:opacity .65s ease;
}

/* El escalonado. Con `nth-child` y no con una variable en el marcado,
   porque el objetivo era no tener que tocar cada hijo. */
.entrada[data-anima].visible > *:nth-child(1){ transition-delay:0s }
.entrada[data-anima].visible > *:nth-child(2){ transition-delay:.11s }
.entrada[data-anima].visible > *:nth-child(3){ transition-delay:.22s }
.entrada[data-anima].visible > *:nth-child(4){ transition-delay:.33s }
.entrada[data-anima].visible > *:nth-child(5){ transition-delay:.44s }
.entrada[data-anima].visible > *:nth-child(6){ transition-delay:.55s }
.entrada[data-anima].visible > *:nth-child(7){ transition-delay:.66s }
.entrada[data-anima].visible > *:nth-child(8){ transition-delay:.77s }

/* El isologo entra solo con opacidad, y a media tanda: está en medio de
   los cuatro y llegar el último lo convertiría en un sobresalto. */
.js-anima .buscamos.entrada[data-anima] > .cruce{ opacity:0 }
.buscamos.entrada[data-anima].visible > .cruce{
  opacity:1; transition:opacity .65s ease .33s;
}

@media (prefers-reduced-motion:reduce){
  .js-anima .entrada[data-anima] > *:not(.cruce){ opacity:1 }
  .js-anima .buscamos.entrada[data-anima] > .cruce{ opacity:1 }
}

/* ---------- «¿Por qué Ofek?»: las tarjetas comparten filas ----------
   El título ocupa uno o dos renglones según la tarjeta, y el párrafo de
   debajo se corría 21 px entre unas y otras. Con `subgrid` las tres filas
   —disco, título, párrafo— son las del contenedor, así que caen a la misma
   altura en toda la fila midan lo que midan.

   `grid-auto-rows` se repite en ciclo: con seis tarjetas en dos filas de
   tres salen seis filas implícitas, y el patrón «auto auto 1fr» se aplica a
   las tres primeras y otra vez a las tres siguientes. Cada fila de tarjetas
   se alinea consigo misma, que es lo que se quiere.

   La tarjeta pasa de flex a grid, así que el centrado horizontal lo hace
   ahora `justify-items` en vez de `align-items`. */
.distintos{ grid-auto-rows:auto auto 1fr }
.distintos article{
  display:grid; grid-template-rows:subgrid; grid-row:span 3;
  justify-items:center; align-content:start;
}

/* El filete va anclado al fondo del título. El título se estira hasta la
   altura de su fila —es lo que hace que los párrafos cuadren— y si el
   filete siguiera al texto quedaría a una altura distinta en cada tarjeta:
   habríamos cambiado un desfase por otro. */
.distintos h3{
  position:relative; padding-bottom:14px; margin-bottom:14px;
  align-self:stretch;
}
.distintos h3::after{
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  margin:0;
}

/* ---------- «Nuestros programas»: las dos tarjetas comparten filas ----------
   La línea de cohorte ocupa tres renglones en la incubadora y uno en la
   aceleradora, así que «Qué recibe cada emprendedor» y su lista arrancaban
   23 px más abajo en una que en otra.

   Reservar un número fijo de renglones arreglaba hoy y se rompía en cuanto
   alguien tocara el texto. Con `subgrid` en dos niveles —la tarjeta y su
   cuerpo— las filas las decide la maqueta: cada bloque cae a la altura del
   más alto de los dos, midan lo que midan.

   Seis filas: cabecera, «para quién», cohorte, «qué recibe», la lista y la
   nota del asterisco. Esa última solo la lleva la aceleradora; la
   incubadora la deja vacía, que es exactamente lo que se quiere. */
#programas .cols2{ grid-auto-rows:auto auto auto auto auto 1fr }
#programas .track{
  display:grid; grid-template-rows:subgrid; grid-row:span 6;
}
#programas .track-cuerpo{
  display:grid; grid-template-rows:subgrid; grid-row:span 5;
  align-content:start;
}

/* ---------- Las tarjetas no se descuelgan ----------
   Síntoma: en una misma fila, unas tarjetas empiezan más abajo que otras
   aunque todas terminen igual. Medido en «¿Por qué Ofek?», la primera medía
   408 px desde `top:0` y las otras dos 390 desde `top:18`.

   Causa: un `margin-top` de 17.6 px que ninguna regla declara. Es el valor
   usado de un margen automático —cuando el navegador no logra estirar el
   elemento hasta su área de rejilla, reparte el sobrante ahí— y el efecto
   es que la caja se descuelga.

   Ni `align-self:stretch` ni `height:100%` lo corrigen; se probaron los dos
   en la página antes de escribir esto. Declarar el margen, sí.

   Va en las cuatro familias de tarjetas que se reportaron el 2026-10-19,
   porque el mecanismo es el mismo en todas. */
.distintos article,
.mv-par .mv,
#programas .track,
.iniciativas .iniciativa{ margin-block:0 }

/* ---------- La tira de iconos del banner, alineada ----------
   Cada icono era una fila flex con el icono y el texto centrados en
   vertical. El tercero tiene el apoyo más largo, así que su bloque es más
   alto y, al centrarse, su título quedaba 9 px por encima de los otros
   tres; el apoyo, igual.

   Centrar y alinear entre columnas no se llevan: mientras cada bloque se
   centre respecto a su propia altura, dos de distinta altura nunca
   empezarán a la misma. Así que las filas dejan de ser de cada icono y
   pasan a ser de la tira.

   El `display:contents` del párrafo es lo que deja que el titular y el
   apoyo sean filas de la rejilla; sin él seguirían encerrados en su caja y
   el subgrid no tendría a qué agarrarse. */
.hero-datos>div{
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:subgrid;
  grid-row:span 2; align-items:start; column-gap:14px; margin-block:0;
}
.hero-datos .icono{ grid-row:1 / span 2; align-self:center }
.hero-datos p{ display:contents }
.hero-datos b,
.hero-datos span{ grid-column:2 }

/* ---------- El texto legal del Aviso de Privacidad ----------
   Medida corta —68 caracteres— porque es texto largo y seguido: a todo el
   ancho de la página se pierde el renglón al saltar de línea.

   Los encabezados van marcados de verdad, no con negritas: así se puede
   recorrer el documento con un lector de pantalla, que es exactamente a
   quien más le cuesta leerse un aviso legal entero. */
.texto-legal{ max-width:68ch; margin-top:34px }
.texto-legal h3{
  font-family:Poppins,sans-serif; font-weight:600; font-size:1.02rem;
  margin:34px 0 10px; color:var(--negro);
}
.texto-legal h3:first-child{ margin-top:0 }
.texto-legal p,
.texto-legal li{ font-size:.94rem; line-height:1.7; color:var(--gris) }
.texto-legal p{ margin:0 0 12px }
.texto-legal ul{ margin:0 0 16px; padding-left:1.15rem }
.texto-legal li{ margin-bottom:7px }
.texto-legal strong{ color:var(--negro); font-weight:600 }
.texto-legal code{
  font-size:.86em; background:var(--hueso); border:1px solid var(--linea);
  border-radius:4px; padding:1px 5px;
}
.texto-legal a{ color:var(--turquesa-texto) }

/* ---------- La tira de iconos, por debajo de las cabezas ----------
   Ofek, 2026-10-27: el filete y los cuatro textos caían sobre las cabezas
   de las personas de la fotografía. Medido en el sitio en vivo a 1440 px:
   las cabezas empiezan en y=487 y el filete estaba en y=606, justo en
   medio. Ahora cae sobre la espalda, unos 20 px por debajo de donde las
   siluetas se vuelven una banda continua.

   El valor no puede ser fijo, y la razón es el `cover` de la fotografía:

     · Mientras la caja del banner sea más alta que ancha en proporción
       3:2 —hasta unos 1510 px de ancho—, el recorte lo manda el alto y
       los hombros caen siempre en el 65.9 % de la altura. Ahí la cuenta
       sale independiente del ancho: 184 px.

     · Más ancho que eso, el recorte lo manda el ancho, la fotografía se
       agranda y las personas bajan ~0.17 px por cada píxel de ancho. De
       ahí la pendiente de 29.55vw.

   Y hay realimentación: bajar la tira estira el banner, y estirar el
   banner vuelve a bajar a las personas (0.42 px por cada píxel de alto).
   Los coeficientes ya la traen descontada.

   Comprobado contra la fotografía real —midiendo en un canvas dónde
   empieza la masa oscura de las siluetas— en 1024, 1280, 1366, 1440,
   1536, 1680, 1920 y 2560 px: el filete queda entre 10 y 26 px por
   debajo de los hombros en todos. Por encima de 2560 el tope de 500 px
   corta la cuenta y volvería a subirse; si algún día hace falta, se sube
   el tope, no la pendiente.

   Debajo de 901 px no aplica: la tira se parte en dos columnas, el
   banner es alto y estrecho y las personas quedan muy por debajo. */
@media(min-width:901px){
  .hero-datos{ margin-top:clamp(184px, calc(29.55vw - 262px), 500px) }
}

/* ---------- La barra en pantalla chica ----------
   Ofek, 2026-10-27, desde un teléfono: el botón de Contacto se caía a un
   segundo renglón y se salía por la izquierda, y «Menú» quedaba pegado al
   borde derecho. Medido a 375 px: la barra medía 141 px de alto —tapaba el
   titular del banner— y sus dos extremos tocaban el filo de la pantalla.

   Dos causas distintas, y las dos se arreglan aquí.

   1 · El botón estaba suelto en la barra. Ahora va dentro de la envoltura
       del menú (ver `header.php`), así que por debajo de 900 px entra en el
       panel desplegable en vez de pelear por el renglón. Queda a todo lo
       ancho y al final de la lista, que es donde se espera la acción
       principal de un menú de teléfono.

   2 · `.topbar` no tenía canalillo lateral. Trae `padding:16px 0`, que por
       orden de cascada le gana al `padding:0 24px` de `.wrap`, y como la
       barra es lo único que se apoya en el borde, nada lo delataba hasta
       que un elemento llegó hasta el filo.

       Solo se repone por debajo de 900 px, y no es timidez: entre 901 y
       1180 px la barra lleva las cinco entradas desplegadas y, según está
       medido más arriba, le quedan unos 25 px de holgura. Meterle 48 px de
       canalillo ahí la partiría en dos renglones, que es exactamente el
       defecto que se está corrigiendo. Ahí el logotipo sigue 24 px a la
       izquierda del contenido; se arregla el día que se rehaga el reparto
       de la barra, no de pasada. */
@media (max-width:900px){
  .topbar{ padding-left:24px; padding-right:24px }

  .menu-envoltura .btn{
    display:block; width:100%; text-align:center;
    margin:18px 0 4px; padding:16px 18px;
  }
}

/* En la portada el panel desplegado es casi negro —lo lleva para poder
   leerse sobre la fotografía— y ahí un botón negro desaparece. Solo en ese
   caso cambia al oro de marca, con texto negro, como manda el manual. */
@media (max-width:900px){
  body.home .menu-envoltura .btn-negro{
    background:var(--oro); border-color:var(--oro); color:var(--negro);
  }
}

/* Aquí vivió, del 2026-10-27 por la mañana a esa misma tarde, un tramo
   para teléfonos de menos de 375 px: apretaba el canalillo y escondía la
   palabra «Menú», que con sus 157 px de botón dejaba la barra sin sitio
   a 360 px de ancho. Ofek pidió el icono de sándwich a secas, la palabra
   se escondió en todas las anchuras y el tramo se quedó sin razón de
   ser: el mínimo de la barra bajó de 362 a unos 240 px. */