/* ═══════════════════════════════════════════════════════════════
   FUNDACIÓN PRODE · /becas/

   Nada de esto inventa lenguaje visual: sale de las variables que ya
   están en prode.css. Lo único propio son las fichas de convocatoria,
   los pasos numerados y el acordeón, que no existían como componente.
   ═══════════════════════════════════════════════════════════════ */

/* ── Fichas de convocatoria ────────────────────────────────────── */
.bc-convs{
  display:grid;gap:clamp(12px,1.4vw,18px);
  grid-template-columns:1fr;
}
@media (min-width:700px){ .bc-convs{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .bc-convs{grid-template-columns:repeat(3,minmax(0,1fr))} }

.bc-conv{
  display:flex;flex-direction:column;
  background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--radio-chico);
  padding:clamp(18px,2vw,26px);
}
.bc-conv .bc-et{
  font-family:var(--cuerpo);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--naranja-texto);margin:0 0 8px;
}
.bc-conv h3{font-size:clamp(17px,1.5vw,20px);font-weight:700;line-height:1.24;letter-spacing:-.012em;margin:0}
.bc-conv p{font-size:15px;line-height:1.55;color:var(--gris);margin:10px 0 0}
.bc-conv .bc-meta{font-size:13.5px;color:var(--gris-suave)}
/* La fecha de cierre es el dato que decide si alguien se postula hoy
   o lo deja para mañana: va marcada, no como un renglón más. */
.bc-conv .bc-cierre{
  margin-top:auto;padding-top:14px;
  font-family:var(--cuerpo);font-size:13px;font-weight:600;
  letter-spacing:.02em;color:var(--tinta);
}
.bc-conv .par-btn{margin-top:14px}
.bc-vacio{max-width:62ch}

/* ── Cómo funciona: tres pasos ─────────────────────────────────── */
.bc-pasos{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(16px,2vw,26px);
  grid-template-columns:1fr;
  counter-reset:none;
}
@media (min-width:860px){ .bc-pasos{grid-template-columns:repeat(3,minmax(0,1fr))} }
.bc-paso{display:flex;gap:16px;align-items:flex-start}
.bc-num{
  flex:0 0 auto;display:grid;place-content:center;
  width:clamp(38px,3.4vw,46px);height:clamp(38px,3.4vw,46px);border-radius:50%;
  background:var(--naranja);color:var(--tinta);
  font-family:var(--display);font-weight:800;
  font-size:clamp(18px,1.7vw,22px);line-height:1;
}
.bc-paso p{margin:0;font-size:clamp(15px,1.15vw,16.5px);line-height:1.55;color:var(--gris)}

/* ── Acordeón de preguntas ─────────────────────────────────────
   Botón + panel, no <details>: es el patrón que un lector de
   pantalla anuncia como «contraído / expandido» y el que se pidió.
   El panel se abre y se cierra con Enter, con Espacio y con el
   teclado de tabulación, porque es un <button> de verdad. */
.bc-faq{display:flex;flex-direction:column}
.bc-faq-item{border-bottom:1px solid var(--linea)}
.bc-faq-item:first-child{border-top:1px solid var(--linea)}
.bc-faq h3{margin:0;font-size:inherit;font-weight:inherit;letter-spacing:normal}
.bc-faq-b{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:none;border:0;cursor:pointer;text-align:left;
  padding:clamp(18px,2vw,24px) 0;
  font-family:var(--cuerpo);font-weight:600;
  font-size:clamp(16px,1.35vw,18.5px);line-height:1.35;
  letter-spacing:-.01em;color:var(--tinta);
}
.bc-faq-b svg{
  flex:0 0 auto;width:20px;height:20px;color:var(--naranja-texto);
  transition:transform var(--t-ui) var(--sal);
}
.bc-faq-b[aria-expanded="true"] svg{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){
  .bc-faq-b:hover{color:var(--naranja-texto)}
}
.bc-faq-b:focus-visible{outline:3px solid var(--naranja);outline-offset:3px}
.bc-faq-r p{
  margin:0;padding:0 0 clamp(20px,2.2vw,26px);max-width:68ch;
  font-size:clamp(15px,1.15vw,16.5px);line-height:1.62;color:var(--gris);
}

