/* ===================================================================
   MICROPIGMENTALIA — Capa de dinamismo (no invasiva)
   Solo se activa con html.mp-dyn (lo pone dynamism.js). Sin JS, NADA
   se oculta: la web sigue funcionando exactamente igual.
   Paleta marca: #674327 (marrón) · acentos verdes/tratamientos.
   =================================================================== */

:root {
  --mp-ease: cubic-bezier(0.22, 1, 0.36, 1); /* easeOutExpo: entra rápido y asienta suave */
  --mp-brand: #674327;
  --mp-dur: 0.9s;
}

/* ---------- Reveal on scroll (estado inicial SOLO con JS) ---------- */
html.mp-dyn .mp-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--mp-dur) var(--mp-ease),
              transform var(--mp-dur) var(--mp-ease);
  will-change: opacity, transform;
}
html.mp-dyn .mp-reveal.mp--left  { transform: translateX(-44px); }
html.mp-dyn .mp-reveal.mp--right { transform: translateX(44px); }
html.mp-dyn .mp-reveal.mp--zoom  { transform: scale(0.94); }

html.mp-dyn .mp-reveal.mp-in {
  opacity: 1;
  transform: none;
}

/* ---------- Hero: zoom cinematográfico + respiración lenta ---------- */
html.mp-dyn .mp-hero-wrap { overflow: hidden; }
html.mp-dyn img.mp-hero {
  display: block;
  transform-origin: 50% 45%;
  animation: mpHeroIn 1.7s var(--mp-ease) both,
             mpHeroFloat 22s ease-in-out 1.7s infinite alternate;
}
@keyframes mpHeroIn {
  from { opacity: 0; transform: scale(1.09); }
  to   { opacity: 1; transform: scale(1.035); }
}
@keyframes mpHeroFloat {
  from { transform: scale(1.035); }
  to   { transform: scale(1.085) translateY(-1.2%); }
}

/* ---------- Títulos de sección: subrayado que se dibuja ---------- */
html.mp-dyn .unTitulo strong {
  display: inline-block;
  position: relative;
  border-bottom-color: transparent !important; /* sustituimos el punteado estático */
}
html.mp-dyn .unTitulo strong::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--mp-brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.8s var(--mp-ease) 0.25s;
}
html.mp-dyn .unTitulo.mp-in strong::after { transform: scaleX(1); }

/* ---------- Firma: aparece como trazo suave ---------- */
html.mp-dyn img.firma.mp-reveal { transition-duration: 1.2s; }

/* ---------- Tarjetas de tratamiento: profundidad al pasar el ratón ---
   Solo box-shadow sobre el contenedor del flip: NO toca el rotateY 3D. */
html.mp-dyn .flip-container {
  border-radius: 6px;
  transition: box-shadow 0.45s var(--mp-ease);
}
html.mp-dyn .flip-container:hover {
  box-shadow: 0 18px 42px rgba(103, 67, 39, 0.20);
}

/* ---------- Botones: micro-interacción ---------- */
html.mp-dyn .bookNowBtn {
  transition: transform 0.3s var(--mp-ease),
              box-shadow 0.3s var(--mp-ease),
              background-color 0.3s ease;
}
html.mp-dyn .bookNowBtn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(103, 67, 39, 0.28);
  background: #7a5230;
}

/* ---------- Navegación: subrayado animado en hover ---------- */
html.mp-dyn #nav-ppal > li > a {
  position: relative;
}
html.mp-dyn #nav-ppal > li > a::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%; bottom: 2px;
  height: 2px;
  background: currentColor;
  opacity: 0.65;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s var(--mp-ease);
}
html.mp-dyn #nav-ppal > li:hover > a::after { transform: scaleX(1); }
html.mp-dyn #nav-ppal > li.lenguaje > a::after { display: none; }

