/* ==========================================================
   RESET
   ========================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ==========================================================
   DESIGN SYSTEM
   ========================================================== */

:root {

  --azul: #0E2A47;
  --celeste: #00A8E8;
  --verde: #49A942;
  --gris: #E9ECEF;
  --blanco: #FFFFFF;

}

/* ==========================================================
   BODY
   ========================================================== */

body {
  font-family: 'Inter', sans-serif;
  background: var(--blanco);
}

/* ==========================================================
   HEADER
   ========================================================== */

.main-header {

  background: var(--blanco);

  border-bottom: 1px solid var(--gris);

  position: sticky;

  top: 0;

  z-index: 1000;

  box-shadow: 0 2px 10px rgba(0,0,0,.03);

}

.header-container {

  width: 90%;
  max-width: 1200px;
  height: 90px;

  margin: 0 auto;

  display: flex;
  align-items: center;

}

/* ==========================================================
   LOGO
   ========================================================== */

.logo {

  width: 140px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transform: translateY(-12px);
  margin-left: 15px;
  margin-right: -15px;

}

.logo img {

  width: 143px;
  height: auto;
  display: block


}

.logo a{

  display:flex;

}



/* ==========================================================
   MENÚ
   ========================================================== */

.nav-menu {

  flex: 1;
  display: flex;
  justify-content: center;

}

.nav-menu ul {

  list-style: none;
  display: flex;
  align-items: center;
  gap: 40px;
  margin: 0;
  padding: 0;

}

.nav-menu a {

  text-decoration: none;

  color: var(--azul);

  font-size: 17px;

  font-weight: 500;

  transition: color .30s ease;

}

.nav-menu a:hover {

  color: var(--celeste);

}

/* ==========================================================
   ACCIONES DEL HEADER
   ========================================================== */

.header-actions {

  display:flex;
  align-items:center;
  gap:28px;
  margin-left:40px;

}

/* ==========================================================
   BUSCADOR
   (Se mantiene la animación original)
   ========================================================== */

.search-box {

  position:relative;

  width:36px;

  height:36px;

  flex-shrink:0;

}

.search-input {

  position: absolute;      /* NUEVO */
  right: 35px;             /* NUEVO */

  width: 0;
  opacity: 0;              /* NUEVO */

  padding: 0;
  border: none;
  outline: none;

  background: #F8F9FA;

  border-radius: 20px;

  font-family: 'Inter', sans-serif;
  font-size: 14px;

  color: var(--azul);

  transition:
    width .4s ease,
    opacity .25s ease,
    padding .4s ease,
    border .4s ease;

}

.search-btn {

  background: none;
  border: none;

  cursor: pointer;

  display: flex;
  align-items: center;

  padding: 5px;

  outline: none;
  margin-right: 15px;

}

.search-btn svg{

  transition:
    transform .35s ease,
    stroke .35s ease;

}

/* Animación original */

.search-box.active .search-input,
.search-input:focus{

  width:170px;

  padding:8px 15px;

  opacity:1;

  border:1px solid #E9ECEF;

}

.search-box.active .search-btn svg{

  transform:rotate(12deg);

  stroke:#00A8E8;

}

/* ==========================================================
   BOTÓN UBÍCANOS
   ========================================================== */

.btn-ubicanos {

  text-decoration: none;

  color: var(--azul);

  border: 1.5px solid var(--azul);

  padding: 8px 20px;

  border-radius: 30px;

  font-size: 14px;

  font-weight: 600;

  margin-right: 15px;

  transition:
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease;

}

.btn-ubicanos:hover {

  background: var(--verde);

  border-color: var(--verde);

  color: var(--blanco);

}

/* ==========================================================
   FACEBOOK
   ========================================================== */

.facebook-link {

  display: flex;

  align-items: center;

  margin-right: 15px;

  transition: transform .20s ease;

}

.facebook-link svg {

  transition: fill .30s ease;

}

.facebook-link:hover {

  transform: scale(1.08);

}

.facebook-link:hover svg {

  fill: #1877F2;

}

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

.hero{

  position:relative;

  min-height:770px;

  padding-bottom:120px;

  background-image:url("../img/hero-fondo.webp");

  background-size:cover;

  background-position:center;

  background-repeat:no-repeat;

  overflow:hidden;

}


/* Oscurece ligeramente el lado izquierdo para que el texto
   tenga mucho contraste */

.hero-overlay{

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(8,28,52,.78) 0%,
      rgba(8,28,52,.55) 22%,
      rgba(8,28,52,.20) 48%,
      rgba(8,28,52,0) 72%
    );

}


/* ==========================================================
   CONTENEDOR
========================================================== */

.hero-container{

  width:90%;

  max-width:1200px;

  height:100%;

  margin:auto;

  display:flex;

  align-items:center;

  position:relative;

  z-index:2;

}


/* ==========================================================
   TEXTO
========================================================== */

.hero-content{

  padding-top:60px;

  max-width:680px;

  color:#FFFFFF;

}


.hero-content h1{

  font-size:64px;
  font-weight:700;
  line-height:1.08;
  letter-spacing:-1.5px;

  max-width:620px;

  margin-bottom:40px;

}


.hero-content p{

  font-size:18px;

  line-height:1.75;

  color:rgba(255,255,255,.88);

  max-width:500px;

  margin-bottom:50px;

}

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

.hero-buttons{

  display:flex;

  gap:24px;

  align-items:center;


}


.hero-buttons a{

  text-decoration:none;

  transition:.35s ease;

}


/* =======================
   Botón principal
======================= */

.btn-primary{

  background:#0E2A47;

  color:#FFFFFF;

  padding:16px 34px;

  border-radius:40px;

  font-weight:600;

  font-size:16px;

  box-shadow:0 12px 30px rgba(14,42,71,.25);

}


