body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #272822;
}

main {
  text-align: center;
}

h2 {
  font-size: 3.0rem;        /* tamaño de letra */
  font-weight: bold;      /* negrita */
  font-family: 'Arial', sans-serif;  /* tipo de letra */
  line-height: 42px;       /* altura de línea */
  color: #ffffff;         /* color de texto */
  text-transform: capitalize; /* capitaliza la primera letra de cada palabra */
  text-align: center;     /* opcional: centrar texto */
}

main h3 {
  color: #ffffff;
  font-size: 2.6rem;
  font-weight: 600;
  margin: 2rem auto 1rem;  /* 👈 centra horizontalmente */
  font-family: Arial, sans-serif;

  display: inline-block;
  border-bottom: 2px solid #008080;
  padding-bottom: 5px;
}

main h4 {
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 600;
  font-family: Arial, sans-serif;
  
  /* 1. Cambiamos display para que se comporte como bloque */
  display: block; 
  /* 2. Hacemos que el ancho sea solo el del texto (para que el borde no ocupe todo) */
  width: max-content; 
  /* 3. Quitamos el centrado automático: 2rem arriba, 0 derecha, 1rem abajo, 0 izquierda */
  margin: 2rem 0 1rem 2.5rem; 
  
  border-bottom: 2px solid #008080;
  padding-bottom: 5px;
  text-align: left;
}

main p {
  font-size: 1.1rem;
  color: #ffffff;
  margin: 2rem auto 1rem;
  text-align: justify;
  line-height: 1.6;
  margin-top: 1rem;
  max-width: 800px;
}


.hero {
  position: relative;
  width: 100%;       /* ancho total del contenedor padre */
  height: 35vh;      /* altura que quieras */
  overflow: hidden;
  padding: 0;
  line-height: 0;    /* elimina espacios de línea */
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;   /* elimina espacios blancos debajo de la imagen */
}


.contenedor-hoja {
  max-width: 950px;   /* O el ancho que prefieras */
  margin-left: auto;  /* Empuja desde la izquierda */
  margin-right: auto; /* Empuja desde la derecha */
  
  /* El resto de tus estilos se quedan igual */
  background-color: #272822;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.hero-text {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);

  white-space: nowrap;      /* 👈 Obliga al texto a no saltar de línea jamás */
  width: auto;              /* 👈 El contenedor se ajusta al texto */
  min-width: max-content;   /* 👈 Asegura que el ancho sea el máximo del contenido */

  background-color: rgba(39, 40, 34, 0.98); 
  color: white;
  padding: 0.5rem 2rem;
  border-radius: 18px 18px 0 0; /* Opcional: queda mejor si solo redondeas las esquinas de arriba al estar pegado abajo */

  text-align: center;
  box-shadow: 0 15px 40px rgba(0,0,0,0.6);
}

.indice-lateral {
  position: fixed;
  left: 20px;
  top: 100px; 
  opacity: 0;
  visibility: hidden;
  display: none;

  /* --- CAMBIOS AQUÍ --- */
  width: auto;           /* 👈 Quitamos los 220px */
  min-width: 120px;      /* 👈 Un mínimo para que no se vea muy comprimido */
  max-width: 280px;      /* 👈 Un máximo para que no ocupe media pantalla */
  display: inline-block; /* 👈 Hace que el ancho sea según el contenido */
  /* -------------------- */

  padding: 1.2rem;
  background-color: #272822;
  border: 2px solid #008080; /* El mismo color que el border-bottom de tus h3 */
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  z-index: 100;
  transition: opacity 0.3s ease;
}

/* 2. Esta clase la usaremos para mostrarlo cuando el JS termine el cálculo */
.indice-lateral.visible {
  display: block;
  opacity: 1;
  visibility: visible;
}

.indice-lateral h4 {
  color: #ffffff;
  margin-bottom: 1rem;
  text-align: center;
}

.indice-lateral ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.indice-lateral li {
  margin: 0.6rem 0;
}

.indice-lateral a {
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  display: block;
  transition: color 0.2s ease, transform 0.2s ease;
}

.indice-lateral a:hover {
  color: #FFBF00;
  transform: translateX(4px);
}

.indice-lateral a.seccion-activa {
  color: #FFBF00 !important;
  transform: translateX(10px); /* Un pequeño desplazamiento para dar dinamismo */
  font-weight: bold;
}

.imagen-lateral-intro {
  width: 400px;           /* 👈 Aquí fijas el ancho que quieras */
  flex-shrink: 0;         /* Impide que el texto la aplaste */
  margin-top: 1rem;
}

