/* ═══════════════════════════════════════════════════════════
   VWT · MAIPÚ · "El archivo"
   Maipú no compite por altura ni por prestigio: compite por
   antigüedad. La página se compone como un archivo histórico.
   El año es el elemento dominante, la retícula alterna un
   texto angosto con láminas a sangre, y las bodegas se ordenan
   por fecha de fundación, no por nombre.

   ADN Vito: Poppins, bordó como único acento, tempo .9s con su
   curva, navbar y footer del sitio. Nada más se comparte:
   ningún componente de Luján, Valle de Uco ni la home.
   ═══════════════════════════════════════════════════════════ */

.mp{
  --mp-pad: clamp(1.4rem, 5vw, 6rem);
  --mp-max: calc(1400px * var(--k, 1));
  --mp-sec: clamp(4rem, calc(10 * var(--1vh)), 7.5rem);
  --mp-t: .9s;
  --mp-e: cubic-bezier(.22,1,.36,1);
  --mp-acc: #AC3749;
  --mp-nav: var(--nav-h, 62px);
}
.mp-in{ max-width: var(--mp-max); margin: 0 auto }

/* ── piezas comunes ── */
.mp-h2{
  margin: clamp(.9rem,1.8vw,1.3rem) 0 0;
  font-size: calc(99.2px * var(--k, 1));
  font-weight: 700; letter-spacing: -.055em; line-height: .94;
  color: var(--vh-ink, #100C0D);
}
.mp-kick{ margin: 0; font-size: .82rem; font-weight: 600; color: var(--mp-acc) }
.mp-lnk{ display: inline-flex; align-items: center; gap: .3rem; color: #fff; text-decoration: none; font-size: .88rem; font-weight: 600 }
.mp-lnk i{ font-style: normal; font-size: 1.2em; transition: transform var(--mp-t) var(--mp-e) }
.mp-lnk:hover i{ transform: translateX(4px) }

/* ── botones · misma familia que el resto del sitio ── */

/* ── botones · misma familia que el resto del sitio ── */
.mp-btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.05rem 2.1rem; border-radius: 100px; border: 1px solid transparent;
  background: var(--vh-paper); color: var(--vh-ink); text-decoration: none;
  font-size: .88rem; font-weight: 600; letter-spacing: -.01em;
  transition: background-color var(--mp-t) var(--mp-e), color var(--mp-t) var(--mp-e),
              border-color var(--mp-t) var(--mp-e), transform var(--mp-t) var(--mp-e);
}
.mp-btn:hover{ background: var(--mp-acc); color: #fff; transform: translateY(-2px) }
.mp-btn-ink{ background: var(--vh-ink, #100C0D); color: var(--vh-paper, #fff) }
.mp-btn-ink:hover{ background: var(--mp-acc); color: #fff }
.mp-btn-line{ background: transparent; border-color: var(--vh-line-2, rgba(16,12,13,.22)); color: var(--vh-ink, #100C0D) }
.mp-btn-line:hover{ background: var(--vh-ink, #100C0D); border-color: var(--vh-ink, #100C0D); color: var(--vh-paper, #fff); transform: none }
.mp-btn:focus-visible{ outline: 3px solid var(--mp-acc); outline-offset: 3px }

/* ── 5 · LAS BODEGAS · índice por año ──────────────────────
   El año manda: es lo primero que se lee. La foto aparece
   dentro de la fila, sin mover nada de la lista.
   ─────────────────────────────────────────────────────────── */
.mp-bod{ padding: var(--mp-sec) var(--mp-pad); background: var(--vh-smoke, #F6F3F3) }
.mp-bod-hd{ margin-bottom: calc(57.6px * var(--k, 1))}
.mp-lista{ list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--vh-line, rgba(16,12,13,.12)) }
.mp-lista li{ border-bottom: 1px solid var(--vh-line, rgba(16,12,13,.12)) }
.mp-b{
  position: relative;
  display: grid;
  grid-template-columns: clamp(88px,9vw,140px) minmax(0,1fr) clamp(110px,12vw,180px) minmax(0,1.05fr) 42px;
  align-items: baseline; gap: calc(38.4px * var(--k, 1));
  padding: clamp(1.2rem,2.4vw,1.9rem) 0;
  text-decoration: none; color: inherit;
}
.mp-b-y{
  font-size: calc(25.6px * var(--k, 1)); font-weight: 700;
  letter-spacing: -.04em; color: var(--mp-acc); font-variant-numeric: tabular-nums;
}
.mp-b-n{
  font-size: calc(35.2px * var(--k, 1)); font-weight: 700;
  letter-spacing: -.045em; line-height: 1.05; color: var(--vh-ink, #100C0D);
  transition: color var(--mp-t) var(--mp-e);
}
.mp-b-z{ font-size: .88rem; color: var(--vh-mut, #7F6E73) }
.mp-b-d{ font-size: .96rem; line-height: 1.5; color: var(--vh-soft, #3A3436) }
.mp-b-go{
  justify-self: end; align-self: center;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--vh-line-2, rgba(16,12,13,.22)); color: var(--vh-ink, #100C0D); font-size: .85rem;
  transition: background-color var(--mp-t) var(--mp-e), border-color var(--mp-t) var(--mp-e),
              color var(--mp-t) var(--mp-e), transform var(--mp-t) var(--mp-e);
}
/* la foto se despliega dentro de la fila: nada se mueve */
@media (hover: hover) and (pointer: fine){
  .mp-b:hover .mp-b-n{ color: var(--mp-acc) }
  .mp-b:hover .mp-b-go{ background: var(--mp-acc); border-color: var(--mp-acc); color: #fff; transform: translateX(3px) }
}

/* ── 6 · MODALIDADES · dos columnas, sin tarjetas ── */
.mp-mod{ padding: var(--mp-sec) var(--mp-pad); background: var(--vh-paper, #fff) }
.mp-mod-hd{ max-width: 64ch; margin-bottom: calc(57.6px * var(--k, 1))}
.mp-mod-note{
  margin: clamp(1.2rem,2.4vw,1.8rem) 0 0;
  font-size: calc(18.6px * var(--k, 1)); line-height: 1.6; font-weight: 300; color: var(--vh-soft, #3A3436);
}
.mp-mod-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: calc(80.0px * var(--k, 1))}
.mp-m{ padding-top: calc(28.8px * var(--k, 1)); border-top: 1px solid var(--vh-line, rgba(16,12,13,.12)) }
.mp-m-full{ border-top: 3px solid var(--mp-acc) }
.mp-m-n{ margin: 0; font-size: .78rem; font-weight: 600; color: var(--vh-mut, #7F6E73) }
.mp-m-full .mp-m-n{ color: var(--mp-acc) }
.mp-m h3{
  margin: .7rem 0 0; font-size: calc(38.4px * var(--k, 1)); font-weight: 700;
  letter-spacing: -.045em; line-height: 1.05; color: var(--vh-ink, #100C0D);
}
.mp-m-p{
  margin: clamp(1rem,2vw,1.4rem) 0 0; max-width: 44ch;
  font-size: calc(17.3px * var(--k, 1)); line-height: 1.62; color: var(--vh-soft, #3A3436);
}
.mp-m ul{ list-style: none; margin: clamp(1.4rem,2.8vw,2rem) 0 clamp(1.6rem,3vw,2.2rem); padding: 0 }
.mp-m li{
  position: relative; padding: .72rem 0 .72rem 1.9rem;
  border-bottom: 1px solid var(--vh-line, rgba(16,12,13,.1));
  font-size: 1rem; line-height: 1.45; color: var(--vh-ink, #100C0D);
}
.mp-m li::before{ position: absolute; left: 0; top: .72rem; width: 18px; text-align: center; font-size: .9rem; font-weight: 700 }
.mp-m .si::before{ content: "\2713"; color: var(--mp-acc) }
.mp-m .no::before{ content: "\2014"; color: var(--vh-mut, #7F6E73) }
.mp-m .no{ color: var(--vh-mut, #7F6E73) }

/* ── 7 · MAPA ── */

/* ── 8 · FICHA · título anclado y filas ── */
.mp-ficha{ padding: var(--mp-sec) var(--mp-pad); background: var(--vh-smoke, #F6F3F3) }
.mp-ficha-grid{ display: grid; grid-template-columns: .72fr 1.28fr; gap: calc(80.0px * var(--k, 1)); align-items: start }
.mp-ficha-hd{ position: sticky; top: calc(var(--mp-nav) + 2rem) }
.mp-ficha-list{ margin: 0; padding: 0; border-top: 1px solid var(--vh-line, rgba(16,12,13,.12)) }
.mp-ficha-list div{
  display: grid; grid-template-columns: minmax(150px,.4fr) 1fr; gap: 1.2rem;
  padding: clamp(1rem,2vw,1.4rem) 0; border-bottom: 1px solid var(--vh-line, rgba(16,12,13,.12));
}
.mp-ficha-list dt{ margin: 0; font-size: calc(17.3px * var(--k, 1)); color: var(--vh-mut, #7F6E73) }
.mp-ficha-list dd{
  margin: 0; font-size: calc(17.3px * var(--k, 1)); font-weight: 600;
  letter-spacing: -.02em; color: var(--vh-ink, #100C0D);
}

/* ── 9 · CIERRE · bloque sólido, con el año detrás ── */

/* ── 10 · OTROS TOURS · índice tipográfico ── */

/* ── Adaptación ───────────────────────────────────────────── */
@media (max-width: calc(1024px * var(--k, 1))){
  .mp-mod-grid{ grid-template-columns: 1fr; gap: 2.6rem }
  .mp-ficha-grid{ grid-template-columns: 1fr; gap: 1.8rem }
  .mp-ficha-hd{ position: static }
  .mp-b{ grid-template-columns: clamp(72px,10vw,100px) minmax(0,1fr) 42px }
  .mp-b-z{ grid-column: 2; margin-top: .2rem }
  .mp-b-d{ grid-column: 2; margin-top: .4rem }
  .mp-b-go{ grid-row: 1 / span 3; grid-column: 3 }
}
@media (max-width: 640px){
  .mp-ficha-list div{ grid-template-columns: 1fr; gap: .3rem }
}

/* ── El selector de regiones, dentro del eje de esta página ── */
.mp-map .vwt-regiones-wrap{ max-width: var(--mp-max); margin: 0 auto clamp(1.4rem,2.6vw,2rem); padding-inline: 0 }

/* ═══════════════════════════════════════════════════════════
   DÓNDE QUEDA · el mapa es el lienzo
   No es un recuadro dentro de una sección: ocupa el ancho
   completo y la altura de una pantalla, y el contenido se
   apoya encima, a la izquierda, sobre un panel de vidrio.
   ═══════════════════════════════════════════════════════════ */
.mp-map{ position: relative; background: #0B0708 }
.mp-map-canvas{ position: relative; min-height: clamp(560px, calc(88 * var(--1vh)), 940px) }
.mp-map #map{ position: absolute; inset: 0; width: 100%; height: 100%; background: #0B0708 }
.mp-map-panel{
  position: absolute; z-index: 2; left: var(--mp-pad); top: 50%; transform: translateY(-50%);
  width: min(420px, calc(100% - var(--mp-pad) * 2));
  padding: calc(38.4px * var(--k, 1));
  border-radius: 20px;
  background: rgba(11,7,8,.72);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
}
.mp-map-panel .mp-kick{ color: #fff }
.mp-map-h{
  margin: clamp(.8rem,1.6vw,1.1rem) 0 0;
  font-size: calc(46.4px * var(--k, 1)); font-weight: 700;
  letter-spacing: -.05em; line-height: 1; color: #fff;
}
.mp-map-p{
  margin: clamp(.9rem,1.8vw,1.2rem) 0 0;
  font-size: .96rem; line-height: 1.55; color: rgba(255,255,255,.76);
}
.mp-map-panel .vwt-regiones{
  margin-top: calc(25.6px * var(--k, 1));
  border-top-color: rgba(255,255,255,.2);
}
.mp-map-panel .vwt-regiones li{ border-bottom-color: rgba(255,255,255,.14) }
.mp-map-panel .vwt-reg{ color: #fff; padding: .72rem 0 }
.mp-map-panel .vwt-reg span{ font-size: 1rem }
.mp-map-panel .vwt-reg i{ color: rgba(255,255,255,.6) }
.mp-map-panel .vwt-reg:hover,
.mp-map-panel .vwt-reg.is-on{ color: #fff }
.mp-map-panel .vwt-reg.is-on span{ color: var(--mp-acc) }

/* ═══════════════════════════════════════════════════════════
   CIERRE · composición editorial
   Una fotografía vertical con su epígrafe a la izquierda y el
   texto a la derecha, alineado al pie de la imagen. Sin fondo
   de color ni tipografía calada.
   ═══════════════════════════════════════════════════════════ */
.mp-end{ padding: var(--mp-sec) var(--mp-pad) calc(var(--mp-sec) * 1.1); background: var(--vh-paper, #fff) }
.mp-end-grid{
  display: grid; grid-template-columns: minmax(0,.44fr) minmax(0,.56fr);
  gap: calc(80.0px * var(--k, 1)); align-items: end;
}
.mp-end-fig{ margin: 0 }
.mp-end-fig img{
  width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 18px; display: block;
}
.mp-end-fig figcaption{
  margin-top: .8rem; font-size: .8rem; color: var(--vh-mut, #7F6E73);
}
.mp-end-h{
  margin: clamp(.9rem,1.8vw,1.3rem) 0 0;
  font-size: calc(99.2px * var(--k, 1)); font-weight: 700;
  letter-spacing: -.055em; line-height: .94; color: var(--vh-ink, #100C0D);
}
.mp-end-tx{ align-self: end }
.mp-end-p{
  margin: clamp(1.2rem,2.4vw,1.8rem) 0 clamp(1.8rem,3.4vw,2.6rem); max-width: 44ch;
  font-size: calc(18.6px * var(--k, 1)); line-height: 1.62; color: var(--vh-soft, #3A3436);
}
.mp-end-cta{ display: flex; flex-wrap: wrap; gap: .7rem }
.mp-end-n{ margin: clamp(1rem,2vw,1.4rem) 0 0; font-size: .82rem; color: var(--vh-mut, #7F6E73) }

@media (max-width: calc(1024px * var(--k, 1))){
  .mp-map-canvas{ min-height: 0 }
  .mp-map #map{ position: relative; height: calc(62 * var(--1vh)) }
  .mp-map-panel{
    position: relative; left: auto; top: auto; transform: none; width: auto;
    border-radius: 0; border: 0; background: #0B0708; backdrop-filter: none;
    padding: clamp(1.6rem,5vw,2.4rem) var(--mp-pad);
  }
  .mp-end-grid{ grid-template-columns: 1fr; gap: 1.8rem }
  .mp-end-fig img{ aspect-ratio: 16/10 }
}
@media (prefers-reduced-motion: reduce){
  .mp-map-panel{ backdrop-filter: none }
}

/* ═══════════════════════════════════════════════════════════
   EL ORIGEN Y EL DÍA · un solo bloque
   La apertura del sistema encabeza la sección y el itinerario
   cuelga de ella, dentro de la misma pieza. El único título es
   "Acá el vino no se puso de moda"; "El día" baja a volanta y
   ordena la segunda mitad sin competir.
   ═══════════════════════════════════════════════════════════ */
/* la volanta y su frase, en dos columnas: sin huecos al costado */

/* ── Las bodegas muestran su foto siempre ──
   Antes la imagen solo aparecía al apuntar y el índice se veía
   vacío. Ahora cada casa tiene su miniatura en la fila, y al
   apuntarla se acerca. */
.mp-b{
  grid-template-columns: clamp(88px,9vw,140px) minmax(0,1fr) clamp(110px,12vw,180px) minmax(0,1fr) clamp(150px,17vw,240px) 42px;
  align-items: center;
}
.mp-b-foto{
  display: block; overflow: hidden; border-radius: 12px; background: #0B0708;
  aspect-ratio: 3/2; align-self: center;
}
.mp-b-foto img{
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02); transition: transform 1.1s var(--mp-e);
}
@media (hover: hover) and (pointer: fine){
  .mp-b:hover .mp-b-foto img{ transform: scale(1.08) }
}
@media (max-width: calc(1024px * var(--k, 1))){
  .mp-b{ grid-template-columns: clamp(72px,10vw,100px) minmax(0,1fr) clamp(120px,22vw,170px) 42px }
  .mp-b-z{ grid-column: 2; margin-top: .2rem }
  .mp-b-d{ grid-column: 2; margin-top: .4rem }
  .mp-b-foto{ grid-column: 3; grid-row: 1 / span 3 }
  .mp-b-go{ grid-column: 4; grid-row: 1 / span 3 }
}
@media (max-width: 620px){
  .mp-b{ grid-template-columns: 1fr 42px; gap: .5rem 1rem }
  .mp-b-y, .mp-b-n, .mp-b-z, .mp-b-d{ grid-column: 1 }
  .mp-b-foto{ grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16/9; margin-top: .8rem }
  .mp-b-go{ grid-column: 2; grid-row: 1 / span 4 }
}

/* ── Otros tours, con miniatura ──
   El índice tipográfico gana imagen sin dejar de ser índice. */

/* ═══════════════════════════════════════════════════════════
   EL DÍA · las seis paradas, todas a la vista
   Nada que arrastrar, nada que descubrir: el día completo se
   ve de una sola mirada, en dos filas de tres. Las piezas son
   grandes, cada una con su foto, su hora y qué pasa en ese
   momento. Si alguien entra y no lee nada, igual entiende el
   recorrido mirando las imágenes en orden.
   ═══════════════════════════════════════════════════════════ */

.mp-linea{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(2rem,4vw,3.4rem) clamp(1.2rem,2.4vw,2.2rem);
}
.mp-p{ display: block; position: relative }
/* el número de orden, para que se lea la secuencia sin dudar */
.mp-p-fig{
  position: relative; margin: 0; overflow: hidden;
  border-radius: 18px; background: #0B0708; aspect-ratio: 4/3;
}
.mp-p-fig::after{
  content: attr(data-n);
  position: absolute; left: 0; top: 0; z-index: 2;
  min-width: 2.6rem; padding: .5rem .75rem;
  background: var(--mp-acc); color: #fff;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  border-bottom-right-radius: 14px;
}
.mp-p-fig img{
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.03);
  transition: transform 1.2s var(--mp-e);
}
.mp-p-riel{
  position: relative; display: block; height: 1px;
  margin: clamp(1.1rem,2.2vw,1.5rem) 0 0;
  background: var(--vh-line, rgba(16,12,13,.18));
}
.mp-p-riel i{
  position: absolute; inset: 0; display: block; background: var(--mp-acc);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--mp-e);
}
.mp-p.on .mp-p-riel i{ transform: none }
.mp-p-riel b{
  position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%; background: var(--mp-acc);
  transform: scale(0); transition: transform .6s var(--mp-e) .25s;
}
.mp-p.on .mp-p-riel b{ transform: none }
.mp-p-h{
  display: block; margin-top: calc(20.8px * var(--k, 1));
  font-size: calc(36.8px * var(--k, 1)); font-weight: 700;
  letter-spacing: -.05em; line-height: 1; color: var(--mp-acc);
  font-variant-numeric: tabular-nums;
}
.mp-p-tx{ display: block; margin-top: .6rem }
.mp-p-tx b{
  display: block; font-size: calc(20.8px * var(--k, 1)); font-weight: 700;
  letter-spacing: -.03em; color: var(--vh-ink, #100C0D);
}
.mp-p-tx i{
  display: block; margin-top: .35rem; font-style: normal; max-width: 36ch;
  font-size: .94rem; line-height: 1.55; color: var(--vh-soft, #3A3436);
}
@media (hover: hover) and (pointer: fine){
  .mp-p:hover .mp-p-fig img{ transform: scale(1.07) }
}
@media (max-width: 900px){
  .mp-linea{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.8rem 1.2rem }
}
@media (max-width: 560px){
  .mp-linea{ grid-template-columns: 1fr; gap: 2rem }
  .mp-p-fig{ aspect-ratio: 16/10 }
}
@media (prefers-reduced-motion: reduce){
  .mp-p-fig img, .mp-p-riel i, .mp-p-riel b{ transition: none }
  .mp-p-riel i, .mp-p-riel b{ transform: none }
}

/* ── El bloque: apertura + el día ──
   La apertura del sistema vive en su propio contenedor, así
   conserva su centrado sin imponérselo al resto. El día queda
   afuera de ese contenedor, con la alineación normal de la
   página y sobre el mismo eje que las demás secciones. */
.mp-uno{ background: var(--vh-paper, #fff); padding-bottom: calc(var(--mp-sec) * 1.15) }
.mp-uno .vt-open{ padding-bottom: 0 }
.mp-uno-dia{ padding-inline: var(--mp-pad) }
.mp-uno-dia .mp-in{
  max-width: var(--mp-max); margin-inline: auto;
  margin-top: calc(88.0px * var(--k, 1));
  padding-top: calc(57.6px * var(--k, 1));
  border-top: 1px solid var(--vh-line, rgba(16,12,13,.14));
}

/* ── El texto del día, con el tratamiento del resto ──
   Era el único con interletrado negativo, un cuerpo mayor y
   otro interlineado, así que se leía como otra tipografía.
   Ahora usa las mismas medidas que los demás textos de apoyo
   de la página. */

/* ── El encabezado del día ──
   Volanta, un título propio y el texto debajo, uno tras otro y
   alineados al mismo margen. El título le da jerarquía a la
   mitad de abajo sin competir con el de la apertura: usa un
   cuerpo intermedio, el mismo que los títulos de las tarjetas
   del sitio. */
.mp-uno-hd{
  display: block; max-width: 62ch;
  margin-bottom: calc(64.0px * var(--k, 1));
}
.mp-uno-hd .mp-kick{ margin: 0 }
.mp-uno-h{
  margin: clamp(.9rem,1.8vw,1.2rem) 0 0;
  font-size: calc(51.2px * var(--k, 1));
  font-weight: 700; letter-spacing: -.05em; line-height: 1.02;
  color: var(--vh-ink, #100C0D);
}
.mp-uno-p{
  margin: clamp(1rem,2vw,1.4rem) 0 0; max-width: 52ch;
  font-size: calc(18.6px * var(--k, 1)); line-height: 1.6;
  font-weight: 300; letter-spacing: normal; color: var(--vh-soft, #3A3436);
}

/* ═══════════════════════════════════════════════════════════
   RITMO DE FONDOS
   La página era casi toda papel. Luján alterna oscuro y claro
   para marcar el pulso, y acá faltaba. Se oscurecen dos
   bloques y el cierre pasa al color de la marca:

     apertura y día ....... papel
     bodegas .............. negro
     dos maneras .......... papel
     mapa ................. negro
     ficha ................ humo
     cierre ............... bordó
     otros tours .......... papel
   ═══════════════════════════════════════════════════════════ */

/* ── Bodegas, sobre negro ── */
.mp-bod{ background: #0B0708 }
.mp-bod .mp-h2{ color: #fff }
.mp-bod .mp-kick{ color: rgba(255,255,255,.72) }
.mp-lista{ border-top-color: rgba(255,255,255,.2) }
.mp-lista li{ border-bottom-color: rgba(255,255,255,.14) }
.mp-b-n{ color: #fff }
.mp-b-z{ color: rgba(255,255,255,.6) }
.mp-b-d{ color: rgba(255,255,255,.78) }
.mp-b-go{ border-color: rgba(255,255,255,.32); color: #fff }
@media (hover: hover) and (pointer: fine){
  .mp-b:hover .mp-b-n{ color: var(--mp-acc) }
  .mp-b:hover .mp-b-go{ background: var(--mp-acc); border-color: var(--mp-acc); color: #fff }
}

/* ── Cierre, en el color de la marca ── */
.mp-end{ background: #6B1D2A; color: #fff }
.mp-end .mp-kick{ color: rgba(255,255,255,.78) }
.mp-end-h{ color: #fff }
.mp-end-p{ color: rgba(255,255,255,.84) }
.mp-end-n{ color: rgba(255,255,255,.66) }
.mp-end-fig figcaption{ color: rgba(255,255,255,.66) }
.mp-end .mp-btn-ink{ background: var(--vh-paper); color: #6B1D2A; border-color: #fff }
.mp-end .mp-btn-ink:hover{ background: #F0C9D0; color: #6B1D2A; border-color: #F0C9D0 }
.mp-end .mp-btn-line{ background: transparent; border-color: rgba(255,255,255,.45); color: #fff }
.mp-end .mp-btn-line:hover{ background: rgba(255,255,255,.12); border-color: #fff; color: #fff }

/* modo oscuro: las variables del sistema ya invierten papel, humo y tinta */

/* ── Botones de las modalidades ──
   Usan el mismo componente aprobado que Luján de Cuyo (.vh-act): misma altura,
   mismo radio, misma tipografía y el mismo comportamiento dentro de la tarjeta
   (ocupan el ancho y quedan anclados abajo). La variante en tinta es la que
   corresponde a una tarjeta clara, como la de Maipú. */
.mp-m .vh-act{ align-self: stretch; justify-content: center; margin-top: auto }
.mp-mod .vh-act-ink, .mp-m .vh-act-ink{ background-color: #100C0D; color: #fff; border-color: #100C0D }
.mp-mod .vh-act-ink:hover, .mp-m .vh-act-ink:hover{ background-color: #AC3749; border-color: #AC3749; color: #fff }
html[data-theme="dark"] .mp-mod .vh-act-ink, body.dark .mp-mod .vh-act-ink{ background-color: #F7F5F5; color: #100C0D; border-color: #F7F5F5 }

/* ── Las dos modalidades, en espejo ──
   Cada tarjeta tiene las mismas cinco piezas (volanta, título, bajada, lista y botón)
   y la misma cantidad de características, así que deben alinearse fila por fila aunque
   los textos tengan distinto largo. La rejilla de la sección define las cinco filas y
   cada tarjeta las hereda con subgrid: ambas columnas quedan sincronizadas.
   Sin subgrid, el botón igual queda anclado abajo y las tarjetas mantienen su altura. */
.mp-mod-grid{ align-items: stretch; grid-template-rows: auto auto auto 1fr auto }
.mp-m{ display: flex; flex-direction: column; height: 100% }
/* el filete superior mide lo mismo en las dos: solo cambia el color, no el grosor,
   para que la volanta y todo lo que sigue arranquen a la misma altura */
.mp-mod-grid .mp-m{ border-top-width: 3px }
.mp-mod-grid .mp-m:not(.mp-m-full){ border-top-color: var(--vh-line, rgba(16,12,13,.12)) }
.mp-m .vh-act{ margin-top: auto }
@supports (grid-template-rows: subgrid){
  .mp-m{ display: grid; grid-template-rows: subgrid; grid-row: span 5; height: auto }
  .mp-m .vh-act{ margin-top: 0; align-self: end }
}