/*
  OWH PRO THEME (inspirado en el estilo "Tolak")
  - Fondo oscuro + degradados + patrón sutil
  - Header tipo píldora (glass)
  - Cards modernas, botones con brillo
  - Hero con círculo + promo flotante

  Nota: este archivo está pensado para cargarse DESPUÉS de style.css
*/

:root{
  --pro-bg0:#070b18;
  --pro-bg1:#0a1430;

  --pro-blue:#2f72ff;        /* acento principal */
  --pro-blue2:#57a2ff;       /* brillo */
  --pro-gold:#f4b11e;        /* acento secundario */

  --pro-card:rgba(255,255,255,.06);
  --pro-border:rgba(255,255,255,.12);

  --pro-text:rgba(255,255,255,.92);
  --pro-muted:rgba(255,255,255,.70);

  --pro-shadow:0 18px 45px rgba(0,0,0,.35);
  --pro-shadow2:0 26px 75px rgba(0,0,0,.45);
}

/* Fondo global */
body{
  background:
    radial-gradient(1200px 720px at 14% -12%, rgba(47,114,255,.34), transparent 58%),
    radial-gradient(900px 660px at 92% 6%, rgba(244,177,30,.20), transparent 60%),
    linear-gradient(180deg, var(--pro-bg0), var(--pro-bg1));
  color:var(--pro-text);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity:.16;
  -webkit-mask-image: radial-gradient(980px 640px at 62% 10%, #000 0%, transparent 70%);
  mask-image: radial-gradient(980px 640px at 62% 10%, #000 0%, transparent 70%);
  z-index:-1;
}

/* Topbar */
.topbar{
  background: rgba(6,10,20,.55) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  backdrop-filter: blur(12px);
}
.topbar a,
.topbar .linklike{ color: rgba(255,255,255,.82) !important; }
.topbar a:hover,
.topbar .linklike:hover{ color:#fff !important; }
.topbar .pill{
  background: rgba(47,114,255,.18) !important;
  border:1px solid rgba(47,114,255,.35) !important;
  color:#fff !important;
}

.topbar .pill--wa{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.topbar .pill--wa .wa-icon{
  width:17px;
  height:17px;
  color:#fff;
}
.topbar .pill--wa .wa-number{
  color:#fff;
  font-weight:700;
}

/* Header pill */
.header{ background: transparent !important; border-bottom: none !important; }
.header__inner{
  margin-top: 12px;
  background: rgba(6,10,20,.60) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius: 999px;
  padding: 12px 18px;
  backdrop-filter: blur(14px);
  box-shadow: var(--pro-shadow);
}
.brand__logo img{height: 56px; width:auto; filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)); }

.nav a{ color: rgba(255,255,255,.86) !important; }
.nav a:hover{ color:#fff !important; }

.nav__cta{
  background: linear-gradient(90deg, var(--pro-blue), var(--pro-blue2)) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 12px 28px rgba(47,114,255,.22);
}

.iconbtn{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
.iconbtn:hover{ background: rgba(255,255,255,.10) !important; }

/* Botones */
.btn{
  background: linear-gradient(90deg, var(--pro-blue), var(--pro-blue2)) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 12px 28px rgba(47,114,255,.20);
}
.btn:hover{ filter: brightness(1.05); }

.btn--ghost{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: none !important;
}

/* Tipografía */
h1,h2,h3{ letter-spacing: -.02em; }
.lead{ color: var(--pro-muted) !important; }
.kicker{ color: rgba(185,198,238,.86) !important; }

/* Hero PRO */
.hero__scrim{
  background:
    radial-gradient(900px 520px at 18% 10%, rgba(47,114,255,.22), transparent 60%),
    linear-gradient(90deg, rgba(7,11,20,.94) 0%, rgba(7,11,20,.82) 46%, rgba(7,11,20,.62) 78%, rgba(7,11,20,.52) 100%),
    linear-gradient(180deg, rgba(7,11,20,.22) 0%, rgba(7,11,20,.78) 100%);
}

.hero--pro{ padding: 84px 0 96px !important; }
/*
  Mobile UX: el hero PRO estaba sin gutters (padding: 0), y el texto quedaba
  demasiado pegado al borde izquierdo/derecho en pantallas pequeñas.
  Recuperamos padding lateral manteniendo el fondo full-bleed.
*/
.hero--pro .hero__inner{
  padding-left: max(20px, env(safe-area-inset-left)) !important;
  padding-right: max(20px, env(safe-area-inset-right)) !important;
}

@media (max-width: 520px){
  .hero--pro .hero__inner{
    padding-left: max(18px, env(safe-area-inset-left)) !important;
    padding-right: max(18px, env(safe-area-inset-right)) !important;
  }
}

.hero__visual{
  position:relative;
  display:grid;
  place-items:center;
  min-height: 520px;
}

.hero__circle{
  position:relative;
  width: min(520px, 92%);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  overflow:hidden;
  border: 10px solid rgba(47,114,255,.85);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
}

.hero__circle::before{
  content:"";
  position:absolute;
  inset:-22px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 45%, rgba(47,114,255,.35), transparent 62%);
  filter: blur(10px);
}

.hero__circle img{ width:100%; height:100%; object-fit: cover; }

.hero__promo{
  position:absolute;
  right: 12px;
  bottom: -18px;
  width: min(460px, 90%);
  border-radius: 26px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  box-shadow: var(--pro-shadow2);
  backdrop-filter: blur(10px);
}

.hero__promo img{ display:block; width:100%; height:auto; }

/* Lista con checks */
.pro-bullets{
  margin: 14px 0 18px;
  padding: 0;
  list-style: none;
  display:grid;
  gap: 10px;
  color: var(--pro-muted);
}
.pro-bullets li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
}
.pro-bullets li::before{
  content:"";
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.0) 70%),
              linear-gradient(180deg, var(--pro-blue), var(--pro-blue2));
  box-shadow: 0 10px 20px rgba(47,114,255,.20);
}

/* Cards glass */
.feature,
.tile,
.post,
.cta__inner,
.searchbox,
.smalldialog__box,
.searchdialog__box,
.cataloghead,
.productcard,
.cta-strip{
  background: var(--pro-card) !important;
  border: 1px solid var(--pro-border) !important;
  backdrop-filter: blur(14px);
}

.tile,
.post,
.feature{ border-radius: 22px; }

.tile:hover,
.post:hover{ background: rgba(255,255,255,.10) !important; }

.feature__text,
.tile p,
.post p{ color: var(--pro-muted) !important; }

.section--muted{ background: transparent !important; }

/* Servicios home */
.pro-sectionhead{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom: 16px; }
.pro-sectionhead p{ margin:0; color: var(--pro-muted); max-width: 62ch; }

.pro-servicegrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.pro-service{
  padding: 18px;
  border-radius: 22px;
  background: var(--pro-card);
  border: 1px solid var(--pro-border);
  box-shadow: 0 16px 40px rgba(0,0,0,.30);
  transition: transform .15s ease, background .15s ease;
}
.pro-service:hover{ transform: translateY(-2px); background: rgba(255,255,255,.10); }

.pro-ico{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(47,114,255,.18);
  border: 1px solid rgba(47,114,255,.35);
  margin-bottom: 12px;
}

.pro-ico svg{ width: 22px; height:22px; fill: rgba(255,255,255,.90); }
/* Servicios: badges grandes (como medallas) */
.pro-ico--badge{
  width: 220px;
  height: 220px;
  margin: 8px auto 18px;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  /* Sin “marco” cuadrado: el recorte lo hace el propio emblema */
  padding: 0;
  box-sizing: border-box;
}
.pro-ico--badge img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.38));
}

