/* SITIOVIVO - Desarrollo de Negocios
   Ajustes del encabezado - Desktop */

/* 1. Reducir logo sin deformarlo */
@media (min-width: 992px) {
  header .navbar-brand img,
  header .site-logo img,
  header .logo img {
    max-width: 220px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
  }

  /* 2. Compactar navegación */
  header .navbar-nav,
  header .nav-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
  }

  /* 3. Tipografía y espaciado */
  header .navbar-nav a,
  header .nav-menu a {
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: #185694;
    padding: 9px 7px;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.2s ease;
  }

  /* 4. Estado hover y foco */
  header .navbar-nav a:hover,
  header .nav-menu a:hover,
  header .navbar-nav a:focus-visible,
  header .nav-menu a:focus-visible {
    color: #348B99;
  }
}


/* ====================================
   SITIOVIVO | DESARROLLO DE NEGOCIOS
   Encabezado desktop - Ajuste 01
   ==================================== */

@media (min-width: 1200px) {

  /* Nombre de la consultora */
  header h3,
  header .h3 {
    font-family: 'Lato', sans-serif;
    font-size: 1.25rem !important;
    line-height: 1.2 !important;
    font-weight: 600;
    margin: 0;
  }

  /* Navegación: desplazar a la derecha */
  #ss-menu {
    margin-left: auto !important;
    padding-left: 32px;
  }

  /* Enlaces */
  #ss-menu a {
    color: #185694;
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.2s ease;
  }

  /* Hover */
  #ss-menu a:hover,
  #ss-menu a:focus-visible {
    color: #6FB22C !important;
    text-decoration: none;
  }

  /* Página activa */
  #ss-menu .active > a,
  #ss-menu a.active,
  #ss-menu a[aria-current="page"] {
    color: #6FB22C !important;
  }
}



/* ========================================
   SITIOVIVO | DESARROLLO DE NEGOCIOS
   MENU DE NAVEGACION - DESKTOP
   ======================================== */

@media (min-width: 992px) {

  /* ESTADO NORMAL */
  #ss-menu #ss-menu-list a.ss-menu-item {
    background: transparent !important;
    background-color: transparent !important;
    color: #185694 !important;
    border: none !important;
    transition: color 0.25s ease !important;
  }

  /* HOVER */
  #ss-menu #ss-menu-list a.ss-menu-item:hover,
  #ss-menu #ss-menu-list li.nav-item:hover > a.ss-menu-item,
  #ss-menu #ss-menu-list a.ss-menu-item:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
    color: #6FB22C !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
  }

}


/* SITIOVIVO | Subrayado verde del menú */

@media (min-width: 992px) {

  #ss-menu .ss-menu-item {
    position: relative;
  }

  #ss-menu .ss-menu-item::after {
    content: "";
    position: absolute;
    bottom: 5px;
    left: 8px;
    right: 8px;
    height: 2px;
    background-color: #6FB22C;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
    pointer-events: none;
  }

  #ss-menu .ss-menu-item:hover::after,
  #ss-menu .ss-menu-item:focus-visible::after {
    transform: scaleX(1);
  }

}


/* ==========================================
   SITIOVIVO | DESARROLLO DE NEGOCIOS
   ENCABEZADO Y MENU MOBILE
   ========================================== */

