/* =====================================================================
   MUESTRA CINE+VIDEO INDIGENA 2026 - Museo Chileno de Arte Precolombino
   Landing completa (todo lo que va BAJO el header del sitio).

   MEDIDAS: el diseno original es un lienzo de 1920 px de ancho. Todas las
   medidas de este archivo son las del diseno, en "unidades de diseno":
   1 unidad = var(--u) = 1 px cuando el viewport mide 1920 px, y escala
   proporcional hacia abajo. Asi el resultado es identico al diseno a
   1920 px y mantiene las proporciones en pantallas menores.
   Bajo 1280 px se pasa a un layout responsive (bloque 15).

   Todo va bajo .mcv para no tocar el tema ni el header.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Fuentes  (el diseno usa Brandon Text en Bold, Regular y Light)
   Si las subes por Elementor > Custom Fonts, borra este bloque.
   --------------------------------------------------------------- */
@font-face{font-family:"Brandon Text";src:url("../fonts/brandon-text-light.woff2") format("woff2"),url("../fonts/brandon-text-light.woff") format("woff");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Brandon Text";src:url("../fonts/brandon-text-regular.woff2") format("woff2"),url("../fonts/brandon-text-regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Brandon Text";src:url("../fonts/brandon-text-medium.woff2") format("woff2"),url("../fonts/brandon-text-medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Brandon Text";src:url("../fonts/brandon-text-bold.woff2") format("woff2"),url("../fonts/brandon-text-bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Brandon Grotesque";src:url("../fonts/brandon-grotesque-regular.woff2") format("woff2"),url("../fonts/brandon-grotesque-regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Brandon Grotesque";src:url("../fonts/brandon-grotesque-bold.woff2") format("woff2"),url("../fonts/brandon-grotesque-bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}

/* ---------------------------------------------------------------
   2. Tokens
   --------------------------------------------------------------- */
