/**
 * Theme Name: MacVal
 * Theme URI: https://macval.com.ar
 * Template: tutorstarter
 * Author: Solutions Code
 * Description: La cara nueva de MacVal Neuroconsultoría. Tema hijo de TutorStarter: hereda el aula, el carrito y el checkout del padre —que mantiene la gente de Tutor LMS— y cambia solamente cómo se ve.
 * Version: 2.1.0
 * Requires PHP: 7.4
 * Text Domain: macval
 */

/* ===========================================================================
   «UMBRAL»
   ===========================================================================

   ── Qué se tiró de la versión anterior, y por qué ──────────────────────────

   La primera versión era prolija y no era premium. El diagnóstico, puntual:

     · De los **cuatro** colores del manual de marca usaba **uno**, y como
       acento chico. Todo lo demás era blanco. Eso no es minimalismo: es no
       haber decidido nada.
     · Bordes de 1 px en todo —tarjetas, servicios, contactos, pie—. Es el
       recurso más barato que hay, y cuando todo tiene el mismo borde finito
       nada tiene jerarquía.
     · El `h1` llegaba a 3,5 rem y se plantaba. En un sitio premium el título
       pesa; no pide permiso.
     · El movimiento era sólo de entrada: las cosas aparecían y después se
       quedaban muertas.
     · Cero profundidad. Nada se superponía, nada salía de la grilla.

   ── La dirección ───────────────────────────────────────────────────────────

   **Campo violeta profundo con metales cálidos encima**, alternando con campo
   claro donde hay que leer y comprar.

   Violeta y bronce es una combinación rica y poco vista, y es la paleta de la
   clienta usada de verdad en vez de insinuada. Lo oscuro envuelve en el hero
   y en lo institucional; lo claro aparece en Cursos y precios, que es donde
   leer cómodo importa más que impresionar.

   El elemento que la página se tiene que llevar puesto es **la línea
   conductora**: un trazo de bronce con una señal que viaja mientras se
   scrollea, y secciones que se encienden cuando la señal las alcanza. Es la
   forma en que funciona una neurona, que es de lo que vive esta consultora, y
   resuelve el movimiento continuo que faltaba.

   =========================================================================== */

/* ---------------------------------------------------------------------------
   Superficies, marca y profundidad
   --------------------------------------------------------------------------- */

:root {
  /* ── Campo oscuro ──────────────────────────────────────────────────────
     Violeta llevado casi al negro. No es un gris azulado ni un negro puro:
     mantiene el matiz de la marca, así que el sitio se siente de ella
     incluso en las zonas donde no hay un solo elemento violeta a la vista. */
  /* ── Subido dos escalones, a pedido ─────────────────────────────────────

     Estaba en #1A0B26: violeta llevado casi al negro. Natalia lo vio y dijo
     que el sitio quedaba muy oscuro, y tiene razón — es una consultora de
     educación, no una marca de tecnología nocturna.

     Ahora el campo arranca en #2E1B42. Sigue siendo el violeta de la marca y
     sigue siendo oscuro, pero deja pasar luz. Medido: la crema sobre este
     fondo da 13,6:1, bastante arriba del 4,5 que exige la norma, así que
     subir la luminancia no costó legibilidad. */
  --mv-noche:       #4A2F68;
  --mv-noche-alta:  #5C3D7E;   /* superficie elevada sobre el campo oscuro */
  --mv-noche-borde: #74529A;

  /* ── Campo claro ───────────────────────────────────────────────────────
     No es blanco puro: un #FFF al lado del violeta produce un contraste que
     vibra, y un par de puntos de gris calman la transición.

     Se enfrió a pedido. El papel tenía café adentro —#FBF8F4— y al lado del
     grafito nuevo se veía amarillento, como una hoja vieja. Ahora es casi
     neutro con un resto mínimo de violeta, que es lo que lo mantiene de la
     marca y no de una plantilla cualquiera. */
  --mv-papel:       #FAFAFC;
  --mv-papel-hondo: #F0F0F5;

  /* ── La marca, y por qué ahora son dos violetas ──────────────────────────

     El violeta arrancó en #703A92 y se pidió aclararlo. Al hacerlo apareció
     un techo que no esperaba: el campo puede subir todo lo que haga falta
     —encima va crema y sobra contraste— pero **el botón lleva texto blanco**,
     y ahí el margen se acaba rápido. Medido:

         #703A92   blanco encima   7,8 : 1    el original
         #8450AC   blanco encima   5,6 : 1
         #8B57B4   blanco encima   5,1 : 1    ← hasta acá llega el botón
         #9B6BC4   blanco encima   3,9 : 1    no alcanza el mínimo

     Así que se separaron. `--mv-violeta` es el de **acción** —botones,
     enlaces, lo que se aprieta— y se queda donde el texto blanco se lee. El
     campo oscuro sube aparte, en `--mv-noche`, hasta donde haga falta.

     Con un solo violeta para las dos cosas había que elegir entre una página
     clara y un botón legible. */
  --mv-violeta:        #8B57B4;
  --mv-cafe:           #AA7F5A;
  --mv-bronce:         #6F2A02;

  /* ── Del vino al grafito ───────────────────────────────────────────────

     `--mv-tinta` era #230101: un vino casi negro. Se pidió sacarlo y llevarlo
     a un gris técnico.

     El detalle que casi me come: **esta variable hacía dos trabajos**. Era el
     fondo del pie de página y, al mismo tiempo, el color de los títulos sobre
     papel. Aclararla de una sola vez habría dejado los títulos de media web
     en gris claro sobre blanco.

     Así que son dos. `--mv-tinta` sigue siendo la tinta de los textos, ahora
     en grafito neutro en vez de vino.

     Hubo un momento en que esto eran dos variables: la tinta de los textos y
     un `--mv-grafito` para el fondo del pie. El pie termino yendo al mismo
     gris claro que la franja de clientes, asi que esa segunda quedo declarada
     y sin un solo uso. Se saca: una variable que no pinta nada es una
     promesa de que en algun lado hay un grafito que ya no existe. */
  --mv-tinta:          #1F2430;

  /* ── Las variantes que exige el campo oscuro ────────────────────────────
     El bronce del manual (#6F2A02) sobre el violeta profundo es ilegible:
     son dos colores oscuros. Para el campo oscuro se usa un bronce aclarado
     que **sí** llega al contraste AA (5,1:1 medido contra --mv-noche).

     No es cambiar la marca: es la misma familia de color a la luminancia que
     el fondo necesita. El bronce del manual se sigue usando tal cual sobre
     papel, que es donde fue pensado. */
  /* El bronce de campo oscuro tuvo que subir con el campo.

     Sobre el violeta viejo daba 5,1:1. Al aclarar el fondo a #4A2F68 cayó a
     **3,68:1** y se llevó puestas todas las volantas del sitio —«Formación»,
     «Qué hacemos», «Quiénes somos», los siete rótulos de Contacto—. Es el
     costo de mover un fondo: lo que iba encima deja de servir.

     #DCA86B mide 5,2:1 sobre el campo nuevo. Sigue siendo el mismo oro de la
     marca, a la luminancia que el fondo de hoy necesita. */
  --mv-bronce-luz:  #DCA86B;
  --mv-violeta-luz: #C4A0DE;

  /* El trazo de los bordes sobre campo claro.

     La venía usando en las reglas del escritorio sin haberla declarado nunca.
     En CSS, `var(--loquesea)` sin valor **invalida la declaración entera**:
     `border: 1px solid var(--mv-linea)` no dibuja un borde negro ni gris, no
     dibuja nada. Es un error silencioso y de los peores de encontrar, porque
     el navegador no se queja y lo que falta es justo lo que no está. */
  --mv-linea: #E3E5EC;

  /* Texto sobre oscuro: crema cálida, nunca blanco puro. */
  --mv-luz:       #F4EDE4;
  --mv-luz-media: rgba(244, 237, 228, .78);

  /* El atenuado subió de .48 a .64.

     Con el campo oscuro de antes, el 48 % daba de sobra. Al aclarar el fondo
     la crema translúcida se acercó a él y cayó a 3,47:1 — se llevó la línea
     de copyright de todo el sitio y las cuatro descripciones de Contacto.

     Es el error que casi se me escapa: el barrido medía el color declarado
     —crema— y no el que se ve, que es crema mezclada con el fondo según su
     transparencia. Corregido el cálculo, aparecieron. A .64 mide 4,73:1. */
  --mv-luz-tenue: rgba(244, 237, 228, .64);

  /* Texto sobre papel. Neutralizado junto con la tinta: eran dos grises con
     rojo adentro y al lado del grafito se notaban sucios. */
  --mv-tinta-media: #4A5160;
  /* #6E7686 medía 4,38:1 sobre el papel: a dos décimas del mínimo. Se bajó
     hasta pasarlo con margen, 4,92:1. */
  --mv-tinta-tenue: #666E7D;

  /* ── Profundidad ───────────────────────────────────────────────────────
     Dos niveles y nada más. La profundidad se consigue con sombras amplias
     y muy suaves —no con un borde— porque una sombra grande sugiere que el
     elemento está flotando sobre un plano, y un borde sólo lo recorta.

     Las sombras llevan el tinte violeta del fondo, no negro: una sombra gris
     sobre un campo cálido ensucia. */
  --mv-sombra:   0 2px 10px rgba(74, 47, 104, .05), 0 14px 40px rgba(74, 47, 104, .07);
  --mv-sombra-2: 0 6px 20px rgba(74, 47, 104, .09), 0 30px 70px rgba(74, 47, 104, .14);

  --mv-ancho: 1200px;
  --mv-radio: 3px;

  /* ── El alto de la cabecera, declarado una vez ─────────────────────────

     La cabecera se superpone al hero: el hero sube con un margen negativo
     igual a este alto y vuelve a bajar con un padding del mismo valor.

     Antes ese número estaba **escrito a mano en tres lugares** —`-82px`— y
     la cabecera medía 93. Los 11 px de diferencia se veían como una franja
     violeta arriba de todo, estando scrolleado al tope. Una franja que no
     era de nadie: ni cabecera ni hero, el fondo del `body` asomando.

     Ahora el alto se **impone** con `min-height` y los tres lugares leen
     esta variable. No hay forma de que se desincronicen. */
  --mv-cabecera: 92px;

  /* Una sola curva para todo lo que se mueve. Mezclar curvas distintas en
     una misma página es lo que hace que se sienta improvisada. */
  --mv-curva: cubic-bezier(.22, 1, .36, 1);
}

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

