/* Convocatorias de actividades (fotografía, TikTok, carrera-caminata, libros).
 * Complementa sitio.css; misma escala (1rem = 10 pt del diseño). */

.st-conv {
  position: relative;
  padding: 3rem 3rem 0 2.5rem; /* caja de texto de 425 pt: el diseño parte líneas entre 422 y 426 */
  overflow: hidden;
}
.st-conv > :not(.st-patron) { position: relative; }
/* Cabecera (icono, título y entrada): en móvil y tableta no existe como caja,
   sus hijos fluyen como antes; ≥ 1200 px es la columna fija de la izquierda. */
.st-conv__cabecera { display: contents; }
.st-conv__cabecera > * { position: relative; }
.st-conv p,
.st-conv li,
.st-conv h2,
.st-conv h3 {
  font-size: 1.6rem;
  line-height: 2.5rem;
  color: var(--st-tinta);
}
.st-conv h2, .st-conv h3 { font-weight: 700; }
.st-conv h2 { margin-top: 2.4rem; }
.st-conv h2 + p, .st-conv h2 + ul, .st-conv h2 + ol { margin-top: 0.1rem; }
.st-conv--aire h2 + p, .st-conv--aire h2 + ul, .st-conv--aire h2 + ol { margin-top: 2.6rem; }
.st-conv--aire h2 { margin-top: 2.4rem; }
.st-conv p + p, .st-conv ul + p, .st-conv ol + p, .st-conv p + ul, .st-conv p + ol, .st-conv ul + ul { margin-top: 2.5rem; }
.st-conv a { color: inherit; text-decoration: none; }
.st-conv .st-etiqueta--chica { margin-top: 0.8rem; }

/* Patrones del artboard de escritorio: sólo en tableta (ver bloque ≥ 768) */
.st-conv > span.st-conv__patron-d { display: none; }

/* Párrafo introductorio grande */
.st-conv__intro {
  font-size: 2.1rem !important;
  line-height: 3.2rem !important;
}
.st-conv__intro--30 { line-height: 3rem !important; }
/* Subtítulo 17 pt ("Bases y condiciones", "Lineamientos", "Convocatoria") */
.st-conv__sub {
  font-size: 1.7rem !important;
  line-height: 2.5rem !important;
  font-weight: 700;
}
/* Titular 21 pt en versales ("8.ª CARRERA-CAMINATA", "¡ACTÍVATE...") y correo grande */
.st-conv__grande {
  font-size: 2.1rem !important;
  line-height: 2.9rem !important;
  font-weight: 700;
}

/* Listas con viñeta "·" y sangría francesa: viñeta en x=47, texto en x=55 */
.st-conv__lista li { position: relative; padding-left: 3rem; }
.st-conv__lista li::before { content: "·"; position: absolute; left: 2.2rem; top: 0; }
.st-conv__lista--56 li { padding-left: 4rem; }
.st-conv__lista--56 li::before { left: 3.1rem; }
.st-conv__lista--espaciada li + li { margin-top: 2.5rem; }
.st-conv__lista li > p { padding: 0; }
.st-conv__lista li > p + p { margin-top: 2.5rem; }
/* Lista numerada "1. Cargar..." con continuación en x=41 */
.st-conv__numerada li { padding-left: 1.6rem; text-indent: -1.6rem; }
.st-conv__numerada li + li { margin-top: 2.5rem; }
.st-conv__numerada li strong { display: block; text-indent: 0; }