.mcv{
  /* paleta identidad visual 2026 */
  --pl:#46102b;   /* ciruela, color de texto */
  --pk:#e23496;   /* rosado */
  --gr:#69d495;   /* verde */
  --te:#60c3be;   /* turquesa */
  --mi:#ebfffd;   /* menta, fondo claro */
  --wh:#fff;
  --ca:#1a1a1a;   /* fondo de las fichas de pelicula */

  /* 1 unidad de diseno; tope en 1px para no agrandar sobre 1920 */
  --u:min(1px, calc(100vw / 1920));
  /* dientes del zigzag: 11 por ticket de 244.8; amplitud 11.1 del diseno */
  --zw:22.25;
  --zh:11.1;
  /* tracking del diseno */
  --lsc:.023em;   /* mayusculas */
  --lsb:.0125em;  /* texto corrido */

  font-family:"Brandon Text",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:400;
  color:var(--pl);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.mcv,.mcv *,.mcv *::before,.mcv *::after{box-sizing:border-box}
.mcv img{max-width:100%;display:block}
.mcv a{color:inherit;text-decoration:none}
/* Reset de elementos contra el tema de WordPress.
   Iba con :where(), que tiene especificidad CERO: en el prototipo no compite
   con nadie, pero publicado, cualquier regla del tema para h2 o p le gana. Se
   vio en el sitio: el h2 de los tickets tomaba el cuerpo del tema --32 px
   regular en vez de 24 bold-- y "PROGRAMACION" dejaba de caber en el ticket de
   244,8, partiendose a la mitad.
   Ahora lleva .mcv delante. Por eso las reglas propias que dan estilo a estos
   mismos elementos lo llevan tambien: si no, las ganaria este reset. */
.mcv p,.mcv h1,.mcv h2,.mcv h3,.mcv h4,
.mcv ul,.mcv ol,.mcv li{
  margin:0;padding:0;
  font:inherit;color:inherit;
  letter-spacing:inherit;text-transform:inherit;
}
.mcv ul,.mcv ol{list-style:none}

/* El tema tambien estiliza los controles: bordes redondeados, sombras, altos
   minimos. Se vio publicado, con el boton VER MAS redondeado, con sombra y de
   44 px de alto en vez de los 31,1 del diseno.
   Aqui solo se anulan propiedades que NINGUNA regla propia declara, para no
   tener que subirle la especificidad a cada componente. Los botones de dias y
   de paises ya eran inmunes porque usan all:unset. */
.mcv button,.mcv select,.mcv input,.mcv textarea{
  border-radius:0;
  box-shadow:none;
  text-shadow:none;
  min-height:0;
  min-width:0;
  background-image:none;
  -webkit-appearance:none;
  appearance:none;
}
.mcv-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------
   3. Estructura
   .mcv-sec  = franja a sangre con el color de fondo
   .mcv-cv   = lienzo de 1920 centrado; todo se posiciona dentro
   --------------------------------------------------------------- */
.mcv-sec{position:relative;width:100%}
.mcv-cv{
  position:relative;
  display:flow-root;          /* contiene los margenes de sus hijos */
  width:calc(1920 * var(--u));
  /* 1920*--u vale 100vw, y 100vw INCLUYE la barra de scroll: sin este tope el
     lienzo queda ~15px mas ancho que el area visible y aparece scroll
     horizontal. 100% = ancho real del contenido (sin scrollbar). */
  max-width:100%;
  margin-inline:auto;
}
.mcv-bg-mi{background:var(--mi)}
.mcv-bg-te{background:var(--te)}
.mcv-bg-gr{background:var(--gr)}

/* riel de tickets: siempre x=289.4, ancho 244.8 */
.mcv-rail{
  position:absolute;
  left:calc(289.4 * var(--u));
  width:calc(244.8 * var(--u));
  z-index:3;
}

/* ---------------------------------------------------------------
   4. Tickets y dientes
   --------------------------------------------------------------- */
.mcv-tk{
  --tk:var(--pk);
  position:relative;
  background:var(--tk);
  padding-left:calc(19.7 * var(--u));
  padding-right:calc(10 * var(--u));
  font-weight:700;
  font-size:calc(24 * var(--u));
  line-height:calc(24 * var(--u));
  text-transform:uppercase;
  letter-spacing:var(--lsc);
}
/* "Programa sujeto a modificacion", bajo el titulo del ticket de la
   programacion del museo: en Light y tal como se escribe, sin las mayusculas
   del ticket (pedido del 26-09-2026) */
.mcv .mcv-tk__nota{
  margin-top:calc(12 * var(--u));
  font-weight:300;
  text-transform:none;
  letter-spacing:var(--lsb);
}
.mcv-tk--pk{--tk:var(--pk)}
.mcv-tk--gr{--tk:var(--gr)}
.mcv-tk--te{--tk:var(--te)}

/* Dientes: mascara SVG de UN diente (bordes rectos), tileada a tamano FIJO
   (--zw x alto), asi todos los dientes miden lo mismo en cualquier ancho
   (tickets de 244.8 y panel de 979.3 por igual). El tile lleva la punta en sus
   bordes: al tilear desde x=0 las puntas caen en las orillas (x=0 y borde
   derecho), dejando los dientes de las esquinas alargados, igual que el diseno.
   Los dientes cuelgan fuera de la caja y tapan lo que viene despues. */
.mcv-zig{
  position:absolute;left:0;right:0;
  height:calc(var(--zh) * var(--u));
  background:var(--tk);
  pointer-events:none;
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  -webkit-mask-position:0 0;mask-position:0 0;
  -webkit-mask-size:calc(var(--zw) * var(--u)) 100%;
          mask-size:calc(var(--zw) * var(--u)) 100%;
}
.mcv-zig--b{
  top:100%;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2225 1110' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 0,1110 1112.5,0 2225,1110 2225,0' fill='%23000'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2225 1110' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 0,1110 1112.5,0 2225,1110 2225,0' fill='%23000'/%3E%3C/svg%3E");
}
.mcv-zig--t{
  bottom:100%;
  /* medio diente desfasado respecto a los de abajo, para que ENCAJEN (mesh) en
     el cambio de seccion: la punta de arriba cae en el valle de abajo */
  -webkit-mask-position:calc(var(--zw) * var(--u) / 2) 0;
          mask-position:calc(var(--zw) * var(--u) / 2) 0;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2225 1110' preserveAspectRatio='none'%3E%3Cpolygon points='0,1110 0,0 1112.5,1110 2225,0 2225,1110' fill='%23000'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2225 1110' preserveAspectRatio='none'%3E%3Cpolygon points='0,1110 0,0 1112.5,1110 2225,0 2225,1110' fill='%23000'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------
   5. HERO   alto 908.4 · tickets 245.3 / 121.5 / 238.6 / 245.3
   --------------------------------------------------------------- */
.mcv-hero{overflow:hidden;background:var(--pl);height:calc(908.4 * var(--u))}
.mcv-hero__media{position:absolute;inset:0;z-index:0}
.mcv .mcv-hero__media img,.mcv .mcv-hero__media video{width:100%;height:100%;object-fit:cover}
.mcv-hero .mcv-cv{z-index:2;height:100%}
.mcv-hero .mcv-rail{top:0}

/* los dientes de cada ticket deben quedar sobre el ticket siguiente */
.mcv-hero__tk{position:absolute;left:0;width:100%}
.mcv-tk-logo{z-index:4}
.mcv-tk-anos{z-index:3}
.mcv-tk-nav{z-index:2}
.mcv-tk-cta{z-index:1}
.mcv-tk-logo{top:0;height:calc(245.3 * var(--u));padding-top:calc(40.1 * var(--u))}
.mcv-tk-anos{top:calc(244.7 * var(--u));height:calc(121.5 * var(--u));padding-top:calc(39 * var(--u))}
.mcv-tk-nav {top:calc(366.2 * var(--u));height:calc(238.6 * var(--u));padding-top:calc(40.4 * var(--u))}
.mcv-tk-cta {top:calc(604.8 * var(--u));height:calc(245.3 * var(--u));padding-top:calc(45.8 * var(--u))}

.mcv-wh{color:var(--wh)}                 /* la O de ANOS va en blanco */
.mcv-anos__n{                            /* el 2 del aniversario, invertido */
  position:absolute;
  left:calc(53.7 * var(--u));
  top:calc(104.6 * var(--u));
  font-size:calc(23.43 * var(--u));
  line-height:calc(23.43 * var(--u));
  color:var(--wh);
  transform:rotate(-90deg);
  transform-origin:0 0;
}
.mcv-nav a{display:block;transition:color .18s ease}
.mcv-nav a:hover,.mcv-nav a:focus-visible,.mcv-nav a.is-active{color:var(--wh)}
.mcv-cta{display:block;transition:filter .18s ease}
.mcv-cta:hover{filter:brightness(1.06)}

/* ---------------------------------------------------------------
   6. INTRO   alto 752 · 3 columnas desde x=309.1
   --------------------------------------------------------------- */
/* El diseno media 674: la columna mas larga (490) terminaba 107 sobre el
   borde de abajo. El texto de septiembre la alarga a 566, y 752 devuelve ese
   mismo aire de 107. Las columnas van en absoluto, asi que la franja no crece
   sola: si el texto vuelve a cambiar, hay que ajustar este alto. */
.mcv-intro{height:calc(752 * var(--u))}
.mcv .mcv-intro__col{
  position:absolute;
  top:calc(78.1 * var(--u));
  font-size:calc(24 * var(--u));
  line-height:calc(28.8 * var(--u));
  letter-spacing:var(--lsb);
}
/* las tres columnas arrancan en x = 309.1 / 857 / 1377.6 del lienzo */
.mcv .mcv-intro__col--1{left:calc(309.1 * var(--u));width:calc(453.5 * var(--u))}
.mcv .mcv-intro__col--2{left:calc(857 * var(--u));width:calc(427 * var(--u))}
/* El diseno traia la tercera columna un punto mas grande (25/31). Con el texto
   de septiembre (24-09-2026) es la columna mas larga, y a ese tamano se salia
   de la franja: va igual que las otras dos. */
.mcv .mcv-intro__col--3{left:calc(1377.6 * var(--u));width:calc(434 * var(--u))}
/* cada columna trae dos o tres parrafos */
.mcv .mcv-intro__col p + p{margin-top:1em}

/* ALTERNATIVA: columnas que se equilibran solas  (probada y descartada)
   -------------------------------------------------------------------
   Arriba, el texto va repartido a mano: un parrafo por columna y el cierre
   junto al tercero. Con cuatro parrafos y tres cajas las columnas quedan en
   259, 346 y 490 de alto, con un hueco bajo la primera.

   Dejando que el texto FLUYA, el navegador las equilibra en 12 lineas y 375
   de alto cada una. Se probo y se prefirio la version de arriba, porque
   fluyendo un parrafo continua en la columna siguiente. Queda aqui por si se
   quiere volver: es cambiar el maquetado del intro en prototipo/index.html
   por un solo bloque

       <div class="mcv-intro__cols">
         <p>...</p> x4
       </div>

   y estas reglas en vez de las de .mcv-intro__col:

   .mcv-intro__cols{
     position:absolute;
     left:calc(309.1 * var(--u));
     top:calc(78.1 * var(--u));
     width:calc(1502.5 * var(--u));
     columns:3;
     column-gap:calc(94 * var(--u));
     font-size:calc(24 * var(--u));
     line-height:calc(28.8 * var(--u));
     letter-spacing:var(--lsb);
     orphans:2;              // que un corte no deje una linea suelta
     widows:2;
   }
   .mcv-intro__cols p + p{margin-top:1em}

   y en el bloque 15 (responsive): .mcv-intro__cols{columns:1} mas el reset de
   posicion, igual que hoy tiene .mcv-intro__col.

   Lo que se gana: las tres columnas del mismo alto.
   Lo que se pierde: los parrafos dejan de estar completos en su columna, y la
   tercera pierde el cuerpo levemente mayor que le da el diseno (25/31 contra
   24/28,8), porque fluyendo no hay donde aplicarlo. Los bordes de afuera del
   bloque no cambian (309,1 y 1811,6); se corren solo los cortes interiores,
   15,7 la segunda columna y 4,2 la tercera.

   Como se veia: docs/intro-columnas-alternativa.png
   El commit con la version completa es 2f38369, revertido en 539b2e5.
   -------------------------------------------------------------------  */
.mcv .mcv-unesco{font-size:calc(17.5 * var(--u));font-weight:500}


/* ---------------------------------------------------------------
   7. FECHAS   alto 599 · panel verde 0-857 · imagen 857-1920
   --------------------------------------------------------------- */
.mcv-fechas{
  height:calc(599 * var(--u));
  display:grid;
  /* el corte cae en x=857 del lienzo, tambien en pantallas mas anchas */
  grid-template-columns:calc(max(0px,(100% - 1920 * var(--u)) / 2) + 857 * var(--u)) 1fr;
}
.mcv-fechas__panel{position:relative;background:var(--gr)}
.mcv-fechas__inner{
  position:absolute;
  right:0;
  top:calc(55.5 * var(--u));
  width:calc(547.9 * var(--u));
  font-size:calc(24 * var(--u));
  line-height:calc(24 * var(--u));
  text-transform:uppercase;
  letter-spacing:var(--lsc);
}
.mcv-fecha + .mcv-fecha{margin-top:calc(24 * var(--u))}
.mcv .mcv-fecha__t{font-weight:700}
.mcv .mcv-fecha__d{font-weight:300}
.mcv-fechas__media{position:relative;overflow:hidden}
.mcv .mcv-fechas__media img{width:100%;height:100%;object-fit:cover}

/* ---------------------------------------------------------------
   8. Selects (pueblo, tema, sede, region, pais)
      caja blanca 808x71 en x=857 + boton 71x71
   --------------------------------------------------------------- */
.mcv-select{
  position:absolute;
  left:calc(857 * var(--u));
  width:calc(879 * var(--u));
  height:calc(71 * var(--u));
  display:flex;
  background:var(--wh);
}
.mcv-select select{
  appearance:none;-webkit-appearance:none;
  flex:1 1 auto;min-width:0;border:0;background:transparent;
  font-family:inherit;color:var(--pl);
  font-size:calc(24 * var(--u));
  line-height:calc(24 * var(--u));
  text-transform:uppercase;
  letter-spacing:var(--lsc);
  /* texto centrado en la caja de 71 (cap-top a 27 del borde, como el diseno) */
  padding:calc(6 * var(--u)) calc(24 * var(--u)) 0 calc(69.9 * var(--u));
  cursor:pointer;
}
.mcv-select select:focus-visible{outline:2px solid var(--pl);outline-offset:-2px}
.mcv .mcv-select__btn{
  flex:0 0 auto;
  width:calc(71 * var(--u));
  display:flex;align-items:center;justify-content:flex-start;
  background:var(--gr);border:0;padding:0;cursor:pointer;color:var(--pl);
  transition:filter .18s ease;
}
.mcv .mcv-select__btn:hover{filter:brightness(1.07)}
/* flecha del diseno: 35.4 de lado, pegada al borde izquierdo del boton (no
   centrada) y centrada en vertical. Trazo 4.4, que es 2.98 en el viewBox de 24. */
.mcv .mcv-select__btn svg{width:calc(35.4 * var(--u));height:calc(35.4 * var(--u))}
.mcv-select--te .mcv-select__btn{background:var(--te)}

/* ---------------------------------------------------------------
   9. PELICULAS   alto 1500 · ticket de paises que sube 69 sobre la franja
   --------------------------------------------------------------- */
/* El aire bajo la ultima fila lo reserva .mcv-grid, no esta seccion: ver el
   padding-bottom de 117 mas abajo. */
.mcv-pel{min-height:calc(1500 * var(--u))}
.mcv-pel .mcv-rail{top:0}
.mcv-tk-paises{height:calc(357.1 * var(--u));padding-top:calc(39.1 * var(--u))}
.mcv-countries button{
  all:unset;display:block;cursor:pointer;
  font-weight:700;text-transform:uppercase;
  font-size:calc(24 * var(--u));
  line-height:calc(24 * var(--u));
  letter-spacing:var(--lsc);
  transition:color .18s ease;
}
.mcv-countries button:hover,
.mcv-countries button:focus-visible,
.mcv-countries button[aria-pressed="true"]{color:var(--wh)}
.mcv-sel-pueblo{top:calc(51.9 * var(--u))}
.mcv-sel-tema  {top:calc(149 * var(--u))}
/* ocultos por el momento: quitar esta regla para reactivar los filtros */
/* PUEBLO y TEMA: se decidio no desarrollarlos. Van con !important a proposito,
   porque el bloque responsive vuelve a declarar .mcv-select{display:flex} y sin
   esto reaparecian bajo 1280. El dato "pueblo" si se sigue mostrando en la
   linea de datos de cada tarjeta; lo que no existe es el filtro. */
.mcv-sel-pueblo,
.mcv-sel-tema{display:none !important}

/* grilla: 3 columnas de 488.1 desde x=186.3, filas de 282.3 */
.mcv-grid{
  position:relative;
  margin-left:calc(186.3 * var(--u));
  padding-top:calc(452.7 * var(--u));
  /* margen bajo la ultima fila: en el diseno son 117 (1500 alto de franja -
     452.7 de padding-top - 3 filas de 282.3 - 2 gaps de 41.7). Con mas o
     menos peliculas la franja crece por su contenido (min-height ya no
     alcanza), asi que este margen hay que reservarlo aqui, no dejarlo al
     min-height de la seccion. */
  padding-bottom:calc(117 * var(--u));
  width:calc(1549.7 * var(--u));
  display:grid;
  grid-template-columns:repeat(3, calc(488.1 * var(--u)));
  column-gap:calc(42.7 * var(--u));
  row-gap:calc(41.7 * var(--u));
}
.mcv-card{
  position:relative;isolation:isolate;overflow:hidden;
  height:calc(282.3 * var(--u));
  background:var(--ca);
  color:var(--wh);
  padding:calc(24 * var(--u)) calc(28.7 * var(--u));
}
/* Velo y sombra para que el texto se lea tambien sobre un fotograma claro
   (Chew Muley, Casaramano, Clorinda, Yakuchallay).

   El velo va en el mismo z-index que la imagen pero despues en el orden, asi
   que queda entre la foto y el texto: mas oscuro arriba, donde esta el texto,
   y casi nada abajo, donde va VER MAS. La miniatura sigue sin filtro. */
.mcv-card{text-shadow:0 1px 3px rgba(0,0,0,.6)}
.mcv-card::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(0,0,0,.42) 0%, rgba(0,0,0,.32) 45%, rgba(0,0,0,.14) 80%, rgba(0,0,0,.06) 100%);
  transition:opacity .3s ease;
}
/* Con el mouse encima el velo se va y el fotograma se ve limpio. Solo en
   dispositivos con hover real: en tactil el primer toque lo dejaria pegado. */
