/* --------------------------------------------------
   1) Franja superior azul (top-bar)
   -------------------------------------------------- */
   .top-bar {
    width: 100%;
    height: 20px;               /* Grosor de la franja */
    background-color: #002147; /* Azul oscuro tal cual en tu imagen */
  }
  
  /* --------------------------------------------------
     2) Header principal
     -------------------------------------------------- */
  .main-header {
    position: relative;   
    background-color: #ADA7A7; /* Color gris medio */
    height: 80px;              /* Ajusta a la altura deseada */
  }
  
  /* Logo a la izquierda */
  .main-header .logo {
    position: absolute;
    left: 5%;                  /* Ajusta al margen que prefieras */
    top: 50%;
    transform: translateY(-50%);
  }
  .main-header .logo img {
    max-height: 60px;          /* Ajusta según tu imagen */
  }
  
  /* Botón hamburguesa a la derecha */
  .main-header .hamburger {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    display: block;            /* Visible en móvil, ocultar más adelante en desktop */
  }
  .main-header .hamburger-bar {
    width: 25px;
    height: 3px;
    margin: 4px 0;
    background-color: #333;    /* Barras oscuras */
  }
  
  /* Menú centrado */
  .nav-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .nav-menu {
    display: flex;
    list-style: none;
    gap: 40px;                 /* Espacio entre cada ítem */
  }
  .nav-menu a {
    text-decoration: none;
    color: #4f4f4f;            /* Gris oscuro para los links */
    font-weight: 600;
    padding: 8px 0;            /* Click area vertical */
    transition: color 0.2s;
  }
  .nav-menu a:hover {
    color: #000;               /* Un tono más oscuro al pasar el cursor */
  }
  
  /* --------------------------------------------------
     3) Responsividad
     -------------------------------------------------- */
  /* Desktop: ocultamos hamburguesa, mostramos nav */
  @media (min-width: 768px) {
    .main-header .hamburger {
      display: none;
    }
  }
  /* Móvil: ocultamos nav, mostramos hamburguesa */
  @media (max-width: 767px) {
    .nav-menu {
      display: none;           /* Mostrar con JS al pulsar hamburguesa */
      flex-direction: column;
      background-color: #ADA7A7;
      position: absolute;
      top: 100%;
      right: 5%;
      border-radius: 4px;
      padding: 10px;
     animation: fadeIn 0.3s ease-in-out;
    }
  }
  
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
  }


/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: Arial, Helvetica, sans-serif;
    color: #333;
    line-height: 1.6;
  }
  
  /* Header */
  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 5%;
    background-color: #ADA7A7;
    position: relative;
  }
  
  /* Logo 
  .logo img {
    max-height: px;
  }
  */
  
  /* Botón de menú hamburguesa (visible en móviles) */
  .hamburger {
    background: none;
    border: none;
    display: inline-block;
    cursor: pointer;
  }
  .hamburger .hamburger-bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 4px;
    background-color: #333;
  }
  
  /* Menú de navegación (inicialmente oculto en móviles) */
  .nav-menu {
    list-style: none;
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px;
    right: 5%;
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 4px;
  }
  .nav-menu li {
    margin: 5px 0;
  }
  .nav-menu li a {
    text-decoration: none;
    color: #333;
    font-weight: 600;
    padding: 5px 10px;
    display: block;
  }
  .nav-menu li a:hover {
    color: #007bff;
  }
  
  /* Sección Hero */
  .hero {
    background: url('../images/fondo-hero.jpg') center/cover no-repeat;
    height: 500px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
  }
  .hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
  }
  .hero-content {
    position: relative;
    z-index: 1;
  }
  .hero-content h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
  }
  .hero-content h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
  }
  .btn {
    display: inline-block;
    background-color: #002147;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: background-color 0.3s ease;
  }
  .btn:hover {
    background-color: #003366;
  }

  /* --------------------------------------------------
   Slider Hero
   -------------------------------------------------- */
