/* ============================================================
   VECTRALIS — componentes
   Se apoya en assets/brand.css (tokens, .vx-section, .vx-grid).
   Reglas del cliente: títulos negros grandes, rojo sólo en detalle,
   dos columnas, banners cortos, nada monótono.
   ============================================================ */

/* ============================================================
   ENCABEZADOS — corrección de fondo
   Elementor pinta TODOS los encabezados con el color "primary" del kit,
   que es el rojo de marca. El cliente fue explícito: títulos negros,
   grandes y en negritas; el rojo se reserva a detalles y decoración.
   Se sube la especificidad con body para ganarle al CSS del post.
   ============================================================ */
body .elementor-widget-heading .elementor-heading-title{color:var(--vx-black);}
body .vx-band .elementor-widget-heading .elementor-heading-title{color:#fff;}
body .vx-band .elementor-widget-text-editor{color:rgba(255,255,255,.8);}

/* La clase personalizada cae en el WRAPPER del widget, no en el <h1>.
   Por eso los tamaños se aplican al hijo. */
.vx-display .elementor-heading-title{
  font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:-.03em;font-weight:700;
}
.vx-sechead .elementor-heading-title{text-wrap:balance;}

/* ------------------------------------------------- utilidades de sección */
.vx-section--flush > .e-con-inner{max-width:none;}
.vx-section--tight{padding-block:clamp(48px,6vw,80px);}
.vx-buhead{max-width:var(--container);margin-inline:auto;}
.vx-display{font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:-.03em;}

/* fila de botones */
.vx-btnrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:8px;}
.vx-btnrow--end{justify-content:flex-end;}
@media(max-width:900px){.vx-btnrow--end{justify-content:flex-start;}}

/* el hero lleva el marco rojo más discreto */
.vx-framed--hero::before{left:-14px;top:-14px;width:42%;}

/* ---------------------------------------------------------- botones */
.vx-btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--vx-font);font-weight:700;font-size:var(--fs-small);
  letter-spacing:.01em;line-height:1;
  padding:16px 28px;border:2px solid transparent;border-radius:0;
  text-decoration:none;cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.vx-btn svg{width:1.1em;height:1.1em;flex:none;}
