/* ==========================================================================
   marIAna
   ==========================================================================
   Se carga después de site.css e interna.css, y solo en mariana.html. Hereda
   los tokens, la tipografía, el grano, el header, el pie, los flotantes y las
   entradas por [data-anim]. Aquí vive únicamente lo propio de esta página.

   La decisión que gobierna la hoja entera: marIAna es soporte, no la heroína.
   La tapa es corta y plana; su ilustración oficial acompaña la presentación, y
   por eso el único bloque con peso visual es la conversación de ejemplo, que
   es lo único que de verdad demuestra algo. Todo lo demás se mantiene callado.

   El segundo criterio es el reparto: «para lo que sirve» y «lo que no hace»
   comparten tipografía, medida, ritmo y grosor de línea. Que el segundo no se
   lea como letra pequeña no es una preferencia estética, es el encargo.

   Bandas: navy (tapa) · blanco (franco) · pálido (doble) · navy (charla) ·
   blanco (fuente) · pálido (salida). Los sellos cierran en blanco.

   Móvil primero.
   ========================================================================== */


/* --- Tapa -----------------------------------------------------------------
   Navy plano con grano, heredado de `.tapa--corta`. Sin foto a propósito: la
   página de un sistema que responde por escrito no necesita una fotografía de
   alguien mirando el celular, y una imagen grande la subiría al rango de
   protagonista que precisamente no le corresponde.

   El titular es una sola palabra, así que aguanta más cuerpo que el de una
   ficha de concepto sin dejar de caber en 390 px. */

.tapa--ia .tapa__t {
  font-size: clamp(2.9rem, 13vw, 5.2rem);
  letter-spacing: -.04em;
}

.tapa--ia .tapa__d { max-width: 52ch; }


/* --- Qué es marIAna -------------------------------------------------------
   Titular arriba a todo el ancho, una línea, y debajo el reparto: la
   definición en cuerpo grande a la izquierda y el matiz —lo que no decide y
   por qué escribir cuesta menos que hablar— a la derecha en cuerpo normal.

   No es el reparto de `.explica` (título fijo a la izquierda, cuerpo a la
   derecha): aquí el titular manda sobre las dos columnas y lo que se enfrenta
   son dos registros del mismo texto. */

.franco { background: var(--white); }

.franco__in {
  display: grid;
  gap: 1.5rem;
  max-width: var(--medida);
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 5rem) clamp(1.25rem, 4vw, 3.5rem);
}

.franco__t {
  margin: 0;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(0, 26, 50, .12);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--ink);
}

.franco__lead {
  max-width: 34ch;
  margin: 0;
  font-size: clamp(1.18rem, 3.4vw, 1.5rem);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -.018em;
  color: var(--ink);
}

.franco__cuerpo { display: grid; gap: 1.1rem; }

.franco__p {
  max-width: 62ch;
  margin: 0;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-soft);
}


/* --- Lo que hace y lo que no ----------------------------------------------
   Las dos columnas son el mismo objeto repetido: mismo tamaño de letra, misma
   medida, mismas líneas de separación. Lo único que cambia es el color del
   filete del título, y con el mismo grosor en las dos: morado de acción para
   lo que sí, albaricoque —el color que en el sitio significa «mira esto»—
   para lo que no. Nada de gris ni de cuerpo pequeño en la segunda: si se
   leyera como advertencia al pie, la página estaría vendiendo. */

.doble {
  position: relative;
  background: var(--pale);
}
/* Campo de color plano, así que el grano es textura. Sobre claro va al 10 %. */
.doble::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grano);
  opacity: .10;
  pointer-events: none;
}

.doble__in {
  position: relative;
  max-width: var(--medida);
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 5rem) clamp(1.25rem, 4vw, 3.5rem);
}

.doble__head { margin-bottom: clamp(2rem, 5vh, 2.75rem); }

.doble__t {
  margin: 0 0 .8rem;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--ink);
}

