/* ================================
   VIVÍ BRASIL – DISEÑO GENERAL
================================ */

:root {
  --vivi-azul: #073d59;
  --vivi-azul-claro: #0b5275;
  --vivi-celeste: #36c7ce;
  --vivi-naranja: #ff6b1a;
  --vivi-fondo: #eef3f4;
  --vivi-blanco: #ffffff;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--vivi-fondo) !important;
  overflow-x: hidden;
}

/* ================================
   ENCABEZADO Y MENÚ
================================ */

header,
.header,
.main-header,
.navbar {
  background-color: var(--vivi-azul) !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
}

.navbar {
  min-height: 82px !important;
  padding: 8px 24px !important;
}

/* Logo */

.navbar-brand img,
header .logo img,
header img.logo,
.header-logo img {
  width: auto !important;
  height: 60px !important;
  max-width: 220px !important;
  object-fit: contain !important;
}

/* Enlaces del menú */

header nav a,
.navbar a,
.header a {
  color: var(--vivi-blanco) !important;
  font-weight: 600;
  text-decoration: none;
}

header nav a:hover,
.navbar a:hover {
  color: var(--vivi-celeste) !important;
}

/* Botón del menú móvil */

.navbar-toggler,
.menu-toggle,
.hamburger {
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 7px !important;
  color: var(--vivi-blanco) !important;
}

/* ================================
   CONTENIDO E IMÁGENES
================================ */

main,
.main-content,
.page-content,
.content-wrapper {
  background-color: var(--vivi-fondo) !important;
}

main img,
.main-content img,
.page-content img {
  max-width: 100% !important;
  height: auto !important;
}

/* Carruseles y galerías */

.carousel,
.slider,
.gallery {
  overflow: hidden;
  border-radius: 8px;
}

/* Tarjetas de productos o servicios */

.card,
.product-card,
.service-card {
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(7, 61, 89, 0.12) !important;
  overflow: hidden;
}

/* ================================
   BOTÓN DE WHATSAPP
================================ */

.whatsapp,
.whatsapp-button,
.whatsapp-float,
.floating-whatsapp {
  width: 62px !important;
  height: 62px !important;
  right: 18px !important;
  bottom: 22px !important;
  z-index: 9999 !important;
}

/* ================================
   PIE DE PÁGINA
================================ */

footer,
.footer,
.main-footer {
  background-color: var(--vivi-azul) !important;
  color: var(--vivi-blanco) !important;
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

footer a,
.footer a,
.main-footer a {
  color: var(--vivi-blanco) !important;
  text-decoration: none !important;
}

footer a:hover,
.footer a:hover {
  color: var(--vivi-celeste) !important;
}

footer p,
footer li,
.footer p,
.footer li {
  color: var(--vivi-blanco) !important;
  line-height: 1.5;
}

/* ================================
   VERSIÓN PARA CELULAR
================================ */

@media screen and (max-width: 767px) {

  /* Encabezado más bajo */

  header,
  .header,
  .main-header {
    min-height: auto !important;
  }

  .navbar {
    min-height: 90px !important;
    padding: 9px 14px !important;
  }

  /* Logo más grande y sin ocupar tanta altura */

  .navbar-brand img,
  header .logo img,
  header img.logo,
  .header-logo img {
    width: auto !important;
    height: 66px !important;
    max-width: 235px !important;
  }

  /* Oculta el nombre repetido debajo del logo */

  header h1,
  header h2,
  header .site-title,
  header .site-name,
  header .brand-title,
  .header .site-title,
  .header .site-name {
    display: none !important;
  }

  /* Menú hamburguesa alineado a la derecha */

  .navbar-toggler,
  .menu-toggle,
  .hamburger {
    margin-left: auto !important;
  }

  /* Imágenes completas sin recortes */

  main img,
  .main-content img,
  .page-content img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Menos separación alrededor del contenido */

  main .container,
  .main-content .container,
  .page-content .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Tarjetas más compactas */

  .card,
  .product-card,
  .service-card {
    margin-bottom: 18px !important;
  }

  /* Pie de página más ordenado */

  footer,
  .footer,
  .main-footer {
    padding: 25px 20px 85px !important;
    font-size: 16px !important;
  }

  footer .row,
  .footer .row {
    row-gap: 20px !important;
  }

  footer a,
  footer p,
  footer li,
  .footer a,
  .footer p,
  .footer li {
    font-size: 16px !important;
    overflow-wrap: anywhere;
  }

  /* WhatsApp sin tapar teléfono o correo */

  .whatsapp,
  .whatsapp-button,
  .whatsapp-float,
  .floating-whatsapp {
    width: 58px !important;
    height: 58px !important;
    right: 14px !important;
    bottom: 75px !important;
  }
}