:root{
      --brand-blue:#203477;
      --brand-blue-dark:#162352;
      --brand-red:#ff1e1e;
      --brand-soft:#eef4ff;
    }

    *{ box-sizing:border-box; }

    html, body{
      margin: 0;
      padding: 0;
      overflow-x: hidden;  /* oculta cualquier desborde horizontal */
    }

    body{
      font-family:"Montserrat",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      background:#f5f7fb;
      color:#243047;
    }

    /* ======= HEADER ======= */
    .main-header{
      background:transparent;
      z-index:1030;
    }

    .header-wrapper{
      position:relative;
      padding-top:1.5rem;
      padding-bottom:0.25rem;
    }

    .header-pill{
      background:var(--brand-blue);
      border-radius:999px;                 /* pill redondo para escritorio */
      box-shadow:0 8px 24px rgba(0,0,0,.25);
      padding-inline:1.75rem;
    }

    .logo-badge{
      width:48px;
      height:48px;
    }

    .navbar-nav .nav-link{
      color:#ffffff;
      font-weight:500;
      margin-inline:.75rem;
      position:relative;
      padding-bottom:.35rem;
      text-decoration:none;
    }

    .navbar-nav .nav-link:hover{
      color:#ffffff;
      font-weight:bold;
    }

    .navbar-nav .nav-link.active{
      font-weight:700;
    }

    .navbar-nav .nav-link.active::after{
      content:"";
      position:absolute;
      left:0;
      bottom:-4px;
      width:100%;
      height:3px;
      border-radius:999px;
      background:#ffffff;
    }

    .btn-pill{
      border-radius:999px;
      padding:.4rem 1.3rem;
      font-weight:600;
      border-width:2px;
      font-size:.9rem;
      white-space:nowrap;
    }

    .btn-call{
      background:transparent;
      color:#fff;
      border-color:#ffffff;
    }
    .btn-call:hover{
      background:#ffffff;
      color:var(--brand-blue);
    }

    .btn-consult{
      background:#ffffff;
      color:#e91111;
      border-color:#e91111;
      margin-left:.5rem;
    }
    .btn-consult:hover{
      background:#ffb3b3;
      border-color:#ffb3b3;
      color:var(--brand-blue-dark);
    }

    /* Centramos los links en DESKTOP como ya lo tenías */
    @media (min-width: 992px){
      .main-header .navbar-nav{
        position:absolute;
        left:50%;
        transform:translateX(-50%);
        gap:2rem;
      }
    }

   .main-header{
     background:transparent;
     z-index:1030;
   }

   .header-wrapper{
     position:relative;
     padding-top:1.5rem;
     padding-bottom:0.25rem;
   }

   .header-pill{
     background:var(--brand-blue);
     border-radius:999px;                 /* pill redondo para escritorio */
     box-shadow:0 8px 24px rgba(0,0,0,.25);
     padding-inline:1.75rem;
   }

   .logo-badge{
     width:48px;
     height:48px;
   }

   .navbar-nav .nav-link{
     color:#ffffff;
     font-weight:500;
     margin-inline:.75rem;
     position:relative;
     padding-bottom:.35rem;
     text-decoration:none;
   }

   .navbar-nav .nav-link:hover{
     color:#ffffff;
     font-weight:bold;
   }

   .navbar-nav .nav-link.active{
     font-weight:700;
   }

   .navbar-nav .nav-link.active::after{
     content:"";
     position:absolute;
     left:0;
     bottom:-4px;
     width:100%;
     height:3px;
     border-radius:999px;
     background:#ffffff;
   }

   /* Centramos los links en DESKTOP como ya lo tenías */
   @media (min-width: 992px){
     .main-header .navbar-nav{
       position:absolute;
       left:50%;
       transform:translateX(-50%);
       gap:2rem;
     }
   }

   @media (max-width: 991.98px){

     /* Que el header sea un rectángulo con esquinas redondeadas, no una pelota */
     .header-pill{
       border-radius:24px;
       box-shadow:0 4px 12px rgba(0,0,0,.18);
       padding-block:.75rem;
     }

     /* El contenido dentro del collapse centrado */
     .main-header .navbar-collapse{
       padding-top:.75rem;
       text-align:center;
     }

     /* La lista de links: centrada, sin posición absoluta, gap pequeño */
     .main-header .navbar-nav{
       position:static;
       transform:none;
       width:100%;
       justify-content:center;
       align-items:center;
       gap:0.75rem;           /* menos separación entre Inicio / Servicios / Contacto */
       margin-bottom:.5rem;
     }

     .main-header .navbar-nav .nav-link{
       margin-inline:0;
       padding:0.25rem 0;
     }

     /* Los botones Llamar / Cotiza Aquí centrados debajo del menú */
     .main-header .navbar-collapse > .d-flex{
       width:100%;
       justify-content:center;
       gap:.5rem;
       margin-top:.5rem;
     }
   }



    /* ======= HERO ======= */


    .hero{
      position:relative;
      background:#ffffff;
      margin-top:-6.5rem;       /* subimos el section para que quede “pegado” al menú */
      padding-top:16rem;         /* mantiene espacio para que el texto no se esconda tras el header */
      padding-bottom:7rem;
      overflow:hidden;
    }

    /* círculo rojo superior derecho */
    .hero::before{
      content:"";
      position:absolute;
      width:250px;              /* antes 320px */
      height:250px;             /* antes 320px */
      background:var(--brand-red);
      border-radius:50%;
      top:-20px;               /* antes -180px */
      right:-60px;              /* antes -140px */
      z-index:0;
    }

    /* aro rojo inferior izquierdo */
    .hero::after{
      content:"";
      position:absolute;
      width:150px;
      height:150px;
      border:12px solid var(--brand-red);
      border-radius:50%;
      left:-60px;
      bottom:-70px;
       overflow:visible;   /* ANTES: hidden -> dejaba al CTA “recortado” */
    }

    .hero-inner{
      position:relative;
      z-index:1;
    }

    .hero-title{
      font-size:clamp(2.6rem,4vw,3.3rem);
      font-weight:800;
      color:var(--brand-blue);
      margin-bottom:0.5rem;
    }

    .hero-badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:999px;
      background:var(--brand-red);
      color:#ffffff;
      padding:.55rem 1.6rem;
      font-weight:700;
      font-size:1.05rem;
      margin-bottom:1.5rem;
      box-shadow:0 10px 20px rgba(0,0,0,.25);
    }

    .hero-subtitle{
      text-transform:uppercase;
      letter-spacing:.08em;
      font-size:.95rem;
      font-weight:700;
      color:var(--brand-blue);
    }

    .hero-copy{
       /*max-width:520px; */
      font-size:.95rem;
      color:#4c5a75;
      margin-top:0.75rem;
    }

    .hero-image-card{
      position: relative;
      display: inline-block;           /* se ajusta al tamaño de la imagen */
      padding: 0;                      /* sin padding, la imagen marca el tamaño */
      background: transparent;         /* quitamos el fondo azul completo */
      border-radius: 6px;
      box-shadow: 0 14px 26px rgba(0,0,0,.35);
    }
    .hero-image-card::before{
      content: "";
      position: absolute;
      top: -24px;                      /* cuánto sobresale hacia arriba */
      right: -24px;                    /* cuánto sobresale hacia la derecha */
      width: 85%;                      /* ancho de la lámina respecto a la imagen */
      height: 85%;                     /* alto de la lámina */
      background: var(--brand-blue);   /* tu azul corporativo */
      z-index: -1;                     /* queda detrás de la imagen */
    }

    

    .hero-image-wrapper img{
      display: block;
      width: 100%;
      border-radius: 6px;
    }

    /* ======= CTA BANNER ======= */

    .cta-zone{
      position:relative;
       margin-top:3rem;      /* separación desde el contenido del hero */
       /* OJO: sin margin-bottom negativo aquí */
       z-index:40;          /* por encima de ambos fondos */
    }

      #servicios{
    position:relative;
     z-index:1;    
   }

    .dots-bg{
      position:absolute;
      inset:0;
      background-image:radial-gradient(circle,#d4d9ea 1px,transparent 1px);
      background-size:16px 16px;
      opacity:.6;
      z-index:0;
    }

    .cta-wrapper{
      position:relative;
      z-index:1;
      border-radius:20px;
      overflow:hidden;          /* esquinas redondeadas para ambos bloques */
      box-shadow:0 10px 25px rgba(0,0,0,.12);
      display:flex;
      flex-wrap:wrap;
      background:#ffffff;
    }

    /* Bloque blanco (75%) */
    .cta-left{
      flex:1 1 75%;
      padding:1.6rem 2rem;
      display:flex;
      align-items:center;
      background:#ffffff;
    }

    /* Texto */
    .cta-text{
      font-size:1.2rem;
      font-weight:700;
      color:#203047;
      margin:0;
    }

    /* Bloque rojo (25%) */
    .cta-right{
      flex:0 0 25%;
      background:var(--brand-red);
      color:#ffffff;
      text-decoration:none;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      font-weight:800;
      letter-spacing:.03em;
      text-transform:uppercase;
      font-size:140%;
      padding:1.6rem 1rem;
    }

    /* Hover del bloque rojo */
    .cta-right:hover{
      background:#ff4a3a;
      color:#ffffff;
    }

    /* Responsive: pila en móviles */
    @media (max-width:767.98px){
      .cta-wrapper{
        flex-direction:column;
      }
      .cta-left,
      .cta-right{
        flex:1 1 auto;
        width:100%;
      }
    }

    /* Ajuste para que el banner quede entre secciones */
    

 



    

    .btn-cta{
      background:var(--brand-red);
      color:#ffffff;
      border-radius:18px;
      padding:.85rem 2.3rem;
      font-weight:800;
      letter-spacing:.03em;
      text-transform:uppercase;
      border:none;
      font-size:.95rem;
      box-shadow:0 10px 20px rgba(0,0,0,.35);
    }

    .btn-cta:hover{
      background:#ff4a3a;
      color:#fff;
    }

    .header-wrapper{
      margin-left: 2rem;
      margin-right: 2rem;
    }

    /* ======= FORM PLACEHOLDER (destino del CTA) ======= */
    #form-cotizacion{
      background:#f3f5ff;
      padding-block:4rem;
    }

    #form-cotizacion h2{
      font-weight:800;
      color:var(--brand-blue);
      margin-bottom:1rem;
    }

    #form-cotizacion .card{
      border-radius:18px;
      border:none;
      box-shadow:0 8px 24px rgba(0,0,0,.12);
    }

    .hero{
      position:relative;
      z-index:30;
      overflow:visible;
      padding-bottom:5rem;       /* espacio para que el CTA quede cerca del borde inferior */
    }

    /* CTA dentro del hero, con buena capa */
    .cta-zone{
      position:relative;
      margin-top:3rem;
       margin-bottom:-7rem;
      z-index:40;                /* por encima del hero y de #servicios */
    }

    /* Sección Servicios: sube un poco para morder el CTA, pero por debajo en z-index */
   


    /* ======= SECCIÓN CARDS: SOBRE NOSOTROS / MISIÓN / VISIÓN ======= */