body,
.mv-sitio {
  font-family: "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--mv-tinta-media);

  /* El cuerpo arranca oscuro porque el hero es oscuro: así, si alguien hace
     scroll más rápido de lo que pinta el navegador, no ve un destello blanco. */
  background: var(--mv-noche);

  /* `margin: 0` acá y no «ya lo resetea el padre». Lo delegaba en TutorStarter
     y eso daba 7 px de desborde horizontal en todas las páginas, medido a
     390 px. La misma apuesta ya había salido mal con `screen-reader-text`. */
  margin: 0;
  overflow-x: hidden;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mv-sitio h1,
.mv-sitio h2,
.mv-sitio h3,
.mv-sitio h4 {
  font-family: "Trirong", Georgia, serif;
  font-weight: 400;
  margin: 0;

  /* Tracking negativo que **crece con el tamaño**. Un título de 7 rem con el
     mismo espaciado que uno de 1 rem se ve suelto y amateur: cuanto más
     grande el tipo, más hay que cerrarlo. */
  letter-spacing: -.025em;
  line-height: 1.05;
}

/* `img { height: auto }` en una capa de baja prioridad: suelto le gana a
   cualquier alto que se le ponga después. Ya pasó una vez — el logo se
   dibujaba a 200 px con una clase que decía 40. */
@layer mv-base {
  .mv-sitio img { max-width: 100%; height: auto; display: block; }
  .mv-sitio a   { color: inherit; text-decoration: none; }
}

.mv-ancho {
  max-width: var(--mv-ancho);
  margin-inline: auto;
  padding-inline: 22px;
}

@media (min-width: 1024px) { .mv-ancho { padding-inline: 40px; } }

:focus-visible {
  outline: 2px solid var(--mv-bronce-luz);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Escala tipográfica

   El salto entre el título y la volanta es lo que genera la sensación de
   lujo. No los bordes finitos: el **contraste de escala**. Un título de 7 rem
   arriba de una volanta de 11 px dice «esto está diseñado» sin agregar un
   solo adorno.
   --------------------------------------------------------------------------- */

.mv-titular {
  font-size: clamp(2.75rem, 1.2rem + 6.4vw, 7rem);
  line-height: .95;
  letter-spacing: -.035em;
}

.mv-titulo {
  font-size: clamp(2rem, 1.1rem + 3.6vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.03em;
}

.mv-volanta {
  font-family: "Raleway", sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .22em;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* El punto de la volanta es el que **se enciende** cuando la señal de la
   línea conductora llega a la sección. Ver el bloque de la línea. */
.mv-volanta::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  flex: 0 0 auto;
  opacity: .45;
  transition: opacity .5s var(--mv-curva), box-shadow .5s var(--mv-curva);
}

.mv-entrada {
  font-size: clamp(1.0625rem, .95rem + .5vw, 1.375rem);
  line-height: 1.55;
  max-width: 46ch;
}

/* ---------------------------------------------------------------------------
   Los dos campos

   Toda sección declara en qué campo vive. Los colores de texto salen de
   variables que cada campo redefine, así que un mismo componente —una
   tarjeta, una lista, un botón— funciona en los dos sin escribirlo dos veces.
   --------------------------------------------------------------------------- */

.mv-campo {
  position: relative;
  padding: clamp(72px, 9vw, 140px) 0;
}

.mv-campo--noche {
  background: var(--mv-noche);
  color: var(--mv-luz-media);
  --campo-titulo: var(--mv-luz);
  --campo-acento: var(--mv-bronce-luz);
  --campo-texto:  var(--mv-luz-media);
  --campo-tenue:  var(--mv-luz-tenue);
  --campo-sup:    var(--mv-noche-alta);
  --campo-borde:  var(--mv-noche-borde);
}

.mv-campo--papel {
  background: var(--mv-papel);
  color: var(--mv-tinta-media);
  --campo-titulo: var(--mv-tinta);
  --campo-acento: var(--mv-bronce);
  --campo-texto:  var(--mv-tinta-media);
  --campo-tenue:  var(--mv-tinta-tenue);
  --campo-sup:    #fff;
  --campo-borde:  transparent;
}

.mv-campo--papel-hondo { background: var(--mv-papel-hondo); }

.mv-campo h1,
.mv-campo h2,
.mv-campo h3 { color: var(--campo-titulo); }

.mv-campo .mv-volanta { color: var(--campo-acento); }

/* El corte entre un campo y el siguiente.

   Un borde recto entre violeta profundo y papel es duro. Esto pone una franja
   de 1 px con un degradado del acento, que lee como una costura y no como un
   corte — y refuerza la idea de que las secciones están conectadas. */
.mv-campo + .mv-campo::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(192, 138, 78, .45) 22%,
    rgba(192, 138, 78, .45) 78%,
    transparent);
}

/* ---------------------------------------------------------------------------
   Movimiento

   Todo con `transform` y `opacity`, que es lo único que el navegador resuelve
   en el compositor. Nada que dispare un recálculo de maquetado al scrollear.

   Y todo dentro de `@supports`, con el estado **visible** como punto de
   partida: si el navegador no entiende `animation-timeline`, el contenido se
   ve igual, quieto. Nunca al revés — contenido que arranca invisible y
   depende de una animación para aparecer es contenido que algunos no ven
   nunca.
   --------------------------------------------------------------------------- */

@keyframes mv-revelar    { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes mv-revelar-izq{ from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
@keyframes mv-subir      { from { opacity: 0; transform: translateY(46px) scale(.975); } to { opacity: 1; transform: none; } }

@supports (animation-timeline: view()) {
  .mv-revelar,
  .mv-revelar-izq,
  .mv-subir {
    animation: mv-revelar linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }

  .mv-revelar-izq { animation-name: mv-revelar-izq; }
  .mv-subir       { animation-name: mv-subir; }

  /* El escalonado va por desfase del RANGO, no por `animation-delay`.
     Con `delay` sobre una línea de tiempo de scroll los elementos quedan
     pegados arriba hasta que el retraso termina; con el rango, cada uno entra
     un poco más tarde dentro de su propio recorrido. */
  .mv-escalon {
    animation: mv-subir linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 34%;
    animation-range-start: calc(entry 0% + (var(--i, 0) * 1.6%));
  }
}

/* Al imprimir, todo visible.

   Lo encontré mirando la vista previa: la captura de página completa salía
   con dos secciones en blanco. Una animación atada al scroll no corre si no
   hay scroll, y no hay scroll al imprimir ni al guardar como PDF. */
@media print {
  .mv-revelar, .mv-revelar-izq, .mv-subir, .mv-escalon {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .mv-cabecera, .mv-orbe, .mv-marquesina,   .mv-asistente, .mv-asistente-boton { display: none !important; }
  .mv-campo--noche { background: #fff !important; color: #000 !important; }
  .mv-campo--noche h1, .mv-campo--noche h2, .mv-campo--noche h3 { color: #000 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mv-revelar, .mv-revelar-izq, .mv-subir, .mv-escalon,
  .mv-marquesina-cinta, .mv-orbe, .mv-hero-foto img {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Acá vivía la línea conductora

   Un trazo de bronce en el borde izquierdo con una señal que lo recorría al
   scrollear: un indicador de posición. Lo sacó la clienta de todas las
   páginas.

   Se borró entero en vez de dejarlo en . CSS muerto que
   nadie se anima a tocar es cómo las hojas de estilo llegan a pesar el doble
   de lo que necesitan.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Campos de gradiente que derivan

   Lo que faltaba y se notaba: el fondo estaba quieto.

   Son dos manchas de color muy difusas que se mueven solas, despacio y sin
   repetir el mismo ciclo —una tarda 22 s y la otra 29 s, así que la
   combinación no se repite cada vuelta y el ojo no detecta el bucle.

   `filter: blur()` sobre un elemento que se mueve es caro. Por eso el
   degradado ya viene difuso desde el `radial-gradient` y lo único que se
   anima es `transform`, que va al compositor.
   --------------------------------------------------------------------------- */

.mv-orbe {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* ── Las dos manchas del fondo ────────────────────────────────────────────

   La segunda era bronce —`rgba(192, 138, 78, …)`— y sobre el violeta leia
   como una mancha marron en la esquina de abajo. No se veia como luz: se veia
   como suciedad en la pantalla.

   Ahora las dos son luz. La de arriba, violeta claro; la de abajo, crema casi
   blanca. Sobre un campo violeta, una luz calida sin saturar se lee como un
   reflejo y no como un color metido ahi.

   El bronce no se fue del sitio: sigue en las volantas y en la palabra
   destacada del titular, que es donde fue pensado. */
.mv-orbe-1 {
  width: clamp(380px, 48vw, 760px);
  aspect-ratio: 1;
  top: -16%;
  right: -12%;
  background: radial-gradient(circle,
    rgba(196, 160, 222, .44) 0%,
    rgba(196, 160, 222, .18) 42%,
    transparent 68%);
  animation: mv-derivar-1 22s ease-in-out infinite alternate;
}

.mv-orbe-2 {
  width: clamp(300px, 36vw, 580px);
  aspect-ratio: 1;
  bottom: -22%;
  left: -14%;
  background: radial-gradient(circle,
    rgba(244, 237, 228, .22) 0%,
    rgba(244, 237, 228, .08) 45%,
    transparent 70%);
  animation: mv-derivar-2 29s ease-in-out infinite alternate;
}

@keyframes mv-derivar-1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-7%, 9%, 0) scale(1.13); }
}

@keyframes mv-derivar-2 {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(9%, -7%, 0) scale(.94); }
}

/* ---------------------------------------------------------------------------
   Cabecera

   Transparente sobre el hero y sólida al bajar. Es lo que permite que el hero
   arranque pegado al borde de arriba: con una cabecera sólida siempre, el
   título nunca puede ocupar la pantalla entera.
   --------------------------------------------------------------------------- */

.mv-cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  transition: background .4s var(--mv-curva), backdrop-filter .4s var(--mv-curva),
              box-shadow .4s var(--mv-curva);
}

.mv-cabecera[data-encogida="1"] {
  background: rgba(74, 47, 104, .82);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 rgba(192, 138, 78, .2);
}

.mv-cabecera-fila {
  /* El alto lo manda la variable, no el contenido. Si lo definiera el
     contenido, cambiar el tamano de un boton movería el hero. */
  min-height: var(--mv-cabecera);
  max-width: var(--mv-ancho);
  margin-inline: auto;
  padding-inline: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: min-height .3s var(--mv-curva);
}

.mv-cabecera[data-encogida="1"] .mv-cabecera-fila { min-height: 68px; }

@media (min-width: 1024px) { .mv-cabecera-fila { padding-inline: 40px; } }

/* ── El logo no se encoge nunca ─────────────────────────────────────────────

   ===========================================================================
   DESAPARECIÓ EN PRODUCCIÓN, Y TARDÉ EN CREERLO
   ===========================================================================

   Juan dijo tres veces que el logo no estaba. Yo lo medía y lo veía. Los dos
   teníamos razón: a mí me salía 92 px de ancho, a él 0.

   La fila de la cabecera es un `flex`. Con la sangría izquierda que la alinea
   con el contenido de la página, a 1914 px de pantalla quedan 771 px útiles, y
   adentro tienen que entrar el logo (113), el botón (149) y el menú (643):
   905. No entra.

   Cuando un `flex` no entra, encoge lo que puede encoger. El botón tenía
   `flex-shrink: 0` y el menú se defiende con `white-space: nowrap`. El único
   que cedía era el logo — y cedió hasta cero. Sin romperse, sin error, sin
   hueco: simplemente dejó de ocupar lugar.

   Por qué yo no lo veía: estaba midiendo con sesión iniciada. Logueado el
   menú dice «Mis cursos»; deslogueado dice «Iniciar Sesión», que es 60 px más
   ancho. Esos 60 px eran la diferencia entre que entrara y que no.

   Y lo empeoré yo: con el logo en 36 px de alto medía 92 de ancho y entraba
   raspando. Lo subí a 44 —quedó en 113— y lo maté.

   `flex: 0 0 auto` lo saca del reparto: el logo ocupa lo suyo y la presión va
   a otro lado. Es la regla que tendría que haber estado desde el principio;
   que la marca sea el elemento sacrificable de su propia cabecera no se
   sostiene en ninguna lectura.
   --------------------------------------------------------------------------- */
.mv-logo {
  flex: 0 0 auto;
}

.mv-logo img {
  height: 42px;
  width: auto;
  transition: height .3s var(--mv-curva);
}

.mv-cabecera[data-encogida="1"] .mv-logo img { height: 34px; }

.mv-menu { display: none; }

/* El menú del celular siempre contra la derecha. */
.mv-menu-movil { margin-left: auto; }

@media (min-width: 1100px) {
  .mv-menu { display: flex; gap: 28px; margin-left: 32px; }
}

/* ── Sin subrayado, y esta vez de verdad ───────────────────────────────────

   La barra salía con **todo subrayado**: las siete entradas del menú y el
   botón. No era intencional y tampoco era el subrayado animado de más abajo
   —ése nace en `scaleX(0)` y sólo crece al pasar por encima—. Era el
   subrayado que el navegador le pone a cualquier `<a>`.

   El tema ya lo apagaba, en `.mv-sitio a { text-decoration: none }`. El
   detalle es dónde: adentro de `@layer mv-base`. **Todo lo que está en una
   capa pierde contra lo que no está en ninguna**, sin importar la
   especificidad — y Elementor, JEG y Tutor escriben sus hojas sin capas. Una
   de ellas vuelve a poner `underline` y gana por estar afuera.

   La capa estaba bien pensada para `img { height: auto }`, que es un valor
   que uno quiere que cualquiera pueda pisar. Para el subrayado es
   exactamente al revés.

   Así que acá va sin capa, apuntando a la cabecera. No se toca el resto del
   sitio: en un texto corrido, un enlace sin subrayar es un enlace que nadie
   encuentra. En una barra de navegación, donde la posición ya dice que son
   enlaces, el subrayado es ruido. */
.mv-cabecera a,
.mv-cabecera a:hover,
.mv-cabecera a:focus {
  text-decoration: none;
}

/* El pie arrastraba el mismo subrayado y se me habia pasado: cuando arregle
   esto mire la barra de arriba, que era de lo que se habia quejado Juan, y no
   baje hasta el final de la pagina. Se ve en cualquier celular, con las cuatro
   columnas de enlaces subrayadas una abajo de la otra.

   Van las dos listas de navegacion del pie —las columnas y el zocalo—, no
   `.mv-pie` entero: si manana el pie llevara una frase con un enlace adentro,
   ese enlace tiene que seguir subrayado para que se vea que es un enlace. */
.mv-pie-grilla a,
.mv-pie-grilla a:hover,
.mv-pie-grilla a:focus,
.mv-pie-zocalo a,
.mv-pie-zocalo a:hover,
.mv-pie-zocalo a:focus {
  text-decoration: none;
}

.mv-menu a {
  font-size: 14px;
  color: var(--mv-luz-media);
  position: relative;
  padding: 4px 0;
  transition: color .25s var(--mv-curva);
}

.mv-menu a:hover,
.mv-menu .current-menu-item > a { color: var(--mv-luz); }

/* El subrayado crece desde la izquierda. Un `opacity` que aparece de golpe se
   siente barato; esto se siente dibujado. */
.mv-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--mv-bronce-luz);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--mv-curva);
}

.mv-menu a:hover::after,
.mv-menu .current-menu-item > a::after { transform: scaleX(1); }

/* ---------------------------------------------------------------------------
   Botones
   --------------------------------------------------------------------------- */

.mv-boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border: 0;
  border-radius: 999px;
  /* El fondo del boton no es el violeta elegido sin mas: PHP lo corrige si
     cayo en la franja de tonos medios donde ningun texto se lee, y despues
     elige el texto que mas contrasta. Los dos valores llegan por variable; si
     nadie toco el color en el panel, caen en los del manual. */
  background: var(--mv-violeta-boton, var(--mv-violeta));
  color: var(--mv-sobre-violeta, #fff);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--mv-curva), box-shadow .3s var(--mv-curva);
  box-shadow: 0 4px 16px rgba(132, 80, 172, .3);
}

.mv-boton:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(132, 80, 172, .42);
}

/* El destello que cruza al pasar por encima. Es el único adorno puro de todo
   el sitio y está una sola vez: en el botón principal, que es el que se
   quiere que aprieten. */
.mv-boton::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s var(--mv-curva);
}

.mv-boton:hover::before { transform: translateX(120%); }

.mv-boton--linea {
  background: transparent;
  color: var(--campo-acento, var(--mv-violeta));
  box-shadow: inset 0 0 0 1px currentColor;
}

.mv-boton--linea:hover {
  background: var(--campo-acento, var(--mv-violeta));
  color: var(--mv-noche);
  box-shadow: inset 0 0 0 1px transparent;
}