/*
  Badges: NO recortar con clip-path.
  Las imágenes ya vienen diseñadas y el recorte estaba “cortando” bordes.
  Mejor un borde suave para que se vea limpio.
*/
.pro-ico--round img,
.pro-ico--hex img{
  border-radius: 26px;
  -webkit-clip-path: none;
  clip-path: none;
}
@media (max-width: 980px){
  .pro-ico--badge{ width: 190px; height: 190px; padding: 0; }
}


.pro-service h3{ margin: 0 0 6px; }
.pro-service p{ margin: 0 0 12px; color: var(--pro-muted); }
.pro-service .link{ font-weight:700; }

/* Highlights */
.pro-stats{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.pro-stat{
  padding: 16px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  display:flex;
  gap: 14px;
  align-items:flex-start;
  min-height: 86px;
}
.pro-stat strong{ display:block; }
.pro-stat span{ color: var(--pro-muted); font-size: 13px; display:block; }

/* Catálogo */
.catbar{
  background: rgba(47,114,255,.16) !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
.catbtn{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.88) !important;
}
.catbtn:hover{ background: rgba(255,255,255,.10) !important; }
.catbtn.is-active{
  background: rgba(47,114,255,.22) !important;
  border-color: rgba(47,114,255,.40) !important;
}

.productcard__img img{
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
}

/* Footer */
.footer{
  background: rgba(6,10,20,.55) !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  backdrop-filter: blur(12px);
}

@media (max-width: 980px){
  .hero__inner{ grid-template-columns: 1fr !important; }
  .hero__visual{ min-height: 520px; }
  .hero__promo{ position:relative; right:auto; bottom:auto; margin-top: 14px; width: min(520px, 100%); }
  .pro-servicegrid{ grid-template-columns: 1fr; }
  .pro-stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .header__inner{ border-radius: 22px; }
}


.hero__closing{
  margin: 2px 0 18px;
  color: #fff;
  font-weight: 700;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.45;
}


/* WhatsApp pill */
.whatsapp-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  padding:7px 12px !important;
  font-weight:700;
  letter-spacing:.01em;
}
.whatsapp-pill__icon{
  display:inline-grid;
  place-items:center;
  width:18px;
  height:18px;
  color:#fff;
  flex:0 0 auto;
}
.whatsapp-pill__icon svg{
  display:block;
  width:18px;
  height:18px;
}
.whatsapp-pill__number{line-height:1;}
@media (max-width:700px){
  .whatsapp-pill{padding:6px 10px !important; font-size:13px;}
  .whatsapp-pill__icon,
  .whatsapp-pill__icon svg{width:16px; height:16px;}
}

/* Hero single image */
.hero__visual--single{
  min-height: 560px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero__single-art{
  width: min(760px, 98%);
  border-radius: 28px;
  overflow: visible;
  box-shadow: none;
  border: 0;
  background: transparent;
}
.hero__single-art picture,
.hero__single-art img{
  display:block;
  width:100%;
  height:auto;
}
@media (max-width: 980px){
  .hero__visual--single{
    min-height: auto;
    margin-top: 12px;
  }
  .hero__single-art{
    width:min(640px,100%);
    border-radius: 22px;
  }
}


/* Servicios detalle */
.service-detail{
  margin-top: 26px;
  padding: 22px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(14,25,55,.92), rgba(9,14,28,.88));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
}
.service-detail__main{
  display:grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .9fr);
  gap: 22px;
  align-items:start;
}
.service-detail h2{
  margin: 6px 0 10px;
  font-size: clamp(28px, 4vw, 42px);
}
.service-detail__lead{
  margin: 0 0 16px;
  color: var(--pro-muted);
  max-width: 64ch;
}
.service-detail__list{
  list-style:none;
  padding:0;
  margin:0 0 18px;
  display:grid;
  gap: 12px;
}
.service-detail__list li{
  position:relative;
  padding-left: 28px;
  color: rgba(255,255,255,.92);
}
.service-detail__list li::before{
  content:"";
  position:absolute;
  left:0; top:.45em;
  width: 14px; height: 14px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,0) 65%), linear-gradient(180deg, var(--pro-blue), var(--pro-blue2));
  box-shadow: 0 0 0 4px rgba(47,114,255,.12), 0 10px 18px rgba(47,114,255,.16);
}
.service-detail__actions{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  margin-top: 16px;
}
.service-detail__side{
  display:grid;
  gap: 14px;
}
.service-mini{
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
}
.service-mini strong{
  display:block;
  margin-bottom: 8px;
  font-size: 1.05rem;
}
.service-mini p{
  margin:0;
  color: var(--pro-muted);
}
.service-mini-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.service-mini-card{
  padding: 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  min-height: 170px;
}
.service-mini-card h3{
  margin:0 0 8px;
  font-size: 1.02rem;
}
.service-mini-card p{
  margin:0;
  color: var(--pro-muted);
  font-size: .96rem;
}
@media (max-width: 980px){
  .service-detail__main{ grid-template-columns: 1fr; }
}
@media (max-width: 680px){
  .service-mini-grid{ grid-template-columns: 1fr; }
  .service-detail{ padding: 18px; }
}