.btn-primary:hover{

  background:#143A61;

  transform:translateY(-3px);

  box-shadow:0 18px 36px rgba(14,42,71,.30);

}


/* =======================
   Botón secundario
======================= */

.btn-secondary{

  color: #FFFFFF;

  padding: 15px 34px;

  border-radius: 40px;

  border: 1.8px solid rgba(255,255,255,.85);

  background: transparent;

  backdrop-filter: blur(6px);

  font-weight: 600;

  font-size: 16px;

  transition: all .35s ease;

}

.btn-secondary:hover{

  background: rgba(255,255,255,.12);

  border-color: rgba(255,255,255,.95);

  color: #FFFFFF;

  transform: translateY(-2px);

  box-shadow: 0 10px 24px rgba(0,0,0,.18);

}


/* ==========================================================
   MICROANIMACIÓN
========================================================== */

.hero-content{

  animation:heroFade .9s ease;

}


@keyframes heroFade{

  from{

    opacity:0;

    transform:translateY(25px);

  }

  to{

    opacity:1;

    transform:translateY(0);

  }

}

/* ==========================================================
   ¿POR QUÉ CONFIAR EN VIBALCA? (Sección General)
========================================================== */
.trust-section {
  padding:80px 0 90px;
  /* Transición fluida para mitigar el golpe visual desde la imagen del Hero.
     Tu variable --gris se funde suavemente hacia el fondo antes de llegar al blanco */
  background: linear-gradient(180deg, var(--gris) 0%, #F1F3F5 50%, var(--blanco) 100%);
}

.trust-container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.trust-title{

  text-align:center;

  margin-bottom:90px;

}

.trust-title h2{

  font-size:42px;

  font-weight:700;

  color:var(--azul);

  letter-spacing:-0.8px;

}


/*==========================================================
  TEXTO INFERIOR
==========================================================*/

.trust-header{

  text-align:center;

  margin-top:65px;

}

.trust-header p{

  max-width:760px;

  margin:0 auto;

  text-align:center;

  font-size:17px;

  line-height:1.8;

  color:#5F6B76;

}

/* ==========================================================
   GRID DE TARJETAS
========================================================== */
.trust-grid{

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:28px;

  align-items:start;

  position:relative;

  margin-top:-35px;

  z-index:10;

}

/* ==========================================================
   TARJETA (Estructura y Fondo Mejorado)
========================================================== */
.trust-card{

  height:280px;

  perspective:1200px;

}

.trust-card-inner{

  position:relative;

  width:100%;

  height:100%;

  transition:.9s cubic-bezier(.22,.61,.36,1);

  transform-style:preserve-3d;

}

/* ==========================================================
   CÍRCULO DEL ICONO (Paleta Oficial de Vibalca)
========================================================== */
.trust-icon{

  width:70px;

  height:70px;

  border-radius:50%;

  background:rgba(14,42,71,.06);

  margin-bottom:40px;

  display:flex;

  justify-content:center;

  align-items:center;

  transition:
    background .35s ease,
    transform .35s ease;

}

/* El trazo por defecto del SVG toma tu azul oscuro corporativo */
.trust-icon .svg-icon{

  width:32px;

  height:32px;

  stroke:var(--azul);

  transition:stroke .35s ease;

}

/* ==========================================================
   TEXTOS POR DEFECTO
========================================================== */
.trust-card h3{

  font-size:24px;

  font-weight:700;

  color:var(--azul);

  line-height:1.2;

  letter-spacing:-0.6px;

  margin-bottom:12px;

}

.trust-short{

  font-size:14px;

  font-weight:600;

  line-height:1.55;

  letter-spacing:.3px;

  color:#5C6773;

}

/* ==========================================================
   INFORMACIÓN EXTRA (Efecto Acordeón Dinámico Garantizado)
========================================================== */

.trust-face{

  position:absolute;

  inset:0;

  background:#F8F9FA;

  border:1px solid var(--gris);

  border-radius:22px;

  padding:28px 24px;

  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:center;

  text-align:center;

  backface-visibility:hidden;

  overflow:hidden;

  box-shadow:0 4px 12px rgba(14,42,71,.03);

}

.trust-back{

  transform:rotateY(180deg);

  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:center;

}


.trust-back span{

  display:block;

  width:42px;

  height:2px;

  background:var(--verde);

  border-radius:50px;

  margin-top:24px;

  flex-shrink:0;

  transform:translateY(-8px);

}

.trust-back p{

  max-width:195px;

  font-size:15px;

  line-height:1.9;

  color:#495057;

  text-align:center;

  margin:0;

}

/* ==========================================================
   HOVER PARA EL GIRO 360 DE LAS TARJETAS
========================================================== */

.trust-card:hover .trust-card-inner{

  transform:rotateY(180deg);

}

.trust-card:hover .trust-icon{

  background:var(--azul);

  transform:scale(1.06);

}




.trust-card:hover .trust-face{

  box-shadow:0 20px 45px rgba(14,42,71,.12);

}

/* Al pasar el cursor: El icono se invierte a colores sólidos */
.trust-card:hover .trust-icon {
  background: var(--azul); /* El círculo se inunda de azul marino */
}

.trust-card:hover .svg-icon {
  stroke: var(--blanco); /* El vector pasa a blanco puro para un perfecto contraste */
}

/* ==========================================================
   SOLUCIONES PARA CADA NECESIDAD
========================================================== */

.solutions-section{

  padding:120px 0;

  background:#F5F7F8;

}

.solutions-container{

  width:90%;

  max-width:1280px;

  margin:0 auto;

}


/*==========================================================
  CABECERA
==========================================================*/

.solutions-header{

  max-width:760px;

  margin:0 auto 70px;

  text-align:center;

}

.solutions-header h2{

  font-size:44px;

  color:var(--azul);

  font-weight:700;

  letter-spacing:-.6px;

  margin-bottom:18px;

}

.solutions-header p{

  font-size:18px;

  line-height:1.9;

  color:#5F6B76;

}


/*==========================================================
  CONTENEDOR PRINCIPAL
==========================================================*/

.solutions-slider{

  position:relative;

}

.slides-wrapper{

  position:relative;

  overflow:hidden;

  border-radius:32px;

  box-shadow:0 25px 60px rgba(14,42,71,.08);

}

.slides-track{

  display:flex;

  width:100%;

  transition:transform .65s cubic-bezier(.77,0,.18,1);

}


/*==========================================================
  SLIDE
==========================================================*/

.solution-slide{

  position: relative;

  flex: 0 0 100%;

  height: 560px;

  border-radius: 32px;

  overflow: hidden;

  display: flex;

  align-items: center;

}


/*==========================================================
  IMAGEN
==========================================================*/

.solution-image{

  position:absolute;

  inset:0;

  width:100%;

  height:100%;

}

.solution-image img{
  width:100%;

  height:100%;

  object-fit:cover;

  object-position:center;

  display:block;

  transition:transform .8s ease;

}

.solution-slide:hover .solution-image img{

  transform:scale(1.03);

}


/*==========================================================
  TEXTO
==========================================================*/

.solution-info{

  position:absolute;

  right:55px;

  top:50%;

  transform:translateY(-50%);

  width:430px;

  padding:48px;

  border-radius:30px;

  background:rgba(255,255,255,.72);

  backdrop-filter:blur(14px);

  -webkit-backdrop-filter:blur(14px);

  border:1px solid rgba(255,255,255,.45);

  box-shadow:
    0 22px 55px rgba(15,33,60,.12),
    0 8px 18px rgba(15,33,60,.05);

  overflow:hidden;

}

.solution-category{

  display:block;

  font-size:12px;

  letter-spacing:3px;

  font-weight:700;

  color:var(--celeste);

  margin-bottom:12px;

}

.solution-info h3{

  font-size:34px;

  line-height:1.05;

  color:var(--azul);

  letter-spacing:-1px;

  margin-bottom:18px;

  font-weight:700;

}

.solution-info p{

  font-size:16px;

  line-height:1.75;

  color:#5F6B76;

  margin-bottom:24px;

}


/*==========================================================
  BENEFICIOS
==========================================================*/

.solution-info ul{

  list-style:none;

  padding:0;

  margin:0 0 28px;

}

.solution-info li{

  display:flex;

  align-items:flex-start;

  gap:14px;

  line-height:1.5;

  margin-bottom:14px;

  font-size:15px;

  color:#495057;

}

.solution-info li::before{

  content:"✓";

  width:24px;
  height:24px;

  min-width:24px;
  min-height:24px;

  border-radius:50%;

  display:flex;

  align-items:center;
  justify-content:center;

  background:var(--verde);

  color:#fff;

  font-size:12px;

  font-weight:700;

  flex:0 0 24px;

}


/*==========================================================
  LINK
==========================================================*/

.solution-link{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:15px 30px;

  border-radius:999px;

  background:var(--azul);

  color:#fff;

  text-decoration:none;

  font-weight:600;

  box-shadow:0 10px 24px rgba(14,42,71,.18);

  transition:all .3s ease;

}

.solution-link:hover{

  transform:translateY(-3px);

  box-shadow:0 18px 38px rgba(14,42,71,.25);

}

/*==========================================================
  FLECHAS
==========================================================*/

.slider-arrow{

  position:absolute;

  top:50%;

  transform:translateY(-50%);

  width:52px;

  height:52px;

  border:none;

  border-radius:50%;

  background:#FFFFFF;

  color:var(--azul);

  font-size:20px;

  cursor:pointer;

  box-shadow:0 10px 30px rgba(14,42,71,.10);

  transition:.3s ease;

  z-index:20;

}

.slider-arrow:hover{

  background:var(--azul);

  color:#FFFFFF;

}

.prev{

  left:-26px;

}

.next{

  right:-26px;

}


/*==========================================================
  INDICADORES
==========================================================*/

.slider-dots{

  display:flex;

  justify-content:center;

  align-items:center;

  gap:12px;

  margin-top:35px;

}

.dot{

  width:9px;

  height:9px;

  border-radius:50%;

  background:#C8CED4;

  transition:.35s ease;

}

.dot.active{

  width:46px;

  border-radius:50px;

  background:var(--azul);

}

/* ==========================================================
   CTA FINAL
========================================================== */

.cta-section{

  position:relative;

  min-height:700px;

  display:flex;

  justify-content:center;

  align-items:center;

  overflow:hidden;

  background-image:url("../img/laboratorio.webp");

  background-size:cover;

  background-position:center;

  background-repeat:no-repeat;

}

.cta-overlay{

  position:absolute;

  inset:0;

  background:rgba(10,32,55,.60);

}

.cta-container{

  position:relative;

  z-index:2;

  width:90%;

  max-width:900px;

  text-align:center;

  color:#FFFFFF;

}

.cta-container h2{

  font-size:56px;

  line-height:1.15;

  font-weight:700;

  margin-bottom:34px;

}
.cta-container h2 span{

  color:var(--celeste);

}

.cta-container p{

  max-width:760px;

  margin:0 auto;

  font-size:21px;

  line-height:1.9;

  color:rgba(255,255,255,.90);

}

.cta-buttons{

  margin-top:50px;

  display:flex;

  justify-content:center;

  gap:22px;

}

.btn-primary{

  padding:18px 38px;

  background:var(--azul);

  color:#FFF;

  border-radius:999px;

  text-decoration:none;

  font-weight:600;

  transition:.35s;

}

.btn-primary:hover{

  background:#123B61;

  transform:translateY(-3px);

}

.btn-secondary{

  padding:18px 38px;

  border:2px solid #FFF;

  color:#FFF;

  border-radius:999px;

  text-decoration:none;

  font-weight:600;

  transition:.35s;

}

.btn-secondary:hover{

  background:#FFF;

  color:var(--azul);

}

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

.footer{

  background:#10263F;

  color:#FFFFFF;

  margin-top:120px;

}


/*==========================================================
  LÍNEA SUPERIOR
==========================================================*/

.footer-top-line{

  width:100%;

  height:4px;

  background:var(--verde);

}


/*==========================================================
  CONTENEDOR
==========================================================*/

.footer-container{

  width:90%;

  max-width:1280px;

  margin:0 auto;

  padding:80px 0;

  display:grid;

  grid-template-columns:1.4fr 1fr 1fr;

  gap:80px;

  align-items:flex-start;

}


/*==========================================================
  COLUMNAS
==========================================================*/

.footer-column h4{

  font-size:22px;

  margin-bottom:28px;

  color:#FFFFFF;

  font-weight:600;

}


/*==========================================================
  LOGO
==========================================================*/

.footer-logo{

  width:190px;

  margin-bottom:35px;

  display:block;

}


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

.footer{

  background:#10263F;

  color:#FFF;

  margin-top:90px;

}


/*==========================================================
CONTENEDOR
==========================================================*/

.footer-container{

  width:min(92%,1280px);

  margin:auto;

  padding:60px 0;

  display:grid;

  grid-template-columns:2fr 1fr 1.35fr;

  column-gap:80px;

  align-items:start;

}

.footer-column{

  display:flex;

  flex-direction:column;


}


/*==========================================================
LOGO
==========================================================*/

.footer-logo{

  width:185px;

  margin-bottom:24px;

}

.footer-column:last-child{
  padding-top:30px;
}


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

.footer-contact{

  list-style:none;

  padding:0;

  margin:0;

}

.footer-contact li{

  display:flex;

  align-items:flex-start;

  gap:14px;

  margin-bottom:18px;

  line-height:1.65;

}

.footer-contact i{

  width:18px;

  color:rgba(255,255,255,.80);

  margin-top:5px;

  transition:.35s;

}

.footer-contact li:hover i{

  color:var(--celeste);

}

.footer-contact a{

  color:rgba(255,255,255,.78);

  text-decoration:none;

  transition:.3s;

}

.footer-contact a:hover{

  color:#FFF;

}


/*==========================================================
SOCIAL
==========================================================*/

.footer-social{

  display:flex;

  align-items:center;

  gap:14px;

  margin-top:18px;

}

.footer-social a{

  width:42px;

  height:42px;

  display:flex;

  justify-content:center;

  align-items:center;

  border-radius:50%;

  border:1px solid rgba(255,255,255,.12);

  color:#FFF;

  text-decoration:none;

  transition:.35s;

}

.footer-social a:hover{

  background:var(--verde);

  border-color:var(--verde);

  transform:translateY(-3px);

}


/*==========================================================
HORARIO
==========================================================*/

.footer-hours{

  padding-top:50px;

}

.footer-hours h4{


  margin:0 0 28px;

  font-size:24px;

  font-weight:700;

}

.hours-item:first-of-type{
  margin-top:10px;
}

.hours-item{

  margin-bottom:22px;

}

.hours-item:last-child{

  margin-bottom:0;

}

.hours-item span{

  display:block;

  color:rgba(255,255,255,.60);

  margin-bottom:6px;

  font-size:14px;

}

.hours-item strong{

  font-weight:500;

  font-size:16px;

}


/*==========================================================
LIBRO
==========================================================*/

.claims-card{

  margin-top:6px;

  background:rgba(255,255,255,.05);

  border:1px solid rgba(255,255,255,.08);

  border-radius:22px;

  padding:30px;

  transition:.35s;

}

.claims-card:hover{

  transform:translateY(-6px);

  background:rgba(255,255,255,.08);

}

.claims-label{

  display:block;

  font-size:22px;

  font-weight:700;

  margin-bottom:16px;

}

.claims-card p{

  color:rgba(255,255,255,.70);

  line-height:1.8;

  margin-bottom:28px;

}


/*==========================================================
BOTON
==========================================================*/

.claims-button{

  display:inline-flex;

  align-items:center;

  gap:10px;

  padding:14px 26px;

  border-radius:50px;

  text-decoration:none;

  color:#10263F;

  background:#FFF;

  font-weight:600;

  transition:.35s;

}

.claims-button:hover{

  background:var(--celeste);

  color:#FFF;

}


/*==========================================================
BOTTOM
==========================================================*/

.footer-bottom{

  border-top:1px solid rgba(255,255,255,.08);

}

.footer-bottom-container{

  width:min(92%,1280px);

  margin:auto;

  padding:24px 0;

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:30px;

}

.footer-bottom span{

  color:rgba(255,255,255,.55);

}

.footer-bottom-links{

  display:flex;

  align-items:center;

  gap:30px;

  flex-wrap:wrap;

}

.footer-bottom-links a{

  color:rgba(255,255,255,.60);

  text-decoration:none;

  transition:.3s;

}

.footer-bottom-links a:hover{

  color:#FFF;

}

.developer-link strong{

  color:var(--celeste);

}

.developer-link:hover strong{

  color:#FFF;

}


/*==========================================================
RESPONSIVE
==========================================================*/

@media(max-width:960px){

  .footer-container{

    grid-template-columns:1fr;

    gap:45px;

  }

  .footer-bottom-container{

    flex-direction:column;

    gap:18px;

    text-align:center;

  }

  .footer-bottom-links{

    flex-wrap:wrap;

    justify-content:center;

  }

}

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

.about-hero{

  position:relative;

  width:100%;

  height:82vh;

  min-height:680px;

  overflow:hidden;

}


/*==========================================================
IMAGEN
==========================================================*/

.about-hero-image{

  position:absolute;

  inset:0;

  width:100%;

  height:100%;

  object-fit:cover;

}


/*==========================================================
OVERLAY
==========================================================*/

.about-overlay{

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(16,38,63,.90) 0%,
      rgba(16,38,63,.78) 30%,
      rgba(16,38,63,.40) 58%,
      rgba(16,38,63,.05) 100%
    );

}


