@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Fredoka:wght@500;600;700&family=Bangers&family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=Nunito:wght@400;600;700&family=Inter:wght@400;500;600;700&family=Rubik:wght@400;500;600;700&display=swap');

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* El header es sticky solo en escritorio (en movil vuelve a position:relative
   mas abajo), asi que solo ahi hace falta dejar hueco para que no tape el
   principio de la seccion al hacer scroll desde el menu. */
@media (min-width: 768px) {
  #inicio,
  #sobre,
  #servicios,
  #productos,
  #agenda,
  #makerquiz,
  #patrocinadores,
  #colaboradores,
  #galeria,
  #contacto {
    scroll-margin-top: 130px;
  }
}

:root {
  /* constantes: colores de marca, no cambian con el tema */
  --pmv-rosa: #ff2ea6;
  --pmv-amarillo: #ffd400;
  --pmv-cian: #0099e5;

  /* constantes: superficies fijas, no cambian con el tema */
  --pmv-tinta: #0b0f14;
  --pmv-blanco: #ffffff;
  --pmv-tinta-2: #111827;
  --pmv-tinta-3: #070a0e;
  --pmv-velo: rgba(11, 15, 20, 0.55);
  --pmv-radio: 16px;
  --pmv-transicion: 0.3s cubic-bezier(0.22, 1, 0.36, 1);

  /* tarjeta "cristal": semi-transparente para aprovechar el color de fondo
     en vez de tapiz solido, con borde rosa que se ilumina al pasar el raton.
     Usada en tarjetas de listado (agenda, reglas, preguntas, patrocinadores,
     premios, clasificacion, redes sociales) para que se vean igual en
     ambos temas sin tener que fijar un fondo por tema. */
  --pmv-cristal-fondo: rgba(127, 127, 127, 0.08);
  --pmv-cristal-borde: rgba(255, 46, 166, 0.35);
  --pmv-cristal-fondo-hover: rgba(255, 46, 166, 0.1);
  --pmv-cristal-sombra-hover: 0 0 18px rgba(255, 46, 166, 0.3);
  --pmv-cristal-linea: rgba(127, 127, 127, 0.18);

  /* variables: lienzo de pagina, cambian segun [data-tema]. Solo hay 2
     colores de fondo editables desde el panel: --pmv-fondo (cabecera, pie,
     menu movil y la mitad de las secciones) y --pmv-fondo-par (la franja
     alterna de las secciones pares), para que el resultado sea siempre
     predecible en vez de tener 3-4 variables sueltas que no se notan al
     cambiarlas. */
  --pmv-fondo: #0b0f14;
  --pmv-texto: rgba(255, 255, 255, 0.92);
  --pmv-texto-muted: rgba(255, 255, 255, 0.70);
  --pmv-titulo-acento: var(--pmv-amarillo);
  --pmv-titulo-sombra: var(--pmv-rosa);
  --pmv-fondo-par: transparent;

  /* variables: superficies de "chrome" (header, footer, menu movil), cambian
     segun [data-tema]. Antes eran --pmv-tinta-2/--pmv-tinta-3 fijas. */
  --pmv-superficie: #111827;
  --pmv-superficie-oscura: #070a0e;
  --pmv-superficie-texto: rgba(255, 255, 255, 0.85);
  --pmv-superficie-texto-muted: rgba(255, 255, 255, 0.65);
  --pmv-superficie-realce: rgba(255, 255, 255, 0.08);
  --pmv-superficie-borde: rgba(255, 255, 255, 0.18);

  --pmv-font-display: 'Baloo 2', 'Poppins', sans-serif;
  --pmv-font-body: 'Roboto', sans-serif;

  /* Multiplicadores de tamaño de letra editables desde el admin: 1 = tamaño
     original. Se pueden fijar en :root (ajuste general, colores.js) o en un
     <section> concreto (ajuste por apartado, app.js/makerquiz.js), que por
     herencia de CSS gana sobre el general solo dentro de esa seccion. */
  --pmv-escala-titulos: 1;
  --pmv-escala-texto: 1;
  --pmv-escala-botones: 1;
}

:root[data-tema="claro"] {
  --pmv-fondo: #f6f1e7;
  --pmv-texto: rgba(11, 15, 20, 0.85);
  --pmv-texto-muted: rgba(11, 15, 20, 0.60);
  --pmv-titulo-acento: var(--pmv-rosa);
  --pmv-titulo-sombra: var(--pmv-amarillo);
  --pmv-superficie: #ffffff;
  --pmv-superficie-oscura: #efe9db;
  --pmv-superficie-texto: rgba(11, 15, 20, 0.85);
  --pmv-superficie-texto-muted: rgba(11, 15, 20, 0.65);
  --pmv-superficie-realce: rgba(11, 15, 20, 0.06);
  --pmv-superficie-borde: rgba(11, 15, 20, 0.16);
}

body {
  background: var(--pmv-fondo);
  color: var(--pmv-texto);
  font-family: var(--pmv-font-body);
}

.page-wrapper {
  background: transparent;
}

.theme_color {
  color: var(--pmv-rosa) !important;
}