.about-section{
  position:relative;
  z-index:10;
  margin-top:3rem;      /* seguimos mordiendo el CTA */
  padding:7rem 0 10rem;     /* MÁS espacio arriba y un pelín más abajo */
  background:#f3f5ff;
  overflow:hidden;
}

/* fondo punteado */
.about-section::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle,#d0d5e6 1.5px,transparent 1.5px);
  background-size:22px 22px;
  opacity:.45;
  pointer-events:none;
}

.about-section .container{
  position:relative;
  z-index:1;
}

/* CARD */
.about-card{
  background:var(--brand-blue);
  color:#ffffff;
  border-radius:70px 0 70px 0px;
  padding:3rem 2.3rem 3.3rem;   /* más padding vertical = más alto */
  box-shadow:0 18px 32px rgba(0,0,0,.35);
  position:relative;

  max-width:320px;             /* más angosto dentro de la col */
  min-height:430px;            /* fuerza altura mayor */
  margin-left:auto;
  margin-right:auto;           /* centra el card en su columna */

   flex:1 1 auto;           /* ocupa todo el alto disponible de la col */
  display:flex;            /* para poder organizar el contenido interno */
  flex-direction:column;   /* icono, título y texto en columna */
}

/* pequeño efecto de hover */
.about-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 40px rgba(0,0,0,.4);
  transition:all .25s ease;
}