.vx-btn--primary{background:var(--vx-red);color:#fff;border-color:var(--vx-red);}
.vx-btn--primary:hover{background:var(--vx-red-dark);border-color:var(--vx-red-dark);color:#fff;transform:translateY(-2px);}
.vx-btn--ghost{background:transparent;color:var(--vx-black);border-color:var(--vx-black);}
.vx-btn--ghost:hover{background:var(--vx-black);color:#fff;transform:translateY(-2px);}
.vx-btn--light{background:#fff;color:var(--vx-black);border-color:#fff;}
.vx-btn--light:hover{background:transparent;color:#fff;border-color:#fff;}

/* ------------------------------------------------- acentos decorativos
   El manual permite el símbolo y el triángulo como elemento gráfico.
   Aquí se usan como detalle, nunca como foco. */
.vx-rule{height:3px;width:64px;background:var(--vx-red);border:0;margin:0 0 24px;}
.vx-sechead--lead{position:relative;padding-left:28px;}
.vx-sechead--lead::before{
  content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:4px;background:var(--vx-red);
}
.vx-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:700;font-size:var(--fs-caption);letter-spacing:.14em;text-transform:uppercase;
  color:var(--vx-red);margin:0 0 14px;
}
.vx-eyebrow::before{content:"";width:22px;height:2px;background:var(--vx-red);}

/* números grandes como marcador de sección */
.vx-ord{
  font-weight:700;font-size:clamp(2.5rem,6vw,4.5rem);line-height:.9;
  color:var(--vx-g3);letter-spacing:-.04em;display:block;margin-bottom:8px;
}

/* --------------------------------------------------------- revelado */
.vx-reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease;}
.vx-reveal.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.vx-reveal{opacity:1;transform:none;transition:none;}}

/* ============================================================
   ANCHOR BAR — el cliente pidió máximo 4 anclas por página
   ============================================================ */
.vx-anchorbar{border-block:1px solid var(--vx-g3);background:#fff;}
.vx-anchorbar__nav{display:flex;flex-wrap:wrap;gap:8px 32px;align-items:center;}
.vx-anchor{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:700;font-size:var(--fs-small);color:var(--vx-black);
  text-decoration:none;padding:6px 0;position:relative;
}
.vx-anchor::before{
  content:"";width:0;height:0;flex:none;
  border-top:6px solid var(--vx-red);
  border-left:5px solid transparent;border-right:5px solid transparent;
  transition:transform .2s ease;
}
.vx-anchor:hover{color:var(--vx-red);}
.vx-anchor:hover::before{transform:translateY(3px);}
@media(max-width:600px){.vx-anchorbar__nav{gap:4px 20px;}.vx-anchor{font-size:var(--fs-caption);}}

/* ============================================================
   STATS — "by the numbers", números rojos grandes
   ============================================================ */
.vx-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(24px,4vw,56px);width:100%;
}
@media(max-width:900px){.vx-stats{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.vx-stats{grid-template-columns:1fr;}}

.vx-stat{position:relative;padding-top:22px;border-top:3px solid var(--vx-red);}
.vx-stat__num{
  font-family:var(--vx-font);font-weight:700;
  font-size:clamp(3rem,7vw,5.5rem);line-height:.95;letter-spacing:-.045em;
  color:var(--vx-red);font-variant-numeric:tabular-nums;
}
.vx-stat__label{
  margin-top:10px;font-size:var(--fs-small);line-height:1.45;
  color:var(--text-muted);max-width:24ch;
}

/* ============================================================
   BU PANELS — cuatro accesos con video en hover (home)
   ============================================================ */
.vx-bupanels{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
  width:100%;background:var(--vx-gray);
}
@media(max-width:1024px){.vx-bupanels{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.vx-bupanels{grid-template-columns:1fr;}}

.vx-bupanel{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(340px,42vh,460px);padding:28px 26px;
  overflow:hidden;text-decoration:none;color:#fff;background:var(--vx-black);isolation:isolate;
}
.vx-bupanel__media{position:absolute;inset:0;z-index:-2;}
/* La foto de producto de Vectralis suele ir sobre fondo blanco. Sin un piso de
   luminancia el texto blanco encima es ilegible — justo lo que marcó el cliente.
   Por eso brightness() va en el filtro, no sólo el degradado. */
.vx-bupanel__video,.vx-bupanel__img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.05) brightness(.48);
  transition:filter .45s ease,transform .6s ease;
}
.vx-bupanel:hover .vx-bupanel__video,
.vx-bupanel:hover .vx-bupanel__img,
.vx-bupanel:focus-within .vx-bupanel__video{
  filter:grayscale(0) contrast(1) brightness(.62);transform:scale(1.04);
}

/* [MANUAL] el logo nunca va sobre video sin fondo legible: de ahí el scrim */
.vx-bupanel__scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.72) 40%,rgba(0,0,0,.34) 100%);
  transition:background .35s ease;
}
.vx-bupanel:hover .vx-bupanel__scrim{
  background:linear-gradient(to top,rgba(0,0,0,.95) 0%,rgba(0,0,0,.74) 48%,rgba(229,12,25,.3) 100%);
}
.vx-bupanel__lockup{height:34px;width:auto;margin-bottom:14px;filter:brightness(0) invert(1);}
.vx-bupanel__title{font-size:1.5rem;line-height:1.12;margin:0 0 8px;color:#fff;font-weight:700;}
.vx-bupanel__desc{font-size:var(--fs-small);line-height:1.5;color:rgba(255,255,255,.82);margin:0 0 16px;max-width:30ch;}
.vx-bupanel__cta{
  display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:var(--fs-small);
  color:#fff;
}
.vx-bupanel__cta svg{width:18px;height:18px;transition:transform .25s ease;}
.vx-bupanel:hover .vx-bupanel__cta svg{transform:translateX(5px);}
.vx-bupanel::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--vx-red);
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease;
}
.vx-bupanel:hover::after,.vx-bupanel:focus-within::after{transform:scaleX(1);}

/* ============================================================
   FILTROS + TARJETAS DE GALERÍA
   ============================================================ */
