html{scroll-behavior:smooth;}
:root{
    --tp-blue:#2e659e;
    --tp-blue-dark:#224f7e;
    --tp-green:#37c172;
    --tp-green-soft:#eaf7ef;
    --tp-orange:#ec9619;
    --tp-text:#3f4750;
    --tp-muted:#6f7b85;
    --tp-border:#e5edf2;
    --tp-bg:#f7fbfd;
    --tp-radius:18px;
    --tp-shadow:0 18px 45px rgba(34,79,126,.12);
  }
a{
    color: #2e659e;
}
.img-producto{
    max-width:80%;
}
    /* Contenedor principal del encabezado */
.header-pagina {
    position: relative;
    background-size: cover;
    background-position: center;
    height: 250px; /* Ajusta la altura según prefieras */
    display: flex;
    align-items: center;
}

/* Capa azul traslúcida que se ve en tu imagen */
.overlay-azul {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(30, 86, 160, 0.85); /* Azul institucional con opacidad */
    display: flex;
    align-items: center;
}

/* Estilos de las migas de pan (Breadcrumbs) */
.breadcrumb-custom {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
    align-items: center;
    
}

.breadcrumb-item-custom a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-item-custom a:hover {
    color: #ffffff;
}

/* Separador "/" */
.separator {
    color: rgba(255, 255, 255, 0.6);
    margin: 0 15px;
}

/* Página activa (Drenaje Sanitario) */
.active-page {
    color: #ffffff;
    
}

/* Ajuste responsivo para móviles */
@media (max-width: 768px) {
    .breadcrumb-custom {
        
        flex-wrap: wrap;
    }
    .header-pagina {
        height: 180px;
    }
}
.card-img-container {
    position: relative;
    overflow: hidden; /* Para que el overlay no se salga de las esquinas redondeadas si las tienes */
}
.card_agua_potable:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Tu gradiente personalizado */
    background: linear-gradient(to right, rgb(2 92 132 / 96%) 0%, rgb(25 160 169 / 55%) 100%);
    /* Aseguramos que el overlay esté encima de la foto pero debajo del texto/badge */
    z-index: 1;
}
.card_drenaje_sanitario:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Tu gradiente personalizado */
    background: linear-gradient(to right, rgb(2 118 100 / 94%) 0%, rgb(6 210 180 / 43%) 100%);

    /* Aseguramos que el overlay esté encima de la foto pero debajo del texto/badge */
    z-index: 1;
    
}
.card_drenaje_pluvial:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Tu gradiente personalizado */
    background: linear-gradient(to right, rgb(4 73 130 / 92%) 0%, rgb(15 128 206 / 62%) 100%);
    /* Aseguramos que el overlay esté encima de la foto pero debajo del texto/badge */
    z-index: 1;
    
}
.card_estudios_hidrologicos:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Tu gradiente personalizado */
    background: linear-gradient(to right, rgb(10 59 139 / 86%) 0%, rgb(17 59 182 / 33%) 100%);
    /* Aseguramos que el overlay esté encima de la foto pero debajo del texto/badge */
    z-index: 1;
    
}


/* Importante: el contenido del badge debe estar por encima del overlay */
.card-badge {
    position: absolute;
    z-index: 2; /* Mayor que el z-index del overlay */
}


    /* Estilos para el degradado superpuesto */
.promo-principal {
    position: relative;
}

#content{
    color:#353535;
}

.swiper-slide-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgb(4 73 130 / 92%) 0%, rgb(15 128 206 / 62%) 100%);
    z-index: 1; /* Sobre la imagen de fondo */
}

/* Asegura que el contenido esté por encima del degradado */
.promo-principal .container {
    position: relative;
    z-index: 2; /* Mayor que el z-index del degradado */
}

@media (max-width: 768px) {
    .btn-mobile{
		margin-left:0px !important;
        margin-top:10px !important;
	}
    .banner_mobile_blank{
        display:none !important;
    }
}

/* Contenedor principal de la tarjeta */
.card-servicio {
    background: #ffffff;
    padding: 40px;
    border-radius: 15px;
    border: 1px solid #e2e8f0; /* Borde sutil */
    height: 100%;
    transition: all 0.3s ease;
}

