
/* QIE Molecular · logo oficial SVG. Se conserva su proporción 1922:592. */
.logo.qie-molecular-logo {
  display: inline-flex;
  align-items: center;
  width: 180px;
  max-width: 100%;
  min-width: 0;
  line-height: 0;
}
.logo.qie-molecular-logo img {
  display: block;
  width: 100%;
  height: auto;
  flex: 0 0 auto;
}
@media (max-width: 520px) {
  .logo.qie-molecular-logo { width: 158px; }
}

/* QIE Molecular · iconos y contenido de la barra superior */
.utility-contact-line,
.utility-shipping-line {
  gap: 10px;
  flex-wrap: wrap;
}
.utility-inline-piece {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.utility-inline-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: #fff;
  stroke: currentColor;
}
.utility-separator {
  color: rgba(255,255,255,.72);
}
@media (max-width: 900px) {
  .utility-contact-line,
  .utility-shipping-line {
    gap: 8px;
  }
}



/* QIE Molecular · separación solicitada entre Header, Slider y Logos */
#pb-i1788798548193w8817itoqwp .gallery-section#slider {
  padding-top: 25px !important;
  padding-bottom: 25px !important;
}

/* El espacio inferior del slider aporta los 25px completos antes de los logos. */
#pb-i17887985917596qodc44dhlf #LOGO-DEMO-03 .logo-inner {
  padding-top: 0 !important;
}



      .st0 {
        fill: #39b2bb;
      }

      .st1 {
        fill: #336063;
      }
  
/* QIE Molecular · logos de marcas en el carrusel infinito */
.marquee .client-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 130px;
  flex: 0 0 220px;
  margin: 0 12px;
  padding: 24px;
  background: var(--color-white, #fff);
  border-radius: var(--radius-card, 20px);
  box-shadow: 0 18px 50px rgba(34, 63, 89, .07);
}

.marquee .client-logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* QIE Molecular · forzar 3 columnas en cifras (solo Home) */
#trayectoria-stats-01 #DEMO-TRAYECTORIA-01 .tray-grid {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
  #trayectoria-stats-01 #DEMO-TRAYECTORIA-01 .tray-grid {
    grid-template-columns: 1fr;
  }
}
/* QIE Molecular · íconos en cifras */
#trayectoria-stats-01 #DEMO-TRAYECTORIA-01 .tray-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  color: var(--color-key);
}
#trayectoria-stats-01 #DEMO-TRAYECTORIA-01 .tray-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}
/* QIE Molecular · íconos Phosphor (rellenos) en cards de 3 columnas */
#icon-cards-02 .icon-card-icon svg {
  fill: currentColor;
  stroke: none;
}
/* QIE Molecular · cards clicables con flecha hacia contacto (consistente con .ui-circle-btn de la guía de estilos) */
#icon-cards-02 a.icon-card {
  display: flex;
  flex-direction: column;
}
#icon-cards-02 .icon-card-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-top: auto;
  color: var(--color-key);
  transition: transform .24s ease, color .24s ease;
}
#icon-cards-02 .icon-card-arrow svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#icon-cards-02 a.icon-card:hover .icon-card-arrow {
  color: var(--color-support);
  transform: translateX(4px);
}
#acordeon-02 .acc-multiple button {
  padding: 22px 0;
}
/* QIE Molecular · espaciado interno del acordeón de FAQ */
#acordeon-02 .acc-multiple button {
  padding: 30px 26px;
}
#acordeon-02 .acc-multiple article > div {
  padding: 0 26px;
}
#acordeon-02 .acc-multiple p {
  padding: 0 0 30px;
}
#acordeon-02 .acc-multiple article.open > div {
  max-height: 280px; /* más espacio por si el padding empuja el contenido y se corta */
}
/* QIE Molecular · fusionar título de FAQ con el bloque oscuro del acordeón */
#pb-i1788798924192yy51dk5sf9 {
  background: var(--color-dark);
  padding-top: 60px;
}
.title-resource-inner.pb-section-content {
  padding-bottom: 80px!important;
}
article.open {
  margin-bottom: 5px!important;
}

