/* Quitar subrayado de los enlaces */
a {
  text-decoration: none;
  display: inline-block;
}

html,
body {
  overflow-x: hidden !important;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;

  width: 100%;

  padding-top: clamp(50px, 10vw, 85px);

  position: relative;

  overflow-x: hidden;
  overflow-y: auto;

  min-height: 100vh;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  opacity: 1;
  transition: opacity 0.5s ease;
  min-height: 100vh;
  clip-path: inset(0 0 calc(100vh - 100%) 0);
}

/* Cuando esta clase aparece, el fondo superior se desvanece */
.cambioFondo::before {
  opacity: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  text-align: center;
}

h1 {
  color: rgb(182, 176, 176);
  font-size: clamp(10px, 1.9vw, 24px);
  white-space: nowrap;
}

h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(18px, 2.8vw, 26px);
  margin-top: 35px;
  margin-bottom: 20px;
}

h3 {
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(17px, 2.6vw, 24px);
  color: rgb(47, 40, 40);
  padding-top: 20px;
  margin-bottom: 10px;
}

h4 {
  font-family:
    "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-size: clamp(15px, 2.3vw, 22px);
  color: rgb(17, 15, 15);
}

h5 {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: clamp(13px, 2.1vw, 19px);
  color: rgb(87, 79, 79);
}

h6 {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: clamp(11px, 1.9vw, 17px);
  color: rgb(129, 116, 116);
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto;
}

/* Audio */
audio {
  display: block;
  margin: 3px auto;
  width: 100%;
  max-width: 400px;
}

table {
  border-collapse: collapse;
}

/* Listas */

ul,
li,
summary {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  cursor: pointer;
  transition: 0.2s;
  margin: 0;
  border-radius: 8px;
  padding-left: 7px;
  color: blue;
}

li:hover {
  background: #edf4ff;
  color: #083275;
  transform: translateX(3px);
}

/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* Video responsive */
.contenedor-video {
  padding: 8px clamp(10px, 4vw, 24px);
}

.video-responsive {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  background: black;
}

.video-responsive iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ||||||||||||||||||||||||||||||||||||||||||||||||||||| ENCABEZADO ||||||||||||||||||||||||||||||||||||||||||||||||||||| */
header {
  position: fixed;
  top: 0;

  width: 100%;
  z-index: 1000;

  display: flex;
  flex-direction: column;
}

/* ========================================== */
/* Filas del encabezado */
/* >>> 1 de 2, la parte superior <<<<<<<<<<<<<<<<<<<<< */
/* FILA SUPERIOR */
.encabezadoFilaSuperior {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: black;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  box-sizing: border-box;
}

.nombreEmpresaEncabezado,
.logotipoEncabezado {
  flex: 1;
  z-index: 2;
}

/* Nombre de la empresa */
.nombreEmpresaEncabezado {
  color: white;
  text-align: left;

  font-size: clamp(13px, 1.7vw, 24px);
}

/* Descripción del sitio */
.descripcionWebEncabezado {
  position: absolute;

  left: 50%;
  transform: translateX(-50%);

  width: 100%;

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

  pointer-events: none;
}

/* logotipo en el encabezado */
.logotipoEncabezado {
  flex: 1;

  display: flex;
  justify-content: flex-end;
  /* izquierda */
  align-items: center;
}

.logotipo {
  width: clamp(2px, 5vw, 38px);

  margin: 0;
  padding: 0.4em 0.4em 0.4em 0;

  display: block;
}

/* >>> 2 de 2, la parte inferior <<<<<<<<<<<<<<<<<<<<< */
.encabezadoFilaInferior {
  display: flex;
  width: 100%;
  font-weight: bold;
  font-family:
    "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  padding: 0.2% 0 0.2% 0;
  text-align: center;
  background-color: rgb(218, 201, 201);
}

/* >>> Elementos del menú, siete partes <<<<<<<<<<<<<<<<<<<<< */
.menuEncabezado {
  width: 16%;
  cursor: pointer;
  transition: 0.3s ease;
  /* suaviza el cambio */
  font-size: clamp(14px, 2.8vw, 22px);
}