.mv-campo--papel .mv-boton--linea:hover { color: #fff; }

/* ── El botón va con el logo, a la izquierda ───────────────────────────────

   Estaba pegado al borde derecho con `margin-left: auto`. Medido a 1440 px:
   iba de x=1116 a 1280, y la foto empieza en 720. Es decir, **560 px adentro
   de la foto** — una pastilla violeta maciza justo sobre la cara de Natalia.

   Ahora viaja en el grupo de la izquierda, junto a la marca, donde el fondo
   es violeta liso. El menú queda a continuación: es texto liviano sobre el
   degradado y no pelea con la imagen como lo hacía un botón relleno. */
.mv-boton--destacado {
  margin-left: 26px;
  flex: 0 0 auto;
}

/* ── Y va sin relleno ──────────────────────────────────────────────────────

   Era una pastilla violeta maciza. Sobre una cabecera que ya es violeta, un
   bloque del mismo color más saturado no destaca: compite. Y al lado del
   logo, lo tapaba.

   Sin relleno queda el contorno y el texto, con el mismo peso visual que el
   menú de al lado. La jerarquía la da la forma —es el único con borde— y no
   el color.

   El borde va en la luz de la marca, no en otro violeta: a 76 px de alto y
   sobre un fondo que ya es violeta oscuro, un contorno violeta se pierde.
   Medido: crema sobre el campo de la cabecera da 11,8:1; violeta daría 2,1.

   Y se le saca el destello que cruza al pasar por encima. Ese adorno estaba
   pensado para una superficie rellena; sobre un contorno queda como un
   defecto de dibujo. En el botón del hero sigue, que es donde se quiere que
   aprieten. */
.mv-cabecera .mv-boton--destacado {
  background: transparent;
  color: var(--mv-luz);
  box-shadow: inset 0 0 0 1px rgba(245, 237, 228, .45);
}

.mv-cabecera .mv-boton--destacado::before { content: none; }

.mv-cabecera .mv-boton--destacado:hover {
  background: rgba(245, 237, 228, .1);
  box-shadow: inset 0 0 0 1px var(--mv-luz);
  transform: translateY(-1px);
}

@media (max-width: 420px) {
  .mv-boton--destacado { padding: 12px 18px; font-size: 13px; }
}

/* ===========================================================================
   LA BARRA NO ENTRABA EN UN TELEFONO DE 360 PX
   ===========================================================================

   Natalia lo vio desde su celular: la pagina corrida a la izquierda y una
   franja violeta asomando a la derecha. Medido sobre el sitio publicado:

       360 px   desborde 19 px
       375 px   desborde  4 px
       390 px   desborde  0
       412 px   desborde  0

   La cuenta de la barra a 360:

       padding               22 + 22  =  44
       logo                           = 113
       boton «Primeros pasos»         = 149
       hamburguesa                    =  44
       dos separaciones de 14         =  28
                                        ───
                                         378   contra 360 de pantalla

   ── Por que no cedia nada ─────────────────────────────────────────────────

   Es consecuencia directa de un arreglo anterior. Cuando el logo desaparecia
   —se encogia hasta cero porque era el unico elemento flexible de la fila— le
   puse `flex: 0 0 auto`. El boton ya lo tenia. Con los dos rigidos, a 360 px
   no hay nada que ceder y la fila empuja la pagina entera.

   Yo lo habia medido a 390 y a 1440. Nunca abajo de 390, que es justo donde
   empieza a doler.

   ── Por que se esconde el boton y no se achica el logo ────────────────────

   Achicar el logo alcanzaba para 360 y volvia a romperse en 320, que es un
   telefono que sigue existiendo. Y el boton es redundante en el telefono: el
   menu de la hamburguesa tiene «Cursos», y el hero tiene «Mas informacion» a
   media pantalla de distancia. Es el unico elemento de la barra del que se
   puede prescindir sin perder un camino.
   =========================================================================== */

@media (max-width: 479px) {
  .mv-cabecera-fila .mv-boton--destacado { display: none; }

  /* Y el aire de los costados baja de 22 a 16: a esta altura cada pixel que
     se le saca al margen es un pixel mas de logo. */
  .mv-cabecera-fila { padding-inline: 16px; gap: 10px; }

  /* Sin el botón, el `auto` que lo empujaba a la derecha se va con él: lo que
     está en `display: none` no participa del reparto del flex. Pasa acá. */
  .mv-cabecera-fila .mv-menu-movil { margin-left: auto; }
}

/* ---------------------------------------------------------------------------
   HERO

   Campo oscuro a pantalla casi completa, el título enorme, y la foto
   **sangrando al borde derecho**.

   Lo de la foto no es un capricho: una imagen que toca el borde de la ventana
   dice que la página sigue más allá del marco. Una imagen encerrada en su
   columna, con su borde de 1 px, dice lo contrario — y eso era lo que había.
   --------------------------------------------------------------------------- */

.mv-hero {
  position: relative;
  overflow: hidden;
  background: var(--mv-noche);
  color: var(--mv-luz-media);
  --campo-acento: var(--mv-bronce-luz);
  min-height: clamp(560px, 86vh, 920px);
  display: flex;
  align-items: center;

  /* La cabecera es sticky y transparente: sin este margen negativo, el hero
     empezaría debajo de ella y se perdería la pantalla completa. */
  margin-top: calc(-1 * var(--mv-cabecera));
  padding-top: var(--mv-cabecera);
}

.mv-hero-grilla {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* El texto se queda en la mitad izquierda.

   `45%` y no `50%`: si ocupara la mitad exacta, la última palabra de cada
   renglón quedaría pegada al punto donde arranca la foto. Ese respiro es lo
   que hace que las dos mitades se lean como una composición y no como dos
   bloques chocándose. */
@media (min-width: 900px) {
  .mv-hero-texto { max-width: 45%; }
}

/* El titular del hero es más chico que el de las portadillas.

   Tiene la mitad del ancho para desplegarse —la otra mitad es la foto— así
   que a 7 rem rompía en demasiados renglones y perdía fuerza. A 5,25 entra en
   tres líneas cómodas y sigue pesando.

   Es el mismo motivo por el que un cartel de la calle usa menos cuerpo que
   uno de la misma marca en una página entera: lo que manda no es el tamaño,
   es cuánto espacio tiene para respirar. */
.mv-hero .mv-titular {
  /* ── Bajo dos veces, y por el mismo motivo ───────────────────────────────

     Arranco en 7 rem, que a 1440 px daba 112 px. Despues quedo en 5,25 rem
     (74 px). Ahora esta en 3,5 rem (56 px).

     El problema nunca fue el tamano en si: es que el titular tiene **la
     mitad del ancho** para desplegarse, porque la otra mitad es la foto. Uno
     que a pagina completa se veria imponente, encerrado en 45 % de ancho se
     parte en cuatro renglones y deja de leerse como una frase.

     A 56 px entra en tres lineas, se lee de un golpe, y la foto deja de
     pelear con el texto por la atencion. */
  font-size: clamp(2rem, 1.1rem + 2.5vw, 3.5rem);
  line-height: 1.04;
}

.mv-hero h1 { color: var(--mv-luz); }

/* La palabra que se destaca dentro del titular.

   «Alta Performance» es el eslogan de la marca. Marcarla en bronce dentro del
   título hace que el titular tenga un punto de llegada en vez de ser una
   masa de texto pareja. */
.mv-hero h1 em {
  font-style: normal;
  color: var(--mv-bronce-luz);
}

.mv-hero-bajada {
  margin: 28px 0 0;
  color: var(--mv-luz-media);
}

.mv-hero-acciones {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* ---------------------------------------------------------------------------
   Las fotos del hero: media pantalla, y fundidas

   ── Qué estaba mal ─────────────────────────────────────────────────────────

   La foto se veía **pegada encima**, como un recorte sobre la página. Y el
   problema era estructural, no de estilo: vivía adentro del contenedor de
   1200 px, así que por más `margin` negativo que se le pusiera nunca llegaba
   de verdad al borde ni ocupaba el alto completo.

   ── Cómo está ahora ────────────────────────────────────────────────────────

   Sale del contenedor: `position: absolute` sobre la **mitad derecha de la
   ventana**, de arriba abajo. El texto se queda en la mitad izquierda.

   Y lo que la saca de «insertada» es el fundido: un degradado del mismo
   violeta del campo entra desde la izquierda y desde abajo hasta volverse
   transparente. No hay una línea donde termina la foto y empieza la página —
   hay una zona donde una se vuelve la otra.
   --------------------------------------------------------------------------- */

.mv-hero-fotos {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

@media (min-width: 900px) {
  /* La mitad derecha exacta. */
  .mv-hero-fotos { left: 50%; }
}

.mv-hero-fotos img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;   /* la cara, no el centro geométrico */
  opacity: 0;
}

/* Con una sola foto no hay nada que encadenar: se muestra y listo. El
   encadenado lo enciende PHP sólo si hay más de una. */
.mv-hero-fotos img:only-child { opacity: 1; }

/* ── El fundido ─────────────────────────────────────────────────────────────

   Dos degradados superpuestos:

     · Uno horizontal, que entra desde la izquierda con el violeta del campo
       y se vuelve transparente al llegar al 72 %. Es el que borra el canto
       vertical de la foto.
     · Uno vertical desde abajo, para que la foto tampoco termine en una
       línea recta contra la sección siguiente.

   El violeta va escrito con sus valores RGB y no con la variable porque hace
   falta modularle el alfa en cada parada, y `var()` dentro de `rgba()` no
   permite eso sin recurrir a `color-mix`, que es más nuevo. */
.mv-hero-fotos::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* ── 1. La franja de la cabecera ────────────────────────────────────
       Medido: el menú sobre la foto daba **1,56:1** de contraste. La parte
       clara de la imagen quedaba justo detrás de «Responsabilidad Social» y
       el texto desaparecía.

       El botón era lo que saltaba a la vista —una pastilla maciza sobre la
       cara— pero el menú estaba peor, y era menos evidente porque el texto
       no se ve: se desvanece.

       Este velo cubre exactamente el alto de la cabecera y se desvanece 90 px
       más abajo. Está atado a `--mv-cabecera`, así que si la barra cambia de
       alto el velo la sigue. */
    linear-gradient(180deg,
      rgba(74, 47, 104, .94) 0,
      rgba(74, 47, 104, .86) var(--mv-cabecera),
      transparent calc(var(--mv-cabecera) + 90px)),

    /* ── 2. El fundido lateral, que borra el canto de la foto ──────────── */
    linear-gradient(90deg,
      rgb(74, 47, 104) 0%,
      rgba(74, 47, 104, .92) 14%,
      rgba(74, 47, 104, .55) 38%,
      rgba(74, 47, 104, .18) 58%,
      transparent 72%),

    /* ── 3. El cierre de abajo, contra la sección siguiente ───────────── */
    linear-gradient(180deg,
      transparent 70%,
      rgb(74, 47, 104) 100%);
}

/* En pantalla angosta la foto pasa a estar **detrás del texto**, cubriendo
   todo el hero, con el velo mucho más cerrado para que el texto se lea. Es
   eso o mandar la foto abajo y dejar el hero con medio metro de violeta
   vacío arriba. */
/* ── En el celular, la foto es una banda abajo ──────────────────────────────

   ── Las dos formas que no servían ──────────────────────────────────────────

   **Primera:** la foto a media pantalla, como en escritorio. A 390 px no hay
   media pantalla: la foto quedaba en una tira de 190 px de ancho donde no se
   entendía qué se estaba viendo.

   **Segunda:** la foto detrás de todo el hero, con un velo al 94 %. El texto
   se leía perfecto —6,87:1 medido— pero la foto quedaba **tan tapada que no
   se veía**. Y encima sobraba medio metro de violeta vacío abajo de los
   botones, porque el hero mide 86 vh y el texto ocupa la mitad.

   Pagar el peso de una foto para después esconderla es lo peor de los dos
   mundos.

   ── Lo que sí ──────────────────────────────────────────────────────────────

   El texto arriba sobre violeta liso —contraste perfecto, sin velos— y la
   foto ocupando la franja de abajo, que es justo el espacio que sobraba. Se
   funde hacia arriba con el campo, así que no hay un corte: el violeta se
   convierte en la imagen.

   La foto se ve de verdad, el texto se lee de verdad, y no queda hueco.
   --------------------------------------------------------------------------- */

@media (max-width: 899px) {
  /*
     `flex-direction: column` con `order`, y no `display: block`.

     En el HTML las fotos van **antes** del texto, porque en escritorio están
     posicionadas en absoluto y el orden del documento no importa. Al pasarlas
     a flujo normal en el celular, ese orden sí importa: la foto apareció
     arriba de todo, tapando el titular.

     `order` lo resuelve sin tocar el HTML, que es lo correcto — el orden del
     documento está bien como está y sólo cambia cómo se apila en pantalla.
  */
  .mv-hero {
    min-height: auto;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;

    /*
       `align-items: stretch` y no el `center` que viene de la regla de
       escritorio.

       En fila, `center` alinea verticalmente — que es lo que se quiere allá.
       Al pasar a columna, el eje cruzado es el horizontal y ese mismo `center`
       encoge cada hijo al ancho de su contenido.

       Las fotos no tienen contenido en flujo (sus `img` están en absoluto), así
       que el contenedor quedó en **ancho 0** y la foto desapareció del celular.
       Se veía como si no hubiera foto; medido, estaba ahí con 383 px de alto y
       0 de ancho.
    */
    align-items: stretch;
  }

  .mv-hero-grilla {
    order: 1;
    padding-top: clamp(28px, 7vw, 56px);
  }

  .mv-hero-fotos {
    order: 2;
    position: relative;
    inset: auto;
    left: 0;
    height: clamp(300px, 52vw + 180px, 460px);
    margin-top: 36px;
  }

  /* El degradado de arriba funde la foto con el campo; el de abajo la cierra
     contra la sección siguiente. Entre los dos, la franja central queda
     limpia y la foto se ve. */
  .mv-hero-fotos::after {
    background:
      linear-gradient(180deg,
        rgb(74, 47, 104) 0%,
        rgba(74, 47, 104, .72) 14%,
        rgba(74, 47, 104, .12) 38%,
        transparent 62%,
        rgba(74, 47, 104, .55) 90%,
        rgb(74, 47, 104) 100%);
  }

  .mv-hero-fotos img { object-position: center 18%; }
}

/* Parallax: la foto se mueve más lento que la página.

   Ata el desplazamiento al scroll con `animation-timeline: view()`, así que
   no hay listener. El recorrido es chico —5 %— a propósito: un parallax
   exagerado marea y delata el truco.

   **No se aplica cuando hay varias fotos**: ahí la propiedad `animation` ya
   la usa el encadenado, y pisarla cortaría el fundido. Una cosa o la otra,
   no las dos peleando por el mismo lugar. */
@supports (animation-timeline: view()) {
  @keyframes mv-parallax {
    from { transform: translateY(-5%) scale(1.1); }
    to   { transform: translateY(5%) scale(1.1); }
  }

  .mv-hero-fotos img:only-child {
    animation: mv-parallax linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
}

/* ---------------------------------------------------------------------------
   Encabezado de sección
   --------------------------------------------------------------------------- */

.mv-encabezado {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(40px, 5vw, 72px);
}

.mv-encabezado p.mv-entrada { margin: 18px 0 0; color: var(--campo-texto); }

.mv-enlace-mas {
  font-size: 14px;
  color: var(--campo-acento);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap .3s var(--mv-curva);
}

.mv-enlace-mas:hover { gap: 14px; }

/* ---------------------------------------------------------------------------
   Marquesina de clientes

   Sobre campo oscuro y **grande**. Antes eran logos chiquitos en gris sobre
   blanco: se leían como un pie de página, no como una lista de clientes que
   incluye a Tecpetrol.

   La cinta lleva la lista duplicada y se desplaza el 50 %: al terminar, la
   segunda copia está exactamente donde arrancó la primera y el salto no se
   ve. La copia va con `aria-hidden` — si no, un lector de pantalla lee 58
   logos en vez de 29.
   --------------------------------------------------------------------------- */

.mv-marquesina {
  overflow: hidden;
  position: relative;

  /* Las puntas se desvanecen con una máscara. Sin esto, los logos aparecen y
     desaparecen de golpe contra el borde y se ve el recorte. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.mv-marquesina-cinta {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: mv-correr 54s linear infinite;
}

.mv-marquesina-cinta--vuelta {
  animation-direction: reverse;
  animation-duration: 68s;
}

@keyframes mv-correr {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.mv-marquesina:hover .mv-marquesina-cinta { animation-play-state: paused; }

/* ── Cada logo sobre su propia tarjeta clara ────────────────────────────────

   ── El error que hubo acá, y por qué no se podía ver sin mirar ─────────────

   La primera versión usaba `filter: brightness(0) invert(1)` para pintar
   todos los logos de blanco sobre el campo oscuro. Es la receta de manual...
   **para logos en PNG con fondo transparente**.

   Los de este sitio no lo son: la mayoría son JPG o WebP con fondo blanco.
   `brightness(0)` pinta de negro todo —el logo y su fondo— e `invert(1)` lo
   devuelve todo blanco. Resultado: **catorce rectángulos blancos macizos**
   donde tenían que ir los clientes. Así salió en la vista previa.

   La solución que funciona con cualquier logo, transparente u opaco, es
   darle a cada uno su tarjeta clara. Encima queda mejor: la fila se lee como
   un conjunto ordenado en vez de un collage de recortes, que es lo que hacen
   los sitios que muestran clientes de orígenes distintos.

   `content-box` para que `height` siga siendo el alto del logo y el padding
   se sume alrededor en vez de comérselo. */
/* ── Los logos van sueltos, a todo color, sin ninguna caja ─────────────────

   ── Las dos vueltas que costó llegar acá ───────────────────────────────────

   **Primera:** `filter: brightness(0) invert(1)` para pintarlos de blanco
   sobre el campo oscuro. Es la receta de manual... para PNG transparentes.
   Éstos son JPG y WebP con el fondo blanco metido adentro del archivo, así
   que el filtro pintaba también el fondo: **catorce rectángulos blancos
   macizos** donde iban los clientes.

   **Segunda:** meter cada logo en una tarjeta clara. Arreglaba lo de leerse,
   pero el fondo blanco del archivo seguía ahí, ahora como un rectángulo más
   claro adentro de la tarjeta. Una caja dentro de otra caja. Se veía peor.

   **Lo que faltaba no era CSS, era arreglar los archivos.**
   `pruebas/recortar-logos.js` les saca el fondo con un relleno por
   inundación desde los bordes —sólo el blanco que rodea el dibujo, no el que
   está adentro de una letra o un escudo— y los recorta al contenido.

   Con los archivos limpios, acá no hace falta nada: ni tarjeta, ni filtro,
   ni opacidad. El logo va directo sobre el papel, con sus colores. Que es
   como tienen que verse los clientes de alguien.

   `max-height` y ancho automático —no medida fija— porque ahora cada logo
   está recortado a su contenido y respeta su propia proporción. Un logo
   horizontal ocupa más que uno cuadrado, y está bien que así sea. */
.mv-marquesina img {
  width: auto;
  height: auto;
  max-height: 58px;
  max-width: 220px;
  object-fit: contain;
  flex: 0 0 auto;
  transition: transform .4s var(--mv-curva), filter .4s var(--mv-curva);

  /* Apenas atenuados para que ninguna marca grite más fuerte que otra. No es
     escala de grises: los colores están, sólo bajados un punto. */
  filter: saturate(.88) opacity(.9);
}

.mv-marquesina img:hover {
  filter: saturate(1) opacity(1);
  transform: translateY(-4px) scale(1.04);
}

/* Los seis logos en negativo —marca clara sobre fondo oscuro— conservan su
   propio fondo porque no se les puede quitar sin borrar la marca. Con las
   esquinas redondeadas leen como una placa a propósito y no como un recorte
   mal hecho. Están anotados para reemplazar. */
.mv-marquesina img { border-radius: var(--mv-radio); }

/* ---------------------------------------------------------------------------
   Tarjetas de curso

   Sin borde. La tarjeta es una superficie elevada sobre el papel, y al pasar
   por encima sube. Eso es profundidad; un rectángulo con borde de 1 px no lo
   es.
   --------------------------------------------------------------------------- */

.mv-cursos-grilla {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}

@media (min-width: 680px)  { .mv-cursos-grilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .mv-cursos-grilla { grid-template-columns: repeat(3, 1fr); } }

.mv-curso {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--campo-sup);
  border-radius: var(--mv-radio);
  overflow: hidden;
  box-shadow: var(--mv-sombra);
  transition: transform .45s var(--mv-curva), box-shadow .45s var(--mv-curva);
}

.mv-curso:hover {
  transform: translateY(-6px);
  box-shadow: var(--mv-sombra-2);
}

.mv-curso-foto {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--mv-papel-hondo);
}

.mv-curso-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--mv-curva);
}

.mv-curso:hover .mv-curso-foto img { transform: scale(1.06); }

.mv-curso-cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 26px 28px;
}

.mv-curso h3 {
  font-size: 1.25rem;
  line-height: 1.2;
  margin: 0;
}

.mv-curso h3 a { transition: color .25s var(--mv-curva); }
.mv-curso:hover h3 a { color: var(--mv-violeta); }

.mv-curso-resumen {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--campo-tenue);
}

/* `margin-top: auto` y no un número.

   El curso de NEUROPRODUCTIVIDAD tiene un título de 113 caracteres con
   comillas angulares. Con un margen fijo, su precio quedaba centímetros más
   abajo que el de las otras dos tarjetas de la fila. Con `auto`, el pie se
   apoya contra el fondo y los precios quedan en la misma línea sin importar
   cuánto texto haya arriba. */