/*==========================================================
CONTENIDO
==========================================================*/

.about-content{

  position:relative;

  z-index:5;

  width:90%;

  max-width:1280px;

  height:100%;

  margin:auto;

  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:flex-start;

}


.about-label{

  display:inline-block;

  margin-bottom:22px;

  padding:10px 22px;

  border-radius:999px;

  background:rgba(255,255,255,.08);

  backdrop-filter:blur(10px);

  color:#FFF;

  letter-spacing:2px;

  font-size:13px;

  font-weight:700;

}


.about-content h1{

  max-width:650px;

  font-size:64px;

  line-height:1.05;

  color:#FFF;

  letter-spacing:-2px;

  margin-bottom:28px;

}


.about-content p{

  max-width:620px;

  font-size:20px;

  line-height:1.9;

  color:rgba(255,255,255,.82);

}

@media (max-width:992px){

  .about-hero{

    height:75vh;

    min-height:620px;

  }

  .about-content h1{

    font-size:48px;

  }

  .about-content p{

    font-size:18px;

  }

}

@media (max-width:768px){

  .about-content h1{

    font-size:38px;

  }

  .about-content p{

    font-size:17px;

    line-height:1.7;

  }

}


/*==========================================================
NUESTRA HISTORIA
==========================================================*/

.about-story{

  padding:120px 0;

  background:#FFFFFF;

}