.card-servicio:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* Caja del Icono (El cuadro azul claro) */
.icon-box {
    width: 50px;
    height: 50px;
    
    
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 20px;
}

/* Títulos de los servicios */
.card-servicio h3 {
    font-size: 20px;
    font-weight: 700;
    
    margin-bottom: 15px;
    line-height: 1.3;
}

/* Texto descriptivo */
.card-servicio p {
    font-size: 14.5px;
    
    line-height: 1.6;
    margin-bottom: 0;
}

/* Ajuste responsivo */
@media (max-width: 768px) {
    .card-servicio {
        padding: 30px;
    }
}
/* Contenedor del icono azul oscuro */
.icon-box-blue {
    min-width: 60px;
    height: 60px;
    background-color: #1e56a0; /* Azul fuerte de la imagen */
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 24px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(30, 86, 160, 0.2);
}

/* Títulos técnicos */
.item-ingenieria h3 {
    font-size: 19px;
    font-weight: 700;
    
    margin-bottom: 8px;
}

/* Descripción */
.item-ingenieria p {
    font-size: 15px;
    
    line-height: 1.6;
    margin-bottom: 10px;
}

/* Enlace de descarga */
.link-descarga {
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    transition: gap 0.3s ease;
}

.link-descarga:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.link-descarga i {
    transition: transform 0.3s ease;
}

.link-descarga:hover i {
    transform: translateX(5px);
}

/* Ajustes para móviles */
@media (max-width: 576px) {
    .item-ingenieria {
        flex-direction: column;
    }
    .icon-box-blue {
        margin-bottom: 15px;
    }
}
/* Estilo de las tarjetas de normativa */
.card-normativa {
    background: #ffffff;
    padding: 45px 30px;
    border-radius: 12px;
    border: 1px solid #eef2f6;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-normativa:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.04);
}

/* Icono circular con fondo suave */
.icon-circle-aux {
    width: 65px;
    height: 65px;
    background-color: #eff6ff; /* Azul muy pálido */
    color: #1e56a0; /* Azul institucional */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto;
    font-size: 26px;
}

/* Títulos centrados */
.card-normativa h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 20px;
    line-height: 1.4;
    min-height: 50px; /* Para alinear títulos de diferentes largos */
}