@media (prefers-reduced-motion:reduce){
  .bc-faq-b svg{transition:none}
}

/* ── Piso de lectura en celular ──
   La convención del sitio: abajo de 900px nada de rótulos de 11px. */
@media (max-width:900px){
  .bc-conv .bc-et{font-size:12.5px}
  .bc-conv .bc-meta,.bc-conv .bc-cierre{font-size:13.5px}
}

/* ── Los destinos de anclaje ──
   «Ver convocatorias abiertas» baja a #convocatorias con la barra fija
   encima: sin esto el titular queda debajo de la barra. 68px es su
   altura real, medida en once anchos —60 abajo de 1024, 68 de ahí
   para arriba— y se usa la mayor. */
#convocatorias,#valores,#modelo,.faq,.faq-fila{scroll-margin-top:calc(68px + 18px)}


/* ══ Portada ═══════════════════════════════════════════════════════
   La primera página de becas.pdf: foto a sangre en blanco y negro,
   el titular en la burbuja naranja encima, y debajo una banda de
   hueso con la bajada. Sin logotipo y sin botones: la marca está en
   la barra y las puertas a los formularios son la sección 3. */
/* La portada entra COMPLETA en una pantalla: es una columna flex de
   100svh donde la banda de la foto se come lo que sobra y la de la
   bajada mide lo que pide su texto. `min-height` y no `height`: si el
   titular no entrara —pantalla muy baja, o una traducción más larga—
   la sección se estira en lugar de recortar el texto, que es la
   convención del sitio. */
/* Sin el `padding-block` que `section` da a todas: acá el aire lo
   reparten las dos bandas por dentro, y ese relleno sumaba 290px
   invisibles —la foto arrancaba 144px abajo del borde—. */
.bc-hero{background:var(--hueso);display:flex;flex-direction:column;min-height:100svh;padding-block:0}
.bc-hero-foto{position:relative;overflow:clip;background:#0A0A0B;flex:1 1 auto;min-height:0;display:flex}
.bc-hero-foto > img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 46%;
  display:block;z-index:0;filter:grayscale(1);
}
/* Un velo suave: la tinta del titular vive dentro de la burbuja, pero
   la miga va sobre la foto pelada y ahí sí necesita apoyo. */
.bc-hero-foto::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(160deg,rgba(10,10,11,.45) 0%,rgba(10,10,11,.12) 46%,rgba(10,10,11,0) 72%);
}
/* La miga arriba, el titular abajo, y el aire del medio es lo que
   sobra del alto de la pantalla. */
.bc-hero-env{
  position:relative;z-index:1;flex:1 1 auto;
  display:flex;flex-direction:column;justify-content:space-between;
  gap:clamp(22px,4.5vw,56px);
  padding-top:calc(var(--header-h) + clamp(16px,2.4vw,32px));
  padding-bottom:clamp(30px,4.4vw,68px);
}
.bc-hero-env .miga{color:rgba(255,255,255,.82);margin:0}

/* Pantallas bajas —un teléfono apoyado de costado, o un portátil de
   768 de alto—: se recorta el AIRE, nunca la tipografía. Achicar el
   texto para que entre una sección es cambiar lo importante por lo
   accesorio. A 390px de alto la portada sigue pidiendo un scroll
   corto y eso se prefiere a un titular ilegible. */
