*, *::before, *::after {
  box-sizing: border-box;
}

/* Ocultar scrollbar por defecto, mostrar solo al hacer scroll */
:root {
  scrollbar-gutter: stable;
}

html {
  overflow-y: auto;
  overflow-x: clip;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.3s ease;
}

html:hover,
html:active {
  scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

html.scrolling {
  scrollbar-color: rgba(0, 0, 0, 0.4) transparent;
}

/* Para navegadores Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 6px;
  border: 3px solid transparent;
  transition: background-color 0.3s ease;
}

html:hover ::-webkit-scrollbar-thumb,
html:active ::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
}

html.scrolling ::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.4);
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;800&display=swap');

@font-face {
  font-family               : 'Neuropol';
  src                       : url('/fuente/neuropol_x_free.ttf');
  font-display              : swap;
}

:root {

  --max-width               : 1200px;
  --primary-color           : #0057B8;
  --primary-color-alt       : #035DBF;
  --title-color             : #121F26;
  --text-color              : #676F73;
  --body-bg-color           : #FCFFFC;
  --white-color             : #ffffff;
  --color                   : var(--primary-color);
  --color-alt               : var(--primary-color-alt);
  --body-font               : 'Open Sans', sans-serif;
  --title-font              : 'Neuropol', sans-serif;
  --header-height-small     : 1rem;
  --header-height           : 1.5rem;
  --section-spacing         : 2rem;
  --block-spacing           : 2rem;
  --body-line-height        : 1.4em;
  --title-line-height       : 1.1em;
  --h1-font-size            : 1.15rem;
  --h2-font-size            : 1.05rem;
  --h3-font-size            : .90rem;
  --big-font-size           : .85rem;
  --normal-font-size        : 0.75rem;
  --small-font-size         : 0.65rem;
  --border-radius           : 0.75rem;
  --box-shadow              : 0 2px 2px rgba(36, 47, 66, 0.04);
}

/* Ajuste para pantallas muy pequeñas (< 360px) */
@media screen and (max-width: 359px) {

  :root {
    --h1-font-size          : 1rem;
    --h2-font-size          : 0.95rem;
    --h3-font-size          : 0.85rem;
    --big-font-size         : 0.8rem;
    --normal-font-size      : 0.7rem;
    --small-font-size       : 0.6rem;
    --section-spacing       : 1.5rem;
    --block-spacing         : 1.5rem;
  }
}

@media screen and (min-width: 1024px) {

  :root {
    --header-height-small   : 1rem;
    --header-height         : 1.5rem;
    --section-spacing       : 3rem;
    --block-spacing         : 2.5rem;
    --h1-font-size          : 1.6rem;
    --h2-font-size          : 1.5rem;
    --h3-font-size          : 1.25rem;
    --big-font-size         : 1.15rem;
    --normal-font-size      : 1rem;
    --small-font-size       : 0.85rem;
  }
}

body {
  display                   : flex;
  flex-direction            : column;
  min-height                : calc(100vh - var(--header-height));
  color                     : var(--text-color);
  padding-top               : var(--header-height-small);
  /* margin-bottom             : 5rem; */
  font-family               : var(--body-font);
  font-size                 : var(--normal-font-size);
  line-height               : var(--body-line-height);
  background-color          : var(--body-bg-color);
  max-width                 : 100vw;
}

/* El scroll se bloquea vía JavaScript con position: fixed */

/* Estilos para elementos con role button */
[role="button"] {
  cursor                    : pointer;
  user-select               : none;
  -webkit-tap-highlight-color: transparent;
  outline                   : none;
  border                    : none;
}

/* Mantener outline solo para navegación por teclado */
[role="button"]:focus-visible {
  outline                   : 2px solid var(--primary-color);
  outline-offset            : 2px;
}

/* Eliminar bordes en todos los estados de clic */
[role="button"]:active,
[role="button"]:focus:not(:focus-visible) {
  outline                   : none;
  border                    : none;
}

/* Eliminar bordes de imágenes en general */
img {
  outline                   : none;
  border                    : none;
  -webkit-tap-highlight-color: transparent;
}

img:active,
img:focus,
img:focus:not(:focus-visible) {
  outline                   : none !important;
  border                    : none !important;
}

/* Eliminar bordes en articles e iconos clickeables */
.servicio-articulo img,
.iconos,
.iconos-rds,
.i-b-i {
  outline                   : none !important;
  border                    : none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.servicio-articulo img:active,
.servicio-articulo img:focus,
.iconos:active,
.iconos:focus,
.iconos-rds:active,
.iconos-rds:focus,
.i-b-i:active,
.i-b-i:focus {
  outline                   : none !important;
  border                    : none !important;
}

/* Asegurar que elementos con id que empiezan con open- no tengan bordes */
[id^="open-"],
[id^="close-"] {
  outline                   : none !important;
  border                    : none !important;
}

[id^="open-"]:active,
[id^="open-"]:focus:not(:focus-visible),
[id^="close-"]:active,
[id^="close-"]:focus:not(:focus-visible) {
  outline                   : none !important;
  border                    : none !important;
}

/* @media screen and (min-width: 1024px) {
  
  body {
    margin-bottom           : none;
  }
} */

/* ============================================
   CABECERA Y TIPOGRAFÍA
   ============================================ */

.cabecera {
  max-width                 : 40%;
  margin-left               : auto;
  margin-right              : auto;
}

a {
  color                     : var(--primary-color);
}

p {
  margin-top                : 0;
  font-family               : var(--body-font);
  color                     : var(--title-color);
  word-wrap                 : break-word;
  overflow-wrap             : break-word;
}

h1 {
  max-width                 : 95%;
  margin                    : .5em auto;
  padding                   : 0 1rem;
  color                     : var(--title-color);
  font-family               : var(--title-font);
  font-size                 : var(--h1-font-size);
  line-height               : var(--title-line-height);
  text-align                : center;
  word-wrap                 : break-word;
  overflow-wrap             : break-word;
}

h2 {
  margin                    : 0 auto 7px;
  padding                   : 0 1rem;
  max-width                 : 95%;
  color                     : var(--primary-color);
  font-family               : var(--title-font);
  font-size                 : var(--h2-font-size);
  line-height               : var(--title-line-height);
  word-wrap                 : break-word;
}

.sub {
  font-family               : var(--title-font);
  font-size                 : var(--big-font-size);
  color                     : var(--title-color);
  margin-top                : 1rem;
}

.sub-titulo-h2,
.sub-titulo-h2-2 {
  width                     : calc(100% - 2rem);
  max-width                 : var(--max-width);
  margin-left               : auto;
  margin-right              : auto;
  font-size                 : var(--h2-font-size);
  border-top                : 2px solid #676F73;
  padding-top               : 1.25rem;
}

h3 {
  display                   : inline-block;
  margin-top                : 1rem;
  color                     : var(--title-color);
  font-family               : var(--title-font);
  line-height               : var(--title-line-height);
  font-size                 : var(--h3-font-size);
}

.sub-titulo-h3 {
  margin-top                : 0;
  color                     : var(--primary-color);
  font-family               : var(--title-font);
  font-size                 : var(--h3-font-size);
  text-align                : center;
}

@media screen and (min-width: 1024px) {
  
  .sub-titulo-h3 {
    text-align              : left;
  }
}

.a-tc {
  font-size                 : var(--small-font-size);
}

.sub-titulo-pc {
  margin                    : 0 auto;
  margin-bottom             : 1.5rem;
  text-align                : center;
  font-size                 : var(--h2-font-size);
  padding-top               : 1.25rem;
}

.a-ul-pc {
  max-width                 : 90%;
  margin                    : 10px auto 50px;
  padding                   : 0 1rem;
  text-decoration           : none;
}

@media screen and (min-width: 281px) and (max-width: 1023px) {
  
  .a-ul-pc {
    max-width               : 85%;
    margin                  : 10px auto 15px;
    padding                 : 0 1rem;
  }
}

@media screen and (min-width: 1024px) {
  
  .a-ul-pc {
    margin                  : 10px 0 20px 150px;
  }
}

.a-ul-pc li {
  list-style-type           : none;
}

.parrafo-pc, 
.parrafo-pc-sub {
  max-width                 : 85%;
  margin                    : 1.5rem auto 0;
  line-height               : var(--body-line-height);
  color                     : var(--text-color);
}

.parrafo-pc-sub {
  color                     : var(--title-color);
}

.c-condic-a {
  margin-top                : 1rem;
  color                     : var(--text-color);
}

.c-p-clientes {
  margin-top                : 1rem;
  color                     : var(--text-color);
  font-size                 : var(--normal-font-size);
}

.boton-w {
  background-color          : #01E675;
  color                     : var(--white-color);
  text-decoration           : none;
  border-radius             : 5px;
  padding                   : .5rem 1.25rem;
}

/* ============================================
   IMÁGENES E ICONOS
   ============================================ */

img {
  max-width                 : 100%;
  margin                    : 0 auto;
  display                   : block;
  outline                   : none;
  border                    : none;
  -webkit-tap-highlight-color: transparent;
}

img:active,
img:focus:not(:focus-visible) {
  outline                   : none;
  border                    : none;
}

.icono {
  height                    : 100px;
}

.iconos {
  height                    : 85px;
}

.iconos-rds {
  height                    : 85px;
  transition                : transform 0.3s ease;
}

.iconos-rds.logo-global-salud {
  height                    : 70px;
}

.iconos-rds:hover {
  transform                 : scale(1.05);
}

.i-b-i {
  height                    : 55px;
  padding                   : 0 .25rem;
}

@media screen and (min-width: 0) and (max-width: 280px) {
  
  .i-b-i {
    height                    : 42px;
  }
}

.img-angulo-volver {
  display                     : flex;
  justify-content             : center;
  align-items                 : center;
  position                    : sticky;
  top                         : 0;
  left                        : 0;
  height                      : 2.5rem;
  width                       : 100%;
  padding                     : 0 0.5rem;
  background-color            : #ECF8F8;
  box-shadow                  : var(--box-shadow);
  z-index                     : 3;
}

.img-angulo-volver-2 {
  display                     : flex;
  justify-content             : center;
  align-items                 : center;
  position                    : -webkit-sticky;
  position                    : sticky;
  top                         : 0;
  left                        : 0;
  right                       : 0;
  height                      : 2.5rem;
  margin-bottom               : 2rem;
  width                       : 100%;
  padding                     : 0 1rem;
  box-shadow                  : var(--box-shadow);
  background-color            : var(--body-bg-color);
  border-top                  : 2px solid #676F73;
  z-index                     : 100;
}

.img-angulo-volver img,
.img-angulo-volver-2 img {
  height                      : 2rem;
  width                       : 2rem;
  cursor                      : pointer;
  transition                  : transform 0.2s ease, opacity 0.2s ease;
  flex-shrink                 : 0;
  position                    : absolute;
  right                       : 0.5rem;
  top                         : 50%;
  transform                   : translateY(-50%);
}

.img-angulo-volver img:hover,
.img-angulo-volver-2 img:hover {
  transform                   : translateY(-50%) scale(1.1);
  opacity                     : 0.8;
}

.img-angulo-volver img:active,
.img-angulo-volver-2 img:active {
  transform                   : translateY(-50%) scale(0.95);
}

.img-angulo-volver h2 {
  margin                      : 0;
  text-align                  : center;
  width                       : 100%;
}

.img-angulo-volver-2 h2 {
  margin                      : 0;
  text-align                  : center;
  width                       : 100%;
  padding-right               : 2.5rem;
  padding-top                 : 0;
  margin-bottom               : 0;
}

@media screen and (min-width: 1024px) {

  .img-angulo-volver,
  .img-angulo-volver-2 {
      height                  : 3rem;
  }
  
  .img-angulo-volver img,
  .img-angulo-volver-2 img {
      height                  : 2.5rem;
      width                   : 2.5rem;
  }

  .img-angulo-volver h2 {
    margin                    : 0;
    text-align                : center;
  }
}

.redes-sociales {
  display                   : flex;
  justify-content           : space-around;
  align-items               : center;
  flex-direction            : column;
  gap                       : 2rem;
}

.redes-sociales a {
  text-decoration           : none;
  flex-shrink               : 0;
  margin                    : 0 1.5rem;
}

/* Ajuste específico para modal de redes sociales en móvil */
@media screen and (max-width: 1023px) {
  .modal-content[data-modal="capa6"] .redes-sociales {
    gap                       : 1rem;
  }
}

@media screen and (min-width: 281px) and (max-width: 1023px) {
  
  .redes-sociales {
    flex-direction          : column;
    height                    : 90vh;
    gap                       : 2rem;
  }
  
  /* Ocultar duplicados del carrusel en móviles */
  .modal-content[data-modal="cap2"] .redes-sociales a[aria-hidden="true"] {
    display                   : none;
  }
  
  /* Ocultar controles de navegación en móviles */
  .carousel-controls {
    display                   : none !important;
  }
}

@media screen and (min-width: 281px) and (max-width: 1023px) and (orientation: landscape) {
  
  .redes-sociales {
    flex-direction            : row;
    height                    : 65vh;
  }
  
  /* Ocultar duplicados del carrusel en landscape móvil */
  .modal-content[data-modal="cap2"] .redes-sociales a[aria-hidden="true"] {
    display                   : none;
  }
}

@media screen and (min-width: 0) and (max-width: 280px) {
  
  .redes-sociales {
    height                    : 80vh;
  }
  
  /* Ocultar duplicados del carrusel en pantallas pequeñas */
  .modal-content[data-modal="cap2"] .redes-sociales a[aria-hidden="true"] {
    display                   : none;
  }
}

@media screen and (min-width: 1024px) {
  
  /* ============================================
     MODAL DE CLIENTES (cap1) - Desktop
     ============================================ */
  .modal-content[data-modal="cap1"] .redes-sociales {
    flex-direction            : row;
    justify-content           : center;
    align-items               : center;
    height                    : auto;
    gap                       : 3rem;
    padding                   : 2rem;
    flex-wrap                 : nowrap;
  }
  
  .modal-content[data-modal="cap1"] .redes-sociales a {
    flex                      : 0 0 auto;
  }
  
  .modal-content[data-modal="cap1"] .lista-articulo {
    display                   : grid;
    grid-template-columns     : 1fr;
    gap                       : 2rem;
    align-items               : start;
    height                    : 100%;
    padding                   : 1rem 0;
  }
  
  @media screen and (min-width: 768px) {
    .modal-content[data-modal="cap1"] .lista-articulo {
      grid-template-columns   : 1fr 1fr;
      padding                 : 2rem 0;
    }
  }
  
  /* ============================================
     MODAL DE PROYECTOS (cap2) - Desktop con Carrusel
     ============================================ */
  .modal-content[data-modal="cap2"] .lista-articulo-redes {
    overflow                  : hidden;
    width                     : 100%;
    display                   : flex;
    align-items               : center;
    justify-content           : center;
    height                    : 100%;
    padding-top               : 0;
    margin-top                : -3rem;
  }
  
  .modal-content[data-modal="cap2"] .lista-articulo-redes {
    position                  : relative;
  }

  .carousel-controls {
    position                  : absolute;
    top                       : 50%;
    transform                 : translateY(-50%);
    background                : rgba(0, 0, 0, 0.6);
    color                     : white;
    border                    : none;
    width                     : 50px;
    height                    : 50px;
    border-radius             : 5px;
    cursor                    : pointer;
    font-size                 : 32px;
    line-height               : 0;
    display                   : flex;
    align-items               : center;
    justify-content           : center;
    padding-bottom            : 6px;
    z-index                   : 10;
    transition                : background 0.3s ease, transform 0.2s ease;
    user-select               : none;
  }

  .carousel-controls:hover {
    background                : rgba(0, 0, 0, 0.9);
    transform                 : translateY(-50%) scale(1.15);
  }

  .carousel-controls:active {
    transform                 : translateY(-50%) scale(0.95);
  }

  .carousel-prev {
    left                      : 20px;
  }

  .carousel-next {
    right                     : 20px;
  }

  .modal-content[data-modal="cap2"] .redes-sociales {
    flex-direction            : row;
    justify-content           : flex-start;
    height                    : auto;
    gap                       : 3rem;
    padding                   : 2rem 0;
    width                     : max-content;
    transition                : transform 0.5s ease-out;
  }
  
  /* ============================================
     MODAL DE REDES SOCIALES (capa6) - Desktop
     ============================================ */
  .modal-content[data-modal="capa6"] .redes-sociales {
    flex-direction            : row;
    justify-content           : space-around;
    height                    : auto;
    gap                       : 8rem;
    padding                   : 2rem 4rem;
  }
  
  .modal-content[data-modal="capa6"] .lista-articulo-redes {
    display                   : flex;
    align-items               : center;
    justify-content           : center;
    height                    : 100%;
    margin-top                : -3rem;
  }
  
}

/* ============================================
   SISTEMA DE MODALES
   ============================================ */

/* Modales - Overlay */
.modal {
  position                  : fixed;
  top                       : 0;
  width                     : 100%;
  height                    : 100%;
  opacity                   : 0;
  visibility                : hidden;
  transition                : opacity 0.4s ease-in-out, visibility 0.4s;
  pointer-events            : none;
  z-index                   : 5;
}

.modal.active {
  opacity                   : 1;
  visibility                : visible;
  pointer-events            : initial;
}

/* Modales - Contenido */
.modal-content {
  position                  : absolute;
  top                       : 0;
  left                      : 0;
  right                     : 0;
  bottom                    : 0;
  width                     : 100%;
  height                    : 100%;
  text-align                : center;
  background-color          : #ECF8F8;
  border-radius             : 0;
  overflow                  : auto;
  opacity                   : 0;
  transform                 : scale(0.95);
  transition                : transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

.modal.active .modal-content {
  transform                 : scale(1);
  opacity                   : 1;
}

/* Modales específicos - Desktop */
@media screen and (min-width: 1024px) {
  
  .modal-content[data-modal="capa6"] {
    width                   : 50%;
    height                  : 50%;
    left                    : 50%;
    top                     : 50%;
    transform               : translate(-50%, -50%) scale(0.95);
    overflow                : hidden;
  }
  
  .modal.active .modal-content[data-modal="capa6"] {
    transform               : translate(-50%, -50%) scale(1);
  }
  
  .modal-content[data-modal="cap2"] {
    width                   : 85%;
    height                  : 65%;
    left                    : 50%;
    top                     : 50%;
    transform               : translate(-50%, -50%) scale(0.95);
    overflow                : hidden;
  }
  
  .modal.active .modal-content[data-modal="cap2"] {
    transform               : translate(-50%, -50%) scale(1);
  }
}

.contenido-capa h1,
.contenido-capa2 h1,
.contenido-capa3 h1,
.contenido-capa4 h1,
.contenido-capa5 h1,
.contenido-capa6 h1,
.contenido-capa6 h1,
.contenido-capa7 h1,
.contenido-capa8 h1,
.contenido-capa9 h1,
.contenido-capa10 h1,
.contenido-cap1 h1,
.contenido-cap2 h1,
.contenido-cap5 h1,
.contenido-cap6 h1,
.contenido-capa p,
.contenido-capa2 p,
.contenido-capa3 p,
.contenido-capa4 p,
.contenido-capa8 p,
.contenido-capa9 p,
.contenido-capa10 p,
.contenido-cap1 p,
.contenido-cap1 p,
.contenido-cap5 p,
.contenido-cap6 p  {
  margin-bottom             : 1rem;
}

.seccion-servicios .contenido-interno,
.seccion-servicios3 .contenido-interno3,
.seccion-servicios-contact .contenido-interno-contact {
  display                   : grid;
  gap                       : 2rem;
  justify-content           : center;
}

.seccion-servicios2 .contenido-interno2 {
  display                   : grid;
  gap                       : .5rem;
  justify-content           : center;
  border-top                : 2px solid #676F73;
  border-bottom             : 2px solid #676F73;
  padding                   : .5rem 0 .15rem;
}

.seccion-servicios2 .servicio-articulo {
  justify-content           : center;
  padding                   : 0.5rem 0;
}

.seccion-servicios2 .servicio-articulo h3 {
  margin                    : 0;
  display                   : flex;
  align-items               : center;
  min-height                : 2.5rem;
}

.seccion-servicios2 .servicio-articulo a {
  text-decoration           : none;
  color                     : inherit;
}

.seccion-servicios .contenido-interno,
.seccion-servicios3 .contenido-interno3,
.seccion-servicios-contact .contenido-interno-contact {
  grid-template-columns     : repeat(2, 1fr);
}

@media screen and (min-width: 1024px) {

  .seccion-servicios .contenido-interno {
    grid-template-columns   : repeat(4, 1fr);
  }

  .seccion-servicios2 .contenido-interno2 {
    grid-template-columns   : repeat(3, 1fr);
  }

  .seccion-servicios3 .contenido-interno3,
  .seccion-servicios-contact .contenido-interno-contact {
    grid-template-columns   : repeat(4, 1fr);
  }
}

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

  .seccion-servicios3 .contenido-barra,
  .seccion-servicios-contact .contenido-barra,
  .seccion-servicios-contact,
  .cabecera {
    display                 : none;
  }
}

.seccion-servicios h2,
.seccion-servicios2 h2,
.seccion-servicios3 h2,
.seccion-servicios-contact h2 {
  margin-bottom             : var(--block-spacing);
}

.seccion-contenido {
  margin-bottom             : var(--section-spacing);
} 

.seccion-contenido h1,
.seccion-contenido h2 {
  text-align                : center;
}

.contenido-interno,
.contenido-interno2,
.contenido-interno3,
.contenido-interno-contact {
  width                     : calc(100% - 2rem);
  max-width                 : var(--max-width);
  margin                    : 0 auto;
}

.servicio-articulo {
  display                   : flex;
  flex-direction            : column;
  align-items               : center;
  text-align                : center;
  max-width                 : 300px;
  margin                    : 0 auto;
}

.lista-articulo {
  display                     : grid;
  grid-template-columns       : repeat(1, 1fr);
  gap                         : var(--block-spacing);
  margin                      : 0 auto 1.5rem;
  text-align                  : left;
  padding                     : 0 1.25rem;
}

.lista-articulo-redes {
  display                     : grid;
  grid-template-columns       : 1fr;
  align-items                 : center;
  justify-content             : center;
  height                      : 100%;
}

.lista-articulo h2 {
  margin-bottom             : .5rem;
}

.lista-articulo img {
  height                    : 130px;
}

.lista-box ul{
  list-style-type           : none;
  padding                   : 0;
}

.ul-cp5 {
  margin-left               : 2.5rem;
}

.lista-box li{
  margin-bottom             : 1rem;
}

.check {
  display                   : inline-block;
  height                    : 5px;
  width                     : 10px;
  border-bottom             : 2px solid #1ebea5;
  border-left               : 2px solid #1ebea5;
  transform                 : rotate(-45deg);
  margin-right              : 5px;
  margin-bottom             : 4px;
}

.lista-articulo > div:first-of-type {
  order                     : 2;
}

@media screen and (min-width: 1024px) {

  .lista-articulo {
    width                   : 70%;
    grid-template-columns   : 1fr 1fr;
    margin-top              : 0;
  }

  .lista-articulo h2 {
    text-align              : center;
  }

  .lista-articulo img {
    height                  : 250px;
  }

  .lista-articulo:nth-child(odd) > div:nth-of-type(2) {
    order                   : 2;
  }
}

/* ============================================
   BARRA INFERIOR Y FOOTER
   ============================================ */

.barra-inferior { 
  position                    : fixed;
  bottom                      : 10px;
  bottom                      : max(10px, env(safe-area-inset-bottom));
  left                        : 50%;
  transform                   : translateX(-50%);
  width                       : 75%;
  max-width                   : 535px;
  height                      : 70px;
  display                     : grid;
  justify-content             : stretch;
  align-items                 : center;
  backdrop-filter             : grayscale(30%);
  background-color            : rgba(150, 150, 150, 0.5);
  border-radius               : var(--border-radius);
  padding-left                : max(0px, env(safe-area-inset-left));
  padding-right               : max(0px, env(safe-area-inset-right));
}

@media screen and (max-width: 450px) {
  
  .barra-inferior {
    width                     : 90%;
  }
}

.b-i-iconos {
  display                     : flex;
  justify-content             : space-around;
  align-items                 : center;
  flex-direction              : row;  
}

@media screen and (min-width: 540px) {
  
  .barra-inferior {
    display                     : none;
  }
}

.footer-principal {
  display                   : flex;
  justify-content           : center;
  align-items               : center;
  margin-top                : auto;
  padding                   : 40px 0 100px;
  padding-bottom            : max(100px, env(safe-area-inset-bottom));
  width                     : 100%;
  height                    : var(--header-height-small);
  font-size                 : var(--small-font-size);
  border-top                : 1px solid #ededed;
}

.footer-principal p {
  margin-bottom             : 2rem;
  color                     : var(--text-color);
  text-align                : center;
}

@media screen and (min-width: 535px) {
  
  .footer-principal {
    padding                 : 40px 0 10px;
  }
}