.doble__d {
  max-width: 60ch;
  margin: 0;
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* El hueco entre las dos listas va en una variable porque el filete que las
   separa tiene que caer justo en su mitad, y para eso hay que poder dividirlo. */
.doble__rej {
  --hueco: clamp(2.25rem, 5vw, 4rem);
  display: grid;
  gap: var(--hueco);
}

.hace__t {
  margin: 0;
  padding-bottom: .7rem;
  border-bottom: 2px solid var(--purple);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ink);
}
.hace--no .hace__t { border-bottom-color: var(--apricot); }

.hace__l { display: grid; margin: 0; padding: 0; list-style: none; }

.hace__i {
  padding: 1.05rem 0;
  border-bottom: 1px solid rgba(0, 26, 50, .12);
}

.hace__n {
  margin: 0 0 .3rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.015em;
  color: var(--ink);
}

.hace__p {
  max-width: 46ch;
  margin: 0;
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}

.doble__nota {
  max-width: 62ch;
  margin: clamp(1.75rem, 4vh, 2.5rem) 0 0;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink);
}


/* --- La conversación ------------------------------------------------------
   El único bloque con peso de la página, y el que se lleva toda la audacia:
   fuera de aquí no hay nada que llame la atención. Se dibuja con divs, no es
   una captura, y se lee a tamaño de página y no a tamaño de widget: quien
   llega tiene que poder leer la respuesta entera sin entrecerrar los ojos.

   Va sobre navy porque es donde vive la ventana de marIAna en el resto del
   sitio, así que quien ya la abrió alguna vez reconoce el sitio.

   El hilo conserva el borde izquierdo de la página —no se centra— y se para
   en 46 rem: una respuesta larga a todo el ancho de 76 rem se vuelve
   ilegible, y una conversación tampoco ocupa una pantalla entera. */

.charla {
  position: relative;
  padding: clamp(3.5rem, 9vh, 6rem) 0;
  background: var(--navy);
  color: var(--white);
}
.charla::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grano);
  opacity: .16;
  pointer-events: none;
}

.charla__in {
  position: relative;
  max-width: var(--medida);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem);
}

.charla__head { margin-bottom: clamp(1.75rem, 4vh, 2.5rem); }

.charla__t {
  margin: 0 0 .7rem;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
}

.charla__d {
  max-width: 56ch;
  margin: 0;
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, .68);
}

.hilo {
  display: grid;
  gap: 1.15rem;
  max-width: 46rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dice { display: grid; }

/* El retrato solo acompaña a marIAna. Repetirlo en cada turno de quien
   pregunta obligaría a inventarle una cara a quien lee. */
.dice--ella {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: .7rem;
  justify-items: start;
}

.dice__cara {
  width: 38px;
  height: 38px;
  margin-top: 1.5rem;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, .08);
}

.dice--tu { justify-items: end; }

.dice__c { display: grid; gap: .4rem; max-width: 100%; }
/* Quien pregunta no lleva retrato, así que sin tope su burbuja ocupa la
   columna entera y deja de leerse como el otro lado de la conversación. El
   sangrado hace el trabajo que allí hace la foto. */
.dice--tu .dice__c { justify-items: end; max-width: 88%; }

.dice__q {
  margin: 0 0 .1rem;
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: -.005em;
  color: var(--lavender);
}

.dice__p {
  margin: 0;
  padding: .85rem 1.05rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, .92);
}
.dice--ella .dice__p:last-of-type { border-bottom-left-radius: 5px; }

.dice--tu .dice__p {
  background: var(--purple);
  border-color: transparent;
  color: var(--white);
}
.dice--tu .dice__p:last-of-type { border-bottom-right-radius: 5px; }

/* La procedencia va pegada a la respuesta y no en una nota al pie: es lo que
   separa esta respuesta de una respuesta cualquiera, y separarla del texto la
   convertiría en un adorno de confianza. */
.dice__f {
  margin: .15rem 0 0;
  padding-left: .2rem;
  font-size: .84rem;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, .5);
}
.dice__f a {
  color: var(--lavender);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .25s var(--ease);
}
.dice__f a:hover { color: var(--white); }

.charla__nota {
  max-width: 60ch;
  margin: clamp(1.75rem, 4vh, 2.5rem) 0 0;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(255, 255, 255, .72);
}