@media (hover:hover){
  .mcv-card:hover::after{opacity:0}
}
.mcv-card__more{text-shadow:none}
/* El '.mcv' de delante no es decorativo: Elementor trae '.elementor img
   {height:auto}', que con 0,1,1 le ganaba a '.mcv-card__img' a secas. Y
   como img es un elemento reemplazado, 'auto' no se estira entre top:0 y
   bottom:0: toma el alto del archivo, la imagen se sale de la tarjeta y el
   recorte deja de estar centrado. Pasaba solo en WordPress. */
.mcv .mcv-card__img{
  position:absolute;inset:0;z-index:-1;
  width:100%;height:100%;object-fit:cover;
  /* El recorte de la miniatura apunta SIEMPRE al centro del fotograma. Es el
     valor por defecto de object-position, pero va escrito: el fotograma llega
     con la proporcion del video (4:3 o 16:9) y la tarjeta es mucho mas ancha
     que alta, asi que 'cover' corta bastante, y un object-position que meta el
     tema de WordPress movería el encuadre de las 30 fichas de una. */
  object-position:50% 50%;
  /* La miniatura va TAL CUAL, sin ningun filtro encima: ni el blanco y negro
     del diseno (filter:grayscale(1)) ni la opacidad que lo acompanaba
     (opacity:.34). Las dos cosas se sacaron a pedido del museo. El 'none'
     va escrito para que ningun filtro del tema de WordPress se cuele. */
  filter:none;
}
/* Todo en mayusculas, con dos pesos: el titulo en Bold y el resto -anio,
   direccion, "pais | duracion"- en Light (pedido del 26-09-2026). Los
   videoclips tambien, "VIDEOCLIP" incluido (pedido del 28-09-2026). */
.mcv .mcv-card__t{
  font-weight:700;text-transform:uppercase;
  font-size:calc(25 * var(--u));
  line-height:calc(31.2 * var(--u));
  letter-spacing:.0095em;
}
.mcv .mcv-card__y{font-weight:300;text-transform:uppercase}
.mcv .mcv-card__meta{
  margin-top:calc(28.7 * var(--u));
  font-weight:300;
  text-transform:uppercase;
  font-size:calc(22 * var(--u));
  line-height:calc(31 * var(--u));
  letter-spacing:.0092em;
}
.mcv .mcv-card__more{
  position:absolute;
  right:calc(29.1 * var(--u));
  bottom:calc(26.9 * var(--u));
  width:calc(120 * var(--u));
  height:calc(31.1 * var(--u));
  display:flex;align-items:center;justify-content:space-between;
  padding:0 calc(8 * var(--u)) 0 calc(10.3 * var(--u));
  background:var(--gr);color:var(--pl);border:0;cursor:pointer;
  font-family:inherit;font-size:calc(18 * var(--u));line-height:1;
  text-transform:uppercase;letter-spacing:.031em;
  transition:filter .18s ease;
}
.mcv .mcv-card__more:hover{filter:brightness(1.08)}
.mcv .mcv-card__more b{font-size:calc(28 * var(--u));font-weight:700}
.mcv .mcv-empty,.mcv-loading{
  grid-column:1/-1;
  font-size:calc(24 * var(--u));line-height:calc(28.8 * var(--u));
  text-transform:uppercase;
}

/* ---------------------------------------------------------------
   10. PROGRAMACION EN EL MUSEO   alto 1853 · panel verde 979.3 de ancho
   --------------------------------------------------------------- */
/* La seccion se ajusta a su panel. En el diseno mide 1853 porque ahi el panel
   son 1550,9 fijos; con la programacion real cada dia trae distinto contenido,
   asi que el alto lo pone el panel y la seccion lo sigue. */
