/* ============================================================
   PORTADA CODIFICADA de grupomaaslo.com            01-10-2026
   Se carga SOLO en la portada (page_on_front), desde
   wp-content/novamira-sandbox/maaslo-portada.php

   Diferencias deliberadas respecto al prototipo:
   - Aqui el responsive es @media y las unidades son vw. En el
     prototipo era @container y cqw porque alli el viewport no
     cambia y solo se estrecha el contenedor. Copiarlo tal cual
     habria dejado el movil sin aplicar una sola regla.
   - La cabecera y el pie siguen siendo los de Kadence: estan
     configurados, tienen el menu real y el logo. El hero vive
     debajo, no se superpone a una cabecera propia.
   ============================================================ */

.mz-portada{
  --tinta:#141A17;
  --texto:#3D4542;
  --suave:#676F6C;
  --verde:#00703C;      /* 5,8 sobre hueso. #00854A daba 4,38 y falla AA */
  --hondo:#005C31;
  --marca:#00A859;      /* solo grafico y sobre oscuro: 2,9 sobre hueso */
  --hueso:#F5F2EC;
  --linea:#E3E0D8;
  --grafito:#141917;
  --r:4px;
  color:var(--texto);
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:16px;
  line-height:1.62;
}
.mz-portada h1,.mz-portada h2,.mz-portada h3,.mz-portada h4{
  margin:0;font-family:"Archivo",sans-serif;color:var(--tinta);font-weight:700}
.mz-portada p{margin:0}
.mz-portada a{color:inherit;text-decoration:none}
.mz-portada :where(a,button,input,textarea):focus-visible{
  outline:2px solid var(--verde);outline-offset:3px;border-radius:2px}
.mz-wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,3.6vw,56px)}
.mz-sec{padding:clamp(72px,9vw,150px) 0;position:relative;overflow-x:clip}

.mz-eyebrow{font:600 11.5px/1 "IBM Plex Sans",sans-serif;letter-spacing:.2em;
  text-transform:uppercase;color:var(--suave);margin:0 0 clamp(20px,2.4vw,34px)}

.mz-btn{display:inline-flex;align-items:center;justify-content:center;padding:16px 28px;
  border-radius:var(--r);font:600 15px/1 "IBM Plex Sans",sans-serif;white-space:nowrap;
  transition:transform .14s,background-color .2s,border-color .2s,color .2s}
.mz-btn:active{transform:translateY(1px)}
/* La clase repetida iguala especificidad con el kit de Elementor, que emite
   `.elementor-kit-126 a{color:#006237}` (0,1,1) y dejaba el texto del boton
   del color del enlace sobre el verde: 1,59 medido en su dia. */