/* ===== Monitoreo ocupacional ===== */
.service-top-grid{
  margin-bottom: 24px;
}
.tile--focus{
  border-color: rgba(87,162,255,.28);
  box-shadow: 0 16px 50px rgba(17,29,63,.36);
}
.monitoring-service{
  margin-top: 26px;
  scroll-margin-top: 118px;
  padding: 24px;
  border-radius: 30px;
  background:
    radial-gradient(900px 540px at 0% 0%, rgba(47,114,255,.16), transparent 60%),
    linear-gradient(135deg, rgba(12,22,48,.96), rgba(6,10,22,.94));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--pro-shadow2);
}
.monitoring-service__hero{
  display:grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
  gap: 22px;
  align-items:start;
}
.monitoring-service__copy,
.monitor-panel,
.monitoring-benefits,
.monitoring-measures,
.monitor-commitment{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  box-shadow: 0 14px 32px rgba(0,0,0,.18);
}
.monitoring-service__copy{
  padding: 26px;
}
.monitoring-service__copy h2{
  margin: 8px 0 8px;
  font-size: clamp(34px, 4.8vw, 56px);
  line-height: 1.02;
}
.monitoring-service__copy p{
  margin: 0 0 14px;
  color: var(--pro-muted);
  font-size: 1.02rem;
  max-width: 62ch;
}
.monitoring-service__eyebrow{
  margin: 0 0 16px;
  color: rgba(255,255,255,.96) !important;
  font-weight: 700;
  font-size: 1.05rem;
}
.monitoring-service__actions{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  margin-top: 18px;
}
.monitoring-service__media{
  display:grid;
  gap: 14px;
}
.monitor-photo{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.monitor-photo::after{
  content:"";
  position:absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(6,10,20,0), rgba(6,10,20,.65));
  pointer-events:none;
}
.monitor-photo picture,
.monitor-photo img{
  display:block;
  width:100%;
  height:100%;
}
.monitor-photo img{
  object-fit: cover;
}
.monitor-photo--main{
  min-height: 420px;
}
.monitor-photo--wide{
  min-height: 180px;
}
.monitor-photo figcaption{
  position:absolute;
  left:18px;
  right:18px;
  bottom:16px;
  z-index:1;
  color:#fff;
  font-weight:700;
  font-size:.98rem;
}
.monitor-icon-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.monitor-icon-card{
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  min-height: 156px;
}
.monitor-icon-card strong{
  display:block;
  font-size: 1.05rem;
  margin-bottom: 6px;
}
.monitor-icon-card p{
  margin:0;
  color: var(--pro-muted);
  font-size: .95rem;
}
.monitor-icon{
  width: 54px;
  height: 54px;
  display:grid;
  place-items:center;
  border-radius: 18px;
  margin-bottom: 14px;
  color:#fff;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.4), transparent 55%), linear-gradient(145deg, rgba(87,162,255,.30), rgba(244,177,30,.18));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 12px 30px rgba(47,114,255,.16);
}
.monitor-icon svg{
  width: 26px;
  height: 26px;
}
.monitoring-service__layout{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 22px;
}
.monitor-panel{
  padding: 24px;
}
.monitor-panel h3,
.monitoring-benefits h3,
.monitoring-measures h3,
.monitor-commitment h3{
  margin: 0 0 12px;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.08;
}
.monitor-panel p,
.monitor-commitment p{
  color: var(--pro-muted);
  margin: 0 0 14px;
}
.monitor-bullet-list,
.monitor-check-list{
  list-style:none;
  margin: 0;
  padding: 0;
  display:grid;
  gap: 12px;
}
.monitor-bullet-list li,
.monitor-check-list li{
  position:relative;
  padding-left: 28px;
  color: rgba(255,255,255,.92);
}
.monitor-bullet-list li::before,
.monitor-check-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.44em;
  width:14px;
  height:14px;
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,0) 65%), linear-gradient(180deg, var(--pro-blue2), var(--pro-blue));
  box-shadow: 0 0 0 4px rgba(47,114,255,.10), 0 10px 18px rgba(47,114,255,.16);
}
.monitoring-benefits,
.monitoring-measures,
.monitor-commitment{
  margin-top: 22px;
  padding: 24px;
}
.monitor-benefit-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.monitor-benefit-card{
  position:relative;
  padding: 22px 18px 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  min-height: 220px;
}
.monitor-benefit-card__num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius: 14px;
  margin-bottom: 16px;
  font-weight: 800;
  background: linear-gradient(135deg, rgba(244,177,30,.95), rgba(255,255,255,.16));
  color: #111826;
}
.monitor-benefit-card h4,
.monitor-step-card h4{
  margin: 0 0 10px;
  font-size: 1.08rem;
}
.monitor-benefit-card p,
.monitor-step-card p{
  margin:0;
  color: var(--pro-muted);
}
.monitor-step-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.monitor-step-card{
  padding: 20px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.1);
  min-height: 220px;
}
.monitor-step-card__head{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.monitor-step-card__head span{
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  font-weight: 800;
  background: linear-gradient(135deg, rgba(87,162,255,.94), rgba(244,177,30,.84));
  color:#0b1424;
}
.monitor-commitment{
  display:grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  gap: 20px;
  align-items:center;
}
.monitor-commitment__closing{
  margin-top: 18px !important;
  color:#fff !important;
}
.monitor-commitment__cta{
  display:grid;
  gap: 12px;
}
.feature--tip{ background: rgba(255,255,255,.04); }

@media (max-width: 1100px){
  .monitoring-service__hero,
  .monitoring-service__layout,
  .monitor-commitment{
    grid-template-columns: 1fr;
  }
  .monitor-benefit-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px){
  .monitoring-service{ padding: 18px; }
  .monitoring-service__copy,
  .monitor-panel,
  .monitoring-benefits,
  .monitoring-measures,
  .monitor-commitment{ padding: 18px; }
  .monitoring-service__copy h2{ font-size: clamp(30px, 8vw, 46px); }
  .monitor-icon-grid,
  .monitor-benefit-grid,
  .monitor-step-grid{
    grid-template-columns: 1fr;
  }
  .monitor-photo--main{ min-height: 320px; }
}


/* v20 monitoreo ocupacional layout refinado */
.monitoring-service{ padding: 28px; }
.monitoring-service__hero{ align-items: stretch; gap: 24px; }
.monitoring-service__copy{ min-height: 100%; }
.monitoring-service__quicknav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 18px 0 4px;
}
.monitoring-service__quicknav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration:none;
  color: rgba(255,255,255,.94);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.monitoring-service__quicknav a:hover{
  transform: translateY(-2px);
  border-color: rgba(87,162,255,.38);
  box-shadow: 0 14px 30px rgba(5,18,51,.26);
  background: linear-gradient(180deg, rgba(87,162,255,.18), rgba(255,255,255,.05));
}
.monitoring-service__media{ display:flex; }
.monitor-photo--elevated{ min-height: 100%; }
.monitoring-overview{
  display:grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 24px;
  margin-top: 24px;
  align-items: stretch;
}
.monitoring-overview__content,
.monitoring-overview__media{
  padding: 24px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 70px rgba(4,14,36,.35);
}
.monitoring-overview__media{ display:flex; }
.monitoring-overview__media .monitor-photo{ flex:1; min-height: 100%; }
.monitoring-overview__content h3{
  margin: 0 0 10px;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.08;
}
.monitoring-overview__intro{
  margin: 0 0 18px;
  color: var(--pro-muted);
}
.monitor-icon-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.monitor-icon-card{ transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease; }
.monitor-icon-card:hover,
.monitor-benefit-card:hover,
.monitor-step-card:hover,
.monitor-panel:hover{
  transform: translateY(-6px);
  border-color: rgba(87,162,255,.34);
  box-shadow: 0 18px 50px rgba(4,14,36,.32);
}
.monitor-benefit-card,
.monitor-step-card,
.monitor-panel{ transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.monitoring-benefits,
.monitoring-measures,
.monitor-commitment{ scroll-margin-top: 120px; }
#que-es,
#impacto{ scroll-margin-top: 120px; }
@media (max-width: 1100px){
  .monitoring-overview{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .monitoring-service{ padding: 18px; }
  .monitoring-overview__content,
  .monitoring-overview__media{ padding: 18px; }
  .monitoring-service__quicknav a{ padding: 9px 12px; }
}


/* v21 imagen transparente moderna para monitoreo ocupacional */
.monitor-photo--transparent{
  min-height: 520px;
  display:flex;
  align-items:stretch;
  justify-content:center;
  isolation:isolate;
  background:
    radial-gradient(520px 340px at 76% 12%, rgba(244,177,30,.22), transparent 60%),
    radial-gradient(400px 280px at 18% 82%, rgba(87,162,255,.22), transparent 62%),
    linear-gradient(160deg, rgba(10,18,40,.98), rgba(9,22,54,.88));
}
.monitor-photo--transparent::before{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(140deg, rgba(255,255,255,.05), rgba(255,255,255,.01)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 34px);
  opacity:.9;
  z-index:0;
  pointer-events:none;
}
.monitor-photo--transparent::after{
  height:56%;
  background: linear-gradient(180deg, rgba(6,10,20,0), rgba(6,10,20,.78));
  z-index:0;
}
.monitor-photo__glow{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.monitor-photo__glow::before,
.monitor-photo__glow::after{
  content:"";
  position:absolute;
  border-radius:999px;
  filter: blur(12px);
  opacity:.9;
}
.monitor-photo__glow::before{
  width:170px;
  height:170px;
  right:30px;
  top:26px;
  background: radial-gradient(circle, rgba(244,177,30,.28), rgba(244,177,30,0));
}
.monitor-photo__glow::after{
  width:220px;
  height:220px;
  left:-20px;
  bottom:-10px;
  background: radial-gradient(circle, rgba(87,162,255,.25), rgba(87,162,255,0));
}
.monitor-photo__subject{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex !important;
  align-items:flex-end;
  justify-content:center;
  padding: 26px 18px 0;
}
.monitor-photo__subject img{
  width:min(96%, 620px);
  max-width:100%;
  height:auto !important;
  max-height: 96%;
  object-fit: contain !important;
  object-position: center bottom !important;
  filter: drop-shadow(0 28px 42px rgba(0,0,0,.42));
}
.monitor-photo--transparent figcaption{
  left:18px;
  right:18px;
  bottom:18px;
  z-index:2;
  display:grid;
  gap:10px;
  max-width: 360px;
  padding: 16px 18px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(10,18,40,.78), rgba(8,14,30,.64));
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 32px rgba(0,0,0,.28);
  font-size: .96rem;
  line-height: 1.45;
}
.monitor-photo__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  padding:7px 11px;
  border-radius:999px;
  background: linear-gradient(135deg, rgba(87,162,255,.24), rgba(244,177,30,.18));
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
}
@media (max-width: 760px){
  .monitor-photo--transparent{ min-height: 420px; }
  .monitor-photo__subject{ padding-top: 18px; }
  .monitor-photo__subject img{ width:min(100%, 470px); }
  .monitor-photo--transparent figcaption{
    max-width:none;
    left:14px;
    right:14px;
    bottom:14px;
    padding:14px 15px;
  }
}

/* v22 hero de monitoreo con recorte transparente visible */
.monitor-photo--worker-showcase{
  min-height: clamp(500px, 58vw, 700px);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(420px 260px at 82% 18%, rgba(244,177,30,.20), transparent 60%),
    radial-gradient(380px 240px at 16% 82%, rgba(87,162,255,.18), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: 0 32px 90px rgba(3,10,28,.38);
}
.monitor-photo--worker-showcase::before{
  content:"";
  position:absolute;
  inset: 16px;
  border-radius: 28px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.015)),
    radial-gradient(circle at 20% 18%, rgba(87,162,255,.10), transparent 30%),
    radial-gradient(circle at 78% 18%, rgba(244,177,30,.10), transparent 26%);
  z-index:0;
}
.monitor-photo--worker-showcase::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:46%;
  background: linear-gradient(180deg, rgba(6,10,20,0), rgba(6,10,20,.76));
  z-index:1;
  pointer-events:none;
}
.monitor-photo__ambient,
.monitor-photo__mesh{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.monitor-photo__ambient::before,
.monitor-photo__ambient::after{
  content:"";
  position:absolute;
  border-radius:999px;
  filter: blur(10px);
}
.monitor-photo__ambient::before{
  width:180px;height:180px;
  left:-10px;bottom:34px;
  background: radial-gradient(circle, rgba(87,162,255,.28), rgba(87,162,255,0));
}
.monitor-photo__ambient::after{
  width:220px;height:220px;
  right:22px;top:18px;
  background: radial-gradient(circle, rgba(244,177,30,.24), rgba(244,177,30,0));
}
.monitor-photo__mesh{
  inset: 16px;
  border-radius: 28px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 34px);
  opacity:.55;
}
.monitor-photo__worker{
  position:relative;
  z-index:2;
  display:block;
  width:min(100%, 660px);
  max-width:none;
  height:auto;
  align-self:flex-end;
  filter: drop-shadow(0 24px 42px rgba(0,0,0,.40));
  transform: translateY(8px);
}
.monitor-photo--worker-showcase figcaption{
  left:18px;
  right:18px;
  bottom:18px;
  z-index:3;
  display:grid;
  gap:10px;
  max-width: 360px;
  padding: 16px 18px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(10,18,40,.78), rgba(8,14,30,.64));
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 32px rgba(0,0,0,.28);
  font-size: .96rem;
  line-height: 1.45;
}
@media (max-width: 760px){
  .monitor-photo--worker-showcase{
    min-height: 430px;
  }
  .monitor-photo__worker{
    width:min(100%, 460px);
  }
  .monitor-photo--worker-showcase figcaption{
    max-width:none;
    left:14px;
    right:14px;
    bottom:14px;
    padding:14px 15px;
  }
}


