*{
    padding: 0rem;
    margin: 0rem;
    box-sizing: border-box;
}
:root {
    /* seccion1*/
    --section1_Titulo_Color: rgb(255, 255, 255);
    --section1_Titulo_Font_Desktop: 2rem;
    --section1_Titulo_Font_Phone: 2rem;
    --section1_Logo_Font_Desktop: 6rem;
    --section1_Logo_Font_Phone: 6rem;

    --section1_Boton_Color_Fondo: rgba(255, 255, 255,0.1);
    --section1_Boton_Color_Texto: white;
    --section1_Boton_Borde: 3rem;
    --section1_Boton_Alto: 6rem;
    --section1_Boton_Ancho: 6rem;
    --section1_Boton_Ilegal_Ancho: 13rem;

    --fuente_Principal: "Lexend Mega", sans-serif;
    /* boton de icono*/
    --Boton_Navegacion_Color_Fondo: #8d8377;
    --Boton_Navegacion_Color_Icono: white;
    --Boton_Navegacion_Color_Fondo_Hover: white;
    --Boton_Navegacion_Color_Icono_Hover: black;

    /* seccion2*/
    --section2_Color_Fondo: white;
    --section2_Color_Titulo: white;
    --section2_Boton_Color_Fondo: black;

    /* seccion3*/
    --section3_Color_Fondo: white;
    --section3_Color_Titulo: black;
    --section3_Color_Parrafos: rgb(151, 151, 151);

    /* seccion4*/
    --section4_Color_Fondo: white;

    /* seccion5*/
    --section5_Color_Fondo: white;
    --section5_Color_Titulo: white;
    --section5_Boton_Borde: 0rem;
    --section5_Titulo_Font_Desktop: 2rem;
    --section5_Titulo_Font_Phone: 1rem;

    /* seccion6*/
    --section6_Color_Fondo: white;
    --section6_Color_Titulo: black;
    --section6_Color_Parrafos: rgb(151, 151, 151);
    --section6_Post_Borde: 0rem;
    --section6_Description_Color_Fondo: black;
    --section6_Titulo_Font_Desktop: 2rem;
    --section6_Titulo_Font_Phone: 1rem;
    --section6_Parrafo_Font_Desktop: 1rem;
    --section6_Parrafo_Font_Phone: 0.8rem;
    --section6_Espacio_Contorno: 1rem;

    /* seccion7*/
    --section7_Panel_Borde: 0rem;
    --section7_Panel_Color_Fondo: black;
    --section7_Titulo_Font_Desktop: 1.5rem;
    --section7_Titulo_Font_Phone: 1rem;
    --section7_Parrafo_Font_Desktop: 1rem;
    --section7_Parrafo_Font_Phone: 0.8rem;
    --section7_Color_Texto_Opciones: white;
    --section7_Boton_Icono_Color_Fondo: black;
    --section7_Boton_Icono_Opciones_Color_Fondo: black;
    --section7_Slider: black;

    /* seccion71*/
    --section71_Color_Fondo: white;
    --section71_Post_Borde: 0rem;
    --section71_Color_Titulo: black;
    --section71_Color_Titulo_Fondo: black;
    --section71_Titulo_Font_Desktop: 2rem;
    --section71_Titulo_Font_Phone: 1rem;
    --section71_Titulo_Espacio: 1rem;

    /* seccion8*/
    --section8_Color_Fondo: white;
    --section8_Color_Titulo: rgb(0, 0, 0);
    --section8_Aviso_Borde: 0rem;
    --section8_Titulo_Color_Fondo: #8d8377;
    --section8_Espacio_Avisos: 0rem;

    /* seccion9*/
    --section9_Color_Fondo: white;
    --section9_Boton_Color_Fondo: black;
    --section9_Boton_Color_Texto: white;
    --section9_Boton_Borde: 0rem;
    --section9_Boton_Borde_Libro: 0rem;
    --section9_Color_Parrafos: rgb(151, 151, 151);
    --section9_Color_Iconos: black;

    /* seccion10*/
    --section10_Color_Fondo: white;
    --section10_Color_Titulo: black;
    --section10_Color_Parrafos: #979797;
    --section10_Font_Desktop: 1rem;
    --section10_Font_Phone: 0.8rem;

    /* etiquetas*/
    --etiqueta_Color_Fondo: rgba(0, 0, 0,0.5);
    --etiqueta_Color_Texto: white;
    --etiqueta_Borde: 1rem;
    --etiqueta_Font_Desktop: 0.6rem;
    --etiqueta_Font_Phone: 0.6rem;


}
html{
    font-size: 16px;
    font-family: var(--fuente_Principal);
}
::selection {
  background-color: #8d1818; /* color de fondo al seleccionar texto */
  color: #ffffff; /* color del texto seleccionado */
}
.icono-GeneralBoton svg {
  stroke: currentColor;
}
/* Los botones solo heredan la fuente de la marca si el cliente lo activa en su panel
   (colores.fuente_Principal_Botones). Si no, el revert los devuelve a la tipografia por
   defecto del navegador, que es como se ven cuando la opcion esta desactivada.
   La variable se deja SIN definir en :root a proposito: es coloresMarca.js quien la pone
   o la quita, y solo asi el fallback del var() puede entrar en juego. */