/* ICONO CIRCULAR */
.about-icon{
  width:90px;
  height:90px;
  border-radius:50%;
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 1.7rem;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}

.about-icon i{
  font-size:2.4rem;
  color:var(--brand-blue);
}

/* si usas <img> dentro del icono */
.about-icon img{
  max-width:52px;
  max-height:52px;
}

/* TITULO Y TEXTO */
.about-title{
  font-size:.95rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:800;
  margin-bottom:1rem;
}

.about-text{
  font-size:.9rem;
  line-height:1.7;
}

.about-section .row.g-4{
  align-items:stretch; /* que las columnas se estiren */
}

.about-section .row.g-4 > [class*="col-"]{
  display:flex;        /* cada col se comporta como contenedor flex */
}

/* Responsive pequeño ajuste */
@media (max-width:767.98px){
  .about-card{
    border-radius:40px 0 40px 40px;
  }
}

/* ======= NUESTRO COMPROMISO ======= */

.commitment-section{
  padding:6rem 0 6rem;
  background:#ffffff;
}

.commitment-eyebrow{
  width:12rem;
  height:5px;
  border-radius:999px;
  background:var(--brand-red);
  margin-bottom:1.5rem;
}

.commitment-title{
  font-size:1.6rem;
  font-weight:800;
  color:var(--brand-blue);
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:1.5rem;
}

.commitment-text{
  font-size:.95rem;
  line-height:1.8;
  color:#30405e;
  text-align: justify;
}

/* COLLAGE */
.commitment-media{
  position:relative;
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
  aspect-ratio:4 / 3;      /* mantiene proporción y es responsive */
}

/* fondo lila detrás */
.commitment-bg{
  position:absolute;
  top:18%;
  right:-10%;
  width:78%;
  height:46%;
  background:#dde1f4;
  border-radius:8px;
  z-index:1;
}