/* v23 moderniza el visual de monitoreo ocupacional */
.monitoring-service__hero{
  align-items:stretch;
}
.monitoring-service__media--showcase{
  display:block;
}
.monitoring-showcase{
  position:relative;
  min-height: clamp(500px, 58vw, 680px);
  border-radius: 28px;
  overflow:hidden;
  isolation:isolate;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(360px 260px at 18% 18%, rgba(87,162,255,.18), transparent 62%),
    radial-gradient(340px 260px at 82% 14%, rgba(244,177,30,.16), transparent 58%),
    linear-gradient(145deg, rgba(10,18,40,.96), rgba(6,10,24,.93));
  box-shadow: 0 28px 70px rgba(4,10,28,.34);
}
.monitoring-showcase::before{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  z-index:0;
}
.monitoring-showcase::after{
  content:"";
  position:absolute;
  width:76%;
  aspect-ratio:1;
  right:-14%;
  top:-10%;
  border-radius:50%;
  border:2px solid rgba(87,162,255,.46);
  box-shadow: 0 0 0 18px rgba(87,162,255,.06), 0 0 90px rgba(87,162,255,.12);
  z-index:0;
}
.monitoring-showcase__grid,
.monitoring-showcase__glow{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.monitoring-showcase__grid{
  inset:18px;
  border-radius:24px;
  background:
    linear-gradient(90deg, transparent 49.5%, rgba(255,255,255,.05) 50%, transparent 50.5%),
    linear-gradient(0deg, transparent 49.5%, rgba(255,255,255,.025) 50%, transparent 50.5%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 44px);
  opacity:.42;
}
.monitoring-showcase__glow--blue{
  background: radial-gradient(circle at 22% 24%, rgba(87,162,255,.24), transparent 38%);
}
.monitoring-showcase__glow--gold{
  background: radial-gradient(circle at 84% 16%, rgba(244,177,30,.18), transparent 30%);
}
.monitoring-showcase__copy{
  position:absolute;
  left:28px;
  bottom:28px;
  top:auto;
  max-width:min(54%, 360px);
  padding:16px 16px 14px;
  border-radius:18px;
  background: rgba(7,12,24,.58);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 60px rgba(0,0,0,.34);
  backdrop-filter: blur(16px);
  z-index:3;
}

.monitoring-showcase__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  margin-bottom:14px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.94);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.02em;
}
.monitoring-showcase__copy h3{
  margin:0 0 10px;
  color:#fff;
  font-size: clamp(26px, 3vw, 36px);
  line-height:1.02;
}
.monitoring-showcase__copy p{
  margin:0;
  color: rgba(255,255,255,.82);
  font-size:.98rem;
  line-height:1.55;
}
.monitoring-showcase__chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.monitoring-showcase__chips span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09);
  color:#fff;
  font-size:.82rem;
  font-weight:600;
}
.monitoring-showcase__worker{
  position:absolute;
  right:-6px;
  bottom:-6px;
  z-index:2;
  width:min(100%, 560px);
  max-width:none;
  display:block;
  filter: drop-shadow(0 26px 44px rgba(0,0,0,.42));
}
.monitoring-showcase__worker img{
  display:block;
  width:100%;
  height:auto;
}
@media (max-width: 1020px){
  .monitoring-showcase{
    min-height: 560px;
  }
    .monitoring-showcase__copy{
    max-width:min(60%, 420px);
    left:20px;
    bottom:20px;
    top:auto;
  }

  .monitoring-showcase__worker{
    width:min(100%, 500px);
  }
}
@media (max-width: 760px){
  .monitoring-showcase{
    min-height: 520px;
  }
  .monitoring-showcase::after{
    width:88%;
    right:-22%;
    top:-8%;
  }
    .monitoring-showcase__copy{
    left:14px;
    bottom:14px;
    top:auto;
    max-width:min(92%, 560px);
  }

  .monitoring-showcase__worker{
    width:min(100%, 420px);
    right:-24px;
    bottom:-8px;
  }
}