@media (max-height:620px){
  .bc-hero-env{gap:14px;padding-top:calc(var(--header-h) + 10px);padding-bottom:18px}
  .bc-hero-pie{padding-block:16px}
}
@media (max-height:460px){
  .bc-hero-env{gap:10px;padding-top:calc(var(--header-h) + 6px);padding-bottom:12px}
  .bc-hero-pie{padding-block:12px}
  .bc-hero-env .miga{display:none}
}
.bc-hero-env .miga a{color:rgba(255,255,255,.82)}

/* La burbuja. `box-decoration-break:clone` hace que CADA renglón se
   lleve su propio relleno y sus esquinas: es la forma escalonada de
   la lámina, y reflota sola al cambiar el ancho o el idioma. Cortar
   las líneas a mano daba la forma exacta y se rompía en el primer
   teléfono angosto. */
/* 30ch y no 18: con el titular angosto salían CINCO renglones y las
   burbujas se superponían 38px, así que la cola de la «p» de
   «oportunidades» quedaba tapada por la burbuja del renglón de abajo.

   El fondo de un <span> en línea mide la caja de la fuente —ascendente
   más descendente, 106px a 64px de cuerpo—, no la interlínea: con
   interlínea 1.26 cada burbuja invade a la siguiente. Hace falta 1.7
   para que no se toquen, y con cinco renglones eso no entra en una
   pantalla. Ensanchando el titular son tres, y entra. */