.about-container{

  width:min(90%,1280px);

  margin:auto;

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:90px;

  align-items:center;

}

.section-label{

  display:inline-block;

  color:var(--celeste);

  font-size:13px;

  letter-spacing:3px;

  font-weight:700;

  margin-bottom:18px;

}

.story-content h2{

  font-size:48px;

  line-height:1.15;

  color:var(--azul);

  margin-bottom:30px;

  max-width:620px;

}

.story-content p{

  font-size:18px;

  line-height:1.9;

  color:#5F6B76;

  margin-bottom:24px;

}

.story-image{

  overflow:hidden;

  border-radius:28px;

  box-shadow:0 25px 60px rgba(15,40,70,.12);

}

.story-image img{

  width:100%;

  display:block;

  object-fit:cover;

  transition:.6s;

}

.story-image:hover img{

  transform:scale(1.05);

}

.story-stats{

  display:flex;

  gap:25px;

  margin-top:45px;

}

.stat{

  flex:1;

  background:#F6F8FA;

  padding:26px;

  border-radius:20px;

}

.stat span{

  display:block;

  font-size:30px;

  font-weight:700;

  color:var(--azul);

  margin-bottom:8px;

}

.stat small{

  color:#6E7985;

  font-size:15px;

}

@media(max-width:992px){

  .about-container{

    grid-template-columns:1fr;

    gap:50px;

  }

  .story-content h2{

    font-size:36px;

  }

  .story-stats{

    flex-direction:column;

  }

}

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