/* Texto de descripción */
.card-normativa p {
    font-size: 14px;
    
    line-height: 1.7;
    margin-bottom: 0;
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
    .card-normativa {
        padding: 35px 20px;
    }
    .card-normativa h3 {
        min-height: auto;
    }
}
/* Contenedor de la tarjeta de sector */
.card-sector {
    background: #ffffff;
    padding: 35px;
    border-radius: 15px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.card-sector:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Caja de icono sutil (Azul claro) */
.icon-box-soft {
    width: 55px;
    height: 55px;
    background-color: #eff6ff; /* Fondo azul pastel */
    color: #1e56a0; /* Azul fuerte institucional */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 22px;
}

/* Títulos de los sectores */
.card-sector h3 {
    font-size: 19px;
    font-weight: 700;
    text-align:left;

    line-height: 1.3;
    margin-bottom: 15px;
}

/* Párrafos descriptivos */
.card-sector p {
    font-size: 14.5px;
    text-align:left;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Ajuste para que los iconos no tengan puntos (por si acaso) */
.card-sector, .icon-box-soft {
    list-style: none !important;
}
/* Tarjetas de cotización */
.card-cotizar {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #edf2f7;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.card-cotizar h3 {
    font-size: 1.25rem;
    font-weight: 700;
    
    margin-bottom: 1rem;
}

.card-cotizar p {
    font-size: 0.95rem;
    
    margin-bottom: 1.5rem;
}

/* Botón estilo WhatsApp */
.btn-whatsapp {
    background-color: #25d366;
    color: white;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    transition: all 0.3s ease;
}

.btn-whatsapp:hover {
    background-color: #128c7e;
    color: white;
    transform: scale(1.02);
}

/* Listas de beneficios */
.titulo-lista {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 1.5rem;
}

.lista-checks {
    list-style: none;
    padding: 0;
}

.lista-checks li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    
    
}

.lista-checks i {
    margin-right: 12px;
    margin-top: 4px;
    font-size: 1.1rem;
}

/* Colores de los checks */
.check-verde i {
    color: #48bb78; /* Verde */
}

.check-azul i {
    color: #3182ce; /* Azul */
}

/* Tarjetas de proyecto minimalistas */
.card-proyecto-simple {
    background: #ffffff;
    padding: 40px;
    border-radius: 15px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.card-proyecto-simple:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    border-color: #cbd5e1;
}

.card-proyecto-simple h3 {
    font-size: 20px;
    font-weight: 700;
    
    margin-bottom: 20px;
    line-height: 1.3;
}

.card-proyecto-simple p {
    font-size: 15px;
    
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1; /* Empuja el enlace hacia abajo para que todos alineen */
}

/* Enlaces "Ver más" */
.link-ver-mas {
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
}

.link-ver-mas i {
    font-size: 12px;
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.link-ver-mas:hover i {
    transform: translateX(5px);
}
.link-ver-mas:hover{
    color:#1e56a0;
}

/* Botón inferior de retorno/ver todos */
.btn-ver-todos {
    color: #1e56a0; /* Azul institucional */
    font-weight: 600;
    text-decoration: none;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    transition: color 0.3s ease;
}

.btn-ver-todos:hover {
    color: #1e56a0;
    text-decoration: underline;
}
/* ===== Contenedor del hero — asegúrate que tenga position:relative y overflow:hidden ===== */
.promo-principal { position: relative; overflow: hidden; }

/* ===== PARTÍCULAS ===== */
.enh-bubbles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.enh-bubble {
  position: absolute;
  bottom: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.5) 40%, transparent 70%);
  box-shadow: 0 0 8px rgba(255,255,255,.6), 0 0 16px rgba(173,216,230,.35);
  opacity: 0;
  animation: enh-bubble-rise linear infinite;
  will-change: transform, opacity;
  filter: blur(.3px);
}
@keyframes enh-bubble-rise {
  0%   { transform: translateY(0) translateX(0) scale(.4); opacity: 0; }
  10%  { opacity: .9; }
  50%  { transform: translateY(-50vh) translateX(20px) scale(1); opacity: .8; }
  100% { transform: translateY(-110vh) translateX(-10px) scale(.5); opacity: 0; }
}