.bc-hero-t{margin:0;max-width:30ch}
.bc-hero-t span{
  font-family:var(--display);font-weight:800;
  font-size:clamp(29px,5.2vw,64px);
  /* La interlínea fija el aire ENTRE los pedazos de burbuja, no sólo
     entre los renglones: con 1.42 quedaban cuatro islas separadas y
     la lámina tiene un solo bloque escalonado. */
  /* 1.7 es el mínimo para que las burbujas no se pisen. Ver el
     comentario de .bc-hero-t. */
  line-height:1.7;
  letter-spacing:-.022em;color:var(--tinta);
  background:var(--naranja);
  padding:.02em .26em;border-radius:var(--radio-m);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

.bc-hero-pie{padding-block:clamp(20px,3vw,40px)}
.bc-hero-baj{margin:0;max-width:62ch}

/* ══ Formularios de postulación ════════════════════════════════════
   La segunda página de becas.pdf: cuatro franjas a sangre, cada una
   con su nombre y su botón. Los cuatro tonos salen medidos de la
   lámina. */
.bc-filas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.bc-fila{
  background:var(--c);
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(12px,2vw,28px);
  /* A sangre: la franja se sale de `.env` como en la lámina. */
  margin-inline:calc(50% - 50vw);
  padding:clamp(18px,2.6vw,34px) max(var(--pad),calc(50vw - 620px + var(--pad)));
}
.bc-fila-t{
  flex:1 1 auto;min-width:0;
  font-family:var(--display);font-weight:800;
  font-size:clamp(19px,2.4vw,32px);line-height:1.12;letter-spacing:-.02em;
  color:var(--tinta);
}
.bc-fila-b{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;
  min-height:48px;padding:13px clamp(22px,2.4vw,34px);
  border-radius:var(--radio-s);background:var(--tinta);color:var(--blanco);
  text-decoration:none;
  font-family:var(--cuerpo);font-weight:700;
  font-size:clamp(12.5px,1.05vw,14px);letter-spacing:.1em;text-transform:uppercase;
  transition:transform var(--t-ui) var(--sal),opacity var(--t-ui) var(--sal);
}
.bc-fila-b svg{width:17px;height:17px;transition:transform var(--t-ui) var(--sal)}
@media (hover:hover) and (pointer:fine){
  .bc-fila-b:hover{transform:translateY(-2px);opacity:.9}
  .bc-fila-b:hover svg{transform:translateX(3px)}
}
.bc-fila-b:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
/* En angosto el botón toma el ancho: partido, el nombre largo
   —«Indumentaria y equipo deportivo»— lo empujaba fuera de la caja. */
@media (max-width:620px){
  .bc-fila{gap:14px}
  .bc-fila-b{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .bc-fila-b,.bc-fila-b svg{transition:none}
  .bc-fila-b:hover{transform:none}
  .bc-fila-b:hover svg{transform:none}
}


/* ══ Cómo funciona el proceso ═══════════════════════════════════════
   Los tres hitos colgados de una línea que cruza la sección. */
.bc-proc-t b{font-weight:inherit;color:var(--naranja-display)}
.bc-proc-t{margin:0}

.bc-hitos{
  list-style:none;margin:0;padding:0;position:relative;
  display:grid;gap:clamp(30px,4vw,44px);
  grid-template-columns:minmax(0,1fr);
}
/* La línea. Va detrás de los puntos, a la altura de su centro: el
   punto más grande mide 34px, así que el eje está a 17. */
.bc-hitos::before{
  content:"";position:absolute;left:0;right:0;top:17px;height:2px;
  background:var(--tinta);transform-origin:left center;z-index:0;
}
.bc-hito{position:relative;z-index:1;padding-top:calc(34px + clamp(18px,2vw,26px))}
.bc-punto{
  position:absolute;top:0;left:0;border-radius:50%;
  background:var(--tinta);display:block;
}
.bc-punto-1{width:16px;height:16px;top:9px}
.bc-punto-2{width:26px;height:26px;top:4px}
.bc-punto-3{width:34px;height:34px;background:var(--naranja)}
.bc-hito h3{
  margin:0 0 10px;font-family:var(--display);font-weight:800;
  font-size:clamp(19px,1.7vw,24px);line-height:1.2;letter-spacing:-.01em;color:var(--tinta);
}
.bc-hito p{margin:0;font-size:clamp(15px,1.15vw,16.5px);line-height:1.55;color:var(--gris)}

@media (min-width:860px){
  .bc-hitos{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
}
/* En una columna la línea pasa a vertical: horizontal no tendría qué
   unir, y los puntos quedarían sueltos uno abajo del otro.

   Y deja de ser UNA línea para ser un tramo por hito, salvo el
   último. Con una sola que cruzara todo el bloque, la cola colgaba
   por debajo del tercer punto —tanto como midiera su párrafo— y se
   leía como una línea sin terminar. Partida, cada tramo llega al
   punto siguiente y el último punto cierra. */
@media (max-width:859px){
  .bc-hitos{gap:clamp(30px,4vw,44px)}
  .bc-hitos::before{display:none}
  .bc-hito{padding-top:0;padding-left:56px;min-height:34px}
  .bc-hito:not(:last-child)::before{
    content:"";position:absolute;left:16px;width:2px;
    top:17px;bottom:calc(-1 * clamp(30px,4vw,44px) - 17px);
    background:var(--tinta);transform-origin:top center;z-index:0;
  }
  .bc-punto{transform:none}
  .bc-punto-1{left:8px;top:9px}
  .bc-punto-2{left:3px;top:4px}
  .bc-punto-3{left:0;top:0}
}

/* La línea se dibuja con el scroll. Sólo donde hay línea de tiempo de
   scroll: sin `@supports`, un navegador que no la tenga se quedaría
   con la línea en escala 0 —o sea, sin línea— para siempre. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .bc-hitos::before,.bc-hito:not(:last-child)::before{
      animation-name:bc-traza;
      animation-fill-mode:both;
      animation-timing-function:linear;
      animation-timeline:view();
      animation-range:entry 30% cover 42%;
    }
  }
}
@keyframes bc-traza{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
/* En vertical cada tramo se dibuja cuando ÉL entra al cuadro, así que
   la línea baja siguiendo al scroll en lugar de aparecer de una. */
@media (max-width:859px){
  @keyframes bc-traza{ from{transform:scaleY(0)} to{transform:scaleY(1)} }
}
/* El titular y el primer punto necesitan aire propio: `mt-56` lo da en
   escritorio, pero apilado el punto queda pegado al renglón de abajo
   del titular. */
@media (max-width:859px){ .bc-proc .bc-hitos{margin-top:clamp(30px,7vw,44px)} }

/* ══ Sumarte como institución o aliado ══════════════════════════════
   Tres puertas a sangre con foto. El velo de cada una sale del brillo
   MEDIDO de su archivo —102, 69 y 86 sobre 255—: con un velo único, la
   más clara deja el texto blanco ilegible y la más oscura queda
   apagada. */
.bc-puertas{
  list-style:none;margin:0;padding:0;
  display:grid;gap:2px;background:var(--linea);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:820px){ .bc-puertas{grid-template-columns:repeat(3,minmax(0,1fr))} }
.bc-puerta{
  position:relative;overflow:hidden;background:#0A0A0B;
  min-height:clamp(330px,42vw,470px);
  display:flex;align-items:flex-end;
}
.bc-puerta > img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;z-index:0;filter:grayscale(1);
}
.bc-puerta::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,
    rgba(10,10,11,var(--velo-ini,.42)) 0%,
    rgba(10,10,11,var(--velo-fin,.66)) 100%);
}
.bc-puerta-cuerpo{
  position:relative;z-index:1;width:100%;
  padding:clamp(24px,3vw,38px);
  display:flex;flex-direction:column;align-items:center;gap:clamp(16px,2vw,24px);
  text-align:center;
}
.bc-puerta-t{
  font-family:var(--display);font-weight:800;color:#fff;
  font-size:clamp(26px,2.6vw,38px);line-height:1.12;letter-spacing:-.015em;
  text-wrap:balance;
}
.bc-puerta .btn{font-size:clamp(13px,1vw,14px)}
@media (hover:hover) and (pointer:fine){
  .bc-puerta > img{transition:transform 620ms var(--sal)}
  .bc-puerta:hover > img{transform:scale(1.06)}
}
@media (prefers-reduced-motion: reduce){
  .bc-puerta:hover > img{transform:none}
}