.vx-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px;}
.vx-chip{
  font-family:var(--vx-font);font-weight:700;font-size:var(--fs-small);
  padding:11px 20px;border:2px solid var(--vx-g2);background:transparent;color:var(--vx-black);
  cursor:pointer;transition:all .18s ease;line-height:1;
}
.vx-chip:hover{border-color:var(--vx-black);}
.vx-chip.is-active{background:var(--vx-black);border-color:var(--vx-black);color:#fff;}

.vx-gallery__items{margin:0;}
.vx-card{
  display:flex;flex-direction:column;background:#fff;cursor:pointer;
  border:1px solid var(--vx-g3);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.vx-card:hover,.vx-card:focus-visible{
  transform:translateY(-5px);border-color:var(--vx-black);
  box-shadow:0 14px 34px rgba(0,0,0,.13);
}
.vx-card.is-hidden{display:none;}
.vx-card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--vx-g4);}
.vx-card--video .vx-card__media{aspect-ratio:16/9;}
.vx-card__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.vx-card:hover .vx-card__img{transform:scale(1.05);}
.vx-card__count{
  position:absolute;right:12px;bottom:12px;
  background:rgba(0,0,0,.82);color:#fff;font-size:var(--fs-caption);font-weight:700;
  padding:5px 11px;
}
.vx-card__count::after{content:" photos";font-weight:400;opacity:.75;}
.vx-card__play{
  position:absolute;inset:0;margin:auto;width:64px;height:64px;
  background:rgba(229,12,25,.94);
  display:grid;place-items:center;transition:transform .25s ease,background .25s ease;
}
.vx-card__play::before{
  content:"";width:0;height:0;margin-left:4px;
  border-left:20px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent;
}
.vx-card:hover .vx-card__play{transform:scale(1.12);background:var(--vx-red);}
.vx-card__body{padding:20px 20px 24px;display:flex;flex-direction:column;gap:6px;}
.vx-card__job{
  font-size:var(--fs-caption);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--vx-red);
}
.vx-card__title{font-size:1.0625rem;line-height:1.3;margin:0;font-weight:700;color:var(--vx-black);}
.vx-card__excerpt{font-size:var(--fs-small);color:var(--text-muted);margin:0;line-height:1.5;}
.vx-empty{color:var(--text-muted);font-size:var(--fs-body);}
.vx-empty--box{border:2px dashed var(--vx-g2);padding:36px;text-align:center;}
.vx-empty--box p{margin:0 auto 6px;max-width:46ch;}

/* ============================================================
   FEATURE CARDS + SPECS
   ============================================================ */