button{
  font-family: var(--fuente_Principal_Botones, revert);
}
/* sectionErrores *********************************************************************/
.sectionErrores{
  background: black;
  width: 100%;
  height: 100vh;
  padding: 1rem;

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

  position: fixed;
  z-index: 10;
  display: none;
}
.sectionErrores.activo{
  display: flex;
  justify-content: center;
  align-items: center;
}
.sectionErrores p{
  color: #ffffff;
}

/* section1 *********************************************************************/
.section1{
  position: relative;
  width: 100%;
  height: 100vh;
}
.videoFondo {
    position: absolute;
    /* z-index: -1; */
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.video-sedes{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.section1 .content-Saludo{
  width: 100%;
  height: 56%;
  position: relative;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 1rem;

}
.section1 .content-Saludo h1{
  color: var(--section1_Titulo_Color);
  text-align: center;
  font-size: var(--section1_Titulo_Font_Phone);
}
.section1 .content-Saludo img{
  width: var(--section1_Logo_Font_Phone);
}
.section1 .content-Saludo canvas{
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  cursor: crosshair;
  touch-action: none; /* evita scroll accidental al tocar en móvil */
}
.section1 .content-Botones{
  position: absolute;
  bottom: 0;
  width: 100%;
  min-height: 44%;

  display: flex;
  flex-wrap: wrap;
  align-items: start;/* premium none */
  justify-content: center;
  align-content: start;/* premium none */
  gap: 1rem;
  padding: 1rem;
}
.section1 .content-Botones button,
.section1 .content-Botones a {
  width: var(--section1_Boton_Ancho);
  height: var(--section1_Boton_Alto);
  padding: 1.5rem 0.5rem;

  background: var(--section1_Boton_Color_Fondo);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--section1_Boton_Color_Texto);
  border: none;
  border-radius: var(--section1_Boton_Borde);

  transition: background 0.4s ease;

}
.section1 .content-Botones a{
  align-items: center;
  justify-content: center;
  text-decoration: none;
  display: inline-flex;
}

#btn-InformacionLegal{
  width: var(--section1_Boton_Ilegal_Ancho);
  border-radius: var(--section1_Boton_Borde);
}
/* El boton de contacto directo (renderizacion/section1.js) se pinta por clase y no con
   un style desde el JS: un color en linea le gana a cualquier regla de la hoja, y este
   seria el unico boton del nav que no responde al :hover. Por lo mismo tampoco va por
   #btn-ContactoDirecto: un id (1,0,0) tambien le ganaria.
   Asi la especificidad queda en (0,3,1), igual que la del :hover de abajo, que va
   despues en el archivo y por eso sigue ganando. */