/* ===== ONDAS ===== */
.enh-waves {
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.enh-waves svg {
  position: absolute;
  bottom: 0;
  width: 200%;
  height: 100%;
}
.enh-waves .wave-1 { animation: enh-wave-move 14s linear infinite;            opacity: .35; }
.enh-waves .wave-2 { animation: enh-wave-move 22s linear infinite reverse;     opacity: .25; bottom: 0px; }
.enh-waves .wave-3 { animation: enh-wave-move 30s linear infinite;             opacity: .55; bottom: -2px; }
@keyframes enh-wave-move {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 768px) {
  .enh-waves { height: 50px; }
}
.btn-banner-base{
 text-transform:uppercase;margin-top:10px;background-color:#38b471;font-size:20px;padding:15px 25px;font-weight:500;color:#fff;text-shadow:3px 2px 8px #00000021;
}
.btn-banner-base-outline{
text-transform:uppercase;margin-top:10px;background-color:transparent;border:2px solid #a7c5ddcc;color:#fff;font-size:20px;margin-right:20px;padding:15px 25px;font-weight:500;text-shadow:3px 2px 8px #00000021;background-color:transparent;border:2px solid #a7c5ddcc !important;color:#fff;margin-left:20px;
}
.btn-body-base{
    margin-top:30px;margin-bottom:10px;background-color:#37c172;margin-top:0px;
}
.tp-hero-proof{
    display:flex;
    flex-wrap:wrap;
    gap:10px 18px;
    padding:0;
    margin:18px 0 0;
    list-style:none;
    color:#ecf7ff;
    font-size:14.5px;
    font-weight:500;
  }

  .tp-hero-proof li{
    display:flex;
    align-items:center;
    gap:7px;
    text-shadow:0 1px 6px rgba(0,0,0,.22);
  }

  .tp-hero-proof i{color:#9ff0bd;}
  /* ---------- MOVIMIENTO EN IMÁGENES DE PRODUCTO ---------- */
.tpx-float{ display:inline-block; animation: tpx-float 6.5s ease-in-out infinite; }
.tpx-float:nth-of-type(2n){ animation-duration:7.4s; animation-delay:-1.6s; }
@keyframes tpx-float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }

.img-products{
  border-radius:10px;
  transition: transform .5s var(--tpx-ease), box-shadow .5s var(--tpx-ease), filter .4s ease;
  will-change: transform;
}
.tpx-float:hover .img-products,
a:hover > .img-products{
  transform: scale(1.06);
  box-shadow:0 20px 40px -18px rgba(46,101,158,.4);
}

/* Pill "Ver y cotizar" bajo cada producto destacado */
.tpx-pill{
  display:inline-flex; align-items:center; gap:8px; margin-top:6px;
  padding:9px 20px; border-radius:999px;
  background:#eaf5ef; color:#268a52; font-weight:600; font-size:15px;
  border:1px solid #cfeadd; text-decoration:none;
  transition: all .3s var(--tpx-ease);
}
.tpx-pill i{ transition:transform .3s var(--tpx-ease); }
.tpx-pill:hover{ background:var(--tpx-green); color:#fff; border-color:var(--tpx-green); transform:translateY(-2px); box-shadow:0 12px 22px -10px rgba(55,193,114,.6); }
.tpx-pill:hover i{ transform:translateX(4px); }
.feature-box{
    display:block;
    margin-bottom:30px;
    color:#444;
  }
  .feature-box img{
    width:100%;
    height:auto;
    display:block;
  }
  .fbox-media img{
    aspect-ratio:16/10;
    object-fit:cover;
  }
  .fbox-content h3{
    margin:16px 0 8px;
    color:#333;
    font-weight:600;
  }
  .fbox-content p{margin:0 0 15px}
  .rounded{border-radius:10px!important}
  .img-fluid{max-width:100%;height:auto}
  .img-products{
    width:100%;
    max-height:260px;
    object-fit:contain;
    margin-bottom:18px;
  }
  center{text-align:center}
  #productos{
    scroll-margin-top:110px;
  }

  .row:has(.img-products) .col-md-4{
    margin-bottom:24px;
  }

  .row:has(.img-products) center{
    height:100%;
    padding:24px 18px;
    border:1px solid var(--tp-border);
    border-radius:var(--tp-radius);
    background:#fff;
    box-shadow:0 12px 34px rgba(34,79,126,.08);
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }

  .row:has(.img-products) center:hover{
    transform:translateY(-4px);
    border-color:#cbe2ee;
    box-shadow:var(--tp-shadow);
  }

  .img-products{
    max-height:235px;
    object-fit:contain;
    margin-bottom:16px;
  }

  .tp-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:8px;
    padding:10px 18px;
    border-radius:999px;
    background:var(--tp-green-soft);
    border:1px solid #cfeadd;
    color:#247f4e!important;
    font-size:14.5px;
    font-weight:700;
    text-decoration:none!important;
    transition:all .25s ease;
  }

  .tp-pill:hover{
    color:#fff!important;
    background:var(--tp-green);
    border-color:var(--tp-green);
    transform:translateY(-2px);
  }

  .feature-box.media-box{
    padding:12px;
    border-radius:18px;
    transition:transform .25s ease, box-shadow .25s ease;
  }

  .feature-box.media-box:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 42px rgba(34,79,126,.10);
  }

  .feature-box.fbox-plain .fbox-content{
    height:100%;
    padding:22px 16px;
    border-radius:18px;
    background:#fff;
    border:1px solid var(--tp-border);
    box-shadow:0 10px 28px rgba(34,79,126,.06);
  }
/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
  transform: scale(1.5);
}