/* ==============================
   Catálogo destacado por marcas
   ============================== */
.catalog-hero{
  padding: 12px 0 16px;
}
.catalog-hero--top{
  padding-top: 18px;
}
.catalog-hero__frame{
  position: relative;
  max-width: 1200px;
  margin-inline: auto;
  border-radius: 34px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(560px 240px at 83% 56%, rgba(255,122,89,.24), transparent 58%),
    radial-gradient(460px 220px at 14% 18%, rgba(74,90,255,.22), transparent 62%),
    rgba(5,10,22,.96);
  box-shadow: 0 22px 80px rgba(0,0,0,.34);
}
.catalog-hero__picture,
.catalog-hero__picture img{
  display:block;
  width:100%;
}
.catalog-hero__picture{
  background: #02050d;
}
.catalog-hero__picture img{
  height:auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}
.catalog-hero__frame::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
.catalog-hero__hotspot{
  position:absolute;
  left: 18.3%;
  bottom: 23.3%;
  width: 20.5%;
  height: 9.4%;
  border-radius: 12px;
  z-index: 2;
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.catalog-hero__hotspot::after{
  display:none;
}
.catalog-hero__hotspot:hover::after,
.catalog-hero__hotspot:focus-visible::after{
  opacity:0;
  transform:none;
  box-shadow:none;
}
.catalog-hero__hotspot:focus-visible{
  outline: 2px solid rgba(80,132,255,.36);
  outline-offset: 8px;
}

.catalog-hero--top .container{
  max-width: none;
  width: 100%;
  padding-inline: clamp(18px, 3vw, 56px);
}
.catalog-hero--top .catalog-hero__frame,
.catalog-hero--top .catalog-brands{
  max-width: none;
  width: 100%;
}
.catalog-hero--top .catalog-brands{
  padding-inline: 4px;
}
@media (max-width: 980px){
  .catalog-hero--top .container{padding-inline: 14px}
  .catalog-hero--top .catalog-brands{padding-inline: 0}
}
.catalog-brands{
  margin-top: 16px;
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.catalog-hero--top .catalog-brands{
  max-width: 1200px;
  margin-inline: auto;
}
.catalog-brands__copy{
  display:grid;
  gap:4px;
  color: rgba(255,255,255,.86);
}
.catalog-brands__copy strong{
  font-size: 18px;
  letter-spacing: .01em;
}
.catalog-brands__copy span{
  color: var(--pro-muted);
  max-width: 620px;
}
.catalog-brands__pills{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.catalog-brands__pill{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  min-width: 200px;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color:#fff;
  box-shadow: 0 12px 36px rgba(0,0,0,.18);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.catalog-brands__pill .catalog-brands__label{
  font-weight: 800;
  font-size: 15px;
}
.catalog-brands__pill small{
  font-size: 12px;
  color: rgba(255,255,255,.64);
}
.catalog-brands__pill:hover,
.catalog-brands__pill:focus-visible{
  transform: translateY(-2px);
  border-color: rgba(109,158,255,.36);
  background: rgba(255,255,255,.07);
  box-shadow: 0 16px 48px rgba(0,0,0,.24);
}
.catalog-brands__pill.is-active{
  background: linear-gradient(180deg, rgba(47,114,255,.24), rgba(255,255,255,.06));
  border-color: rgba(109,158,255,.42);
}
.empty--brand{
  display:grid;
  gap:12px;
}
.empty__actions{display:flex; gap:12px; flex-wrap:wrap}

@media (max-width: 980px){
  .catalog-hero__picture img{aspect-ratio: auto; height:auto}
  .catalog-hero__frame{border-radius: 24px}
  .catalog-hero__hotspot{
    left: 18%;
    bottom: 22.8%;
    width: 31%;
    height: 10.3%;
    border-radius: 10px;
  }
  .catalog-brands__pill{min-width: min(220px, 100%)}
}

/* v27 catálogo más limpio */
.catalog-hero--top{
  padding-bottom: 10px;
}
.catalog-hero--top .catalog-hero__frame{
  margin-bottom: 10px;
}
.catalog-hero--top + .catbar,
.catalog-hero--top ~ .catbar{
  margin-top: 0;
}
.catbar#catalog-start .container{
  padding-top: 0;
}

/* About page banner (Quiénes somos) */
.aboutBanner__frame{
  display:block;
  cursor:pointer;
}
.aboutBanner__img{
  border-radius: 20px;
  transition: transform 260ms ease;
}
.aboutBanner__frame:hover .aboutBanner__img{
  transform: scale(1.01);
}


/* WhatsApp pill icon-only (hide number on top bar) */
.pill--wa.pill--wa-icon{gap:0;padding:8px 10px;}
.pill--wa.pill--wa-icon .wa-icon{margin:0;}
.pill--wa.pill--wa-icon:hover{transform:translateY(-1px);}


/* Topbar WhatsApp: icon only (sin número visible) */
.topbar .pill--wa.pill--wa-icon{padding:7px 10px !important; gap:0 !important;}
.topbar .pill--wa.pill--wa-icon .wa-icon{width:18px; height:18px;}
.topbar .pill--wa.pill--wa-icon .wa-icon svg{width:18px; height:18px; display:block;}



/* Accessibility helper */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}



/* ===== Responsive tune (v56) ===== */
/* Evita que los emblemas se “corten” por bordes redondeados */
.pro-ico--round img,
.pro-ico--hex img{ border-radius: 0 !important; }

/* Home: 3 tarjetas -> 2 en tablet, 1 en móvil */
@media (max-width: 980px){
  .pro-servicegrid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 700px){
  .pro-sectionhead{ flex-direction: column; align-items: flex-start; }
  .pro-servicegrid{ grid-template-columns: 1fr !important; }
}
@media (max-width: 640px){
  .pro-stats{ grid-template-columns: 1fr !important; }
}

/* ===== Mobile polish (v58) ===== */
/* En pantallas pequeñas el hero puede sentirse “apretado”.
   Estos ajustes mejoran lectura, respiración y CTA. */
@media (max-width: 560px){
  .hero--pro{ padding: 64px 0 18px }
  .hero__title{ font-size: 40px; line-height: 1.05 }
  .hero__lead{ font-size: 15px; line-height: 1.55 }

  .pro-bullets{ gap: 10px; margin-top: 14px }
  .pro-bullets li{ font-size: 14px; line-height: 1.45; gap: 10px }
  .pro-bullets li:before{ width: 14px; height: 14px }

  .cta-row{ flex-direction: column; align-items: stretch; gap: 10px }
  .cta-row .btn{ width: 100%; justify-content: center }

  .searchbox{ border-radius: 18px }
  .searchbox__row{ flex-direction: column; align-items: stretch; gap: 10px }
  .searchbox__btn{ width: 100%; justify-content: center }

  /* Cuando el hero se apila, la imagen puede volverse muy alta */
  .hero__visual{ min-height: 340px }
}

@media (max-width: 420px){
  .hero__title{ font-size: 36px }
}


/* ===== Mobile-only hero/banner fixes v30 ===== */
@media (max-width: 760px){
  .hero__scrim{
    background:
      linear-gradient(180deg, rgba(6,10,22,.78) 0%, rgba(6,10,22,.56) 38%, rgba(6,10,22,.82) 100%) !important;
  }
  .hero__visual--single{ align-items:flex-start !important; }
  .hero__single-art{
    aspect-ratio: 16 / 10;
    background: rgba(7,11,20,.55);
  }
  .hero__single-art picture,
  .hero__single-art img{
    width:100% !important;
    height:100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  .catalog-hero__frame{ border-radius: 22px !important; }
  .catalog-hero__picture img{
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  .aboutBanner__img,
  .pagehero__media img{
    width:100% !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}


/* ===== Mobile-only banner and hero corrections v31 ===== */
@media (max-width: 760px){
  .hero__scrim{
    background:linear-gradient(180deg, rgba(4,9,22,.72) 0%, rgba(4,9,22,.56) 38%, rgba(4,9,22,.84) 100%) !important;
  }
  .hero__single-art img,
  .catalog-hero__picture img,
  .aboutBanner__img,
  .pagehero__media img{
    object-fit:contain !important;
    object-position:center center !important;
    width:100% !important;
    height:auto !important;
    aspect-ratio:auto !important;
    background:transparent !important;
  }
  .catalog-hero__frame{border-radius:20px !important;overflow:hidden !important;}
}

/* ===== Services premium image section ===== */
.services-premium .pro-stats{margin-top:26px}
.services-premium__head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:22px}
.services-premium__copy h2{margin:0 0 8px;font-size:clamp(30px,3vw,56px);line-height:1.02}
.services-premium__copy p{margin:0;max-width:840px}
.services-collage{position:relative;border-radius:34px;overflow:hidden;border:1px solid rgba(154,180,255,.16);box-shadow:0 28px 70px rgba(3,10,30,.45);background:#07112b}
.services-collage img{display:block;width:100%;height:auto;min-height:680px;object-fit:cover}
.services-collage__hit{position:absolute;top:0;bottom:0;width:33.333%;z-index:2;outline:none}
.services-collage__hit--left{left:0}
.services-collage__hit--center{left:33.333%}
.services-collage__hit--right{right:0}
.services-collage__hit:focus-visible{box-shadow:inset 0 0 0 3px rgba(117,171,255,.75)}
.services-mobile-grid{display:none}
@media (max-width:1100px){
  .services-collage--desktop{display:none}
  .services-premium__head{display:none}
  .services-mobile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
}
@media (max-width:760px){
  .services-mobile-grid{grid-template-columns:1fr;gap:18px}
  .service-visual-card__body h3{font-size:24px}
  .service-visual-card__body p{font-size:15px}
}

/* Banner tuning */
.catalog-hero__frame{border-radius:32px;overflow:hidden}
.catalog-hero__img,.aboutBanner__img,.capBanner__img,.monitorBanner__img{display:block;width:100%;height:auto}
.aboutBanner .catalog-hero__frame,.capBanner .catalog-hero__frame,.monitorBanner .catalog-hero__frame{box-shadow:0 24px 60px rgba(2,8,26,.28)}
@media (max-width:980px){
  .catalog-hero__frame{border-radius:24px}
}


/* ===== Visible banner tuning v33 ===== */
body.page-equipos .catalog-hero__picture img,
body.page-monitoreo .monitorBanner__img,
body.page-capacitaciones .capBanner__img,
body.page-servicios .capBanner__img,
body.page-nosotros .aboutBanner__img,
body.page-about .aboutBanner__img,
.aboutPage .aboutBanner__img{
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center;
}

@media (min-width: 981px){
  body.page-equipos .catalog-hero__frame,
  body.page-monitoreo .monitorBanner__frame,
  body.page-capacitaciones .capBanner__frame,
  body.page-servicios .capBanner__frame,
  .aboutBanner__frame{
    max-width:min(1380px, calc(100vw - 64px));
    margin-inline:auto;
  }
}

@media (max-width: 760px){
  body.page-equipos .catalog-hero__picture img,
  body.page-monitoreo .monitorBanner__img,
  body.page-capacitaciones .capBanner__img,
body.page-servicios .capBanner__img,
  body.page-nosotros .aboutBanner__img,
  body.page-about .aboutBanner__img,
  .aboutPage .aboutBanner__img{
    min-height:0 !important;
    max-height:none !important;
    height:auto !important;
    object-fit:contain !important;
    object-position:center !important;
    aspect-ratio:auto !important;
  }

  body.page-equipos .catalog-hero__frame,
  body.page-monitoreo .monitorBanner__frame,
  body.page-capacitaciones .capBanner__frame,
  body.page-servicios .capBanner__frame,
  .aboutBanner__frame{
    border-radius:20px !important;
  }
}

/* ===== Banner cover effect refinement v34 ===== */
body.page-equipos .catalog-hero__frame,
body.page-monitoreo .monitorBanner__frame,
body.page-capacitaciones .capBanner__frame,
body.page-servicios .capBanner__frame,
body.page-nosotros .aboutBanner__frame,
body.page-about .aboutBanner__frame,
.aboutPage .aboutBanner__frame{
  width:100%;
  height:clamp(230px, 34vw, 460px);
  max-width:min(1360px, calc(100vw - 32px));
  margin-inline:auto;
  overflow:hidden;
}

body.page-equipos .catalog-hero__picture,
body.page-monitoreo .catalog-hero__picture,
body.page-capacitaciones .catalog-hero__picture,
body.page-servicios .catalog-hero__picture,
body.page-nosotros .catalog-hero__picture,
body.page-about .catalog-hero__picture,
.aboutPage .catalog-hero__picture{
  display:block;
  width:100%;
  height:100%;
}

body.page-equipos .catalog-hero__picture img,
body.page-monitoreo .monitorBanner__img,
body.page-capacitaciones .capBanner__img,
body.page-servicios .capBanner__img,
body.page-nosotros .aboutBanner__img,
body.page-about .aboutBanner__img,
.aboutPage .aboutBanner__img{
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center center !important;
}

@media (max-width: 980px){
  body.page-equipos .catalog-hero__frame,
  body.page-monitoreo .monitorBanner__frame,
  body.page-capacitaciones .capBanner__frame,
  body.page-servicios .capBanner__frame,
  body.page-nosotros .aboutBanner__frame,
  body.page-about .aboutBanner__frame,
  .aboutPage .aboutBanner__frame{
    height:clamp(220px, 42vw, 320px);
    max-width:min(100%, calc(100vw - 24px));
  }
}

@media (max-width: 640px){
  body.page-equipos .catalog-hero__frame,
  body.page-monitoreo .monitorBanner__frame,
  body.page-capacitaciones .capBanner__frame,
  body.page-servicios .capBanner__frame,
  body.page-nosotros .aboutBanner__frame,
  body.page-about .aboutBanner__frame,
  .aboutPage .aboutBanner__frame{
    height:clamp(210px, 58vw, 280px);
    border-radius:20px !important;
  }
}


/* ===== Final full-fill banner override v35 ===== */
:root{
  --section-banner-h-desktop: clamp(280px, 24vw, 430px);
  --section-banner-h-tablet: clamp(240px, 34vw, 340px);
  --section-banner-h-mobile: clamp(220px, 56vw, 290px);
}

body.page-equipos .catalog-hero__frame,
body.page-monitoreo .monitorBanner__frame,
body.page-servicios .capBanner .catalog-hero__frame,
body.page-nosotros .aboutBanner__frame,
body.page-about .aboutBanner__frame,
.aboutPage .aboutBanner__frame{
  width: 100% !important;
  max-width: none !important;
  height: var(--section-banner-h-desktop) !important;
  min-height: var(--section-banner-h-desktop) !important;
  overflow: hidden !important;
}

body.page-equipos .catalog-hero__picture,
body.page-monitoreo .catalog-hero__picture,
body.page-servicios .capBanner .catalog-hero__picture,
body.page-nosotros .aboutBanner .catalog-hero__picture,
body.page-about .aboutBanner .catalog-hero__picture,
.aboutPage .aboutBanner .catalog-hero__picture{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

body.page-equipos .catalog-hero__picture img,
body.page-monitoreo .monitorBanner__img,
body.page-servicios .capBanner__img,
body.page-nosotros .aboutBanner__img,
body.page-about .aboutBanner__img,
.aboutPage .aboutBanner__img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
}

@media (max-width: 980px){
  body.page-equipos .catalog-hero__frame,
  body.page-monitoreo .monitorBanner__frame,
  body.page-servicios .capBanner .catalog-hero__frame,
  body.page-nosotros .aboutBanner__frame,
  body.page-about .aboutBanner__frame,
  .aboutPage .aboutBanner__frame{
    height: var(--section-banner-h-tablet) !important;
    min-height: var(--section-banner-h-tablet) !important;
  }
}

@media (max-width: 640px){
  body.page-equipos .catalog-hero__frame,
  body.page-monitoreo .monitorBanner__frame,
  body.page-servicios .capBanner .catalog-hero__frame,
  body.page-nosotros .aboutBanner__frame,
  body.page-about .aboutBanner__frame,
  .aboutPage .aboutBanner__frame{
    height: var(--section-banner-h-mobile) !important;
    min-height: var(--section-banner-h-mobile) !important;
  }
}


/* ===== Complete banner composition override v36 ===== */
body.page-equipos .catalog-hero__frame,
body.page-monitoreo .monitorBanner__frame,
body.page-servicios .capBanner__frame,
body.page-servicios .capBanner .catalog-hero__frame,
body.page-nosotros .aboutBanner__frame,
body.page-about .aboutBanner__frame,
.aboutPage .aboutBanner__frame{
  display:block !important;
  width:100% !important;
  max-width:1200px !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin-inline:auto !important;
  line-height:0 !important;
  border-radius:clamp(20px,2vw,32px) !important;
  overflow:hidden !important;
}

body.page-equipos .catalog-hero__picture,
body.page-monitoreo .catalog-hero__picture,
body.page-servicios .capBanner .catalog-hero__picture,
body.page-nosotros .aboutBanner .catalog-hero__picture,
body.page-about .aboutBanner .catalog-hero__picture,
.aboutPage .aboutBanner .catalog-hero__picture{
  display:block !important;
  width:100% !important;
  height:auto !important;
  line-height:0 !important;
}

body.page-equipos .catalog-hero__picture img,
body.page-monitoreo .monitorBanner__img,
body.page-servicios .capBanner__img,
body.page-nosotros .aboutBanner__img,
body.page-about .aboutBanner__img,
.aboutPage .aboutBanner__img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:none !important;
}

@media (max-width: 760px){
  body.page-equipos .catalog-hero,
  body.page-monitoreo .catalog-hero,
  body.page-servicios .capBanner,
  body.page-nosotros .aboutBanner{
    padding-top: 10px !important;
  }
}


/* ===== Banner composition fix v37 ===== */
body.page-equipos .catalog-hero__frame,
body.page-monitoreo .monitorBanner__frame,
body.page-servicios .capBanner__frame,
body.page-nosotros .aboutBanner__frame,
body.page-about .aboutBanner__frame,
.aboutPage .aboutBanner__frame{
  width: 100% !important;
  max-width: 1200px !important;
  height: clamp(290px, 31vw, 400px) !important;
  min-height: clamp(290px, 31vw, 400px) !important;
  margin-inline: auto !important;
  overflow: hidden !important;
  line-height: 0 !important;
  border-radius: clamp(20px, 2vw, 32px) !important;
}

body.page-equipos .catalog-hero__picture,
body.page-monitoreo .catalog-hero__picture,
body.page-servicios .capBanner .catalog-hero__picture,
body.page-nosotros .aboutBanner .catalog-hero__picture,
body.page-about .aboutBanner .catalog-hero__picture,
.aboutPage .aboutBanner .catalog-hero__picture{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

body.page-equipos .catalog-hero__picture img,
body.page-monitoreo .monitorBanner__img,
body.page-servicios .capBanner__img,
body.page-nosotros .aboutBanner__img,
body.page-about .aboutBanner__img,
.aboutPage .aboutBanner__img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  transform: none !important;
}

body.page-equipos .catalog-hero__picture img{ object-position: center 44% !important; }
body.page-monitoreo .monitorBanner__img{ object-position: center 44% !important; }
body.page-servicios .capBanner__img{ object-position: center 42% !important; }
body.page-nosotros .aboutBanner__img,
body.page-about .aboutBanner__img,
.aboutPage .aboutBanner__img{ object-position: center 42% !important; }

@media (max-width: 980px){
  body.page-equipos .catalog-hero__frame,
  body.page-monitoreo .monitorBanner__frame,
  body.page-servicios .capBanner__frame,
  body.page-nosotros .aboutBanner__frame,
  body.page-about .aboutBanner__frame,
  .aboutPage .aboutBanner__frame{
    height: clamp(250px, 38vw, 320px) !important;
    min-height: clamp(250px, 38vw, 320px) !important;
  }
}

@media (max-width: 640px){
  body.page-equipos .catalog-hero__frame,
  body.page-monitoreo .monitorBanner__frame,
  body.page-servicios .capBanner__frame,
  body.page-nosotros .aboutBanner__frame,
  body.page-about .aboutBanner__frame,
  .aboutPage .aboutBanner__frame{
    height: clamp(220px, 58vw, 270px) !important;
    min-height: clamp(220px, 58vw, 270px) !important;
  }

  body.page-equipos .catalog-hero__picture img{ object-position: 52% 45% !important; }
  body.page-monitoreo .monitorBanner__img{ object-position: 53% 44% !important; }
  body.page-servicios .capBanner__img{ object-position: 50% 42% !important; }
  body.page-nosotros .aboutBanner__img,
  body.page-about .aboutBanner__img,
  .aboutPage .aboutBanner__img{ object-position: 52% 42% !important; }
}


/* ===== Full-width complete banners v38 ===== */
.catalog-hero--top .container{
  max-width:none !important;
  width:100% !important;
  padding-inline:clamp(12px, 1.4vw, 24px) !important;
}

body.page-equipos .catalog-hero__frame,
body.page-monitoreo .monitorBanner__frame,
body.page-servicios .capBanner__frame,
body.page-nosotros .aboutBanner__frame,
body.page-about .aboutBanner__frame,
.aboutPage .aboutBanner__frame{
  inline-size:min(1700px, calc(100vw - 24px)) !important;
  max-inline-size:min(1700px, calc(100vw - 24px)) !important;
  width:min(1700px, calc(100vw - 24px)) !important;
  max-width:min(1700px, calc(100vw - 24px)) !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin-inline:auto !important;
  overflow:hidden !important;
  line-height:0 !important;
  border-radius:clamp(18px, 1.8vw, 30px) !important;
}

body.page-equipos .catalog-hero__picture,
body.page-monitoreo .catalog-hero__picture,
body.page-servicios .capBanner .catalog-hero__picture,
body.page-nosotros .aboutBanner .catalog-hero__picture,
body.page-about .aboutBanner .catalog-hero__picture,
.aboutPage .aboutBanner .catalog-hero__picture{
  display:block !important;
  width:100% !important;
  height:auto !important;
  background:transparent !important;
}

body.page-equipos .catalog-hero__picture img,
body.page-monitoreo .monitorBanner__img,
body.page-servicios .capBanner__img,
body.page-nosotros .aboutBanner__img,
body.page-about .aboutBanner__img,
.aboutPage .aboutBanner__img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
  background:transparent !important;
}

@media (max-width: 980px){
  .catalog-hero--top .container{
    padding-inline:14px !important;
  }

  body.page-equipos .catalog-hero__frame,
  body.page-monitoreo .monitorBanner__frame,
  body.page-servicios .capBanner__frame,
  body.page-nosotros .aboutBanner__frame,
  body.page-about .aboutBanner__frame,
  .aboutPage .aboutBanner__frame{
    inline-size:calc(100vw - 28px) !important;
    max-inline-size:calc(100vw - 28px) !important;
    width:calc(100vw - 28px) !important;
    max-width:calc(100vw - 28px) !important;
    border-radius:22px !important;
  }
}

@media (max-width: 640px){
  body.page-equipos .catalog-hero__frame,
  body.page-monitoreo .monitorBanner__frame,
  body.page-servicios .capBanner__frame,
  body.page-nosotros .aboutBanner__frame,
  body.page-about .aboutBanner__frame,
  .aboutPage .aboutBanner__frame{
    inline-size:calc(100vw - 20px) !important;
    max-inline-size:calc(100vw - 20px) !important;
    width:calc(100vw - 20px) !important;
    max-width:calc(100vw - 20px) !important;
    border-radius:18px !important;
  }
}

.hero__single-art--placeholder{
  min-height: 520px;
  border-radius: 28px;
  border: 1px solid rgba(148, 163, 184, .18);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .36), rgba(15, 23, 42, .22)),
    radial-gradient(circle at 20% 20%, rgba(96, 165, 250, .14), transparent 32%),
    radial-gradient(circle at 80% 30%, rgba(59, 130, 246, .10), transparent 28%),
    linear-gradient(135deg, rgba(8, 15, 36, .62), rgba(10, 25, 70, .38));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
  position: relative;
}
.hero__single-art--placeholder::after{
  content: '';
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(96,165,250,.55), rgba(96,165,250,.18));
}
@media (max-width: 980px){
  .hero__single-art--placeholder{
    min-height: 420px;
    border-radius: 22px;
  }
}
@media (max-width: 640px){
  .hero__single-art--placeholder{
    min-height: 300px;
  }
}