.theme-btn,
.btn-style-one,
.btn-style-two,
.btn-style-three {
  background: var(--pmv-rosa) !important;
  border-color: var(--pmv-rosa) !important;
  font-family: var(--pmv-font-display);
  border-radius: 8px;
  transition: background var(--pmv-transicion), border-color var(--pmv-transicion), color var(--pmv-transicion), transform var(--pmv-transicion), box-shadow var(--pmv-transicion);
}

.theme-btn:hover {
  background: var(--pmv-amarillo) !important;
  border-color: var(--pmv-amarillo) !important;
  color: var(--pmv-tinta) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

.header-top {
  background: var(--pmv-superficie) !important;
}

.header-top a {
  color: var(--pmv-superficie-texto) !important;
}

.header-top a:hover {
  color: var(--pmv-amarillo) !important;
}

.pmv-tema-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--pmv-superficie-realce);
  border: 1px solid var(--pmv-superficie-borde);
  border-radius: 50%;
  color: var(--pmv-superficie-texto);
  cursor: pointer;
  font-size: 19px;
  line-height: 1;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.pmv-tema-toggle:hover {
  color: var(--pmv-tinta);
  background: var(--pmv-amarillo);
  border-color: var(--pmv-amarillo);
  transform: translateY(-2px);
}

.pmv-tema-toggle-columna {
  display: flex;
  align-items: center;
  min-width: auto;
}

.pmv-tema-toggle .icono-sol,
.pmv-tema-toggle .icono-luna {
  display: inline-block;
}

:root[data-tema="claro"] .pmv-tema-toggle .icono-luna {
  display: none;
}

:root[data-tema="oscuro"] .pmv-tema-toggle .icono-sol {
  display: none;
}

.header-upper {
  background-color: var(--pmv-superficie) !important;
  background-image: none !important;
}

.header-lower {
  background: var(--pmv-superficie) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.main-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
}

@media (max-width: 767px) {
  .main-header {
    position: relative !important;
  }
}

.main-header .logo img {
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
  max-height: 64px;
  width: auto;
}

/* El vendor (style.css) reserva 250px de padding-right en .nav-outer para el
   boton "MakerQuiz" del index. En paginas sin ese boton (MakerQuiz, Contacto,
   legales) ese hueco sobra y el menu se parte a 2 filas antes de necesitarlo
   aunque quede sitio libre a la derecha. Solo lo reservamos si el boton existe. */
@media (min-width: 768px) {
  .main-header .nav-outer {
    padding-right: 0;
  }

  .main-header .nav-outer:has(.btn-outer) {
    padding-right: 250px;
  }
}

.sec-title .text {
  color: var(--pmv-texto-muted) !important;
}

.sec-title h2 {
  color: var(--pmv-titulo-acento);
  font-family: var(--pmv-font-display);
  text-shadow: 4px 4px 0 var(--pmv-titulo-sombra);
}

/* La ultima palabra de cada titulo de apartado usa .theme_color, que por
   defecto es siempre rosa. Eso choca con el modo oscuro, donde el titulo ya
   es amarillo con sombra rosa: la palabra quedaba rosa sobre sombra rosa y
   no se leia. Que herede el color del titulo para que todo el titulo use
   siempre el mismo par acento/sombra segun el tema. */
.sec-title h2 .theme_color {
  color: inherit !important;
}

.default-intro-section {
  background-blend-mode: multiply;
  background-color: rgba(0, 0, 0, 0.45);
}

.latest-work,
.services-style-one {
  background: transparent !important;
}

.footer-upper {
  background-image: none !important;
  background: var(--pmv-superficie) !important;
}

.footer-bottom {
  background: var(--pmv-superficie-oscura) !important;
  color: var(--pmv-superficie-texto-muted) !important;
}

.main-header .info-box .small-title {
  color: var(--pmv-superficie-texto-muted) !important;
}

.main-header .info-box strong {
  color: var(--pmv-amarillo) !important;
}

.navigation > li > a:hover {
  color: var(--pmv-amarillo) !important;
}

.main-slider h1,
.main-slider h3,
.main-slider .text {
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.65);
}

h1,
.pmv-hero-content h1,
.pmv-hero-content h3 {
  font-family: var(--pmv-font-display);
}

a {
  color: var(--pmv-rosa);
}

a:hover {
  color: var(--pmv-amarillo);
}

.main-header .btn-outer {
  width: auto;
  min-width: 170px;
}

.main-footer .social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.main-footer .social-links a:hover {
  background: var(--pmv-amarillo);
  border-color: var(--pmv-amarillo);
}

.pmv-red-social img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.pmv-footer-redes-grande {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pmv-footer-redes-grande.social-links a {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border-width: 1px;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.pmv-footer-redes-grande.social-links a:hover {
  transform: translateY(-3px);
}

.pmv-footer-redes-grande .pmv-red-social img {
  width: 24px;
  height: 24px;
}

.main-footer .links-widget h3,
.main-footer .contact-widget h3 {
  font-family: var(--pmv-font-display);
}

.pmv-grid-centrado {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* Contenedor de secciones reordenables (portada y MakerQuiz): empieza oculto
   para que no se vea el orden por defecto del HTML mientras el JS todavia
   esta moviendo las secciones a su posicion segun el registro guardado. */
.pmv-secciones-cargando {
  visibility: hidden;
}

.pmv-makerquiz-banner {
  display: block;
  border-radius: var(--pmv-radio);
  overflow: hidden;
  transition: transform var(--pmv-transicion), box-shadow var(--pmv-transicion);
}

.pmv-makerquiz-banner:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.24);
}

.pmv-makerquiz-banner img {
  width: 100%;
  display: block;
  border-radius: var(--pmv-radio);
}

.pmv-mq-resumen-imagen {
  max-width: 100%;
  border-radius: var(--pmv-radio);
  margin-top: 20px;
  display: block;
}

#pmv-mantenimiento {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: var(--pmv-fondo);
  color: var(--pmv-texto);
  text-align: center;
}

