/* PETARDEO / Perfil 02 — interfaz de laboratorio pirotécnico */
.petardeo-ui {
  --ink: #090b09;
  --panel: #11140f;
  --paper: #f4efdf;
  --cream: #fff5d6;
  --orange: #ff4d00;
  --orange2: #ff6a00;
  --signal: #f4ee00;
  --line: rgba(9, 11, 9, .22);
  background: var(--ink);
}

.petardeo-ui::before {
  content: "PETARDEO  /  PERFIL 02  /  OBSERVAR · ENTENDER · RESPETAR";
  position: fixed;
  z-index: 35;
  top: 0;
  left: 0;
  width: 100%;
  height: 24px;
  display: flex;
  align-items: center;
  padding: 0 4vw;
  background: var(--signal);
  color: var(--ink);
  font: 500 .46rem/1 var(--mono);
  letter-spacing: .16em;
  box-sizing: border-box;
}

.petardeo-ui header {
  top: 24px;
  height: 88px;
  position: absolute;
  border-bottom: 1px solid rgba(244, 238, 0, .28);
  background: linear-gradient(180deg, rgba(9, 11, 9, .92), rgba(9, 11, 9, .55));
  backdrop-filter: blur(10px);
}

.petardeo-ui .brand {
  gap: .8rem;
  letter-spacing: .08em;
}

.petardeo-ui .brand svg,
.petardeo-ui .brand .burst-logo {
  width: 36px;
  height: 36px;
  fill: var(--signal);
}

.petardeo-ui .brand-name {
  display: grid;
  gap: .2rem;
  font-size: .82rem;
  line-height: 1;
}

.petardeo-ui .brand-name small {
  font: 400 .42rem/1 var(--mono);
  color: #929789;
  letter-spacing: .18em;
}

.petardeo-ui .profile-toggle i { color: var(--signal); }

.petardeo-ui .profile-menu {
  background: var(--cream);
  border: 1px solid var(--ink);
  box-shadow: 8px 8px 0 var(--orange);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}

.petardeo-ui .profile-menu a.active {
  background: var(--signal);
  color: var(--ink);
}

.petardeo-ui nav a { color: #bfc3b5; }
.petardeo-ui nav a:hover { color: var(--signal); }
.petardeo-ui .back { color: var(--signal); }

.petardeo-ui .hero {
  min-height: 820px;
  padding-top: 136px;
  grid-template-columns: 44% 56%;
  background:
    linear-gradient(90deg, transparent 49.9%, rgba(244, 238, 0, .16) 50%, transparent 50.1%),
    repeating-linear-gradient(0deg, transparent 0 79px, rgba(255, 255, 255, .025) 79px 80px),
    var(--ink);
}

.petardeo-ui .hero-copy {
  position: relative;
  padding-right: 2vw;
}

.petardeo-ui .hero-status {
  display: flex;
  gap: .5rem;
  margin-bottom: 3rem;
}

.petardeo-ui .hero-status span {
  border: 1px solid #4b5045;
  padding: .55rem .75rem;
  color: #a4aa9b;
  font: 500 .48rem/1 var(--mono);
  letter-spacing: .1em;
}

.petardeo-ui .hero-status span:first-child {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--ink);
}

.petardeo-ui .hero h1 {
  position: relative;
  width: max-content;
  margin: 1.7rem 0 2.2rem;
  font-size: clamp(5.8rem, 9.5vw, 10.8rem);
  line-height: .68;
  letter-spacing: -.09em;
  text-transform: uppercase;
}

.petardeo-ui .hero h1::after {
  content: "02";
  position: absolute;
  top: -.35rem;
  right: -2.7rem;
  color: var(--signal);
  font: 500 .7rem/1 var(--mono);
  letter-spacing: .1em;
}

.petardeo-ui .hero h1 em {
  color: var(--orange);
  font-style: normal;
}

.petardeo-ui .hero-copy > p:not(.eyebrow) {
  max-width: 440px;
  color: #b3b8aa;
}

.petardeo-ui .hero-link {
  background: var(--orange);
  color: var(--ink);
  border: 0;
  padding: 1rem 1.2rem;
  margin-top: 1.4rem;
}

.petardeo-ui .hero-link b { color: var(--ink); }

.petardeo-ui .hero-lab {
  margin: 1.8rem 0 1.8rem 2vw;
  border: 1px solid rgba(244, 238, 0, .34);
  background:
    linear-gradient(135deg, rgba(255, 77, 0, .08), transparent 42%),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(255, 255, 255, .025) 39px 40px),
    var(--panel);
  clip-path: polygon(0 0, calc(100% - 42px) 0, 100% 42px, 100% 100%, 42px 100%, 0 calc(100% - 42px));
}

.petardeo-ui .hero-lab::before,
.petardeo-ui .hero-lab::after {
  content: "";
  position: absolute;
  z-index: 5;
  background: var(--signal);
}

.petardeo-ui .hero-lab::before { top: 0; left: 0; width: 88px; height: 5px; }
.petardeo-ui .hero-lab::after { right: 0; bottom: 0; width: 5px; height: 88px; }
.petardeo-ui .coordinate { top: 5%; right: 5%; color: var(--signal); }

.petardeo-ui .crosshair {
  background:
    linear-gradient(transparent calc(50% - .5px), rgba(244, 238, 0, .28) 50%, transparent calc(50% + .5px)),
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(244, 238, 0, .28) 50%, transparent calc(50% + .5px));
}