/* QIE Molecular · botón "Contactar" bajo el carrusel de testimonios */
#CARRUSELES-01 .carousel-footer {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
#CARRUSELES-01 .carousel-contact-btn {
  gap: 8px;
}
#CARRUSELES-01 .carousel-contact-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
/* QIE Molecular · carrusel de testimonios: 3 cards anchas, sin foto, fade en bordes, loop automático */
.carousel-embed #CAROUSEL-01 .service-photo {
  display: none;
}
.carousel-embed #CAROUSEL-01 .service-card {
  flex: 0 0 420px;
  min-height: 220px;
}
.carousel-embed #CAROUSEL-01 .carousel-section {
  padding-top: 74px !important;
  padding-bottom: 74px !important;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}
.carousel-embed #CAROUSEL-01 .carousel-track {
  overflow: visible;
  width: max-content;
  animation: qie-testimonios-scroll 30s linear infinite;
}
.carousel-embed #CAROUSEL-01 .carousel-track:hover {
  animation-play-state: paused;
}
@keyframes qie-testimonios-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.carousel-head h2 {
  padding-top: 59px;
}
/* QIE Molecular · cards de marcas: logo en placa blanca en vez de foto de fondo */
#cards-02 .demo-card::before,
#cards-02 .demo-card::after {
  display: none;
}
#cards-02 .demo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 40px;
}
#cards-02 .demo-card-logo {
  width: 340px;
  height: 160px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#cards-02 .demo-card-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
#cards-02 .demo-card {
  background: #336063!important; /* cambia este valor al color que quieras */
}

/* QIE Molecular · hero de Marcas: reducir alto real (vence las 2 capas de min-height: 100vh) */
#hero-12.screen-section {
  min-height: auto !important;
  display: block !important;
}
#hero-12.screen-section > .hero-minimal {
  min-height: auto !important;
  height: auto !important;
  padding-top: 350px !important;
  padding-bottom: 80px !important;
}
#hero-12 .hero-mascot {
  width: 450px !important;
  height: auto !important;
  margin: 40px auto 0 !important;
  display: block;
  cursor: pointer;
  animation: qie-mascot-enter 1.6s cubic-bezier(.22, 1, .36, 1) forwards,
             qie-mascot-float 2s ease-in-out 1.6s infinite;
}
#hero-12 .hero-mascot:hover {
  transform: scale(1.08) rotate(-3deg);
}
@keyframes qie-mascot-enter {
  from { transform: translateX(260px); }
  to   { transform: translateX(0); }
}
@keyframes qie-mascot-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
/* QIE Molecular · imagen real en hero de imagen lateral */
#hero-01 .visual {
  overflow: hidden;
}
#hero-01 .visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* QIE Molecular · evitar que se corten las cabezas en las fotos del equipo */
#cards-04 .demo-card::before {
  background-position: center 33%;
}

/* QIE Molecular · página de marca (Omega/Biolabs): video, logo, 3 columnas, carrusel de destacados */

/* 1. Video en vez de imagen */
.about-square-video {
  background-image: none !important;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.about-square-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 2. Logo junto a "Confianza" */
.additional-label-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.additional-label-logo {
  width: 250px!important;
  height: auto;
  object-fit: contain;
}

/* 3. Listas en 3 columnas (solo en esta sección, sin afectar otras páginas) */
#pb-i1788818826529vsxje62yezh .additional-01-copy {
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
}

/* 4. Productos destacados como carrusel (4 visibles) */
#featured-grid {
  display: flex !important;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: none;
}
#featured-grid::-webkit-scrollbar { display: none; }
#featured-grid .product-card {
  flex: 0 0 calc((100% - 2 * 24px) / 3);
  scroll-snap-align: start;
}
#featured-grid .product-img {
  aspect-ratio: 16 / 9;
}