/* Slider full-width */
.slider {
  position: relative;
  width: 100vw;
  height: 600px;             /* Ajusta según tu diseño */
  left: 50%;
  margin-left: -50vw;        /* “rompe” contenedores padres */
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

.slide.active {
  opacity: 1;
}

.slide-content {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  z-index: 2;
}

.slide-content h1 {
  font-size: 3rem;
  color: #fdfdfd;
  margin-bottom: 8px;
}

.slide-content h2 {
  font-size: 1.8rem;
  color: #e4e7eb;
  margin-bottom: 16px;
}

.slide-content .btn {
  background-color: #002147;
  color: #fff;
  padding: 10px 24px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
}

/* Flechas */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.7);
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  transition: background 0.2s;
}

.slider-btn:hover {
  background: rgba(255,255,255,0.9);
}

.slider-btn.prev {
  left: 20px;
}

.slider-btn.next {
  right: 20px;
}

/* Capa oscura sobre cada slide */
.slide::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* ajusta la opacidad al gusto */
  z-index: 1;
  transition: background-color 0.6s ease-in-out;
}

/* Asegúrate de que el contenido del slide quede por encima */
.slide-content {
  position: relative;
  z-index: 2;
}






/* Responsive: altura menor en móviles */
@media (max-width: 768px) {
  .slider {
    height: 400px;
  }
  .slide-content h1 {
    font-size: 2.2rem;
  }
  .slide-content h2 {
    font-size: 1.4rem;
  }
}


  
  /* Sección ¿Quiénes somos? */
  .quienes-somos {
    padding: 40px 5%;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
  }
  .quienes-somos-logo {
    max-width: 80px;
    margin-bottom: 20px;
  }
  .quienes-somos h2 {
    font-size: 2rem;
    margin-bottom: 20px;
  }
  .quienes-somos p {
    max-width: 800px;
    margin: 0 auto 40px;
    font-size: 1rem;
    text-align: justify;
  }
  .qs-row {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
    justify-content: center;
  }
  .qs-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .qs-item img {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 8px;
    margin-bottom: 10px;
  }
  .btn-contratar {
    display: inline-block;
    background-color: #002147;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: background-color 0.3s ease;
  }
  .btn-contratar:hover {
    background-color: #003366;
  }
  
  /* liston */
  liston {
    background-color: #002147;
    color: #fff;
    padding: 10px 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
  }
  .liston-left,
  .liston-right {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .liston-left p,
  .liston-right a {
    font-size: 0.9rem;
  }
  .liston-left p strong {
    margin-right: 5px;
  }
  .social-icons a img {
    width: 24px;
    height: 24px;
    transition: opacity 0.3s ease;
  }
  .social-icons a img:hover {
    opacity: 0.7;
  }
  
  /* Media Queries para pantallas más grandes */
  @media (min-width: 768px) {
    /* Ocultamos el botón de hamburguesa y mostramos el menú en línea */
    .hamburger {
      display: none;
    }
    .nav-menu {
      display: flex;
      position: static;
      flex-direction: row;
      border: none;
      background: none;
      padding: 0;
    }
    .nav-menu li {
      margin: 0 10px;
    }
    /* Sección Hero: ajustes de tamaño */
    .hero {
      height: 500px;
    }
    .hero-content h1 {
      font-size: 3rem;
    }
    .hero-content h2 {
      font-size: 1.5rem;
    }
    /* En la sección ¿Quiénes somos? se muestran los items en fila */
    .qs-row {
      flex-direction: row;
      justify-content: space-between;
    }
  }
  
  @media (min-width: 1024px) {
    .hero {
      height: 600px;
    }
    .hero-content h1 {
      font-size: 3.5rem;
    }
    .hero-content h2 {
      font-size: 2rem;
    }
  }


  /*****************************************************
 * Sección: Problemas con la Contabilidad e Impuestos
 *****************************************************/
.problemas-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 5%;
    text-align: center;
    /* Fondo opcional: */
    /* background-color: #f9f9f9; */
  }
  
  /* Título principal */
  .problemas-section h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    line-height: 1.2;
  }
  
  /* Contenedor de tarjetas */
  .card-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
  }
  
  /* Cada tarjeta */
  .card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    flex: 1;
    text-align: center;
  }
  
  .card img {
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
  }
  
  .card p {
    font-size: 1rem;
    margin-bottom: 15px;
    line-height: 1.4;
    
  }
  .btn-sol {
    display: inline-block;
    background-color: #003366 !important;  /* Fuerza el fondo azul */
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: background-color 0.3s ease;
    margin-bottom: 25px;
  }

  /* Botón "Solucionar" */
  .btn-solucionar {
    background-color: #002147;
    color: #fff;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: background-color 0.3s ease;
  }
  
  .btn-solucionar:hover {
    background-color: #003366;
  }
  
  /* Fila de imágenes */
  .row-images {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
  }
  
  .row-images img {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    border-radius: 8px;
  }
  
  /* Párrafo final */
  .servicio-texto {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.5;
  }
  
  /* Responsividad */
  @media (min-width: 768px) {
    .card-container {
      flex-direction: row;
      justify-content: space-between;
    }
  
    .row-images {
      flex-direction: row;
      justify-content: center;
    }
    
    .row-images img {
      margin: 0; /* Elimina el auto margin para que queden alineadas */
    }
  }
  
  @media (min-width: 1024px) {
    .problemas-section h2 {
      font-size: 2.2rem;
    }
  }

  /* Botón principal (.btn) */