.mcv-prog{padding-bottom:calc(35 * var(--u))}
.mcv-prog .mcv-rail{top:0}
.mcv-tk-prog{height:calc(245.3 * var(--u));padding-top:calc(60.1 * var(--u))}
.mcv-prog__panel{
  --tk:var(--gr);
  position:relative;
  z-index:6;
  /* el cuerpo del panel arranca en 256.4 = 245.3 (bajo del ticket del museo) + 11.1:
     esos 11.1 los ocupa el zigzag de arriba del panel, que encaja con los dientes
     de abajo del ticket en el tramo del riel y sigue con picos verdes sobre la
     menta en todo el ancho restante */
  margin:calc(256.4 * var(--u)) 0 0 calc(289.4 * var(--u));
  width:calc(979.3 * var(--u));
  /* flow-root contiene el float de .mcv-days: sin esto, al no haber un alto
     fijo que lo sostenga, la columna de dias se sale del panel verde */
  display:flow-root;
  /* al menos una pantalla de alto; si el dia trae mas contenido, crece */
  min-height:100vh;
  background:var(--gr);
  /* mismo aire arriba y abajo. El diseno traia 44,9 y 60, pero ahi el panel
     tenia alto fijo y el de abajo era relleno sobrante, no aire real. */
  --aire:calc(44.9 * var(--u));
  padding:var(--aire) calc(24 * var(--u)) var(--aire) calc(19.7 * var(--u));
  font-size:calc(24 * var(--u));
  line-height:calc(24 * var(--u));
  text-transform:uppercase;
  letter-spacing:var(--lsc);
}
.mcv .mcv-days{float:left;width:calc(267.7 * var(--u));font-weight:700}
.mcv .mcv-days button{
  all:unset;display:block;cursor:pointer;
  line-height:calc(24 * var(--u));
  transition:color .18s ease;
}
.mcv .mcv-days button:hover,
.mcv .mcv-days button:focus-visible,
.mcv .mcv-days button[aria-selected="true"]{color:var(--wh)}
/* la columna de programa mide 400 en el diseno, no todo el panel. Arranca a
   la altura del dia elegido: --dia-y lo mide el JS (pedido del 28-09-2026) */
.mcv-prog__detail{margin-left:calc(267.7 * var(--u));width:calc(400 * var(--u));padding-top:var(--dia-y,0)}
.mcv-block + .mcv-block{margin-top:calc(48 * var(--u))}
.mcv .mcv-block__h{font-weight:700;color:var(--wh)}
.mcv .mcv-block__k{font-weight:300}
.mcv-item + .mcv-item{margin-top:calc(24 * var(--u))}
/* el libro escribe los titulos como viene ("Runa Simi", "CORRAL NEGRO"); en
   la grilla van todos en mayusculas para que se lean parejos */
.mcv .mcv-item__t{font-weight:700;text-transform:uppercase}
.mcv .mcv-item__d{font-weight:300}
/* En el panel del museo los videoclips van todo en mayusculas, como el resto
   (pedido del 28-09-2026; desde el 25-09 solo iba el titulo). En las bandas
   nada pasa a mayusculas: ahi se lee como viene del libro. */
.mcv .mcv-note{margin-top:calc(24 * var(--u));font-weight:300}
/* ese aire separa la nota de las peliculas; en un bloque sin peliculas
   ("10.30 h / Programa Escuela al Cine") la nota va pegada a la hora */
.mcv .mcv-block__h + .mcv-note{margin-top:0}
/* la inauguracion va arriba de la hora, asi que su aire va abajo y no
   arriba: pegada al borde del bloque, separada de la hora que le sigue */
.mcv .mcv-note--abre{
  margin-top:0;margin-bottom:calc(24 * var(--u));
  /* en negrita, como la hora y el dia: abre la funcion, no la comenta */
  font-weight:700;
}
/* y en el panel del museo, en blanco como la hora (pedido del 25-09-2026).
   Solo ahi: las bandas son claras y el blanco desapareceria */
.mcv-prog__detail .mcv-note--abre{color:var(--wh)}

/* ---------------------------------------------------------------
   11. Bandas con selector   alto 312 cada una
   --------------------------------------------------------------- */
/* 312 de alto con la lista arrancando en 160: una sede de tres lineas de 31
   termina en 253 y deja 59 de aire. Ese mismo aire se declara abajo para
   cuando la banda crece con varias sedes. */
.mcv-band{
  --alto:calc(312 * var(--u));    /* el del diseno */
  /* Un solo valor para los dos aires de la franja: el que hay sobre el select
     y el que queda bajo la ultima sede. Se declaran juntos a proposito, para
     que no se puedan desincronizar. America lo sobrescribe mas abajo. */
  --aire:calc(69.9 * var(--u));
  --corte:calc(66.7 * var(--u));  /* el ticket termina antes que la franja */
  min-height:var(--alto);
  padding-bottom:var(--aire);
}
.mcv-band .mcv-select{top:var(--aire)}
/* El riel se ancla a .mcv-cv, que sin sedes elegidas colapsaria y encogeria el
   ticket. Con este minimo la caja acompana a la franja tambien vacia. */
.mcv-band .mcv-cv{min-height:calc(var(--alto) - var(--aire))}
/* El ticket crece con la franja. En el diseno los tres terminan en 245,3 de
   una banda de 312, o sea 66,7 antes del final; si la banda crece y el ticket
   no, se abre un hueco y la cinta deja de llegar al ticket siguiente. El riel
   se ancla arriba (su 'top' de cada banda) y abajo, y el ticket lo llena.
   El 'bottom' se mide desde .mcv-cv, que termina --aire antes que la franja. */
.mcv-band .mcv-rail{bottom:calc(var(--corte) - var(--aire))}
.mcv-band .mcv-tk{height:100%}
.mcv-band .mcv-tk{font-size:calc(24 * var(--u));line-height:calc(24 * var(--u))}
/* El alto de cada ticket ya no se escribe: sale de su 'top' mas el alto de la
   franja. Con la banda en sus 312 da los valores del diseno: 310,3 / 334,4 /
   345,3. Lo que si es propio de cada una es donde empieza y donde cae su texto. */
.mcv-band--stgo .mcv-rail{top:calc(-65 * var(--u));z-index:5}
.mcv-band--stgo .mcv-tk{padding-top:calc(121.8 * var(--u))}
.mcv-band--reg  .mcv-rail{top:calc(-89 * var(--u));z-index:4}
.mcv-band--reg  .mcv-tk{padding-top:calc(145.9 * var(--u))}
.mcv-band--am   .mcv-rail{top:calc(-100 * var(--u));z-index:3}
.mcv-band--am   .mcv-tk{padding-top:calc(156.1 * var(--u))}
/* America baja 10 su select, y con el mismo valor baja su aire de abajo */
.mcv-band--am{--aire:calc(79.9 * var(--u))}

/* La lista va EN FLUJO, no absoluta: el diseno dibuja una sede por banda, pero
   hay regiones con tres (Maule) y paises con dos. Absoluta, la banda se
   quedaba en sus 312 y la lista se montaba sobre la banda siguiente. En flujo
   la banda crece, y como .mcv-cv abarca los 1920 el margen izquierdo deja la
   caja en la misma x de siempre. */
.mcv-results{
  position:relative;
  margin-left:calc(857 * var(--u));
  width:calc(879 * var(--u));
  font-size:calc(22 * var(--u));
  line-height:calc(31 * var(--u));
  letter-spacing:var(--lsb);
}
/* margin-top, NO padding-top: con padding la caja de la lista empieza en el
   borde de la banda y tapa el select, que es absoluto y va antes en el DOM;
   el select quedaba sin poder recibir el clic. Con margen, la caja entera
   arranca bajo el select. */
.mcv-band--stgo .mcv-results,.mcv-band--reg .mcv-results{margin-top:calc(160 * var(--u))}
.mcv-band--am .mcv-results{margin-top:calc(170 * var(--u))}
/* Aire entre una sede y la siguiente. El diseno traia 24, pensado para una
   banda con una sola sede y tres lineas; hoy una region trae hasta tres sedes
   y cada una muestra sus dias completos. Con 24 la separacion entre sedes era
   MENOR que la que hay entre dos dias de una misma sede (31), asi que la
   jerarquia se leia al reves y todo parecia una lista sola. 60 la vuelve a
   dejar en orden: dia (31) < sede (60). */
.mcv-venue + .mcv-venue{margin-top:calc(60 * var(--u))}
/* El nombre abre el bloque y por eso se separa de su direccion menos que del
   resto: nombre, direccion y fechas son UNA cosa. */
.mcv .mcv-venue__h{font-weight:700;text-transform:uppercase;margin-bottom:calc(6 * var(--u))}
/* El boton "Mas informacion" no se muestra. El enlace se sigue cargando en el
   JSON desde la web de cada sede: para volver a mostrarlo, borrar esta regla. */
.mcv-venue__link{display:none}