/* Topbar social refresh */
.topbar__inner{padding-inline:18px !important;}
.topbar__links{gap:18px; align-items:center; padding-left:0; flex-wrap:wrap;}
.topbar__primary-link{display:inline-flex; align-items:center; line-height:1; margin-right:4px;}
.topbar__social{display:inline-flex; align-items:center; gap:12px;}
.topbar__icon-link{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; padding:0; background:transparent !important; border:none !important; box-shadow:none !important; border-radius:0 !important; transition:transform .18s ease, opacity .18s ease;}
.topbar__icon-link svg{display:block; width:20px; height:20px;}
.topbar__icon-link:hover,
.topbar__icon-link:focus-visible{transform:translateY(-1px); opacity:1;}
.topbar__icon-link--linkedin svg{width:18px; height:18px;}
.topbar .pill--wa,
.topbar .pill--wa.pill--wa-icon{background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important;}
@media (max-width: 820px){
  .topbar__inner{padding-inline:0 !important;}
  .topbar__links{gap:12px;}
  .topbar__social{gap:10px;}
}


/* index hero portrait fix */
.hero__visual--single{
  align-items:center;
}
.hero__single-art--photo{
  width:min(420px, 100%);
  margin-left:auto;
  background:rgba(9,18,40,.32);
  border:1px solid rgba(255,255,255,.08);
  border-radius:30px;
  padding:12px;
  box-shadow:0 26px 70px rgba(0,0,0,.34);
}
.hero__single-art--photo picture,
.hero__single-art--photo img{
  display:block;
  width:100%;
}
.hero__single-art--photo img{
  height:560px;
  object-fit:cover;
  object-position:center 18%;
  border-radius:22px;
}
@media (max-width: 980px){
  .hero__single-art--photo{
    width:min(420px, 100%);
    padding:8px;
    border-radius:24px;
    margin-inline:auto;
  }
  .hero__single-art--photo img{
    height:420px;
    object-position:center 16%;
    border-radius:18px;
  }
}
@media (max-width: 640px){
  .hero__single-art--photo{
    width:100%;
    padding:6px;
    border-radius:20px;
  }
  .hero__single-art--photo img{
    height:360px;
    object-position:center 14%;
    border-radius:16px;
  }
}


