:root{
  --overlay: rgba(0,0,0,0.55);
  --pill-bg: #d97706;
  --pill-text: #0b0b0b;

  /* nuevo: ancho máximo del diagrama en pantallas grandes */
  --diagram-max: 1400px; /* súbelo o bájalo a tu gusto (p.ej. 1280px, 1600px) */
}


*{ box-sizing: border-box; margin:0; padding:0; }

html, body{ height: 100%; }

body{ font-family: system-ui, sans-serif; }



.hero{

  position: relative;

  min-height: 100vh;

  background-position: center;

  background-size: cover;

  background-repeat: no-repeat;

  display: flex;

  align-items: center;

  justify-content: center;

}



.hero__overlay{

  position: absolute;

  inset: 0;

  background: var(--overlay);

  z-index: 1;

}



.circle-container{
  position: relative;
  width: min(100%, var(--diagram-max)); /* llena el ancho hasta el tope elegido */
  margin: 0 auto;
  height: auto;
  z-index: 2;
}
.circle-img{
  display: block;
  width: 100%;   /* escala proporcionalmente */
  height: auto;  /* mantiene proporción */
}




/* Capa de botones sobre el círculo */

.buttons-layer{
  position: absolute;
  inset: 0;
  z-index: 3;
}


/* Estilo de botones */

.hotspot{
  position:absolute;
  transform:translate(-50%,-50%);
  display:flex;               /* usamos flex para centrar */
  align-items:center;
  justify-content:center;     /* centra el texto */
  padding: 0 16px;
  min-height:40px;
  border-radius:500px;
  background:transparent;
  border:1px solid var(--pill-bg);
  color:#ffffff;
  font-weight:500;
  font-size:12px;
  line-height:1.2;
  text-decoration:none;
  text-align:center;
  white-space: nowrap;        /* 🔑 evita el salto de línea */
  max-width:none;             /* permite crecer si es necesario */
  min-width:115px;
  transition:transform .12s ease, border-color .2s ease, color .2s ease;
}


.hotspot:hover{

  transform:translate(-50%,-50%) scale(1.06);

  border-color:#fbbf24;

  color:#fbbf24;

}



.hotspot svg{

  width:clamp(12px, 1vw, 14px);          /* Icono adaptable */

  height:clamp(12px, 1vw, 14px);

  stroke:currentColor;

  flex:0 0 auto;

}

/* ====== MODO CELULAR ====== */
@media (max-width: 640px){
  /* Ocultar la imagen del círculo */
  .circle-img {
    display: none;
  }

  /* La capa de botones deja de estar encima de la imagen
     y se convierte en lista apilada */
  .buttons-layer{
    position: static;          /* ya no absoluto */
    inset: auto;
    display: grid;
    grid-template-columns: 1fr; /* 1 columna */
    gap: 12px;
    margin-top: 16px;
    padding: 0 12px;
  }

  /* Botones adaptados al ancho de la pantalla */
  .hotspot{
    position: relative;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100%;
    max-width: none;
    min-width: 0;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    min-height: 44px;
    padding: 0 14px;
  }
}