/* ===== SECCIÓN DE INICIO ===== */
/* Dos columnas: el texto a la izquierda, la cámara a la derecha.
   Antes iban encimados y el botón caía sobre el cuerpo de la cámara. */
#inicio {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 40px;
  min-height: calc(100vh - 82px); /* 82px = alto de la barra de navegación */
  padding-top: 40px;
  padding-bottom: 60px;
  position: relative;
  overflow: hidden;
}

/* --- Columna de texto --- */
.inicio-contenido {
  position: relative;
  z-index: 2;
  text-align: left;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--dorado);
  margin-bottom: 22px;
}

/* Rayita dorada antes del rótulo, solo en el hero */
#inicio .eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
}

#inicio .eyebrow::before {
  content: "";
  width: 38px;
  height: 1px;
  background-color: var(--dorado);
}

#inicio h1 {
  font-size: clamp(3rem, 6.5vw, 4.8rem);
  letter-spacing: 1px;
  margin-bottom: 22px;
}

.subtitulo {
  font-size: 1.05rem;
  font-weight: 300;
  color: #a8a8a8;
  max-width: 42ch;
  margin-bottom: 40px;
}

.inicio-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Son tres botones dentro de una columna de ~515px: con el padding de
   siempre se pasaban por unos 25px y el renglón se partía solo. Un poco
   más angostos los tres caben en línea. */
.inicio-acciones .boton {
  padding-left: 24px;
  padding-right: 24px;
}

/* --- Columna 3D --- */
#escena-3d {
  position: relative;
  height: min(60vh, 480px);
  /* Sin esto la columna no puede encoger: el canvas trae ancho fijo en px
     y como grid item su min-width por defecto es su contenido. */
  min-width: 0;
}

/* Halo tenue detrás: sin esto la cámara negra se pierde en el fondo negro */
#escena-3d::before {
  content: "";
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(176, 141, 87, 0.18),
    rgba(176, 141, 87, 0) 68%
  );
  filter: blur(26px);
}

#escena-3d canvas {
  position: relative; /* por encima del halo */
  display: block;
  /* Three.js le pone medidas fijas en línea; esto evita que se desborde */
  max-width: 100%;
  max-height: 100%;
}

/* --- Celular: se apilan, el texto primero --- */
@media (max-width: 860px) {
  #inicio {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }

  .inicio-contenido {
    text-align: center;
  }

  #inicio .eyebrow {
    justify-content: center;
  }

  .subtitulo {
    margin-left: auto;
    margin-right: auto;
  }

  .inicio-acciones {
    justify-content: center;
  }

  #escena-3d {
    height: min(45vh, 340px);
    order: -1; /* la cámara arriba, como remate visual */
  }
}

/* --- Celular angosto --- */
/* Con tres botones y el padding de escritorio caía uno por renglón y el
   hero se estiraba más que la pantalla. Apretados entran dos arriba y
   uno abajo. */
@media (max-width: 640px) {
  .inicio-acciones .boton {
    padding: 12px 20px;
    font-size: 0.88rem;
  }
}