.mz-portada .mz-btn-p.mz-btn-p{background:var(--verde);color:#fff;border:1px solid var(--verde)}
.mz-portada .mz-btn-p.mz-btn-p:hover{background:var(--hondo);border-color:var(--hondo)}
.mz-portada .mz-btn-s.mz-btn-s{border:1px solid #C4BFB4;color:var(--tinta);background:transparent}
.mz-portada .mz-btn-s.mz-btn-s:hover{border-color:var(--tinta)}
.mz-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}

/* ---------------- HERO TIPOGRAFICO ---------------- */
/* El hero ocupa la pantalla MENOS la cabecera del tema, que es fija y tapa los
   primeros 78 px. --mz-cab la mide el JS; sin JS vale 0 y el hero queda 78 px
   mas alto, que solo cuesta un gesto de scroll.
   svh y no vh: en movil vh usa la ventana con la barra de direcciones retraida
   y el hero se sale al cargar.
   min-height y no height: si el contenido pide mas, el hero crece en vez de
   cortar el titular, que es lo que pasaba antes. */
/* EL HERO ES DE UN SOLO COLOR, y por eso su fondo NO es var(--hueso).
   El video ocupa la mitad derecha con object-fit:contain, asi que deja aire
   arriba y abajo; si ese aire no es exactamente del color del video, se ve el
   RECTANGULO del video recortado sobre la seccion y el fondo deja de ser uno.

   La diferencia se persiguio por dos caminos antes de dar con este. Primero
   mix-blend-mode:multiply, que acerca los tonos pero no los iguala porque el
   blanco del video no es 255. Despues se corrigio el color DENTRO del video,
   con colorlevels, para que su fondo saliera ya en hueso: quedo a 4 niveles
   segun ffmpeg, pero el navegador decodifica el video con otro rango y el
   valor real en pantalla era otro.

   Lo que vale es lo que se mide EN EL NAVEGADOR: el video rinde #F4F1EA, asi
   que el hero se pinta de #F4F1EA y la union desaparece. Frente al hueso de
   marca (#F5F2EC) la diferencia es de 1 a 2 niveles, invisible, y el resto de
   secciones conserva el hueso. */
.mz-hero{position:relative;display:flex;align-items:center;background:#F4F1EA;
  min-height:calc(100svh - var(--mz-cab,0px));
  padding:clamp(40px,5vw,80px) 0;overflow:hidden;isolation:isolate}
/* EL VIDEO OCUPA LA MITAD DERECHA, NO EL FONDO ENTERO.
   La primera version lo puso a sangre detras del texto y hubo que taparlo con
   un degradado para que el titular se leyera sobre los cubos oscuros. El
   degradado se quita: si el texto y el video no se pisan, no hace falta velo,
   y asi el video se ve limpio y el copy descansa sobre hueso.

   object-fit:CONTAIN y no cover: con cover el video llena la caja recortando
   lo que sobra, y los cubos llegan hasta el borde derecho e inferior del
   encuadre (medido: ocupan del 3,1% al 95,4% en horizontal y tocan el 99,8%
   en vertical), asi que cualquier recorte los corta. Con contain entra entero.

   El aire que queda encima y debajo del video no se nota porque el fondo del
   propio video es un hueso casi identico al de la seccion. */
.mz-hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:1}
/* width:100% obligatorio, el mismo fallo que en la seccion anclada: .mz-wrap es
   hijo de un contenedor flex y un flex item NO se estira, se encoge a su
   contenido. Medido a 1280: el wrap ocupaba 780 px de los 1265 y arrancaba en
   x=243, con todo el margen izquierdo vacio. */
.mz-hero > .mz-wrap{width:100%;flex:1 1 auto;min-width:0}
.mz-hero-txt{position:relative;z-index:2;max-width:62%}
/* Las dos columnas van DESPUES de la declaracion base de .mz-hero-txt, no
   antes: una regla sin media query que viniera despues le ganaria por orden
   a igual especificidad y el texto volveria al 62%, solapandose con el video. */