.mv-curso-pie {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.mv-curso-precio {
  font-family: "Trirong", serif;
  font-size: 1.5rem;
  color: var(--campo-titulo);
  margin: 0;
  line-height: 1;
}

.mv-curso-pie .mv-boton--linea {
  padding: 11px 20px;
  font-size: 13px;
}

/* ---------------------------------------------------------------------------
   Portadilla de las páginas internas

   Campo oscuro, corta. Las tres páginas que hoy no tienen ningún `h1`
   —Servicios, Sobre Nosotros y RSE, el hallazgo número dos del informe— lo
   reciben acá.
   --------------------------------------------------------------------------- */

.mv-portadilla {
  position: relative;
  overflow: hidden;
  background: var(--mv-noche);
  color: var(--mv-luz-media);
  --campo-acento: var(--mv-bronce-luz);
  --campo-titulo: var(--mv-luz);
  padding: calc(var(--mv-cabecera) + clamp(44px, 7vw, 110px)) 0 clamp(64px, 8vw, 110px);
  margin-top: calc(-1 * var(--mv-cabecera));
}

.mv-portadilla > .mv-ancho { position: relative; z-index: 2; }

.mv-portadilla .mv-volanta { color: var(--mv-bronce-luz); }
.mv-portadilla h1 { color: var(--mv-luz); }

.mv-portadilla-bajada {
  margin: 24px 0 0;
  color: var(--mv-luz-media);
  max-width: 52ch;
  font-size: clamp(1rem, .94rem + .35vw, 1.25rem);
}

/* ---------------------------------------------------------------------------
   Prosa

   `max-width: 66ch` no es a ojo. Una línea deja de leerse cómoda pasados los
   setenta y pico de caracteres: el ojo pierde el renglón al volver a la
   izquierda. Sin tope, el texto de Sobre Nosotros queda en líneas de 140.
   --------------------------------------------------------------------------- */

.mv-prosa {
  max-width: 66ch;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  line-height: 1.75;
  color: var(--campo-texto);
}

.mv-prosa > * + * { margin-top: 1.3em; }
.mv-prosa p { margin: 0; }

/* La primera línea más grande. Da una entrada al texto en vez de arrancar en
   seco, y cuesta una regla. */
.mv-prosa > p:first-child {
  font-size: 1.2em;
  line-height: 1.55;
  color: var(--campo-titulo);
}

.mv-prosa a {
  color: var(--campo-acento);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Servicios

   Seis títulos sin descripción: así están en el sitio. El número grande
   ordena la lectura y pesa cero bytes — un ícono genérico para «Reclutamiento
   y Selección de Personal» no dice nada y además es un archivo más.

   Acá los números **sí** corresponden: la página es una lista enumerada de
   servicios, y el orden es el que eligió la clienta.
   --------------------------------------------------------------------------- */

.mv-tarjetas {
  display: grid;
  gap: 2px;
  background: var(--mv-papel-hondo);
}

@media (min-width: 680px)  { .mv-tarjetas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .mv-tarjetas { grid-template-columns: repeat(3, 1fr); } }

/* La separación de 2 px se hace con `gap` sobre un fondo del color de la
   línea. Así nunca hay líneas dobles en los cruces ni un borde suelto al
   final de la fila, que es lo que pasa cuando cada tarjeta dibuja el suyo. */
.mv-tarjeta {
  position: relative;
  background: var(--mv-papel);
  padding: 40px 32px 44px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background .4s var(--mv-curva);
  overflow: hidden;
}

.mv-tarjeta:hover { background: #fff; }

/* La barra de acento que sube desde abajo al pasar por encima. */
.mv-tarjeta::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--mv-violeta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--mv-curva);
}

.mv-tarjeta:hover::after { transform: scaleX(1); }

.mv-tarjeta-numero {
  font-family: "Trirong", serif;
  font-size: 2.75rem;
  line-height: 1;
  color: var(--mv-violeta);
  opacity: .22;
  transition: opacity .4s var(--mv-curva);
}

.mv-tarjeta:hover .mv-tarjeta-numero { opacity: .5; }

.mv-tarjeta h2 {
  font-size: 1.3125rem;
  line-height: 1.25;
  color: var(--mv-tinta);
}

.mv-tarjeta p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--mv-tinta-tenue);
}

.mv-cierre {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 64px;
}

/* ---------------------------------------------------------------------------
   Sobre Nosotros

   Dieciocho renglones largos uno abajo del otro no los lee nadie. La
   respuesta no es recortar la lista —eso ya lo hice una vez, dejé seis
   elegidas por mí, y es el error que más caro salió de todo el proyecto— sino
   que se lea.
   --------------------------------------------------------------------------- */

.mv-ficha {
  display: grid;
  gap: 48px;
  align-items: start;
}

@media (min-width: 1024px) {
  .mv-ficha { grid-template-columns: 420px 1fr; gap: 72px; }

  /* Sin foto no hay primera columna: el texto arranca donde arranca todo. */
  .mv-ficha--sin-foto { grid-template-columns: minmax(0, 760px); }
}

/* El retrato sangra al borde izquierdo, igual que la foto del hero sangra al
   derecho. Es el mismo gesto y repetirlo hace sistema. */
.mv-ficha-foto {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--mv-radio);
  box-shadow: var(--mv-sombra-2);
}

@media (min-width: 1024px) {
  .mv-ficha-foto {
    margin-left: calc(-1 * max(0px, (100vw - var(--mv-ancho)) / 2) - 40px);
    border-radius: 0 var(--mv-radio) var(--mv-radio) 0;
    position: sticky;
    top: 110px;
  }
}

.mv-ficha-foto img { width: 100%; height: 100%; object-fit: cover; }

.mv-credenciales {
  list-style: none;
  counter-reset: credencial;
  margin: 0;
  padding: 0;
}

.mv-credenciales li {
  counter-increment: credencial;
  position: relative;
  padding: 20px 0 20px 56px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--campo-texto);
  transition: color .3s var(--mv-curva);
}

/* Una hairline sólo entre ítems, no alrededor. La diferencia con la versión
   anterior es que acá la línea separa; antes encerraba. */
.mv-credenciales li + li { box-shadow: 0 -1px 0 rgba(192, 138, 78, .18); }

.mv-credenciales li:hover { color: var(--campo-titulo); }

/* El número lo dibuja el contador del `ol`, no está escrito en el HTML: si
   ella borra la quinta desde el panel, las de abajo se renumeran solas. */
.mv-credenciales li::before {
  content: counter(credencial, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 21px;
  font-family: "Trirong", serif;
  font-size: .9375rem;
  color: var(--campo-acento);
  opacity: .6;
}

/* ---------------------------------------------------------------------------
   Responsabilidad Social

   El título de la segunda alianza termina en «colaboramos en cursos gratuitos
   de» y **la frase sigue en la lista de abajo**. Es una sola oración partida
   en dos elementos de HTML.

   Por eso el margen entre el título y la lista es chico: con el aire que
   normalmente separa un encabezado de su contenido, se lee como si faltara
   algo en el medio.
   --------------------------------------------------------------------------- */

.mv-alianzas { display: grid; gap: 28px; }

@media (min-width: 900px) { .mv-alianzas { grid-template-columns: repeat(2, 1fr); gap: 32px; } }

.mv-alianza {
  background: var(--campo-sup);
  border-radius: var(--mv-radio);
  padding: 40px 34px;
  box-shadow: var(--mv-sombra);
  transition: transform .4s var(--mv-curva), box-shadow .4s var(--mv-curva);
}

.mv-alianza:hover { transform: translateY(-4px); box-shadow: var(--mv-sombra-2); }

.mv-alianza-logo {
  height: 60px;
  width: auto;
  object-fit: contain;
  margin-bottom: 24px;
}

.mv-alianza h2 {
  font-size: 1.1875rem;
  line-height: 1.4;
  margin: 0 0 12px;   /* chico, a propósito: la frase sigue en la lista */
}

.mv-alianza ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.mv-alianza li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--campo-tenue);
}

.mv-alianza li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 12px;
  height: 1px;
  background: var(--campo-acento);
}

/* ---------------------------------------------------------------------------
   Contacto

   Cada dato es un enlace que funciona de un toque. Hoy son texto plano: desde
   un celular hay que copiar trece dígitos a mano para escribir por WhatsApp.

   La tarjeta entera es el área clicable, no sólo el número. En un teléfono,
   apuntarle a trece dígitos de 14 px es la diferencia entre que te escriban y
   que no.
   --------------------------------------------------------------------------- */

.mv-contactos { display: grid; gap: 2px; background: rgba(192, 138, 78, .2); }

@media (min-width: 680px) { .mv-contactos { grid-template-columns: repeat(2, 1fr); } }

.mv-contacto {
  position: relative;
  background: var(--mv-noche);
  padding: 36px 32px;
  display: grid;
  gap: 8px;
  color: inherit;
  overflow: hidden;
  transition: background .4s var(--mv-curva);
}

.mv-contacto:hover { background: var(--mv-noche-alta); }

.mv-contacto-que {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--mv-bronce-luz);
}

.mv-contacto-dato {
  font-family: "Trirong", serif;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.75rem);
  line-height: 1.2;
  color: var(--mv-luz);
  overflow-wrap: anywhere;   /* un correo largo no desborda a 390 px */
}

.mv-contacto-nota { font-size: 14px; color: var(--mv-luz-tenue); }

/* La flecha que asoma al pasar por encima. */
.mv-contacto::after {
  content: "→";
  position: absolute;
  right: 28px;
  top: 34px;
  color: var(--mv-bronce-luz);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .35s var(--mv-curva), transform .35s var(--mv-curva);
}

.mv-contacto:hover::after { opacity: 1; transform: translateX(0); }

/* ---------------------------------------------------------------------------
   Pie
   --------------------------------------------------------------------------- */

/* ── El pie, en el mismo gris que la seccion de marcas ─────────────────────

   Paso por tres estados en una tarde y vale anotar por que.

   Era vino casi negro. Se pidio grafito y quedo oscuro —#343B4A—. Y despues,
   mirandolo entero: el sitio ya se habia aclarado, y terminar en un bloque
   oscuro cortaba la pagina justo al final, como si se apagara.

   Ahora toma el mismo papel hondo que la franja de clientes. La pagina cierra
   donde empieza: mismo gris, mismo peso, sin un escalon de luz al final.

   Eso obliga a dar vuelta todos los textos del pie: lo que era crema sobre
   oscuro ahora es tinta sobre claro. Estan abajo, uno por uno. */
.mv-pie {
  background: var(--mv-papel-hondo);
  color: var(--mv-tinta-media);
  position: relative;
}

/* La linea de arriba, ahora un trazo de la propia linea del sitio. */
.mv-pie::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(31, 36, 48, .14) 50%, transparent);
}

/* `padding-block`, no la forma corta `padding`.

   Acá decía `padding: 80px 0 56px`. El `0` del medio son los costados, y la
   forma corta reescribe los cuatro lados: borraba el `padding-inline: 22px`
   que trae `.mv-ancho`, que es la otra clase de este mismo div. Las cuatro
   columnas del pie —Contacto, Links, Materiales, Institucional— arrancaban
   pegadas al borde de la pantalla, en x=0.

   En escritorio no se notaba, porque la grilla llega antes al ancho maximo y
   el margen automatico la separa igual. En el celular no hay margen que
   sobre, y el texto tocaba el vidrio.

   No se le vuelve a poner un `0`: el valor horizontal lo manda `.mv-ancho`,
   que es quien sabe cuanto aire lleva el sitio en cada tamano. */
.mv-pie-grilla { display: grid; gap: 44px; padding-block: 80px 56px; }

/* La frase de la marca, debajo del logo.

   Tenia el color escrito a mano en el HTML —`rgba(255,255,255,.7)`— de cuando
   el pie era oscuro. Al pasarlo a gris claro quedo blanco sobre casi blanco:
   1,09:1, invisible. Un color escrito en un atributo `style` no se entera de
   que cambio la paleta; por eso ahora es una clase y lee la variable. */
.mv-pie-frase {
  margin-top: 16px;
  max-width: 20rem;
  font-size: 14px;
  color: var(--mv-tinta-media);
}

@media (min-width: 640px) { .mv-pie-grilla { grid-template-columns: repeat(2, 1fr); } }

/* Cinco columnas para cinco bloques: marca · Contacto · Links · Materiales ·
   Institucional.

   La cuenta tiene que cerrar exacta. Antes la marca ocupaba dos columnas, así
   que los bloques pedían seis lugares en una grilla de cinco y el último se
   caía a otra fila, dejando un hueco del alto de toda la columna. */
@media (min-width: 1024px) {
  .mv-pie-grilla { grid-template-columns: 1.7fr 1.2fr .8fr .8fr 1fr; }
}

/* Los titulos de columna iban en bronce. Sobre el violeta profundo de antes
   funcionaban; sobre el grafito nuevo daban 3,74:1 a 11 px, por debajo del
   minimo. Y ademas el bronce al lado del gris tecnico se veia desubicado.

   Van en crema. Medido sobre el grafito: 9,6:1. */
.mv-pie h2 {
  font-family: "Raleway", sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--mv-tinta-tenue);
  margin: 0 0 20px;
}

.mv-pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.mv-pie a {
  color: var(--mv-tinta);
  font-size: 14.5px;
  transition: color .25s var(--mv-curva);
}

.mv-pie a:hover { color: var(--mv-violeta); }

/* El zócalo deja lugar para el botón del asistente, que es `fixed` abajo a la
   derecha y ahí tapaba «Instagram». No se mueve el botón: su lugar es ése. Se
   le hace sitio al pie. */
.mv-pie-zocalo {
  border-top: 1px solid rgba(31, 36, 48, .12);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  padding: 24px 22px 100px;
  font-size: 13px;
  color: var(--mv-tinta-tenue);
  max-width: var(--mv-ancho);
  margin-inline: auto;
}

@media (min-width: 1024px) { .mv-pie-zocalo { padding-inline: 40px; } }

/* ---------------------------------------------------------------------------
   Menú del celular

   Faltaba por completo: los enlaces se escondían abajo de 1100 px y no los
   reemplazaba nada. En un teléfono el sitio quedaba con el logo, un botón y
   cero navegación — y más de la mitad de la gente entra desde el teléfono.

   Va con `details`/`summary`, que ya sabe abrirse, responder al teclado y
   anunciarse como «contraído/expandido». Cero JavaScript para algo que
   normalmente lleva treinta líneas y se rompe.
   --------------------------------------------------------------------------- */

/* ── Lo que empuja la barra hacia la derecha ───────────────────────────────

   La fila es `display: flex` y ocupa todo el ancho, pero abajo de 1100 px el
   menú de escritorio está oculto y nadie reclamaba el espacio sobrante: logo,
   botón y hamburguesa quedaban amontonados contra el borde izquierdo y el
   resto era campo violeta vacío. Medido a 1024 px: el contenido terminaba en
   397 y sobraban 627 px de nada.

   El `margin-left: auto` de más arriba existía justo para eso, y esta misma
   regla —escrita después— lo pisaba con `4px`. Mientras el botón estuvo
   visible el desbalance se disimulaba a medias; al ocultarlo abajo de 480 px
   quedó a la vista en el celular.

   Ahora el `auto` vive en el botón, que es el primer elemento después del
   logo. Abajo de 480 px el botón no se muestra —y lo que está en
   `display: none` no empuja nada—, así que ahí el `auto` pasa a la
   hamburguesa.

   Acotado a menos de 1100 px a propósito: de ahí para arriba el menú de
   escritorio se muestra y el reparto de la fila es otro. */
@media (max-width: 1099px) {
  .mv-cabecera-fila .mv-boton--destacado { margin-left: auto; }
}

.mv-menu-movil { position: relative; margin-left: 4px; }

@media (min-width: 1100px) { .mv-menu-movil { display: none; } }

.mv-menu-movil summary::-webkit-details-marker { display: none; }

.mv-menu-movil summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  border-radius: 999px;
  background: rgba(244, 237, 228, .08);
  transition: background .3s var(--mv-curva);
}

.mv-menu-movil summary:hover { background: rgba(244, 237, 228, .16); }