.pmv-mantenimiento-caja {
  max-width: 560px;
}

.pmv-mantenimiento-imagen {
  max-width: 100%;
  max-height: 280px;
  object-fit: contain;
  margin-bottom: 24px;
  border-radius: var(--pmv-radio);
}

#pmv-mantenimiento h1 {
  font-family: var(--pmv-font-display);
  color: var(--pmv-titulo-acento);
  text-shadow: 4px 4px 0 var(--pmv-titulo-sombra);
  text-transform: uppercase;
  margin-bottom: 16px;
  font-size: calc(32px * var(--pmv-escala-titulos));
}

#pmv-mantenimiento p {
  color: var(--pmv-texto-muted);
  font-size: calc(17px * var(--pmv-escala-texto));
  line-height: 1.6em;
}

.main-slider.style-one:after {
  display: none;
}

/* Pagina especial de MakerQuiz */

.pmv-mq-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 720px;
  margin: 24px auto 0;
  border-radius: var(--pmv-radio);
}

.pmv-mq-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.pmv-mq-rules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.pmv-mq-rule {
  background: var(--pmv-cristal-fondo);
  border: 1px solid var(--pmv-cristal-borde);
  border-radius: var(--pmv-radio);
  padding: 22px;
  text-align: center;
  transition: transform var(--pmv-transicion), box-shadow var(--pmv-transicion), border-color var(--pmv-transicion), background var(--pmv-transicion);
  /* Sin esto, Chrome agrupa las tarjetas de la rejilla en una sola capa de
     composicion; al animar el hover de una, repinta esa capa entera y las
     demas parpadean un frame. will-change la saca a su propia capa desde el
     principio (no solo al pasar el raton) para que el repintado quede
     aislado a la tarjeta que se toca. */
  will-change: transform;
}

.pmv-mq-rule:hover {
  transform: translateY(-6px);
  box-shadow: var(--pmv-cristal-sombra-hover);
  border-color: var(--pmv-rosa);
  background: var(--pmv-cristal-fondo-hover);
}

.pmv-mq-rule h3 {
  color: var(--pmv-titulo-acento);
  text-shadow: 2px 2px 0 var(--pmv-titulo-sombra);
  font-family: var(--pmv-font-display);
  margin-bottom: 8px;
  font-size: calc(17px * var(--pmv-escala-titulos));
}

.pmv-mq-rule p {
  color: var(--pmv-texto);
  margin: 0;
}

.pmv-mq-rule a {
  display: inline-block;
  margin: 0 4px;
  vertical-align: middle;
}

.pmv-mq-rule img.pmv-mq-icono-inline {
  width: 22px;
  height: 22px;
  vertical-align: middle;
}

.pmv-mq-premios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  row-gap: 40px;
  column-gap: 30px;
  margin-top: 30px;
  align-items: center;
}

.pmv-mq-premio-card {
  background: var(--pmv-cristal-fondo);
  border: 1px solid var(--pmv-cristal-borde);
  border-radius: var(--pmv-radio);
  padding: 20px;
  text-align: center;
  transition: transform var(--pmv-transicion), box-shadow var(--pmv-transicion), border-color var(--pmv-transicion), background var(--pmv-transicion);
}

.pmv-mq-premio-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--pmv-cristal-sombra-hover);
  border-color: var(--pmv-rosa);
  background: var(--pmv-cristal-fondo-hover);
}

.pmv-mq-premio-card img {
  max-width: 100%;
  max-height: 120px;
  object-fit: contain;
  margin-bottom: 12px;
}

.pmv-mq-premio-card p {
  color: var(--pmv-texto);
  font-weight: 600;
  margin: 0;
}

.pmv-premio-destacado {
  position: relative;
  border: 2px solid var(--pmv-amarillo);
}

.pmv-premio-destacado .pmv-card-body {
  background: linear-gradient(160deg, var(--pmv-rosa), var(--pmv-amarillo));
}

.pmv-premio-destacado .pmv-card-body h3,
.pmv-premio-destacado .pmv-card-body p {
  color: var(--pmv-tinta);
}

.pmv-premio-destacado-etiqueta {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: var(--pmv-tinta);
  color: var(--pmv-amarillo);
  font-family: var(--pmv-font-display);
  font-size: calc(12px * var(--pmv-escala-botones));
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
}

.pmv-mq-premio-grande {
  background: linear-gradient(160deg, var(--pmv-rosa), var(--pmv-amarillo));
  border-radius: var(--pmv-radio);
  padding: 30px;
  text-align: center;
  grid-column: span 1;
  transition: transform var(--pmv-transicion), box-shadow var(--pmv-transicion);
}