/* QIE Molecular · productos destacados: carrusel con flechas visibles */
.featured-carousel-wrap {
  position: relative;
}
#featured-grid {
  display: flex !important;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: none;
}
#featured-grid::-webkit-scrollbar { display: none; }
#featured-grid .product-card {
  flex: 0 0 calc((100% - 2 * 24px) / 3);
  scroll-snap-align: start;
}
#featured-grid .product-img {
  aspect-ratio: 16 / 9;
}
.featured-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: #fff;
  color: var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  z-index: 5;
  transition: background .2s ease, transform .2s ease;
}
.featured-carousel-btn:hover {
  background: var(--color-key);
  color: #fff;
}
.featured-carousel-prev { left: -22px; }
.featured-carousel-next { right: -22px; }
/* QIE Molecular · flechas del carrusel (consistente con .ui-circle-btn de la guía de estilos) */
.featured-carousel-btn {
  position: absolute !important;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-button, 50%);
  border: 1px solid var(--color-key) !important;
  background: #fff !important;
  color: var(--color-key) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--type-card, 18px);
  font-weight: var(--weight-medium, 500);
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  transition: transform .24s ease, box-shadow .24s ease, background .24s ease, color .24s ease, border-color .24s ease;
}
.featured-carousel-btn:hover {
  background: var(--color-key) !important;
  color: #fff !important;
  transform: translateY(calc(-50% - 2px));
  box-shadow: 0 14px 28px rgba(34,63,89,.12);
}
.featured-carousel-prev { left: -22px; }
.featured-carousel-next { right: -22px; }

.title-block .crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--small);
  color: var(--color-muted);
  margin-top: 18px;
  margin-bottom: 18px;
}

/* QIE Molecular · misma apariencia de .product-img, pero con nombre que el script no reconoce */
#featured-grid .product-img-safe {
  aspect-ratio: 4/3;
  background: var(--color-light);
  overflow: hidden;
  position: relative;
}
#featured-grid .product-img-safe img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}
#featured-grid .product-card:hover .product-img-safe img {
  transform: scale(1.05);
}
#featured-grid .product-img-safe .brand-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--color-white);
  color: var(--color-dark);
  padding: 5px 12px;
  border-radius: 3px;
  font-size: var(--small);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* QIE Molecular · Productos Destacados responsive */
@media (max-width: 1024px) {
  #featured-grid .product-card {
    flex: 0 0 calc((100% - 24px) / 2);
  }
}

@media (max-width: 640px) {
  #featured-grid .product-card {
    flex: 0 0 100%;
  }
  .featured-carousel-wrap {
    padding: 0 12px;
  }
  .featured-carousel-btn {
    width: 34px;
    height: 34px;
  }
  .featured-carousel-prev { left: -10px; }
  .featured-carousel-next { right: -10px; }
  #featured-grid .product-img-safe {
    aspect-ratio: 4/3;
  }
}

.accordion-embed .accordion-module .acc-section {
  width:min(calc(100% - 40px),var(--max));
  margin:auto;
  padding:90px 0;
  border-top:0px!important;
  }
  /* QIE Molecular · quitar línea y círculos de hitos en "Trayectoria" */
#trayectoria-stats-08 .tray-milestone-line {
  border-top: none!important;
}
#trayectoria-stats-08 .tray-milestone-line article::before {
  display: none!important;
}
#trayectoria-stats-08 .tray-milestone-line article {
  padding-top: 0!important;
}

/* QIE Molecular · reducir alto del hero de imagen lateral */
#hero-01.screen-section {
  min-height: auto !important;
  display: block !important;
}
#hero-01.screen-section > .hero {
  min-height: auto !important;
  height: auto !important;
  padding-top: 5px !important;
  padding-bottom: 20px !important;
}
/* QIE Molecular · Institución/Laboratorio y Consulta técnica ocupan el ancho completo */
#FORM-DEMO-30 .contact-form label:nth-child(3),
#FORM-DEMO-30 .contact-form label:nth-child(4) {
  grid-column: 1 / -1;
}