.petardeo-ui .wave { border-radius: 0; transform: rotate(45deg); border-color: rgba(255, 77, 0, .75); }
.petardeo-ui .wave.w2 { border-color: rgba(244, 238, 0, .34); }
.petardeo-ui .wave.w3 { border-color: rgba(255, 77, 0, .24); }

.petardeo-ui .burst-stage > button {
  border-radius: 0;
  background: var(--signal);
  box-shadow: 10px 10px 0 var(--orange), 0 0 90px rgba(255, 77, 0, .25);
  transform: rotate(45deg);
}

.petardeo-ui .burst-stage > button > * { transform: rotate(-45deg); }
.petardeo-ui .simulation-note { color: #777d70; }

.petardeo-ui .ticker {
  min-height: 92px;
  background: var(--orange);
  border-top: 7px solid var(--signal);
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
}

.petardeo-ui .ticker i { font-size: 1.2rem; }

.petardeo-ui .section,
.petardeo-ui .sources-section { background: var(--paper); }

.petardeo-ui .section-heading h2,
.petardeo-ui .sources-section h2,
.petardeo-ui .safety-title h2 {
  text-transform: uppercase;
}

.petardeo-ui .section-heading .eyebrow,
.petardeo-ui .sources-section .eyebrow { color: #8b2c08; }

.petardeo-ui .sequence { border: 2px solid var(--ink); }
.petardeo-ui .sequence article { border-color: var(--ink); }
.petardeo-ui .sequence article:nth-child(odd) { background: #e6e0cf; }
.petardeo-ui .sequence b { color: var(--orange); }

.petardeo-ui .reaction-compare {
  border-top: 8px solid var(--signal);
  background: var(--panel);
}

.petardeo-ui .speed i { background: var(--signal); }

.petardeo-ui .color-lab,
.petardeo-ui .impact {
  background: var(--ink);
}

.petardeo-ui .color-console,
.petardeo-ui .impact-grid { border-color: rgba(244, 238, 0, .38); }

.petardeo-ui .color-orb { background-color: #0f120d; }
.petardeo-ui .color-picks button.active { background: var(--signal); color: var(--ink); }

.petardeo-ui .delay-lab {
  position: relative;
  background: var(--signal);
  border: 2px solid var(--ink);
  box-shadow: 14px 14px 0 var(--orange);
}

.petardeo-ui .delay-lab::before {
  content: "CALCULADOR / ACÚSTICA";
  position: absolute;
  top: 0;
  right: 0;
  padding: .6rem 1rem;
  background: var(--ink);
  color: var(--signal);
  font: .48rem/1 var(--mono);
  letter-spacing: .1em;
}

.petardeo-ui .travel-lines .sound-line i { background: var(--orange); }

.petardeo-ui .pattern-grid {
  gap: 1rem;
  background: transparent;
}

.petardeo-ui .pattern-grid article { border: 1px solid var(--ink); }
.petardeo-ui .pattern { border-bottom: 6px solid var(--orange); }

.petardeo-ui .impact-grid article { border-color: rgba(244, 238, 0, .24); }
.petardeo-ui .impact-grid span { color: var(--signal); }

.petardeo-ui .bat-bridge {
  background: var(--signal);
  border: 2px solid var(--ink);
}

.petardeo-ui .safety {
  color: var(--ink);
  background:
    repeating-linear-gradient(135deg, transparent 0 16px, rgba(9, 11, 9, .045) 16px 32px),
    var(--orange);
}

.petardeo-ui .safety-title h2 em { color: var(--signal); font-style: normal; }
.petardeo-ui .safety-list { border-top: 2px solid var(--ink); }
.petardeo-ui .safety-list article { border-color: rgba(9, 11, 9, .45); }
.petardeo-ui .safety-list b { color: var(--signal); }
.petardeo-ui .safety-banner { border-left: 8px solid var(--signal); }
.petardeo-ui .safety-banner strong { color: var(--signal); }

.petardeo-ui .sources-section { border-top: 8px solid var(--signal); }
.petardeo-ui .sources-section a:hover { background: var(--signal); padding-inline: 1rem; }

.petardeo-ui footer {
  border-top: 1px solid rgba(244, 238, 0, .35);
  background: var(--ink);
}

.petardeo-ui footer .brand svg { fill: var(--signal); }

@media (max-width: 1000px) {
  .petardeo-ui .hero { grid-template-columns: 1fr; }
  .petardeo-ui .hero-copy { padding-top: 2rem; }
  .petardeo-ui .hero-lab { margin-left: 0; }
}

@media (max-width: 620px) {
  .petardeo-ui::before { padding-inline: 1.2rem; white-space: nowrap; overflow: hidden; }
  .petardeo-ui header { top: 24px; height: 76px; }
  .petardeo-ui .brand svg,
  .petardeo-ui .brand .burst-logo { width: 30px; height: 30px; }
  .petardeo-ui .brand-name { font-size: .72rem; }
  .petardeo-ui .hero { padding-top: 118px; }
  .petardeo-ui .hero-status { margin-bottom: 2rem; }
  .petardeo-ui .hero h1 { font-size: clamp(4.7rem, 25vw, 7rem); }
  .petardeo-ui .hero h1::after { right: -1.5rem; }
  .petardeo-ui .hero-lab { clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 25px, 100% 100%, 25px 100%, 0 calc(100% - 25px)); }
  .petardeo-ui .delay-lab { box-shadow: 7px 7px 0 var(--orange); }
  .petardeo-ui .delay-lab::before { position: static; display: inline-block; margin-bottom: 1.5rem; }
  .petardeo-ui .pattern-grid { gap: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .petardeo-ui .wave { animation: none; }
}