.vx-fcard{
  background:#fff;border:1px solid var(--vx-g3);padding:28px 26px 30px;
  display:flex;flex-direction:column;gap:10px;position:relative;
  transition:border-color .25s ease,transform .25s ease;
}
.vx-fcard::before{
  content:"";position:absolute;left:0;top:0;width:44px;height:3px;background:var(--vx-red);
  transition:width .3s ease;
}
.vx-fcard:hover{border-color:var(--vx-black);transform:translateY(-4px);}
.vx-fcard:hover::before{width:100%;}
.vx-fcard__icon{width:54px;height:54px;object-fit:contain;margin-bottom:6px;}
.vx-fcard__title{margin:0;font-size:1.2rem;line-height:1.2;color:var(--vx-black);}
.vx-fcard__body{margin:0;font-size:var(--fs-small);line-height:1.55;color:var(--text-muted);}
.vx-alt .vx-fcard{background:#fff;}
.vx-band .vx-fcard{background:#111;border-color:#2a2a2a;}
.vx-band .vx-fcard__title{color:#fff;}
.vx-band .vx-fcard__body{color:rgba(255,255,255,.72);}

.vx-specs{border-top:3px solid var(--vx-black);padding-top:20px;}
.vx-specs__title{margin:0 0 14px;font-size:1.05rem;color:var(--vx-black);}
.vx-specs__list{list-style:none;margin:0;padding:0;}
.vx-specs__list li{
  position:relative;padding:9px 0 9px 22px;font-size:var(--fs-small);
  border-bottom:1px solid var(--vx-g3);line-height:1.5;
}
.vx-specs__list li::before{
  content:"";position:absolute;left:0;top:16px;width:8px;height:2px;background:var(--vx-red);
}

/* imagen sin marco */
.vx-media{margin:0;}
.vx-media img{display:block;width:100%;height:auto;}

/* variantes del V|box */
.vx-var{background:#fff;border:1px solid var(--vx-g3);display:flex;flex-direction:column;
  transition:border-color .25s ease,transform .25s ease;}
.vx-var:hover{border-color:var(--vx-black);transform:translateY(-4px);}
.vx-var__media{aspect-ratio:1;background:var(--vx-g4);overflow:hidden;}
.vx-var__media img{width:100%;height:100%;object-fit:cover;display:block;}
.vx-var__title{margin:18px 18px 6px;font-size:1.05rem;color:var(--vx-black);}
.vx-var__body{margin:0 18px 20px;font-size:var(--fs-small);color:var(--text-muted);line-height:1.5;}

/* bloque de teléfono de soporte dentro de una columna */
.vx-supportline{margin:22px 0 6px;padding-top:20px;border-top:3px solid var(--vx-red);}
.vx-supportline__note{margin:12px 0 0;font-size:var(--fs-small);color:var(--text-muted);max-width:44ch;}

/* ============================================================
   VIDEO / MAPA EMBEBIDO
   ============================================================ */
.vx-videoframe{position:relative;width:100%;aspect-ratio:16/9;background:#000;}
.vx-videoframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.vx-videoframe--sm{max-width:100%;}
.vx-mapframe{position:relative;width:100%;aspect-ratio:21/9;background:var(--vx-g4);
  border:1px solid var(--vx-g3);}
.vx-mapframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
@media(max-width:700px){.vx-mapframe{aspect-ratio:4/3;}}

/* ============================================================
   LISTA DE BENEFICIOS
   ============================================================ */
.vx-benefits{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px;}
.vx-benefits li{position:relative;padding-left:24px;font-size:var(--fs-small);line-height:1.5;}
.vx-benefits li::before{
  content:"";position:absolute;left:0;top:.55em;width:10px;height:2px;background:var(--vx-red);
}

/* ============================================================
   INDUSTRIAS
   ============================================================ */
.vx-ind{background:#fff;border:1px solid var(--vx-g3);display:flex;flex-direction:column;
  transition:border-color .25s ease,transform .25s ease;}
.vx-ind:hover{border-color:var(--vx-black);transform:translateY(-4px);}
.vx-ind__media{aspect-ratio:2/1;overflow:hidden;background:var(--vx-g4);}
.vx-ind__media img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1);transition:filter .4s ease;}
.vx-ind:hover .vx-ind__media img{filter:grayscale(0);}
.vx-ind__title{margin:20px 20px 8px;font-size:1.25rem;color:var(--vx-black);}
.vx-ind__body{margin:0 20px 22px;font-size:var(--fs-small);color:var(--text-muted);line-height:1.55;}

/* ============================================================
   VNEWS
   ============================================================ */
.vx-newscard{background:#fff;border:1px solid var(--vx-g3);
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;}
.vx-newscard:hover{border-color:var(--vx-black);transform:translateY(-5px);
  box-shadow:0 14px 34px rgba(0,0,0,.12);}
.vx-newscard__link{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;}
.vx-newscard__media{aspect-ratio:16/9;overflow:hidden;background:var(--vx-g4);}
.vx-newscard__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.vx-newscard:hover .vx-newscard__img{transform:scale(1.05);}
.vx-newscard__body{padding:20px 20px 24px;display:flex;flex-direction:column;gap:8px;flex:1;}
.vx-newscard__date{font-size:var(--fs-caption);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--vx-red);}
.vx-newscard__title{margin:0;font-size:1.1rem;line-height:1.28;color:var(--vx-black);}
.vx-newscard__excerpt{margin:0;font-size:var(--fs-small);color:var(--text-muted);line-height:1.55;}
.vx-newscard__more{margin-top:auto;padding-top:10px;font-weight:700;font-size:var(--fs-small);
  color:var(--vx-red);}

/* ============================================================
   CONTACTO — jerarquía por departamento
   ============================================================ */
.vx-depts{align-items:stretch;}
.vx-grid--5{grid-template-columns:repeat(5,1fr);}
@media(max-width:1100px){.vx-grid--5{grid-template-columns:repeat(3,1fr);}}
@media(max-width:760px){.vx-grid--5{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.vx-grid--5{grid-template-columns:1fr;}}

/* bloque del teléfono como protagonista (help line) */
.vx-phoneblock{margin-top:10px;padding-top:26px;border-top:4px solid var(--vx-red);}
.vx-phoneblock__hours{margin:18px 0 2px;font-size:var(--fs-body-lg);font-weight:700;
  color:var(--vx-black);}
.vx-phoneblock__scope{margin:0;font-size:var(--fs-small);color:var(--text-muted);}

/* ============================================================
   HUECO DE FORMULARIO — a la espera del embed de Zoho
   ============================================================ */
.vx-formslot{
  border:2px dashed var(--vx-g2);background:#fff;padding:32px;
  display:flex;flex-direction:column;gap:8px;
}
.vx-formslot__note{margin:0;font-size:var(--fs-small);color:var(--text-muted);}
.vx-formslot__alt{margin:0;font-size:var(--fs-small);}

/* ============================================================
   LIGHTBOX
   ============================================================ */
body.vx-lb-open{overflow:hidden;}
.vx-lb{
  position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.94);
  display:grid;grid-template-rows:1fr auto;place-items:center;padding:64px 24px 32px;
}
.vx-lb[hidden]{display:none!important;}
.vx-lb__stage{display:grid;place-items:center;width:100%;height:100%;min-height:0;}
.vx-lb__stage img{max-width:min(1200px,92vw);max-height:78vh;object-fit:contain;display:block;}
.vx-lb__video{width:min(1100px,92vw);aspect-ratio:16/9;}
.vx-lb__video iframe{width:100%;height:100%;border:0;display:block;}
.vx-lb__caption{color:rgba(255,255,255,.86);font-size:var(--fs-small);padding-top:18px;text-align:center;}
.vx-lb__close{
  position:absolute;top:18px;right:22px;width:46px;height:46px;
  background:transparent;border:2px solid rgba(255,255,255,.4);color:#fff;
  font-size:26px;line-height:1;cursor:pointer;transition:all .18s ease;
}
.vx-lb__close:hover{background:var(--vx-red);border-color:var(--vx-red);}
.vx-lb__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:54px;height:54px;background:rgba(255,255,255,.1);border:0;color:#fff;
  font-size:34px;line-height:1;cursor:pointer;transition:background .18s ease;
}
.vx-lb__nav:hover{background:var(--vx-red);}
.vx-lb__nav--prev{left:18px;}
.vx-lb__nav--next{right:18px;}
.vx-lb__nav[hidden]{display:none;}