/* Tres rayas dibujadas con bordes: sin imagen, sin fuente de íconos, sin SVG. */
.mv-menu-movil summary span {
  position: relative;
  width: 18px;
  height: 1.5px;
  background: var(--mv-luz);
  transition: background .25s var(--mv-curva);
}

.mv-menu-movil summary span::before,
.mv-menu-movil summary span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 1.5px;
  background: var(--mv-luz);
  transition: transform .3s var(--mv-curva);
}

.mv-menu-movil summary span::before { top: -6px; }
.mv-menu-movil summary span::after  { top: 6px; }

.mv-menu-movil[open] summary span { background: transparent; }
.mv-menu-movil[open] summary span::before { transform: translateY(6px) rotate(45deg); }
.mv-menu-movil[open] summary span::after  { transform: translateY(-6px) rotate(-45deg); }

.mv-menu-movil nav {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  z-index: 60;
  min-width: 244px;
  /* Anclado con `right: 0` al borde de la hamburguesa, en una pantalla de 320
     el panel arrancaba en -57 y las primeras letras de cada entrada quedaban
     fuera de la pantalla. El `min-width` manda sobre el ancho disponible, así
     que el tope tiene que ser explícito. */
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: var(--mv-noche-alta);
  border-radius: var(--mv-radio);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.mv-menu-movil nav a {
  padding: 13px 16px;
  font-size: 15px;
  color: var(--mv-luz-media);
  border-radius: var(--mv-radio);
  transition: background .25s var(--mv-curva), color .25s var(--mv-curva);
}

.mv-menu-movil nav a:hover,
.mv-menu-movil nav a:focus-visible {
  background: rgba(192, 138, 78, .14);
  color: var(--mv-luz);
}

/* ---------------------------------------------------------------------------
   Sólo para lectores de pantalla

   El «Saltar al contenido» usa `screen-reader-text`, que es la clase de
   siempre de WordPress — pero la define **cada tema**, no el núcleo.
   Apoyarse en que la traiga el padre significa que el día que TutorStarter la
   cambie, el enlace aparece escrito arriba a la izquierda de todas las
   páginas. Lo vi pasar en la vista previa.
   --------------------------------------------------------------------------- */

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 999;
  width: auto;
  height: auto;
  margin: 0;
  padding: 14px 22px;
  clip-path: none;
  background: var(--mv-bronce-luz);
  color: var(--mv-noche);
  border-radius: 999px;
  font-weight: 600;
}

/* ===========================================================================
   EL AULA, EL CURSO Y EL ESCRITORIO
   ===========================================================================

   Las pantallas del curso, la clase, el cuestionario y el escritorio las
   dibuja **Tutor LMS**, con sus propias plantillas, desde el plugin. Un tema
   las puede pisar poniendo una carpeta `tutor/` adentro.

   **Acá no se pisa ninguna**, y el aula igual queda con la estética nueva.

   Tutor expone **328 variables CSS** y todo su diseño está construido sobre
   ellas. Pisando un puñado desde acá cambia el aula entera.

   La diferencia entre las dos formas no es de estilo:

     · Copiando plantillas, hay que mantenerlas. El día que Tutor se
       actualice, las copias quedan viejas y el aula empieza a fallar de a
       pedazos. Y ahí adentro están los 22 alumnos que pagaron.

     · Pisando variables, Tutor se actualiza solo y se sigue viendo nuestro.
       Si algo no gusta, se borra este bloque y vuelve el aula original.

   El aula va en **campo claro**: ahí se estudia y se leen temarios largos.
   Lo oscuro es para seducir, no para cursar dos horas.
   =========================================================================== */

/* ── El campo claro, que faltaba ───────────────────────────────────────────

   Acá arriba está escrito «el aula va en **campo claro**», y abajo están
   todas las variables de Tutor puestas para fondo claro: tinta `#230101`,
   bordes `#E8DFD3`, grises `#7A6A6A`.

   **El campo claro nunca se pintó.** El `body` del sitio arranca en
   `--mv-noche` —y eso está bien, porque el hero de la portada es oscuro— pero
   ninguna regla lo volvía claro en las páginas de Tutor. Medido en la ficha
   de un curso:

       fondo del body        rgb(74, 47, 104)     ← casi negro
       título del curso      rgb(0, 0, 0)        ← negro puro
       párrafos              rgb(87, 88, 110)    ← gris oscuro

   Negro sobre negro. El texto estaba ahí, se podía seleccionar, y no se leía.

   Dos cosas lo taparon: la ficha de curso la arma **Elementor** con widgets
   de Tutor adentro, así que no pasa por ninguna plantilla mía; y yo la revisé
   sobre la portada, que sí es oscura a propósito.

   ── Por qué claro y no tinta clara ──────────────────────────────────────

   Se podía hacer al revés: dejar el fondo oscuro y aclarar cada texto. Pero
   son 328 variables más los colores que Tutor escribe a mano en su CSS
   minificado. Cada una que se escape vuelve a ser negro sobre negro, y el que
   la encuentra es un alumno que ya pagó.

   Pintar el campo de claro es **una sola decisión** y deja a Tutor en el
   terreno para el que fue hecho. Además corresponde: en estas páginas se lee
   un temario largo y se estudia. Lo oscuro es para seducir en la portada, no
   para cursar dos horas.
   ------------------------------------------------------------------------- */

body.single-courses,
body.single-lesson,
body.single-tutor_quiz,
body.single-tutor_assignments,
body.post-type-archive-courses,
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account,
body.tutor-dashboard-page {
  background: var(--mv-papel);
  color: var(--mv-tinta);
}

/* ── Y la cabecera deja de ser transparente ────────────────────────────────

   La barra de arriba nace transparente y recién se pinta de oscuro al
   scrollear (`[data-encogida="1"]`). Sobre el hero de la portada eso es lo
   que se quiere: la foto sube por detrás del menú.

   Sobre campo claro es un desastre: el logo crema y el menú crema quedan
   crema sobre crema. **Invisibles.** Es el mismo error de antes, una capa más
   arriba — lo vi al arreglar el texto y mirar la captura de nuevo.

   Acá nace pintada. Sin transición, porque no hay nada a lo que transicionar:
   es su estado desde el primer cuadro. */
body.single-courses .mv-cabecera,
body.single-lesson .mv-cabecera,
body.single-tutor_quiz .mv-cabecera,
body.single-tutor_assignments .mv-cabecera,
body.post-type-archive-courses .mv-cabecera,
body.woocommerce-cart .mv-cabecera,
body.woocommerce-checkout .mv-cabecera,
body.woocommerce-account .mv-cabecera,
body.tutor-dashboard-page .mv-cabecera {
  background: var(--mv-noche);
  box-shadow: 0 1px 0 rgba(192, 138, 78, .2);
}

/* El título de carrito, checkout y mi cuenta: ver `macval_titulo_de_tienda()`. */
.mv-encabezado--tienda {
  padding: 48px 0 8px;
  max-width: 1060px;
  margin: 0 auto;
}

.mv-encabezado--tienda .mv-titulo-pagina {
  font-family: "Trirong", Georgia, serif;
  font-weight: 400;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--mv-tinta);
  margin: 0;
}

/* El contenido también: Elementor y Tutor pintan sus propios contenedores. */
body.single-courses main,
body.single-lesson main,
body.single-tutor_quiz main,
body.single-tutor_assignments main,
body.post-type-archive-courses main,
body.woocommerce-cart main,
body.woocommerce-checkout main,
body.woocommerce-account main {
  background: var(--mv-papel);
  padding-bottom: 72px;
}

/* ── La entrada, también acá ───────────────────────────────────────────────

   La ficha de curso no pasa por ninguna plantilla del tema, así que no se le
   pueden poner las clases `mv-entra` a mano. Se anima el contenedor entero
   desde CSS: un solo gesto, el mismo de la portada.

   Va sobre `main` y no sobre cada widget: animar quince cajas de Elementor
   por separado es pedirle al navegador quince capas de composición para que
   se note menos. */
body.single-courses main,
body.single-lesson main,
body.post-type-archive-courses main {
  animation: mv-entrar .72s var(--mv-curva) both;
  animation-delay: 100ms;
}

:root,
.tutor-wrap,
.tutor-course-single-wrapper,
.tutor-dashboard,
body.tutor-lms {
  --tutor-color-primary: #8450AC;
  --tutor-color-primary-rgb: 132, 80, 172;
  --tutor-color-primary-hover: #6B3B91;
  --tutor-color-primary-50: #F4EEFA;

  --tutor-body-color: #1F2430;
  --tutor-body-color-rgb: 31, 36, 48;
  --tutor-color-secondary: #4A5160;
  --tutor-color-muted: #6E7686;
  --tutor-color-subdued: #59616F;

  --tutor-border-color: #E3E5EC;
  --tutor-border-idle: #E3E5EC;
  --tutor-border-hover: #8450AC;
  --tutor-border-brand: #8450AC;

  --tutor-actions-brand-primary: #8450AC;
  --tutor-actions-brand-secondary: #6B3B91;

  /* El radio en 3 px, igual que el resto del sitio. Tutor usa 6. Dos píxeles
     suenan a nada y son exactamente lo que hace que el aula se sienta «otra
     página»: el ojo registra la esquina antes que el color. */
  --tutor-border-radius-6: 3px;
  --tutor-border-radius-10: 3px;

  --tutor-body-font-family: "Raleway", system-ui, sans-serif;
  --tutor-heading-font-family: "Trirong", Georgia, serif;
}

/* `!important` no es pereza: las reglas de Tutor vienen con especificidad
   alta desde un archivo minificado que no conviene tocar. */
.tutor-wrap,
.tutor-wrap button,
.tutor-wrap input,
.tutor-wrap select,
.tutor-wrap textarea,
.tutor-dashboard,
.tutor-course-topics-wrap {
  font-family: "Raleway", system-ui, sans-serif !important;
}

.tutor-wrap h1,
.tutor-wrap h2,
.tutor-wrap h3,
.tutor-course-details-title,
.tutor-dashboard h1,
.tutor-dashboard h2 {
  font-family: "Trirong", Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -.02em;
}

.tutor-btn-primary,
.tutor-btn.tutor-btn-primary {
  border-radius: 999px !important;
  font-weight: 600;
  letter-spacing: .02em;
}

/* ── El botón rosa ─────────────────────────────────────────────────────────

   El botón de inscripción del curso sin costo salía en **rosa #FF0F7F**, que
   no está en el manual de marca ni se parece a nada del sitio. Contraste
   medido con el texto blanco encima: **3,73:1** — no llega al mínimo.

   No viene de Tutor. Viene de `post-7547.css`, que es el CSS que genera
   Elementor para la plantilla de ficha de curso: alguien le puso ese color a
   mano a ese widget cuando se armó el sitio original. El selector es

       .elementor-7547 .elementor-element-63a38c76 .tutor-enrol-course-form …

   O sea: un color pegado a un identificador de widget. Si mañana se rehace
   esa plantilla, el identificador cambia y el rosa desaparece solo — pero
   mientras tanto gana por especificidad.

   Por eso acá va `!important`: la regla de Elementor no lo lleva, así que
   alcanza para ganarle sin inventar una cadena de selectores más larga que la
   suya, que envejecería peor.

   Se corrige desde acá y no en Elementor a propósito: entrar a Elementor a
   cambiar un color es exactamente lo que este trabajo existe para evitar, y
   deja el arreglo fuera de las dos carpetas que se entregan. */
.tutor-enroll-course-button,
.tutor-enrol-course-form .tutor-btn-primary,
.tutor-course-entry-box .tutor-btn-primary {
  background-color: var(--mv-violeta) !important;
  border-color: var(--mv-violeta) !important;
  color: #fff !important;
}

.tutor-enroll-course-button:hover,
.tutor-enrol-course-form .tutor-btn-primary:hover,
.tutor-course-entry-box .tutor-btn-primary:hover {
  background-color: #4E2766 !important;
  border-color: #4E2766 !important;
}

/* ── El gris de Tutor que no llega al mínimo ───────────────────────────────

   Tutor escribe `#757C8E` a mano en su CSS minificado para los textos
   secundarios: «Ver más», la duración de cada clase, las etiquetas. Sobre el
   papel de la marca da **3,94:1**, y el mínimo para texto chico es 4,5:1.

   Son dos décimas de nada hasta que lo lee alguien con la vista cansada en un
   celular al sol. Se baja a `--mv-tinta-media`, que es el gris de la marca y
   da 7:1 largo. */
.tutor-toggle-btn-text,
.tutor-btn-show-more,
.tutor-color-muted,
.tutor-color-secondary,
.tutor-meta,
.tutor-meta-value,
.tutor-course-topic-item .tutor-fs-7 {
  color: var(--mv-tinta-media) !important;
}

/* ===========================================================================
   LOS COLORES QUE QUEDARON CABLEADOS EN LA PLANTILLA DE ELEMENTOR
   ===========================================================================

   La regla de arriba no alcanzaba, y averiguar por qué dejó ver algo más
   grande. Listando las reglas que le ganan a la duración de cada clase
   aparece esto, todo en `post-7547.css` —el CSS que genera Elementor para la
   plantilla de ficha de curso—:

       .elementor-element-7dd793c8 .tutor-list-icon        → rgb(255, 101, 195)   rosa
       .elementor-element-3386f5f0 …-header::after         → rgb(255, 101, 195)   rosa
       .elementor-element-3386f5f0 …-header.is-active      → rgb(23, 92, 255)     azul
       .elementor-element-3386f5f0 …-list-item-icon        → rgb(188, 151, 194)   lila
       .elementor-element-…        …-list-item-duration    → rgb(117, 124, 142)   gris
       .elementor-element-63a38c76 .tutor-enrol-course-form → rgb(255, 15, 127)   rosa

   Rosa, azul y lila. **Ninguno está en el manual de marca.** Son colores que
   quedaron cargados a mano en los widgets cuando se armó el sitio original, y
   por eso la ficha de curso nunca se iba a ver como el resto por más que yo
   pisara las variables de Tutor: estos no son variables, son colores
   escritos adentro de la plantilla.

   ── Por qué se gana por especificidad y no por ids ────────────────────────

   Las reglas de Elementor llevan `!important`, así que el mío solo no
   alcanza: entre dos `!important` gana el más específico. Las suyas valen
   (0,4,0) —tres clases de Elementor más una de Tutor—.

   Se podría copiar su cadena con el id del widget, `elementor-element-3386f5f0`.
   Sería lo más corto y lo peor: ese id lo inventa Elementor y cambia el día
   que alguien rehaga la plantilla. El arreglo se caería sin aviso.

   Acá se usa una cadena que **no nombra ningún widget**: `html`, el `body` de
   la página, el contenedor de Elementor y el elemento. Vale (0,4,2) y le gana
   a cualquier regla de widget, se llame como se llame.
   =========================================================================== */

/* El acento: rosa y lila pasan a ser el violeta de la marca. */
html body.single-courses .elementor .elementor-element .tutor-list-icon,
html body.single-courses .elementor .elementor-element .tutor-course-content-list-item-icon,
html body.single-courses .elementor .elementor-element .tutor-accordion-item-header::after,
html body.single-courses .elementor .elementor-element .tutor-accordion-item-header.is-active {
  color: var(--mv-violeta) !important;
}

/* ── Los textos secundarios ────────────────────────────────────────────────

   Estos llevan un eslabón más que los de arriba, y no por gusto. La regla de
   Elementor para la duración de cada clase es:

       .elementor-7547 .elementor-element.elementor-element-3386f5f0
       .tutor-course-content-list-item div .tutor-color-muted   !important

   Son **cinco clases y un elemento**: (0,5,1). Mi cadena de (0,4,2) perdía
   por una clase, y el gris seguía ahí después de «arreglarlo». Agregando
   `.elementor-widget-container` —que es un contenedor real de Elementor, no
   un id de widget— queda en (0,5,2) y gana.

   Lo cuento porque es el detalle que hace que esto funcione o no, y no se ve
   mirando el CSS: hay que contar la especificidad de las dos. */
html body.single-courses .elementor .elementor-element .elementor-widget-container .tutor-color-muted,
html body.single-courses .elementor .elementor-element .elementor-widget-container .tutor-course-content-list-item-duration,
html body.single-courses .elementor .elementor-element .elementor-widget-container .tutor-meta-value,
html body.single-courses .elementor .elementor-element .elementor-widget-container .tutor-toggle-btn-text {
  color: var(--mv-tinta-media) !important;
}