.pmv-mq-premio-grande:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.24);
}

.pmv-mq-premio-grande h3 {
  font-family: var(--pmv-font-display);
  color: var(--pmv-tinta);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.pmv-mq-premio-grande img {
  max-width: 100%;
  max-height: 130px;
  object-fit: contain;
  margin-bottom: 12px;
}

.pmv-mq-premio-grande p {
  color: var(--pmv-tinta);
  font-weight: 700;
  margin: 0;
}

.pmv-mq-agenda-item {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 16px;
  align-items: center;
  background: var(--pmv-cristal-fondo);
  border-radius: var(--pmv-radio);
  padding: 16px 20px;
  margin-bottom: 14px;
  transition: transform var(--pmv-transicion), box-shadow var(--pmv-transicion), border-color var(--pmv-transicion), background var(--pmv-transicion);
  border: 1px solid var(--pmv-cristal-borde);
}

.pmv-mq-agenda-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--pmv-cristal-sombra-hover);
  border-color: var(--pmv-rosa);
  background: var(--pmv-cristal-fondo-hover);
}

.pmv-mq-agenda-item.pmv-mq-final {
  border: 2px solid var(--pmv-amarillo);
}

.pmv-mq-agenda-hora {
  font-weight: 700;
  color: var(--pmv-texto);
  text-align: center;
  line-height: 1.3em;
}

.pmv-mq-agenda-detalle strong {
  color: var(--pmv-texto);
}

.pmv-mq-agenda-logos {
  display: flex;
  gap: 10px;
}

.pmv-mq-agenda-logos a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f5f5f5;
  transition: transform 0.2s ease, background 0.2s ease;
}

.pmv-mq-agenda-logos a:hover {
  transform: scale(1.1);
  background: var(--pmv-amarillo);
}

.pmv-mq-agenda-logos img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.pos-pill {
  display: inline-block;
  min-width: 26px;
  padding: 2px 8px;
  border-radius: 999px;
  text-align: center;
  font-weight: 700;
  color: #ffffff;
}

.pos-verde .pos-pill {
  background: #1f9d55;
}

.pos-rojo .pos-pill {
  background: #b23a3a;
}

.pmv-mq-muted {
  color: #9f9f9f;
  font-style: italic;
}

.default-service-column .lower-part {
  background: #ffffff;
}

/* Arreglos de restos del naranja de la plantilla de constructora original */

.default-intro-section:before {
  background: var(--pmv-velo) !important;
}

.default-intro-section .content-box:before {
  background: var(--pmv-tinta-2) !important;
}

/* El recorte en diagonal del recuadro (skewX en .content-box:before) muerde
   la esquina superior izquierda mas de lo que cubre el padding original
   (70px), asi que el titulo "Sobre nosotros" queda pegado o se sale del
   borde. Se amplia el padding izquierdo para que el texto quede siempre
   dentro del recuadro oscuro. */
.default-intro-section .content-box {
  padding-left: 200px;
}

/* El boton "Hablar" quedaba pegado arriba, flotando solo, porque el texto
   de al lado es mucho mas alto y las columnas de Bootstrap no se centran
   entre si por defecto. Se centra verticalmente respecto al texto. */
#sobre .content-box > .row.clearfix {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* El boton "MakerQuiz" de la cabecera venia de la plantilla de constructora
   original: un parche de color sobre una forma en diagonal que en el tema
   oscuro se confundia con el fondo y no se distinguia como boton. Se
   sustituye por un boton solido normal, igual que el resto de theme-btn del
   sitio, para que se vea claramente clicable en ambos temas. */
