/* Identidad visual 1.7: logo oficial, turbos reales y títulos de inspiración picotera. */
.brand-real-logo,
.brand .custom-logo {
  width: 224px;
  max-width: 224px;
  height: auto;
  object-fit: contain;
}

.hero-logo-title {
  width: min(620px, 100%);
  margin: 18px 0 14px;
  line-height: 1;
  text-shadow: none;
}

.hero-logo-title img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(7px 9px 0 rgba(0, 0, 0, .88));
}

.turbo-showcase {
  position: relative;
  min-height: 455px;
  filter: drop-shadow(13px 17px 0 rgba(0, 0, 0, .38));
}

.turbo-art {
  position: absolute;
  display: block;
  width: auto;
  object-fit: contain;
  object-position: center bottom;
}

.turbo-art--one {
  z-index: 1;
  top: -8px;
  right: -18px;
  height: 435px;
  transform: rotate(2.5deg);
}

.turbo-art--two {
  z-index: 2;
  bottom: -22px;
  left: -28px;
  height: 315px;
  transform: rotate(-5deg);
}

/* Solo los encabezados principales reciben el acabado cromático del logo. */
.section-head h2,
.archive-hero h1,
.radar-hero h1,
.cta-inner h2,
.pico-title-row h1 {
  color: #ffe817;
  font-style: italic;
  letter-spacing: -.045em;
  -webkit-text-stroke: 2px #080808;
  text-shadow: 3px 4px 0 #080808, 6px 7px 0 rgba(255, 7, 94, .72);
}

.section-head h2 span,
.archive-hero h1 span,
.radar-hero h1 span {
  color: #ff075e;
}

.spotify-section {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(145deg, #0d161c, #102f31);
  border-top: 8px solid #1ed760;
  border-bottom: 8px solid #080808;
}

.spotify-section::before {
  content: "";
  position: absolute;
  inset: -65%;
  background: repeating-conic-gradient(from 10deg, rgba(30, 215, 96, .08) 0 8deg, transparent 8deg 23deg);
  pointer-events: none;
}

.spotify-section .rp-wrap { position: relative; }
.spotify-section .kicker { color: #1ed760; }
.spotify-section .section-intro { color: #dbe9df; }

.spotify-player {
  max-width: 920px;
  padding: 8px;
  background: #1ed760;
  border: 4px solid #000;
  border-radius: 24px;
  box-shadow: 8px 9px 0 #ff075e;
}

.spotify-player iframe {
  display: block;
  border: 0;
  border-radius: 14px;
}

.spotify-open-link {
  display: inline-block;
  margin-top: 24px;
  color: #1ed760;
  font-weight: 900;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .turbo-showcase { min-height: 375px; }
  .turbo-art--one { right: 5%; height: 365px; }
  .turbo-art--two { left: 5%; height: 270px; }
}

@media (max-width: 680px) {
  .brand-real-logo,
  .brand .custom-logo {
    width: 176px;
    max-width: 176px;
    height: auto;
  }

  .hero-logo-title {
    width: min(88vw, 390px);
    max-width: none;
    margin: 13px 0 8px;
  }

  .hero-logo-title img { filter: drop-shadow(4px 5px 0 rgba(0, 0, 0, .86)); }

  .hero .hero-logo-title + p {
    max-width: 68%;
    margin-top: 8px;
  }

  .turbo-showcase {
    position: absolute;
    z-index: 1;
    right: -82px;
    bottom: -80px;
    width: 285px;
    min-height: 300px;
    filter: drop-shadow(8px 10px 0 rgba(0, 0, 0, .34));
  }

  .turbo-art--one { top: 0; right: 0; height: 290px; }
  .turbo-art--two { bottom: 1px; left: -8px; height: 205px; }

  .section-head h2,
  .archive-hero h1,
  .radar-hero h1,
  .cta-inner h2,
  .pico-title-row h1 {
    -webkit-text-stroke-width: 1.35px;
    text-shadow: 2px 3px 0 #080808, 4px 5px 0 rgba(255, 7, 94, .68);
  }

  .mobile-mini-footer img {
    width: 180px;
    height: auto;
  }

  .spotify-section .section-head { gap: 12px; }
  .spotify-player { padding: 5px; border-radius: 19px; box-shadow: 5px 6px 0 #ff075e; }
  .spotify-player iframe { height: 352px; border-radius: 11px; }

  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
  }

  .grid .rp-card { border-width: 3px; box-shadow: 4px 5px 0 var(--rp-black); }
  .grid .rp-card-body { padding: 13px 11px 15px; }
  .grid .rp-card h3 { margin: 6px 0; font-size: clamp(16px, 5vw, 21px); line-height: 1; }
  .grid .rp-card p { display: none; }
  .grid .tag { padding: 3px 6px; border-width: 1px; font-size: 10px; }
  .grid .rp-meta { display: grid; gap: 3px; font-size: 12px; line-height: 1.1; }
  .grid .card-pico-logo { left: 8px; bottom: 8px; width: 48px; height: 48px; border-width: 3px; }
}