.separadorMenuEncabezado {
  width: 12%;
}

.inicioMenuEncabezado {
  width: 11%;
  text-align: right;
}

/* ||||||||||||||||||||||||||||||||||||||||||||||||||||| FIN DE ENCABEZADO ||||||||||||||||||||||||||||||||||||||||||||||||||||| */

/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||| PIE DE PÁGINA ||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
footer {
  width: 100%;
  background-color: black;
  position: relative;
  z-index: 200;
  text-align: center;
  padding: 0.65em 0;
}

.descripcionPiePagina {
  display: inline-flex;
  margin: 0;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(13px, 1.6vw, 15px);
  /* clamp(tamaño minimo que tendra, tamaño ideal, tamaño máximo que tendra) */
}

/* ||||||||||||||||||||||||||||||||||||||||||||||||||||| FIN DE PIE DE PÁGINA|||||||||||||||||||||||||||||||||||||||||||||||||||||| */

/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||| CONTENIDO |||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* CONTENEDOR PRINCIPAL */
.presentacion {
  flex: 1;

  width: 100%;

  display: flex;

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

  padding: 20px;

  box-sizing: border-box;
}

/* CAJA DEL CONTENIDO */
.presentacion-contenido {
  width: min(90%, 750px);
  text-align: center;
  background: rgba(255, 255, 255, 0.88);
  padding: clamp(20px, 4vw, 40px);
  border-radius: 14px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.18);
  animation: aparecerTexto 1s ease-out forwards;
}

/* TITULO */
.presentacion-contenido h2 {
  margin: 0 0 15px 0;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
}

/* TEXTO */
.presentacion-contenido p {
  margin: 0;
  line-height: 1.7;

  font-size: clamp(1rem, 2vw, 1.2rem);
}