/* ============================================================
   DOCUMENTOS — visor fliphtml5
   ============================================================ */
.vx-docs{align-items:start;}
.vx-doc{margin:0;border:1px solid var(--vx-g3);background:#fff;display:flex;flex-direction:column;}
.vx-doc__frame{position:relative;width:100%;background:var(--vx-g4);}
.vx-doc--4-3 .vx-doc__frame{aspect-ratio:4/3;}
.vx-doc--16-9 .vx-doc__frame{aspect-ratio:16/9;}
.vx-doc--a4 .vx-doc__frame{aspect-ratio:1/1.414;}
.vx-doc__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.vx-doc__cap{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px 18px;border-top:1px solid var(--vx-g3);
}
.vx-doc__title{font-weight:700;font-size:var(--fs-small);line-height:1.3;color:var(--vx-black);}
.vx-doc__open{
  font-weight:700;font-size:var(--fs-caption);letter-spacing:.06em;text-transform:uppercase;
  color:var(--vx-red);text-decoration:none;white-space:nowrap;
}
.vx-doc__open:hover{text-decoration:underline;}

/* ============================================================
   VACANTES
   ============================================================ */
.vx-vacancies{list-style:none;margin:0;padding:0;border-top:1px solid var(--vx-g3);}
.vx-vacancy{
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  padding:28px 0;border-bottom:1px solid var(--vx-g3);
  transition:padding-left .22s ease;
}
.vx-vacancy:hover{padding-left:12px;}
.vx-vacancy__title{margin:0 0 6px;font-size:1.35rem;line-height:1.2;color:var(--vx-black);}
.vx-vacancy__excerpt{margin:0 0 10px;color:var(--text-muted);font-size:var(--fs-small);max-width:60ch;}
.vx-vacancy__meta{display:flex;gap:8px;flex-wrap:wrap;}
.vx-tag{
  font-size:var(--fs-caption);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--vx-g4);color:var(--text-muted);padding:5px 11px;
}

/* ============================================================
   QUOTE BAR — fija abajo, se estaciona al llegar al footer
   ============================================================ */