/* --- De dónde salen sus respuestas ----------------------------------------
   Cuatro personas con nombre, credencial y el terreno del que responde cada
   una. En renglones y sin tarjetas: cuatro cajas iguales con su sombrita
   serían justo el tic que docs/anti-patrones.md prohíbe, y además convertiría
   a la abogada y a la embrióloga en piezas de una parrilla. */

.fuente { background: var(--white); }

.fuente__in {
  max-width: var(--medida);
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 5rem) clamp(1.25rem, 4vw, 3.5rem);
}

.fuente__dicho { margin-bottom: clamp(1.75rem, 4vh, 2.5rem); }

.fuente__t {
  margin: 0 0 .8rem;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--ink);
}

.fuente__d {
  max-width: 62ch;
  margin: 0;
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}

.plumas { display: grid; margin: 0; padding: 0; list-style: none; }

.pluma {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(0, 26, 50, .12);
}
.pluma:last-child { border-bottom: 1px solid rgba(0, 26, 50, .12); }

.pluma__foto {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--pale);
}

.pluma__n {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
}

.pluma__cred {
  margin: .05rem 0 .45rem;
  font-size: .88rem;
  font-weight: 400;
  color: var(--purple);
}

.pluma__q {
  max-width: 44ch;
  margin: 0;
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}

.fuente__nota {
  max-width: 62ch;
  margin: clamp(1.5rem, 4vh, 2.25rem) 0 0;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink);
}
.fuente__nota a {
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .25s var(--ease);
}
.fuente__nota a:hover { color: var(--purple-dark); }


/* --- Las dos salidas ------------------------------------------------------
   Doble puerta, pero no dos puertas iguales: la llamada va en panel blanco
   con el botón lleno y marIAna se queda plana sobre la banda, con el botón
   perfilado. La jerarquía del cierre dice lo mismo que dice la página
   entera, y decirlo con el diseño ahorra tener que escribirlo. */

.salida {
  position: relative;
  background: var(--pale);
}
.salida::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grano);
  opacity: .10;
  pointer-events: none;
}

.salida__in {
  position: relative;
  max-width: var(--medida);
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 5rem) clamp(1.25rem, 4vw, 3.5rem);
}

.salida__head { margin-bottom: clamp(1.75rem, 4vh, 2.5rem); }

.salida__t {
  margin: 0 0 .8rem;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--ink);
}

.salida__d {
  max-width: 56ch;
  margin: 0;
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}

.puertas { display: grid; gap: 1.25rem; align-items: start; }

.puerta {
  display: grid;
  justify-items: start;
  gap: .55rem;
  padding: 1.6rem 0 0;
  border-top: 1px solid rgba(0, 26, 50, .16);
}

.puerta--fuerte {
  padding: clamp(1.5rem, 4vw, 2rem);
  border-top: 0;
  border-radius: var(--r-glass);
  background: var(--white);
  box-shadow: 0 24px 50px -32px rgba(0, 26, 50, .35);
}

.puerta__t {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -.022em;
  color: var(--ink);
}