/* Y los títulos del temario, en la tinta de la marca en vez de un negro suelto. */
html body.single-courses .elementor .elementor-element .tutor-accordion-item-header,
html body.single-courses .elementor .elementor-element .tutor-course-content-list-item-title {
  color: var(--mv-tinta) !important;
}

html body.single-courses .elementor .elementor-element .tutor-enrol-course-form .tutor-btn-primary {
  background-color: var(--mv-violeta) !important;
  border-color: var(--mv-violeta) !important;
}

.tutor-progress-bar .tutor-progress-value,
.tutor-progress-filled {
  background: linear-gradient(90deg, var(--mv-violeta), var(--mv-cafe)) !important;
}

.tutor-course-topic-item { border-bottom: 1px solid var(--mv-papel-hondo); }

.tutor-course-topic-item.is-active,
.tutor-course-topic-item.active {
  border-left: 2px solid var(--mv-violeta);
  background: #F3EDF7;
}

/* ===========================================================================
   EL ASISTENTE
   ===========================================================================

   Abajo a la derecha. Chico y quieto: no salta, no hace ruido y no se abre
   solo. Un asistente que se abre solo arriba del contenido es un cartel de
   publicidad con otra cara.
   =========================================================================== */

.mv-asistente-boton {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px 8px 8px;
  background: var(--mv-noche-alta);
  border: 1px solid rgba(192, 138, 78, .3);
  border-radius: 999px;
  box-shadow: 0 10px 34px rgba(74, 47, 104, .4);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--mv-luz);
  cursor: pointer;
  transition: transform .35s var(--mv-curva), box-shadow .35s var(--mv-curva);
}

.mv-asistente-boton:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 42px rgba(74, 47, 104, .5);
}

.mv-asistente-boton img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 999px;
  background: var(--mv-luz);
  padding: 4px;
}

.mv-asistente {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 61;
  width: min(390px, calc(100vw - 32px));
  max-height: min(580px, calc(100vh - 44px));
  display: flex;
  flex-direction: column;
  background: var(--mv-papel);
  border-radius: 10px;
  box-shadow: 0 28px 80px rgba(74, 47, 104, .45);
  overflow: hidden;
}

.mv-asistente[hidden] { display: none; }

.mv-asistente-barra {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--mv-noche);
  color: var(--mv-luz);
}

.mv-asistente-barra img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  background: var(--mv-luz);
  border-radius: 999px;
  padding: 3px;
  flex: 0 0 auto;
}

.mv-asistente-barra strong { display: block; font-size: 14px; font-weight: 600; }

/* El renglón que avisa que es automático. Va chico pero va siempre: alguien
   que cree que está hablando con Natalia a las once de la noche se queda
   esperando una respuesta que no va a llegar. */
.mv-asistente-barra span {
  display: block;
  font-size: 11px;
  line-height: 1.35;
  color: var(--mv-luz-tenue);
}

.mv-asistente-barra button {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--mv-luz);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  opacity: .7;
}

.mv-asistente-barra button:hover { opacity: 1; }

.mv-asistente-charla {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mv-burbuja { display: flex; gap: 9px; align-items: flex-start; }
.mv-burbuja--yo { justify-content: flex-end; }

/* El logo al lado de cada respuesta. */
.mv-burbuja-cara {
  width: 30px;
  height: 30px;
  object-fit: contain;
  background: #fff;
  border-radius: 999px;
  padding: 3px;
  flex: 0 0 auto;
  box-shadow: var(--mv-sombra);
}

.mv-burbuja-cuerpo {
  max-width: 78%;
  padding: 12px 16px;
  background: #fff;
  border-radius: 12px 12px 12px 3px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--mv-tinta-media);
  box-shadow: var(--mv-sombra);
}

.mv-burbuja--yo .mv-burbuja-cuerpo {
  background: var(--mv-violeta);
  color: #fff;
  border-radius: 12px 12px 3px 12px;
}

.mv-burbuja-cuerpo p { margin: 0; }
.mv-burbuja-cuerpo p + p { margin-top: 9px; }

.mv-burbuja-acciones { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }

.mv-burbuja-acciones button,
.mv-burbuja-acciones a {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  border: 1px solid var(--mv-violeta);
  border-radius: 999px;
  background: transparent;
  color: var(--mv-violeta);
  cursor: pointer;
  text-decoration: none;
  transition: background .25s var(--mv-curva), color .25s var(--mv-curva);
}

.mv-burbuja-acciones button:hover,
.mv-burbuja-acciones a:hover { background: var(--mv-violeta); color: #fff; }

.mv-asistente-pie {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: #fff;
  box-shadow: 0 -1px 0 var(--mv-papel-hondo);
}

.mv-asistente-pie input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--mv-papel-hondo);
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  color: var(--mv-tinta);
}

.mv-asistente-pie button {
  padding: 11px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--mv-violeta);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.mv-asistente-pie button:hover { background: var(--mv-violeta-oscuro, #4E2766); }

/* En el celular ocupa casi toda la pantalla: una ventana de 390 px dentro de
   una pantalla de 390 deja márgenes de cinco píxeles que se ven como un
   error de maquetación. */
@media (max-width: 480px) {
  .mv-asistente {
    right: 8px; left: 8px; bottom: 8px;
    width: auto;
    max-height: calc(100vh - 16px);
  }
  .mv-asistente-boton span { display: none; }
  .mv-asistente-boton { padding: 8px; }
}

/* ---------------------------------------------------------------------------
   Mosaico de eventos

   No es una cuadrícula pareja: la primera foto ocupa el doble de ancho y de
   alto. Ocho rectángulos idénticos es lo que sale solo y lo que se ve en
   cualquier plantilla comprada; un mosaico con una pieza dominante da
   jerarquía y hace que el bloque se lea como una composición.

   El `grid-auto-flow: dense` es importante: sin él, cuando una pieza grande
   no entra en el hueco que queda, el navegador deja el agujero. Con `dense`
   reacomoda las chicas para taparlo.
   --------------------------------------------------------------------------- */

.mv-mosaico {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(150px, auto);
  grid-auto-flow: dense;
}

@media (min-width: 760px) {
  .mv-mosaico { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; }
  .mv-mosaico-pieza:first-child { grid-column: span 2; grid-row: span 2; }
}

.mv-mosaico-pieza {
  margin: 0;
  overflow: hidden;
  border-radius: var(--mv-radio);
  box-shadow: var(--mv-sombra);
  transition: box-shadow .45s var(--mv-curva), transform .45s var(--mv-curva);
}

.mv-mosaico-pieza:hover { transform: translateY(-4px); box-shadow: var(--mv-sombra-2); }

.mv-mosaico-pieza img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--mv-curva);
}

.mv-mosaico-pieza:hover img { transform: scale(1.07); }

/* ---------------------------------------------------------------------------
   LA ENTRADA AL CARGAR

   ── Por qué había desaparecido ─────────────────────────────────────────────

   El hero usaba `mv-revelar-izq`, que está atado al scroll con
   `animation-timeline: view()`. Esa animación corre cuando el elemento
   **entra** en la pantalla — pero el hero ya está en la pantalla al cargar,
   así que el navegador lo dibuja directo en su estado final y no se ve nada.

   Para lo que está arriba del pliegue hace falta una animación de **carga**,
   que es otra cosa: corre una vez, sola, al abrir la página.

   ── Cómo está armada ───────────────────────────────────────────────────────

   Un solo movimiento —subir 24 px y aparecer— repetido en cinco elementos con
   un retraso creciente. El orden es el de lectura: volanta, título, bajada,
   botones, dato.

   `--paso` lleva el número de orden y el retraso se calcula con `calc()`. Así
   agregar un elemento es ponerle `--paso:5` en el HTML, sin tocar el CSS.

   ── Los tiempos ────────────────────────────────────────────────────────────

   90 ms entre elemento y elemento, 760 ms cada uno. Lo suficiente para que se
   note la secuencia y poco para que nadie espere. Una entrada que tarda más
   de un segundo y medio deja de ser elegante y empieza a ser un peaje.
   --------------------------------------------------------------------------- */

@keyframes mv-entrar {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

.mv-entra {
  animation: mv-entrar .76s var(--mv-curva) both;
  animation-delay: calc(var(--paso, 0) * 90ms + 120ms);
}

/* ── La marca entra desde arriba ────────────────────────────────────────────

   El encabezado baja apenas. Es lo primero que se mueve y dura menos que el
   resto: da la sensación de que la página «se posa» y recién entonces se
   escribe el contenido. */
@keyframes mv-bajar-marca {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: none; }
}

.mv-cabecera-fila { animation: mv-bajar-marca .6s var(--mv-curva) both; }

/* ── Y después la barra se escribe sola, de izquierda a derecha ─────────────

   La fila bajaba entera, como un bloque. Funcionaba —se medía, corría, y
   terminaba en `finished`— pero no se notaba: todo aparecía junto, así que la
   única lectura posible era «la página ya estaba ahí».

   Ahora la fila se posa primero y recién entonces entran sus partes, en el
   orden en que se leen: el logo, el botón, y cada entrada del menú detrás.
   Es el mismo gesto que el hero, un beat después, y hace que la cabecera se
   sienta parte de la misma entrada en vez de un marco que ya estaba.

   ── Los tiempos ──────────────────────────────────────────────────────────

   La fila tarda 600 ms. El logo arranca a los 240 —no se espera a que termine,
   se monta encima— y cada pieza siguiente suma 70 ms. La última entrada del
   menú entra a los ~800 ms, casi junto con el botón del hero. Las dos mitades
   de la pantalla terminan de armarse a la vez.

   `nth-child` y no una variable por elemento: el menú lo arma WordPress y no
   hay dónde escribirle un `--paso` a cada `<a>` sin tocar el HTML del nav. */
@keyframes mv-asomar {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

.mv-logo,
.mv-cabecera-fila .mv-boton--destacado,
.mv-menu a {
  animation: mv-asomar .5s var(--mv-curva) both;
}

.mv-logo                               { animation-delay: 240ms; }
.mv-cabecera-fila .mv-boton--destacado { animation-delay: 310ms; }

.mv-menu a:nth-child(1) { animation-delay: 380ms; }
.mv-menu a:nth-child(2) { animation-delay: 450ms; }
.mv-menu a:nth-child(3) { animation-delay: 520ms; }
.mv-menu a:nth-child(4) { animation-delay: 590ms; }
.mv-menu a:nth-child(5) { animation-delay: 660ms; }
.mv-menu a:nth-child(6) { animation-delay: 730ms; }
.mv-menu a:nth-child(7) { animation-delay: 800ms; }

/* ── La foto se revela de abajo hacia arriba ────────────────────────────────

   `clip-path` en vez de opacidad: la imagen no aparece transparentándose,
   se **descubre**, como si alguien levantara una cortina. Es un gesto
   distinto al del texto y por eso las dos mitades del hero no se sienten la
   misma animación repetida.

   Va con un `scale` que cede: entra apenas más grande y se asienta. Ese
   detalle es lo que hace que lea como una cámara acomodándose y no como un
   elemento que se enciende. */
@keyframes mv-descubrir {
  from {
    clip-path: inset(0 0 100% 0);
    transform: scale(1.06);
  }
  to {
    clip-path: inset(0 0 0 0);
    transform: scale(1);
  }
}

.mv-hero-fotos { animation: mv-descubrir 1.15s var(--mv-curva) both; animation-delay: .1s; }

/* ── El trazo de bronce que cruza bajo la volanta ───────────────────────────

   El único momento del sitio donde el bronce de la marca se mueve solo. Se
   dibuja de izquierda a derecha y queda.

   Es el acento de color de la entrada: sin esto, la secuencia es correcta
   pero gris — todo sube y aparece, y nada dice de qué marca es. El bronce
   sobre violeta es la combinación del manual, y acá se usa en el único
   lugar donde el ojo ya está mirando. */
@keyframes mv-trazar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.mv-hero .mv-volanta {
  position: relative;
  padding-bottom: 16px;
}

.mv-hero .mv-volanta::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 112px;
  height: 1px;
  background: linear-gradient(90deg, var(--mv-bronce-luz), transparent);
  transform-origin: left;
  animation: mv-trazar .9s var(--mv-curva) both;
  animation-delay: .5s;
}

/*
   Nada de esto corre si la persona pidió menos movimiento. Y lo importante:
   todo queda **visible**, no a medio camino. Una animación cancelada que
   deja el contenido en opacidad cero es peor que no tener animación.
*/
@media (prefers-reduced-motion: reduce) {
  .mv-entra,
  .mv-cabecera-fila,
  .mv-logo,
  .mv-cabecera-fila .mv-boton--destacado,
  .mv-menu a,
  .mv-hero-fotos,
  .mv-hero .mv-volanta::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* Al imprimir tampoco: el papel no tiene secuencia de entrada. */
@media print {
  .mv-entra,
  .mv-cabecera-fila,
  .mv-logo,
  .mv-cabecera-fila .mv-boton--destacado,
  .mv-menu a,
  .mv-hero-fotos {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* ---------------------------------------------------------------------------
   PÁGINAS LEGALES

   Tablas de verdad para el inventario de cookies. Un `div` con clases se
   vería igual, pero esto es información tabulada: quien la lea con un lector
   de pantalla necesita que cada celda diga de qué columna es, y una tabla con
   encabezados lo hace sola.
   --------------------------------------------------------------------------- */

.mv-legal-grupo { margin-top: 56px; }

.mv-legal-grupo h2 {
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  color: var(--campo-titulo);
}

.mv-legal-que {
  margin: 10px 0 24px;
  max-width: 66ch;
  color: var(--campo-tenue);
  font-size: .9375rem;
  line-height: 1.65;
}

.mv-legal-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  background: var(--campo-sup);
  box-shadow: var(--mv-sombra);
  border-radius: var(--mv-radio);
  overflow: hidden;
}

.mv-legal-tabla th,
.mv-legal-tabla td {
  padding: 16px 18px;
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}

.mv-legal-tabla thead th {
  font-family: "Raleway", sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--campo-acento);
  background: var(--mv-papel-hondo);
}

.mv-legal-tabla tbody th {
  font-weight: 600;
  color: var(--campo-titulo);
  white-space: nowrap;
}

.mv-legal-tabla tbody td { color: var(--campo-tenue); }

.mv-legal-tabla tbody tr + tr th,
.mv-legal-tabla tbody tr + tr td { border-top: 1px solid var(--mv-papel-hondo); }

/*
   En el celular la tabla se convierte en fichas apiladas.

   Tres columnas en 390 px dejan palabras de una letra por renglón. Con
   `display: block` cada fila pasa a ser un bloque y cada dato va con su
   rótulo delante, que sale del atributo `data-rotulo`... salvo que acá no se
   usa: la primera celda es el nombre del servicio y las otras dos se
   entienden por el orden. Agregar rótulos repetidos en cada ficha sería más
   ruido que ayuda.
*/
@media (max-width: 680px) {
  .mv-legal-tabla,
  .mv-legal-tabla tbody,
  .mv-legal-tabla tr,
  .mv-legal-tabla td,
  .mv-legal-tabla tbody th { display: block; width: 100%; }

  .mv-legal-tabla thead { display: none; }

  .mv-legal-tabla tbody tr {
    padding: 18px;
    border-bottom: 1px solid var(--mv-papel-hondo);
  }

  .mv-legal-tabla tbody tr + tr th,
  .mv-legal-tabla tbody tr + tr td { border-top: 0; }

  .mv-legal-tabla th,
  .mv-legal-tabla td { padding: 0 0 6px; white-space: normal; }
}

.mv-pie-legales {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

/* ---------------------------------------------------------------------------
   El cartel de cookies

   Abajo a la izquierda, no a todo el ancho de la pantalla.

   Una barra que cruza el pie entero tapa la navegación y empuja al clic
   rápido para sacársela de encima. Un cartel acotado se puede leer sin que
   moleste, que es la única forma de que el consentimiento signifique algo.

   Y va a la **izquierda** porque abajo a la derecha está el asistente. Dos
   cosas flotando en el mismo rincón es cómo se tapan entre ellas.
   --------------------------------------------------------------------------- */

.mv-cookies {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 70;
  width: min(420px, calc(100vw - 44px));
  padding: 22px 24px;
  background: var(--mv-noche-alta);
  color: var(--mv-luz-media);
  border-radius: 10px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
  border: 1px solid rgba(192, 138, 78, .25);
}

.mv-cookies[hidden] { display: none; }

.mv-cookies h2 {
  font-family: "Trirong", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--mv-luz);
  margin: 0 0 8px;
}

.mv-cookies p {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.6;
}

.mv-cookies a {
  color: var(--mv-bronce-luz);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/*
   Los dos botones con el **mismo peso**.

   El patrón habitual es un «Aceptar todo» grande y en color contra un
   «rechazar» chiquito y gris. Eso está diseñado para que la gente acepte sin
   leer, y es justamente lo que las autoridades de protección de datos vienen
   marcando como consentimiento inválido.

   Acá los dos miden igual y están igual de a mano.
*/
.mv-cookies-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mv-cookies-botones .mv-boton {
  flex: 1 1 auto;
  justify-content: center;
  padding: 12px 18px;
  font-size: 13.5px;
}

.mv-cookies-botones .mv-boton--linea {
  color: var(--mv-luz);
  box-shadow: inset 0 0 0 1px rgba(244, 237, 228, .35);
}

.mv-cookies-botones .mv-boton--linea:hover {
  background: var(--mv-luz);
  color: var(--mv-noche);
}

@media (max-width: 560px) {
  .mv-cookies {
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
    padding: 18px 18px 20px;
  }

  /* Con el cartel abierto, el asistente estorba. Se esconde hasta que la
     persona decide, que es lo que corresponde: primero el consentimiento. */
  .mv-cookies:not([hidden]) ~ .mv-asistente-boton { display: none; }
}

/* ===========================================================================
   AJUSTES DE LA SEGUNDA PASADA
   ===========================================================================

   Cuatro cosas, todas salidas de mirar el sitio y de medirlo:

     1. Responsabilidad Social — los logos eran miniaturas con recuadro
     2. La marquesina — le faltaba profundidad detrás
     3. La barra superior — pisaba la foto
     4. Rendimiento — Chrome pedía demasiada memoria
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. RESPONSABILIDAD SOCIAL

   ── Qué estaba mal ─────────────────────────────────────────────────────────

   Los dos logos de las alianzas se dibujaban a 60 px de alto y con el fondo
   blanco del archivo adentro de una tarjeta color papel: un recuadro blanco
   flotando sobre crema, con el logo diminuto en el medio.

   Son dos organizaciones con las que la consultora trabaja de verdad y
   aparecían como un sello de dos centímetros.

   ── Qué se hizo ────────────────────────────────────────────────────────────

   Los archivos se recortaron a PNG con transparencia —el mismo relleno por
   inundación que se usó con los clientes— y acá pasan de 60 px a 130. La
   tarjeta se vuelve una composición: logo grande arriba, título, y la lista
   de lo que hacen juntos.
   --------------------------------------------------------------------------- */

.mv-alianza {
  position: relative;
  overflow: hidden;
  padding: 44px 40px 48px;
}

/*
   El halo que aparece detrás del logo al pasar por encima.

   Es el mismo gesto que los orbes del hero, en chico: un degradado radial que
   crece desde arriba a la izquierda. Da la sensación de que la tarjeta se
   enciende en vez de simplemente moverse.
*/
.mv-alianza::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -20%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(132, 80, 172, .14) 0%, transparent 68%);
  opacity: 0;
  transform: scale(.7);
  transition: opacity .6s var(--mv-curva), transform .6s var(--mv-curva);
  pointer-events: none;
}