.commitment{
  padding: 120px 8%;
  background: #F7FAFD;
}

.commitment-container{

  max-width: 1400px;
  margin: auto;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;

  align-items: center;

}

.commitment-image img{

  width:100%;
  display:block;

  object-fit:cover;

  border-radius:26px;

  box-shadow:0 20px 50px rgba(0,0,0,.10);

  transition: transform .6s ease;

}

.commitment-image:hover img{

  transform: scale(1.05);

}

.commitment-content{

  display:flex;
  flex-direction:column;
  justify-content:center;

}

.commitment .section-label{

  display:inline-block;

  margin-bottom:18px;

  font-size:.88rem;
  font-weight:700;

  letter-spacing:4px;

  color:#0EA5FF;

  text-transform:uppercase;

}

.commitment h2{

  font-size:3.4rem;
  line-height:1.12;

  font-weight:700;

  color:#163153;

  margin-bottom:32px;

}

.commitment p{

  font-size:1.18rem;

  line-height:2;

  color:#5F6B7A;

  margin-bottom:45px;

}

.commitment-list{

  display:flex;
  flex-direction:column;

  gap:24px;

}

.commitment-item{

  display:flex;

  align-items:flex-start;

  gap:18px;

}

.commitment-item i{

  color:#0EA5FF;

  font-size:1.45rem;

  margin-top:4px;

  flex-shrink:0;

}

.commitment-item span{

  font-size:1.08rem;

  line-height:1.8;

  color:#163153;

  font-weight:500;

}


/*==========================
      RESPONSIVE
==========================*/

@media(max-width:992px){

  .commitment{

    padding:90px 8%;

  }

  .commitment-container{

    grid-template-columns:1fr;

    gap:55px;

  }

  .commitment h2{

    font-size:2.6rem;

  }

}

@media(max-width:768px){

  .commitment{

    padding:70px 7%;

  }

  .commitment h2{

    font-size:2.15rem;

  }

  .commitment p{

    font-size:1rem;

    line-height:1.8;

  }

}

.commitment-image{

  overflow: hidden;

  border-radius: 26px;

}

/*======================================
=            DIFERENCIA VIBALCA        =
======================================*/

.valores{
  padding:120px 0;
  background:#ffffff;
}

.valores-container{
  width:90%;
  max-width:1280px;
  margin:auto;
}

.valores-header{
  text-align:center;
  max-width:760px;
  margin:0 auto 80px;
}

.valores-subtitle{
  display:block;
  font-size:14px;
  font-weight:700;
  letter-spacing:4px;
  text-transform:uppercase;
  color:#1D9BF0;
  margin-bottom:18px;
}