.main-header .btn-outer {
  background: transparent !important;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.main-header .btn-outer .inq-btn {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 26px;
  background: var(--pmv-rosa) !important;
  border-radius: 8px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  transition: background var(--pmv-transicion), color var(--pmv-transicion), transform var(--pmv-transicion);
}

.main-header .btn-outer .inq-btn:hover {
  background: var(--pmv-amarillo) !important;
  color: var(--pmv-tinta) !important;
  transform: translateY(-2px);
}

.main-header .btn-outer .inq-btn:before {
  content: none;
}

.main-menu .navigation > li:hover:before,
.main-menu .navigation > li.current:before,
.main-menu .navigation > li.current-menu-item:before {
  background: var(--pmv-amarillo) !important;
}

.footer-upper .links-widget li a:hover {
  color: var(--pmv-amarillo) !important;
}

.preloader {
  background-color: var(--pmv-fondo) !important;
  background-image: none !important;
}

.scroll-to-top {
  color: var(--pmv-blanco) !important;
}

.scroll-to-top:before {
  background: var(--pmv-rosa) !important;
  border-color: var(--pmv-rosa) !important;
}

.scroll-to-top:hover {
  color: var(--pmv-tinta) !important;
}

.scroll-to-top:hover:before {
  background: var(--pmv-amarillo) !important;
  border-color: var(--pmv-amarillo) !important;
}

@media (max-width: 767px) {
  .main-menu .navbar-header .navbar-toggle {
    background: var(--pmv-rosa) !important;
    border-color: var(--pmv-rosa) !important;
  }

  .navbar-collapse > .navigation,
  .navbar-collapse > .navigation > li > ul,
  .navbar-collapse > .navigation > li > ul > li > ul {
    background: var(--pmv-superficie) !important;
  }

  .navbar-collapse > .navigation > li > a,
  .navbar-collapse > .navigation > li > ul > li > a {
    color: var(--pmv-superficie-texto) !important;
    background: var(--pmv-superficie) !important;
  }

  .main-menu .navbar-collapse > .navigation > li.current.current > a,
  .main-menu .navbar-collapse > .navigation > li.current-menu-item.current-menu-item > a {
    color: var(--pmv-amarillo) !important;
  }
}

.default-service-column:hover .lower-part .left-curve,
.default-service-column:hover .lower-part .right-curve {
  border-top-color: var(--pmv-rosa);
}

.pmv-section {
  padding: 80px 0;
  border-top: 1px solid rgba(127, 127, 127, 0.14);
}

/* La seccion que quede pegada justo debajo del hero no lleva ese borde: sin
   el difuminado que lo tapaba, se veia como una raya suelta flotando en el
   hueco entre el hero y el titulo. Tampoco lleva el padding superior
   completo: el hero ya tiene su propio peso visual (560px + contenido), asi
   que sumarle los 80px de siempre dejaba un hueco mucho mayor que entre el
   resto de secciones. app.js decide en cada carga cual es la primera segun
   el registro de secciones activas. */
.pmv-primera-seccion {
  border-top: none;
  padding-top: 40px;
}

/* :not(.default-intro-section) para no pisar la capa oscura fija que esa
   seccion (#sobre) pone sobre su imagen de fondo: aqui el fondo por defecto
   es "transparent", y con :nth-of-type a secas tendria mas especificidad que
   ".default-intro-section" y se comeria su background-color.
   Las secciones impares usan el mismo --pmv-fondo que cabecera/pie (asi
   cambiarlo se nota en medio pagina, no solo en la cabecera); las pares usan
   --pmv-fondo-par para la franja alterna. */
.pmv-section:not(.default-intro-section):nth-of-type(odd) {
  background: var(--pmv-fondo);
}

.pmv-section:not(.default-intro-section):nth-of-type(even) {
  background: var(--pmv-fondo-par);
}

#mq-hero {
  padding-bottom: 20px;
}

#mq-hero .sec-title {
  margin-bottom: 0;
}

#mq-que-es {
  padding-top: 20px;
}

#mq-que-es .sec-title {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  #mq-hero {
    padding-bottom: 12px;
  }

  #mq-que-es {
    padding-top: 12px;
  }
}

.pmv-banner-section {
  padding: 0;
}

.pmv-banner-section .auto-container {
  padding-left: 0;
  padding-right: 0;
  max-width: 100%;
}

.pmv-banner-section img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  display: block;
}

.pmv-banner-link {
  display: block;
}

.pmv-empty {
  color: #9f9f9f;
  font-size: 16px;
  text-align: center;
  padding: 20px 0;
}

.pmv-muted {
  color: #8c8c8c;
  font-size: 13px;
}

.pmv-hero-list {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  min-height: 560px;
  overflow: hidden;
}

/* Difuminado del borde inferior del hero quitado a peticion (2026-08-20):
   Pili queria ver como quedaba sin el. Si se echa en falta, el bloque
   original esta en el historial de git (buscar "Difumina el borde inferior"). */

.pmv-hero-item {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 1.2s ease;
  z-index: 1;
}

/* El slide activo y el que se acaba de desactivar transicionan su opacidad
   a la vez (app.js quita "active" de uno y lo pone en otro en el mismo
   instante), por lo que uno se desvanece mientras el otro ya esta
   apareciendo: nunca queda un hueco en el que se vea el fondo de la web. */
.pmv-hero-item.active {
  opacity: 1;
  z-index: 2;
}

.pmv-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 15, 20, 0.45);
}

.pmv-hero-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.pmv-hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background var(--pmv-transicion), transform var(--pmv-transicion);
}

.pmv-hero-dot.active {
  background: var(--pmv-amarillo);
  transform: scale(1.2);
}

.pmv-hero-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  color: #ffffff;
  padding: 40px 0;
}

.pmv-hero-content h1 {
  color: #ffffff;
  font-size: calc(52px * var(--pmv-escala-titulos));
  line-height: 1.1em;
  margin-bottom: 12px;
}

.pmv-hero-content h3 {
  color: var(--pmv-amarillo);
  margin-bottom: 14px;
}

.pmv-hero-content p {
  font-size: calc(18px * var(--pmv-escala-texto));
  margin-bottom: 24px;
}

.pmv-card {
  background: #ffffff;
  border: 1px solid #ededed;
  border-radius: var(--pmv-radio);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
  margin-bottom: 30px;
  height: 100%;
  overflow: hidden;
  transition: transform var(--pmv-transicion), box-shadow var(--pmv-transicion), border-color var(--pmv-transicion);
}

.pmv-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.16);
  border-color: var(--pmv-cian);
}