/* Banda oscura a sangre (carrera-caminata) */
.st-conv__banda {
  margin: 2.9rem -3rem 0 -2.5rem;
  padding: 2.75rem 3rem 7.17rem 4.5rem;
  background: var(--st-tinta);
}
.st-conv__banda p { color: #fff; }
.st-conv__banda + h2 { margin-top: 2.74rem; }

/* Separaciones específicas */
.st-conv__sep-grande { margin-top: 4.9rem !important; }
.st-conv__sep-xl { margin-top: 9.9rem !important; }
.st-conv__sep-74 { margin-top: 7.4rem !important; }
.st-conv__sep-21 { margin-top: 2.06rem !important; }
.st-conv__sep-0 { margin-top: 0 !important; }

/* Cierres de página (lo que el diseño deja antes del mural) */
.st-conv--fotografia { padding-bottom: 10.54rem; }
.st-conv--tiktok { padding-bottom: 7.8rem; }
.st-conv--carrera { padding-bottom: 12rem; }
.st-conv--libros { padding-bottom: 19.1rem; }
.st-conv__nowrap { white-space: nowrap; }

/* =====================================================================
   TABLETA (768–1199 px) — artboards de escritorio 10-*-Desktop (1025 pt,
   2026-11-04): la misma tipografía del móvil (16/25, intro 21/32·30, sub 17,
   rótulo 14) sobre una caja de texto de 975 pt (x = 25…1000) y los cuatro
   patrones decorativos a los bordes (naranja/azul a la izquierda, teal/rosa a
   la derecha, idénticos en las 4 páginas). Los saltos de renglón del móvil
   (`br.st-conv__salto`) se apagan: aquí parte el ancho. Verificado a 1025 px
   contra el render de cada .ai (ver docs/SITIO-PUBLICO-2026-10.md).
   ===================================================================== */
@media (min-width: 768px) {
  .st-conv { padding-right: 2.5rem; }
  .st-conv br.st-conv__salto { display: none; }
  .st-conv .st-conv__nowrap { white-space: normal; }

  /* Patrones: los del móvil se apagan, entran los del artboard de escritorio */
  .st-conv > span.st-conv__patron-m { display: none; }
  .st-conv > span.st-conv__patron-d { display: block; }

  /* Arranque de cada página (icono bajo la barra) y ancho de la caja de
     texto: cada .ai parte sus líneas en un borde distinto (fotografía ≈ 977,
     carrera ≈ 985, TikTok y libros ≈ 1000), medido sobre las líneas envueltas. */
  .st-conv--fotografia { padding-top: 6.5rem; padding-right: 4.8rem; }
  .st-conv--tiktok { padding-top: 2.5rem; }
  .st-conv--carrera { padding-top: 1rem; padding-right: 4rem; }
  .st-conv--libros { padding-top: 3.5rem; }

  /* Lista numerada de TikTok: el correo en negrita va en la misma línea */
  .st-conv__numerada li strong { display: inline; }
  /* "Premio" (TikTok): en el artboard de escritorio va pegado a su lista */
  .st-conv .st-conv__premio { margin-top: 2.4rem !important; }
  .st-conv .st-conv__premio + ul { margin-top: 0.1rem !important; }

  /* El rótulo de fotografía parte tras "FOTOGRAFÍA" aunque quepa en una línea */
  .st-conv--fotografia .st-conv__cabecera h1 { max-width: 40rem; }

  /* Banda oscura de la carrera: a sangre de la caja, texto en x = 45 */
  .st-conv__banda {
    margin: 2.9rem -2.5rem 0;
    padding: 1.75rem 4.5rem 2.76rem 4.5rem;
  }
  .st-conv__banda + h2 { margin-top: 3.65rem; }

  /* Cierres (hueco entre la última línea y el mural) */
  .st-conv--fotografia { padding-bottom: 8.1rem; }
  .st-conv--tiktok { padding-bottom: 10.8rem; }
  .st-conv--carrera { padding-bottom: 11.8rem; } /* el .ai duplica el texto "Importante…" antes de la banda; aquí sólo va la banda, como en móvil */
  .st-conv--libros { padding-bottom: 13.2rem; }
}

/* =====================================================================
   LAPTOP Y ESCRITORIO (≥ 1200 px) — composición propia (el artboard de
   escritorio, 1025 pt, es el corte de tableta). Lectura en dos columnas sobre el contenedor de
   sitio.css (`--st-lado`): a la izquierda la cabecera (icono, título y
   entrada) fija mientras se lee; a la derecha las bases, a ~70 caracteres
   por línea. Los patrones del móvil quedan como guarda en el margen
   izquierdo. Mismo texto; los saltos de renglón del artboard
   (`br.st-conv__salto`) se ignoran porque el ancho de línea es otro.
   ===================================================================== */
@media (min-width: 1200px) {
  .st-conv {
    display: grid;
    grid-template-columns: minmax(0, 40rem) minmax(0, 76rem);
    column-gap: 12rem;
    align-items: start;
    padding: 10rem var(--st-lado) 0;
    overflow: clip; /* hidden la volvería contenedor de scroll y la cabecera sticky se correría */
  }
  .st-conv > :not(.st-patron):not(.st-conv__cabecera) { grid-column: 2; }
  .st-conv br.st-conv__salto { display: none; }
  .st-conv .st-conv__nowrap { white-space: normal; }

  /* Patrones: guarda tenue en el margen izquierdo, bajo la cabecera (los del
     móvil; los del artboard de tableta se apagan) */
  .st-conv > span.st-patron { opacity: .55; }
  .st-conv > span.st-conv__patron-m { display: block; }
  .st-conv > span.st-conv__patron-d { display: none; }

  /* Cabecera fija (".st-conv >" para ganarle al position:relative de los hijos) */
  .st-conv > .st-conv__cabecera {
    display: block;
    grid-column: 1;
    grid-row: 1 / span 200;
    position: sticky;
    top: 14rem;
    align-self: start;
  }
  .st-conv__cabecera .st-icono { width: 3.2rem; height: 3.2rem; }
  .st-conv .st-conv__cabecera h1 {
    margin-top: 2rem;
    font-size: 1.8rem;
    line-height: 2.6rem;
    letter-spacing: .14em;
  }
  .st-conv .st-conv__cabecera p,
  .st-conv .st-conv__cabecera .st-conv__intro {
    margin-top: 2.4rem !important;
    font-size: 2.4rem !important;
    line-height: 3.6rem !important;
    letter-spacing: -0.005em;
    color: var(--st-azul);
  }
  .st-conv .st-conv__cabecera h2.st-conv__sub {
    margin-top: 2.4rem !important;
    font-size: 1.5rem !important;
    line-height: 2.1rem !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--st-teal);
  }

  /* Cuerpo de lectura */
  .st-conv p,
  .st-conv li {
    font-size: 1.8rem;
    line-height: 3rem;
  }
  .st-conv h2 {
    margin-top: 5.2rem;
    font-size: 2.2rem;
    line-height: 3rem;
    color: var(--st-azul);
  }
  .st-conv > h2:first-of-type,
  .st-conv > .st-conv__cabecera + h2,
  .st-conv > .st-conv__cabecera + p { margin-top: 0 !important; }
  .st-conv h2 + p, .st-conv h2 + ul, .st-conv h2 + ol { margin-top: 1.2rem; }
  .st-conv--aire h2 + p, .st-conv--aire h2 + ul, .st-conv--aire h2 + ol { margin-top: 1.6rem !important; }
  .st-conv p + p, .st-conv ul + p, .st-conv ol + p, .st-conv p + ul, .st-conv p + ol, .st-conv ul + ul { margin-top: 2rem; }
  .st-conv .st-conv__sub { font-size: 2.6rem !important; line-height: 3.4rem !important; color: var(--st-tinta); }
  .st-conv .st-conv__grande { font-size: 2.6rem !important; line-height: 3.4rem !important; color: var(--st-azul); }
  .st-conv a[href^="mailto:"] { color: var(--st-azul); font-weight: 700; text-decoration: underline; text-underline-offset: .3rem; text-decoration-thickness: .1rem; }
  .st-conv a[href^="mailto:"]:hover { color: var(--st-teal); }

  .st-conv__lista li { padding-left: 2.4rem; }
  .st-conv__lista li::before { left: 0.6rem; color: var(--st-verde); font-weight: 700; }
  .st-conv__lista--56 li { padding-left: 2.4rem; }
  .st-conv__lista--56 li::before { left: 0.6rem; }
  .st-conv__lista--espaciada li + li { margin-top: 1.6rem; }
  .st-conv__numerada li { padding-left: 2.2rem; text-indent: -2.2rem; }
  .st-conv__numerada li + li { margin-top: 1.6rem; }

  .st-conv__banda {
    margin: 4rem 0 0;
    padding: 4rem 4.4rem 4.4rem;
    border-radius: 2.4rem;
  }
  .st-conv__banda + h2 { margin-top: 5.2rem; }

  .st-conv__sep-grande { margin-top: 6.4rem !important; }
  .st-conv__sep-xl,
  .st-conv__sep-74 { margin-top: 8rem !important; }
  .st-conv__sep-0 { margin-top: 0.4rem !important; }

  .st-conv--fotografia,
  .st-conv--tiktok,
  .st-conv--carrera,
  .st-conv--libros { padding-bottom: 12rem; }
}