/* cuadrito de puntos arriba a la derecha */
.commitment-dots{
  position:absolute;
  top:4%;
  right:-2%;
  width:90px;
  height:90px;
  background-image:radial-gradient(circle, #203477 1.5px, transparent 1.5px);
  background-size:14px 14px;
  opacity:.9;
  z-index:2;
}

/* bloque azul izquierdo */
.commitment-card-left{
  position:absolute;
  left:0;
  top:20%;
  width:32%;
  height:60%;
  background:var(--brand-blue);
  border-radius:70px 0 0 70px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
}

/* bloque azul derecho */
.commitment-card-right{
  position:absolute;
  right:0;
  bottom:0;
  width:26%;
  height:55%;
  background:var(--brand-blue);
  border-radius:0 70px 70px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
}

/* iconos dentro de los bloques azules */
.commitment-icon{
  width:90px;
  height:90px;
  border-radius:50%;
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 22px rgba(0,0,0,.3);
}

.commitment-icon img{
  max-width:60%;
  max-height:60%;
}

/* foto superior */
.commitment-photo-top{
  position:absolute;
  top:10%;
  right:2%;
  width:70%;
  height:40%;
  border-radius:6px;
  overflow:hidden;
  z-index:2;
}

/* foto inferior */
.commitment-photo-bottom{
  position:absolute;
  left:24%;
  bottom:0;
  width:55%;
  height:50%;
  border-radius:0 0 0 10px;
  overflow:hidden;
  z-index:2;
}

.commitment-photo-top img,
.commitment-photo-bottom img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Responsive: en móviles, un poco más compacto */
@media (max-width:767.98px){
  .commitment-section{
    padding:4rem 0 4rem;
  }

  .commitment-media{
    max-width:100%;
  }
}

/* ======= SECTION VIDEO ======= */

.video-section{
  background:#ffffff;
}

.video-wrapper{
  position:relative;
  width:100%;
  border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  overflow:hidden;
  background:#000;
}

/* Mantener proporción 16:9 y responsive */
.video-thumb,
.video-iframe{
  position:relative;
  width:100%;
  padding-bottom:56.25%; /* 16:9 */
}

.video-thumb img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Botón play centrado */
.video-play-btn{
  position:absolute;
  inset:0;
  margin:auto;
  width:90px;
  height:90px;
  border-radius:50%;
  border:none;
  background:rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .2s ease;
}

.video-play-btn .play-icon{
  width:70px;
  height:70px;
  border-radius:50%;
  background:var(--brand-red);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 12px 24px rgba(0,0,0,.45);
}

.video-play-btn i{
  font-size:2.4rem;
  color:#fff;
  margin-left:.15rem;
}

.video-play-btn:hover .play-icon{
  background:#ff4a3a;
}

/* iframe cuando se carga */
.video-iframe iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* ======= MARCAS / LOGOS ======= */

.brands-section{
  padding:4rem 0 4.5rem;
  background:#f5f7fb;
}

.brands-eyebrow{
  width:12rem;
  height:5px;
  border-radius:999px;
  background:var(--brand-red);
  margin:0 auto 1.5rem;
}

.brands-title{
  font-size:1.3rem;
  font-weight:800;
  color:var(--brand-blue);
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* Franja de logos */
.brands-strip{
  overflow:hidden;
  margin-top:2.5rem;
}

.brands-track{
  display:flex;
  gap:2.5rem;
  animation:brands-scroll 26s linear infinite;
}


.brand-logo img{
  max-height: 70px;              /* o el alto que estés usando */
 
}

/* Al pasar el mouse: vuelve el color */
.brand-item img{
  filter: grayscale(100%);
  opacity: 0.7;
  transition: 
    filter 0.3s ease,
    opacity 0.3s ease,
    transform 0.3s ease;
}

/* Al pasar el mouse: vuelve el color */
.brand-item img:hover{
  filter: grayscale(0%);
  opacity: 1;
  transform: translateY(-3px);   /* leve “lift” opcional */
}


/* Caja de cada logo: todos mismo espacio */
.brand-item{
  flex:0 0 250px;           /* ancho fijo por logo */
  height:110px;              /* alto fijo por logo */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:.5rem 1rem;
  opacity: 0.7;
  transition: 
    filter 0.3s ease,
    opacity 0.3s ease,
    transform 0.3s ease;
}

.brand-item img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;       /* mantiene proporción dentro de la caja */
}



/* Animación loop */
@keyframes brands-scroll{
  0%{
    transform:translateX(0);
  }
  100%{
    transform:translateX(-50%);
  }
}

/* Pausa animación al pasar el mouse (desktop) 
.brands-strip:hover .brands-track{
  animation-play-state:paused;
}*/

/* Responsive */
@media (max-width:767.98px){
  .brands-section{
    padding:3rem 0 3.5rem;
  }

  .brands-track{
    gap:1.5rem;
    animation-duration:18s;
  }

  .brand-item{
    flex:0 0 200px;
    height:140px;
  }

  .brands-title{
    font-size:1.05rem;
  }
}

/* ======= ESPECIALIZACIÓN ======= */

.special-section{
  background:#e3e5f4; /* franja superior/inferior suave */
}

/* IMAGEN CON TINTE AZUL */
.special-image{
  position:relative;
  height:100%;
  min-height:260px;
  overflow:hidden;
}

.special-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* overlay azul */
.special-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(32,52,119,.55); /* var(--brand-blue) con transparencia */
  mix-blend-mode:multiply;
}

/* CONTENIDO DERECHO */
.special-content{
  height:100%;
  background:#ffffff;
  padding:3.5rem 3.5rem 3.5rem 0rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:left;
}

.special-eyebrow{
  width:12rem;
  height:5px;
  border-radius:999px;
  background:var(--brand-red);
  margin-bottom:1.5rem;
}

.special-title{
  font-size:1.5rem;
  font-weight:800;
  color:var(--brand-blue);
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:1.5rem;
}

.special-text{
  padding: 2rem 10rem 2rem 10rem;

  font-size:.95rem;
  line-height:1.8;
  color:#30405e;
  text-align: justify;
  align-items:end;

}

@media (max-width: 767.98px){
  .special-text{
    padding: 0;
  }

  .special-cta{
    text-align:center;
    display: flex;
    align-items:center;


  }
  
}

/* CTA LATIDO + BOTÓN */
.special-cta{
  margin-top: 2.3rem;
  display: flex;
  /*justify-content: flex-end;  alinea contenido hacia la derecha 
  gap: 1.5rem;*/
  padding-right:10rem ;
}

.heartbeat{
  flex:0 0 50%;
  color:var(--brand-red);
}

.heartbeat svg{
  width:100%;
  height:40px;
}
.heartbeat polyline{
  stroke-dasharray: 380;    /* longitud aproximada de la línea */
  stroke-dashoffset: 380;   /* la esconde */
  animation: drawBeat 2.2s linear infinite;
}

@keyframes drawBeat{
  from { stroke-dashoffset: 380; }
  to   { stroke-dashoffset: 0; }
}


/* botón rojo */
.btn-special{
  font-size: 150%;
  background:var(--brand-red);
  color:#ffffff;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
  border-radius:2px;
  padding:.8rem 1.9rem;
  border:none;
  box-shadow:0 10px 24px rgba(0,0,0,.3);
  white-space:nowrap;
}

.btn-special:hover{
  background:#ff4a3a;
  color:#ffffff;
}

/* RESPONSIVE */
@media (max-width:991.98px){
  .special-content{
    padding:2.5rem 1.75rem 3rem;
    text-align:center;
    align-items:center;
  }

  .special-text{
    max-width:100%;
  }

  

  .heartbeat{
    flex:0 0 auto;
    width:160px;
  }
}

/* ======= SECTION SEGURIDAD / CERTIFICACIONES ======= */

