/* ============================================================
   Células en construcción — mismo lenguaje visual que index / página 5
   Negro / rosa #ff2e88 #D70B65 / verde #baff2e / naranja #ff8a2e
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;
  font-family: 'VT323', 'Courier New', monospace;
  color: #baff2e;
}

.pantalla-obra {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 80px 24px 40px;
  text-align: center;
}

/* ---------- Panal de hexágonos (igual que index y página 5) ---------- */
.hex-obra, .hex-obra-brillo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-repeat: repeat;
}

.hex-obra {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28.56' height='49.47' viewBox='0 0 56 97'><g fill='none' stroke='%23BAFF2E' stroke-width='1'><path d='M28 0 L56 16 L56 48 L28 64 L0 48 L0 16 Z'/><path d='M28 64 L56 80 L56 97 M28 64 L0 80 L0 97 M28 0 L28 -16'/></g></svg>");
  animation: hex-neon-parpadeo 4s infinite alternate;
}

@keyframes hex-neon-parpadeo {
  0%, 19%, 21%, 23%, 54%, 56%, 100% { opacity: 0.0898; }
  20%, 22%, 55% { opacity: 0.0334; }
}

.hex-obra-brillo {
  opacity: 0;
  transition: opacity 0.3s ease;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28.56' height='49.47' viewBox='0 0 56 97'><g fill='none' stroke='%23BAFF2E' stroke-width='1.4'><path d='M28 0 L56 16 L56 48 L28 64 L0 48 L0 16 Z'/><path d='M28 64 L56 80 L56 97 M28 64 L0 80 L0 97 M28 0 L28 -16'/></g></svg>");
  -webkit-mask-image: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), #000 0%, transparent 10%);
  mask-image: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), #000 0%, transparent 10%);
}

.hex-obra-brillo.activo { animation: hex-brillo-flicker 3.6s linear infinite; }

@keyframes hex-brillo-flicker {
  0%, 100% { opacity: 0.75; }
  3%  { opacity: 0.3; }
  6%  { opacity: 0.75; }
  7%  { opacity: 0.2; }
  8%  { opacity: 0.75; }
  20% { opacity: 0.75; }
  22% { opacity: 0.15; }
  24% { opacity: 0.75; }
  55% { opacity: 0.75; }
  57% { opacity: 0.4; }
  58% { opacity: 0.75; }
  60% { opacity: 0.1; }
  62% { opacity: 0.75; }
  85% { opacity: 0.75; }
  86% { opacity: 0.3; }
  88% { opacity: 0.75; }
}

/* ---------- Botón volver ---------- */
.obra-volver {
  position: absolute;
  top: 22px;
  left: 26px;
  z-index: 5;
  font-family: inherit;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid #D70B65;
  color: #FF2F9D;
  font-size: 1rem;
  letter-spacing: 1px;
  padding: 6px 14px;
  text-decoration: none;
  box-shadow: 0 0 6px rgba(215, 11, 101, 0.35), inset 0 0 12px rgba(215, 11, 101, 0.06);
}
.obra-volver:hover { background: rgba(215, 11, 101, 0.2); }

/* ---------- Contenido ---------- */
.obra-cono {
  position: relative;
  z-index: 2;
  width: clamp(90px, 14vw, 140px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 6px #ff2e88);
  animation: cono-flota 5s ease-in-out infinite;
}

@keyframes cono-flota {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-8px) rotate(2deg); }
}

.obra-luz { animation: texto-parpadea 1.1s ease-in-out infinite; }

.obra-eyebrow {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: clamp(0.9rem, 1.8vw, 1.2rem);
  letter-spacing: 2px;
  color: #FF2F9D;
  text-shadow: 0 0 4px #FF2F9D;
}

/* Título con la letra de "HOLA !" (contorno rosa, relleno vacío) */
.obra-titulo {
  position: relative;
  z-index: 2;
  margin: 0;
  font-weight: 400;
  font-size: clamp(2.6rem, 9vw, 6rem);
  color: transparent;
  -webkit-text-stroke: 1.5px #ff2e88;
  text-shadow: 0 0 4px rgba(255, 46, 136, 0.45);
  letter-spacing: 4px;
  line-height: 1;
}

/* Mensaje con la tipografía y efectos de "[ HAZ CLIC PARA CONTINUAR ]" */
.obra-mensaje {
  position: relative;
  z-index: 2;
  margin: 8px 0 0;
  font-size: clamp(1rem, 3vw, 1.8rem);
  color: #baff2e;
  text-shadow: 0 0 4px #baff2e, 0 0 10px #baff2e;
  letter-spacing: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  animation: texto-parpadea 1.2s ease-in-out infinite;
}

.flechas-obra {
  font-size: 0.65em;
  letter-spacing: 1px;
  animation: none !important;
}
.flechas-obra span {
  display: inline-block;
  animation: texto-parpadea 1.2s ease-in-out infinite;
}
.flechas-obra span:nth-child(1) { animation-delay: 0s; }
.flechas-obra span:nth-child(2) { animation-delay: 0.15s; }
.flechas-obra span:nth-child(3) { animation-delay: 0.3s; }
.flechas-obra span:nth-child(4) { animation-delay: 0.45s; }

@keyframes texto-parpadea {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

.obra-pie {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: clamp(0.8rem, 1.6vw, 1.1rem);
  color: #ff8a2e;
  text-shadow: 0 0 4px #ff8a2e;
  letter-spacing: 1px;
  animation: neon-muriendo 4s linear infinite;
}

@keyframes neon-muriendo {
  0%, 100% { opacity: 1; }
  3%  { opacity: 0.4; }
  6%  { opacity: 1; }
  7%  { opacity: 0.25; }
  8%  { opacity: 1; }
  20% { opacity: 1; }
  22% { opacity: 0.15; }
  24% { opacity: 1; }
  55% { opacity: 1; }
  57% { opacity: 0.5; }
  58% { opacity: 1; }
  60% { opacity: 0.1; }
  62% { opacity: 1; }
  85% { opacity: 1; }
  86% { opacity: 0.3; }
  88% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hex-obra, .obra-cono, .obra-luz, .obra-mensaje,
  .flechas-obra span, .obra-pie { animation: none; }
  .hex-obra { opacity: 0.075; }
  .hex-obra-brillo.activo { animation: none; opacity: 0.6; }
}