.puerta__p {
  max-width: 40ch;
  margin: 0 0 .45rem;
  font-size: .98rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Botón perfilado. No existe en site.css y no se inventa una variante global
   desde una hoja de página: vive dentro de `.puerta` y ahí se queda. */
.puerta__b {
  display: inline-block;
  padding: .7rem 1.5rem;
  border: 1px solid var(--purple);
  border-radius: var(--r-pill);
  font-size: .97rem;
  font-weight: 600;
  color: var(--purple);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.puerta__b:hover {
  background: var(--purple);
  color: var(--white);
}


/* ==========================================================================
   A partir de tableta
   ========================================================================== */

@media (min-width: 720px) {
  /* `row-gap: 0` no es cosmética: en una sola columna el hueco separa las dos
     listas, pero en dos columnas ese mismo hueco se cuela entre las filas del
     subgrid de abajo y abre 64 px muertos entre cada punto y su filete. */
  .doble__rej { grid-template-columns: 1fr 1fr; row-gap: 0; }

  /* En dos columnas la última línea de cada lista queda a distinta altura y
     el bloque se lee descuadrado. Se quita en las dos: quien cierra la lista
     es el filete del título de la sección siguiente. */
  .hace__i:last-child { border-bottom: 0; }

  /* Las dos listas comparten filas. Sin esto cada punto mide lo que mide su
     texto, los filetes de una columna caen unos píxeles por encima de los de
     la otra y el filete vertical del medio deja la falta de cuadre a la
     vista. Con `subgrid` las seis filas —título y cinco puntos— son las
     mismas para las dos, que es lo que hace que pesen igual de verdad y no
     solo en el tamaño de la letra. Donde no haya subgrid, cada lista se
     comporta como antes: se descuadra, pero se lee. */
  @supports (grid-template-rows: subgrid) {
    .doble__rej { grid-template-rows: auto repeat(5, auto); }
    .hace { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; }
    .hace__l { grid-row: 2 / -1; grid-template-rows: subgrid; }
  }

  /* El filete vertical entre las dos listas es lo que las pone a pesar lo
     mismo: sin él la segunda parece un apéndice de la primera. Cae en la
     mitad exacta del hueco, no pegado a la columna de la izquierda. */
  .hace--no {
    margin-left: calc(var(--hueco) / -2);
    padding-left: calc(var(--hueco) / 2);
    border-left: 1px solid rgba(0, 26, 50, .14);
  }

  .plumas { grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 4vw, 3rem); }
  /* Con dos columnas la última fila son dos piezas y solo una llevaba cierre.
     Se lo ponen las dos. */
  .pluma:nth-last-child(-n + 2) { border-bottom: 1px solid rgba(0, 26, 50, .12); }

  .puertas { grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 2.5rem); }
  .puerta { padding-top: 1.75rem; }
}


/* ==========================================================================
   A partir de escritorio
   ========================================================================== */

@media (min-width: 900px) {
  /* La tapa reparte titular y entradilla en la misma línea de base. Con una
     sola palabra de titular, apilarlos dejaba media banda vacía. */
  .tapa--ia .tapa__in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
    grid-template-areas:
      "miga miga"
      "titulo dicho";
    column-gap: clamp(2.5rem, 6vw, 5rem);
    align-items: end;
  }
  .tapa--ia .miga { grid-area: miga; }
  .tapa--ia .tapa__t { grid-area: titulo; }
  .tapa--ia .tapa__d { grid-area: dicho; margin-top: 0; padding-bottom: .35rem; }

  .franco__in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "titulo titulo"
      "lead portrait"
      "cuerpo portrait";
    column-gap: clamp(2.5rem, 6vw, 5rem);
    row-gap: clamp(1.75rem, 4vh, 2.5rem);
  }
  .franco__t { grid-area: titulo; }
  .franco__lead { grid-area: lead; }
  .franco__cuerpo { grid-area: cuerpo; }
  .franco__portrait { grid-area: portrait; align-self: start; }

  .dice--ella { grid-template-columns: 46px minmax(0, 1fr); gap: .9rem; }
  .dice__cara { width: 46px; height: 46px; }
  .dice--ella .dice__c { max-width: 88%; }
  .dice--tu .dice__c { max-width: 76%; }
  .dice__p { padding: .95rem 1.2rem; font-size: 1.04rem; }

  .pluma { grid-template-columns: 60px minmax(0, 1fr); gap: 1.2rem; }
  .pluma__foto { width: 60px; height: 60px; }

  .puertas { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}


/* ==========================================================================
   Entradas
   ==========================================================================
   Mismo vocabulario que el resto del sitio: la máscara del titular se abre,
   el cuerpo sube. La clase `anim` la pone site.js en el <html>, así que sin
   JavaScript no hay estado previo y todo se ve.

   Los turnos de la conversación entran escalonados, de arriba abajo y en el
   orden en que se dijeron. Es el único sitio donde el escalonado significa
   algo: en una conversación el orden es el contenido. */

.anim .franco__t,
.anim .doble__t,
.anim .charla__t,
.anim .fuente__t,
.anim .salida__t {
  clip-path: inset(0 0 100% 0);
  transform: translateY(.35em);
  transition: clip-path .9s var(--ease), transform .9s var(--ease);
}
.anim .franco.is-in .franco__t,
.anim .doble.is-in .doble__t,
.anim .charla.is-in .charla__t,
.anim .fuente.is-in .fuente__t,
.anim .salida.is-in .salida__t { clip-path: inset(0 0 -20% 0); transform: translateY(0); }