/* Programacion de la sede. El diseno no dibuja esta caja -- la banda solo traia
   nombre, direccion y fechas -- asi que se arma con las mismas piezas de la
   programacion del museo (.mcv-block, .mcv-item) para que las dos secciones se
   lean igual. La banda crece: .mcv-results ya esta en flujo, y el aire de
   abajo lo sigue poniendo --aire. */
/* la programacion desplegada es OTRO grupo dentro de la sede, asi que se
   separa mas de la direccion y las fechas (44) que dos dias entre si (31), y
   menos que dos sedes (60). De mayor a menor: sede, programacion, dia. */
.mcv-venue__prog{margin-top:calc(44 * var(--u))}
.mcv-day + .mcv-day{margin-top:calc(31 * var(--u))}
/* El dia y la hora van en ciruela, NO en blanco: el blanco es del panel del
   museo, que tiene fondo oscuro; las tres bandas son claras (menta, turquesa
   y verde) y ahi el blanco desaparece. Se destacan con peso y versalita. */
.mcv .mcv-day__h{font-weight:700;text-transform:uppercase;color:var(--pl)}
.mcv-venue__prog .mcv-block__h{font-weight:700;color:var(--pl)}
/* dentro de la sede los bloques van mas juntos que en el panel del museo: ahi
   son 48 sobre una columna de 400, aqui hay varios dias seguidos */
.mcv-venue__prog .mcv-block + .mcv-block{margin-top:calc(24 * var(--u))}
.mcv-venue__prog .mcv-item + .mcv-item{margin-top:calc(12 * var(--u))}
/* la hora abre la linea de su bloque, no una linea propia */
.mcv-venue__prog .mcv-block__h{margin-bottom:calc(6 * var(--u))}
/* Lo que no es pelicula -sede, direccion, fechas, dia, hora- lleva un fondo
   detras del texto, como una seleccion, para distinguirlo de las fichas
   (pedido del 28-09-2026). El color es el de la otra banda: verde sobre
   turquesa y sobre menta, turquesa sobre verde. clone repite el fondo y el
   aire en cada renglon cuando la linea se parte. */