.safety-section{
  padding:3.5rem 0 3.8rem;
  background:linear-gradient(90deg,#e3e7f8 0%, #c7cee9 100%);
  color:var(--brand-blue);
}

.safety-list{
  list-style:none;
  padding:0;
  margin:0;
}

.safety-item{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
}

.safety-icon{
  flex:0 0 auto;
  margin-top:2px;
}

.safety-icon i{
  font-size:1.4rem;
  display:flex;

    align-items: center;

  color:var(--brand-blue);
}

.safety-text{
  font-size:1rem;
  text-align: justify;
  display:flex;

    align-items: center;

  font-weight: bold;
}

/* items extra: ocultos inicialmente, con animación suave */
.safety-item-extra{
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .25s ease, opacity .25s ease;
}

/* cuando se muestra todo */
.safety-section.safety-show-all .safety-item-extra{
  max-height:90px;  /* suficiente para 2 líneas aprox */
  opacity:1;
}

/* Botón Ver más */
.safety-btn{
  background:var(--brand-blue);
  color:#ffffff;
  border:none;
  border-radius:999px;
  padding:.6rem 1.8rem;
  font-weight:600;
  min-width:130px;
}

.safety-btn:hover{
  background:#162352;
  color:#ffffff;
}

/* ======= SLIDER DE SERVICIOS ======= */

.services-carousel-section{
  background:var(--brand-blue);
  padding: 2.5rem 0;

}

.services-carousel-wrapper{
  position: relative;
  padding: 0 3rem; /* separa el contenido de las orillas */
}



.services-viewport{
  overflow:hidden;
  flex:1 1 auto;
}

.services-track{
  display:flex;
  transition:transform .4s ease;
}

/* cada slide ocupa 100% del viewport */
.services-slide{
  min-width:100%;
  display:flex;
  justify-content:space-around;
  gap:2.5rem;
}

/* tarjetas */
.services-card{
  text-align: center;
    color: #ffffff;
    padding: 0 1rem;
    border-right: 1px solid rgba(255,255,255,.35); /* línea vertical */
}

/* separador vertical entre cards (solo desktop) 
@media (min-width:992px){
  .services-card:not(:last-child)::after{
    content:"";
    position:absolute;
    top:18%;
    bottom:10%;
    right:0;
    width:1px;
    background:rgba(255,255,255,.4);
  }
}*/

/* círculo de fondo para el icono */
.services-icon-wrapper{
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.5rem;
}

.services-icon-wrapper img{
  max-width: 100%;
  max-height: 100%;
}

/* texto abajo */
.services-label{
  font-size: .9rem;
  margin: 0;
}
#servicesCarouselDesktop .carousel-item .row > div:last-child .services-card{
  border-right: none;
}

/* Flechas */
.services-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  padding: 0;
  z-index: 10;
}

.services-prev{
  left: 0;
}

.services-next{
  right: 0;
}


.nav-circle{
  color:var(--brand-blue);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.nav-circle i{
  font-size:1.1rem;
}

/* Responsive */
@media (max-width: 767.98px){

  .services-carousel-wrapper{
    padding: 0 2.5rem; /* un poco menos en mobile */
  }

  /* En mobile siempre son 2 por fila, quitamos la línea del segundo de cada par */
  #servicesCarouselMobile .carousel-item .row > div:nth-child(2n) .services-card{
    border-right: none;
  }
}


/* ======= MAPA CHILE ======= */

.map-section{
  padding:4rem 0 4.5rem;
  background:#ffffff;
}

.map-eyebrow{
  width:12rem;
  height:5px;
  border-radius:999px;
  background:var(--brand-red);
  margin:0 auto 1.5rem;
}

.map-title{
  font-size:1.3rem;
  font-weight:800;
  color:var(--brand-blue);
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:2.5rem;
}

/* marco del mapa */
.map-frame{
  max-width:960px;
  margin:0 auto;
  border:2px solid var(--brand-blue);
  border-radius:4px;
  padding:1.5rem;
  background:#ffffff;
  box-shadow:0 10px 24px rgba(0,0,0,.10);
}

.map-frame img{
  width:100%;
  height:auto;
  display:block;
}

/* responsive pequeño ajuste */
@media (max-width:767.98px){
  .map-section{
    padding:3rem 0 3.5rem;
  }

  .map-frame{
    padding:1rem;
  }

  .map-title{
    font-size:1.05rem;
  }
}

/* ======= FOOTER ======= */

.site-footer{
  background:#ffffff;
  color:var(--brand-blue);
  position:relative;
  z-index:5;
  overflow:hidden;        /* para que la ola no se salga */
  padding-bottom:180px;   /* espacio para que se vea completa la ola */
}
.site-footer::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:100%; /* altura aproximada de la ola; ajusta si hace falta */
  width: 100%;
  background-image:url("https://ambulanciasfaenas.cl/public/dist/img/Recurso%20178ldpi.png");
  background-repeat:no-repeat;
  background-position:bottom center;
  background-size: contain;

  pointer-events:none;         /* no bloquea clics en nada */
  z-index:-1;                  /* queda detrás del contenido del footer */
}

.footer-top{
  padding:3rem 1rem 2rem;
}

.footer-logo{
  max-height:110px;
}

/* bloques de info */
.footer-blocks{
  border-left:0;
}

.footer-block{
  font-size:.9rem;
}

.footer-block-title{
  font-weight:700;
  margin-bottom:.35rem;
  
  align-items:center;
}

.footer-block-title i{
  color:var(--brand-blue);
}

.footer-block-text a{
  color:var(--brand-blue);
  text-decoration:none;
  border-bottom:1px solid transparent;
  font-size:.9rem;
}

.footer-block-text a:hover{
  border-color:var(--brand-blue);
}

/* separadores verticales en desktop */
@media (min-width:992px){
  .footer-blocks{
    display:flex;
    flex-wrap:wrap;
    gap:0;
  }

  .footer-block{
    border-left:1px solid rgba(32,52,119,.25);
    padding-left:1.7rem;
    margin-left:1.7rem;
  }

  .footer-block:nth-child(1){
    border-left:none;
    padding-left:0;
    margin-left:0;
  }
}