/* Estado normal de la imagen lateral */
.imagen-lateral-intro img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid #444;
  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
  margin-top: 0.25rem;
  display: block;
  
  /* Transición suave para todos los cambios */
  transition: transform 0.3s ease, border-color 0.3s ease, filter 0.3s ease;
}

/* Efecto al pasar el ratón (Hover) */
.imagen-lateral-intro img:hover {
  transform: scale(1.01);    /* Crece un poquito más (5%) para que se note */
  border-color: #008080;     /* Tu color turquesa */
  filter: brightness(1.2);   /* Se aclara un 20% */
  cursor: pointer;           /* El cursor cambia a la mano de "click" */
}

/* IMPORTANTE: Asegúrate de que el contenedor use el nombre correcto también */
.bloque-introduccion {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  max-width: 800px; 
  margin: 2rem auto; 
  padding: 0; 
  text-align: justify;
}

/* Responsive: si la pantalla es estrecha, la imagen se pone debajo */
@media (max-width: 850px) {
  .bloque-introduccion {
      flex-direction: column;
      align-items: center;
  }
  .texto-intro p {
      text-align: justify;
  }
}

html {
  scroll-behavior: smooth;
}

.lista-materiales {
  max-width: 800px;
  margin: 1rem 0 2rem 3.5rem; /* Alineado a la izquierda */
  text-align: left;
}

.lista-materiales ul {
  list-style: none; /* Quitamos los puntos por defecto */
  padding-left: 0;
}

.lista-materiales li {
  color: #ffffff;
  font-size: 1.1rem;
  line-height: 1.4;
  position: relative;
  padding-left: 25px; /* Espacio para nuestro punto personalizado */
  margin-bottom: 10px;
}

/* Creamos un punto personalizado color turquesa */
.lista-materiales li::before {
  content: "»"; 
  color: #008080; /* El turquesa de tus bordes */
  font-weight: bold;
  font-size: 1.4rem;
  position: absolute;
  left: 0;
  top: -5px;
}

.imagen-zoom-contenedor {
  position: relative;
  width: 90%;
  max-width: 900px;
  margin: 1.5rem auto;
  display: block;
  overflow: hidden; /* Importante para que la lupa no se salga */
  border: 1px solid #333;
}

.img-zoom {
  width: 100%;
  display: block;
}

.lupa-cuadrada {
  position: absolute;
  border: 2px solid #008080;
  width: 300px; /* Tamaño del cuadrado */
  height: 300px;
  display: none;
  pointer-events: none;
  background-repeat: no-repeat;
  background-color: #272822; /* Fondo igual que tu web */
  box-shadow: 0 0 20px rgba(0,0,0,0.8);
  border-radius: 4px; /* Casi cuadrado */
}

.contenedor-3d {
  width: 90%;
  max-width: 900px;
  margin: 1.5rem auto;
  text-align: center;
}

model-viewer {
  width: 100%;
  height: 500px; /* Altura del visor */
  background-color: #1a1a1a; /* Fondo oscuro ligeramente distinto al body */
  border-radius: 12px;
  border: 2px solid #008080; /* Tu color turquesa */
  outline: none;
}

.instrucciones-3d {
  font-size: 0.9rem;
  color: #888;
  text-align: center;
  margin-top: 0.5rem;
  font-style: italic;
}

/* Ajuste para móviles */
@media (max-width: 768px) {
  model-viewer {
      height: 350px;
  }
}

.contenedor-imagen-montaje-pcb {
  width: 90%;
  max-width: 800px;     /* Tamaño ideal para fotos de hardware */
  margin: 3rem auto;    /* Centrado horizontal y respiro vertical */
  display: flex;
  flex-direction: column;
  align-items: center;  /* Centra la imagen y el texto */
}

.img-centrada {
  width: 100%;
  height: auto;
  border-radius: 15px;  /* Bordes suaves para la foto */
  border: 1px solid #444; /* Un marco fino para que no se pierda en el fondo oscuro */
  
  /* Sombra elegante para dar profundidad */
  box-shadow: 0 15px 40px rgba(0,0,0,0.6); 
  
  display: block;
  transition: transform 0.3s ease;
}

/* Un pequeño efecto: cuando pasas el ratón, la foto se aclara un poco */
.img-centrada:hover {
  transform: scale(1.01); /* Un crecimiento casi imperceptible */
  border-color: #008080;  /* El borde cambia a tu turquesa */

}

.pie-foto {
  color: #888;
  font-size: 0.95rem;
  margin-top: 1rem;
  font-style: italic;
  text-align: center;
  font-family: Arial, sans-serif;
  letter-spacing: 0.5px;
}