.pmv-card-image {
  width: 100%;
  height: 230px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.pmv-card:hover .pmv-card-image {
  transform: scale(1.06);
}

.pmv-card-body {
  padding: 20px;
}

.pmv-card-body h3 {
  margin-bottom: 8px;
  font-size: calc(22px * var(--pmv-escala-titulos));
  line-height: 1.3em;
  color: var(--pmv-tinta);
}

.pmv-card-body p {
  color: var(--pmv-tinta);
}

.pmv-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.pmv-card-footer .btn-style-three {
  font-size: calc(12px * var(--pmv-escala-botones));
  padding: 8px 16px;
}

.pmv-video-card {
  display: block;
}

.pmv-video-thumb {
  position: relative;
  display: block;
  overflow: hidden;
}

.pmv-video-thumb::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(11, 15, 20, 0.55);
  pointer-events: none;
  transition: background var(--pmv-transicion);
}

.pmv-video-thumb::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(50% + 3px);
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #ffffff;
  pointer-events: none;
  z-index: 1;
}

.pmv-video-card:hover .pmv-video-thumb::after {
  background: var(--pmv-rosa);
}

/* Los titulos de video son frases completas (vienen tal cual de YouTube), no
   los 2-3 palabras cortas de un producto o colaborador: con el mismo tamano
   que el resto de tarjetas (pensado para titulos cortos) se veian enormes al
   ocupar 3-4 lineas. Se atan a --pmv-escala-texto (el mismo control del
   admin que ya usan los parrafos) en vez de --pmv-escala-titulos, para que
   el tamano por defecto se acerque al del texto normal y siga siendo
   ajustable desde Colores. */
.pmv-video-card .pmv-card-body h3 {
  font-size: calc(17px * var(--pmv-escala-texto));
  font-weight: 600;
}

.pmv-colaborador-card {
  background: var(--pmv-cristal-fondo);
  border: 1px solid var(--pmv-cristal-borde);
}

.pmv-colaborador-card:hover {
  border-color: var(--pmv-rosa);
  background: var(--pmv-cristal-fondo-hover);
  box-shadow: var(--pmv-cristal-sombra-hover);
}

.pmv-colaborador-card .pmv-card-body h3,
.pmv-colaborador-card .pmv-card-body p {
  color: var(--pmv-texto);
}

.pmv-badge {
  display: inline-block;
  font-size: calc(12px * var(--pmv-escala-botones));
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 12px;
  margin-bottom: 10px;
  border-radius: 999px;
}

.pmv-badge-disponible {
  color: #165f2f;
  background: #d9f4e4;
}

.pmv-badge-agotado {
  color: #7a1f1f;
  background: #f7dfdf;
}

.pmv-badge-proximamente {
  color: #664300;
  background: #ffe8b4;
}

.pmv-agenda-list {
  margin: 0;
  padding: 0;
}

.pmv-agenda-item {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 20px;
  padding: 18px;
  border: 1px solid var(--pmv-cristal-borde);
  border-radius: var(--pmv-radio);
  margin-bottom: 16px;
  background: var(--pmv-cristal-fondo);
  transition: transform var(--pmv-transicion), box-shadow var(--pmv-transicion), border-color var(--pmv-transicion), background var(--pmv-transicion);
}

.pmv-agenda-item:hover {
  transform: translateY(-4px) translateX(2px);
  box-shadow: var(--pmv-cristal-sombra-hover);
  border-color: var(--pmv-rosa);
  background: var(--pmv-cristal-fondo-hover);
}

.pmv-agenda-fecha {
  font-size: 20px;
  font-weight: 700;
  color: var(--pmv-texto);
}

.pmv-agenda-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pmv-agenda-contenido h3,
.pmv-agenda-contenido p {
  color: var(--pmv-texto);
}

.pmv-chip {
  display: inline-block;
  background: var(--pmv-cian);
  color: var(--pmv-tinta);
  font-size: calc(12px * var(--pmv-escala-botones));
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
}

.pmv-table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 24px;
  border-radius: var(--pmv-radio);
  border: 1px solid var(--pmv-cristal-borde);
  background: var(--pmv-cristal-fondo);
}

.pmv-table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}

.pmv-table th,
.pmv-table td {
  border: 1px solid var(--pmv-cristal-linea);
  padding: 10px 12px;
}

.pmv-table th {
  background: var(--pmv-tinta);
  color: #ffffff;
}

.pmv-table td {
  color: var(--pmv-texto);
}

/* Filas alternas (zebra) con un tinte neutro semi-transparente: al ir sobre
   el fondo de la pagina en vez de un color fijo, se ve claro-oscuro tanto en
   tema oscuro como en tema claro sin necesitar reglas separadas por tema. */
.pmv-table tbody tr {
  transition: background var(--pmv-transicion);
}

.pmv-table tbody tr:nth-child(even) {
  background: rgba(127, 127, 127, 0.09);
}

.pmv-table tbody tr:hover {
  background: var(--pmv-cristal-fondo-hover);
}