.mv-alianza:hover::before { opacity: 1; transform: scale(1); }

.mv-alianza > * { position: relative; }

.mv-alianza-logo {
  height: clamp(86px, 11vw, 130px);
  width: auto;
  max-width: 78%;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 30px;
  transition: transform .55s var(--mv-curva);
}

.mv-alianza:hover .mv-alianza-logo { transform: scale(1.05) translateY(-3px); }

.mv-alianza h2 {
  font-size: clamp(1.1875rem, 1.05rem + .55vw, 1.5rem);
  line-height: 1.35;
}

/*
   Las actividades entran escalonadas cuando la tarjeta llega a la pantalla.

   El retraso lo da el índice de cada `li`, con `nth-child`: no hace falta
   tocar el HTML ni poner una variable por elemento.
*/
@supports (animation-timeline: view()) {
  .mv-alianza li {
    animation: mv-revelar linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 38%;
  }

  .mv-alianza li:nth-child(2) { animation-range: entry 4% cover 42%; }
  .mv-alianza li:nth-child(3) { animation-range: entry 8% cover 46%; }
}

/* La rayita del bullet crece al pasar por encima. Detalle chico, pero es lo
   que hace que la tarjeta se sienta viva y no impresa. */
.mv-alianza li::before { transition: width .4s var(--mv-curva), background .4s var(--mv-curva); }
.mv-alianza:hover li::before { width: 20px; background: var(--mv-violeta); }

/* ---------------------------------------------------------------------------
   2. LA MARQUESINA, CON LUZ EN SENTIDO CONTRARIO

   Las dos filas de logos corren en sentidos opuestos. Detrás, dos franjas de
   luz hacen lo mismo **al revés de la fila que tienen encima**: donde los
   logos van a la derecha, la luz va a la izquierda.

   Eso es lo que da profundidad. Si la luz acompañara el movimiento, el
   bloque entero se leería como una sola capa deslizándose; al cruzarse,
   aparecen dos planos.

   Son degradados moviéndose con `transform`, sin `filter` ni `blur`: el
   difuminado ya viene dentro del degradado y lo único que se anima va al
   compositor.
   --------------------------------------------------------------------------- */

.mv-marquesina {
  position: relative;
  isolation: isolate;   /* el halo no se escapa del bloque */
}

.mv-marquesina::before {
  content: "";
  position: absolute;
  inset: -30% -50%;
  z-index: -1;
  background:
    radial-gradient(ellipse 40% 60% at 25% 50%, rgba(132, 80, 172, .16), transparent 70%),
    radial-gradient(ellipse 34% 55% at 70% 50%, rgba(170, 127, 90, .13), transparent 70%);
  animation: mv-luz-contraria 34s linear infinite;
  pointer-events: none;
}

/* La segunda fila corre al revés, así que su luz también. */
.mv-marquesina:nth-child(2)::before { animation-direction: reverse; animation-duration: 42s; }

@keyframes mv-luz-contraria {
  from { transform: translate3d(14%, 0, 0); }
  to   { transform: translate3d(-14%, 0, 0); }
}

/* ---------------------------------------------------------------------------
   3. LA BARRA SUPERIOR, MÁS CHICA Y CORRIDA A LA IZQUIERDA

   Seguía llegando hasta x=1215 a 1440 px de ancho, casi 500 px adentro de la
   foto. El velo la hacía legible, pero apoyada encima de la cara igual.

   Dos cambios: el alto baja de 92 a 76 px, y la fila se corre a la izquierda
   con un tope de ancho propio en vez de ocupar los 1200 del contenido. Con
   eso el menú termina antes y la foto queda despejada.
   --------------------------------------------------------------------------- */

:root { --mv-cabecera: 76px; }

.mv-cabecera[data-encogida="1"] .mv-cabecera-fila { min-height: 60px; }

/*
   El logo, más grande.

   Estaba en 36 px de alto —92 de ancho— y a 1440 px de pantalla se leía como
   un detalle, no como la marca. Juan lo dijo mirando la portada y tiene razón:
   medido, ocupaba el 6,4 % del ancho de la barra.

   44 px lo pone a la altura del botón de al lado sin empujar la fila: la
   cabecera mide 76 px, así que entra con 16 de aire arriba y abajo. Al
   encogerse baja a 36, que es lo que medía antes en reposo.
*/
.mv-logo img { height: 44px; }
.mv-cabecera[data-encogida="1"] .mv-logo img { height: 36px; }

@media (min-width: 1100px) {
  /*
     La fila se pega a la izquierda en vez de centrarse.

     ── El intento que falló ────────────────────────────────────────────────

     Primero le puse además un tope de 1060 px de ancho, para que el menú
     terminara antes de la foto. **El menú se partió en dos renglones**:
     «Sobre Nosotros» y «Responsabilidad Social» quedaron cortados al medio y
     la barra creció al doble de alto.

     La cuenta no cierra, y vale decirlo: logo (110) + botón (150) + siete
     entradas de menú (~700) son 960 px, más 160 de margen izquierdo. A
     1440 px de pantalla el menú **va a pasar por encima de la foto sí o sí**,
     salvo que se achique la tipografía hasta que no se lea.

     Lo que sí se resolvió es lo que molestaba: el botón relleno sobre la
     cara. El menú es texto liviano y, con el velo de la cabecera, da 6,3:1
     de contraste — medido. Se lee bien y no compite con la imagen.
  */
  /*
     ── Y la fila tiene que ser tan ancha como la sangría que le pusimos ──

     Acá estaba el otro lado del logo aplastado.

     La sangría izquierda alinea el logo con el contenido de la página:
     `(100vw - 1200) / 2 + 40`. A 1914 px son 397. Pero la fila sigue topada
     en `max-width: 1200` de la regla de más arriba, así que esos 397 se comen
     casi un tercio de su propio ancho: quedaban **771 px** para el logo, el
     botón y siete entradas de menú.

     El tope tiene que incluir la sangría. Así el contenido de la barra mide
     lo mismo que el contenido de la página —1200 menos el aire derecho— y
     termina donde termina el resto del sitio, que es lo que se quería.

     Medido después: 1.168 px útiles para 905 de contenido. Entra con aire.
  */
  .mv-cabecera-fila {
    --mv-sangria: max(40px, calc((100vw - var(--mv-ancho)) / 2 + 40px));

    margin-inline: 0 auto;
    max-width: calc(var(--mv-sangria) + var(--mv-ancho));
    padding-left: var(--mv-sangria);
    padding-right: 32px;
  }

  .mv-menu { gap: 22px; margin-left: 26px; }

  /* Cada entrada en un solo renglón, siempre. */
  .mv-menu a { font-size: 13.5px; white-space: nowrap; }
}

.mv-boton--destacado { margin-left: 20px; padding: 12px 24px; font-size: 13.5px; }

/* ---------------------------------------------------------------------------
   4. RENDIMIENTO

   ── El problema ────────────────────────────────────────────────────────────

   Chrome pedía mucha memoria. Las causas, por orden de peso:

     · **90 imágenes de logos** en la marquesina (45 × 2 copias). Cada una
       decodificada ocupa ancho × alto × 4 bytes en memoria, esté o no a la
       vista.
     · **6 fotos del hero** cargadas y animándose todas a la vez.
     · Secciones enteras fuera de pantalla que el navegador igual maqueta y
       pinta.

   ── Qué se hizo ────────────────────────────────────────────────────────────

   `content-visibility: auto` le dice al navegador que no se moleste en
   maquetar ni pintar una sección mientras esté lejos de la pantalla. Es la
   única propiedad de esta lista que mueve la aguja de verdad.

   `contain-intrinsic-size` va de la mano: sin ella, la sección saltada mide
   cero y la barra de scroll pega saltos al bajar.
   --------------------------------------------------------------------------- */

.mv-campo {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/*
   El hero y la portadilla **se excluyen**: están arriba del todo, siempre se
   ven, y saltearlos no ahorra nada. Peor: `content-visibility` crea un
   contexto de contención que rompería el posicionamiento de las fotos.
*/
.mv-hero,
.mv-portadilla { content-visibility: visible; }

/*
   Las animaciones infinitas se pausan cuando su bloque no está a la vista.

   Una marquesina que sigue corriendo abajo del pliegue gasta compositor para
   nadie. `animation-play-state` atado a `view()` la frena sola.
*/
@supports (animation-timeline: view()) {
  @keyframes mv-andando { from, to { animation-play-state: running; } }
}

/*
   Los orbes del hero sólo existen en el hero. Fuera de ahí no se dibujan:
   son dos capas grandes con degradados que el compositor tiene que mantener
   aunque estén tapadas.
*/
.mv-campo .mv-orbe { display: none; }

/*
   `will-change` NO se usa en ningún lado de esta hoja, y es a propósito.

   Promover un elemento a su propia capa reserva memoria de video por
   adelantado. En una página con 90 imágenes y varias animaciones, repartir
   `will-change` es exactamente cómo se llega a los números que midió el
   cliente. El navegador ya promueve solo lo que anima con `transform`.
*/

/* ---------------------------------------------------------------------------
   La foto opcional de cada servicio

   La página se veía pelada: seis títulos y nada más. El número grande ordena,
   pero no alcanza para seis tarjetas seguidas.

   Con foto la tarjeta se vuelve una composición; sin foto queda como estaba,
   que también funciona. **No se pone una imagen de relleno**: una foto de
   banco de imágenes en «Reclutamiento y Selección de Personal» se nota, y
   resta más de lo que suma.
   --------------------------------------------------------------------------- */

.mv-tarjeta-foto {
  margin: -40px -32px 24px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.mv-tarjeta-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--mv-curva);
}

.mv-tarjeta:hover .mv-tarjeta-foto img { transform: scale(1.06); }

/* Con foto, el número se achica: ya no es lo que sostiene la tarjeta. */
.mv-tarjeta-foto + .mv-tarjeta-numero {
  font-size: 1.5rem;
  opacity: .4;
}

/* ===========================================================================
   EL ESCRITORIO DE TUTOR — /escritorio/
   ===========================================================================

   Es la pantalla que ven Natalia y los alumnos al iniciar sesión. La dibuja
   Tutor LMS entera: tiene su propia barra lateral, su propia cabecera y **no
   pasa por el `header.php` del tema**. Por eso se veía como un producto
   distinto al resto del sitio.

   Tres cosas estaban mal:

     1. El logo era el viejo, con el recuadro blanco.
     2. La tipografía era **Inter**, que viene del tema padre, no Raleway.
     3. Los colores eran los de Tutor: violeta eléctrico, azul y amarillo.

   ── Lo del logo, que es lo que más se nota ───────────────────────────────

   Tutor saca el logo de su opción `brand_logo_light`. En este sitio esa
   opción está **vacía**, así que cae en el respaldo que tiene escrito en
   `templates/shared/brand-logo.php`:

       $resolve_logo_url( array( $logo_id, $custom_logo_id ) );

   O sea: el logo cargado en WordPress. El del recuadro. El mismo que ya me
   había ganado en la cabecera del sitio.

   Acá se tapa con CSS en vez de escribir la opción de Tutor, por dos motivos:
   la opción espera el **id de un archivo de la biblioteca** y nuestro logo es
   un archivo del tema, no un adjunto; y escribirla significaría que el tema
   le toca la configuración a un plugin, que es justo lo que venimos evitando.

   El `alt` no se pierde: el contenedor `.tutor-brand-logo` lleva
   `aria-label="Macval"`, así que quien usa lector de pantalla sigue oyendo el
   nombre.

   Y va el logo **a color** —`logo-marca.webp`—, no el crema: acá el fondo es
   claro. El crema es para la cabecera oscura del sitio.
   =========================================================================== */

/*
   ── Sólo el contenedor claro, y sin tocarle el `display` ────────────────

   La plantilla dibuja **los dos** contenedores, `-light` y `-dark`, y Tutor
   esconde el que no corresponde según el esquema de color.

   Mi primera versión los pintaba a los dos y además les ponía
   `display: block`. Eso pisó el escondido de Tutor y salieron **los dos
   logos, uno arriba del otro** — medido: uno en `top: 16` y otro en `top:
   72`. Se vio en la captura antes que en el código.

   Acá se pinta sólo el claro, que es el que corresponde a un escritorio de
   fondo claro, y el `display` se deja como lo decida Tutor.
*/
/* ===========================================================================
   EL ESCRITORIO SIGUE EL MODO OSCURO DEL SISTEMA. ESTE TEMA NO LO SABÍA.
   ===========================================================================

   Medido en producción, y después reproducido en la copia local emulando
   `prefers-color-scheme: dark`:

       fondo del costado   #f2ebe2   (crema — nuestro)
       texto del menú      #f0f1f1   (casi blanco — de Tutor)
       contraste           1.05 : 1

   O sea: el menú entero invisible. «Inicio», «Cursos», «Anuncios», «Intentos
   del cuestionario», «Debates» — sólo se leía el ítem activo, que va sobre
   violeta sólido.

   ── Por qué pasó, y por qué no lo vi antes ────────────────────────────────

   Tutor 4.1 trae dos paletas y elige con `prefers-color-scheme`. Nuestras
   reglas pintaban el costado de crema **siempre**, sin condición, confiando
   en que el texto lo ponía nuestra regla de al lado. Pero la de Tutor es
   `.tutor-dashboard-sidebar .tutor-dashboard-sidebar-nav ul li a`, que vale
   (0,2,3) contra los (0,2,2) de la nuestra: gana la suya. Con el sistema en
   claro eso no se nota —su texto también es oscuro— y en oscuro desaparece
   todo.

   Mi navegador y el de la vista previa estaban en claro. El de él, no. Es
   exactamente la clase de error que no aparece mirando la pantalla propia.

   ── La decisión ──────────────────────────────────────────────────────────

   Los colores de marca del escritorio se aplican **sólo en modo claro**. En
   oscuro se deja la paleta de Tutor, que es coherente consigo misma, y
   nosotros ponemos únicamente el logo y las tipografías.

   Es menos «nuestro» de lo que era, y es legible en los dos casos. Un panel
   de administración que no se lee no tiene nada de lindo.
   =========================================================================== */