@media (min-width:783px){
  .mz-hero-vid{inset:0 0 0 auto;width:54%;height:100%;
    object-fit:contain;object-position:center right;
    /* DEGRADADO DE UNION. Aunque el fondo del hero y el del video son el mismo
       color, el video no termina en fondo liso: su base lleva la sombra del
       suelo, 13 niveles mas oscura, y al acabar el encuadre se cortaba en seco.
       Medido en los cuatro bordes: abajo 13,2 de desviacion, derecha 8,4,
       izquierda 3,4 y arriba 3,0.

       Los porcentajes NO son a ojo: son el margen libre que tiene cada lado
       antes del primer pixel de cubo (izquierda 3,1%, arriba 3,5%), asi que el
       fundido se agota justo donde empiezan las figuras y no se come ninguna.
       Abajo los cubos si llegan al borde, pero con un 7% el canto ya se iguala
       con el fondo y la perdida de figura medida es del 0,0%.
       La derecha no lleva fundido: ahi el video muere contra el borde de la
       pantalla y no hay fondo con el que hacer canto. */
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 3%,#000 93%,transparent 100%),
                       linear-gradient(to right,transparent 0,#000 3.5%,#000 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 3%,#000 93%,transparent 100%),
               linear-gradient(to right,transparent 0,#000 3.5%,#000 100%);
    -webkit-mask-composite:source-in;
    mask-composite:intersect}
  .mz-hero-txt{max-width:43%}
}
/* Entre 783 y 1040 el titular ya no cabe en el 43%: se le da mas sitio al
   texto y se le quita al video, que aguanta mejor el encogimiento. */
@media (min-width:783px) and (max-width:1040px){
  .mz-hero-vid{width:46%}
  .mz-hero-txt{max-width:51%}
}
/* min(8.6vw, 12vh) y no solo vw: con 5 lineas a 124px el titular pedia 570px
   de alto y no cabia en pantallas bajas. Ahora encoge con la altura. */
.mz-portada .mz-hero h1{font-size:clamp(38px,min(8.6vw,12vh),120px);line-height:.95;
  letter-spacing:-.04em;max-width:13ch}
.mz-hero h1 .mz-verde{color:var(--verde)}
/* `.mz-portada .mz-lead` y no `.mz-lead`: el reset `p{margin:0}` es mas
   especifico que una clase sola y el margen no se aplicaba. */
.mz-portada .mz-lead{font-size:clamp(17px,1.5vw,21px);line-height:1.56;color:var(--texto);
  max-width:46ch;margin-top:clamp(22px,2.6vw,36px)}

/* ---------------- MANIFIESTO ---------------- */
.mz-manif{background:#fff}
.mz-portada .mz-manif h2{font-size:clamp(26px,4.2vw,60px);line-height:1.06;
  letter-spacing:-.034em;max-width:19ch}
.mz-portada .mz-manif p{margin-top:clamp(22px,2.4vw,34px);max-width:56ch;
  font-size:clamp(16px,1.4vw,19px);line-height:1.6}

/* ---------------- ENSAMBLAJE ANCLADO ----------------
   Por defecto es una rejilla legible y completa. El modo anclado lo activa
   JS con .mz-on. Sin JS o con reduced-motion se queda en rejilla y no se
   pierde ningun contenido. El anclaje es position:sticky puro: no hay
   ninguna libreria de animacion en esta pagina. */
.mz-ens{background:var(--grafito);color:#C3CCC7}
.mz-portada .mz-ens h2{color:#fff;font-size:clamp(26px,3.8vw,54px);line-height:1.06;
  letter-spacing:-.032em;max-width:17ch}
.mz-ens .mz-eyebrow{color:rgba(255,255,255,.66)}
.mz-lista{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(14px,2vw,30px);margin-top:clamp(40px,5vw,72px)}
.mz-item{margin:0;text-align:center}
.mz-item img{width:100%;height:auto;display:block;margin-bottom:16px}
.mz-item .mz-ix{font:600 11px/1 "Archivo",sans-serif;color:var(--marca);
  letter-spacing:.14em;display:block;margin-bottom:9px}
.mz-portada .mz-item h3{color:#fff;font-size:17px;letter-spacing:-.012em;line-height:1.25}
.mz-item .mz-rol{font-size:13.5px;color:#9FABA4;margin-top:7px}
.mz-item .mz-des{font-size:13.5px;color:#8A958F;margin-top:9px;line-height:1.5}
.mz-prog{display:none}

/* .mz-on pone padding:0 para que el anclaje ocupe toda la altura, y eso dejaba
   el titular de la seccion pegado al borde superior, sin aire. La cabecera
   recupera su propio padding. */
.mz-ens.mz-on{padding:0}
/* Dentro de la zona fija el padding de seccion sobra: sumaba 129 px y dejaba
   el contenido en 804 px cuando solo habia 522 de alto util. */
.mz-ens.mz-on .mz-ens-cab{padding-top:0;padding-bottom:clamp(14px,2.4vh,32px)}
.mz-portada .mz-ens.mz-on .mz-ens-cab h2{font-size:clamp(22px,min(3.4vw,5vh),48px)}
.mz-ens.mz-on .mz-ens-cab .mz-eyebrow{margin-bottom:clamp(10px,1.6vh,20px)}
/* 300vh y no 460vh: con 460 la seccion ocupaba el 51% de toda la portada
   (4496 px de 8767) y recorrerla pedia unos 5 s de scroll continuo. Con 300
   queda en torno a un tercio y cada pieza dispone de 40vh de recorrido, que
   sigue siendo suficiente para leerla. Cambiado el 01-10-2026. */
.mz-ens.mz-on .mz-pista{height:300vh;position:relative}
/* El anclaje arranca DEBAJO de la cabecera del tema. Kadence monta una
   .kadence-sticky-header con position:fixed, 78 px y z-index 1200, asi que con
   top:0 la zona fija quedaba por debajo y el titular de la seccion aparecia
   cortado. La altura la mide el JS y la deja en --mz-cab. */
.mz-ens.mz-on .mz-fija{position:sticky;top:var(--mz-cab,0px);
  height:calc(100vh - var(--mz-cab,0px));display:flex;align-items:center;overflow:hidden}
/* width:100% obligatorio: .mz-wrap es hijo de un contenedor flex y un flex item
   NO se estira, se encoge a su contenido. Sin esto el wrap medía 270 px de los
   1585 disponibles, la rejilla colapsaba y la columna de la imagen quedaba en
   0 px: la pieza no se veia y el texto salia en una columna de 118 px con medio
   viewport vacio. Medido el 01-10-2026. */
.mz-ens.mz-on .mz-fija > .mz-wrap{width:100%;flex:1 1 auto;min-width:0}
/* La altura tambien en vh: con solo vw la lista pedia 440 px en una pantalla de
   600 y la pieza quedaba cortada por abajo. */
.mz-ens.mz-on .mz-lista{display:block;margin:0;position:relative;
  height:min(50vw,440px,44vh)}
/* grid-template-rows:minmax(0,1fr) no es decorativo: sin una altura de fila
   definida, el max-height:100% de la imagen NO se resuelve (un porcentaje
   contra altura auto se comporta como none) y la pieza se salia 50 px por
   debajo del viewport aunque el item midiera 264 px. */
.mz-ens.mz-on .mz-item{position:absolute;inset:0;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:center;
  text-align:left;opacity:0;transform:translateY(12px);
  transition:opacity .2s ease,transform .2s ease;pointer-events:none}
/* El retardo del que entra es PEQUENO a proposito. Con los dos a la misma
   duracion y sin retardo se veian "Create" y "Digital" superpuestos al 50%;
   con 0,2 s de retardo el problema se invirtio y, al bajar rapido, los cambios
   se encadenaban y la seccion se quedaba VACIA. 0,06 s deja un cruce de apenas
   un fotograma sin dejar hueco. */
.mz-ens.mz-on .mz-item.mz-act{opacity:1;transform:none;pointer-events:auto;
  transition-delay:.06s}
/* max-height y object-fit, no solo max-width: limitando solo el ancho la
   imagen crecia en alto por su proporcion y se salia 50 px por debajo del
   viewport. Medido a 1280x600. */
.mz-ens.mz-on .mz-item img{width:100%;max-width:min(42vw,560px);
  max-height:100%;object-fit:contain;margin:0 auto;justify-self:center}
.mz-portada .mz-ens.mz-on .mz-item h3{font-size:clamp(24px,3vw,42px);
  letter-spacing:-.03em;line-height:1.06}
.mz-ens.mz-on .mz-item .mz-rol{font-size:clamp(15px,1.3vw,18px);margin-top:12px}
.mz-ens.mz-on .mz-item .mz-des{font-size:clamp(14px,1.2vw,16.5px);margin-top:16px;max-width:38ch}
.mz-ens.mz-on .mz-item .mz-ix{font-size:12px;margin-bottom:14px}
.mz-ens.mz-on .mz-prog{display:flex;gap:7px;margin-top:clamp(14px,2.4vh,36px)}
.mz-prog b{display:block;width:26px;height:2px;background:rgba(255,255,255,.22);
  transition:background .3s}
.mz-prog b.mz-act{background:var(--marca)}

/* ---------------- ENTRADAS ---------------- */
.mz-ent{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;
  background:var(--linea);border:1px solid var(--linea);margin-top:clamp(40px,5vw,70px)}
.mz-ent a{grid-column:span 2;background:var(--hueso);padding:clamp(26px,3vw,42px);
  display:flex;flex-direction:column;transition:background-color .22s}
.mz-ent a:hover{background:#fff}
.mz-ent a.mz-ancha{grid-column:span 3}
/* #8F8574 y no un gris claro: el indice es decorativo pero es texto real.
   A 45px el minimo es 3 y este da 3,25 sobre hueso. */
.mz-ent .mz-ix{font:700 clamp(28px,3.2vw,52px)/1 "Archivo",sans-serif;color:#8F8574;
  letter-spacing:-.03em;transition:color .22s;display:block;margin-bottom:clamp(18px,2vw,30px)}
.mz-ent a:hover .mz-ix{color:var(--verde)}
.mz-portada .mz-ent h3{font-size:clamp(17px,1.7vw,22px);letter-spacing:-.018em;line-height:1.2}
.mz-portada .mz-ent p{margin-top:10px;color:var(--suave);font-size:14.5px;
  line-height:1.55;max-width:34ch}
.mz-ent .mz-mas{margin-top:auto;padding-top:22px;font:600 13px/1 "IBM Plex Sans",sans-serif;
  color:var(--verde)}

/* ---------------- METODO ---------------- */
.mz-met{background:#fff}
.mz-portada .mz-met h2{font-size:clamp(26px,3.4vw,48px);line-height:1.06;
  letter-spacing:-.03em;max-width:17ch}
.mz-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2.6vw,40px);margin-top:clamp(40px,5vw,70px);border-top:1px solid var(--linea)}
.mz-rail .mz-p{padding-top:30px;position:relative}
.mz-rail .mz-p:before{content:"";position:absolute;top:-1px;left:0;width:40px;height:2px;
  background:var(--verde)}
.mz-portada .mz-rail h3{font-size:17px;letter-spacing:-.012em}
.mz-portada .mz-rail p{margin-top:9px;color:var(--suave);font-size:14.5px;line-height:1.55}

/* ---------------- CIERRE ----------------
   Lleva imagen de fondo con velo oscuro y texto en blanco, como la tenia la
   version de Elementor. Al portar la pagina se perdio y quedaba plana. */
.mz-cierre{background-color:var(--grafito);background-size:cover;
  background-position:center;background-repeat:no-repeat;position:relative;isolation:isolate}
.mz-cierre:before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(18,23,21,.80)}
.mz-portada .mz-cierre h2{font-size:clamp(26px,3.4vw,48px);line-height:1.06;
  letter-spacing:-.03em;color:#fff}
.mz-portada .mz-cierre .mz-lead{color:rgba(255,255,255,.88)}
.mz-cierre-grid{display:grid;grid-template-columns:.86fr 1fr;
  gap:clamp(30px,4.4vw,68px);align-items:start;margin-top:clamp(26px,3vw,40px)}
/* El formulario va en tarjeta clara. Suelto sobre la imagen, las etiquetas de
   WPForms (oscuras) eran invisibles sobre el fondo oscuro y los campos
   flotaban con media seccion vacia. */
.mz-form{background:#fff;border-radius:var(--r);padding:clamp(22px,2.6vw,34px)}
.mz-form .wpforms-container{margin:0}
.mz-form .wpforms-field{padding:0 0 16px}
.mz-portada .mz-form .wpforms-field-label{color:var(--tinta);font:600 13px/1.3 "IBM Plex Sans",sans-serif;
  margin-bottom:7px;display:block}
.mz-portada .mz-form .wpforms-field-sublabel,
.mz-portada .mz-form .wpforms-field-description{color:var(--suave);font-size:12.5px}
.mz-portada .mz-form input[type=text],.mz-portada .mz-form input[type=email],
.mz-portada .mz-form input[type=tel],.mz-portada .mz-form select,
.mz-portada .mz-form textarea{width:100%;border:1px solid #C9C3B6;border-radius:var(--r);
  padding:11px 13px;font:15px/1.4 "IBM Plex Sans",sans-serif;color:var(--tinta);
  background:#fff;max-width:none}
.mz-portada .mz-form textarea{min-height:120px}
.mz-portada .mz-form .wpforms-submit{background:var(--verde);color:#fff;border:1px solid var(--verde);
  border-radius:var(--r);padding:14px 26px;font:600 15px/1 "IBM Plex Sans",sans-serif;cursor:pointer;
  width:100%;transition:background-color .2s,transform .14s}
.mz-portada .mz-form .wpforms-submit:hover{background:var(--hondo);border-color:var(--hondo)}
.mz-portada .mz-form .wpforms-submit:active{transform:translateY(1px)}
.mz-portada .mz-form .wpforms-required-label{color:#B3412F}

/* ---------------- MOVIMIENTO ----------------
   Los revelados usan animation-timeline, que ya se verifico que funciona en
   este servidor. Todo va dentro de @supports, el opacity:0 incluido: si el
   navegador no lo soporta, la animacion no se dispara nunca y el contenido se
   quedaria INVISIBLE. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .mz-rev{animation:mz-entra .6s cubic-bezier(.16,1,.3,1) both;
      animation-timeline:view();animation-range:entry 4% cover 20%}
  }
}
@keyframes mz-entra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .mz-ens.mz-on .mz-item{transition:none}
  .mz-portada *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------------- RESPONSIVE (aqui si @media) ---------------- */
/* Pantallas MUY ANCHAS. Medido: a 1920 el contenedor de 1240 px dejaba el
   contenido en el 65% del ancho, con 340 px de margen a cada lado y el titular
   arrancando en x=389. El contenedor crece, pero el texto mantiene su medida de
   lectura porque .mz-lead y el h1 estan limitados en ch. */
@media (min-width:1600px){
  .mz-wrap{max-width:1460px}
}

/* Pantallas BAJAS (portatiles de 720p con barras del navegador). Medido a
   1280x600: el hero pedia 755 px y el CTA caia fuera de pantalla. El titular
   se ensancha para pasar de 5 lineas a 4 y los paddings se recortan. */
@media (max-height:780px) and (min-width:783px){
  /* Aqui NO se anula el min-height. Ponerlo a 0 arreglaba el corte del titular
     pero dejaba el hero en 386 px de 600, al 64% de la pantalla. Lo que se
     recorta son los paddings y el titular, no la altura. */
  .mz-hero{padding:clamp(22px,3.5vh,46px) 0}
  /* 10vh y 20ch: con 12vh/17ch el titular seguia en 5 lineas (350 px) y el CTA
     caia 41 px por debajo del pliegue, contando los 79 px de la cabecera del
     tema. Asi baja a 3-4 lineas y entra el bloque entero. */
  .mz-portada .mz-hero h1{font-size:clamp(34px,min(8.2vw,10vh),120px);
    max-width:20ch;line-height:1}
  .mz-eyebrow{margin-bottom:clamp(12px,2vh,22px)}
  .mz-portada .mz-lead{margin-top:clamp(14px,2.2vh,24px)}
  .mz-cta{margin-top:clamp(18px,2.6vh,28px)}
}

@media (max-width:900px){
  .mz-lista{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  .mz-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Aqui habia un `.mz-hero-txt{max-width:74%}` para 900 px. Se retira: valia
   cuando el hero era un video a sangre y el texto podia ocupar lo que quisiera,
   pero con las dos columnas invadia la mitad del video en el tramo 783-900.
   Por debajo de 783 el hero se apila y el texto ya va al 100%. */
@media (max-width:782px){
  /* A esta anchura una secuencia a pantalla completa es peor que ver las cinco
     piezas de un vistazo, asi que el anclaje se desmonta visualmente. */
  .mz-ens.mz-on{padding:clamp(72px,9vw,150px) 0}
  .mz-ens.mz-on .mz-pista{height:auto}
  .mz-ens.mz-on .mz-fija{position:static;height:auto;display:block}
  .mz-ens.mz-on .mz-lista{display:grid;height:auto;margin-top:40px;
    grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .mz-ens.mz-on .mz-item{position:static;opacity:1;transform:none;display:block;
    text-align:center;pointer-events:auto}
  .mz-ens.mz-on .mz-item img{max-width:100%}
  .mz-portada .mz-ens.mz-on .mz-item h3{font-size:17px;letter-spacing:-.012em;line-height:1.25}
  .mz-ens.mz-on .mz-item .mz-rol{font-size:13.5px;margin-top:7px}
  .mz-ens.mz-on .mz-item .mz-des{font-size:13.5px;margin-top:9px;max-width:none}
  .mz-ens.mz-on .mz-prog{display:none}

  .mz-hero{min-height:auto;flex-direction:column;align-items:stretch;
    padding:clamp(34px,6vw,54px) 0}
  .mz-hero > .mz-wrap{order:1}
  .mz-portada .mz-hero h1{max-width:none;font-size:clamp(32px,8.4vw,52px)}
  .mz-hero-txt{max-width:100%}
  /* En movil el texto ocupa el ANCHO ENTERO, y el velo del escritorio es un
     degradado horizontal que a partir del 64% ya casi no cubre: el titular
     habria quedado sobre los cubos oscuros sin proteccion. En vez de subir el
     velo hasta taparlo todo (que dejaria el video en nada), el video sale del
     fondo y pasa a ser un bloque debajo del texto, que es como ya se resolvia
     la pieza estatica que habia aqui.
     flex-direction:column es obligatorio: al quitarle el position:absolute
     dentro de un flex en FILA, el video se coloca AL LADO del texto y lo
     empuja fuera de pantalla.
     z-index:auto es imprescindible: la regla base lo deja en -2 para meterlo
     bajo el texto, y al pasar a static ese -2 lo manda DETRAS del fondo hueso
     del propio hero, con lo que el video deja de verse en movil. */
  /* aspect-ratio y contain, no una altura fija con cover: el video mide
     1100x872 (1,26) y la franja de 180 px a 375 de ancho da 2,08, asi que
     cover recortaba el 39% del encuadre y se comia los cubos de arriba y de
     abajo. Con la proporcion del propio video entra entero. */
  .mz-hero-vid{position:static;width:100%;height:auto;aspect-ratio:1100/872;
    object-fit:contain;margin-top:24px;order:2;opacity:1;z-index:auto;
    /* el mismo fundido de union, solo en vertical: aqui el video ocupa todo el
       ancho y los cantos que se ven son el de arriba y el de abajo */
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 3%,#000 93%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 3%,#000 93%,transparent 100%)}
  .mz-ent{grid-template-columns:1fr}
  .mz-ent a,.mz-ent a.mz-ancha{grid-column:span 1}
  .mz-rail{grid-template-columns:1fr;gap:0;border-top:0}
  .mz-rail .mz-p{padding:22px 0;border-top:1px solid var(--linea)}
  .mz-rail .mz-p:before{display:none}
  .mz-cierre-grid{grid-template-columns:1fr;gap:28px}
  .mz-cta .mz-btn{flex:1 1 100%}
}
@media (max-width:560px){
  .mz-lista{grid-template-columns:repeat(2,minmax(0,1fr))}
}