.btn {
    display: inline-block;
    background-color: #003366;  /* Color azul ajustado */
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: background-color 0.3s ease;
  }
  .btn:hover {
    background-color: #004080;  /* Hover ajustado */
  }
  
  /* Botón "Solucionar" (.btn-solucionar) */
  .btn-solucionar {
    background-color: #003366;  /* Color azul ajustado */
    color: #fff;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: background-color 0.3s ease;
  }
  .btn-solucionar:hover {
    background-color: #004080;  /* Hover ajustado */
  }
  
  /* Footer */
  footer {
    background-color: #003366;  /* Color azul ajustado */
    color: #fff;
    padding: 20px 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }

  /*****************************************************
 * Bloque con fondo azul, imágenes y texto centrado
 *****************************************************/
 .servicio-block {
  /* 1) Ocupa todo el ancho del viewport */
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  /* 2) Fondo azul y texto blanco */
  background-color: #002147;
  color: #fff;

  /* 3) Centrado del contenido y padding vertical */
  text-align: center;
  padding: 40px 0;  /* arriba/abajo */
  overflow: hidden; /* que no aparezca scroll horizontal */
}

/* Fila de imágenes: en móvil columna, en wider fila */
.servicio-block .row-images {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
}

/* Cada imagen ocupa proporción igual */
.servicio-block .row-images img {
  flex: 1;
  max-width: 300px; /* o el tamaño que prefieras */
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Texto centrado y con margen superior */
.servicio-block .servicio-texto {
  max-width: 800px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.5;
}

/* En pantallas ≥768px, que las imágenes queden en fila */
@media (min-width: 768px) {
  .servicio-block .row-images {
    flex-direction: row;
  }
}

  /*****************************************************
 * Sección: Crecer tu negocio
 *****************************************************/
.crecer-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 5%;
  text-align: center;
}

.crecer-section h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  line-height: 1.2;
}

/* Resalta la palabra "CRECER" con otro color */
.highlight-crecer {
  color: #003366;  /* Ajusta el color si lo deseas */
  font-weight: bold;
  text-transform: uppercase;
}

/* Párrafos */
.crecer-section p {
  max-width: 800px;
  margin: 0 auto 20px;
  line-height: 1.5;
  font-size: 1rem;
  color: #333;
  
}

/* Botón "Hacer crecer mi negocio" */
.btn-crecer {
  display: inline-block;
  background-color: #003366 !important;  /* Fuerza el fondo azul */
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.btn-crecer:hover {
  background-color: #004080 !important;  /* Hover con fondo un poco más oscuro */
}

/*****************************************************
 * Sección: Crecer tu negocio
 *****************************************************/
 .crecer-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 5%;
  text-align: center;
}

.crecer-section h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  line-height: 1.2;
}

.highlight-crecer {
  color: #003366;
  font-weight: bold;
  text-transform: uppercase;
}

.crecer-section p {
  max-width: 800px;
  margin: 0 auto 20px;
  line-height: 1.5;
  font-size: 1rem;
  color: #333;
}

/* Botón "Hacer crecer mi negocio" */
.btn-crecer {
  display: inline-block;
  background-color: #003366 !important;
  color: #fff !important;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  transition: background-color 0.3s ease;
}
.btn-crecer:hover {
  background-color: #004080 !important;
}