/* ===== v48: labels inside desktop services image only ===== */
.services-collage__hit{
  display:flex;
  align-items:flex-end;
  padding:0 0 34px;
  text-decoration:none;
}
.services-collage__hit--left{justify-content:flex-start;padding-left:26px}
.services-collage__hit--center{justify-content:center;padding-left:18px;padding-right:18px}
.services-collage__hit--right{justify-content:flex-end;padding-right:26px}
.services-collage__label{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:320px;
  padding:18px 20px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(5,10,24,.18) 0%, rgba(5,10,24,.58) 62%, rgba(5,10,24,.82) 100%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 40px rgba(2,8,26,.30);
  backdrop-filter:blur(4px);
  color:#fff;
  transform:translateY(0);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.services-collage__label strong{
  display:block;
  color:#fff;
  font-size:clamp(24px,2vw,34px);
  line-height:1.02;
  letter-spacing:-.02em;
  text-shadow:0 4px 14px rgba(0,0,0,.48);
}
.services-collage__label small{
  display:block;
  color:rgba(247,250,255,.96);
  font-size:15px;
  line-height:1.45;
  text-shadow:0 3px 10px rgba(0,0,0,.42);
}
.services-collage__hit:hover .services-collage__label,
.services-collage__hit:focus-visible .services-collage__label{
  transform:translateY(-4px);
  border-color:rgba(141,182,255,.34);
  background:linear-gradient(180deg, rgba(5,10,24,.24) 0%, rgba(5,10,24,.66) 62%, rgba(5,10,24,.90) 100%);
  box-shadow:0 24px 48px rgba(2,8,26,.34);
}
.services-collage__hit:focus-visible{
  box-shadow:none;
}
@media (max-width: 1380px){
  .services-collage__label{max-width:290px;padding:16px 18px}
  .services-collage__label strong{font-size:clamp(22px,1.8vw,30px)}
  .services-collage__label small{font-size:14px}
}
@media (max-width: 1180px){
  .services-collage__hit{padding-bottom:26px}
  .services-collage__hit--left{padding-left:18px}
  .services-collage__hit--right{padding-right:18px}
  .services-collage__label{max-width:250px;padding:14px 16px;border-radius:18px}
  .services-collage__label strong{font-size:clamp(20px,1.8vw,26px)}
  .services-collage__label small{font-size:13px;line-height:1.35}
}
@media (max-width:1100px){
  .services-collage__hit{display:none}
}