/* botón llamar a emergencias */
.footer-call-wrapper{
  margin-top:2rem;
}

.footer-call-btn{
  background:var(--brand-blue);
  color:#ffffff;
  border-radius:999px;
  padding:.6rem 2.4rem;
  font-weight:600;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
  border:none;
}

.footer-call-btn:hover{
  background:#162352;
  color:#ffffff;
}

/* copyright; tu ola inferior puede ir detrás de esto */
.footer-bottom{
  padding:0.8rem 1rem 1.5rem;
  font-size:.8rem;
  color:#ffffff;
  background:transparent;  /* deja que se vea tu ola azul que ya tienes */
  position:relative;
  z-index:6;
}

.footer-bottom small{
  color:var(--brand-blue);
}

.footer-bottom i.bi-heart-fill{
  color:#ff4a3a;
}

/* responsive */
@media (max-width:767.98px){
  .footer-top{
    padding:2.5rem 1.5rem 2rem;
    text-align:center;
  }
  .footer-block-title{
    text-align:center;
  }

  .footer-block{
    border-left:none !important;
    padding-left:0 !important;
    margin-left:0 !important;
  }

  .footer-call-btn{
    width:100%;
    max-width:320px;
  }
}

/* ======= BANNER "CONOCE NUESTROS SERVICIOS" ======= */

.services-banner{
  background:#ffffff;
}

.services-banner-link{
  display:block;
  text-decoration:none;
}

.faena-banner-img{
  width:100%;
  margin-top: 5rem;
  border-radius:0;         /* si quieres bordes, puedes poner 16px */
  overflow:hidden;
  box-shadow:0 14px 30px rgba(0,0,0,.25);

  /* Mantener proporción y usar la imagen como fondo */
  aspect-ratio: 16 / 4;    /* ajusta si quieres que se vea más alto o más bajo */
  background-image:url("https://ambulanciasfaenas.cl/public/dist/img/Banners--02.jpg");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}

/* Responsive: un poco más alto en móviles si lo necesitas */
@media (max-width:767.98px){
  .faena-banner{
    padding:1.8rem 0 0;
  }
  
  .faena-banner-img{
    aspect-ratio: 16 / 5;
    box-shadow:0 10px 22px rgba(0,0,0,.25);
  }
}

.services-banner-img{
  width:100%;
  margin-top: 5rem;
  border-radius:0;         /* si quieres bordes, puedes poner 16px */
  overflow:hidden;
  box-shadow:0 14px 30px rgba(0,0,0,.25);

  /* Mantener proporción y usar la imagen como fondo */
  aspect-ratio: 16 / 4;    /* ajusta si quieres que se vea más alto o más bajo */
  background-image:url("https://ambulanciasfaenas.cl/public/dist/img/Banners--01.jpg");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}

/* Responsive: un poco más alto en móviles si lo necesitas */
@media (max-width:767.98px){
  .services-banner{
    padding:1.8rem 0 0;
  }
  
  .services-banner-img{
    aspect-ratio: 16 / 5;
    box-shadow:0 10px 22px rgba(0,0,0,.25);
  }
}

.contacto-banner-img{
  margin-top: 5rem;
  width:100%;
  border-radius:0;         /* si quieres bordes, puedes poner 16px */
  overflow:hidden;
  box-shadow:0 14px 30px rgba(0,0,0,.25);

  /* Mantener proporción y usar la imagen como fondo */
  aspect-ratio: 16 / 4;    /* ajusta si quieres que se vea más alto o más bajo */
  background-image:url("https://ambulanciasfaenas.cl/public/dist/img/Banners--03.jpg");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}

/* Responsive: un poco más alto en móviles si lo necesitas */
@media (max-width:767.98px){
  .contacto-banner{
    padding:1.8rem 0 0;
  }
  
  .contacto-banner-img{
    aspect-ratio: 16 / 5;
    box-shadow:0 10px 22px rgba(0,0,0,.25);
  }
}
.trabaja-banner-img{
  width:100%;
  margin-top: 5rem;
  border-radius:0;         /* si quieres bordes, puedes poner 16px */
  overflow:hidden;
  box-shadow:0 14px 30px rgba(0,0,0,.25);

  /* Mantener proporción y usar la imagen como fondo */
  aspect-ratio: 16 / 4;    /* ajusta si quieres que se vea más alto o más bajo */
  background-image:url("https://ambulanciasfaenas.cl/public/dist/img/Banners--04.jpg");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}

/* Responsive: un poco más alto en móviles si lo necesitas */
@media (max-width:767.98px){
  .trabaja-banner{
    padding:1.8rem 0 0;
  }
  
  .trabaja-banner-img{
    aspect-ratio: 16 / 5;
    box-shadow:0 10px 22px rgba(0,0,0,.25);
  }
}

    /* ======= SECCIÓN CARDS: SOBRE NOSOTROS / MISIÓN / VISIÓN ======= */
.services-section{
  margin-top: 0px;
  position:relative;
  padding:7rem 0 10rem;     /* MÁS espacio arriba y un pelín más abajo */
  background:#f3f5ff;
  overflow:hidden;
}

/* fondo punteado */
.services-section::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle,#d0d5e6 1.5px,transparent 1.5px);
  background-size:22px 22px;
  opacity:.45;
  pointer-events:none;
}

.services-section .container{
  position:relative;
  z-index:1;
}

/* ======= CARDS DE AMBULANCIAS (DETALLE SERVICIOS) ======= */

.ambulancias-section{
  position:relative;
  padding:4rem 0 4.5rem;
  background:#f3f5ff;
}

