/* ===== FUENTE SWISS BT ===== */
@font-face{
  font-family: "Swiss721BT";
  src: url("fonts/Swiss_721_BT.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ===== BASE ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body{
  background: #ffffff;
  overflow: hidden; /* UNA SOLA PANTALLA */
  font-family: "Swiss721BT", Arial, sans-serif;
}

/* ===== CONTENEDOR PRINCIPAL ===== */
.stage{
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;  /* CENTRADO VERTICAL */
  gap: clamp(10px, 2vh, 18px);
  padding: clamp(10px, 2vw, 20px);
}

/* ===== SVG ===== */
.svg-shell{
  width: min(1800px, 98vw);   /* más grande en desktop */
  aspect-ratio: 16 / 9;
  max-height: 80vh;          /*  ocupa más altura */
}
.svg-shell svg{
  width: 100%;
  height: 130%;
  display: block;
}

/* Botones */
.hit { cursor: pointer; }

/* Contorno de los botones */
.a36-border{
  transition: fill 0.18s ease, opacity 0.18s ease;
}

/* contorno amarillo a negro */
.hit:hover .a36-border{
  fill: #000 !important;
}

/* Tap móvil */
.hit:active .a36-border{
  fill: #000000 !important;
}

/* ===== TEXTO ===== */
.intro-text{
  width: min(985px, 70vw);
  text-align: center;
  margin-top: -40px;
}

.intro-text p{
  font-size: clamp(13px, 1.6vw, 18px);
  line-height: 1.3;
  color: #111;
  text-align: justify;
  text-align-last: left;
  max-height: 24vh;
  overflow: hidden;
}
@media (max-width: 768px){
  .intro-text{
    max-width: 72vw;
	margin-top: -20px;
  }
  .intro-text p{
    font-size: clamp(7px, 1.1vw, 16px);
    line-height: 1.3;
	max-height: 22vh;
	overflow: hidden;
  }
}
/* ===== ANIMACIONES ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.svg-shell,
.intro-text { opacity: 0; }

.svg-shell.is-in { animation: fadeUp 700ms ease forwards; }
.intro-text.is-in { animation: fadeUp 800ms ease forwards; }

.hit{
  opacity: 0;
  transform: translateY(10px);
}

.hit.is-in{
  animation: fadeUp 650ms ease forwards;
  animation-delay: var(--delay, 0ms);
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .svg-shell, .intro-text, .hit{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}
/* PC */
@media (min-width: 769px){
  .svg-shell{
	margin-top: -6vh;
    width: min(1700px, 98vw);
    max-height: 75vh;
	overflow: hidden;
  }
  .intro-text{
    margin-top: 2vh; /* opcional: compensa visualmente */
  }
}
/* MÓVIL */
@media (max-width: 768px){
	.stage{gap: 10px}
	
	.svg-shell{
		width: 100%;
		max-height: 80vh;}
	.intor-text{
		width: 90vw;
		margin-top: 4px;
	}
}
/* Transición limpia */
.a36-border{
  transition: stroke 0.2s ease, stroke-width 0.2s ease;
}

/* Hover */
.hit:hover .a36-border{
  stroke: #000000;
}

/* Click / tap */
.hit:active .a36-border{
  stroke: #000000;
  stroke-width: 4.5px;
}
/* HOVER: amarillo (fill) -> negro, apuntando al <a> del SVG */
.svg-shell svg a:hover .a36-border,
.svg-shell svg a:focus-visible .a36-border,
.svg-shell svg a:active .a36-border{
  fill: #000 !important;
}

/* Asegura que el hover se detecte en todo el grupo */
.svg-shell svg a { cursor: pointer; }
.svg-shell svg .hit { pointer-events: all; }

/* Tap/press móvil */
.hit:active .cls-4,
.hit:active .cls-2,
.hit.is-press .cls-4,
.hit.is-press .cls-2{
  stroke: #000 !important;
  stroke-width: 4.5px !important;
}
/* ===== PANTALLAS MUY BAJAS (iPhone SE / Android bajos) ===== */
@media (max-height: 680px) and (max-width: 768px){
  .svg-shell{ max-height: 74vh; }

  .intro-text p{
    font-size: clamp(1px, 3.2vw, 8px);
    line-height: 1.4;
    max-height: 16vh;
  }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .svg-shell, .intro-text, .hit{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}
/* ===== DESACTIVAR INTERACCIÓN EN LOGOS ===== */
#EstudioA36,
#AcerosA36,
#EstructurasA36,
#ObjetoA36,
#GrupoAcerosA36 {
  pointer-events: none;
}
/* Solo los botones reaccionan */
.hit {
  pointer-events: all;
  cursor: pointer;
}