/* Página "Mensaje del director" (/mensaje-director) — capa sobre sitio.css.
 * Móvil: la portada/artículo se estilan en sitio.css (.st-portada--director,
 * .st-articulo, .st-banda); aquí sólo van los utilitarios de salto de línea y
 * el bloque de ESCRITORIO (artboard 1-MensajeDirector-Desktop, 1025 pt;
 * medidas en rem = pt/10). */

/* Saltos de línea y textos exclusivos de un corte */
.st-br-e,
.st-solo-e { display: none; }
.st-director-boton { display: none; }

@media (min-width: 768px) {
  .st-br-m,
  span.st-patron--m { display: none; } /* span.* para ganar a span.st-patron de sitio.css */
  .st-br-e { display: inline; }
  .st-solo-e { display: inline; }

  /* Banda de portada: degradado + patrón + foto del director en una sola
     composición renderizada del artboard (sin texto); el botón verde va
     encima como enlace real. */
  .st-portada--director {
    height: 51.8rem;
    padding: 8.5rem 4.34rem 0;
    background: var(--st-tinta) url(../img/sitio/director-banda-escritorio.webp) no-repeat 0 0 / 100% 100%;
    --st-sangre-izq: linear-gradient(#4e753f 0%, #49643d 25%, #2e513d 50%, #20433e 75%, #1a3c3e 100%);
    --st-sangre-der: linear-gradient(to right, rgba(19, 51, 62, 0), var(--st-tinta) 16rem), linear-gradient(#dfe5e6 0%, #aa9994 25%, #a79e99 50%, #a2abb6 75%, #818a90 100%);
    --st-sangre: var(--st-tinta);
  }
  .st-portada--director .st-icono { margin-left: 0.2rem; }
  .st-portada--director .st-etiqueta {
    margin-top: 2.76rem;
    font-size: 1.6rem;
    line-height: 2.2rem;
  }
  .st-portada--director .st-portada__cita {
    margin-top: 1.05rem;
    max-width: 60rem;
    font-size: 2.4rem;
    line-height: 4rem;
  }
  .st-director-boton {
    display: block;
    position: absolute;
    left: 49.08rem;
    top: 41.58rem;
    width: 10.8rem;
    height: 7.3rem;
    border-radius: 3.65rem;
    transition: background-color .2s;
  }
  .st-director-boton:hover,
  .st-director-boton:focus-visible { background: rgba(145, 192, 66, .15); }

  /* Artículo: texto a 24 pt / 40 pt sobre 975 pt de ancho, sin patrones. */
  .st-articulo {
    padding: 1.08rem 0 12.6rem;
    overflow: visible;
  }
  .st-articulo > p,
  .st-articulo > h2,
  .st-articulo > h3,
  .st-articulo > ul,
  .st-articulo > ol { margin-left: 2.5rem; margin-right: 4rem; } /* caja de 960 pt: reproduce los cortes de línea del diseño ("para la / equidad", "para el / intercambio") */
  .st-articulo p {
    font-size: 2.4rem;
    line-height: 4rem;
  }
  .st-articulo p + p { margin-top: 4rem; }
  .st-banda {
    margin-top: 4.89rem;
    padding: 2.97rem 2.5rem 4.1rem;
    --st-sangre: var(--st-tinta);
  }
  .st-banda + p { margin-top: 4.04rem; }
}

/* Piezas que sólo existen en laptop/escritorio (≥ 1200 px) */
span.dr-solo-xl { display: none; }

/* =====================================================================
   LAPTOP Y ESCRITORIO (≥ 1200 px) — composición propia (2026-10-29).
   El compuesto del artboard (director-banda-escritorio.webp) trae pintados
   el icono, el patrón y el botón: a lo ancho no se puede estirar sin
   deformarlo ni mantener el botón alineado. Aquí la banda usa el compuesto
   limpio de la portada (retrato + degradado, mismo que inicio), el patrón
   va como pieza aparte y el botón verde se dibuja en CSS con la misma
   forma. El artículo pasa a una columna de lectura centrada con los
   patrones en los márgenes.
   ===================================================================== */
@media (min-width: 1200px) {
  .st-br-e { display: none; }
  span.dr-solo-xl { display: block; }

  /* ---------- Portada ---------- */
  .st-portada--director {
    height: auto;
    min-height: 52rem;
    padding: 9rem var(--st-lado) 8rem;
    background:
      url(../img/sitio/inicio-director-banda-escritorio.webp) no-repeat right center / auto 100%,
      linear-gradient(#4e753f 0%, #49643d 25%, #2e513d 50%, #20433e 75%, #1a3c3e 100%);
    overflow: hidden;
  }
  .st-portada--director > * { position: relative; }
  span.dr-portada__patron { position: absolute; left: -8rem; top: -12rem; width: 52.37rem; height: 57.32rem; }
  .st-portada--director .st-icono { width: 2.8rem; height: 2.8rem; margin-left: 0; }
  .st-portada--director .st-etiqueta {
    margin-top: 1.6rem;
    font-size: 1.5rem;
    line-height: 2.1rem;
    letter-spacing: .14em;
  }
  .st-portada--director .st-portada__cita {
    max-width: 64rem;
    margin-top: 1.6rem;
    font-size: 3rem;
    line-height: 4.4rem;
    letter-spacing: -0.005em;
  }
  /* Botón: contorno verde con flecha (la misma pieza del compuesto, ahora real) */
  .st-director-boton {
    position: relative;
    left: auto; top: auto;
    width: 10.8rem;
    height: 6.4rem;
    margin-top: 4rem;
    border: 0.2rem solid var(--st-verde);
    border-radius: 3.2rem;
  }
  .st-director-boton::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2.6rem;
    height: 2.6rem;
    margin: -1.3rem 0 0 -1.3rem;
    background: var(--st-verde);
    -webkit-mask: url(../svg/flecha.svg) no-repeat center / contain;
    mask: url(../svg/flecha.svg) no-repeat center / contain;
    transform: rotate(0deg);
    transition: transform .22s cubic-bezier(.2, .7, .2, 1);
  }
  .st-director-boton:hover::after,
  .st-director-boton:focus-visible::after { transform: translate(0.3rem, -0.3rem); }

  /* ---------- Artículo: columna de lectura ---------- */
  .st-articulo {
    padding: 10rem var(--st-lado) 12rem;
    overflow: visible;
  }
  .st-articulo > p,
  .st-articulo > .st-banda {
    max-width: 76rem;
    margin-left: auto;
    margin-right: auto;
  }
  .st-articulo p {
    font-size: 2rem;
    line-height: 3.4rem;
  }
  .st-articulo > p:first-of-type {
    font-size: 2.4rem;
    line-height: 3.8rem;
  }
  .st-articulo p + p { margin-top: 2.8rem; }
  /* La banda oscura sale a lo ancho de la ventana; el texto sigue en la columna */
  .st-articulo > .st-banda {
    max-width: none;
    margin: 6rem calc(-1 * var(--st-lado)) 0;
    padding: 6.4rem var(--st-lado) 6.8rem;
  }
  .st-articulo > .st-banda p {
    max-width: 76rem;
    margin: 0 auto;
    font-size: 2.6rem;
    line-height: 4rem;
    letter-spacing: -0.005em;
  }
  .st-banda + p { margin-top: 6rem; }
  .st-articulo > p.dr-firma {
    margin-top: 5.6rem;
    padding-top: 3.2rem;
    border-top: 1px solid #d1dee2;
    color: var(--st-azul);
  }
  .st-articulo > p.dr-firma,
  .st-articulo > p.dr-firma-cargo { font-size: 1.8rem; line-height: 2.8rem; }
  .st-articulo > p.dr-firma-cargo { margin-top: 1.6rem; }

  span.dr-patron-1 { left: auto; right: -6rem; top: 4rem; }
  span.dr-patron-2 { left: -6rem; top: 62rem; }
  span.dr-patron-3 { left: auto; right: -6rem; bottom: 18rem; top: auto; }
}