.mcv-venue{--hl:var(--gr)}
.mcv-bg-gr .mcv-venue{--hl:var(--te)}
.mcv .mcv-venue .mcv-hl{
  background:var(--hl);
  padding:calc(3 * var(--u)) calc(10 * var(--u)) calc(3 * var(--u)) 0;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* ---------------------------------------------------------------
   12. CREDITOS   alto 628
   --------------------------------------------------------------- */
.mcv-cred{height:calc(628 * var(--u))}
/* -86: borde superior recto donde lo pone el diseno (6620 absoluto, con la
   seccion en 6706). Los dientes de abajo del ticket de America Latina caen
   encima, que es como funciona el diseno: dientes solo abajo y el ticket
   siguiente empieza recto bajo ellos. */
.mcv-cred .mcv-rail{top:calc(-86 * var(--u));z-index:2}
.mcv-tk-cred{
  z-index:2;
  height:calc(331.7 * var(--u));
  padding-top:calc(141.4 * var(--u));
  font-size:calc(22.75 * var(--u));
  line-height:calc(24 * var(--u));
}
.mcv-tk-org{
  position:absolute;left:0;width:100%;
  z-index:1;                    /* los dientes del ticket de arriba lo muerden */
  top:calc(312.4 * var(--u));   /* 226.4 desde la seccion: el diseno lo pone en 225.2 */
  height:calc(331 * var(--u));
  padding-top:calc(65.1 * var(--u));
}
.mcv .mcv-tk-org__k{font-weight:300}
.mcv .mcv-tk-org__n{margin-top:calc(18.9 * var(--u))}

/* Iconos de redes: en el diseno cada logo tiene su propio tamano (no son 4 cajas
   iguales) y estan alineados por su eje optico, en y=70.5 de la seccion. Los
   valores de abajo son las cajas de tinta medidas en el PDF del diseno:
   IG 24x23.8 en x=1546 · FB 15x27 en x=1604.8 · X 21.5x22 en x=1656.2 ·
   YT 30.8x21.2 en x=1705.2. El alto del svg no es la tinta: cada path ocupa
   una parte distinta de su viewBox de 24, asi que el alto y el left compensan
   ese margen interno. */
.mcv-social{
  position:absolute;
  top:calc(70.5 * var(--u));   /* eje optico de la fila */
  left:0;width:100%;height:0;
}
.mcv-social a{position:absolute;display:block;transition:opacity .18s ease}
.mcv-social a:hover{opacity:.6}
.mcv-social svg{display:block;width:auto;fill:currentColor}

.mcv-social .mcv-social__ig{left:calc(1546.1 * var(--u));top:calc(-11.9 * var(--u))}
.mcv-social .mcv-social__fb{left:calc(1593.4 * var(--u));top:calc(-18 * var(--u))}
.mcv-social .mcv-social__x {left:calc(1655.8 * var(--u));top:calc(-11.4 * var(--u))}
.mcv-social .mcv-social__yt{left:calc(1702.2 * var(--u));top:calc(-18.2 * var(--u))}
.mcv-social .mcv-social__ig svg{height:calc(23.8 * var(--u))}
.mcv-social .mcv-social__fb svg{height:calc(36 * var(--u))}
.mcv-social .mcv-social__x  svg{height:calc(22.8 * var(--u))}
.mcv-social .mcv-social__yt svg{height:calc(36.3 * var(--u))}

/* Fila de logos del PDF del 26-09-2026: sin la palabra "Apoyan" encima, y
   arrancando en x 745,8 (antes, en la columna de 857). Todas las medidas salen
   del PDF; tools/import-logos.py imprime la fila y los huecos. */
.mcv .mcv-apoyan{
  position:absolute;
  left:calc(745.8 * var(--u));
  top:calc(345 * var(--u));
  width:calc(990.4 * var(--u));
  font-size:calc(24 * var(--u));
  line-height:calc(24 * var(--u));
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:var(--lsc);
}
.mcv-logos{
  display:flex;align-items:center;
  height:calc(65 * var(--u));    /* alto de la fila en el diseno de los logos */
  margin-left:calc(-3 * var(--u));  /* el aire que cada PNG trae a los lados */
}
.mcv .mcv-logos img{max-height:calc(65 * var(--u));width:auto;object-fit:contain}
/* Los huecos son los del diseno, no repartidos: van bajando de 43,2 a 27,1 de
   izquierda a derecha. Repartirlos parejo -lo que hacia space-between- corria
   los logos varios px. Gobierno de Chile, Culturas y CONADI son un solo PNG,
   asi que sus tres cajas conservan su distancia sin reglas propias. */
.mcv-logos img:nth-child(2)   {margin-left:calc(43.6 * var(--u))}
.mcv-logos img:nth-child(3)   {margin-left:calc(39.7 * var(--u))}
.mcv-logos img:nth-child(4)   {margin-left:calc(34.3 * var(--u))}
.mcv-logos img:nth-child(5)   {margin-left:calc(29.1 * var(--u))}
.mcv-logos img:nth-child(6)   {margin-left:calc(27.2 * var(--u))}
.mcv-logos__ph{
  height:calc(76 * var(--u));width:calc(110 * var(--u));
  display:grid;place-items:center;
  border:1px dashed rgba(70,16,43,.35);
  font-size:calc(14 * var(--u));line-height:1;
  color:rgba(70,16,43,.5);
}

/* ---------------------------------------------------------------
   13. Botones y embed (reusados por la ficha de pelicula, bloque 13b)
   --------------------------------------------------------------- */
.mcv .mcv-btn{
  display:inline-flex;align-items:center;
  background:var(--pk);color:var(--wh);
  font-family:inherit;font-size:15px;text-transform:uppercase;letter-spacing:.06em;
  padding:.7em 1.2em;transition:filter .18s ease;
}
.mcv .mcv-btn--gr{background:var(--gr);color:var(--pl)}
.mcv .mcv-btn:hover{filter:brightness(1.08)}
.mcv-embed{position:relative;aspect-ratio:16/9;margin-top:28px;background:#000}
.mcv-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------------------------------------------------------------
   13b. Ficha de pelicula: pagina dedicada (reemplaza la modal), se abre en
   la MISMA pestana desde "Ver mas" en la grilla.

   El riel de tickets de la izquierda es LITERAL el mismo del hero: mismas
   clases (.mcv-rail, .mcv-hero__tk, .mcv-tk-logo, .mcv-tk-anos, .mcv-tk-nav,
   .mcv-tk-cta, .mcv-anos__n) y por lo tanto el mismo CSS, sin duplicar
   reglas. Asi queda pixel a pixel igual al de index.html en cualquier
   ancho de pantalla, incluido el recorte a movil de la seccion 15 (que ya
   apunta a esas mismas clases). No lleva el header del sitio (menu
   Precolombino): ese lo pone WordPress/Elementor alrededor de cada pagina.
   --------------------------------------------------------------- */
.mcv-ficha-top{position:relative;background:var(--mi)}
/* La franja de la ficha mide 1124 en el diseno (y 239 -> 1363 del PDF). */
.mcv-ficha-top .mcv-cv{position:relative;min-height:calc(1124 * var(--u))}
.mcv-ficha-top .mcv-rail{top:0}

/* Medidas de insumos/mucivi_colores identidad visual 2026_pelicula.pdf, que es
   un lienzo de 1920 igual que la landing, asi que las x son directas. El
   bloque de contenido va de 732 a 1749,6: la imagen ocupa 1004 y la columna de
   sinopsis se pasa un poco a la derecha de ella, como en el diseno. */
.mcv-ficha__content{
  position:relative;
  margin-left:calc(732 * var(--u));
  padding:calc(40 * var(--u)) calc(170.4 * var(--u)) calc(60 * var(--u)) 0;
  font-size:calc(20 * var(--u));
  line-height:calc(24 * var(--u));
}

.mcv-ficha__media img,
.mcv-ficha__media iframe,
.mcv-play{
  width:calc(1004 * var(--u));
  height:calc(532 * var(--u));
  display:block;
}
.mcv .mcv-ficha__media img{object-fit:cover}
.mcv-ficha__media iframe{border:0;background:#000}

/* Play sobre el poster. El diseno es plano y de aristas duras --tickets
   rectangulares, flecha del select sin curvas-- asi que el play es un
   triangulo solido, sin circulo ni sombra. Va discreto: el velo usa el ciruela
   de la paleta a baja opacidad y el triangulo el menta del fondo, y los dos
   suben al pasar el mouse o al enfocar con teclado. */
.mcv-play{all:unset;position:relative;cursor:pointer}
.mcv-play::after{
  content:"";position:absolute;inset:0;
  background:rgba(70,16,43,.16);
  transition:background .2s ease;
}
.mcv-play__tri{
  position:absolute;left:50%;top:50%;
  width:0;height:0;
  /* el triangulo se centra por su baricentro, no por su caja: por eso 45% */
  transform:translate(-45%,-50%);
  border-left:calc(46 * var(--u)) solid var(--mi);
  border-top:calc(28 * var(--u)) solid transparent;
  border-bottom:calc(28 * var(--u)) solid transparent;
  opacity:.82;
  transition:opacity .2s ease;
}
.mcv-play:hover::after,
.mcv-play:focus-visible::after{background:rgba(70,16,43,.3)}
.mcv-play:hover .mcv-play__tri,
.mcv-play:focus-visible .mcv-play__tri{opacity:1}
.mcv-play:focus-visible{outline:calc(3 * var(--u)) solid var(--pk);outline-offset:calc(-3 * var(--u))}

/* Datos a la izquierda desde x=857, sinopsis a la derecha desde x=1315,6.
   125 = 857 - 732, lo que el texto entra respecto del borde de la imagen. */
.mcv-ficha__body{
  display:grid;
  grid-template-columns:calc(380 * var(--u)) calc(434 * var(--u));
  gap:calc(78.6 * var(--u));
  align-items:start;
  padding-left:calc(125 * var(--u));
  /* deja los glifos del titulo en y=639,9 de la franja, como el PDF */
  margin-top:calc(73 * var(--u));
}
.mcv-ficha__meta{min-width:0}

/* Titulo 30/30. El diseno lo parte en dos pesos por los dos puntos: bold lo
   que va antes y regular el subtitulo, cada uno en su linea. */
.mcv .mcv-ficha__t{
  font-size:calc(30 * var(--u));line-height:calc(30 * var(--u));
  font-weight:700;text-transform:uppercase;
  /* 114,5 entre el glifo del titulo y el de la direccion, como el PDF */
  margin-bottom:calc(20.5 * var(--u));
}
.mcv .mcv-ficha__t .mcv-ficha__sub{display:block;font-weight:400}

/* Direccion y "Proximas exhibiciones:" en Medium (500), no en bold */
.mcv .mcv-ficha__director{font-weight:500}
.mcv .mcv-ficha__spec{margin-bottom:calc(24 * var(--u))}
.mcv .mcv-ficha__exh-k{font-weight:500}

/* Sinopsis 25/31, el mismo cuerpo que la tercera columna del intro */
.mcv .mcv-ficha__syn{font-size:calc(25 * var(--u));line-height:calc(31 * var(--u))}
.mcv .mcv-ficha__syn p + p{margin-top:1em}
.mcv-embed{margin-top:calc(32 * var(--u))}

/* Botones: caja de 211 x 40 en x=817, separadas 8. Su texto arranca en 857,
   la misma guia que el titulo y los datos: la caja se sale --sangria a la
   izquierda con margen negativo y recupera esos pixeles como padding, asi que
   mover --sangria mueve la caja y nunca el texto. */
.mcv-ficha__links{
  --sangria:calc(40 * var(--u));
  display:flex;flex-direction:column;align-items:flex-start;
  gap:calc(8 * var(--u));
  margin:calc(40.5 * var(--u)) 0 0 calc(-1 * var(--sangria));
}
.mcv-ficha__links .mcv-btn{
  width:calc(211 * var(--u));
  height:calc(40 * var(--u));
  justify-content:flex-start;
  padding:0 calc(12 * var(--u)) 0 var(--sangria);
  font-size:calc(20 * var(--u));
  line-height:calc(24 * var(--u));
  letter-spacing:0;
  text-transform:uppercase;
  color:var(--pl);
}
.mcv .mcv-btn--te{background:var(--te);color:var(--pl)}
/* oculto por el momento: quitar esta regla para reactivar "Ver película".
   El boton se sigue generando con el enlace de cada pelicula; solo no se
   muestra. Va con !important porque el bloque responsive vuelve a declarar
   .mcv-ficha__links .mcv-btn. */
.mcv .mcv-btn--ver{display:none !important}

/* mismo quiebre (1279px) que el resto del sitio: el riel ya se apila solo
   porque comparte las reglas de .mcv-rail/.mcv-hero__tk/.mcv-tk de la
   seccion 15, aqui solo hace falta soltar el margen que le abria paso. */
@media (max-width:1279px){
  .mcv-ficha-top .mcv-cv{min-height:0}
  .mcv-ficha__content{
    margin-left:0;padding:6vw 0 0;
    font-size:var(--f);line-height:1.45;
  }
  /* una sola columna: se suelta la sangria de 124 y los anchos fijos */
  .mcv-ficha__body{
    grid-template-columns:minmax(0,1fr);gap:24px;margin-top:6vw;padding-left:0;
  }
  .mcv .mcv-ficha__media img,.mcv .mcv-ficha__media iframe,.mcv .mcv-play{
    width:100%;height:auto;aspect-ratio:16/9;
  }
  .mcv .mcv-ficha__t{font-size:calc(var(--f) * 1.5);line-height:1.2;margin-bottom:.8em}
  .mcv .mcv-ficha__spec{margin-bottom:.8em}
  .mcv .mcv-ficha__syn{font-size:var(--f);line-height:1.5}
  /* misma sangria que arriba, en em: el texto del boton sigue cayendo en la
     guia de la columna tambien en pantallas chicas */
  /* en calc sobre --f, no en em: el em del boton es mas chico que el del
     contenedor y la sangria dejaba de calzar con el texto por 3 px */
  .mcv-ficha__links{--sangria:calc(var(--f) * 1.2);gap:6px;margin-top:2em}
  .mcv-ficha__links .mcv .mcv-btn{
    width:min(300px,100%);height:auto;padding:.7em 1.2em;
    padding-left:var(--sangria);font-size:calc(var(--f) * .85);
  }
}

/* ---------------------------------------------------------------
   14. FOOTER institucional del museo   alto 587.8 · fondo #12100d
   Brandon Grotesque; medidas del PDF (footer relativo a su borde superior).
   --------------------------------------------------------------- */
.mcv-footer{
  background:#12100d;
  color:var(--wh);
  height:calc(587.8 * var(--u));
  font-family:"Brandon Grotesque","Brandon Text",system-ui,sans-serif;
}
.mcv-footer .mcv-cv{height:100%}
.mcv-footer a{transition:opacity .18s ease}
.mcv-footer a:hover{opacity:.6}

/* lineas divisorias */
.mcv-foot__rule{
  position:absolute;left:calc(213.9 * var(--u));width:calc(1492 * var(--u));
  /* en el diseno son 0.75 de alto en blanco puro; 1px al 75% da la misma
     presencia y queda nitido en pantalla */
  height:1px;background:rgba(255,255,255,.75);border:0;
}
.mcv-foot__rule--top{top:calc(62.8 * var(--u))}
.mcv-foot__rule--bot{top:calc(430.8 * var(--u))}

/* marca del museo (arriba a la izquierda) */
.mcv .mcv-foot__brand{
  position:absolute;left:calc(213.9 * var(--u));top:calc(90 * var(--u));
  font-weight:700;text-transform:uppercase;
  font-size:calc(24 * var(--u));line-height:calc(23.9 * var(--u));
  letter-spacing:.01em;
}

/* columnas */
.mcv-foot__col{position:absolute;top:calc(84.5 * var(--u))}
.mcv-foot__col--info{left:calc(547.9 * var(--u))}
.mcv-foot__col--inv {left:calc(894.8 * var(--u))}
.mcv-foot__col--sup {left:calc(1234.8 * var(--u))}
.mcv-foot__col--opp {left:calc(1501 * var(--u))}
.mcv-foot__col h3{
  font-weight:700;
  font-size:calc(26 * var(--u));line-height:calc(26 * var(--u));
  letter-spacing:.005em;
}
.mcv-foot__col ul{
  margin-top:calc(28.5 * var(--u));
  font-weight:400;
  font-size:calc(20 * var(--u));line-height:calc(24 * var(--u));
}
.mcv-foot__col li{margin-bottom:calc(24 * var(--u))}
.mcv-foot__col--info .mcv-foot__h2{
  position:absolute;top:calc(168.2 * var(--u));left:0;margin:0;white-space:nowrap;
}
.mcv-foot__logos{
  position:absolute;top:calc(227.3 * var(--u));left:0;
  display:flex;align-items:center;gap:calc(37 * var(--u));height:calc(40 * var(--u));
}
.mcv .mcv-foot__logos img{height:calc(40 * var(--u));width:auto;display:block}

/* barra inferior: enlaces + redes */
.mcv-foot__nav{
  position:absolute;left:calc(213.9 * var(--u));top:calc(481 * var(--u));
  display:flex;align-items:center;gap:calc(29 * var(--u));
  font-weight:500;
  font-size:calc(18 * var(--u));line-height:calc(18 * var(--u));
}
/* Igual que en creditos: en el diseno cada logo trae su propio tamano, no son
   nueve cajas iguales. Los valores salen de medir la tinta en el PDF; el alto
   del svg no es la tinta, porque cada path ocupa una parte distinta de su
   viewBox de 24, y el left/top compensan ese margen interno. Eje optico de la
   fila: y=485 del footer. */
.mcv-foot__social{
  position:absolute;top:calc(485 * var(--u));left:0;
  width:100%;height:0;
}
.mcv-foot__social a{position:absolute;display:block;color:var(--wh)}
.mcv-foot__social svg{display:block;width:auto;fill:currentColor}

.mcv-foot__ig{left:calc(1234.8 * var(--u));top:calc(-11.6 * var(--u))}
.mcv-foot__fb{left:calc(1282.1 * var(--u));top:calc(-17.8 * var(--u))}
.mcv-foot__x {left:calc(1344.5 * var(--u));top:calc(-11 * var(--u))}
.mcv-foot__yt{left:calc(1390.8 * var(--u));top:calc(-18.4 * var(--u))}
.mcv-foot__tt{left:calc(1449.6 * var(--u));top:calc(-15.8 * var(--u))}
.mcv-foot__sc{left:calc(1498.3 * var(--u));top:calc(-21 * var(--u))}
.mcv-foot__vm{left:calc(1560.9 * var(--u));top:calc(-13.5 * var(--u))}
.mcv-foot__li{left:calc(1613.4 * var(--u));top:calc(-16.8 * var(--u))}
.mcv-foot__wa{left:calc(1668.7 * var(--u));top:calc(-13.4 * var(--u))}
.mcv-foot__ig svg{height:calc(23.6 * var(--u))}
.mcv-foot__fb svg{height:calc(36 * var(--u))}
.mcv-foot__x  svg{height:calc(22.8 * var(--u))}
.mcv-foot__yt svg{height:calc(36.9 * var(--u))}
.mcv-foot__tt svg{height:calc(33 * var(--u))}
/* SoundCloud y LinkedIn: nuestro glifo tiene otra proporcion que el del diseno,
   asi que van a la media entre calzar por ancho y calzar por alto */
.mcv-foot__sc svg{height:calc(41.5 * var(--u))}
.mcv-foot__vm svg{height:calc(26.3 * var(--u))}
.mcv-foot__li svg{height:calc(30.6 * var(--u))}
.mcv-foot__wa svg{height:calc(27.1 * var(--u))}

/* Iconos de contorno (Instagram y X, en creditos y en footer). Con trazo la
   tinta mide el path MAS el grosor, y por eso los altos de esos dos no son los
   del diseno: lo compensan. Va despues de las reglas de fill de ambas filas
   para ganarles. */
.mcv-social__ig svg,.mcv-social__x svg,
.mcv-foot__ig svg,.mcv-foot__x svg{fill:none;stroke:currentColor;stroke-linejoin:round}
.mcv-social__ig svg,.mcv-foot__ig svg{stroke-width:2.23}   /* 2.2 del diseno */
.mcv-social__x  svg,.mcv-foot__x  svg{stroke-width:2.12}   /* 1.8 del diseno */
.mcv-ico__dot{fill:currentColor;stroke:none}


/* ---------------------------------------------------------------
   14b. Impresion proporcional en pantallas grandes
   Sobre 1920 el lienzo queda centrado y los fondos siguen a sangre.
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   15. Responsive: bajo 1280 el lienzo fijo deja de servir
   --------------------------------------------------------------- */
@media (max-width:1279px){
  .mcv{--u:1px;--f:clamp(15px,1.85vw,20px)}
  .mcv-sec,.mcv-hero,.mcv-intro,.mcv-fechas,.mcv-pel,.mcv-prog,.mcv-band,.mcv-cred{
    height:auto;min-height:0;
  }
  .mcv-cv{width:100%;padding:0 5vw;height:auto}
  .mcv-rail,.mcv-hero__tk,.mcv-tk-org,.mcv-select,.mcv-results,.mcv-social,
  .mcv .mcv-apoyan,.mcv .mcv-intro__col,
  .mcv .mcv-intro__col--1,.mcv .mcv-intro__col--2,.mcv .mcv-intro__col--3,
  .mcv-prog__detail,.mcv .mcv-days,.mcv-fechas__inner{
    position:static;left:auto;top:auto;right:auto;width:auto;max-width:100%;
  }
  /* el ticket-anos vuelve a quedar position:relative (el reset de arriba lo
     saca por ser .mcv-hero__tk), si no el "2" absoluto se va a posicionar
     contra el lienzo entero en vez de quedar pegado al ticket verde */
  .mcv-tk-anos{position:relative}
  .mcv-tk{
    width:min(340px,100%);
    padding:calc(var(--f) * 1.4) calc(var(--f) * .9);
    font-size:calc(var(--f) * 1.05);line-height:1.2;
    height:auto !important;
  }
  .mcv-hero{padding:0;height:auto}
  .mcv-hero .mcv-cv{padding-top:38vh;padding-bottom:6vw}
  .mcv-hero__tk{margin-bottom:calc(var(--zh) * 1px)}
  .mcv-anos__n{left:calc(var(--f) * 2.1);top:calc(var(--f) * 2.5);font-size:calc(var(--f) * .95);line-height:1}

  .mcv-intro{padding:8vw 0}
  .mcv .mcv-intro__col,.mcv .mcv-intro__col--3{font-size:var(--f);line-height:1.45}
  .mcv .mcv-intro__col + .mcv-intro__col{margin-top:calc(var(--f) * 1.4)}
  .mcv .mcv-unesco{font-size:inherit;font-weight:400}

  .mcv-fechas{display:block}
  .mcv-fechas__panel{padding:8vw 5vw}
  .mcv-fechas__inner{position:static;width:auto;font-size:var(--f);line-height:1.25}
  .mcv-fecha + .mcv-fecha{margin-top:1.5em}
  .mcv-fechas__media{height:52vw;max-height:380px}

  .mcv-pel{padding:8vw 0}
  .mcv-select{
    display:flex;width:100%;height:auto;margin-top:calc(var(--f) * 1.2);
  }
  .mcv-select select{font-size:var(--f);line-height:1;padding:1.1em 1.2em}
  .mcv .mcv-select__btn{width:3.2em}
  .mcv .mcv-select__btn svg{width:1.4em;height:1.4em}
  .mcv-countries button{font-size:calc(var(--f) * 1.05);line-height:1.28}

  .mcv-grid{
    width:100%;padding:0;margin:8vw 0 0;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:3vw;row-gap:3vw;
  }
  .mcv-card{height:auto;aspect-ratio:490/290;padding:calc(var(--f) * .9) calc(var(--f) * 1.1)}
  .mcv .mcv-card__t{font-size:calc(var(--f) * 1.1);line-height:1.2}
  .mcv .mcv-card__meta{margin-top:1.2em;font-size:calc(var(--f) * .9);line-height:1.25}
  .mcv .mcv-card__more{
    right:calc(var(--f) * 1.1);bottom:calc(var(--f) * .9);
    width:auto;height:auto;gap:.6em;padding:.4em .7em;
    font-size:calc(var(--f) * .78);
  }
  .mcv .mcv-card__more b{font-size:calc(var(--f) * 1.1)}

  .mcv-prog{padding:8vw 0}
  .mcv-prog__panel{
    position:static;margin:calc(var(--f) * 1.5) 0 0;width:auto;min-height:0;
    padding:calc(var(--f) * 1.6);
    font-size:var(--f);line-height:1.3;
  }
  .mcv .mcv-days{float:none;width:auto;display:flex;flex-wrap:wrap;gap:.9em}
  .mcv .mcv-days button{line-height:1.3}
  .mcv-prog__detail{margin-left:0;padding-top:calc(var(--f) * 1.4)}
  .mcv-block + .mcv-block{margin-top:calc(var(--f) * 1.6)}
  .mcv-item{margin-top:calc(var(--f) * .9)}
  /* misma jerarquia que en escritorio, en em: sede > programacion > dia */
  .mcv-venue + .mcv-venue{margin-top:calc(var(--f) * 2.2)}
  .mcv-venue__prog{margin-top:calc(var(--f) * 1.4)}
  .mcv-day + .mcv-day{margin-top:calc(var(--f) * 1.2)}
  .mcv-venue__prog .mcv-block + .mcv-block{margin-top:calc(var(--f) * .9)}
  .mcv-venue__prog .mcv-item + .mcv-item{margin-top:calc(var(--f) * .5)}
  .mcv-venue__prog .mcv-block__h{margin-bottom:calc(var(--f) * .25)}
  .mcv .mcv-note{margin-top:calc(var(--f) * .9)}

  .mcv-band{padding:8vw 0}
  /* Estas tres van con dos clases a proposito: las reglas de escritorio que
     hay que anular tambien las usan (.mcv-band--reg .mcv-tk, etc.) y con una
     sola clase les ganaban en especificidad. Sin esto, en movil el ticket
     arrastraba el padding-top del diseno --145,9 px a 1:1-- y entre el select
     y la lista de sedes quedaban 160 px de hueco. */
  .mcv-band .mcv-cv{min-height:0}
  .mcv-band--stgo .mcv-tk,
  .mcv-band--reg  .mcv-tk,
  .mcv-band--am   .mcv-tk{padding-top:calc(var(--f) * 1.4)}
  .mcv-band--stgo .mcv-results,
  .mcv-band--reg  .mcv-results,
  .mcv-band--am   .mcv-results{margin-top:calc(var(--f) * 1.2)}
  .mcv-results{
    margin-left:0;margin-top:calc(var(--f) * 1.2);
    font-size:calc(var(--f) * .95);line-height:1.4;
  }

  .mcv-cred{padding:8vw 0}
  .mcv-tk-org{margin-top:calc(var(--zh) * 1px)}
  .mcv-social{
    display:flex;align-items:center;gap:calc(var(--f) * 1.2);
    margin-top:calc(var(--f) * 1.6);
    justify-content:flex-start;height:auto;
  }
  .mcv-social a{position:static;top:auto;left:auto}
  .mcv-social .mcv-social__ig svg,.mcv-social .mcv-social__fb svg,
  .mcv-social .mcv-social__x  svg,.mcv-social .mcv-social__yt svg{height:calc(var(--f) * 1.3)}
  .mcv .mcv-apoyan{margin-top:calc(var(--f) * 1.8);font-size:var(--f);line-height:1.3}
  .mcv-logos{height:auto;flex-wrap:wrap;gap:calc(var(--f) * 1.6);margin-top:calc(var(--f) * 1.2);margin-left:0}
  .mcv .mcv-logos img,.mcv .mcv-logos__ph{height:52px;max-height:52px}
  .mcv .mcv-logos img{margin-left:0}   /* en angosto mandan gap y el salto de linea */
  .mcv-logos__ph{width:100px;font-size:11px}

  /* FOOTER INSTITUCIONAL
     Esta todo posicionado en absoluto con las coordenadas del diseno --las
     columnas en x 548 / 895 / 1235 / 1502, las lineas de 1492 de ancho-- asi
     que bajo 1280 quedaba entero fuera de la pantalla: no se veia nada, y solo
     no aparecia scroll horizontal porque el body lo recorta. Aqui pasa a
     flujo. */
  .mcv-footer{height:auto;padding:10vw 0}
  .mcv-footer .mcv-cv{height:auto}
  .mcv-foot__rule{
    position:static;left:auto;top:auto;width:100%;
    margin:0 0 calc(var(--f) * 1.8);
  }
  .mcv-foot__rule--bot{margin:calc(var(--f) * 2.2) 0 calc(var(--f) * 1.6)}
  .mcv .mcv-foot__brand{
    position:static;left:auto;top:auto;
    font-size:calc(var(--f) * 1.15);line-height:1.2;
    margin-bottom:calc(var(--f) * 2);
  }
  .mcv-foot__col{
    position:static;left:auto;top:auto;
    margin-bottom:calc(var(--f) * 2);
  }
  .mcv-foot__col h3{font-size:calc(var(--f) * 1.05);line-height:1.2}
  .mcv-foot__col ul{
    margin-top:calc(var(--f) * .9);
    font-size:var(--f);line-height:1.3;
  }
  .mcv-foot__col li{margin-bottom:calc(var(--f) * .8)}
  .mcv-foot__col--info .mcv-foot__h2{
    position:static;top:auto;left:auto;white-space:normal;
    margin-top:calc(var(--f) * 1.8);
  }
  .mcv-foot__logos{
    position:static;top:auto;left:auto;height:auto;
    flex-wrap:wrap;gap:calc(var(--f) * 1.4);
    margin-top:calc(var(--f) * 1);
  }
  .mcv .mcv-foot__logos img{height:38px}
  .mcv-foot__nav{
    position:static;top:auto;left:auto;
    flex-wrap:wrap;gap:calc(var(--f) * .9) calc(var(--f) * 1.2);
    font-size:calc(var(--f) * .9);line-height:1.4;
  }
  /* los nueve iconos van uno a uno en absoluto con su x propia; en flujo se
     reparten solos y todos al mismo alto */
  .mcv-foot__social{
    position:static;top:auto;left:auto;width:auto;height:auto;
    display:flex;flex-wrap:wrap;align-items:center;
    gap:calc(var(--f) * 1.35);
    margin-top:calc(var(--f) * 1.8);
  }
  .mcv-foot__social a{position:static;top:auto;left:auto}
  .mcv-foot__social svg{height:calc(var(--f) * 1.25)}
}

/* Entre 600 y 1280 las cuatro columnas del footer caben de a dos */
@media (min-width:600px) and (max-width:1279px){
  .mcv-foot__col{
    display:inline-block;vertical-align:top;
    width:48%;padding-right:2%;
  }
}

@media (max-width:640px){
  .mcv-grid{grid-template-columns:minmax(0,1fr)}
  .mcv-hero .mcv-cv{padding-top:30vh}
}

@media (prefers-reduced-motion:reduce){
  .mcv *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}