/* fondo de puntitos suave, como otras secciones */
.ambulancias-section::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle,#d0d5e6 1.5px,transparent 1.5px);
  background-size:22px 22px;
  opacity:.45;
  pointer-events:none;
}

.ambulancias-section .container{
  position:relative;
  z-index:1;
}

/* CARD */
.ambul-card{
  background:#ffffff;
  border-radius:6px;
  box-shadow:0 14px 26px rgba(0,0,0,.20);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
}

/* contenedor de la imagen circular */
.ambul-card-thumb{
  padding:1.5rem 1.5rem 0.5rem;
}

.ambul-card-thumb-inner{
  width:100%;
  margin:0 auto;
  overflow:hidden;
}

.ambul-card-thumb-inner img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* cuerpo del card */
.ambul-card-body{
  padding:0 1.8rem 2rem;
}

/* pastilla del título */
.ambul-card-badge{
  display:inline-block;        /* ya no ocupa todo el ancho */
  margin-top:.7rem;
  margin-bottom:1rem;

  /* pegamos solo al borde izquierdo del card */
  margin-left:-1.8rem;         /* mismo valor que el padding lateral del body */

  /* ancho: texto + padding */
  padding:.45rem 1.8rem;

  background:var(--brand-blue);
  color:#ffffff;
  font-size:.8rem;
  font-weight:700;

  border-radius:0 999px 999px 0; /* recto izq, redondo der */
  max-width:100%;
  word-wrap:break-word;
}



/* texto */
.ambul-card-text{
  font-size:.9rem;
  line-height:1.75;
  color:#30405e;
}

/* responsive */
@media (max-width:767.98px){
  .ambulancias-section{
    padding:3rem 0 3.5rem;
  }

  .ambul-card-body{
    padding:0 1.3rem 1.7rem;
  }

}

@media (max-width:767.98px){
  .ambul-card-badge{
    font-size:.78rem;
    margin-left:-1.3rem;   /* mismo que .ambul-card-body padding horizontal en mobile */
    padding:.45rem 1.5rem;
  }
}

/* ======= CONTACTO ======= */

.contact-section{
  padding:4rem 0 4.5rem;
  position:relative;
  /* el fondo punteado / degradado ya lo tienes, así que no lo toco */
}

.contact-eyebrow{
  width:12rem;
    height:5px;
  border-radius:999px;
  background:var(--brand-red);
  margin:0 auto 1.5rem;
}

.contact-title{
  font-size:1.5rem;
  font-weight:800;
  color:var(--brand-blue);
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:2.5rem;
}

/* tarjeta blanca central */
.contact-card{
  max-width:980px;
  margin:0 auto;
  background:#ffffff;
  border-radius:4px;
  box-shadow:0 12px 26px rgba(0,0,0,.18);
  padding:1.8rem 2.2rem;
}

/* cada bloque (ubicación / teléfono / correo) */
.contact-block{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  font-size:.9rem;
}

/* icono circular */
.contact-icon{
  flex:0 0 auto;
  width:32px;
  height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(32,52,119,.08);
  color:var(--brand-blue);
  margin-top:2px;
}

.contact-block-title{
  font-weight:700;
  color:var(--brand-blue);
  margin-bottom:.25rem;
}

.contact-block-text{
  font-size:.86rem;
  color:#30405e;
}

.contact-block-text a{
  color:var(--brand-blue);
  text-decoration:none;
  border-bottom:1px solid transparent;
}

.contact-block-text a:hover{
  border-color:var(--brand-blue);
}

/* separadores verticales solo en desktop */
@media (min-width:992px){
  .contact-block{
    border-left:1px solid rgba(32,52,119,.25);
    padding-left:1.5rem;
  }
  .contact-block:first-child{
    border-left:none;
    padding-left:0;
  }
}

/* responsive */
@media (max-width:767.98px){
  .contact-section{
    padding:3rem 0 3.5rem;
  }

  .contact-card{
    padding:1.5rem 1.4rem;
  }

  .contact-block{
    border-left:none !important;
    padding-left:0 !important;
  }
}

/* ======= MAPA GOOGLE "ENCUÉNTRANOS EN" ======= */

.map-embed-section{
  padding:4rem 0 4.5rem;
  background:#ffffff;
}

.map-embed-eyebrow{
  width:12rem;
    height:5px;
  border-radius:999px;
  background:var(--brand-red);
  margin:0 auto 1.5rem;
}

.map-embed-title{
  font-size:1.5rem;
  font-weight:800;
  color:var(--brand-blue);
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:2.5rem;
}

/* marco del mapa */
.map-embed-frame{
  max-width:960px;
  margin:0 auto;
  background:#ffffff;
  border-radius:4px;
  border:2px solid var(--brand-blue);
  padding:0;              /* el ratio maneja el alto */
  overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}

.map-embed-frame iframe{
  width:100%;
  height:100%;
}

/* responsive */
@media (max-width:767.98px){
  .map-embed-section{
    padding:3rem 0 3.5rem;
  }

  .map-embed-title{
    font-size:1.05rem;
  }
}

/* ======= TRABAJA CON NOSOTROS ======= */

.jobs-section{
  position:relative;
  padding:4rem 0 4.5rem;
  background:var(--brand-blue);
  color:#ffffff;
  overflow:hidden;
}

/* patrón diagonal sobre el azul */
.jobs-section::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:repeating-linear-gradient(
      -45deg,
      rgba(0,0,0,.06) 0,
      rgba(0,0,0,.06) 1px,
      transparent 1px,
      transparent 8px
  );
  opacity:.5;
  pointer-events:none;
}