.anim .franco__lead,
.anim .doble__d,
.anim .charla__d,
.anim .fuente__d,
.anim .salida__d {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .8s var(--ease) .18s, transform .8s var(--ease) .18s;
}
.anim .is-in .franco__lead,
.anim .is-in .doble__d,
.anim .is-in .charla__d,
.anim .is-in .fuente__d,
.anim .is-in .salida__d { opacity: 1; transform: translateY(0); }

.anim .franco__p,
.anim .hace,
.anim .pluma,
.anim .puerta,
.anim .dice {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.anim .is-in .franco__p,
.anim .is-in .hace,
.anim .is-in .pluma,
.anim .is-in .puerta,
.anim .is-in .dice { opacity: 1; transform: translateY(0); }

.anim .is-in .franco__p:nth-child(2) { transition-delay: .12s; }

.anim .is-in .hace:nth-child(1) { transition-delay: .26s; }
.anim .is-in .hace:nth-child(2) { transition-delay: .34s; }

.anim .charla.is-in .dice:nth-child(1) { transition-delay: .28s; }
.anim .charla.is-in .dice:nth-child(2) { transition-delay: .44s; }
.anim .charla.is-in .dice:nth-child(3) { transition-delay: .60s; }
.anim .charla.is-in .dice:nth-child(4) { transition-delay: .76s; }

.anim .is-in .pluma:nth-child(1) { transition-delay: .26s; }
.anim .is-in .pluma:nth-child(2) { transition-delay: .33s; }
.anim .is-in .pluma:nth-child(3) { transition-delay: .40s; }
.anim .is-in .pluma:nth-child(4) { transition-delay: .47s; }

.anim .is-in .puerta:nth-child(1) { transition-delay: .26s; }
.anim .is-in .puerta:nth-child(2) { transition-delay: .36s; }

.anim .doble__nota,
.anim .charla__nota,
.anim .fuente__nota {
  opacity: 0;
  transition: opacity .8s var(--ease) .5s;
}
.anim .is-in .doble__nota,
.anim .is-in .charla__nota,
.anim .is-in .fuente__nota { opacity: 1; }


@media (prefers-reduced-motion: reduce) {
  .anim .franco__t,
  .anim .doble__t,
  .anim .charla__t,
  .anim .fuente__t,
  .anim .salida__t,
  .anim .franco__lead,
  .anim .doble__d,
  .anim .charla__d,
  .anim .fuente__d,
  .anim .salida__d,
  .anim .franco__p,
  .anim .hace,
  .anim .pluma,
  .anim .puerta,
  .anim .dice,
  .anim .doble__nota,
  .anim .charla__nota,
  .anim .fuente__nota {
    clip-path: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.franco__portrait { margin: 0; width: 100%; max-width: 32rem; justify-self: center; }
.franco__portrait img { display: block; width: 100%; height: auto; border-radius: var(--r-glass); }

.salida__head, .puerta { text-align: center; }
.salida__d { margin-inline: auto; }
.puerta { justify-items: center; }

/* Profesionales sincronizados con la misma selección de Nosotros. */
.pluma__perfil { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 1rem; align-items: center; grid-column: 1 / -1; text-decoration: none; }
.pluma__n, .pluma__cred { display: block; }
.pluma__foto { object-position: top center; }
.pluma__perfil:hover .pluma__n { color: var(--purple); }
.pluma__perfil:focus-visible { outline: 2px solid var(--purple); outline-offset: 5px; border-radius: var(--r-glass); }
.pluma--without-photo .pluma__perfil { grid-template-columns: minmax(0, 1fr); }

/* Conversación centrada dentro del mismo ancho de sección. */
.charla__head { text-align: center; }
.charla__d, .charla .hilo, .charla__nota { margin-inline: auto; }
.charla__nota { text-align: center; }

/* Fuentes y especialistas centrados dentro de la sección. */
.fuente__dicho, .fuente__nota { text-align: center; }
.fuente__d, .fuente__nota { margin-inline: auto; }
.fuente .pluma__perfil { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.fuente .pluma__foto { margin-inline: auto; }