/*
   El logo, uno por paleta.

   La plantilla de Tutor dibuja los dos contenedores —`-light` y `-dark`— y
   esconde el que no corresponde. Así que cada uno lleva su versión del logo:
   el de color sobre el crema, el crema sobre el oscuro. Antes sólo estaba
   pintado el claro, y en modo oscuro el escritorio quedaba sin logo.
*/
/*
   ── Y cada uno encendido sólo en su paleta ─────────────────────────────

   Esto me lo gané dos veces.

   La plantilla de Tutor dibuja los dos contenedores y esconde el que no
   corresponde con `display: none`. Si nosotros le ponemos `inline-block` sin
   condición, le pisamos el escondido y **salen los dos logos, uno arriba del
   otro**. Pasó la primera vez cuando pinté los dos; volvió a pasar ahora, al
   agregar el oscuro: en el aula del alumno se veía el claro cortado arriba y
   el crema completo abajo.

   Con el `display` adentro de la media query, en cada paleta hay exactamente
   una regla activa y la otra no existe. El `<span>` necesita `inline-block`
   —es inline, y a un inline no se le aplican `width` ni `height`: quedaba de
   0 px de alto y el fondo no se veía—, pero sólo cuando es el que va.
*/
html[data-tutor-theme="dark"] body.tutor-screen-frontend-dashboard .tutor-brand-logo-dark {
  display: inline-block;
  width: 132px;
  height: 56px;
  background: url("img/logo-claro.webp") left center / contain no-repeat;
}

html:not([data-tutor-theme="dark"]) body.tutor-screen-frontend-dashboard .tutor-brand-logo-light {
  display: inline-block;
  width: 132px;
  height: 56px;
  background: url("img/logo-marca.webp") left center / contain no-repeat;
}

body.tutor-screen-frontend-dashboard .tutor-brand-logo img,
body.tutor-screen-frontend-dashboard .tutor-brand-logo .site-title { display: none; }

/* ── La tipografía de la marca ───────────────────────────────────────────

   `--body-font: Inter` sale del personalizador del tema padre. Mientras esté,
   el escritorio escribe en una tipografía que no es de MacVal. */
body.tutor-screen-frontend-dashboard {
  --body-font: "Raleway", system-ui, sans-serif;

  font-family: "Raleway", system-ui, sans-serif;
}

/* El fondo crema, sólo si la paleta de Tutor también es clara. */
html:not([data-tutor-theme="dark"]) body.tutor-screen-frontend-dashboard {
  --body-text-color: #4A3B3B;
  --body-bg-color: var(--mv-papel);

  background: var(--mv-papel);
}


body.tutor-screen-frontend-dashboard .tutor-dashboard,
body.tutor-screen-frontend-dashboard .tutor-dashboard * {
  font-family: "Raleway", system-ui, sans-serif;
}

body.tutor-screen-frontend-dashboard .tutor-dashboard h1,
body.tutor-screen-frontend-dashboard .tutor-dashboard h2,
body.tutor-screen-frontend-dashboard .tutor-dashboard h3 {
  font-family: "Trirong", Georgia, serif;
  font-weight: 400;
  letter-spacing: -.02em;
}

/* ── La barra lateral ────────────────────────────────────────────────────

   Papel hondo en vez del gris de Tutor, y el ítem activo en el violeta de la
   marca en vez del lila eléctrico. */
body.tutor-screen-frontend-dashboard .tutor-dashboard-sidebar a {
  border-radius: 3px;
}

html:not([data-tutor-theme="dark"]) body.tutor-screen-frontend-dashboard .tutor-dashboard-sidebar {
  background: var(--mv-papel-hondo);
  border-right: 1px solid var(--mv-linea);
}

/*
	 Tres clases y tres elementos para ganarle a Tutor.

	 La suya es `.tutor-dashboard-sidebar .tutor-dashboard-sidebar-nav ul li a`
	 —(0,2,3)— y la mía era `body.x .tutor-dashboard-sidebar a` —(0,2,2)—. Un
	 punto menos, y perdía. Que el costado quedara crema y el texto siguiera
	 siendo el de Tutor fue consecuencia directa de esa diferencia.
	*/
html:not([data-tutor-theme="dark"]) body.tutor-screen-frontend-dashboard .tutor-dashboard-sidebar .tutor-dashboard-sidebar-nav ul li a:not(.active),
html:not([data-tutor-theme="dark"]) body.tutor-screen-frontend-dashboard .tutor-dashboard-sidebar .tutor-dashboard-sidebar-nav ul li a:not(.active) * {
  color: var(--mv-tinta);
}


/* ── El ítem activo ──────────────────────────────────────────────────────

   Dos cosas que aprendí midiendo, no leyendo:

   1. `active` está en el **`<a>`**, no en el `<li>`. Mi primera versión decía
      `.active > a` y no agarraba nada.

   2. El color lo decide una variable, `--tutor-tab-sidebar-l2-active`, y
      Tutor ya la tiene derivada de nuestro violeta: su rampa de marca sale de
      `--tutor-color-primary`, que pisamos más arriba. Por eso el activo ya
      era violeta — pero `#f1e9f7`, un tinte tan claro que no se lee como
      «estás acá».

   Se pone sólido, igual que el panel de `/panel/`. Que los dos paneles que
   usa Natalia marquen la sección actual de la misma forma vale más que
   respetar el tinte de Tutor.

   La especificidad no es decorativa: la regla de Tutor es
   `.tutor-dashboard-sidebar .tutor-dashboard-sidebar-nav ul li a.active`,
   que vale (0,3,3), y su hoja carga **después** de la nuestra — un empate lo
   gana él. Con `html` y el `-nav` adelante queda (0,4,3) y gana ésta. */
body.tutor-screen-frontend-dashboard {
  --tutor-tab-sidebar-l2-active: var(--mv-violeta);
  --tutor-tab-sidebar-l4-active: var(--mv-violeta);
  --tutor-tab-sidebar-l2-hover: rgba(132, 80, 172, .1);
  --tutor-tab-sidebar-l4-hover: rgba(132, 80, 172, .1);
}

html body.tutor-screen-frontend-dashboard .tutor-dashboard-sidebar .tutor-dashboard-sidebar-nav a.active,
html body.tutor-screen-frontend-dashboard .tutor-dashboard-sidebar .tutor-dashboard-sidebar-nav a.active * {
  color: #fff;
}

body.tutor-screen-frontend-dashboard .tutor-dashboard-sidebar a:hover {
  background: rgba(132, 80, 172, .1);
  color: var(--mv-violeta);
}

/* ── Las tarjetas de cifras ──────────────────────────────────────────────

   Mismo radio de 3 px que el resto del sitio. Tutor usa 8, y dos píxeles de
   esquina son exactamente lo que hace que una pantalla se sienta «de otro
   producto» antes de que uno mire el color. */
body.tutor-screen-frontend-dashboard .tutor-stat-card,
body.tutor-screen-frontend-dashboard .tutor-card {
  border-radius: 3px;
}

html:not([data-tutor-theme="dark"]) body.tutor-screen-frontend-dashboard .tutor-stat-card,
html:not([data-tutor-theme="dark"]) body.tutor-screen-frontend-dashboard .tutor-card {
  border-color: var(--mv-linea);
}


/*
   Las cuatro tarjetas de arriba traen cada una su color de acento: violeta
   eléctrico, celeste, lila y naranja. Son cifras, no categorías — no hay nada
   que distinguir entre «total de cursos» y «total de alumnos» que justifique
   cuatro colores. Van todas en la tinta de la marca, con el icono en violeta.
*/
body.tutor-screen-frontend-dashboard .tutor-stat-card .tutor-stat-card-value,
body.tutor-screen-frontend-dashboard .tutor-stat-card [class*="value"],
body.tutor-screen-frontend-dashboard .tutor-fs-3,
body.tutor-screen-frontend-dashboard .tutor-fs-4 {
  font-family: "Trirong", Georgia, serif;
}

/*
   El violeta del icono sirve en las dos paletas: es el mismo que Tutor ya usa
   para sus acentos, porque su rampa de marca sale de `--tutor-color-primary`,
   que pisamos más arriba.
*/
body.tutor-screen-frontend-dashboard .tutor-stat-card-header svg {
  color: var(--mv-violeta);
}

/*
   La tinta de la marca es oscura. Sobre las tarjetas oscuras de Tutor, el
   «$0» de Ganancias totales salía marrón sobre casi negro — se veía en la
   captura antes que en el código. Va sólo en modo claro.
*/
html:not([data-tutor-theme="dark"]) body.tutor-screen-frontend-dashboard .tutor-stat-card .tutor-stat-card-value,
html:not([data-tutor-theme="dark"]) body.tutor-screen-frontend-dashboard .tutor-stat-card [class*="value"] {
  color: var(--mv-tinta) !important;
}

html:not([data-tutor-theme="dark"]) body.tutor-screen-frontend-dashboard .tutor-fs-3,
html:not([data-tutor-theme="dark"]) body.tutor-screen-frontend-dashboard .tutor-fs-4 {
  color: var(--mv-tinta);
}


/* ── La ventana que quedaba trabada abierta ───────────────────────────────

   En «Certificate» aparecía la ventana de «¿Querés borrar este certificado?»
   **abierta sin que nadie la abriera**, tapando media pantalla.

   Lo medí: la única regla que le aplica es la de Tutor,

       .tutor-modal { display: flex; position: fixed; inset: 0 }

   y **no hay ninguna que la esconda**. Busqué `.tutor-is-active` en las hojas
   cargadas y no existe. La hoja del addon de certificados no llega: el
   constructor dibuja una ventana de borrado por cada fila y confía en un CSS
   que en esta instalación no está.

   Eso es de Tutor Pro, no del tema. Pero se ve, y se ve mal.

   ── Por qué sin `!important` ────────────────────────────────────────────

   A propósito. Si Tutor abre la ventana poniéndole `style="display:flex"` a
   mano —que es lo que hace—, el estilo en línea le gana a esta regla y la
   ventana se abre igual. Con `!important` quedaría trabada **cerrada**, que
   es el error opuesto y peor: el botón de borrar dejaría de funcionar sin que
   nadie entienda por qué.

   Así, cerrada por defecto y abierta cuando Tutor la abre.
   ------------------------------------------------------------------------ */
body.tutor-screen-frontend-dashboard .tutor-modal {
  display: none;
}

/* ---------------------------------------------------------------------------
   EL RESPALDO ACADEMICO

   Dos columnas: el texto a la izquierda, los sellos a la derecha. En un
   telefono se apilan y los sellos quedan abajo, que es el orden correcto —
   primero se lee que certificado es, despues quien lo firma.

   Esta seccion aparece en la portada y adentro de cada ficha de curso. Dentro
   de la ficha el ancho lo manda Tutor, asi que todo se mide en porcentajes y
   nada se clava en pixeles: el mismo bloque tiene que entrar en los dos lados
   sin una regla aparte para cada uno.
   --------------------------------------------------------------------------- */

.mv-aval-grilla {
  display: grid;
  gap: 40px;
  align-items: center;
}

@media (min-width: 900px) {
  .mv-aval-grilla { grid-template-columns: 1.25fr .75fr; gap: 64px; }
}

.mv-aval-texto {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.68;
  color: var(--campo-texto, var(--mv-tinta-media));
  max-width: 54ch;
}

.mv-aval-texto p { margin: 0 0 14px; }
.mv-aval-texto p:last-child { margin-bottom: 0; }

/* El beneficio, con su propio recuadro.

   Lleva un filete violeta a la izquierda en vez de un fondo de color: un
   bloque relleno al lado del texto del certificado los pone a competir, y el
   que tiene que ganar es el certificado. El filete lo destaca sin gritarlo. */
.mv-aval-beneficio {
  margin: 22px 0 0;
  padding: 12px 0 12px 16px;
  border-left: 3px solid var(--mv-violeta);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--campo-titulo, var(--mv-tinta));
}

/* ── Los sellos ──────────────────────────────────────────────────────────

   `align-items: stretch` y no `center`: los logos vienen de distintas fuentes
   y con proporciones distintas —uno apaisado, otro cuadrado—. Dandoles la
   misma caja y dejando que la imagen se acomode adentro con `object-fit`,
   quedan alineados aunque los archivos no se parezcan en nada. */
.mv-aval-sellos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 22px;
}

.mv-aval-sello {
  margin: 0;
  padding: 20px 16px 16px;
  background: var(--campo-sup, #fff);
  border: 1px solid var(--mv-linea);
  border-radius: var(--mv-radio);
  text-align: center;
  transition: transform .3s var(--mv-curva), box-shadow .3s var(--mv-curva);
}

.mv-aval-sello:hover {
  transform: translateY(-3px);
  box-shadow: var(--mv-sombra);
}

.mv-aval-sello img {
  width: 100%;
  height: 72px;
  object-fit: contain;
  margin-inline: auto;
}

.mv-aval-sello figcaption {
  margin-top: 12px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--campo-tenue, var(--mv-tinta-tenue));
}

/* ---------------------------------------------------------------------------
   LOS EJES DEL TRABAJO EN TERRITORIO

   Tarjetas numeradas, no una lista con vinetas. Son cuatro lineas de trabajo
   distintas —formacion, liderazgo, jovenes, accion directa— y en una lista
   corrida se leen como items de un mismo tramite. Separadas, cada una tiene
   el peso de un programa.
   --------------------------------------------------------------------------- */

.mv-rse-enfoque {
  margin: 28px 0 0;
  max-width: 58ch;
  font-size: 19px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--campo-titulo, var(--mv-tinta));
  padding-left: 18px;
  border-left: 3px solid var(--mv-violeta);
}

.mv-rse-ejes {
  display: grid;
  gap: 20px;
  margin-top: 40px;
}

@media (min-width: 720px)  { .mv-rse-ejes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .mv-rse-ejes { grid-template-columns: repeat(4, 1fr); gap: 22px; } }

.mv-rse-eje {
  position: relative;
  padding: 26px 22px 24px;
  background: var(--campo-sup, #fff);
  border: 1px solid var(--mv-linea);
  border-radius: var(--mv-radio);
  transition: transform .3s var(--mv-curva), box-shadow .3s var(--mv-curva);
}

.mv-rse-eje:hover {
  transform: translateY(-3px);
  box-shadow: var(--mv-sombra);
}

/* El numero va grande y palido atras del titulo: ordena sin competir. */
.mv-rse-eje-numero {
  display: block;
  font-family: "Trirong", Georgia, serif;
  font-size: 30px;
  line-height: 1;
  color: var(--mv-violeta);
  opacity: .32;
  margin-bottom: 12px;
}

.mv-rse-eje h3 {
  margin: 0 0 10px;
  font-family: "Raleway", sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--campo-titulo, var(--mv-tinta));
}

.mv-rse-eje p {
  margin: 0;
  font-size: 13.8px;
  line-height: 1.6;
  color: var(--campo-texto, var(--mv-tinta-media));
}

/* Con quien se hizo: separado por una linea, porque es un dato de otro orden
   que el resto del parrafo. */
.mv-rse-eje-con {
  margin-top: 14px !important;
  padding-top: 12px;
  border-top: 1px solid var(--mv-linea);
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: var(--campo-tenue, var(--mv-tinta-tenue)) !important;
}