/*****************************************************
 * Sección: Nuestros Servicios
 *****************************************************/
 .nuestros-servicios {
  padding: 40px 5%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  text-align: justify;
}

.nuestros-servicios h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}

/* Contenedor general */
.container-servicios {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Grid para imagen y lista */
.servicios-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

/* Imagen */
.servicios-image img {
  width: 100%;
  max-width: 400px;
  border-radius: 8px;
}

/* Lista de servicios sin numeración */
.servicios-list {
  text-align: left;
  width: 100%;
}
.servicios-list ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.servicios-list li {
  margin-bottom: 20px;
  font-size: 1rem;
  line-height: 1.5;
}

/* Responsivo: en pantallas medianas/grandes, muestra imagen y lista en fila */
@media (min-width: 768px) {
  .servicios-grid {
    flex-direction: row;
    align-items: flex-start;
  }
  .servicios-image {
    flex: 1;
  }
  .servicios-list {
    flex: 1;
  }
}
.crecer-section p {
  line-height: 1.8; /* Más espacio entre renglones */
  font-size: 1rem;
  color: #333;
  text-align: justify;
}

/* Ajuste para el texto en negrita dentro de la misma sección */
.crecer-section strong,
.crecer-section .highlight-crecer {
  letter-spacing: 0.1em;
  margin-right: 5px;
}

/*****************************************************
 * Sección: Imagen completa de Servicios centrada
 *****************************************************/
 .servicios-centrada {
  text-align: center;      /* Centra el contenido de la sección */
  padding: 50px 5%;        /* Espacio interno (arriba/abajo y laterales) */
  margin: 0 auto;          /* Asegura que el contenedor esté centrado si es más estrecho */
}

.servicios-centrada img {
  display: block;          /* Evita el comportamiento inline y respeta margin auto */
  margin: 0 auto;          /* Centra la imagen horizontalmente */
  max-width: 100%;         /* Se adapta a pantallas pequeñas sin desbordar */
  height: auto;            /* Mantiene la proporción original */
  max-width: 1200px;       /* Opcional: no crecerá más allá de 1200px en pantallas grandes */
}

/* -------------------------------
   Sección: Contacto / Dudas
   ------------------------------- */
   .contact-dudas {
    width: 70vw;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;  /* centra los dos bloques como grupo */
    background-color: #E7E6E8;
    padding: 40px 5%;
    gap: 40px;                 /* separa ilustración y formulario */
  }
  
  .contact-image {
    flex: 5;
    min-width: 300px;
    text-align: center;
  }
  
  .contact-image img {
    max-width: 100%;
    height: auto;
  }
  
  .contact-form-wrapper {
    flex: 1;
    max-width: 400px;
    min-width: 280px;
  }
  
  .contact-form-wrapper h2 {
    font-size: 2rem;
    margin-bottom: 8px;
    text-align: right;
    color: #000;
  }
  
  .contact-form-wrapper p {
    margin-bottom: 20px;
    text-align: right;
    color: #333;
  }
  
  .form-dudas {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .form-dudas input {
    height: 42px;
    padding: 0 16px;
    border: 1px solid #ccc;
    border-radius: 25px;
    font-size: 1rem;
    outline: none;
  }
  
  .textarea-group {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 25px;
    overflow: hidden;
  }
  
  .textarea-group textarea {
    border: none;
    padding: 16px;
    font-size: 1rem;
    resize: none;
    min-height: 140px;
    outline: none;
  }
  
  .textarea-group button {
    border: none;
    background-color: #002147; /* Botón oscuro */
    color: #fff;
    padding: 14px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .textarea-group button:hover {
    background-color: #003366;
  }
  
  /* ---------- Responsivo ---------- */
  @media (max-width: 768px) {
    .contact-dudas {
      flex-direction: column;
      padding: 20px 5%;
    }
    .contact-form-wrapper h2,
    .contact-form-wrapper p {
      text-align: center;
    }
  }

  .full-width-wrapper {
    width: 100vw;             /* ocupa todo el ancho del viewport */
    position: relative;
    left: 50%;
    margin-left: -50vw;       /* “rompe” cualquier padding/máx‑width del padre */
    background-color: #E7E6E8;/* el fondo que quieras para toda la sección */
  }

  .centered-container {
    width: 70vw;              /* ancho interior fijo (puede ser % o px) */
    margin: 0 auto;           /* centra este contenedor en pantalla */
  }

  .contact-dudas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    /* Quita el fondo aquí: ya está en full-width-wrapper */
    padding: 40px 0;          /* solo padding vertical */
    gap: 20px;
  }

  /*****************************************************
 * Sección: Banner + Métricas
 *****************************************************/
 .banner-metrics {
  position: relative;
  background: url("../images/banner-bg.jpg") center/cover no-repeat;
  color: #fff;
  text-align: center;
  padding: 80px 0 40px;        /* sólo top/bottom, sin padding lateral */
  width: 100vw;                /* full viewport width */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;         /* rompe cualquier contenedor padre */
  overflow: hidden;
}
/* Overlay semitransparente */
.banner-metrics::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 33, 71, 0.75);
  z-index: 1;
}