/* ══ Postulación 100% gratuita y transparente ═══════════════════════
   Banda oscura a sangre con la foto y el medidor, y debajo la banda
   clara con los dos párrafos. Sin el `padding-block` que `section` da
   a todas: acá el aire lo reparte cada banda por dentro. */
.bc-grat{padding-block:0;background:var(--hueso)}
.bc-grat-foto{position:relative;overflow:clip;background:#0A0A0B}
.bc-grat-foto > img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 42%;display:block;z-index:0;filter:grayscale(1);
}
/* La foto promedia 64 sobre 255: oscura, pero no lo bastante para
   sostener un titular blanco sin ayuda. El velo se mide, no se
   estima. */
.bc-grat-foto::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(10,10,11,.62),rgba(10,10,11,.42));
}
.bc-grat-env{
  position:relative;z-index:1;text-align:center;
  padding-block:clamp(44px,6vw,86px);
  display:flex;flex-direction:column;align-items:center;gap:clamp(26px,3.6vw,46px);
}
.bc-grat-env h2{margin:0;color:#fff;max-width:22ch}
.bc-medidor{width:clamp(180px,22vw,300px);height:auto;display:block}
.bc-aguja{transform-origin:100px 100px;transform:rotate(0deg)}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .bc-aguja{
      animation-name:bc-barre;
      animation-fill-mode:both;
      animation-timing-function:cubic-bezier(.23,1,.32,1);
      animation-timeline:view();
      animation-range:entry 24% cover 46%;
    }
  }
}
@keyframes bc-barre{ from{transform:rotate(-62deg)} to{transform:rotate(0deg)} }

.bc-grat-pie{padding-block:clamp(38px,5vw,72px)}
.bc-grat-duo{
  display:grid;gap:clamp(24px,3.4vw,56px);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:820px){ .bc-grat-duo{grid-template-columns:repeat(2,minmax(0,1fr))} }
.bc-grat-duo p{margin:0}