.pmv-makerquiz-preguntas {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

/* Tarjeta tipo "flip": misma idea visual que las tarjetas de
   .pmv-mq-rule (cristal + borde rosa al interactuar), pero con las dos
   caras (pregunta/respuesta) apiladas y giradas en 3D con CSS puro. */
.pmv-mq-pregunta {
  position: relative;
  min-height: 160px;
  perspective: 1200px;
}

.pmv-mq-pregunta--con-respuesta {
  cursor: pointer;
}

.pmv-mq-pregunta__tarjeta {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.pmv-mq-pregunta--con-respuesta.is-volteada .pmv-mq-pregunta__tarjeta {
  transform: rotateY(180deg);
}

.pmv-mq-pregunta__cara {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 16px 20px;
  overflow-y: auto;
  background: var(--pmv-cristal-fondo);
  border: 1px solid var(--pmv-cristal-borde);
  border-radius: var(--pmv-radio);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: box-shadow var(--pmv-transicion), border-color var(--pmv-transicion), background var(--pmv-transicion);
}

.pmv-mq-pregunta:not(.pmv-mq-pregunta--con-respuesta):hover .pmv-mq-pregunta__cara,
.pmv-mq-pregunta--con-respuesta:hover .pmv-mq-pregunta__cara,
.pmv-mq-pregunta--con-respuesta:focus-visible .pmv-mq-pregunta__cara {
  box-shadow: var(--pmv-cristal-sombra-hover);
  border-color: var(--pmv-rosa);
  background: var(--pmv-cristal-fondo-hover);
}

.pmv-mq-pregunta__cara--respuesta {
  transform: rotateY(180deg);
}

.pmv-mq-pregunta__texto {
  color: var(--pmv-texto);
}

.pmv-mq-pregunta__cara--pregunta .pmv-mq-pregunta__texto {
  font-weight: 600;
}

.pmv-mq-pregunta__etiqueta {
  color: var(--pmv-titulo-acento);
  text-shadow: 2px 2px 0 var(--pmv-titulo-sombra);
  font-family: var(--pmv-font-display);
  font-size: calc(13px * var(--pmv-escala-titulos));
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pmv-logo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--pmv-cristal-fondo);
  border: 1px solid var(--pmv-cristal-borde);
  border-radius: var(--pmv-radio);
  padding: 14px;
  margin-bottom: 18px;
  min-height: 220px;
  transition: transform var(--pmv-transicion), box-shadow var(--pmv-transicion), border-color var(--pmv-transicion), background var(--pmv-transicion);
}

.pmv-logo-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--pmv-cristal-sombra-hover);
  border-color: var(--pmv-rosa);
  background: var(--pmv-cristal-fondo-hover);
}

.pmv-logo-card img {
  transition: transform 0.4s ease;
}

.pmv-logo-card:hover img {
  transform: scale(1.08);
}

.pmv-logo-card img {
  max-width: 85%;
  max-height: 160px;
  object-fit: contain;
  margin-bottom: 10px;
}

.pmv-logo-card span {
  font-weight: 600;
  color: var(--pmv-texto);
}

.pmv-red-social-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: left;
  gap: 10px;
  width: auto;
  padding: 13px 24px 13px 13px;
  margin: 0 6px 12px;
  border-radius: var(--pmv-radio);
  border: 1px solid var(--pmv-cristal-borde);
  background: var(--pmv-cristal-fondo);
  transition: transform var(--pmv-transicion), box-shadow var(--pmv-transicion), border-color var(--pmv-transicion), background var(--pmv-transicion);
}

.pmv-red-social-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--pmv-cristal-sombra-hover);
  border-color: var(--pmv-rosa);
  background: var(--pmv-cristal-fondo-hover);
}

.pmv-red-social-card .pmv-red-social {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pmv-cristal-linea);
}

.pmv-red-social-card .pmv-red-social img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.pmv-red-social-card__nombre {
  font-weight: 600;
  color: var(--pmv-texto);
  font-size: 15px;
  white-space: nowrap;
}

.pmv-rol {
  font-weight: 700;
  color: var(--pmv-rosa);
}

.pmv-redes-inline a {
  margin-right: 10px;
  text-transform: capitalize;
}

.pmv-contact-card {
  background: var(--pmv-cristal-fondo);
  border: 1px solid var(--pmv-cristal-borde);
  color: var(--pmv-texto);
  padding: 30px;
  border-radius: var(--pmv-radio);
}

.pmv-contact-card h3,
.pmv-contact-card p {
  color: var(--pmv-texto);
}

.pmv-contact-form input,
.pmv-contact-form textarea {
  width: 100%;
  border: 1px solid var(--pmv-cristal-borde);
  border-radius: var(--pmv-radio);
  margin-bottom: 12px;
  padding: 12px;
  background: var(--pmv-cristal-fondo);
  color: var(--pmv-texto);
  transition: border-color var(--pmv-transicion), background var(--pmv-transicion);
}

.pmv-contact-form input:focus,
.pmv-contact-form textarea:focus {
  outline: none;
  border-color: var(--pmv-rosa);
  background: var(--pmv-cristal-fondo-hover);
}

.pmv-contact-form input::placeholder,
.pmv-contact-form textarea::placeholder {
  color: var(--pmv-texto-muted);
  opacity: 1;
}

.pmv-contact-form textarea {
  min-height: 130px;
}

.pmv-footer-brand {
  margin-bottom: 12px;
  max-width: 180px;
}