.section1 .content-Botones a.contacto-Whatsapp {
  background: green;
}
.section1 .content-Botones a.contacto-Correo {
  background: rgb(56, 189, 248);
}
.section1 .content-Botones button:hover,
.section1 .content-Botones a:hover {
  cursor: pointer;
  background: var(--Boton_Navegacion_Color_Fondo_Hover);
  color: var(--Boton_Navegacion_Color_Icono_Hover);
}
@media (min-width: 1000px) {/* pantalla ≥ 1000px (desktops) */
    .section1 .content-Saludo{
      height: 75%;
    }
    .section1 .content-Saludo h1{
      font-size: var(--section1_Titulo_Font_Desktop);
    }
    .section1 .content-Saludo img{
      width: var(--section1_Logo_Font_Desktop);
    }
    .section1 .content-Botones {
      /* min-height: 12rem; */
      min-height: 25%;
    }
}
/* section2 *********************************************************************/
.section2{
  width: 100%;
  height: 100vh;
  padding: 1rem;

  background: var(--section2_Color_Fondo);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  position: fixed;/* respecto a body */
  top: 0;
  left: 0;

  transform: translateX(-100%);
  /* transform: translateX(0%); *//* prueba */

  transition: transform 0.4s ease;
}
.section2.activo{
  transform: translateX(0%);
}
.section2 .content-Botones{
  width: 100%;
  height: 89%;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
}
.section2 .content-Botones .content-Sedes{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.section2 .content-Botones button{
  width: 13rem;
  padding: 1rem;

  background: var(--section2_Boton_Color_Fondo);
  color: var(--section2_Color_Titulo);
  border: none;
  border-radius: var(--section1_Boton_Borde);

  transition: background 0.4s ease;
}
.section2 .content-Botones .content-Volver button{
  width: calc(var(--section1_Boton_Ancho) - 1rem);
  height: calc(var(--section1_Boton_Alto) - 1rem);

  background: var(--Boton_Navegacion_Color_Fondo);

  color: var(--Boton_Navegacion_Color_Icono);
  border: none;
  border-radius: var(--section1_Boton_Borde);
  font-size: 2rem;

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

  transition: background 0.4s ease;
}

.section2 .content-Botones button:hover{
  cursor: pointer;
  background: var(--Boton_Navegacion_Color_Fondo_Hover);
  color: var(--Boton_Navegacion_Color_Icono_Hover);
}
@media (min-width: 1000px) {/* pantalla ≥ 1000px (desktops) */
    .section2 .content-Botones{
      height: 100%;
    }
    .section2 .content-Botones button{
      width: 20rem;
    }
    .section2 .content-Botones .content-Volver button{
      width: var(--section1_Boton_Ancho);
      height: var(--section1_Boton_Alto);
    }
}
/* section3 *********************************************************************/
.section3{
  width: 100%;
  height: 100vh;

  background: var(--section3_Color_Fondo);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  position: fixed;/* respecto a body */
  top: 0;
  left: 0;

  /* transform: translateX(-100%); */
  /* transform: translateX(0%); *//* prueba */
  /* transition: transform 0.4s ease; */

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.section3.activo{
  /* transform: translateX(0%); */
  opacity: 1;
  visibility: visible;
}
.section3 figure{
  width: 100%;
  height: 45%;
  text-align: center;
}
.section3 img{
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}
.section3 .content-Description{
  width: 100%;
  height: 32%;

  padding: 1rem;
  font-size: 0.8rem;
}
.section3 .content-Description h2{
  margin-bottom: 1rem;
  color: var(--section3_Color_Titulo);
}
.section3 .content-Description p{
  color: var(--section3_Color_Parrafos);
}
.section3 .content-Botones{
  width: 100%;
  height: 23%;

  display: flex;
  justify-content: center;
  align-items: start;
  gap: 1rem;

}
.section3 .content-Botones a,
.section3 .content-Botones button{
  width: calc(var(--section1_Boton_Ancho) - 1rem);
  height: calc(var(--section1_Boton_Alto) - 1rem);

  background: var(--Boton_Navegacion_Color_Fondo);

  color: var(--Boton_Navegacion_Color_Icono);
  border: none;
  border-radius: var(--section1_Boton_Borde);

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

  transition: background 0.4s ease;
}
/* section3.js muestra y oculta el boton de contacto y sus dos iconos con la propiedad
   "hidden" en cada click de sede. Hace falta declararlo aqui: el [hidden] que trae el
   navegador tiene la especificidad mas baja que existe, asi que la regla de display de
   arriba lo ganaria y el elemento se seguiria viendo. */
.section3 .content-Botones [hidden] {
  display: none;
}
/* Se pinta por clase y no por nth-of-type porque el boton de contacto puede quedar oculto
   cuando la sede no tiene ninguno configurado (ver renderizacion/section3.js): contando
   posiciones, el de ubicacion podria pintarse del color equivocado.
   La especificidad se mantiene igual que la del :hover de abajo, que va despues en el
   archivo y por eso lo sigue ganando. */
.section3 .content-Botones a.contacto-Whatsapp {
  background: green;
}
.section3 .content-Botones a.contacto-Correo {
  background: rgb(56, 189, 248);
}
.section3 .content-Botones a.btn-Ubicacion {
  background: rgb(0, 128, 122);
}
.section3 .content-Botones a:hover,
.section3 .content-Botones button:hover{
  cursor: pointer;
  background: var(--Boton_Navegacion_Color_Fondo_Hover);
  color: var(--Boton_Navegacion_Color_Icono_Hover);
}

@media (min-width: 1000px) {/* pantalla ≥ 1000px (desktops) */
    .section3 figure{
      height: 55%;
    }
    .section3 .content-Description{
      height: 25%;
      font-size: 1rem;
    }
    .section3 .content-Botones{
      height: 20%;
    }
    .section3 .content-Botones a,
    .section3 .content-Botones button{
      width: var(--section1_Boton_Ancho);
      height: var(--section1_Boton_Alto);
    }
}
/* section4 *********************************************************************/
.section4{
  width: 100%;
  height: 100vh;

  background: var(--section4_Color_Fondo);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  position: fixed;/* respecto a body */
  top: 0;
  left: 0;

  /* transform: translateX(-100%); */
  /* transform: translateX(0%); *//* prueba */
  /* transition: transform 0.4s ease; */

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.section4.activo{
  /* transform: translateX(0%); */
  opacity: 1;
  visibility: visible;
}
.section4 .content-Catalogo{
  position: relative;

  width: 100%;
  height: 77%;

  display: flex;
  align-items: center;
  justify-content: center;
}
.section4 .content-Catalogo img{
  width: 5rem
}
.hint-TocaAqui{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;

  pointer-events: none;
  z-index: 5;

  opacity: 0;
  transition: opacity 0.4s ease;
}
.hint-TocaAqui.visible{
  opacity: 1;
}
.hint-TocaAqui-svg{
  width: 4rem;
  height: 4rem;
}
.hint-anillo{
  fill: none;
  stroke: var(--Boton_Navegacion_Color_Icono);
  stroke-width: 2;
  transform-origin: 50px 50px;
  animation: hint-pulso 1.6s ease-out infinite;
}
.hint-anillo-delay{
  animation-delay: 0.8s;
}
.hint-punto{
  fill: var(--Boton_Navegacion_Color_Icono);
}
.hint-TocaAqui span{
  color: var(--Boton_Navegacion_Color_Icono);
  font-size: 0.9rem;
  background: rgba(0, 0, 0, 0.35);
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  white-space: nowrap;
}
@keyframes hint-pulso{
  0%{
    transform: scale(0.4);
    opacity: 0.9;
  }
  100%{
    transform: scale(2.2);
    opacity: 0;
  }
}
.section4 .content-Botones{
  position: relative;
  width: 100%;
  height: 23%;

  display: flex;
  justify-content: center;
  align-items: start;
  gap: 1rem;


}
.section4 .content-Botones button{
  width: calc(var(--section1_Boton_Ancho) - 1rem);
  height: calc(var(--section1_Boton_Alto) - 1rem);

  background: var(--Boton_Navegacion_Color_Fondo);

  color: var(--Boton_Navegacion_Color_Icono);
  border: none;
  border-radius: var(--section1_Boton_Borde);
  font-size: 2rem;

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

  transition: background 0.4s ease;
}

.section4 .content-Botones button:hover{
  cursor: pointer;
  background: var(--Boton_Navegacion_Color_Fondo_Hover);
  color: var(--Boton_Navegacion_Color_Icono_Hover);
}
@media (min-width: 1000px) {/* pantalla ≥ 1000px (desktops) */
    .section4 .content-Catalogo{
      height: 84%;
    }
    .section4 .content-Botones{
      height: 16%;
    }
    .section4 .content-Botones button{
      width: var(--section1_Boton_Ancho);
      height: var(--section1_Boton_Alto);
    }
}
/* section5 *********************************************************************/
.section5{
  width: 100%;
  height: 100vh;

  background: var(--section5_Color_Fondo);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  position: fixed;/* respecto a body */
  inset: 0;

  transform: translateX(100%);
  /* transform: translateX(0%); *//* prueba */

  transition: transform 0.4s ease;
}
.section5.activo{
  transform: translateX(0%);
}
.section5 .content-Nosotros{
  width: 100%;
  height: 77%;

  display: flex;
  flex-wrap: wrap;
  padding: 1rem;
  gap: 1rem;
}
.section5 .content-Nosotros button{
  width: calc(50% - 0.5rem);
  border: none;
  color: var(--section5_Color_Titulo);

  border-radius: var(--section5_Boton_Borde);
  padding: 0.5rem;

  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.section5 .content-Nosotros button::before{
  content: "";
  position: absolute;
  inset: 0;

  background-image: inherit;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transition: transform 0.5s ease;
}
.section5 .content-Nosotros button:hover::before{
  transform: scale(1.12);
}
/* El texto tiene que quedar por encima de esa capa. */
.section5 .content-Nosotros button span{
  font-size: var(--section5_Titulo_Font_Phone);
  position: relative;
}
/* .section5 .content-Nosotros button:hover{
  opacity: 0.5;
  cursor: pointer;
} */
.section5 .content-Botones{
  width: 100%;
  height: 23%;

  display: flex;
  justify-content: center;
  align-items: start;
  gap: 1rem;

}
.section5 .content-Botones button{
  width: calc(var(--section1_Boton_Ancho) - 1rem);
  height: calc(var(--section1_Boton_Alto) - 1rem);

  background: var(--Boton_Navegacion_Color_Fondo);

  color: var(--Boton_Navegacion_Color_Icono);
  border: none;
  border-radius: var(--section1_Boton_Borde);

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

  transition: background 0.4s ease;
}

.section5 .content-Botones button:hover{
  cursor: pointer;
  background: var(--Boton_Navegacion_Color_Fondo_Hover);
  color: var(--Boton_Navegacion_Color_Icono_Hover);
}
@media (min-width: 1000px) {
    .section5 .content-Nosotros{
      height: 84%;
    }
    .section5 .content-Botones{
      height: 16%;
    }
    
    .section5 .content-Nosotros button{
      width: calc(25% - 0.75rem);
    }
    .section5 .content-Nosotros button span{
      font-size: var(--section5_Titulo_Font_Desktop);
    }
    .section5 .content-Botones button{
      width: var(--section1_Boton_Ancho);
      height: var(--section1_Boton_Alto);
    }
    
}
/* section6 *********************************************************************/
.section6{
  width: 100%;
  height: 100vh;

  background: var(--section6_Color_Fondo);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  position: fixed;/* respecto a body */
  top: 0;
  left: 0;

  /* transform: translateX(100%); */
  /* transform: translateX(0%); *//* prueba */
  /* transition: transform 0.4s ease; */

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.section6.activo{
  /* transform: translateX(0%); */
  opacity: 1;
  visibility: visible;
}
.section6 .content-Nosotros{
  position: relative;
  width: 100%;
  height: 75%;

  display: flex;
  align-items: flex-start;
  gap: 1rem;

  overflow-y: auto;
  padding: var(--section6_Espacio_Contorno);
}
/* Las columnas las crea section6.js, una en movil y dos en escritorio. Va aqui un flex
   por columna y no un flex-wrap sobre las figuras: con wrap cada fila se alinea a la
   figura mas alta y debajo de la mas baja queda un hueco. */
.section6 .content-Nosotros .columna-Nosotros{
  flex: 1;
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.section6 .content-Nosotros figure{
  position: relative;
  width: 100%;
  height: auto;

  /* overflow: hidden; */
}
.section6 .content-Nosotros figure img{
  width: 100%;
  border-radius: var(--section6_Post_Borde);
}
 .section6 .content-Nosotros figure figcaption {
    background: var(--section6_Description_Color_Fondo);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: var(--section6_Post_Borde);
    padding: 1rem;

    display: flex;
    flex-direction: column;
    
    gap: 0.5rem;

}
.section6 .content-Nosotros figure figcaption h3 {
    color: var(--section6_Color_Titulo);
    font-size: var(--section6_Titulo_Font_Phone);
    width: 100%;
}
.section6 .content-Nosotros figure figcaption .descripcion-preview {
    color: var(--section6_Color_Parrafos);
    font-size: var(--section6_Parrafo_Font_Phone);
    width: 100%;
    /* min-width: 0;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden; */
}
.section6 .content-Nosotros figure figcaption:hover {
    cursor: pointer;
}

/* .section6 .content-Nosotros figure figcaption:hover .descripcion-preview {
    -webkit-line-clamp: unset;
    overflow: visible;
}
.section6 .content-Nosotros figure figcaption .descripcion-lista,
.section6 .content-Nosotros figure figcaption .descripcion-despues {
    display: none;
}

.section6 .content-Nosotros figure figcaption:hover .descripcion-lista,
.section6 .content-Nosotros figure figcaption:hover .descripcion-despues {
    display: block;
} */

.section6 .content-Nosotros figure figcaption .descripcion-lista {
    color: var(--section6_Color_Titulo);
    font-size: var(--section6_Parrafo_Font_Phone);
    margin: 0.3rem 0;
    padding-left: 1.2rem;
    /* text-align: left; */
}
.section6 .content-Nosotros figure figcaption .descripcion-despues {
    color: var(--section6_Color_Parrafos);
    font-size: var(--section6_Parrafo_Font_Phone);
}
/* prueba arriba*/
.section6 .content-Botones{
  width: 100%;
  height: 25%;

  display: flex;
  justify-content: center;
  align-items: start;
  gap: 1rem;

  padding: 1rem;
}
.section6 .content-Botones button{
  width: calc(var(--section1_Boton_Ancho) - 1rem);
  height: calc(var(--section1_Boton_Alto) - 1rem);

  background: var(--Boton_Navegacion_Color_Fondo);

  color: var(--Boton_Navegacion_Color_Icono);
  border: none;
  border-radius: var(--section1_Boton_Borde);

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

  transition: background 0.4s ease;
}

.section6 .content-Botones button:hover{
  cursor: pointer;
  background: var(--Boton_Navegacion_Color_Fondo_Hover);
  color: var(--Boton_Navegacion_Color_Icono_Hover);
}
@media (min-width: 1000px) {
    .section6 .content-Nosotros{
      padding: 1rem;
      gap: 1rem;
      height: 81%;
    }
    .section6 .content-Nosotros figure figcaption h3 {
      font-size: var(--section6_Titulo_Font_Desktop);
  }
    .section6 .content-Nosotros figure figcaption {
      font-size: var(--section6_Parrafo_Font_Desktop);
    }
    .section6 .content-Botones{
      height: 19%;
    }
    .section6 .content-Botones button{
      width: var(--section1_Boton_Ancho);
      height: var(--section1_Boton_Alto);
    }
    .section6 .content-Nosotros figure figcaption:hover {
      cursor: pointer;
      /* left: 1rem; */
  }
}
/* section7 *********************************************************************/
.section7{
  width: 100%;
  height: 100vh;

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  position: fixed;/* respecto a body */
  top: 0;
  left: 0;

  transform: translateY(100%);
  /* transform: translateX(0%); *//* prueba */

  transition: transform 0.6s ease;
}
.section7.activo{
  transform: translateY(0%);
}

.section7 .content-Ver3D{
  position: relative;
  width: 100%;
  /* height: 76%; */
  height: 100vh;

  background-color: #e9e9e9;
  background-size: cover;
  background-position: center;
  
}
.section7 .content-Ver3D .content-BtnFondos3D{
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.section7 .content-Ver3D .content-BtnFondos3D h2{
  font-size: var(--section7_Titulo_Font_Phone);
}
.section7 .content-Ver3D .content-BtnFondos3D p{
  font-size: var(--section7_Parrafo_Font_Phone);
}
.section7 .content-Botones{
  position: absolute;
  height: 23%;
  bottom: 0rem;
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  justify-content: center;
  align-items: start;
  gap: 1rem;
}
.section7 .content-Botones button{
  width: calc(var(--section1_Boton_Ancho) - 1rem);
  height: calc(var(--section1_Boton_Alto) - 1rem);

  background: var(--Boton_Navegacion_Color_Fondo);

  color: var(--Boton_Navegacion_Color_Icono);
  border: none;
  border-radius: var(--section1_Boton_Borde);

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

  transition: background 0.4s ease;
}
.section7 .content-Botones .btn-Options{
  background: var(--section7_Boton_Icono_Color_Fondo);
}
.section7 .content-Botones .btn-MasModelos{
  background: var(--section7_Boton_Icono_Color_Fondo);
}
.section7 .content-Botones button:hover{
  cursor: pointer;
  background: var(--Boton_Navegacion_Color_Fondo_Hover);
  color: var(--Boton_Navegacion_Color_Icono_Hover);
}
/* opciones del 3d */
.section7 .content-Opciones3D{
  padding: 1rem;

  position: fixed;/* respecto a body */
  top: 1rem;
  right: 1rem;
  left: 1rem;

  display: flex;
  flex-wrap: wrap;
  gap: 1rem;

  /* transform: translateX(calc(100% + 1rem)); */
  /* transform: translateX(0%); *//* prueba */
  opacity: 0;
  visibility: hidden;

  background: var(--section7_Panel_Color_Fondo);

  border-radius: var(--section7_Panel_Borde);
  /* transition: transform 0.6s ease; */
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.section7 .content-Opciones3D.activo{
  /* transform: translateX(0%); */
  opacity: 1;
  visibility: visible;
}
.section7 .content-Opciones3D button{
  width: 6rem;
  height: 6rem;

  color: var(--section7_Color_Texto_Opciones);
  border: none;
  border-radius: calc(var(--section7_Panel_Borde) - 1rem);
  padding: 1rem;

  /* El nombre del modelo lo pone el JS y puede ser largo; el boton mide 6rem fijos.
     Estas tres van juntas o no hacen nada: sin nowrap el texto parte en varias lineas
     y nunca llega a desbordar a lo ancho, que es lo unico que recorta el ellipsis. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.section7 .content-Opciones3D button:hover{
  cursor: pointer;
}
.section7 .content-Opciones3D .btn-Premium{
  /* background: rgba(55, 67, 69,1); */
  background: var(--section7_Boton_Icono_Opciones_Color_Fondo);
  width: 4rem;
  height: 4rem;
}
.section7 .content-Opciones3D .btn-Premium:disabled{
  opacity: 0.4;
  cursor: not-allowed;
}

@media (min-width:1000px) {
  .section7 .content-Ver3D .content-BtnFondos3D h2{
    font-size: var(--section7_Titulo_Font_Desktop);
  }
  .section7 .content-Ver3D .content-BtnFondos3D p{
    font-size: var(--section7_Parrafo_Font_Desktop);
  }
  .section7 .content-Opciones3D{
    flex-direction: row;
    flex-wrap: wrap;
  }
  .section7 .content-Opciones3D button{
    transition: flex 0.6s ease;
  }
  .section7 .content-Botones button{
    width: var(--section1_Boton_Ancho);
    height: var(--section1_Boton_Alto);
  }
}
/* masModelos *********************************************************************/
.sectionMasModelos{
  width: 100%;
  height: 100vh;

  position: fixed;
  inset: 0;
  background: var(--section71_Color_Fondo);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);


  /* transform: translateX(-100%); */
  /* transform: translateX(0%); *//* prueba */
  /* transition: transform 0.6s ease; */

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.sectionMasModelos.activo{
  /* transform: translateX(0%); */
  opacity: 1;
  visibility: visible;
}
.sectionMasModelos .content-MasModelos{
  width: 100%;
  height: 75%;
  padding: 1rem;

  overflow-y: auto;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 1rem;

}

.sectionMasModelos .content-MasModelos button{
  width: 100%;
  height: 10rem;

  flex-shrink: 0;

  position: relative;

  border: none;
  /* border-radius: calc(var(--section1_Boton_Borde) - 1rem); */
  border-radius: var(--section71_Post_Borde);
}
.sectionMasModelos .content-MasModelos button:hover{
  cursor: pointer;
  opacity: 0.8;
}
.sectionMasModelos .content-MasModelos button h2{
  color: var(--section71_Color_Titulo);
  background: var(--section71_Color_Titulo_Fondo);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  position: absolute;
  bottom: var(--section71_Titulo_Espacio);
  left: var(--section71_Titulo_Espacio);
  padding: 1rem;
  border-radius: calc(var(--section71_Post_Borde) - 1rem);
  font-size: var(--section71_Titulo_Font_Phone);
}
.sectionMasModelos .content-Botones{
  width: 100%;
  height: 25%;

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

  padding: 1.5rem;
}
.sectionMasModelos .content-Botones button{
  width: calc(var(--section1_Boton_Ancho) - 1rem);
  height: calc(var(--section1_Boton_Alto) - 1rem);

  background: var(--Boton_Navegacion_Color_Fondo);

  color: var(--Boton_Navegacion_Color_Icono);
  border: none;
  border-radius: var(--section1_Boton_Borde);
  font-size: 2rem;

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

  transition: background 0.4s ease;
}

.sectionMasModelos .content-Botones button:hover{
  cursor: pointer;
  background: var(--Boton_Navegacion_Color_Fondo_Hover);
  color: var(--Boton_Navegacion_Color_Icono_Hover);
}
@media (min-width:1000px) {
  .sectionMasModelos .content-MasModelos{
    height: 84%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .sectionMasModelos .content-MasModelos button h2{
    font-size: var(--section71_Titulo_Font_Desktop);
  }
  .sectionMasModelos .content-MasModelos button{
    width: calc(33% - 0.66rem);
    height: 14rem;
  }
  .sectionMasModelos .content-Botones{
    height: 16%;
    padding: 0rem;
  }
  .sectionMasModelos .content-Botones button{
    width: var(--section1_Boton_Ancho);
    height: var(--section1_Boton_Alto);
  }
}
/* section8 *********************************************************************/
.section8{
  width: 100%;
  height: 100vh;

  background: var(--section8_Color_Fondo);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  position: fixed;/* respecto a body */
  top: 0;
  left: 0;

  transform: translateY(100%);
  /* transform: translateX(0%); *//* prueba */

  transition: transform 0.6s ease;
}
.section8.activo{
  transform: translateY(0%);
}
.section8 .content-Avisos{
  height: 77%;
  padding: 1rem;

  overflow-x: auto;
  display: flex;
  gap: var(--section8_Espacio_Avisos);
}
.section8 .content-Avisos .numeroAvisos{

  width: 4rem;
  border-radius: var(--section8_Aviso_Borde);
  font-size: 1.2rem;
  color: var(--section8_Color_Titulo);
  background: var(--section8_Titulo_Color_Fondo);

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

  writing-mode: vertical-rl; /* texto de arriba hacia abajo */
  text-orientation: mixed;

  transform: rotate(180deg);

}
.section8 .content-Avisos img{
  width: auto;
  height: 100%;
  border-radius: var(--section8_Aviso_Borde);
}

.section8 .content-Botones{
  width: 100%;
  height: 23%;

  display: flex;
  justify-content: center;
  align-items: start;
  gap: 1rem;

}
.section8 .content-Botones button{
  width: calc(var(--section1_Boton_Ancho) - 1rem);
  height: calc(var(--section1_Boton_Alto) - 1rem);

  background: var(--Boton_Navegacion_Color_Fondo);

  color: var(--Boton_Navegacion_Color_Icono);
  border: none;
  border-radius: var(--section1_Boton_Borde);
  font-size: 2rem;

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

  transition: background 0.4s ease;
}

.section8 .content-Botones button:hover{
  cursor: pointer;
  background: var(--Boton_Navegacion_Color_Fondo_Hover);
  color: var(--Boton_Navegacion_Color_Icono_Hover);
}
@media (min-width:1000px) {
  .section8 .content-Avisos{
    height: 82%;
  }
  .section8 .content-Botones{
    height: 18%;
    padding: 1rem;
  }
  .section8 .content-Botones button{
    width: var(--section1_Boton_Ancho);
    height: var(--section1_Boton_Alto);
  }
}
/* section9 *********************************************************************/
.section9{
  width: 100%;
  min-height: 100vh;
  padding: 1rem;

  background: var(--section9_Color_Fondo);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  position: fixed;
  /* position: absolute; *//* prueba */
  top: 0;
  left: 0;

  display: flex;
  flex-direction: column;
  gap: 1rem;
  transform: translateY(100%);
  /* transform: translateX(0%); *//* prueba */

  transition: transform 0.6s ease;
}
.section9.activo{
  transform: translateY(0%);
}
.section9 .content-BotonesFooter{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.section9 .content-BotonesFooter button{
  width: 100%;
  max-width: 25rem;
  padding: 1rem;

  background: var(--section9_Boton_Color_Fondo);
  color: var(--section9_Boton_Color_Texto);
  border: none;
  border-radius: var(--section9_Boton_Borde);

  transition: background 0.4s ease;
}
.section9 .content-BotonesFooter button:hover{
  cursor: pointer;
  background: var(--Boton_Navegacion_Color_Fondo_Hover);
  color: var(--Boton_Navegacion_Color_Icono_Hover);
}

#btn-LibroDeReclamaciones{
  width: 100%;
  max-width: 25rem;
  background: aliceblue;
  border-radius: var(--section9_Boton_Borde_Libro);
  text-align: center;
  height: 8rem;
  padding: 0.5rem;
}
#btn-LibroDeReclamaciones img{
  width: auto;
  height: 100%;
}
.section9 .content-Iconos{
  width: 100%;
  height: 3rem;
  padding: 0.5rem;

  display: flex;
  gap: 2rem;
  justify-content: center;

  color: var(--section9_Color_Iconos);
}
.section9 .content-Iconos a{
  height: 100%;
  color: inherit;
}
.section9 .content-Iconos a svg{
  display: block;
  height: 100%;
  width: auto;
}
.section9 .content-Texto{
  width: 100%;

  color: var(--section9_Color_Parrafos);
  text-align: center;
  font-size: 0.8rem;

  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: start;
}
.section9 .content-Botones{
  width: 100%;
  height: 24%;

  display: flex;
  justify-content: center;
  align-items: start;
  gap: 1rem;

  padding: 1.5rem;

}
.section9 .content-Botones button{
  width: calc(var(--section1_Boton_Ancho) - 1rem);
  height: calc(var(--section1_Boton_Alto) - 1rem);

  background: var(--Boton_Navegacion_Color_Fondo);

  color: var(--Boton_Navegacion_Color_Icono);
  border: none;
  border-radius: var(--section1_Boton_Borde);
  font-size: 2rem;

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

  transition: background 0.4s ease;
}
.section9 .content-Botones button:nth-of-type(1) {
  width: 11rem;
  border-radius: var(--section1_Boton_Borde);
  background: rgba(7, 85, 92, 1);
  font-size: 0.9rem;
}
.section9 .content-Botones button:hover{
  cursor: pointer;
  background: var(--Boton_Navegacion_Color_Fondo_Hover);
  color: var(--Boton_Navegacion_Color_Icono_Hover);
}
.section9 .content-Espacio{
  width: 100%;
  height: 3rem;
}
@media (min-width: 1000px) {/* pantalla ≥ 1000px (desktops) */
    .section9 .content-Botones button{
      width: var(--section1_Boton_Ancho);
      height: var(--section1_Boton_Alto);
    }
}
@media (min-width: 600px) {/* pantalla ≥ 1000px (desktops) */
    .section9 .content-Texto{
        text-align: center;
    }
}

/* section10 *********************************************************************/
.section10{
  width: 100%;
  min-height: 100vh;
  padding: 1rem;

  background: var(--section10_Color_Fondo);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  position: fixed;
  top: 0;
  left: 0;

  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: var(--section10_Font_Phone);

  /* transform: translateY(100%); */
  /* transform: translateX(0%); *//* prueba */
  /* transition: transform 0.6s ease; */

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.section10.activo{
  /* transform: translateY(0%); */
  opacity: 1;
  visibility: visible;
}
.section10 .content-Head{
  color: var(--section10_Color_Titulo);

  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.section10 .content-Head p{
  color: var(--section10_Color_Parrafos);
}
.section10 .content-Texto{
  color: var(--section10_Color_Titulo);

  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.section10 .content-Texto p{
  color: var(--section10_Color_Parrafos);
}
.section10 .content-Texto ul{
  padding-left: 1rem;
  color: var(--section10_Color_Parrafos);
}

.section10 .content-Botones{
  width: 100%;
  height: 24%;

  display: flex;
  justify-content: center;
  align-items: start;
  gap: 1rem;

  padding: 1.5rem;

}
.section10 .content-Botones button{
  width: calc(var(--section1_Boton_Ancho) - 1rem);
  height: calc(var(--section1_Boton_Alto) - 1rem);

  background: var(--Boton_Navegacion_Color_Fondo);

  color: var(--Boton_Navegacion_Color_Icono);
  border: none;
  border-radius: var(--section1_Boton_Borde);

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

  transition: background 0.4s ease;
}
.section10 .content-Botones button:hover{
  cursor: pointer;
  background: var(--Boton_Navegacion_Color_Fondo_Hover);
  color: var(--Boton_Navegacion_Color_Icono_Hover);
}
.section10 .content-Espacio{
  width: 100%;
  height: 3rem;
}
@media (min-width: 1000px) {
    .section10{
      padding: 1rem 10rem;
      font-size: var(--section10_Font_Desktop);
    }
    .section10 .content-Botones button{
      width: var(--section1_Boton_Ancho);
      height: var(--section1_Boton_Alto);
    }
}
/* licencia *********************************************************************/
.sectionLicenciaDeUso{
  position: fixed;
  top: 0;
  left: 0;

  width: 75vw;
  height: 100vh;
  background: linear-gradient(135deg, hsl(200, 15%, 8%) 0%, hsl(200, 20%, 2%) 100%);
  

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  font-size: 0.85rem;
  color: rgb(151, 151, 151);
  padding: 1rem;


  transform: translateX(-100%);
  /* transform: translateX(0%); *//* prueba */
  transition: transform 0.4s ease;

}
.sectionLicenciaDeUso.activo{
  transform: translateX(0%);
}

.sectionLicenciaDeUso strong{
  color: rgb(255, 255, 255,0.9);
}
.sectionLicenciaDeUso .enlacesLicencia{
  display: flex;
  gap: 1rem;
}
.sectionLicenciaDeUso .enlacesLicencia a{
  text-decoration: none;
  color: rgba(239, 12, 91);
  padding: 0.5rem 0.2rem;
  /* background: rgba(239, 12, 91); */
  /* border: 1px solid rgba(239, 12, 91); */
}


@media (min-width: 1000px) {
    .sectionLicenciaDeUso {
      font-size: 1rem;
      padding: 1rem 10rem;
    }
}
/* etiquetas de pieza */
.etiqueta-pieza {
    color: var(--etiqueta_Color_Texto);
    background: var(--etiqueta_Color_Fondo);
    padding: 0.5rem;
    border-radius: var(--etiqueta_Borde);
    font-size: var(--etiqueta_Font_Phone);
    max-width: 8rem;
    text-align: center;
    overflow-wrap: break-word;
    font-family: "Lexend Mega", sans-serif;
}
.sliderLuz {
    width: 100%;       
    height: 6px;  
    cursor: pointer;
    accent-color: var(--section7_Slider);  
    margin: 0.5rem 0;
}
@media (min-width:1000px) {
  .etiqueta-pieza {
    font-size: var(--etiqueta_Font_Desktop);
    
  } 
}