/* Contenido principal encima del overlay */
.banner-content {
  position: relative;
  z-index: 2;
  margin: 0 auto 60px;
  /* Puedes conservar un max-width si quieres centrarlo en pantallas muy anchas:
     max-width: 1200px; */
}

.banner-content h2 {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 20px;
}

/* La palabra AHORA en mayúsculas (ya lo está) */
.banner-content span {
  /* si quieres un color distinto, puedes usar: color: #ffb400; */
}

.btn-contratar {
  display: inline-block;
  background-color: #fff;
  color: #003366;
  padding: 12px 32px;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s ease;
  position: relative;
  z-index: 2;
}
.btn-contratar:hover {
  background-color: #f0f0f0;
}

/* Métricas */
.metricas {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;  
  gap: 40px;
  width: 100%;           /* ahora sí llenan toda la sección */
  margin: 0;             /* sin centrar */
  /* quita: max-width y margin auto anteriores */
}

.metrica {
  flex: 1;
  min-width: 200px;
  max-width: 300px;
}

.metrica h3 {
  font-size: 3rem;
  margin: 0;
  line-height: 1;
}

.metrica .subtitulo {
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: -8px;
}

.metrica small {
  display: block;
  margin-top: 8px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #e0e0e0;
}

/* ---------- Responsivo ---------- */
@media (max-width: 768px) {
  .banner-metrics {
    padding: 60px 5% 30px;
  }
  .banner-content h2 {
    font-size: 2rem;
  }
  .metricas {
    flex-direction: column;
    gap: 30px;
  }
  .metrica {
    max-width: none;
  }
}

/* -----------------------
   Footer full‑width
   ----------------------- */
   .site-footer {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;          /* rompe contenedor padre */
    background-color: #002147;   /* mismo fondo claro */
    color: #f5f3f3;                 /* texto oscuro */
    font-size: 0.9rem;
  }
  
  /* Contenedor principal */
  .footer-container {
    max-width: 70vw;             /* ancho interior centrado */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    gap: 20px;
  }
  
  /* Logo */
  .footer-logo {
    max-height: 60px;
  }
  
  /* Centro: datos de contacto */
  .footer-center .contact-info p {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
  }
  .footer-center .contact-info img {
    width: 20px;
    height: 20px;
  }
  
  /* Derecha: redes sociales */
  .footer-right .social-label {
    margin-bottom: 6px;
  }
  .footer-right .social-icons a {
    margin-right: 8px;
  }
  .footer-right .social-icons img {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    transition: opacity 0.3s;
  }
  .footer-right .social-icons img:hover {
    opacity: 0.7;
  }
  
  /* Línea inferior */
  .footer-bottom {
    max-width: 70vw;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid #ccc;
    gap: 15px;    /* ← aquí agregas el espacio horizontal */
  }
  .footer-bottom .company-name {
    font-weight: bold;
  }

  /* Botón flotante de WhatsApp */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background-color: #f8f8f8;        /* Verde WhatsApp */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  transition: transform 0.2s ease;
}
.whatsapp-float:hover {
  transform: scale(1.1);
}
.whatsapp-float img {
  width: 32px;
  height: 32px;
}

html {
  scroll-behavior: smooth;
}