/* El contenido legal lo escribe el admin en bloques sueltos (subtitulo /
   parrafo / lista) que pueden ser tan largos o cortos como haga falta: la
   estructura ya viene bien segmentada desde content.json. Lo que hacia que
   se viera "todo pegado y denso" era que el texto ocupaba el ancho entero
   del auto-container (1200px) sin limite de linea, asi que aqui se acota a
   un ancho de lectura comodo, se envuelve en una tarjeta "cristal" para que
   se note donde empieza y acaba el bloque legal, y cada subtitulo numerado
   lleva una linea separadora encima para que las secciones se distingan de
   un vistazo aunque el admin no toque el contenido. */
.pmv-legal {
  max-width: 760px;
  margin: 0 auto;
  background: var(--pmv-cristal-fondo);
  border: 1px solid var(--pmv-cristal-borde);
  border-radius: var(--pmv-radio);
  padding: 44px 50px;
}

.pmv-legal h1 {
  font-family: var(--pmv-font-display);
  color: var(--pmv-titulo-acento);
  text-shadow: 4px 4px 0 var(--pmv-titulo-sombra);
  text-transform: uppercase;
  margin-bottom: 30px;
}

.pmv-legal h2 {
  font-family: var(--pmv-font-display);
  color: var(--pmv-texto);
  font-size: calc(22px * var(--pmv-escala-titulos));
  margin-top: 40px;
  padding-top: 30px;
  margin-bottom: 14px;
  border-top: 1px solid var(--pmv-cristal-linea);
}

.pmv-legal h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.pmv-legal h3 {
  color: var(--pmv-texto);
  font-size: calc(17px * var(--pmv-escala-titulos));
  margin-top: 20px;
  margin-bottom: 8px;
}

.pmv-legal p,
.pmv-legal li {
  color: var(--pmv-texto-muted);
  font-size: calc(16px * var(--pmv-escala-texto));
  line-height: 1.8em;
  margin-bottom: 14px;
}

.pmv-legal ul {
  padding-left: 22px;
  margin-bottom: 18px;
}

.pmv-legal li {
  margin-bottom: 8px;
}

.pmv-legal strong {
  color: var(--pmv-texto);
}

@media (max-width: 767px) {
  .pmv-legal {
    padding: 28px 22px;
  }
}

.pmv-legal-fecha {
  text-align: center;
  color: var(--pmv-texto-muted);
  font-style: italic;
  margin-top: 30px;
}

.pmv-legal-nota {
  text-align: center;
  color: var(--pmv-texto-muted);
  font-size: 14px;
  margin-top: 20px;
}

.pmv-cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: var(--pmv-tinta-2);
  color: rgba(255, 255, 255, 0.85);
  padding: 18px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.35);
}

.pmv-cookie-banner__texto {
  flex: 1 1 320px;
  font-size: 14px;
  line-height: 1.5em;
  margin: 0;
}

.pmv-cookie-banner__texto a {
  color: var(--pmv-amarillo);
}

.pmv-cookie-banner__acciones {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}

.pmv-cookie-banner__rechazar {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: underline;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
}

.pmv-cookie-banner__rechazar:hover {
  color: var(--pmv-blanco);
}

@media (max-width: 767px) {
  .pmv-cookie-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}

.pmv-newsletter-inner {
  background: var(--pmv-cristal-fondo);
  border: 1px solid var(--pmv-cristal-borde);
  color: var(--pmv-texto);
  padding: 40px;
  border-radius: var(--pmv-radio);
  display: flex;
  justify-content: center;
}

.pmv-newsletter-form {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pmv-newsletter-form input[type="email"] {
  padding: 12px;
  border: 1px solid var(--pmv-cristal-borde);
  border-radius: var(--pmv-radio);
  background: var(--pmv-cristal-fondo);
  color: var(--pmv-texto);
  transition: border-color var(--pmv-transicion), background var(--pmv-transicion);
}

.pmv-newsletter-form input[type="email"]:focus {
  outline: none;
  border-color: var(--pmv-rosa);
  background: var(--pmv-cristal-fondo-hover);
}

.pmv-newsletter-form input[type="email"]::placeholder {
  color: var(--pmv-texto-muted);
  opacity: 1;
}

.pmv-newsletter-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.pmv-newsletter-consentimiento {
  font-size: calc(13px * var(--pmv-escala-botones));
  color: var(--pmv-texto-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: normal;
}

.pmv-newsletter-consentimiento a {
  color: var(--pmv-titulo-acento);
}

.pmv-form-mensaje {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  margin: 0;
}

.pmv-form-mensaje--ok {
  background: rgba(0, 153, 229, 0.15);
  color: #6fd0ff;
  border: 1px solid var(--pmv-cian);
}

.pmv-form-mensaje--error {
  background: rgba(255, 46, 166, 0.15);
  color: #ff6fc4;
  border: 1px solid var(--pmv-rosa);
}

@media (max-width: 991px) {
  .pmv-hero-list {
    min-height: 420px;
  }

  .pmv-hero-content h1 {
    font-size: calc(38px * var(--pmv-escala-titulos));
  }

  .pmv-agenda-item {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .pmv-section {
    padding: 60px 0;
  }

  .pmv-hero-content h1 {
    font-size: calc(32px * var(--pmv-escala-titulos));
  }

  .pmv-hero-content p {
    font-size: calc(16px * var(--pmv-escala-texto));
  }
}