@media (max-width: 991px) {

  /* 1. Encabezado */
  #ss-header .ss-mobile {
    background-color: #FFFFFF !important;
    padding: 12px 16px !important;
    align-items: center !important;
    gap: 12px;
  }

  /* 2. Contenedor de identidad */
  #ss-header .ss-mobile #ss-logo {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 8px !important;
    min-width: 0;
    max-width: 100%;
  }

  /* 3. Reducir imagen del logo */
  #ss-header .ss-mobile #ss-logo img {
    max-width: 42px !important;
    max-height: 42px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
  }

  /* 4. Nombre de la consultora */
  #ss-header .ss-mobile #ss-logo h3,
  #ss-header .ss-mobile #ss-logo .ss-logo-sm {
    font-family: 'Lato', sans-serif !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    margin: 0 !important;
    min-width: 0;
    max-width: 220px;
    white-space: normal !important;
    overflow-wrap: normal;
  }

  #ss-header .ss-mobile #ss-logo h3 a {
    color: #333333 !important;
    white-space: normal !important;
    text-decoration: none !important;
  }

  /* 5. Botón hamburguesa */
  #ss-header .ss-mobile .navbar-toggler {
    color: #6FB22C !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  /* 6. Menú desplegable */
  #ss-header .ss-mobile #ss-menu {
    background-color: #FFFFFF !important;
  }

  /* 7. Enlaces del menú */
  #ss-header .ss-mobile #ss-menu .ss-menu-item {
    display: block;
    color: #185694 !important;
    background: transparent !important;
    font-family: 'Lato', sans-serif;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 12px 16px !important;
    text-decoration: none !important;
    transition: color 0.2s ease,
                background-color 0.2s ease;
  }

  /* 8. Hover y foco */
  #ss-header .ss-mobile #ss-menu .ss-menu-item:hover,
  #ss-header .ss-mobile #ss-menu .ss-menu-item:focus-visible {
    color: #6FB22C !important;
    background-color: #F3F9EB !important;
  }

  /* 9. Página activa */
  #ss-header .ss-mobile #ss-menu .ss-menu-item.active,
  #ss-header .ss-mobile #ss-menu .ss-menu-item[aria-current="page"] {
    color: #6FB22C !important;
    background-color: #F3F9EB !important;
  }

  /* 10. Desactivar subrayado desktop */
  #ss-header .ss-mobile #ss-menu .ss-menu-item::after {
    display: none !important;
  }
}



/* =====================================
   SITIOVIVO | MENU MOBILE
   Hover verde + subrayado
   ===================================== */

@media (max-width: 991px) {

  /* Estado normal */
  #ss-header #ss-menu #ss-menu-list
  a.ss-menu-item {
    display: inline-block !important;
    position: relative !important;
    padding: 12px 8px !important;
    color: #185694 !important;
    background: transparent !important;
    text-decoration: none !important;
    transition: color .2s ease !important;
  }

  /* Línea verde inicialmente oculta */
  #ss-header #ss-menu #ss-menu-list
  a.ss-menu-item::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    bottom: 5px;
    left: 8px;
    right: 8px;
    height: 2px;
    background-color: #6FB22C;
    transform: scaleX(0);
    transition: transform .2s ease;
    pointer-events: none;
  }

  /* Hover y foco */
  #ss-header #ss-menu #ss-menu-list
  a.ss-menu-item:hover,
  #ss-header #ss-menu #ss-menu-list
  a.ss-menu-item:focus-visible,
  #ss-header #ss-menu #ss-menu-list
  a.ss-menu-item:active {
    color: #6FB22C !important;
    background: transparent !important;
  }

  /* Mostrar subrayado */
  #ss-header #ss-menu #ss-menu-list
  a.ss-menu-item:hover::after,
  #ss-header #ss-menu #ss-menu-list
  a.ss-menu-item:focus-visible::after,
  #ss-header #ss-menu #ss-menu-list
  a.ss-menu-item:active::after {
    transform: scaleX(1) !important;
  }

}

/* =====================================
   SITIOVIVO | MARGENES TEXTOS MOBILE
   ===================================== */

@media (max-width: 991px) {

  /* Textos de las secciones internas */
  main section .ss-text,
  main section .ss-text-block,
  main section .ss-rich-text,
  main section .ss-content-text {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }

  /* Bloques de texto de SitioSimple */
  main section h2,
  main section h3,
  main section h4,
  main section p {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }

}



/* ==========================================
   SITIOVIVO | FOOTER VERSION 02
   ========================================== */

#ss-footer {
  background: #FFFFFF !important;
  color: #666666;
  font-family: 'Lato', sans-serif;
}

/* ENLACES: AZUL + HOVER VERDE */

#ss-footer a {
  color: #185694 !important;
  text-decoration: none !important;
  transition: color .2s ease;
}

#ss-footer a:hover,
#ss-footer a:focus-visible {
  color: #6FB22C !important;
  text-decoration: underline !important;
  text-decoration-color: #6FB22C !important;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

/* DESKTOP */