.valores-title{
  font-size:56px;
  line-height:1.1;
  color:#0E2A47;
  font-weight:700;
  margin-bottom:22px;
}

.valores-description{
  font-size:21px;
  line-height:1.8;
  color:#5E6B7A;
}

/*======================
        GRID
=======================*/

.valores-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
}

/*======================
        CARD
=======================*/

.valor-card{

  background:#fff;

  border:1px solid #E8EDF3;

  border-radius:22px;

  padding:45px 35px;

  transition:.35s ease;

  text-align:center;

}

.valor-card:hover{

  transform:translateY(-8px);

  box-shadow:0 18px 45px rgba(13,42,71,.08);

  border-color:#D7E3EF;

}

/*======================
       ICONO
=======================*/

.valor-icon{

  width:78px;

  height:78px;

  margin:0 auto 28px;

  border-radius:50%;

  background:#F5F9FC;

  display:flex;

  align-items:center;

  justify-content:center;

  color:#123A66;

  font-size:34px;

  transition:.35s;

}

.valor-card:hover .valor-icon{

  background:#123A66;

  color:#fff;

  transform:scale(1.08);

}

/*======================
        TEXTO
=======================*/

.valor-title{

  font-size:28px;

  font-weight:700;

  color:#0E2A47;

  margin-bottom:18px;

}

.valor-text{

  font-size:18px;

  line-height:1.8;

  color:#667689;

}

/*======================
      RESPONSIVE
=======================*/

@media(max-width:1100px){

  .valores-grid{

    grid-template-columns:repeat(2,1fr);

  }

}

@media(max-width:768px){

  .valores{

    padding:80px 0;

  }

  .valores-title{

    font-size:40px;

  }

  .valores-description{

    font-size:18px;

  }

  .valores-grid{

    grid-template-columns:1fr;

    gap:25px;

  }

  .valor-card{

    padding:38px 28px;

  }

}

/*======================================
            VIBALCA EN CIFRAS
=======================================*/

.numbers{

  padding:130px 0;

  background:#F7FAFD;

}

.numbers-container{

  width:90%;

  max-width:1280px;

  margin:auto;

}

.numbers-header{

  max-width:760px;

  margin:auto;

  text-align:center;

  margin-bottom:90px;

}

.numbers-subtitle{

  display:block;

  font-size:14px;

  font-weight:700;

  letter-spacing:4px;

  text-transform:uppercase;

  color:#1D9BF0;

  margin-bottom:18px;

}

.numbers-title{

  font-size:56px;

  color:#0E2A47;

  line-height:1.1;

  margin-bottom:22px;

}

.numbers-description{

  font-size:20px;

  line-height:1.9;

  color:#6A7685;

}

/*==============================*/

.numbers-grid{

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:35px;

}

/*==============================*/

.number-card{

  background:#0E2A47;

  border-radius:28px;

  padding:65px 30px;

  text-align:center;

  transition:.45s ease;

  opacity:1;

  transform:translateY(0);

}

/* Animación */

.number-card.show{

  opacity:1;

  transform:translateY(0);

}

/* Hover */

.number-card:hover{

  transform:translateY(-10px);

  box-shadow:0 22px 55px rgba(14,42,71,.25);

}

/* Card central */

.featured{

  transform:translateY(-15px);

}

/*==============================*/

.number-card h3{

  font-size:88px;

  color:#ffffff;

  font-weight:700;

  margin-bottom:18px;

}

.number-card span{

  display:block;

  color:#ffffff;

  font-size:23px;

  font-weight:600;

}

.number-card small{

  display:block;

  margin-top:18px;

  color:rgba(255,255,255,.78);

  font-size:17px;

}

/*==============================*/

@media(max-width:992px){

  .numbers-grid{

    grid-template-columns:1fr;

  }

  .featured{

    transform:none;

  }

  .numbers-title{

    font-size:42px;

  }

  .number-card h3{

    font-size:70px;

  }

}

/*======================================
            NUESTRA ESENCIA
=======================================*/

.essence{

  padding:130px 0;

  background:#ffffff;

}

.essence-container{

  width:90%;

  max-width:1280px;

  margin:auto;

}

.essence-header{

  text-align:center;

  max-width:760px;

  margin:0 auto 90px;

}

.essence-subtitle{

  display:block;

  font-size:14px;

  font-weight:700;

  letter-spacing:4px;

  text-transform:uppercase;

  color:#1D9BF0;

  margin-bottom:18px;

}

.essence-title{

  font-size:54px;

  line-height:1.15;

  color:#0E2A47;

}

.essence-grid{

  display:grid;

  grid-template-columns:1fr auto 1fr;

  gap:60px;

  align-items:center;

}

.essence-divider{

  width:1px;

  height:260px;

  background:#E3EAF2;

}

.essence-item{

  text-align:left;

}

.essence-item h3{

  font-size:34px;

  color:#0E2A47;

  margin-bottom:28px;

  font-weight:700;

}

.essence-item p{

  font-size:19px;

  line-height:2;

  color:#647282;

}

/*==============================
        RESPONSIVE
==============================*/

@media(max-width:992px){

  .essence{

    padding:90px 0;

  }

  .essence-grid{

    grid-template-columns:1fr;

    gap:60px;

  }

  .essence-divider{

    display:none;

  }

  .essence-title{

    font-size:40px;

  }

  .essence-item{

    text-align:center;

  }

  .essence-item h3{

    font-size:30px;

  }

}

/*==========================================================
PÁGINAS LEGALES — HERO
==========================================================*/