.img-hover-zoom-2 {
  height: 300px; /* [1.1] Set it as per your need */
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom-2 img {
  transition: transform .2s ease;

}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom-2:hover img {
  
  transform: scale(1.09);
}
/* Slow-motion Zoom Container */
.img-hover-zoom--slowmo img {
  transform-origin: 50% 65%;
  transition: transform 0.5s, filter 0.3s ease-in-out;
  filter: brightness(93%);
  /*outline: 2px solid white;
  outline-offset: -10px;*/
}

/* The Transformation */
.img-hover-zoom--slowmo:hover img {  
  transform: scale(1.1);
  filter: brightness(100%);
}


  :root{
    --tp-blue:#2e659e;
    --tp-blue-dark:#224f7e;
    --tp-green:#37c172;
    --tp-green-soft:#eaf7ef;
    --tp-orange:#ec9619;
    --tp-text:#3f4750;
    --tp-muted:#6f7b85;
    --tp-border:#e5edf2;
    --tp-bg:#f7fbfd;
    --tp-radius:18px;
    --tp-shadow:0 18px 45px rgba(34,79,126,.12);
  }

  html{scroll-padding-top:90px;}

  #slider .slider-caption h1{
    max-width:780px;
    font-size:clamp(32px,4.4vw,54px)!important;
    line-height:1.06!important;
    letter-spacing:-.8px;
    text-transform:none!important;
    margin-bottom:14px!important;
  }

  #slider .slider-caption p{
    max-width:690px;
    font-size:clamp(18px,2vw,22px)!important;
  }

  .tp-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    align-items:center;
    margin-top:18px;
  }

  .tp-btn-primary,
  .tp-btn-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border-radius:12px;
    padding:15px 24px;
    font-family:Poppins, Arial, sans-serif;
    font-size:17px;
    font-weight:700;
    line-height:1;
    text-transform:none;
    text-decoration:none!important;
    transition:transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
  }

  .tp-btn-primary{
    color:#fff!important;
    background:var(--tp-green);
    box-shadow:0 14px 32px rgba(55,193,114,.32);
  }

  .tp-btn-primary:hover{
    transform:translateY(-2px);
    background:#29a95f;
    color:#fff!important;
  }

  .tp-btn-secondary{
    color:#fff!important;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.68);
    backdrop-filter:blur(3px);
  }

  .tp-btn-secondary:hover{
    transform:translateY(-2px);
    background:rgba(255,255,255,.22);
    color:#fff!important;
  }

  .tp-hero-proof{
    display:flex;
    flex-wrap:wrap;
    gap:10px 18px;
    padding:0;
    margin:18px 0 0;
    list-style:none;
    color:#ecf7ff;
    font-size:14.5px;
    font-weight:500;
  }

  .tp-hero-proof li{
    display:flex;
    align-items:center;
    gap:7px;
    text-shadow:0 1px 6px rgba(0,0,0,.22);
  }

  .tp-hero-proof i{color:#9ff0bd;}

  .tp-trust{
    background:linear-gradient(180deg,#fff 0%,#f3faf7 100%);
    border-bottom:1px solid var(--tp-border);
  }

  .tp-trust-inner{
    max-width:1140px;
    margin:0 auto;
    padding:22px 16px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
  }

  .tp-trust-item{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:16px;
    border:1px solid var(--tp-border);
    border-radius:16px;
    background:#fff;
    box-shadow:0 10px 26px rgba(34,79,126,.07);
  }

  .tp-trust-item i{
    color:var(--tp-green);
    font-size:23px;
    margin-top:2px;
  }

  .tp-trust-item strong{
    display:block;
    color:#27394a;
    font-size:15.5px;
    margin-bottom:3px;
  }

  .tp-trust-item span{
    display:block;
    color:var(--tp-muted);
    font-size:13.5px;
    line-height:1.35;
  }

  #productos{
    scroll-margin-top:110px;
  }

  .row:has(.img-products) .col-md-4{
    margin-bottom:24px;
  }

  .row:has(.img-products) center{
    height:100%;
    padding:24px 18px;
    border:1px solid var(--tp-border);
    border-radius:var(--tp-radius);
    background:#fff;
    box-shadow:0 12px 34px rgba(34,79,126,.08);
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }

  .row:has(.img-products) center:hover{
    transform:translateY(-4px);
    border-color:#cbe2ee;
    box-shadow:var(--tp-shadow);
  }

  .img-products{
    max-height:235px;
    object-fit:contain;
    margin-bottom:16px;
  }

  .tp-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:8px;
    padding:10px 18px;
    border-radius:999px;
    background:var(--tp-green-soft);
    border:1px solid #cfeadd;
    color:#247f4e!important;
    font-size:14.5px;
    font-weight:700;
    text-decoration:none!important;
    transition:all .25s ease;
  }

  .tp-pill:hover{
    color:#fff!important;
    background:var(--tp-green);
    border-color:var(--tp-green);
    transform:translateY(-2px);
  }

  .feature-box.media-box{
    padding:12px;
    border-radius:18px;
    transition:transform .25s ease, box-shadow .25s ease;
  }

  .feature-box.media-box:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 42px rgba(34,79,126,.10);
  }

  .feature-box.fbox-plain .fbox-content{
    height:100%;
    padding:22px 16px;
    border-radius:18px;
    background:#fff;
    border:1px solid var(--tp-border);
    box-shadow:0 10px 28px rgba(34,79,126,.06);
  }

  .feature-box.fbox-plain .fbox-content p:first-of-type{
    color:var(--tp-blue)!important;
  }

  .tp-cta-section{
    max-width:1140px;
    margin:70px auto 10px;
    padding:0 15px;
  }

  .tp-cta-box{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    padding:42px 28px;
    text-align:center;
    color:#fff;
    background:
      radial-gradient(900px 420px at 88% -20%, rgba(55,193,114,.28), transparent 58%),
      linear-gradient(135deg,var(--tp-blue) 0%,var(--tp-blue-dark) 100%);
    box-shadow:0 28px 60px -30px rgba(34,79,126,.72);
  }

  .tp-cta-box:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.10) 48%,transparent 54%);
    transform:translateX(-100%) skewX(-18deg);
    animation:tp-cta-shine 8s ease-in-out infinite;
    pointer-events:none;
  }

  @keyframes tp-cta-shine{
    0%,70%{transform:translateX(-100%) skewX(-18deg);}
    100%{transform:translateX(120%) skewX(-18deg);}
  }

  .tp-cta-box h2{
    position:relative;
    z-index:1;
    color:#fff!important;
    margin:0 0 10px;
    font-size:clamp(26px,3vw,38px)!important;
    font-weight:800!important;
    line-height:1.15;
  }

  .tp-cta-box p{
    position:relative;
    z-index:1;
    max-width:720px;
    margin:0 auto 24px;
    color:#eaf4ff;
    font-size:18px;
    line-height:1.55;
  }

  .tp-cta-box .tp-btn-primary{
    position:relative;
    z-index:1;
    background:#fff;
    color:var(--tp-blue)!important;
    box-shadow:none;
  }

  .tp-cta-box .tp-btn-primary:hover{
    background:#f2fff7;
    color:var(--tp-blue-dark)!important;
  }

  .promo p,
  #content p{
    line-height:1.68;
  }

  h2{
    letter-spacing:-.3px;
  }

  @media(max-width:991px){
    .tp-trust-inner{
      grid-template-columns:repeat(2,1fr);
    }
  }

  @media(max-width:767px){
    .tp-hero-actions{
      flex-direction:column;
      align-items:stretch;
      max-width:360px;
    }

    .tp-btn-primary,
    .tp-btn-secondary{
      width:100%;
      padding:14px 18px;
      font-size:16px;
    }

    .tp-hero-proof{
      max-width:360px;
      font-size:13.5px;
    }

    .tp-trust-inner{
      grid-template-columns:1fr;
      padding:16px;
    }

    .row:has(.img-products) center{
      padding:20px 14px;
    }

    .tp-cta-box{
      padding:34px 20px;
    }
  }