@media (min-width: 992px) {

  /* Distribución general */

  #ss-footer .footer-row-content {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1.5fr)
      minmax(0, 1fr)
      minmax(120px, .5fr) !important;
    gap: 32px !important;
    align-items: start !important;
    padding-top: 32px !important;
    padding-bottom: 24px !important;
  }

  /* Anular anchos heredados */

  #ss-footer-column-1,
  #ss-footer-column-2,
  #ss-footer-column-3 {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* MENU DEL FOOTER */

  #ss-footer-column-1 #ss-menu-footer,
  #ss-footer-column-1 #ss-menu-footer ul,
  #ss-footer-column-1 #ss-menu-footer > div {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px 20px !important;
    width: 100% !important;
  }

  /* Items individuales */

  #ss-menu-footer li,
  #ss-menu-footer p {
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #ss-menu-footer a {
    display: inline-block !important;
    width: auto !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    white-space: nowrap;
  }

  /* CONTACTO */

  #ss-footer-column-2 {
    text-align: center !important;
  }

  /* QR Y REDES */

  #ss-footer-column-3 {
    text-align: right !important;
  }

}

/* MOBILE */

@media (max-width: 991px) {

  #ss-footer .footer-row-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 26px !important;
    padding: 30px 20px !important;
    align-items: center !important;
  }

  #ss-footer-column-1,
  #ss-footer-column-2,
  #ss-footer-column-3 {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  /* Menu mobile del footer */

  #ss-menu-footer,
  #ss-menu-footer ul,
  #ss-menu-footer > div {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px 18px !important;
  }

  #ss-menu-footer li,
  #ss-menu-footer p {
    width: auto !important;
    margin: 0 !important;
    list-style: none !important;
  }

  #ss-menu-footer a {
    font-size: 13px !important;
    display: inline-block !important;
  }

}


/* =========================================
   SITIOVIVO | FOOTER AJUSTE 03
   Alineaciones y distribución
   ========================================= */

@media (min-width: 992px) {

  /* Contenedor de las tres columnas */
  #ss-footer .footer-row-content {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1.6fr)
      minmax(0, 1fr)
      minmax(130px, .45fr) !important;
    align-items: start !important;
    column-gap: 40px !important;
    padding-top: 30px !important;
    padding-bottom: 24px !important;
  }

  /* Alinear las tres columnas arriba */
  #ss-footer-column-1,
  #ss-footer-column-2,
  #ss-footer-column-3 {
    align-self: start !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    height: auto !important;
  }

  /* IZQUIERDA: Navegación */
  #ss-footer-column-1 {
    align-items: flex-start !important;
    text-align: left !important;
  }

  #ss-footer-column-1 #ss-menu-footer {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    margin-top: 0 !important;
  }

  /* CENTRO: Contacto */
  #ss-footer-column-2 {
    align-items: flex-start !important;
    text-align: left !important;
    gap: 8px !important;
  }

  /* DERECHA: QR y redes */
  #ss-footer-column-3 {
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    gap: 12px !important;
  }

  /* Evitar espacio extra entre elementos */
  #ss-footer-column-2 p,
  #ss-footer-column-3 p {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
  }

}

/* MOBILE: mantener bloques centrados */

@media (max-width: 991px) {

  #ss-footer-column-1,
  #ss-footer-column-2,
  #ss-footer-column-3 {
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
  }

  #ss-footer-column-3 {
    gap: 12px !important;
  }

}


/* SITIOVIVO | Alineación QR y redes - Desktop */

@media (min-width: 992px) {

  #ss-footer-column-3 {
    position: relative;
    top: -12px;
  }

}


/* =====================================
   SITIOVIVO | REDES SOCIALES MOBILE
   Ajuste específico de la fila
   ===================================== */

@media (max-width: 991px) {

  /* Fila real de las cuatro redes */

  #customPageContent .ssc-row[data-ss-id="-IVS_DOC"] {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: center !important;
    justify-items: center !important;
    width: 100% !important;
    max-width: 240px !important;
    margin: 0 auto !important;
  }

  /* Columnas individuales */

  #customPageContent
  .ssc-row[data-ss-id="-IVS_DOC"] > .ssc-col {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Enlaces de las redes */

  #customPageContent
  .ssc-row[data-ss-id="-IVS_DOC"] a.ss-image-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Tamaño uniforme de imágenes */

  #customPageContent
  .ssc-row[data-ss-id="-IVS_DOC"] img {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

}