/* ---------- Testimonios: las fotos circulares respiran al hover ---- */
html.mp-dyn .testimonialBox img.rounded-circle {
  transition: transform 0.4s var(--mp-ease), box-shadow 0.4s var(--mp-ease);
}
html.mp-dyn .testimonialBox:hover img.rounded-circle {
  transform: scale(1.06);
  box-shadow: 0 10px 26px rgba(103, 67, 39, 0.18);
}

/* ---------- Blog: zoom suave de la miniatura al hover ---------- */
html.mp-dyn .blogList { overflow: hidden; border-radius: 6px; }
html.mp-dyn .blogList .list-thumb {
  transition: transform 0.6s var(--mp-ease);
}
html.mp-dyn .blogList:hover .list-thumb { transform: scale(1.07); }

/* ---------- Barra de progreso de scroll (fina, marca) ---------- */
html.mp-dyn .mp-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--mp-brand), #a9885f);
  z-index: 99999;
  pointer-events: none;
  transition: width 0.1s linear;
}

/* ===================================================================
   AFINADO MOVIL (<=991px)
   - Sin reveal-on-scroll (dejaba secciones en blanco al hacer scroll)
   - Sin Ken Burns ni barra de progreso
   - Submenus del menu hamburguesa SIEMPRE visibles e indentados
     (antes dependian de tap-hover y Formacion->Online era inaccesible)
   =================================================================== */
@media (max-width: 991px) {
  /* Reveals en movil: rapidos, poco recorrido, disparo anticipado (JS).
     v1 los apagaba del todo y la web quedaba muerta. */
  html.mp-dyn .mp-reveal {
    transform: translateY(14px);
    transition-duration: 0.45s;
  }
  html.mp-dyn .mp-reveal.mp--left,
  html.mp-dyn .mp-reveal.mp--right,
  html.mp-dyn .mp-reveal.mp--zoom { transform: translateY(14px); }
  html.mp-dyn .mp-reveal.mp-in { transform: none; }

  /* barra de progreso: fina y discreta */
  html.mp-dyn .mp-progress { height: 2px; }

  /* cinemagraphs: formato cuadrado inmersivo (antes quedaban 16:9 enanos) */
  .imgNosotros video, .imgMicroAntes video, .imgMicroTech video {
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
  }

  /* feedback tactil en tarjetas y botones */
  html.mp-dyn .flip-container:active { transform: scale(0.97); transition: transform 0.15s ease; }
  html.mp-dyn .bookNowBtn:active,
  html.mp-dyn .mpo-cta:active,
  html.mp-dyn .mpo-cta-big:active { transform: scale(0.96); }
  html.mp-dyn .mpo-card:active { transform: scale(0.99); }

  /* menu hamburguesa: que quepa todo + items en cascada al abrir */
  html.mp-dyn ul#nav-ppal.menu-open { max-height: 2200px !important; }
  html.mp-dyn ul#nav-ppal.menu-open > li { animation: mpDdIn 0.35s var(--mp-ease) backwards; }
  html.mp-dyn ul#nav-ppal.menu-open > li:nth-child(1) { animation-delay: 0.03s; }
  html.mp-dyn ul#nav-ppal.menu-open > li:nth-child(2) { animation-delay: 0.06s; }
  html.mp-dyn ul#nav-ppal.menu-open > li:nth-child(3) { animation-delay: 0.09s; }
  html.mp-dyn ul#nav-ppal.menu-open > li:nth-child(4) { animation-delay: 0.12s; }
  html.mp-dyn ul#nav-ppal.menu-open > li:nth-child(5) { animation-delay: 0.15s; }
  html.mp-dyn ul#nav-ppal.menu-open > li:nth-child(6) { animation-delay: 0.18s; }
  html.mp-dyn ul#nav-ppal.menu-open > li:nth-child(7) { animation-delay: 0.21s; }
  html.mp-dyn ul#nav-ppal.menu-open > li:nth-child(n+8) { animation-delay: 0.24s; }

  /* submenus apilados, siempre visibles, indentados */
  html.mp-dyn ul#nav-ppal ul {
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 0 6px 16px !important;
    margin: 0 !important;
    min-width: 0 !important;
    top: auto !important;
    left: auto !important;
  }
  html.mp-dyn ul#nav-ppal ul::before { display: none !important; }
  html.mp-dyn ul#nav-ppal ul > li { animation: none !important; }
  html.mp-dyn ul#nav-ppal ul li a { padding: 10px 12px !important; font-size: 13px; }

  /* banner de cookies: compacto en movil (antes ocupaba media pantalla) */
  .cc-window {
    font-size: 11px !important;
    padding: 10px 12px !important;
    line-height: 1.35 !important;
  }
  .cc-window .cc-message { margin-bottom: 8px !important; }
  .cc-window .cc-btn { padding: 6px 14px !important; font-size: 12px !important; }

  /* idiomas: banderas en fila horizontal */
  html.mp-dyn ul#nav-ppal li.lenguaje ul {
    display: flex !important;
    flex-direction: row;
    gap: 16px;
    padding: 10px 0 !important;
  }
  html.mp-dyn ul#nav-ppal li.lenguaje ul li { display: inline-block; border-bottom: none; }
  html.mp-dyn ul#nav-ppal li.lenguaje ul li a { padding: 4px !important; }
}