.jobs-section .container{
  position:relative;
  z-index:1;
}

.jobs-eyebrow{
  width:90px;
  height:4px;
  border-radius:999px;
  background:var(--brand-red);
  margin:0 auto 1.5rem;
}

.jobs-title{
  font-size:1.3rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* Caja del formulario */
.jobs-form-wrapper{
  max-width:760px;
  margin:0 auto;
  position:relative;
}

/* Formulario */
.jobs-form{
  background:transparent;
}

/* labels y inputs */
.jobs-label{
  font-size:.82rem;
  font-weight:600;
}

.jobs-input{
  background:#ffffff;
  border-radius:4px;
  border:none;
  font-size:.9rem;
  padding:.45rem .75rem;
}

.jobs-input:focus{
  border:1px solid #ffffff;
  outline:0;
  box-shadow:0 0 0 .18rem rgba(255,255,255,.2);
}

/* radios / checks */
.jobs-check .form-check-input{
  background-color:transparent;
  border:2px solid #ffffff;
  width:16px;
  height:16px;
  margin-top:3px;
}
.jobs-check .form-check-input:checked{
  background-color:#ffffff;
  border-color:#ffffff;
}
.jobs-check .form-check-label{
  font-size:.86rem;
}

/* file input centrado y más pequeño */
.jobs-file-input{
  max-width:340px;
  font-size:.85rem;
  padding:.25rem .75rem;
  border-radius:999px;
}

/* botón enviar */
.jobs-submit-btn{
  background:#ffffff;
  color:var(--brand-blue);
  border:none;
  border-radius:999px;
  padding:.55rem 2.4rem;
  font-weight:600;
  box-shadow:0 8px 18px rgba(0,0,0,.35);
}
.jobs-submit-btn:hover{
  background:#ffb3b3;
  color:var(--brand-blue-dark);
}

/* Íconos decorativos */
.jobs-icon{
  position:absolute;
  width:120px;
  height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.jobs-icon img{
  max-width:80%;
  max-height:80%;
}

/* posiciones aproximadas; ajusta si quieres */
.jobs-icon-left{
  left:-140px;
  top:120px;
}

.jobs-icon-right{
  right:-120px;
  top:150px;
}

.jobs-icon-bottom{
  right:-40px;
  bottom:30px;
}

/* responsive */
@media (max-width:767.98px){
  .jobs-section{
    padding:3rem 0 3.5rem;
  }

  .jobs-form-wrapper{
    padding:0 1rem;
  }

  .jobs-icon-left,
  .jobs-icon-right,
  .jobs-icon-bottom{
    display:none; /* si en móvil molestan, los ocultamos; puedes quitarlos si los quieres igual */
  }
}

.jobs-alert{
  margin-bottom:1.5rem;
  padding:.75rem 1rem;
  border-radius:6px;
  font-size:.9rem;
  text-align:center;
}

.jobs-alert-success{
  background:rgba(255,255,255,.15);
  border:1px solid #c9f7c5;
  color:#e8ffe6;
}

.jobs-alert-error{
  background:rgba(0,0,0,.25);
  border:1px solid #ffb3b3;
  color:#ffe5e5;
}

.floatWapp{
   position:fixed;
   width:60px;
   height:60px;
   bottom:10%;
   right:29px;
   background-color:#25d366;
   color:#FFF;
   border-radius:50px;
   text-align:center;
   font-size:30px;
   z-index:100;
 }

 .my-floatWapp{
   margin-top:15px;
 }



.map-viewer{
    position:relative;
    width:100%;
    max-width:960px;
    border-radius:4px;
    overflow:hidden;
    margin:0 auto;
    padding:1rem;
    background:#fffff;
    border:2px solid var(--brand-blue);
    box-shadow:0 10px 24px rgba(0,0,0,.10);

  }
  .map-viewport{

    position:relative;
    width:100%;
    aspect-ratio: 40 / 10; /* ajusta si tu mapa es otro ratio */
    overflow:hidden;
    touch-action:none;     /* importante para pan/zoom táctil */
  }
  .map-img{

    display:block;
    position:absolute;
    left:0; top:0;
    width:100%;
    height:auto%;
    object-fit:contain;    /* si tu mapa ya calza perfecto, puedes usar cover */
    transform-origin: 0 0;
    will-change:transform;
    user-select:none;
    cursor:grab;
  }
  .map-viewer.dragging .map-img{ cursor:grabbing; }

  .map-controls{
    position:absolute;
    top:14px;
    right:14px;
    display:flex;
    flex-direction:column;
    gap:8px;
    opacity:0;
    transform:translateY(-4px);
    transition:opacity .18s ease, transform .18s ease;
    pointer-events:none;
  }
  .map-viewer:hover .map-controls{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  .map-btn{
    width:40px;height:40px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(17,24,39,.78);
    color:#fff;
    font-size:18px;
    line-height:1;
    cursor:pointer;
  }
  .map-btn:active{ transform:scale(.98); }

  .map-zoom{
    margin-top:2px;
    text-align:center;
    font: 12px/1.2 system-ui, -apple-system, Segoe UI, sans-serif;
    color: rgba(255,255,255,.82);
    padding:6px 8px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(17,24,39,.55);
  }

  .map-hint{
    position:absolute;
    left:14px;
    bottom:14px;
    font: 12px/1.2 system-ui, -apple-system, Segoe UI, sans-serif;
    color: rgba(255,255,255,.78);
    padding:8px 10px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(17,24,39,.45);
    backdrop-filter: blur(4px);
  }

  /* En móvil no hay hover: deja controles siempre visibles */
  @media (max-width: 768px){
    .map-controls{ opacity:1; transform:none; pointer-events:auto; }
  }