/* =========================================================================
 * Fundación CADEVI · los estilos de la sección   (lote 109, Parte B)
 * =========================================================================
 *
 * Este archivo se encola SOLO en las páginas de la sección
 * (`yacoub_fundacion_css()`, libs/fundacion-diseno.php). No toca
 * `style.min.css` ni una letra: los dos colores entran como variables por
 * `wp_add_inline_style`, y salen de `datos/fundacion.json`.
 *
 * Los `var(--cadevi-…, #…)` llevan respaldo escrito para que la sección se
 * vea bien aunque el JSON pierda la clave: un color vacío deja texto blanco
 * sobre blanco, que es una página que no se puede leer.
 * ====================================================================== */

/* =========================================================================
 * 1 · La franja de sección
 * ====================================================================== */
.cadevi-franja {
  background: var(--cadevi-ladrillo, #c8501b);
  color: #fff;
}
.cadevi-franja__caja {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  /* EN LA COMPUTADORA, UN RENGLÓN. En el celular y la tablet la franja corta
     en renglones (abajo, lote 123): ver «Celular y tablet». Hamburguesa sigue
     sin haber, por lo mismo que en el 109: son nueve items cortos, y un menú
     que hay que abrir esconde la sección entera detrás de un clic. */
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cadevi-franja__caja::-webkit-scrollbar { display: none; }
.cadevi-franja__marca {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}
.cadevi-franja__marca:hover,
.cadevi-franja__marca:focus-visible { color: #fff; text-decoration: underline; }
.cadevi-franja__huella { flex: 0 0 auto; color: var(--cadevi-huella, #f2a33a); }
.cadevi-franja__sep {
  flex: 0 0 auto;
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, .45);
}
.cadevi-franja__lista {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: nowrap;
}
.cadevi-franja__li { flex: 0 0 auto; }
.cadevi-franja__a {
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  opacity: .92;
}
.cadevi-franja__a:hover,
.cadevi-franja__a:focus-visible { color: #fff; opacity: 1; text-decoration: underline; }
.cadevi-franja__a--actual {
  opacity: 1;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}
.cadevi-franja__a:focus-visible,
.cadevi-franja__marca:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 3px;
}

/* -------------------------------------------------------------------------
 * Celular y tablet (lote 123)
 *
 * EL 109 LA HACÍA DESLIZAR DE COSTADO, con la barra escondida, y eso no
 * funcionó: el contenido mide 965 px, a 390 se veían «Fundación CADEVI |
 * Historia | Capacitación | Vi…» y nada indicaba que había más. Marcos, desde
 * el teléfono, lo leyó como «está roto, no te deja verlo completo», y en
 * /fundacion-cadevi/preguntas-frecuentes/ el ítem de la página («Preguntas»)
 * quedaba en x = 880, fuera de la pantalla. Ahora se ven los diez sin
 * deslizar:
 *
 *   - hasta 1023: «Fundación CADEVI» en su renglón y los nueve debajo, en los
 *     renglones que hagan falta. El separador no va: separa dos cosas en un
 *     mismo renglón, y acá están una arriba de la otra;
 *   - cada enlace, 32 px de alto para tocarlo (el texto sigue en 14 px);
 *   - el relleno de arriba y de abajo del `.container` de style.min.css (35 px)
 *     baja a 6: la franja mide lo que suman sus renglones y no más;
 *   - de 1024 a 1199 los diez entran en un renglón. Si una letra más ancha no
 *     los dejara entrar, la lista corta en renglones al lado del separador, y
 *     nunca un enlace fuera de la pantalla;
 *   - desde 1200 no cambia nada: la computadora queda como en el 122.
 * ---------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .cadevi-franja__caja { overflow-x: visible; }
  .cadevi-franja__lista { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
}
@media (max-width: 1023.98px) {
  .cadevi-franja__caja {
    flex-wrap: wrap;
    row-gap: 0;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .cadevi-franja__marca { min-height: 32px; }
  .cadevi-franja__sep { display: none; }
  .cadevi-franja__lista { flex: 0 0 100%; row-gap: 0; }
  .cadevi-franja__a { display: inline-flex; align-items: center; min-height: 32px; }
}

/* =========================================================================
 * 2 · Las migas
 * ====================================================================== */
.cadevi-migas { margin: 18px 0 6px; font-size: 13px; color: #666; }
.cadevi-migas__ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cadevi-migas__li { display: inline-flex; align-items: center; gap: 6px; }
.cadevi-migas a { color: #666; text-decoration: underline; text-underline-offset: 2px; }
.cadevi-migas a:hover,
.cadevi-migas a:focus-visible { color: var(--cadevi-ladrillo, #c8501b); }
.cadevi-migas__sep { color: #aaa; }
.cadevi-migas [aria-current="page"] { color: #222; }

/* =========================================================================
 * 3 · El artículo y su lateral
 * ====================================================================== */
.yc-pagina-texto--cadevi .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-areas: "migas migas" "cuerpo lateral";
  gap: 0 40px;
  align-items: start;
}
.yc-pagina-texto--cadevi .cadevi-migas { grid-area: migas; }
.yc-pagina-texto--cadevi .yc-pagina-texto__cab,
.yc-pagina-texto--cadevi .yc-pagina-texto__cuerpo { grid-column: 1; }
.yc-pagina-texto--cadevi .cadevi-lateral { grid-area: lateral; }

/* DEBAJO, NO ESCONDIDO: lo que hay en el lateral es contenido -el índice de la
   sección, el libro y de quién es la Fundación-, así que en pantalla chica
   baja y sigue estando. */
@media (max-width: 899px) {
  .yc-pagina-texto--cadevi .container {
    display: block;
  }
  .yc-pagina-texto--cadevi .cadevi-lateral { margin-top: 36px; }
}

.cadevi-lateral { margin: 26px 0 40px; }
.cadevi-lateral__tarjeta {
  border: 1px solid #e6e6e6;
  border-left: 3px solid var(--cadevi-ladrillo, #c8501b);
  border-radius: 4px;
  padding: 16px 18px;
  margin: 0 0 18px;
  background: #fcfcfc;
}
.cadevi-lateral__h2 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  color: #222;
  letter-spacing: .01em;
}
.cadevi-lateral__indice { margin: 0; padding: 0; list-style: none; }
.cadevi-lateral__indice li { margin: 0 0 7px; }
.cadevi-lateral__indice a {
  font-size: 14px;
  color: #444;
  text-decoration: none;
}
.cadevi-lateral__indice a:hover,
.cadevi-lateral__indice a:focus-visible {
  color: var(--cadevi-ladrillo, #c8501b);
  text-decoration: underline;
}
.cadevi-lateral__indice [aria-current="page"] { font-weight: 600; color: #222; }
.cadevi-lateral p { margin: 0 0 8px; font-size: 14px; color: #444; line-height: 1.5; }
.cadevi-libro__titulo { font-weight: 600; color: #222; }
.cadevi-libro__autora,
.cadevi-libro__fecha { color: #666; font-size: 13px; }
.cadevi-lateral__mas {
  color: var(--cadevi-ladrillo, #c8501b);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================================
 * 4 · Los botones
 * ====================================================================== */
.cadevi-btn {
  display: inline-block;
  margin-top: 6px;
  padding: 9px 16px;
  border-radius: 4px;
  background: var(--cadevi-ladrillo, #c8501b);
  /* Blanco sobre #c8501b da 5,0:1, por encima del 4,5:1 que pide la AA. */
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.cadevi-btn:hover,
.cadevi-btn:focus-visible { background: #a8420f; color: #fff; }
.cadevi-btn--borde {
  background: transparent;
  color: var(--cadevi-ladrillo, #c8501b);
  border: 1px solid var(--cadevi-ladrillo, #c8501b);
}
.cadevi-btn--borde:hover,
.cadevi-btn--borde:focus-visible { background: var(--cadevi-ladrillo, #c8501b); color: #fff; }
.cadevi-btn:focus-visible,
.cadevi-btn--borde:focus-visible { outline: 2px solid #222; outline-offset: 3px; }

/* =========================================================================
 * 5 · Los tres bloques del final de la portada
 * ====================================================================== */
.cadevi-bloque { padding: 44px 0; }
.cadevi-bloque--metas { background: #faf6f3; }
.cadevi-bloque__h2 {
  margin: 0 0 22px;
  font-size: 24px;
  font-weight: 600;
  color: #222;
}
.cadevi-metas,
.cadevi-pilares,
.cadevi-motivos { margin: 0; padding: 0; list-style: none; }
.cadevi-metas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.cadevi-meta {
  border-top: 3px solid var(--cadevi-huella, #f2a33a);
  padding-top: 12px;
}
.cadevi-meta__cifra {
  display: block;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--cadevi-ladrillo, #c8501b);
}
.cadevi-meta__que { display: block; margin-top: 4px; font-size: 14px; color: #444; }
.cadevi-pilares {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.cadevi-pilar__a {
  display: block;
  height: 100%;
  padding: 18px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  color: #222;
  font-weight: 600;
  text-decoration: none;
  background: #fff;
}
.cadevi-pilar__a:hover,
.cadevi-pilar__a:focus-visible {
  border-color: var(--cadevi-ladrillo, #c8501b);
  color: var(--cadevi-ladrillo, #c8501b);
}
.cadevi-motivos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
  margin-bottom: 18px;
}
.cadevi-motivo {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  color: #444;
}
.cadevi-motivo::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cadevi-huella, #f2a33a);
}

/* Lote 122-2 · la tarjeta «En esta sección» del lateral, en la portada: el
   mismo ancho que las preguntas, para que no se estire a lo ancho del contenedor. */
.cadevi-bloque--indice { padding-top: 0; }
.cadevi-bloque--indice .cadevi-lateral__tarjeta { max-width: 760px; margin: 0; }

@media (max-width: 899px) {
  .cadevi-metas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cadevi-pilares { grid-template-columns: 1fr; }
  .cadevi-motivos { grid-template-columns: 1fr; }
  .cadevi-bloque { padding: 32px 0; }
}

/* =========================================================================
 * 6 · Las preguntas de la portada
 * ====================================================================== */
.cadevi-faq { max-width: 760px; }
.cadevi-faq__item {
  border-bottom: 1px solid #e6e6e6;
  padding: 12px 0;
}
.cadevi-faq__p {
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  color: #222;
  list-style: none;
}
.cadevi-faq__p::-webkit-details-marker { display: none; }
.cadevi-faq__p::before {
  content: "+";
  display: inline-block;
  width: 18px;
  color: var(--cadevi-ladrillo, #c8501b);
  font-weight: 700;
}
.cadevi-faq__item[open] .cadevi-faq__p::before { content: "–"; }
.cadevi-faq__r p { margin: 8px 0 0 18px; font-size: 15px; color: #444; line-height: 1.6; }
.cadevi-faq__mas { margin-top: 16px; }
.cadevi-faq__mas a {
  color: var(--cadevi-ladrillo, #c8501b);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================================
 * Lote 122-3 · Las fotos de la sección
 * =========================================================================
 * La cabecera de las hijas sigue a la franja: el mismo ladrillo de fondo y el
 * borde de abajo en huella. Sin imagen destacada no se imprime. */
.cadevi-cab {
  background: var(--cadevi-ladrillo, #c8501b);
  border-bottom: 4px solid var(--cadevi-huella, #f2a33a);
}
.cadevi-cab__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  aspect-ratio: 16 / 5;
  object-fit: cover;
}
/* La galería y «En los medios» son bloques de la portada, como los demás: la
   grilla de fotos es la de las zonas y la de notas, la de Prensa. */
.cadevi-bloque--galeria .yc-zona__tira { margin: 0; }
.cadevi-bloque--galeria .yc-zona__tira-t,
.cadevi-bloque--medios .cadevi-bloque__h2 {
  margin: 0 0 22px;
  font-size: 24px;
  font-weight: 600;
  color: #222;
}
.cadevi-bloque--medios .cadevi-faq__mas { margin-top: 18px; }

@media (max-width: 899px) {
  .cadevi-cab__img { aspect-ratio: 16 / 9; }
}

/* =========================================================================
 * LOTE 109b · LA CASILLA DE NOVEDADES DEL FORMULARIO DE LA SECCION
 * =========================================================================
 *
 * QUE PASABA
 * ----------
 * La seccion 6 de `template-page/template-fundacion-cadevi.php` imprime el
 * formulario `#form_contacto` y, adentro del bloque del correo, la casilla de
 * `yc_usuarios_casilla_novedades()`. La plantilla la rompia en dos lugares:
 *
 *   .template-fundacion-cadevi .section-6 form input        (0,2,2)
 *     height:50px; width:100%; background:rgba(255,255,255,.5); padding:10px
 *   .template-fundacion-cadevi .section-6 form label        (0,2,2)
 *     color:#fff; font-size:12px; text-transform:uppercase
 *
 * El `input[type=checkbox]` salia de 360,33 x 50 px -una pastilla a todo el
 * ancho-, y el `<span>` se quedaba con los 68,92 px que sobraban: una columna
 * de una palabra por renglon, 191,69 px de alto, y a 390 el texto se iba 43,92
 * px fuera de la ventana.
 *
 * LA CASILLA SI TENIA REGLA PROPIA, Y ESO CAMBIA EL ARREGLO
 * ---------------------------------------------------------
 * `assets/css/yc-usuarios.css:201` ya le da a `.yc-novedades` su tarjeta crema
 * -#FAF9F6, borde #E6E3DC, radio 6, texto #4A4C48 sin mayusculas- y a su
 * `input` el `width:auto`. Es la misma tarjeta que se ve en /contacto/, en
 * tasaciones, en vender, en la red y en las fichas. Lo unico que le pasa aca
 * es que pierde por especificidad: (0,1,0) y (0,1,1) contra (0,2,2).
 *
 * Asi que esto NO inventa un dibujo nuevo: repite el que ya existe con la
 * especificidad que hace falta para ganar -el `#form_contacto` sube a (1,3,1)-
 * y la seccion queda igual que los otros diez formularios del sitio.
 *
 * EL CONTRASTE, MEDIDO Y NO SUPUESTO
 * ----------------------------------
 * El texto NO esta sobre el naranja: esta sobre la tarjeta crema. Medido con
 * `tests/captura-lib.js` (WCAG 2.1):
 *
 *   blanco  sobre #FAF9F6 (lo que habia) ......  1,05:1   ← invisible
 *   blanco  sobre #eb7e09 (el naranja) .......   2,79:1
 *   #4A4C48 sobre #FAF9F6 (la linea grande) ..   8,25:1   ✓
 *   #8A8C86 sobre #FAF9F6 (la casa, chica) ...   3,23:1   ✗ no llega
 *   #6B6B6B sobre #FAF9F6 (la chica, aca) ....   5,06:1   ✓
 *
 * El `<small>` es lo unico que se aparta de `yc-usuarios.css`: su gris de la
 * casa no llega a 4,5:1 y aca se pide medido, asi que va el #6B6B6B que ya
 * usan `main.yc-contacto` y `main.yc-tas` en `yc-mejoras.css`.
 *
 * NO SE TOCA el marcado de `yc_usuarios_casilla_novedades()` -lo comparten
 * once formularios- ni `yc-mejoras.css` ni la plantilla ACF. Y esta hoja se
 * encola SOLO donde `yacoub_es_fundacion()`, asi que ninguna de estas reglas
 * puede alcanzar a los otros diez.
 * ====================================================================== */

main.template-fundacion-cadevi .section-6 #form_contacto .yc-novedades {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin: 0 0 14px;
  padding: 12px 14px;
  background: #faf9f6;
  border: 1px solid #e6e3dc;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  color: #4a4c48;
  cursor: pointer;
}
main.template-fundacion-cadevi .section-6 #form_contacto .yc-novedades input[type="checkbox"] {
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  min-height: 0;
  flex: 0 0 18px;
  margin: 2px 0 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  -webkit-appearance: auto;
  appearance: auto;
  accent-color: #eb7e09;
}
main.template-fundacion-cadevi .section-6 #form_contacto .yc-novedades span {
  display: block;
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  color: #4a4c48;
}
main.template-fundacion-cadevi .section-6 #form_contacto .yc-novedades small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.4;
  text-transform: none;
  color: #6b6b6b;
}

/* =========================================================================
 * LOTE 109b (tramo 2) · EL PIE DE LA SECCION, QUE SE IBA DE ANCHO EN EL CELULAR
 * =========================================================================
 *
 * QUE PASABA
 * ----------
 * `footer.php:1` tiene una rama propia para esta plantilla -`footer-cadevi`-
 * con dos logos que llevan el ancho EN EL ATRIBUTO:
 *
 *   <img src="…/logo-cadevi.svg"           width="312" height="85">
 *   <img src="…/logo-yacoub-fundacion.svg" width="558" height="212">
 *
 * En HTML esos atributos son una pista de presentacion: fijan el `width` en
 * CSS. Y la unica regla que los toca -`.footer-cadevi .container a img`- les
 * pone `height: 100%` y `object-fit: contain`, pero NO el ancho. Asi que cada
 * `<img>` ocupa 312 y 558 px de fila aunque el logo dibujado adentro mida
 * mucho menos, y la fila -un `d-flex justify-between` que no envuelve- pide
 * 870 px. Medido: la portada media 890 px de ancho a 390 de ventana.
 *
 * DONDE PASABA, MEDIDO
 * --------------------
 *   1440 → 1440 ✓      1024 → 1024 ✓      600 → 890 ✗
 *   1280 → 1310 (*)     900 →  900 ✓      390 → 890 ✗
 *   1025 → 1095 (*)     768 →  890 ✗      360 → 890 ✗
 *
 *   (*) esos 30 y 70 px NO son del pie: son los adornos SVG de la seccion 1
 *       de la plantilla, y siguen igual despues de este tramo. Queda en el
 *       informe; no es lo que este tramo arregla.
 *
 * Arriba de 1024,5 el pie NUNCA se va: la fila pide 870 y la columna mide 945
 * o mas. Por eso el arreglo va DENTRO DEL BREAKPOINT DEL TEMA -el mismo
 * `max-width: 1024.5px` donde `style.min.css` le baja el alto a 35 px- y no
 * suelto: suelto le cambia el escritorio. Medido a 1280, con las reglas
 * sueltas, el logo de Yacoub pasaba de 184,25 x 70 a 539,99 x 205,16.
 *
 * Y EL ANCHO SALE DEL ALTO, no de un 100 %
 * ----------------------------------------
 * `width: 100%` + `height: auto` tambien saca el atributo del medio, pero a
 * 390 dejaba los logos en 42,91 y 59,83 px de alto adentro de un `<a>` que el
 * tema fija en 35: mas grandes de lo dibujado y desbordandolo por abajo.
 *
 * Con `width: auto` el ancho lo calcula el navegador desde el alto y la
 * proporcion del archivo -35 x 312/85 = 128,47 y 35 x 558/212 = 92,11-, que es
 * EXACTAMENTE lo que hoy se ve adentro de la caja vacia. O sea: no se achica
 * ni se agranda un logo; se les saca el aire de los costados. La fila pasa de
 * 870 a 220 px y la portada, de 890 a 390.
 *
 * NO SE TOCA `footer.php` -el marcado es del tema y lo comparte con nadie mas,
 * pero sigue siendo suyo-, ni la plantilla de ACF, ni `style.min.css`. Esta
 * hoja se encola solo donde `yacoub_es_fundacion()`, y ademas las tres reglas
 * arrancan en `main.template-fundacion-cadevi`, asi que no hay pie del sitio
 * que puedan alcanzar.
 * ====================================================================== */

@media screen and (max-width: 1024.5px) {
  main.template-fundacion-cadevi ~ footer.footer-cadevi .container {
    flex-wrap: wrap;
    gap: 16px;
  }
  main.template-fundacion-cadevi ~ footer.footer-cadevi .container a {
    max-width: 45%;
  }
  main.template-fundacion-cadevi ~ footer.footer-cadevi .container a img {
    width: auto;
    max-width: 100%;
    height: 100%;
  }
}