.legal-hero{
  position:relative;
  padding:170px 7% 80px;
  text-align:center;
  background:linear-gradient(135deg,#0E2A47 0%,#08A9E8 130%);
  color:#FFFFFF;
}

.legal-hero-content span{
  display:block;
  margin-bottom:14px;
  color:#70D3F5;
  font-size:11px;
  font-weight:700;
  letter-spacing:4px;
}

.legal-hero-content h1{
  margin:0 0 14px;
  font-size:clamp(36px,5vw,56px);
  font-weight:700;
  letter-spacing:-1.5px;
}

.legal-hero-content p{
  margin:0 auto;
  max-width:600px;
  color:rgba(255,255,255,.9);
  font-size:16px;
  line-height:1.6;
}


/*==========================================================
CONTENIDO LEGAL
==========================================================*/

.legal-content{
  padding:70px 7% 110px;
  background:#F8FAFC;
}

.legal-content-inner{
  max-width:820px;
  margin:auto;
}

.legal-updated{
  margin-bottom:40px;
  color:#8A98A5;
  font-size:13px;
  font-style:italic;
}

.legal-block{
  margin-bottom:34px;
}

.legal-block h2{
  margin:0 0 12px;
  color:#0E2A47;
  font-size:22px;
  letter-spacing:-.5px;
}

.legal-block p,
.legal-block li{
  color:#6E7F90;
  font-size:15px;
  line-height:1.75;
}

.legal-block ul{
  margin:10px 0;
  padding-left:20px;
}

.legal-block a{
  color:#08A9E8;
  font-weight:600;
  text-decoration:none;
}

.legal-highlight{
  display:flex;
  gap:18px;
  align-items:flex-start;
  margin-top:18px;
  padding:24px;
  border-radius:16px;
  background:#EEF6FA;
  border:1px solid rgba(8,169,232,.15);
}

.legal-highlight i{
  flex-shrink:0;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#25D366;
  color:#FFFFFF;
  font-size:20px;
}

.legal-highlight strong{
  display:block;
  margin-bottom:6px;
  color:#0E2A47;
  font-size:15px;
}

.legal-whatsapp-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  padding:10px 20px;
  border-radius:30px;
  background:#25D366;
  color:#FFFFFF !important;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
}


/*==========================================================
AVISO INFORMATIVO
==========================================================*/

.reclamo-aviso{
  display:flex;
  gap:18px;
  align-items:flex-start;
  padding:24px;
  margin-bottom:30px;
  border-radius:18px;
  background:#EEF6FA;
  border:1px solid rgba(8,169,232,.18);
}

.reclamo-aviso-icon{
  flex-shrink:0;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#08A9E8;
  color:#FFFFFF;
  font-size:18px;
}

.reclamo-aviso strong{
  display:block;
  margin-bottom:6px;
  color:#0E2A47;
  font-size:15px;
}

.reclamo-aviso p{
  margin:0;
  color:#6E7F90;
  font-size:14px;
  line-height:1.7;
}


/*==========================================================
TIPOS: RECLAMO / QUEJA
==========================================================*/

.reclamo-tipos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;
  margin-bottom:40px;
}

.reclamo-tipo-card{
  padding:24px;
  border-radius:18px;
  background:#FFFFFF;
  border:1px solid #EEF2F6;
  box-shadow:0 8px 25px rgba(15,42,71,.05);
}

.reclamo-tipo-card h3{
  margin:0 0 8px;
  color:#0E2A47;
  font-size:18px;
  font-weight:700;
}

.reclamo-tipo-card p{
  margin:0;
  color:#8A98A5;
  font-size:14px;
  line-height:1.65;
}


/*==========================================================
FORMULARIO DE RECLAMOS
==========================================================*/

.reclamo-form{
  padding:40px;
  border-radius:24px;
  background:#FFFFFF;
  box-shadow:0 12px 40px rgba(15,42,71,.07);
}

.reclamo-seccion{
  margin-bottom:38px;
  padding-bottom:30px;
  border-bottom:1px solid #F1F4F7;
}

.reclamo-seccion:last-of-type{
  border-bottom:none;
  padding-bottom:10px;
  margin-bottom:10px;
}

.reclamo-seccion-header{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:24px;
}

.reclamo-num{
  flex-shrink:0;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#0E2A47;
  color:#FFFFFF;
  font-size:14px;
  font-weight:700;
}

.reclamo-seccion-header h2{
  margin:0;
  color:#0E2A47;
  font-size:19px;
  font-weight:700;
  letter-spacing:-.3px;
}


/* --- Campos --- */

.reclamo-form .form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.reclamo-form .form-group{
  display:flex;
  flex-direction:column;
  margin-bottom:18px;
}

.reclamo-form label{
  margin-bottom:8px;
  color:#0E2A47;
  font-size:14px;
  font-weight:600;
}

.reclamo-form label span{
  color:#A3AFBB;
  font-weight:400;
}

.reclamo-form input[type="text"],
.reclamo-form input[type="email"],
.reclamo-form input[type="tel"],
.reclamo-form select,
.reclamo-form textarea{
  width:100%;
  padding:14px 16px;
  border:1px solid #E5EAF0;
  border-radius:12px;
  background:#FBFCFD;
  color:#0E2A47;
  font-family:inherit;
  font-size:15px;
  outline:none;
  transition:.3s;
}

.reclamo-form input:focus,
.reclamo-form select:focus,
.reclamo-form textarea:focus{
  border-color:#08A9E8;
  background:#FFFFFF;
  box-shadow:0 0 0 4px rgba(8,169,232,.08);
}

.reclamo-form textarea{
  resize:vertical;
  line-height:1.6;
}

.reclamo-form ::placeholder{
  color:#B4BEC8;
}


/* --- Checkbox --- */

.form-group-check{
  margin-bottom:24px;
}

.check-label{
  display:flex !important;
  align-items:flex-start;
  gap:12px;
  font-weight:400 !important;
  cursor:pointer;
}