/* ---------- Respeto a quien pide menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  html.mp-dyn .mp-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html.mp-dyn img.mp-hero { animation: none !important; opacity: 1 !important; }
  html.mp-dyn .unTitulo strong::after { transition: none !important; transform: scaleX(1) !important; }
  html.mp-dyn .mp-progress { display: none !important; }
}

/* ===================================================================
   DESPLEGABLES MODERNOS v2 — solo desktop (>=992px).
   Estilo "Micropigmentacion" (limpio) como estandar para todos.
   Arreglado el hueco trigger->panel que los hacia cerrarse solos.
   En movil (<=991px) el menu hamburguesa original queda intacto.
   =================================================================== */
@media (min-width: 992px) {

  /* Top-level: el texto vira a marca al pasar (ademas del subrayado) */
  html.mp-dyn #nav-ppal > li > a:hover { color: #674327; }

  /* Panel: fundido + leve escalado, anclado arriba */
  html.mp-dyn ul#nav-ppal ul {
    display: block;
    top: 32px;
    left: -16px;
    min-width: 224px;
    padding: 10px;
    margin: 0;
    background: rgba(255, 255, 255, 0.98);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(103, 67, 39, 0.07);
    border-radius: 16px;
    box-shadow: 0 22px 50px rgba(103, 67, 39, 0.16),
                0 4px 12px rgba(0, 0, 0, 0.04);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px) scale(0.98);
    transform-origin: top center;
    transition: opacity 0.24s ease,
                transform 0.32s var(--mp-ease),
                visibility 0.24s;
  }

  /* Puente invisible: cubre el hueco entre el boton y el panel para que
     el menu NO se cierre al cruzar el raton (sustituye al triangulo viejo) */
  html.mp-dyn ul#nav-ppal ul::before {
    content: "";
    display: block;
    position: absolute;
    top: -20px; left: 0; right: 0;
    height: 24px;
    margin: 0;            /* CLAVE: anula el margin:0 45% del triangulo viejo, que comprimia el puente al 10% central */
    width: auto;
    background: transparent;
    border: none;
    transform: none;
  }

  /* Apertura por hover o foco (accesible con teclado) */
  html.mp-dyn ul#nav-ppal li:hover > ul,
  html.mp-dyn ul#nav-ppal li:focus-within > ul {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  /* Items: limpios, aireados, con punto-acento que crece al hover */
  html.mp-dyn ul#nav-ppal ul li a {
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-bottom: none !important;     /* fuera las rayas separadoras de color */
    border-radius: 10px;
    margin: 2px 0;
    padding: 11px 16px;
    color: #4a4036;
    font-size: 13.5px;
    letter-spacing: 0.2px;
    box-shadow: none;
    transition: background-color 0.22s ease,
                color 0.22s ease,
                padding-left 0.24s var(--mp-ease);
  }
  /* Punto-acento (marca por defecto) que aparece al pasar */
  html.mp-dyn ul#nav-ppal ul li a::before {
    content: "";
    position: absolute;
    left: 9px; top: 50%;
    width: 0; height: 0;
    border-radius: 50%;
    background: var(--mp-brand);
    transform: translateY(-50%);
    transition: width 0.22s var(--mp-ease), height 0.22s var(--mp-ease);
  }
  html.mp-dyn ul#nav-ppal ul li a:hover {
    color: #674327;
    background-color: rgba(103, 67, 39, 0.06);
    padding-left: 24px;
  }
  html.mp-dyn ul#nav-ppal ul li a:hover::before { width: 6px; height: 6px; }

  /* Tratamientos: misma estetica limpia, cada uno con SU color de acento
     (punto + texto + tinte suave) en vez del relleno macizo anterior */
  html.mp-dyn ul#nav-ppal ul li a.todos::before         { background: #674327; }
  html.mp-dyn ul#nav-ppal ul li a.esteticos::before     { background: #607f6d; }
  html.mp-dyn ul#nav-ppal ul li a.capilar::before       { background: #d4755f; }
  html.mp-dyn ul#nav-ppal ul li a.oncologico::before    { background: #b15b68; }
  html.mp-dyn ul#nav-ppal ul li a.dermatologico::before { background: #404853; }
  html.mp-dyn ul#nav-ppal ul li a.antiaging::before     { background: #427590; }

  html.mp-dyn ul#nav-ppal ul li a.todos:hover         { color: #674327; background-color: rgba(103, 67, 39, 0.09); }
  html.mp-dyn ul#nav-ppal ul li a.esteticos:hover     { color: #4f6c5b; background-color: rgba(96, 127, 109, 0.12); }
  html.mp-dyn ul#nav-ppal ul li a.capilar:hover       { color: #c0563f; background-color: rgba(212, 117, 95, 0.12); }
  html.mp-dyn ul#nav-ppal ul li a.oncologico:hover    { color: #9c4753; background-color: rgba(177, 91, 104, 0.12); }
  html.mp-dyn ul#nav-ppal ul li a.dermatologico:hover { color: #404853; background-color: rgba(64, 72, 83, 0.10); }
  html.mp-dyn ul#nav-ppal ul li a.antiaging:hover     { color: #356079; background-color: rgba(66, 117, 144, 0.12); }

  /* Entrada en cascada de los items al abrir el panel */
  html.mp-dyn ul#nav-ppal li:hover > ul > li,
  html.mp-dyn ul#nav-ppal li:focus-within > ul > li {
    animation: mpDdIn 0.34s var(--mp-ease) both;
  }
  html.mp-dyn ul#nav-ppal li > ul > li:nth-child(1) { animation-delay: 0.02s; }
  html.mp-dyn ul#nav-ppal li > ul > li:nth-child(2) { animation-delay: 0.06s; }
  html.mp-dyn ul#nav-ppal li > ul > li:nth-child(3) { animation-delay: 0.10s; }
  html.mp-dyn ul#nav-ppal li > ul > li:nth-child(4) { animation-delay: 0.14s; }
  html.mp-dyn ul#nav-ppal li > ul > li:nth-child(5) { animation-delay: 0.18s; }
  html.mp-dyn ul#nav-ppal li > ul > li:nth-child(6) { animation-delay: 0.22s; }
  html.mp-dyn ul#nav-ppal li > ul > li:nth-child(n+7) { animation-delay: 0.26s; }

  /* Selector de idioma: panel compacto, anclado a la derecha, sin punto */
  html.mp-dyn ul#nav-ppal li.lenguaje ul { min-width: auto; left: auto; right: -10px; }
  html.mp-dyn ul#nav-ppal li.lenguaje ul li a { padding: 7px 12px; }
  html.mp-dyn ul#nav-ppal li.lenguaje ul li a::before { display: none; }
  html.mp-dyn ul#nav-ppal li.lenguaje ul li a:hover { padding-left: 12px; background-color: rgba(103, 67, 39, 0.07); }
}