/* ANIMACION */
@keyframes aparecerTexto {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Indice de contenidos */
.indice {
  display: flex;
  width: 100%;
  align-content: center;
  text-align: center;
  box-sizing: border-box;
}

/* Elementos del indice */
.elementoMenu {
  position: relative;
  z-index: 10;

  touch-action: manipulation;
}

.elementoMenu a {
  display: block;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}

.imagenMenu {
  display: block;
}

/* //////////////////////////////////////////////////////////////////// */
/* CONTENEDOR */
/* |||||||||||||||||||||||||||||||||| */

/* Columna de MENÚ (Ahora se posiciona a la derecha de forma natural) */
/* Columna de MENÚ (Aparecerá a la derecha) */
/* COLUMNA DE MENÚ: Siempre inmóvil en su lugar */
.menu {
  width: 25%;
  height: 100vh;
  /* Ocupa el alto de la pantalla visible */
  background-color: rgb(241, 241, 253);

  /* ESTO LO CONGELA: Se clava arriba y no se mueve aunque la página baje */
  position: sticky;
  top: 0;
}

/* Columna de CONTENIDO */
/* COLUMNA DE CONTENIDO: Se mueve libremente con el scroll de la página */
.contenido {
  width: 75%;
  background-color: rgb(255, 248, 227);
  min-height: 100vh;
  padding-bottom: 80px;
  box-sizing: border-box;
}

/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* Contenido del menú y resaltado de elementos */
.menu-contenido {
  padding: 0;
  margin: 0;
  font-family: "Segoe UI", "Gill Sans", "Trebuchet MS", sans-serif;
  font-size: clamp(0.95rem, 1.1vw, 1.08rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* Menú desplegable */

.contenido-bloque {
  display: none;
  padding-left: 15px;
}

.contenido-bloque.abierto {
  display: block;
}

.titulo-bloque {
  cursor: pointer;
  user-select: none;
}

.menu-contenido details {
  margin: 4px 0;
}

.menu-contenido summary {
  cursor: pointer;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
}

.menu-contenido summary::-webkit-details-marker {
  display: none;
}

.menu-contenido summary::after {
  content: "▶";
  margin-left: 6px;
  /* separación de la flecha */
  font-size: 0.9em;
}

.menu-contenido details[open] summary::after {
  content: "▼";
}

/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */

/* Separador de elementos del menú */
.separador-menu {
  border: none;
  margin: 8px 0;
}

/* Elementos del sub-menú */
.sub-menu {
  font-weight: normal;
  color: blue;
}

/* Separador de elementos del contenido */
.separador-contenido {
  border: none;
  margin: 40px 0 0 0;
}

/* ||||||||||||||||||||||||||||||||||||||||||| */
/* Estilos para menús */
.menu-flotante {
  display: flex;
  flex-direction: column;
}

.menu-flotante a {
  text-decoration: none;
  color: #1f2933;
  border-radius: 8px;
  font-weight: 500;
  transition:
    background 0.2s ease,
    transform 0.15s ease;
}

.menu-flotante a:hover {
  background: #e5f3ff;
  transform: translateX(4px);
}

.tituloSeccionMenu {
  color: green;
  margin: 0;
  padding: 0;
}

/* ||||||||||||||||||||||||||||||||||||||||||| */
/* //////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////// */
/* PARA USO GENERAL */
/* Informaciòn */
.informacion {
  width: 100%;
  box-sizing: border-box;
  font-size: clamp(0.9rem, 1.2vw, 1.1rem);
  line-height: clamp(1.6, 2.2vw, 2.6);
  align-items: center;
  margin: auto 0;
  padding: 0 clamp(20px, 4vw, 30px);
  text-align: justify;
  font-family: "Inter", "Segoe UI", sans-serif;
}

/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* ELEMENTO ACTIVO GENERAL (Funciona en cualquier li con la clase .activo) */
li.activo {
  background: linear-gradient(135deg, #2563eb, #1e40af) !important;
  color: white !important;
  font-weight: bold !important;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.25);
  transform: translateX(4px);
  transition: all 0.2s ease;
  /* Opcional: para que el cambio no sea brusco */
}

/* FORZAR COLOR BLANCO EN ELEMENTOS INTERNOS (Como spans o texto directo) */
li.activo * {
  color: white !important;
}











/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||| FIN DEL CONTENIDO ||||||||||||||||||||||||||||||||||||||||||||||||||||| */

/* Efecto de movimiento para imagenes */
.efecto {
  transition: transform 0.25s ease;
  cursor: pointer;
}

.efecto:hover {
  transform: scale(1.1);
}

/* Anular el cursor en uno o varios elementos */
.noCursor {
  cursor: default;
}

/* Ocultar elementos para menus desplegables */
.oculto {
  display: none;
}


/*
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
  */

/* PARA LAPTOPS Y PANTALLAS GRANDES */
@media screen and (min-width: 1025px) {

  /* Ocultar elementos */
  .ocultoEnPc {
    display: none !important;
  }

  /* |||||||||||||||||||||||||||||||||||||||||||||| ENCABEZADO Y PIE DE PÁGINA ||||||||||||||||||||||||||||||||||||||||||||||||||||| */
  /* Espaciado en el encabezado y el pie de página, para no cubrir el contenido */

  /* ||||||||||||||||||||||||||||||||||||||||||| FIN DE ENCABEZADO Y PIE DE PÁGINA ||||||||||||||||||||||||||||||||||||||||||||||||| */

  /* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||| CONTENIDO |||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
  body {
    background-image: url("/src/assets/images/backgrounds/fondo_laptop.0.10.png");
  }

  body::before {
    background-image: url("/src/assets/images/backgrounds/fondo-laptop.gif");
  }

  .indice {
    padding: 0 40px 40px 40px;
  }

  .elementoMenu {
    position: relative;
    display: inline-block;
    padding: 0 0 0 0;
    width: 25%;
  }

  .imagenMenu {
    width: 80%;
  }

  /* Animación elegante */
  @keyframes aparecerTexto {
    from {
      opacity: 0;
      transform: translateY(50px) scale(0.9);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  /* Animación: aparece y se desliza desde la izquierda */
  @keyframes aparecerTexto {
    from {
      opacity: 0;
      transform: translateX(-40px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* ||||||||||||||||||||||||||||||||||||||||| */
  /* Reversa horizontal para contenido */
  .reversaHorizontal {
    flex-direction: row-reverse;
  }

  /* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||FIN DEL CONTENIDO ||||||||||||||||||||||||||||||||||||||||||||||||||||| */



}

/*
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
  */

/* PARA TABLETAS Y DISPOSITIVOS DE TAMAÑO MEDIO */
@media (min-width: 768px) and (max-width: 1024px) {

  /* Ocultar elementos */
  .ocultoEnTablet {
    display: none !important;
  }

  /* |||||||||||||||||||||||||||||||||||||||||||||| ENCABEZADO Y PIE DE PÁGINA ||||||||||||||||||||||||||||||||||||||||||||||||||||| */
  /* Espaciado en el encabezado y el pie de página, para no cubrir el contenido */

  /* ||||||||||||||||||||||||||||||||||||||||||| FIN DE ENCABEZADO Y PIE DE PÁGINA ||||||||||||||||||||||||||||||||||||||||||||||||| */

  /* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||| CONTENIDO |||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */

  body {
    background-image: url("/src/assets/images/backgrounds/fondo_tablet.0.10.png");
  }

  body::before {
    background-image: url("/src/assets/images/backgrounds/fondo-tablet.gif");
  }

  .indice {
    padding: 0 20px 20px 20px;
  }

  .elementoMenu {
    width: 100%;
    padding: 0 0 0 0;
  }

  .imagenMenu {
    width: 90%;
  }

  /* ||||||||||||||||||||||||||||||||||||||||| */
  /* Reversa horizontal para contenido */
  .reversaHorizontal {
    flex-direction: row-reverse;
  }

  /* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||| FIN DEL CONTENIDO ||||||||||||||||||||||||||||||||||||||||||||||||||||| */
}

/*
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
  */

/* PARA DISPOSITIVOS MOVILES Y PANTALLAS PEQUEÑAS */
@media (max-width: 767px) {

  /* Ocultar elementos */
  .ocultoEnMovil {
    display: none !important;
  }

  body {
    background-image: url("/src/assets/images/backgrounds/fondo_movil.0.10.png");
  }

  body::before {
    background-image: url("/src/assets/images/backgrounds/fondo-movil.gif");
  }

  h2 {
    margin-top: 15px;
  }

  /* |||||||||||||||||||||||||||||||||||||||||||||| ENCABEZADO Y PIE DE PÁGINA ||||||||||||||||||||||||||||||||||||||||||||||||||||| */
  /* Espaciado en el encabezado y el pie de página, para no cubrir el contenido */

  /* ||||||||||||||||||||||||||||||||||||||||||| FIN DE ENCABEZADO Y PIE DE PÁGINA ||||||||||||||||||||||||||||||||||||||||||||||||| */

  /* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||| CONTENIDO |||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */

  .indice {
    flex-direction: column;
    align-items: center;
    /* centra horizontalmente */
    padding: 1% 0 8% 0;
  }

  .elementoMenu {
    width: 60%;
    padding: 2% 0 2% 0;
  }

  .imagenMenu {
    width: 100%;
  }

  /* ////////////////////////////////////////////////////////////////////////////////// */
  /* CONTENIDO ABAJO */
  .contenido {
    width: 100%;
    margin-right: 0;
  }

  /* CONTENEDOR PADRE DEL MENÚ: El que se clava al encabezado */

  .menu {
    display: block;
    width: 100%;
    height: auto;
    position: -webkit-sticky;
    position: sticky;

    top: 0;

    order: -1;
    z-index: 900;
    margin: 0;
    padding: 0;
    background-color: rgb(241, 241, 253);
  }

  /* ////////////////////////////////////////////////////////////////////////////////// */
  /* Ventana flotante */
  .menu-contenido {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: min(92%, 420px);
    max-height: 90vh;
    overflow-y: auto;
    background: white;
    border-radius: 0 0 18px 18px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    z-index: 2000;
    display: none;
  }

  /* Mostrar ventana */
  .menu-contenido.activo {
    display: block;
  }

  /* Fondo oscuro */
  .overlay-menu {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1999;
    display: none;
  }

  .overlay-menu.activo {
    display: block;
  }

  /* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||| FIN DEL CONTENIDO ||||||||||||||||||||||||||||||||||||||||||||||||||||| */
}

/*
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
  */