.check-label input[type="checkbox"]{
  flex-shrink:0;
  width:18px;
  height:18px;
  margin-top:2px;
  accent-color:#08A9E8;
  cursor:pointer;
}

.check-label span{
  color:#6E7F90 !important;
  font-size:14px;
  line-height:1.6;
}

.check-label a{
  color:#08A9E8;
  font-weight:600;
  text-decoration:none;
}


/* --- Botón --- */

.reclamo-submit{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:16px 34px;
  border:none;
  border-radius:30px;
  background:#0E2A47;
  color:#FFFFFF;
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:.3s;
}

.reclamo-submit:hover{
  background:#08A9E8;
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(8,169,232,.28);
}

.reclamo-submit i{
  transition:.3s;
}

.reclamo-submit:hover i{
  transform:translateX(5px);
}


/*==========================================================
NOTA FINAL
==========================================================*/

.reclamo-nota{
  margin-top:26px;
  color:#8A98A5;
  font-size:14px;
  line-height:1.7;
  text-align:center;
}

.reclamo-nota a{
  color:#08A9E8;
  font-weight:600;
  text-decoration:none;
}


/*==========================================================
RESPONSIVE LEGAL
==========================================================*/

@media(max-width:768px){

  .reclamo-form{
    padding:26px 22px;
  }

  .reclamo-form .form-row{
    grid-template-columns:1fr;
    gap:0;
  }

  .legal-hero{
    padding:140px 7% 60px;
  }

}

/*==========================================================
VALIDACIÓN DE FORMULARIO — ESTADOS DE ERROR
==========================================================*/

.reclamo-form .input-error,
.contact-form .input-error{
  border-color:#E05A5A !important;
  background:#FEF7F7 !important;
}

.reclamo-form .input-error:focus,
.contact-form .input-error:focus{
  box-shadow:0 0 0 4px rgba(224,90,90,.1) !important;
}

.error-msg{
  display:none;
  margin-top:7px;
  color:#E05A5A;
  font-size:13px;
  line-height:1.4;
}

.reclamo-form input:disabled{
  background:#F4F6F8;
  color:#A3AFBB;
  cursor:not-allowed;
}


/*==========================================================
BANNER DE COOKIES
==========================================================*/

.cookie-banner{
  position:fixed;
  left:0;
  right:0;
  bottom:-160px;
  z-index:9999;
  background:var(--azul);
  box-shadow:0 -10px 40px rgba(14,42,71,.25);
  opacity:0;
  transition:bottom .45s cubic-bezier(.22,.61,.36,1), opacity .35s ease;
}

.cookie-banner-show{
  bottom:0;
  opacity:1;
}

.cookie-banner-hide{
  bottom:-160px;
  opacity:0;
}

.cookie-banner-inner{
  width:90%;
  max-width:1200px;
  margin:auto;
  padding:22px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  flex-wrap:wrap;
}

.cookie-banner-text{
  display:flex;
  align-items:flex-start;
  gap:14px;
  flex:1;
  min-width:260px;
}

.cookie-banner-text i{
  flex-shrink:0;
  margin-top:3px;
  font-size:20px;
  color:var(--celeste);
}

.cookie-banner-text p{
  margin:0;
  font-size:14px;
  line-height:1.65;
  color:rgba(255,255,255,.9);
}

.cookie-banner-text a{
  color:#FFFFFF;
  font-weight:600;
  text-decoration:underline;
}

.cookie-banner-actions{
  display:flex;
  gap:12px;
  flex-shrink:0;
}

.cookie-btn-reject,
.cookie-btn-accept{
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  border-radius:30px;
  transition:.3s ease;
  white-space:nowrap;
}

.cookie-btn-reject{
  padding:11px 22px;
  border:1.5px solid rgba(255,255,255,.6);
  background:transparent;
  color:#FFFFFF;
}

.cookie-btn-reject:hover{
  background:rgba(255,255,255,.1);
}

.cookie-btn-accept{
  padding:11px 26px;
  border:none;
  background:var(--celeste);
  color:#FFFFFF;
}

.cookie-btn-accept:hover{
  background:#0693C7;
  transform:translateY(-2px);
}

@media(max-width:640px){

  .cookie-banner-inner{
    flex-direction:column;
    align-items:stretch;
    text-align:left;
    padding:20px 0;
  }

  .cookie-banner-actions{
    justify-content:flex-end;
  }

}


/*==========================================================
MAPA BLOQUEADO (hasta aceptar cookies)
==========================================================*/

.map-locked-message{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:#F1F4F7;
  text-align:center;
  padding:30px;
  z-index:2;
}

.map-locked-message i{
  font-size:30px;
  color:var(--celeste);
}

.map-locked-message p{
  max-width:320px;
  color:#5F6B76;
  font-size:14px;
  line-height:1.6;
  margin:0;
}

.map-locked-message button{
  padding:10px 22px;
  border:none;
  border-radius:30px;
  background:var(--azul);
  color:#FFFFFF;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:.3s ease;
}

.map-locked-message button:hover{
  background:var(--celeste);
}


/*==========================================================
BOTÓN "CÓMO LLEGAR DESDE TU UBICACIÓN"
==========================================================*/

.contact-map-button-outline{
  position:absolute;
  left:22px;
  bottom:22px;
  right:auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  border-radius:25px;
  border:1.5px solid #FFFFFF;
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(6px);
  color:#FFFFFF;
  font-family:inherit;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:background .3s ease, transform .3s ease;
  z-index:3;
}

.contact-map-button-outline:hover{
  background:rgba(255,255,255,.25);
  transform:translateY(-2px);
}

.contact-map-button-outline:disabled{
  opacity:.6;
  cursor:wait;
  transform:none;
}

@media(max-width:600px){

  .contact-map-button-outline{
    left:14px;
    bottom:14px;
    font-size:11px;
    padding:10px 14px;
  }

}