.vx-quotebar{
  position:fixed;left:0;right:0;bottom:0;z-index:900;
  background:var(--vx-g4);border-top:3px solid var(--vx-red);
  transition:transform .3s ease;
}
.vx-quotebar.is-parked{position:static;transform:none;}
.vx-quotebar__inner{
  max-width:var(--container);margin:0 auto;
  padding:16px var(--margin-outer);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.vx-quotebar__text{margin:0;font-size:var(--fs-small);color:var(--vx-black);flex:1 1 320px;max-width:none;}
@media(max-width:640px){
  .vx-quotebar__inner{flex-direction:column;align-items:stretch;text-align:left;padding:14px 20px;gap:12px;}
  .vx-quotebar .vx-btn{justify-content:center;}
}

/* ============================================================
   BANDAS Y COMPOSICIÓN — para romper la monotonía
   ============================================================ */
.vx-band{background:var(--vx-black);color:#fff;}
.vx-band h2,.vx-band h3{color:#fff;}
.vx-band p{color:rgba(255,255,255,.8);}

/* frase destacada */
.vx-pull{
  font-size:clamp(1.5rem,3.2vw,2.5rem);font-weight:700;line-height:1.2;
  letter-spacing:-.02em;color:var(--vx-black);max-width:22ch;margin:0;
}
.vx-pull em{font-style:normal;color:var(--vx-red);}

/* dos columnas desiguales, más editorial que 50/50 */
.vx-split--7525{display:grid;grid-template-columns:1.7fr 1fr;gap:clamp(32px,5vw,72px);align-items:start;}
.vx-split--2575{display:grid;grid-template-columns:1fr 1.7fr;gap:clamp(32px,5vw,72px);align-items:start;}
.vx-split--offset > *:nth-child(2){transform:translateY(clamp(24px,5vw,64px));}
@media(max-width:900px){
  .vx-split--7525,.vx-split--2575{grid-template-columns:1fr;}
  .vx-split--offset > *:nth-child(2){transform:none;}
}

/* imagen con marco de acento */
.vx-framed{position:relative;}
.vx-framed img{display:block;width:100%;height:auto;position:relative;z-index:1;}
.vx-framed::before{
  content:"";position:absolute;z-index:0;
  left:-16px;top:-16px;width:52%;aspect-ratio:1;
  border:3px solid var(--vx-red);
}
@media(max-width:600px){.vx-framed::before{display:none;}}

/* tarjetas de producto con imagen de fondo (products & solutions) */
.vx-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:900px){.vx-tiles{grid-template-columns:1fr;}}
.vx-tile{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(300px,38vh,420px);padding:30px 26px;overflow:hidden;
  text-decoration:none;color:#fff;background:var(--vx-black);isolation:isolate;
}
.vx-tile img{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.85) brightness(.5);transition:filter .45s ease,transform .6s ease;
}
.vx-tile::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,.6) 55%,rgba(0,0,0,.3));
}
.vx-tile:hover img{filter:grayscale(0) brightness(.62);transform:scale(1.05);}
.vx-tile__title{font-size:1.6rem;margin:0 0 10px;color:#fff;line-height:1.12;}
.vx-tile__desc{font-size:var(--fs-small);color:rgba(255,255,255,.82);margin:0 0 18px;max-width:32ch;}

/* tarjeta de contacto por departamento — jerarquía que pidió el cliente */
.vx-dept{border-top:3px solid var(--vx-black);padding-top:22px;}
.vx-dept__name{font-size:1.2rem;font-weight:700;margin:0 0 8px;color:var(--vx-black);}
.vx-dept__desc{font-size:var(--fs-small);color:var(--text-muted);margin:0 0 16px;max-width:38ch;}
.vx-dept__line{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-size:var(--fs-body);}
.vx-dept__line a{color:var(--vx-black);text-decoration:none;font-weight:500;}
.vx-dept__line a:hover{color:var(--vx-red);text-decoration:underline;}
.vx-dept__line svg{width:17px;height:17px;flex:none;color:var(--vx-red);}

/* número de teléfono como protagonista (help line) */
.vx-phone{
  display:inline-flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--vx-black);
  font-size:clamp(2rem,5.5vw,4rem);text-decoration:none;
}
.vx-phone:hover{color:var(--vx-red);}
.vx-phone__ext{
  font-size:clamp(1rem,1.8vw,1.4rem);font-weight:700;letter-spacing:0;
  background:var(--vx-red);color:#fff;padding:8px 14px;
}

/* logos de aliados */
.vx-logowall{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(20px,4vw,52px);align-items:center;
}
.vx-logowall img{
  width:100%;height:auto;max-height:62px;object-fit:contain;
  filter:grayscale(1);opacity:.62;transition:filter .3s ease,opacity .3s ease;
}
.vx-logowall img:hover{filter:grayscale(0);opacity:1;}