@keyframes mpDdIn {
  from { opacity: 0; transform: translateX(-7px); }
  to   { opacity: 1; transform: none; }
}

/* Formacion (Presencial / Online): SIN iconos, iguales que el resto de
   desplegables — heredan el punto-acento de marca de los items genericos. */

@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
  html.mp-dyn ul#nav-ppal ul { transition: opacity 0.01s linear, visibility 0.01s linear; transform: none; }
  html.mp-dyn ul#nav-ppal li:hover > ul,
  html.mp-dyn ul#nav-ppal li:focus-within > ul { transform: none; }
  html.mp-dyn ul#nav-ppal li:hover > ul > li,
  html.mp-dyn ul#nav-ppal li:focus-within > ul > li { animation: none; }
}

/* ===================================================================
   SECCION "FORMACION ONLINE" (formacion.php #online)
   Tarjetas O1-O4. Estilo boutique, paleta marca + acentos.
   No depende de html.mp-dyn (se ve estilada con o sin JS).
   =================================================================== */
.mpo-section { max-width: 1180px; margin: 0 auto; padding: 30px 16px 60px; }
.mpo-head { text-align: center; max-width: 760px; margin: 0 auto; }
.mpo-kicker { font-family: 'Gotham Book', sans-serif; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: #8a6a4a; }
.mpo-title { font-family: 'Fahkwang', sans-serif; color: #674327; font-size: 34px; font-weight: 500; margin: 10px 0 16px; }
.mpo-title strong { position: relative; font-weight: 600; }
.mpo-title strong::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 2px; background: linear-gradient(90deg, #674327, transparent); }
.mpo-lead { font-size: 16px; color: #5b5048; line-height: 1.6; }
.mpo-honest { display: inline-flex; align-items: center; gap: 9px; margin-top: 20px; padding: 10px 18px; border: 1px solid #e3d8cb; border-radius: 999px; background: #fff; font-size: 14px; color: #6a5d50; }
.mpo-honest i { color: #674327; }

.mpo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 42px; text-align: left; }
.mpo-card { position: relative; background: #fff; border: 1px solid #ece3d8; border-radius: 18px; padding: 28px 24px 24px; display: flex; flex-direction: column; overflow: hidden; transition: transform 0.4s var(--mp-ease), box-shadow 0.4s var(--mp-ease), border-color 0.4s var(--mp-ease); }
.mpo-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--acc); }
.mpo-card:hover { transform: translateY(-8px); box-shadow: 0 26px 54px rgba(103, 67, 39, 0.16); border-color: #e0d3c3; }
.mpo-badge { align-self: flex-start; font-family: 'Gotham Book', sans-serif; font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--acc); border: 1px solid var(--acc-bd); background: var(--acc-bg); padding: 4px 11px; border-radius: 999px; margin-bottom: 16px; }
.mpo-ic { display: none; } /* sin simbolos para diferenciar cursos: se diferencian por color (barra superior + acento) */
.mpo-card h3 { font-family: 'Fahkwang', sans-serif; color: #674327; font-size: 20px; font-weight: 500; margin-bottom: 8px; }
.mpo-one { font-size: 14px; color: #6a5d50; margin-bottom: 14px; line-height: 1.5; }
.mpo-card ul { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.mpo-card li { font-size: 13.3px; color: #544a41; display: flex; gap: 9px; align-items: flex-start; line-height: 1.4; }
.mpo-card li i { color: var(--acc); font-size: 11px; margin-top: 5px; flex: none; }
.mpo-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 16px; border-top: 1px solid #f0e8de; }
.mpo-price { font-family: 'Fahkwang', sans-serif; color: #674327; font-size: 23px; font-weight: 600; line-height: 1.05; }
.mpo-price small { display: block; font-family: 'Gotham Book', sans-serif; font-size: 10.5px; font-weight: 400; color: #998b7c; letter-spacing: 0.2px; }
.mpo-cta { font-family: 'Gotham Book', sans-serif; font-size: 13px; font-weight: 600; color: #fff; background: #674327; border: none; border-radius: 10px; padding: 11px 15px; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-block; transition: transform 0.25s var(--mp-ease), box-shadow 0.25s var(--mp-ease), background 0.25s; }
.mpo-cta:hover { transform: translateY(-2px); background: #7a5230; box-shadow: 0 10px 22px rgba(103, 67, 39, 0.28); color: #fff; text-decoration: none; }
.mpo-note { text-align: center; margin-top: 36px; font-size: 13.5px; color: #8a7d6f; }

.mpo-c1 { --acc: #674327; --acc-bg: rgba(103, 67, 39, 0.08); --acc-bd: rgba(103, 67, 39, 0.30); }
.mpo-c2 { --acc: #607f6d; --acc-bg: rgba(96, 127, 109, 0.10); --acc-bd: rgba(96, 127, 109, 0.32); }
.mpo-c3 { --acc: #427590; --acc-bg: rgba(66, 117, 144, 0.10); --acc-bd: rgba(66, 117, 144, 0.32); }
.mpo-c4 { --acc: #b15b68; --acc-bg: rgba(177, 91, 104, 0.10); --acc-bd: rgba(177, 91, 104, 0.32); }

@media (max-width: 991px) { .mpo-title { font-size: 28px; } .mpo-section { padding: 20px 14px 40px; } }

/* ---- Franja de ventajas (página Online) ---- */
.mpo-benefits { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 30px auto 0; max-width: 920px; }
.mpo-benefit { display: flex; align-items: center; gap: 9px; font-family: 'Gotham Book', sans-serif; font-size: 13.5px; color: #5b5048; background: #fff; border: 1px solid #ece3d8; border-radius: 999px; padding: 9px 16px; }
.mpo-benefit i { color: #674327; font-size: 13px; }

/* ---- Banda CTA final (página Online) ---- */
.mpo-cta-band { margin-top: 46px; background: linear-gradient(135deg, #674327, #4f3320); border-radius: 20px; padding: 40px 28px; text-align: center; color: #fff; }
.mpo-cta-band h3 { font-family: 'Fahkwang', sans-serif; color: #fff; font-size: 24px; font-weight: 500; margin-bottom: 8px; }
.mpo-cta-band p { color: rgba(255, 255, 255, 0.82); font-size: 15px; margin-bottom: 22px; line-height: 1.55; }
.mpo-cta-big { display: inline-block; background: #fff; color: #674327; font-family: 'Gotham Book', sans-serif; font-weight: 700; font-size: 15px; text-decoration: none; padding: 14px 34px; border-radius: 12px; transition: transform 0.25s var(--mp-ease), box-shadow 0.25s var(--mp-ease); }
.mpo-cta-big:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25); color: #674327; text-decoration: none; }

/* ---- Tienda PRO: acento granate (sub-marca PRO) ---- */
.mpro-kicker { color: #7a2c33; }
.mpro-benefit i { color: #7a2c33 !important; }
.mpro-band { background: linear-gradient(135deg, #7a2c33, #56191f); }
.mpro-band .mpo-cta-big, .mpro-cta { color: #7a2c33; }
.mpro-band .mpo-cta-big:hover, .mpro-cta:hover { color: #7a2c33; }

/* ---- Cinemagraph "Nosotros" (vídeo en bucle silencioso) ----
   Móvil: bloque 16:9 (columnas apiladas, sin altura de hermano).
   Escritorio: la fila es flex (alturas iguales) -> el vídeo rellena
   TODA la columna con object-fit:cover, igual que hacía la foto. */
.imgNosotros, .imgMicroAntes, .imgMicroTech { line-height: 0; overflow: hidden; }
.imgNosotros video, .imgMicroAntes video, .imgMicroTech video { display: block; width: 100%; height: auto; }
@media (min-width: 992px) {
  .imgNosotros, .imgMicroAntes, .imgMicroTech { position: relative; }
  .imgNosotros video, .imgMicroAntes video, .imgMicroTech video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
}