/**
 * CREATIVE DESIGN AGENCY · SERVICE PAGES STYLES
 * Dedicated styling for Branding, Packaging, Exhibidores, 3D Studio, and Creative Web
 * Strictly preserving the dark luxury Apple / Nórtika aesthetic & Neue Montreal typography
 */

/* --------------------------------------------------------------------------
   01. HERO SECTION FOR DEDICATED SERVICE PAGES
   -------------------------------------------------------------------------- */
.sp-hero {
  position: relative;
  width: 100%;
  min-height: 85vh;
  padding: 160px 48px 80px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: radial-gradient(circle at 50% 20%, rgba(20, 30, 48, 0.45) 0%, rgba(5, 5, 7, 0.98) 70%, #000000 100%);
  overflow: hidden;
  border-bottom: 1px solid var(--border-light);
}

.sp-hero-glow {
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 450px;
  background: radial-gradient(ellipse at center, rgba(0, 113, 227, 0.18) 0%, rgba(227, 0, 126, 0.08) 50%, transparent 80%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 1;
}

.sp-hero-container {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
}

.sp-breadcrumb-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.sp-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-blue);
  background: rgba(0, 113, 227, 0.08);
  border: 1px solid rgba(0, 113, 227, 0.25);
  padding: 6px 14px;
  border-radius: 999px;
}

.sp-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-magenta);
  box-shadow: 0 0 8px var(--accent-magenta);
}

.sp-hero-title {
  font-family: var(--font-primary);
  font-size: clamp(2.1rem, 5.2vw, 4.8rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--text-white);
  margin-bottom: 16px;
  max-width: 1050px;
  word-break: break-word;
  overflow-wrap: break-word;
}

.sp-title-accent {
  background: linear-gradient(135deg, #ffffff 30%, #86868b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sp-hero-subtitle {
  font-family: var(--font-mono);
  font-size: clamp(0.9375rem, 1.6vw, 1.25rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-blue);
  margin-bottom: 28px;
}

.sp-hero-lead {
  font-family: var(--font-primary);
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  line-height: 1.7;
  color: #c5c5cb;
  max-width: 860px;
  margin-bottom: 40px;
}

.sp-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 48px;
}

.sp-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--text-white);
  color: #000000;
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.25s var(--ease-smooth);
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.15);
}

.sp-btn-primary:hover {
  transform: translateY(-2px);
  background: #f0f0f5;
  box-shadow: 0 8px 30px rgba(255, 255, 255, 0.25);
}

.sp-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-white);
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid var(--border-light);
  text-decoration: none;
  transition: all 0.25s var(--ease-smooth);
}

.sp-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

.sp-hero-meta-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sp-meta-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.sp-meta-item strong {
  color: var(--text-white);
  font-weight: 600;
}

.sp-meta-icon {
  color: var(--accent-blue);
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   02. CHALLENGE & STRATEGIC SOLUTION SECTION
   -------------------------------------------------------------------------- */
.sp-challenge-section {
  padding: 100px 48px;
  background: #08080a;
  position: relative;
  border-bottom: 1px solid var(--border-light);
}

.sp-challenge-card {
  max-width: 1240px;
  margin: 0 auto;
  background: linear-gradient(145deg, rgba(20, 20, 24, 0.7) 0%, rgba(12, 12, 14, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 64px 56px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.sp-challenge-glow {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 113, 227, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.sp-challenge-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sp-challenge-tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--accent-magenta);
  text-transform: uppercase;
}

.sp-challenge-title {
  font-family: var(--font-primary);
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-white);
}

.sp-challenge-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sp-solution-lead {
  font-family: var(--font-primary);
  font-size: 1.125rem;
  line-height: 1.7;
  color: #d1d5db;
}

.sp-solution-bullets {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.sp-bullet-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9375rem;
  color: #9ca3af;
  line-height: 1.5;
}

.sp-bullet-icon {
  color: var(--accent-blue);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   03. CORE CAPABILITIES (GRID DE VALOR EDITORIAL)
   -------------------------------------------------------------------------- */
.sp-capabilities-section {
  padding: 120px 48px;
  background: #080A0D;
  position: relative;
  border-bottom: 1px solid var(--border-light);
  overflow: hidden;
}

/* Light follower halo inside section */
.sp-capabilities-light-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: 
    radial-gradient(
      circle 70px at var(--mouse-x, -9999px) var(--mouse-y, -9999px),
      rgba(255, 255, 255, 0.08),
      transparent 100%
    ),
    radial-gradient(
      circle 220px at var(--mouse-x, -9999px) var(--mouse-y, -9999px),
      rgba(0, 113, 227, 0.18),
      rgba(0, 113, 227, 0.08) 35%,
      transparent 75%
    );
  opacity: var(--light-opacity, 0);
  transition: opacity 0.4s ease;
  z-index: 1;
}

.sp-section-header {
  max-width: 1240px;
  margin: 0 auto 64px auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  position: relative;
  z-index: 2;
}

.sp-header-left {
  display: flex;
  flex-direction: column;
}

.sp-tag-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.sp-section-tag {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  color: #8A9098;
  text-transform: uppercase;
}

.sp-tag-line {
  width: 48px;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
}

.sp-section-title {
  font-family: var(--font-primary);
  font-size: clamp(2.4rem, 4vw, 3.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  line-height: 1.08;
}

.sp-section-title .marca-blue {
  color: #0071E3;
}

.sp-section-title .marca-dot {
  color: #E6007E;
}

.sp-header-right {
  display: flex;
  align-items: stretch;
  gap: 20px;
  max-width: 440px;
  padding-bottom: 6px;
}

.sp-desc-border {
  width: 1px;
  background: rgba(255, 255, 255, 0.14);
  flex-shrink: 0;
}

.sp-section-desc {
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.6;
  color: #8A9098;
}

/* Capabilities 2x2 Grid */
.sp-capabilities-grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  position: relative;
  z-index: 2;
}

/* Base Card */
.sp-cap-card {
  background: #101318;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  transform: translate3d(var(--card-tx, 0px), var(--card-ty, 0px), 0) scale(var(--card-scale, 1));
  transform-origin: center center;
  transition: border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, border-color, box-shadow;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* Card localized light glow (follows mouse locally) */
.sp-card-light-fx {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: 
    radial-gradient(
      circle 80px at var(--card-mouse-x, 50%) var(--card-mouse-y, 50%),
      rgba(255, 255, 255, 0.08),
      transparent 100%
    ),
    radial-gradient(
      circle 260px at var(--card-mouse-x, 50%) var(--card-mouse-y, 50%),
      rgba(0, 113, 227, 0.18),
      rgba(0, 113, 227, 0.08) 35%,
      transparent 75%
    );
  opacity: var(--card-light-opacity, 0);
  transition: opacity 0.35s ease;
  z-index: 1;
}

/* Closest card state (controlled by JS distance) */
.sp-cap-card.is-closest {
  --card-scale: 1.015;
  border-color: rgba(0, 113, 227, 0.55);
  box-shadow: 0 0 50px rgba(0, 113, 227, 0.10);
  z-index: 3;
}

/* Card Body: Watermark Number + Text Column */
.sp-cap-card-body {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  position: relative;
  z-index: 2;
  margin-bottom: 32px;
}

/* Large Watermark Number (Hollow Outline matching reference) */
.sp-cap-watermark-num {
  font-family: var(--font-primary);
  font-size: clamp(5.4rem, 6.8vw, 7.8rem);
  font-weight: 300;
  line-height: 0.86;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.09);
  user-select: none;
  pointer-events: none;
  transition: all 0.4s ease;
  flex-shrink: 0;
  width: clamp(80px, 9.5vw, 120px);
}

.sp-cap-card.is-closest .sp-cap-watermark-num,
.sp-cap-card:hover .sp-cap-watermark-num {
  -webkit-text-stroke: 1.5px rgba(0, 113, 227, 0.65);
  color: rgba(0, 113, 227, 0.05);
  filter: drop-shadow(0 0 16px rgba(0, 113, 227, 0.45));
}

.sp-cap-content-col {
  flex: 1;
  min-width: 0;
}

.sp-cap-subnum-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}

.sp-cap-slash {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  color: #0071E3;
}

.sp-cap-subnum {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #0071E3;
}

.sp-cap-subnum-line {
  width: 36px;
  height: 1px;
  background: rgba(0, 113, 227, 0.35);
  margin-left: 6px;
}

.sp-cap-title {
  font-family: var(--font-primary);
  font-size: clamp(1.35rem, 1.8vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  line-height: 1.25;
  margin-bottom: 14px;
  position: relative;
}

.sp-cap-title-line {
  display: block;
  width: 0;
  height: 2px;
  background: #0071E3;
  margin-top: 8px;
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(0, 113, 227, 0.6);
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.sp-cap-card.is-closest .sp-cap-title-line,
.sp-cap-card:hover .sp-cap-title-line {
  width: 54px;
}

.sp-cap-desc {
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #8A9098;
  margin: 0;
}

/* Card Footer Row: Tags + Circular Button */
.sp-cap-footer-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding-top: 20px;
}

.sp-cap-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}

.sp-tag-pill {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: #8A9098;
  background: #14171E;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.sp-cap-card.is-closest .sp-tag-pill,
.sp-cap-card:hover .sp-tag-pill {
  color: #D1D5DB;
  border-color: rgba(255, 255, 255, 0.12);
  background: #181D26;
}

/* Circular Button with Arrow */
.sp-cap-circle-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8A9098;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.sp-cap-arrow {
  display: block;
  stroke: #8A9098;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.3s ease;
}

.sp-cap-card.is-closest .sp-cap-circle-btn,
.sp-cap-card:hover .sp-cap-circle-btn {
  border-color: #0071E3;
  color: #FFFFFF;
  background: rgba(0, 113, 227, 0.12);
  box-shadow: 0 0 20px rgba(0, 113, 227, 0.25);
}

.sp-cap-card.is-closest .sp-cap-arrow,
.sp-cap-card:hover .sp-cap-arrow {
  transform: translateX(3px);
  stroke: #FFFFFF;
}

/* Fallback for other service pages that use simple num-row */
.sp-cap-num-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.sp-cap-num {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--accent-blue);
  background: rgba(0, 113, 227, 0.1);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(0, 113, 227, 0.2);
}

.sp-cap-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-light);
}

/* ==========================================================================
   03. 3D STUDIO EDITORIAL CAPABILITIES (Del concepto digital a la física exacta)
   ========================================================================== */
.sp-cap-editorial-section {
  position: relative;
  background: #07090D;
  padding: 110px 0 120px 0;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Ambient subtle background glows */
.sp-cap-editorial-section .sp-cap-ambient-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.sp-cap-editorial-section .sp-cap-ambient-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}

.sp-cap-editorial-section .sp-cap-ambient-glow.glow-top {
  top: -120px;
  right: 5%;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(0, 113, 227, 0.14) 0%, rgba(0, 113, 227, 0.02) 60%, transparent 75%);
}

.sp-cap-editorial-section .sp-cap-ambient-glow.glow-bottom {
  bottom: -150px;
  left: 2%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 113, 227, 0.09) 0%, rgba(230, 0, 126, 0.03) 50%, transparent 75%);
}

/* Container */
.sp-cap-editorial-section .sp-cap-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 48px;
  position: relative;
  z-index: 2;
}

/* Header Row */
.sp-cap-editorial-section .sp-cap-header-row {
  display: grid;
  grid-template-columns: 1.4fr 1.15fr auto;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 44px;
}

.sp-cap-editorial-section .sp-cap-title-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp-cap-editorial-section .sp-cap-micro-tag {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  color: #CAD2DE;
  text-transform: uppercase;
  font-weight: 500;
  display: inline-block;
}

.sp-cap-editorial-section .sp-cap-heading {
  font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, 'Inter', sans-serif);
  font-size: clamp(2.2rem, 3.4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  margin: 0;
}

.sp-cap-editorial-section .sp-cap-heading .heading-muted {
  color: #8A9098;
  font-weight: 700;
}

.sp-cap-editorial-section .sp-cap-lead-col {
  max-width: 440px;
  padding-bottom: 6px;
}

.sp-cap-editorial-section .sp-cap-lead-text {
  font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, 'Inter', sans-serif);
  font-size: 0.95rem;
  line-height: 1.65;
  color: #9AA0A6;
  margin: 0;
}

/* Navigation controls */
.sp-cap-editorial-section .sp-cap-nav-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
}

.sp-cap-editorial-section .sp-cap-nav-arrows {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sp-cap-editorial-section .sp-cap-arrow-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
  outline: none;
}

.sp-cap-editorial-section .sp-cap-arrow-btn.prev {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #8A9098;
}

.sp-cap-editorial-section .sp-cap-arrow-btn.prev:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  transform: translateX(-2px);
}

.sp-cap-editorial-section .sp-cap-arrow-btn.next {
  background: #0071E3;
  border: 1px solid #0071E3;
  color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(0, 113, 227, 0.35);
}

.sp-cap-editorial-section .sp-cap-arrow-btn.next:hover {
  background: #1A84F2;
  border-color: #1A84F2;
  transform: translateX(2px);
  box-shadow: 0 6px 20px rgba(0, 113, 227, 0.5);
}

.sp-cap-editorial-section .sp-cap-counter {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #8A9098;
}

/* Carousel Viewport & Cards Track */
.sp-cap-editorial-section .sp-cap-carousel-viewport {
  width: 100%;
  position: relative;
  overflow: visible;
}

.sp-cap-editorial-section .sp-cap-cards-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Individual Card */
.sp-cap-editorial-section .sp-cap-card {
  background: #0A0D12;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 28px 22px 20px 22px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

.sp-cap-editorial-section .sp-cap-card:hover,
.sp-cap-editorial-section .sp-cap-card.is-active-card {
  transform: translateY(-5px);
  border-color: rgba(0, 113, 227, 0.45);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 24px rgba(0, 113, 227, 0.15);
}

/* Top Progress Track */
.sp-cap-editorial-section .sp-card-top-track {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.sp-cap-editorial-section .sp-card-num {
  font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, 'Inter', sans-serif);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #0071E3;
  letter-spacing: -0.02em;
}

.sp-cap-editorial-section .sp-num-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #3898FF;
  box-shadow: 0 0 8px #0071E3;
  margin-left: 2px;
}

.sp-cap-editorial-section .sp-num-line {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.sp-cap-editorial-section .sp-num-line .sp-line-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 25%;
  background: linear-gradient(90deg, #0071E3, rgba(0, 113, 227, 0.2));
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.sp-cap-editorial-section .sp-cap-card:hover .sp-line-fill,
.sp-cap-editorial-section .sp-cap-card.is-active-card .sp-line-fill {
  width: 100%;
  background: linear-gradient(90deg, #0071E3, #4DA3FF);
  box-shadow: 0 0 8px rgba(0, 113, 227, 0.5);
}

/* Title & Description */
.sp-cap-editorial-section .sp-card-title {
  font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, 'Inter', sans-serif);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0 0 12px 0;
  min-height: 2.6em;
}

.sp-cap-editorial-section .sp-card-desc {
  font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, 'Inter', sans-serif);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #8A9098;
  margin: 0 0 16px 0;
  min-height: 4.8em;
}

/* Link row */
.sp-cap-editorial-section .sp-card-link-row {
  margin-bottom: 16px;
}

.sp-cap-editorial-section .sp-card-link {
  font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, 'Inter', sans-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #0071E3;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease, gap 0.2s ease;
}

.sp-cap-editorial-section .sp-card-link .link-arrow {
  transition: transform 0.2s ease;
  display: inline-block;
}

.sp-cap-editorial-section .sp-cap-card:hover .sp-card-link {
  color: #4DA3FF;
}

.sp-cap-editorial-section .sp-cap-card:hover .sp-card-link .link-arrow {
  transform: translateX(4px);
}

/* Tags row */
.sp-cap-editorial-section .sp-card-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
  min-height: 52px;
  align-content: flex-start;
}

.sp-cap-editorial-section .sp-tag-item {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.6875rem;
  color: #CAD2DE;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px 9px;
  border-radius: 999px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: all 0.25s ease;
}

.sp-cap-editorial-section .sp-cap-card:hover .sp-tag-item {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
}

/* Visual Frame */
.sp-cap-editorial-section .sp-card-visual-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  background: #050709;
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: auto;
}

.sp-cap-editorial-section .sp-card-visual-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.sp-cap-editorial-section .sp-cap-card:hover .sp-card-visual-img {
  transform: scale(1.04);
}

.sp-cap-editorial-section .sp-card-visual-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 13, 18, 0) 50%, rgba(10, 13, 18, 0.8) 100%);
  pointer-events: none;
}

/* Card 01 Badge */
.sp-cap-editorial-section .sp-scanner-steps-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: linear-gradient(180deg, rgba(7, 10, 15, 0) 0%, rgba(7, 10, 15, 0.85) 40%, rgba(7, 10, 15, 0.98) 100%);
  padding: 16px 10px 8px 10px;
  pointer-events: none;
}

.sp-cap-editorial-section .sp-scanner-steps-badge span {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.625rem;
  font-weight: 600;
  color: #CAD2DE;
  letter-spacing: 0.06em;
}

.sp-cap-editorial-section .sp-scanner-steps-badge .badge-sep {
  color: #0071E3;
  font-size: 0.625rem;
}

/* Responsive Breakpoints for 3D Studio Editorial Capabilities */
@media (max-width: 1200px) {
  .sp-cap-editorial-section .sp-cap-container {
    padding: 0 32px;
  }
  .sp-cap-editorial-section .sp-cap-header-row {
    grid-template-columns: 1fr auto;
    gap: 28px;
  }
  .sp-cap-editorial-section .sp-cap-lead-col {
    grid-column: 1 / -1;
    max-width: 100%;
  }
  .sp-cap-editorial-section .sp-cap-carousel-viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 16px;
    scrollbar-width: none;
  }
  .sp-cap-editorial-section .sp-cap-carousel-viewport::-webkit-scrollbar {
    display: none;
  }
  .sp-cap-editorial-section .sp-cap-cards-track {
    display: flex;
    width: max-content;
    gap: 18px;
  }
  .sp-cap-editorial-section .sp-cap-card {
    flex: 0 0 310px;
    width: 310px;
    scroll-snap-align: start;
  }
}

@media (max-width: 768px) {
  .sp-cap-editorial-section {
    padding: 70px 0 80px 0;
  }
  .sp-cap-editorial-section .sp-cap-container {
    padding: 0 20px;
  }
  .sp-cap-editorial-section .sp-cap-header-row {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 32px;
  }
  .sp-cap-editorial-section .sp-cap-nav-col {
    align-items: flex-start;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  .sp-cap-editorial-section .sp-cap-cards-track .sp-cap-card {
    flex: 0 0 85vw;
    max-width: 330px;
  }
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .sp-capabilities-grid {
    gap: 20px;
  }
  .sp-cap-card {
    padding: 36px 30px;
  }
  .sp-cap-card.is-closest {
    --card-scale: 1.008;
  }
}

@media (max-width: 768px) {
  .sp-capabilities-section {
    padding: 80px 24px;
  }
  .sp-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 40px;
  }
  .sp-header-right {
    max-width: 100%;
  }
  .sp-capabilities-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .sp-cap-card {
    padding: 32px 24px;
    transform: none !important;
  }
  .sp-cap-card-body {
    flex-direction: column;
    gap: 16px;
  }
  .sp-cap-watermark-num {
    font-size: 3.8rem;
    width: auto;
    line-height: 1;
  }
  .sp-capabilities-light-fx,
  .sp-card-light-fx {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   04. SHOWCASE DE PROYECTOS CURADOS
   -------------------------------------------------------------------------- */
.sp-showcase-section {
  padding: 96px 48px 72px 48px;
  background: #080A0D;
  position: relative;
  border-bottom: 1px solid var(--border-light);
  overflow: hidden;
}

/* Ambient Orange Lights in Showcase */
.sp-showcase-ambient-glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(100px);
  z-index: 1;
}

.sp-showcase-ambient-glow.glow-top {
  top: -15%;
  left: 20%;
  width: 500px;
  height: 380px;
  background: radial-gradient(circle, rgba(255, 77, 0, 0.12) 0%, transparent 70%);
}

.sp-showcase-ambient-glow.glow-bottom {
  bottom: -20%;
  left: -5%;
  width: 550px;
  height: 420px;
  background: radial-gradient(circle, rgba(255, 77, 0, 0.08) 0%, transparent 70%);
}

.sp-showcase-header {
  position: relative;
  z-index: 2;
  margin-bottom: 56px;
}

.sp-section-tag.tag-orange {
  color: #FF4D00;
}

.mundo-orange {
  color: #FF4D00;
}

.sp-showcase-header-right {
  display: flex;
  align-items: center;
  gap: 36px;
  max-width: 620px;
}

.sp-showcase-header-right .sp-desc-border {
  width: 1px;
  height: 48px;
  background: rgba(255, 255, 255, 0.14);
  flex-shrink: 0;
}

.sp-showcase-header-right .sp-section-desc {
  font-family: var(--font-primary);
  font-size: 0.96875rem;
  line-height: 1.6;
  color: #8A9098;
  margin: 0;
}

/* Carousel Control Arrows */
.sp-carousel-arrows {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.sp-carousel-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #8A9098;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sp-carousel-btn:hover,
.sp-carousel-btn.is-active {
  border-color: #FF4D00;
  color: #FF4D00;
  background: rgba(255, 77, 0, 0.08);
  box-shadow: 0 0 16px rgba(255, 77, 0, 0.25);
}

.sp-carousel-btn svg {
  stroke: currentColor;
  transition: transform 0.2s ease;
}

.sp-carousel-btn:hover svg {
  transform: scale(1.05);
}

/* Showcase Cards Grid */
.sp-showcase-track-wrap {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
}

.sp-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.sp-showcase-card {
  background: #101318;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  position: relative;
  cursor: pointer;
}

.sp-showcase-card:hover {
  border-color: rgba(255, 77, 0, 0.5);
  transform: translateY(-4px);
  box-shadow: 0 16px 45px rgba(255, 77, 0, 0.15);
}

/* Card 01 Featured Highlight (Active orange glowing border) */
.sp-showcase-card.is-featured {
  border-color: rgba(255, 77, 0, 0.85);
  box-shadow: 0 0 50px rgba(255, 77, 0, 0.22), 0 12px 36px rgba(0, 0, 0, 0.5);
}

/* Image Wrap */
.sp-showcase-img-wrap {
  width: calc(100% - 24px);
  margin: 12px 12px 0 12px;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background: #050608;
  position: relative;
}

.sp-showcase-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.sp-showcase-card:hover .sp-showcase-img {
  transform: scale(1.04);
}

/* Logo Showcase Variant */
.sp-showcase-img-wrap.is-logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 113, 227, 0.16) 0%, rgba(12, 16, 26, 0.95) 60%, #06080d 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}

.sp-showcase-logo-glow {
  position: absolute;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(0, 113, 227, 0.28) 0%, rgba(0, 113, 227, 0.05) 50%, transparent 70%);
  filter: blur(36px);
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}

.sp-showcase-logo-img {
  width: auto;
  max-width: 68%;
  max-height: 52%;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.65));
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}

.sp-showcase-card:hover .sp-showcase-logo-img {
  transform: scale(1.06);
  filter: drop-shadow(0 16px 36px rgba(0, 113, 227, 0.35));
}

.sp-showcase-card:hover .sp-showcase-logo-glow {
  transform: scale(1.2);
  opacity: 0.9;
}

/* Info Box */
.sp-showcase-info {
  padding: 22px 20px 24px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sp-sc-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.sp-sc-num {
  font-family: var(--font-primary);
  font-size: 1.15rem;
  font-weight: 700;
  color: #FF4D00;
  line-height: 1;
}

.sp-sc-line {
  width: 30px;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
}

.sp-sc-cat {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8A9098;
}

.sp-showcase-title {
  font-family: var(--font-primary);
  font-size: 1.35rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}

.sp-showcase-desc {
  font-family: var(--font-primary);
  font-size: 0.90625rem;
  line-height: 1.55;
  color: #8A9098;
  margin: 0 0 24px 0;
}

/* Footer Row inside Card: Tags + Circle Arrow */
.sp-sc-footer-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.sp-sc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}

.sp-sc-circle-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.02);
  color: #8A9098;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sp-showcase-card.is-featured .sp-sc-circle-btn,
.sp-showcase-card:hover .sp-sc-circle-btn {
  border-color: #FF4D00;
  color: #FF4D00;
  background: rgba(255, 77, 0, 0.08);
  box-shadow: 0 0 16px rgba(255, 77, 0, 0.2);
}

.sp-sc-arrow {
  stroke: currentColor;
  transition: transform 0.3s ease;
}

.sp-showcase-card.is-featured .sp-sc-arrow,
.sp-showcase-card:hover .sp-sc-arrow {
  transform: translateX(3px);
}

/* Services Navigation Bar (at bottom of showcase section) */
.sp-services-nav-bar {
  max-width: 1240px;
  margin: 48px auto 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  position: relative;
  z-index: 2;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sp-services-nav-bar .sp-nav-label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  color: #8A9098;
  text-transform: uppercase;
}

.sp-services-nav-bar .sp-nav-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.sp-services-nav-bar .sp-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  text-decoration: none;
  font-family: var(--font-primary);
  font-size: 0.84375rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #8A9098;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sp-services-nav-bar .pill-num {
  font-family: var(--font-primary);
  font-weight: 700;
  color: #FF4D00;
}

.sp-services-nav-bar .sp-nav-pill:hover {
  border-color: rgba(255, 77, 0, 0.6);
  color: #FFFFFF;
  background: rgba(255, 77, 0, 0.06);
}

.sp-services-nav-bar .sp-nav-pill.is-active {
  border-color: #FF4D00;
  background: rgba(255, 77, 0, 0.12);
  color: #FFFFFF;
  box-shadow: 0 0 20px rgba(255, 77, 0, 0.18);
}

@media (max-width: 1024px) {
  .sp-showcase-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .sp-showcase-header-right {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .sp-showcase-header-right .sp-desc-border {
    display: none;
  }
}

@media (max-width: 768px) {
  .sp-showcase-section {
    padding: 80px 24px;
  }
  .sp-showcase-grid {
    grid-template-columns: 1fr;
  }
  .sp-showcase-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 36px;
  }
  .sp-services-nav-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --------------------------------------------------------------------------
   05. TECHNICAL HIGHLIGHT / MACHINERY (ESPECIAL 3D STUDIO / WORKSHOP)
   -------------------------------------------------------------------------- */
.sp-tech-section {
  padding: 120px 48px;
  background: #08080a;
  border-bottom: 1px solid var(--border-light);
}

.sp-tech-grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.sp-tech-card {
  background: #0d0d11;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  transition: all 0.3s ease;
}

.sp-tech-card:hover {
  border-color: rgba(0, 113, 227, 0.35);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.sp-tech-info {
  padding: 32px;
}

.sp-tech-cat {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--accent-magenta);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.sp-tech-title {
  font-family: var(--font-primary);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 10px;
}

.sp-tech-desc {
  font-size: 0.875rem;
  color: #9ca3af;
  line-height: 1.6;
}

.sp-tech-media {
  height: 100%;
  min-height: 220px;
  overflow: hidden;
  background: #020202;
}

.sp-tech-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.sp-tech-card:hover .sp-tech-img {
  transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   06. RELATED SERVICES BAR (INTERCONEXIÓN FLUIDA)
   -------------------------------------------------------------------------- */
.sp-services-nav-section {
  padding: 64px 48px;
  background: #050507;
  border-bottom: 1px solid var(--border-light);
}

.sp-services-nav-wrap {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.sp-nav-label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.sp-nav-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.sp-nav-pill {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #9ca3af;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sp-nav-pill span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent-blue);
}

.sp-nav-pill:hover,
.sp-nav-pill.is-active {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--text-white);
  transform: translateY(-2px);
}

.sp-nav-pill.is-active {
  border-color: var(--accent-blue);
}

/* --------------------------------------------------------------------------
   07. RESPONSIVE BREAKPOINTS
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .sp-challenge-card {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 44px 32px;
  }
  
  .sp-capabilities-grid {
    grid-template-columns: 1fr;
  }
  
  .sp-showcase-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .sp-tech-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .sp-hero {
    padding: 130px 24px 60px 24px;
    min-height: auto;
  }

  .sp-hero-title {
    font-size: clamp(1.65rem, 7vw, 2.3rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    word-break: normal;
    overflow-wrap: break-word;
  }

  .sp-hero-meta-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  
  .sp-challenge-section,
  .sp-capabilities-section,
  .sp-showcase-section,
  .sp-tech-section,
  .sp-services-nav-section {
    padding: 80px 24px;
  }
  
  .sp-section-header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 40px;
  }
  
  .sp-showcase-grid {
    grid-template-columns: 1fr;
  }
  
  .sp-tech-card {
    grid-template-columns: 1fr;
  }
  
  .sp-tech-media {
    min-height: 180px;
  }
  
  .sp-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .sp-btn-primary,
  .sp-btn-secondary {
    justify-content: center;
    width: 100%;
  }
}


/* ==========================================================================
   BRANDING HERO CINÉTICO NARANJA (#FF4D00) · 3 CAPAS PARALLAX HIPNÓTICAS
   ========================================================================== */

.sp-hero.sp-hero-branding {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 120px 24px 60px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #080200;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 77, 0, 0.15);
}

/* --- ESCENARIO DE FONDO CINÉTICO --- */
.branding-kinetic-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* BASE CROMÁTICA PROFUNDA */
.b-canvas-base {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, #9e2e00 0%, #521500 40%, #1e0600 75%, #080200 100%);
  z-index: 1;
}

/* ORBES Y HALOS VOLUMÉTRICOS DE LUZ NARANJA */
.b-glow-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
}

.b-glow-1 {
  top: 10%;
  left: 15%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255, 77, 0, 0.85) 0%, rgba(255, 77, 0, 0.4) 40%, transparent 75%);
  filter: blur(65px);
  animation: orbPulse1 12s ease-in-out infinite alternate;
}

.b-glow-2 {
  bottom: 12%;
  right: 15%;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(255, 110, 0, 0.8) 0%, rgba(220, 50, 0, 0.35) 45%, transparent 80%);
  filter: blur(75px);
  animation: orbPulse2 15s ease-in-out infinite alternate-reverse;
}

.b-glow-3 {
  top: 15%;
  right: 10%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(255, 130, 0, 0.7) 0%, rgba(255, 77, 0, 0.25) 50%, transparent 75%);
  filter: blur(55px);
  animation: orbPulse1 14s ease-in-out infinite alternate;
}

.b-glow-4 {
  bottom: 20%;
  left: 10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255, 85, 0, 0.75) 0%, rgba(180, 40, 0, 0.3) 45%, transparent 75%);
  filter: blur(50px);
  animation: orbPulse2 18s ease-in-out infinite alternate-reverse;
}

@keyframes orbPulse1 {
  0% { transform: translate(0, 0) scale(1); opacity: 0.85; }
  50% { transform: translate(30px, -20px) scale(1.12); opacity: 1; }
  100% { transform: translate(-20px, 25px) scale(0.95); opacity: 0.8; }
}

@keyframes orbPulse2 {
  0% { transform: translate(0, 0) scale(1); opacity: 0.8; }
  50% { transform: translate(-35px, 25px) scale(1.15); opacity: 1; }
  100% { transform: translate(25px, -30px) scale(0.92); opacity: 0.75; }
}

/* --- ROTADOR DIAGONAL A -45 GRADOS --- */
.b-diagonal-rotator {
  position: absolute;
  width: 280vw;
  height: 280vh;
  top: -90vh;
  left: -90vw;
  transform: rotate(-45deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
  z-index: 3;
}

/* CAPAS CINÉTICAS */
.b-kinetic-layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  pointer-events: none;
}

/* FILAS Y CONTENEDOR MARQUEE */
.b-row-track {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  user-select: none;
}

.b-row-text {
  display: inline-flex;
  gap: clamp(40px, 4vw, 80px);
  flex-shrink: 0;
  will-change: transform;
}

.b-row-text span {
  display: inline-block;
  font-family: var(--font-primary, 'Neue Montreal', sans-serif);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: none;
}

/* CAPA 1: MÁS GRANDE, MÁS TENUE, MOVIMIENTO LENTO */
.layer-deep {
  z-index: 1;
  opacity: 0.32;
  filter: blur(2.5px);
}

.layer-deep .b-row-text span {
  font-size: clamp(6rem, 8.5vw, 10.5rem);
  color: #ff4d00;
  text-shadow: 0 0 40px rgba(255, 77, 0, 0.4);
}

.layer-deep .track-dir-left .b-row-text {
  animation: kineticDriftL1 36s ease-in-out infinite alternate;
}

.layer-deep .track-dir-right .b-row-text {
  animation: kineticDriftR1 36s ease-in-out infinite alternate;
}

@keyframes kineticDriftL1 {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-16%); }
}

@keyframes kineticDriftR1 {
  0% { transform: translateX(-16%); }
  100% { transform: translateX(0%); }
}

/* CAPA 2: ESCALA MEDIA, MOVIMIENTO MODERADO, BRILLOS Y CONTRASTE */
.layer-mid {
  z-index: 2;
  opacity: 0.75;
}

.layer-mid .b-row-text span {
  font-size: clamp(4.2rem, 5.8vw, 7rem);
  color: #ff5a00;
  text-shadow: 0 0 20px rgba(255, 77, 0, 0.5);
  transition: opacity 0.3s ease;
}

.layer-mid .b-glow-word {
  color: #ff9d42 !important;
  text-shadow: 0 0 25px #ff4d00, 0 0 55px #ff4d00, 0 0 90px rgba(255, 77, 0, 0.85) !important;
  opacity: 1 !important;
}

.layer-mid .b-subtle-word {
  color: #9c2e00 !important;
  opacity: 0.38 !important;
  text-shadow: none !important;
}

.layer-mid .track-dir-left .b-row-text {
  animation: kineticDriftL2 24s ease-in-out infinite alternate;
}

.layer-mid .track-dir-right .b-row-text {
  animation: kineticDriftR2 24s ease-in-out infinite alternate;
}

@keyframes kineticDriftL2 {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-24%); }
}

@keyframes kineticDriftR2 {
  0% { transform: translateX(-24%); }
  100% { transform: translateX(0%); }
}

/* CAPA 3: MÁS PEQUEÑA, MOVIMIENTO LIGERAMENTE MÁS RÁPIDO, RIMS */
.layer-front {
  z-index: 3;
  opacity: 0.65;
}

.layer-front .b-row-text span {
  font-size: clamp(2.6rem, 3.8vw, 4.4rem);
  color: #ff6e14;
  letter-spacing: -0.01em;
}

.layer-front .b-sharp-word {
  color: #ffd0a3 !important;
  text-shadow: 0 0 15px rgba(255, 120, 0, 0.9), 0 0 35px #ff4d00 !important;
  opacity: 0.95 !important;
}

.layer-front .track-dir-left .b-row-text {
  animation: kineticDriftL3 17s ease-in-out infinite alternate;
}

.layer-front .track-dir-right .b-row-text {
  animation: kineticDriftR3 17s ease-in-out infinite alternate;
}

@keyframes kineticDriftL3 {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-30%); }
}

@keyframes kineticDriftR3 {
  0% { transform: translateX(-30%); }
  100% { transform: translateX(0%); }
}

/* --- MÁSCARA CENTRAL DE PROTECCIÓN Y CONTRASTE PARA EL TEXTO --- */
.branding-center-vignette {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: 
    radial-gradient(ellipse 65% 55% at 50% 50%, rgba(12, 4, 1, 0.82) 0%, rgba(12, 4, 1, 0.52) 45%, rgba(12, 4, 1, 0) 78%),
    linear-gradient(180deg, rgba(8, 2, 0, 0.5) 0%, transparent 22%, transparent 78%, rgba(8, 2, 0, 0.9) 100%);
}

/* --- CONTENIDO CENTRAL ESTÁTICO (MÁXIMA ESTABILIDAD & CONTRASTE) --- */
.sp-hero.sp-hero-branding .sp-hero-container {
  position: relative;
  z-index: 10;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px;
}

.sp-badge-orange {
  display: inline-block;
  font-family: var(--font-mono, monospace);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 24px;
}

.sp-hero.sp-hero-branding .sp-hero-title {
  font-family: var(--font-primary, 'Neue Montreal', sans-serif);
  font-size: clamp(2.5rem, 5.6vw, 5.25rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  margin: 0 0 24px 0;
  text-transform: none;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.7);
}

.sp-title-blue {
  color: #0071E3 !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
}

.sp-hero.sp-hero-branding .sp-hero-lead {
  font-family: var(--font-primary, 'Neue Montreal', sans-serif);
  font-size: clamp(1rem, 1.35vw, 1.1875rem);
  font-weight: 400;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.8);
  max-width: 660px;
  margin: 0 auto 36px auto;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.sp-hero.sp-hero-branding .sp-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

.sp-hero.sp-hero-branding .sp-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0071E3;
  color: #FFFFFF;
  font-family: var(--font-primary, sans-serif);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 16px 32px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 8px 24px rgba(0, 113, 227, 0.45);
}

.sp-hero.sp-hero-branding .sp-btn-primary:hover {
  background: #0077ED;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 113, 227, 0.65);
  color: #FFFFFF;
}

.sp-hero.sp-hero-branding .sp-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(10, 4, 1, 0.6);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-family: var(--font-primary, sans-serif);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 16px 30px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.25s ease;
  backdrop-filter: blur(8px);
}

.sp-hero.sp-hero-branding .sp-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #FFFFFF;
  transform: translateY(-2px);
  color: #FFFFFF;
}

/* SCROLL CUE INFERIOR */
.sp-scroll-cue-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.sp-scroll-cue-line {
  width: 1px;
  height: 38px;
  background: rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.sp-scroll-cue-dot {
  position: absolute;
  top: 0;
  left: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 8px #FFFFFF;
  animation: scrollDotPulse 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes scrollDotPulse {
  0% { top: 0; opacity: 0; }
  30% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.sp-scroll-cue-txt {
  font-family: var(--font-mono, monospace);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.65);
}

/* ==========================================================================
   06. CONTACTO / CTA EDITORIAL CON ILUMINACIÓN INTERACTIVA (#contact)
   ========================================================================== */
.cta-section {
  position: relative;
  background: #080A0D;
  padding: clamp(100px, 12vw, 150px) 24px clamp(80px, 10vw, 120px) 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

/* Light follower halo layers */
.cta-cursor-light {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
  opacity: var(--cta-light-opacity, 0);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  background: 
    /* Core radiant white-cyan light node */
    radial-gradient(
      circle 35px at var(--mouse-x, -500px) var(--mouse-y, -500px),
      rgba(255, 255, 255, 0.85) 0%,
      rgba(180, 225, 255, 0.5) 45%,
      transparent 100%
    ),
    /* Main electric blue luminous halo */
    radial-gradient(
      circle 190px at var(--mouse-x, -500px) var(--mouse-y, -500px),
      rgba(0, 113, 227, 0.5) 0%,
      rgba(0, 113, 227, 0.22) 40%,
      transparent 75%
    ),
    /* Soft atmospheric diffusion falloff */
    radial-gradient(
      circle 480px at var(--mouse-x, -500px) var(--mouse-y, -500px),
      rgba(0, 113, 227, 0.12) 0%,
      rgba(0, 113, 227, 0.04) 50%,
      transparent 75%
    );
}

.cta-container {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(28px, 4vw, 44px);
}

/* Tag Row */
.cta-tag-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cta-tag-bracket {
  color: #0071E3;
}

.cta-tag-text {
  color: #0071E3;
}

/* Typographic Monumental Statement */
.cta-statement-wrapper {
  position: relative;
  display: block;
  width: 100%;
  user-select: none;
}

.cta-statement-base {
  font-family: var(--font-primary, sans-serif);
  font-size: clamp(3.2rem, 9.5vw, 8.5rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}

.cta-dot {
  color: #0071E3;
}

/* Interactive specular reflection */
.cta-statement-reflection {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  margin: 0;
  padding: 0;
  font-family: var(--font-primary, sans-serif);
  font-size: clamp(3.2rem, 9.5vw, 8.5rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  opacity: var(--cta-light-opacity, 0);
  transition: opacity 0.35s ease;
  background: 
    radial-gradient(
      circle 65px at var(--mouse-rel-x, -500px) var(--mouse-rel-y, -500px),
      rgba(255, 255, 255, 1) 0%,
      rgba(220, 240, 255, 0.85) 45%,
      transparent 100%
    ),
    radial-gradient(
      circle 250px at var(--mouse-rel-x, -500px) var(--mouse-rel-y, -500px),
      rgba(140, 210, 255, 0.9) 0%,
      rgba(0, 113, 227, 0.7) 42%,
      transparent 75%
    );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  mix-blend-mode: screen;
}

/* Editorial Lead Text */
.cta-lead-editorial {
  font-family: var(--font-primary, sans-serif);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.6;
  color: #8A9098;
  max-width: 680px;
  margin: 0;
  letter-spacing: -0.01em;
}

/* Contact Details Cards Grid */
.cta-details-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
  margin-top: 8px;
}

.cta-detail-card {
  background: #101318;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.cta-detail-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 113, 227, 0.5);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 113, 227, 0.12);
}

.cta-detail-card .detail-label {
  font-family: var(--font-mono, monospace);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #64748b;
  text-transform: uppercase;
}

.cta-detail-card .detail-val {
  font-family: var(--font-primary, sans-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  color: #FFFFFF;
  text-decoration: none;
  transition: color 0.2s ease;
  line-height: 1.3;
}

.cta-detail-card a.detail-val:hover {
  color: #0071E3;
}

.cta-detail-card .detail-sub {
  font-family: var(--font-primary, sans-serif);
  font-size: 0.8125rem;
  color: #8A9098;
  text-decoration: none;
  line-height: 1.4;
}

.cta-detail-card a.detail-sub:hover {
  color: #FFFFFF;
}

/* Action Button */
.cta-action-minimal {
  margin-top: 10px;
}

.cta-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #0071E3;
  color: #FFFFFF;
  font-family: var(--font-primary, sans-serif);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 20px 42px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 113, 227, 0.45);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cta-btn-primary:hover {
  background: #0077ED;
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 113, 227, 0.65);
  color: #FFFFFF;
}

.cta-btn-primary .btn-arrow {
  font-size: 1.25rem;
  transition: transform 0.25s ease;
}

.cta-btn-primary:hover .btn-arrow {
  transform: translate(3px, -3px);
}

/* Meta Strip */
.cta-meta-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  width: 100%;
}

.cta-meta-strip .meta-item {
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #64748b;
  text-transform: uppercase;
}

.cta-meta-strip .meta-sep {
  color: rgba(255, 255, 255, 0.2);
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
}

/* ==========================================================================
   07. FOOTER EDITORIAL OFICIAL
   ========================================================================== */
.editorial-footer {
  background: #040507;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 90px 24px 44px 24px;
  position: relative;
  z-index: 10;
}

.editorial-footer .footer-container {
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
}

.editorial-footer .footer-top {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1.2fr;
  gap: 48px;
  margin-bottom: 64px;
}

.editorial-footer .footer-brand-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.editorial-footer .footer-brand-title {
  font-family: var(--font-primary, sans-serif);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  text-decoration: none;
}

.editorial-footer .brand-dot {
  color: #0071E3;
}

.editorial-footer .footer-tagline {
  font-family: var(--font-primary, sans-serif);
  font-size: 0.875rem;
  line-height: 1.65;
  color: #8A9098;
  max-width: 320px;
  margin: 0;
}

.editorial-footer .footer-nav-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.editorial-footer .col-title {
  font-family: var(--font-mono, monospace);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.editorial-footer .col-link {
  font-family: var(--font-primary, sans-serif);
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.editorial-footer a.col-link:hover {
  color: #0071E3;
  transform: translateX(3px);
}

.editorial-footer .footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 32px;
  gap: 20px;
  flex-wrap: wrap;
}

.editorial-footer .footer-copy {
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  color: #64748b;
  margin: 0;
  letter-spacing: 0.04em;
}

.editorial-footer .footer-meta {
  font-family: var(--font-mono, monospace);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #475569;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .editorial-footer .footer-top {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
  }

  .cta-details-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .cta-section {
    padding: 80px 20px 60px 20px;
  }

  .cta-statement-base,
  .cta-statement-reflection {
    font-size: clamp(2.6rem, 11vw, 4.2rem);
  }

  .cta-btn-primary {
    width: 100%;
    justify-content: center;
    padding: 18px 24px;
  }

  .editorial-footer {
    padding: 60px 20px 36px 20px;
  }

  .editorial-footer .footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .editorial-footer .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ==========================================================================
   08. PACKAGING HERO: ESCENARIO INTERACTIVO CON CURSOR DE LUZ Y TEXTURA TIPOGRÁFICA
   ========================================================================== */
.sp-hero.sp-hero-packaging {
  min-height: 100vh;
  position: relative;
  background: #080A0D;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px 48px 36px 48px;
  box-sizing: border-box;
  --mouse-x: -500px;
  --mouse-y: -500px;
  --pkg-light-opacity: 0;
}

/* ESCENARIO DE FONDO INTERACTIVO */
.pkg-interactive-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.pkg-canvas-base {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, #101318 0%, #080A0D 70%, #050608 100%);
  z-index: 1;
}

.pkg-geometric-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* ROTADOR DIAGONAL A 45° PARA LAS CAPAS TIPOGRÁFICAS */
.pkg-diagonal-rotator {
  position: absolute;
  width: 280vw;
  height: 280vh;
  top: -90vh;
  left: -90vw;
  transform: rotate(-45deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 36px;
  z-index: 3;
  pointer-events: auto;
}

/* CURSOR DE ILUMINACIÓN DUAL */
.pkg-cursor-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: var(--pkg-light-opacity, 0);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  mix-blend-mode: screen;
  background:
    radial-gradient(
      circle 60px at var(--mouse-x, -500px) var(--mouse-y, -500px),
      rgba(255, 255, 255, 0.12) 0%,
      transparent 100%
    ),
    radial-gradient(
      circle 220px at var(--mouse-x, -500px) var(--mouse-y, -500px),
      rgba(255, 120, 30, 0.22) 0%,
      rgba(255, 120, 30, 0.08) 35%,
      transparent 75%
    );
}

/* CAPAS TIPOGRÁFICAS EN PROFUNDIDAD */
.pkg-layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  pointer-events: none;
}

.pkg-layer.layer-deep {
  opacity: 0.35;
  --marquee-speed: 95s;
}

.pkg-layer.layer-mid {
  opacity: 0.52;
  --marquee-speed: 80s;
}

.pkg-layer.layer-front {
  opacity: 0.75;
  --marquee-speed: 62s;
}

.pkg-track {
  width: 100%;
  overflow: visible;
  white-space: nowrap;
  display: flex;
  pointer-events: none;
  user-select: none;
}

.pkg-track.track-left .pkg-text-group {
  animation: pkgMarqueeLeft var(--marquee-speed, 70s) linear infinite;
}

.pkg-track.track-right .pkg-text-group {
  animation: pkgMarqueeRight var(--marquee-speed, 75s) linear infinite;
}

@keyframes pkgMarqueeLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes pkgMarqueeRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.pkg-text-group {
  display: inline-flex;
  gap: clamp(40px, 4vw, 75px);
  flex-shrink: 0;
  pointer-events: none;
}

/* PALABRAS INDIVIDUALES INTERACTIVAS */
.pkg-word {
  font-family: var(--font-primary, sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  display: inline-block;
  pointer-events: auto;
  cursor: default;
  will-change: transform, filter, opacity, color;
  transform: translate(var(--repel-x, 0px), var(--repel-y, 0px)) scale(var(--scale-boost, 1));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease, opacity 0.4s ease, color 0.4s ease, text-shadow 0.4s ease;
}

/* Estilos base por capa */
.layer-deep .pkg-word {
  font-size: clamp(2.8rem, 4.2vw, 4.8rem);
  color: #1A1D24;
  filter: blur(6px);
}

.layer-mid .pkg-word {
  font-size: clamp(2.3rem, 3.4vw, 3.8rem);
  color: #282D37;
  filter: blur(3px);
}

.layer-front .pkg-word {
  font-size: clamp(1.9rem, 2.8vw, 3.1rem);
  color: #3E4654;
  filter: blur(0.8px);
}

.pkg-word.word-tint {
  color: #3D2D24;
}

.pkg-word.word-accent {
  color: #553828;
}

/* Estado de proximidad al cursor (revelado de luz + repulsión magnética) */
.layer-deep .pkg-word.is-near {
  color: #4D5564;
  filter: blur(max(1px, calc(6px - var(--blur-reduce, 0px))));
  opacity: calc(0.42 + var(--opacity-boost, 0));
}

.layer-mid .pkg-word.is-near {
  color: #7C8799;
  filter: blur(max(0px, calc(3px - var(--blur-reduce, 0px))));
  opacity: calc(0.58 + var(--opacity-boost, 0));
}

.layer-front .pkg-word.is-near {
  color: #DCE2ED;
  filter: blur(0px);
  opacity: 1;
  text-shadow: 0 0 16px rgba(255, 120, 30, 0.28);
}

.layer-mid .pkg-word.word-tint.is-near,
.layer-front .pkg-word.word-accent.is-near {
  color: #FFA260;
}

/* HOVER DIRECTO SOBRE UNA PALABRA */
.pkg-word:hover {
  color: #FF781E !important;
  filter: blur(0px) !important;
  opacity: 1 !important;
  transform: translate(calc(var(--repel-x, 0px) * 0.4), calc(var(--repel-y, 0px) * 0.4)) scale(1.04) !important;
  text-shadow: 0 0 24px rgba(255, 120, 30, 0.7), 0 0 50px rgba(255, 77, 0, 0.35) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* MÁSCARA CENTRAL DE PROTECCIÓN Y CONTRASTE PARA EL TEXTO */
.pkg-center-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(circle 520px at 50% 48%, rgba(8, 10, 13, 0.96) 0%, rgba(8, 10, 13, 0.84) 45%, rgba(8, 10, 13, 0.25) 80%, transparent 100%);
}

/* RAILS LATERALES */
.pkg-rail-nav {
  position: absolute;
  left: 44px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 32px;
  z-index: 10;
  pointer-events: auto;
}

.pkg-rail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  font-weight: 700;
  color: #555C68;
  text-decoration: none;
  transition: color 0.25s ease;
  position: relative;
}

.pkg-rail-item:hover,
.pkg-rail-item.is-active {
  color: #FFFFFF;
}

.pkg-rail-item.is-active .pkg-rail-label {
  color: #FF781E;
}

.pkg-rail-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #333842;
  transition: all 0.25s ease;
  position: relative;
}

.pkg-rail-item.is-active .pkg-rail-dot {
  background: #FF781E;
  box-shadow: 0 0 10px #FF781E;
  width: 8px;
  height: 8px;
}

.pkg-rail-num {
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  color: #64748B;
}

.pkg-scroll-rail {
  position: absolute;
  right: 44px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 10;
  pointer-events: none;
}

.pkg-scroll-label {
  font-family: var(--font-mono, monospace);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #64748B;
  transform: rotate(90deg);
  margin-bottom: 24px;
}

.pkg-scroll-track {
  width: 1px;
  height: 48px;
  background: rgba(255, 255, 255, 0.14);
  position: relative;
  overflow: hidden;
}

.pkg-scroll-dot {
  position: absolute;
  top: 0;
  left: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #FF781E;
  box-shadow: 0 0 8px #FF781E;
  animation: pkgScrollPulse 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes pkgScrollPulse {
  0% { top: 0; opacity: 0; }
  35% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.pkg-scroll-target {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.pkg-scroll-target::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #FF781E;
}

/* CONTENIDO CENTRAL ESTÁTICO */
.pkg-hero-container {
  position: relative;
  z-index: 10;
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pkg-top-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #D1D5DB;
  margin-bottom: 16px;
}

.pkg-badge-ring {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid #FF781E;
  display: inline-block;
}

.pkg-hero-title {
  font-family: var(--font-primary, sans-serif);
  font-size: clamp(2.35rem, 4.2vw, 3.95rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  margin: 0;
}

.pkg-title-accent {
  background: linear-gradient(135deg, #FFA055 0%, #FF6B00 50%, #FF3D00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 40px rgba(255, 107, 0, 0.3);
}

.pkg-hero-lead {
  font-family: var(--font-primary, sans-serif);
  font-size: clamp(0.95rem, 1.25vw, 1.1rem);
  line-height: 1.6;
  color: #9AA0AA;
  max-width: 620px;
  margin: 14px auto 26px auto;
  letter-spacing: -0.01em;
}

.pkg-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.pkg-btn-primary {
  background: linear-gradient(135deg, #FF6B00 0%, #FF4500 100%);
  color: #FFFFFF;
  font-family: var(--font-primary, sans-serif);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 34px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(255, 77, 0, 0.42);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
}

.pkg-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(255, 77, 0, 0.65);
  color: #FFFFFF;
}

.pkg-btn-secondary {
  background: rgba(14, 17, 23, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  font-family: var(--font-primary, sans-serif);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 30px;
  border-radius: 999px;
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
}

.pkg-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #FFFFFF;
  transform: translateY(-2px);
  color: #FFFFFF;
}

.pkg-hero-actions .btn-arr {
  margin-left: 8px;
  font-size: 1.05rem;
}

/* BARRA DE METADATOS Y CAPACIDADES INFERIOR */
.pkg-meta-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4.5vw, 68px);
  margin-top: clamp(26px, 4vh, 46px);
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 22px;
}

.pkg-meta-card {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}

.pkg-meta-icon-wrap {
  color: #FF781E;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pkg-meta-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
}

.pkg-meta-sub {
  font-family: var(--font-mono, monospace);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #64748B;
  text-transform: uppercase;
}

.pkg-meta-main {
  font-family: var(--font-primary, sans-serif);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #FFFFFF;
  text-transform: uppercase;
}

.pkg-meta-line {
  width: 24px;
  height: 2px;
  background: #FF781E;
  border-radius: 2px;
  margin-top: 4px;
}

/* RESPONSIVE PACKAGING HERO */
@media (max-width: 1200px) {
  .pkg-rail-nav,
  .pkg-scroll-rail {
    display: none;
  }
}

@media (max-width: 900px) {
  .pkg-meta-bar {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 40px;
    text-align: center;
  }

  .pkg-meta-card {
    text-align: center;
    flex-direction: column;
    gap: 8px;
  }

  .pkg-meta-line {
    margin: 4px auto 0 auto;
  }

  .pkg-hero-title {
    font-size: clamp(2.4rem, 8vw, 3.8rem);
  }
}

@media (max-width: 600px) {
  .sp-hero.sp-hero-packaging {
    padding: 120px 20px 50px 20px;
    min-height: auto;
  }

  .pkg-hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .pkg-btn-primary,
  .pkg-btn-secondary {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* ==========================================================================
   09. CAPACIDADES DE PACKAGING: CARRUSEL INFINITO EDITORIAL (4 TARJETAS)
   ========================================================================== */
.sp-pkg-carousel-section {
  position: relative;
  background: #080A0D;
  padding: 120px 0 110px 0;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* HALOS AMBIENTALES */
.pkg-ambient-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(100px);
  z-index: 1;
}

.pkg-ambient-glow.glow-top {
  top: -80px;
  right: -60px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(255, 120, 30, 0.14) 0%, rgba(255, 77, 0, 0.04) 50%, transparent 75%);
}

.pkg-ambient-glow.glow-bottom {
  bottom: -60px;
  left: -80px;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(255, 85, 0, 0.12) 0%, rgba(200, 50, 0, 0.03) 50%, transparent 75%);
}

/* HEADER DEL CARRUSEL */
.pkg-cap-header {
  position: relative;
  z-index: 3;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.1fr;
  align-items: flex-end;
  gap: 36px;
  margin-bottom: 24px;
}

.pkg-header-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pkg-header-left .sp-section-title {
  margin: 0;
  font-family: var(--font-primary, sans-serif);
  font-size: clamp(2rem, 3.2vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}

.pkg-header-orange {
  color: #FF6B00;
  background: linear-gradient(135deg, #FFA055 0%, #FF6B00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pkg-header-center {
  display: flex;
  align-items: stretch;
  gap: 20px;
}

.pkg-desc-border {
  width: 2px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  flex-shrink: 0;
}

.pkg-header-center .sp-section-desc {
  font-family: var(--font-primary, sans-serif);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #8A9098;
  margin: 0;
}

/* CONTROLES DEL HEADER */
.pkg-header-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
}

/* TRACK DE PASOS 01 -- 02 -- 03 -- 04 */
.pkg-step-track {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pkg-step-track .step-num {
  font-family: var(--font-mono, monospace);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #4A5160;
  transition: color 0.3s ease;
}

.pkg-step-track .step-num.is-active {
  color: #FF781E;
}

.pkg-step-track .step-line {
  width: 32px;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  position: relative;
  display: flex;
  align-items: center;
}

.pkg-step-track .step-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s ease;
}

.pkg-step-track .step-num.is-active + .step-line {
  background: rgba(255, 120, 30, 0.35);
}

.pkg-step-track .step-num.is-active + .step-line .step-dot {
  background: #FF781E;
  box-shadow: 0 0 8px #FF781E;
}

/* BOTONES DE ACCIÓN: PLAY/PAUSE + FLECHAS */
.pkg-carousel-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pkg-btn-toggle {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  font-family: var(--font-mono, monospace);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
  user-select: none;
}

.pkg-btn-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

.pkg-btn-toggle .toggle-icon {
  font-size: 0.75rem;
  color: #FF781E;
}

.pkg-nav-arrows {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pkg-nav-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #CAD2DE;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  padding: 0;
}

.pkg-nav-arrow:hover {
  background: #FF6B00;
  border-color: #FF6B00;
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.35);
}

/* VIEWPORT Y TRACK DEL CARRUSEL */
.pkg-carousel-viewport {
  position: relative;
  z-index: 2;
  width: 100%;
  overflow: hidden;
  padding: 30px 0 50px 0;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
}

.pkg-carousel-viewport:active {
  cursor: grabbing;
}

.pkg-carousel-track {
  display: flex;
  gap: 24px;
  padding-left: 48px;
  width: max-content;
  will-change: transform;
  align-items: stretch;
}

/* TARJETAS DEL CARRUSEL (#111318) */
.pkg-cap-card {
  flex: 0 0 326px;
  width: 326px;
  background: #111318;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
  position: relative;
}

/* FOTOGRAFÍA / RENDER PRODUCTO */
.pkg-card-media {
  width: 100%;
  height: 220px;
  position: relative;
  overflow: hidden;
  background: #0B0D11;
}

.pkg-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.pkg-media-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 19, 24, 0) 30%, rgba(17, 19, 24, 0.6) 70%, #111318 100%);
  pointer-events: none;
}

/* CUERPO EDITORIAL DE LA TARJETA */
.pkg-card-body {
  padding: 24px 26px 28px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
}

.pkg-card-num {
  font-family: var(--font-mono, monospace);
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #FF781E;
  margin-bottom: 14px;
  opacity: 0.95;
}

.pkg-card-title {
  font-family: var(--font-primary, sans-serif);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.25;
  color: #FFFFFF;
  letter-spacing: -0.01em;
  margin: 0 0 12px 0;
}

.pkg-card-desc {
  font-family: var(--font-primary, sans-serif);
  font-size: 0.84375rem;
  line-height: 1.6;
  color: #8B9098;
  margin: 0 0 24px 0;
}

/* FOOTER DE TARJETA: TAGS + BOTÓN DE FLECHA */
.pkg-card-footer {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.pkg-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}

.pkg-tag-pill {
  font-family: var(--font-mono, monospace);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #8A9098;
  background: #171A21;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  white-space: nowrap;
  transition: all 0.25s ease;
}

.pkg-card-arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #171A21;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #8A9098;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

/* HOVER EFFECT */
.pkg-cap-card:hover {
  transform: scale(1.015);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

.pkg-cap-card:hover .pkg-card-img {
  transform: scale(1.05);
}

.pkg-cap-card:hover .pkg-card-arrow {
  background: #FF781E;
  color: #FFFFFF;
  border-color: #FF781E;
  transform: translateX(2px);
}

.pkg-cap-card:hover .pkg-tag-pill {
  border-color: rgba(255, 255, 255, 0.14);
  color: #D1D5DB;
}

/* ESTADO DESTACADO / CENTRO ACTIVO (COMO EN CAPTURA: BORDE NARANJA NEON) */
.pkg-cap-card.is-active {
  transform: scale(1.02);
  border-color: rgba(255, 120, 30, 0.9);
  box-shadow: 0 0 35px rgba(255, 120, 30, 0.24), 0 20px 48px rgba(0, 0, 0, 0.65);
}

.pkg-cap-card.is-active .pkg-card-arrow {
  background: #FF781E;
  color: #FFFFFF;
  border-color: #FF781E;
}

.pkg-cap-card.is-active .pkg-tag-pill {
  border-color: rgba(255, 120, 30, 0.3);
  color: #E2E8F0;
}

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 1200px) {
  .pkg-cap-header {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .pkg-header-controls {
    grid-column: span 2;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

@media (max-width: 900px) {
  .sp-pkg-carousel-section {
    padding: 80px 0 70px 0;
  }

  .pkg-cap-header {
    grid-template-columns: 1fr;
    padding: 0 24px;
    gap: 20px;
  }

  .pkg-header-center {
    display: none;
  }

  .pkg-header-controls {
    grid-column: span 1;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
  }

  .pkg-carousel-track {
    padding-left: 24px;
  }

  .pkg-cap-card {
    flex: 0 0 290px;
    width: 290px;
  }
}

@media (max-width: 600px) {
  .pkg-cap-card {
    flex: 0 0 270px;
    width: 270px;
  }

  .pkg-card-media {
    height: 190px;
  }
}

/* ==========================================================================
   10. EXPERIENCIA INTERACTIVA DE RETAIL (#exhibidores-hero)
       CÍRCULO NEÓN RESPIRANDO, 8 TARJETAS HORIZONTALES & GLOW DINÁMICO
   ========================================================================== */
.sp-hero-retail {
  position: relative;
  overflow: hidden;
  background: #07080B;
  color: #FFFFFF;
  min-height: 100vh;
  padding: clamp(100px, 12vw, 130px) 0 50px 0;
}

/* ESCENARIO DE LUZ & GEOMETRÍA ABSTRACTA */
.retail-stage-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.retail-canvas-dark {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 90% 70% at 50% 35%, #0B0D13 0%, #07080B 80%),
    linear-gradient(180deg, rgba(7, 8, 11, 0.4) 0%, #07080B 100%);
}

/* DERIVA TIPOGRÁFICA TENUE DE FONDO (SIN FOTOS) */
.retail-bg-drift {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.045;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  pointer-events: none;
  user-select: none;
}

.drift-row {
  display: flex;
  gap: 50px;
  font-family: var(--font-mono, monospace);
  font-size: clamp(3rem, 5.5vw, 6rem);
  font-weight: 800;
  color: #C084FC;
  white-space: nowrap;
  letter-spacing: 0.12em;
}

.drift-right {
  animation: driftAnimRight 60s linear infinite;
}

.drift-left {
  animation: driftAnimLeft 55s linear infinite;
}

@keyframes driftAnimRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

@keyframes driftAnimLeft {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

/* HALOS AMBIENTALES MORADOS */
.retail-ambient-glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(80px);
}

.retail-ambient-glow.glow-top {
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(500px, 60vw, 900px);
  height: clamp(350px, 45vw, 600px);
  background: radial-gradient(circle, rgba(139, 61, 255, 0.22) 0%, rgba(168, 85, 247, 0.08) 50%, transparent 75%);
}

.retail-ambient-glow.glow-bottom {
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  height: 350px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.12) 0%, transparent 70%);
}

/* HALO DINÁMICO QUE RESPONDE AL MOUSE */
.retail-cursor-energy {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--retail-cursor-opacity, 0);
  transition: opacity 0.4s ease;
  background: 
    radial-gradient(circle 380px at var(--mouse-x, -500px) var(--mouse-y, -500px), rgba(192, 132, 252, 0.15) 0%, rgba(139, 61, 255, 0.05) 50%, transparent 75%);
}

/* CONTENEDOR HERO */
.retail-hero-container {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* ==========================================================================
   CÍRCULO NEÓN RESPIRANDO (LETRERO NEÓN + HALO VIVO)
   ========================================================================== */
.retail-portal-wrapper {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  padding: 60px 24px 50px 24px;
}

.retail-neon-ring {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(500px, 58vw, 840px);
  height: clamp(500px, 58vw, 840px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  border: 1.8px solid rgba(192, 132, 252, 0.85);
  box-shadow: 
    0 0 10px rgba(192, 132, 252, 0.8),
    0 0 28px rgba(168, 85, 247, 0.55),
    0 0 75px rgba(139, 61, 255, 0.32),
    inset 0 0 18px rgba(168, 85, 247, 0.4);
  animation: neonRingBreathe 5.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transition: box-shadow 0.3s ease, filter 0.3s ease;
  will-change: transform, box-shadow, filter;
}

/* Capas concéntricas de halo para crear profundidad óptica de portal */
.neon-ring-outer {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 1px solid rgba(168, 85, 247, 0.22);
  filter: blur(1px);
}

.neon-ring-mid {
  position: absolute;
  inset: -32px;
  border-radius: 50%;
  border: 0.8px solid rgba(139, 61, 255, 0.12);
}

.neon-ring-inner {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  border: 1px solid rgba(192, 132, 252, 0.35);
}

.neon-ring-accent-node {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 10px #C084FC, 0 0 20px #A855F7;
}

.neon-ring-accent-node.top-node {
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
}

.neon-ring-accent-node.bottom-node {
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
}

/* ANIMACIÓN RESPIRAR: CÍRCULO NEÓN */
@keyframes neonRingBreathe {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 
      0 0 10px rgba(192, 132, 252, 0.75),
      0 0 26px rgba(168, 85, 247, 0.5),
      0 0 70px rgba(139, 61, 255, 0.28),
      inset 0 0 16px rgba(168, 85, 247, 0.35);
    border-color: rgba(192, 132, 252, 0.8);
    filter: brightness(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.015);
    box-shadow: 
      0 0 16px rgba(216, 180, 254, 0.95),
      0 0 42px rgba(168, 85, 247, 0.75),
      0 0 110px rgba(139, 61, 255, 0.48),
      inset 0 0 26px rgba(168, 85, 247, 0.6);
    border-color: #D8B4FE;
    filter: brightness(1.15);
  }
}

/* CONTENIDO HERO CENTRAL DENTRO DEL PORTAL */
.retail-portal-content {
  position: relative;
  z-index: 3;
}

.retail-badge-wrap {
  margin-bottom: 18px;
}

.retail-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #D8B4FE;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.35);
  padding: 6px 18px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

.retail-pill-badge .pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #A855F7;
  box-shadow: 0 0 8px #A855F7;
}

.retail-hero-title {
  font-family: var(--font-primary, sans-serif);
  font-size: clamp(2.3rem, 5.2vw, 4.3rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  margin: 0 0 16px 0;
}

/* PALABRAS "SE HACEN NOTAR." CON RESPIRACIÓN SINCRONIZADA */
.retail-neon-text {
  display: inline-block;
  color: #C084FC;
  font-weight: 800;
  cursor: pointer;
  animation: neonTextBreathe 5.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: text-shadow, filter;
}

@keyframes neonTextBreathe {
  0%, 100% {
    color: #C084FC;
    text-shadow: 
      0 0 8px rgba(192, 132, 252, 0.65),
      0 0 22px rgba(168, 85, 247, 0.45),
      0 0 45px rgba(139, 61, 255, 0.25);
    filter: brightness(1) saturate(1);
  }
  50% {
    color: #D8B4FE;
    text-shadow: 
      0 0 12px rgba(216, 180, 254, 0.9),
      0 0 30px rgba(168, 85, 247, 0.7),
      0 0 65px rgba(139, 61, 255, 0.45);
    filter: brightness(1.15) saturate(1.2);
  }
}

/* HOVER EN "SE HACEN NOTAR." (300-500ms) */
.retail-neon-text:hover {
  color: #F5E8FF;
  text-shadow: 
    0 0 12px #FFFFFF,
    0 0 28px #C084FC,
    0 0 60px #A855F7,
    0 0 100px #8B3DFF;
  filter: brightness(1.28) saturate(1.35);
}

.retail-tag-line {
  font-family: var(--font-mono, monospace);
  font-size: clamp(0.75rem, 1.2vw, 0.875rem);
  font-weight: 700;
  letter-spacing: 0.25em;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 18px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.retail-tag-line .tag-sep {
  color: #A855F7;
  opacity: 0.8;
}

.retail-hero-lead {
  font-family: var(--font-primary, sans-serif);
  font-size: clamp(0.95rem, 1.2vw, 1.0625rem);
  line-height: 1.65;
  color: #9CA3AF;
  max-width: 680px;
  margin: 0 auto 28px auto;
}

.retail-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.retail-btn-primary {
  background: #FFFFFF;
  color: #07080B;
  font-family: var(--font-primary, sans-serif);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 13px 30px;
  border-radius: 999px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.35), 0 4px 14px rgba(0, 0, 0, 0.5);
  transition: all 0.25s ease;
}

.retail-btn-primary:hover {
  background: #F3E8FF;
  box-shadow: 0 0 35px rgba(168, 85, 247, 0.6), 0 6px 20px rgba(0, 0, 0, 0.6);
  transform: translateY(-2px);
}

.retail-btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: #FFFFFF;
  font-family: var(--font-primary, sans-serif);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 13px 30px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
}

.retail-btn-secondary:hover {
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.45);
  transform: translateY(-2px);
}

/* ==========================================================================
   CARRUSEL HORIZONTAL CONTINUO DE 8 TARJETAS (#retailCarouselSection)
   ========================================================================== */
.retail-carousel-section {
  position: relative;
  width: 100%;
  margin-top: 36px;
  z-index: 4;
}

.retail-carousel-header {
  max-width: 1440px;
  margin: 0 auto 16px auto;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.retail-step-track {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  font-weight: 700;
  color: #6B7280;
  user-select: none;
}

.retail-step-track .step-num {
  cursor: pointer;
  transition: all 0.25s ease;
}

.retail-step-track .step-num:hover {
  color: #D8B4FE;
}

.retail-step-track .step-num.is-active {
  color: #C084FC;
  text-shadow: 0 0 10px rgba(192, 132, 252, 0.8);
}

.retail-step-track .step-line {
  width: 18px;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  position: relative;
  display: flex;
  align-items: center;
}

.retail-step-track .step-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: transparent;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s ease;
}

.retail-step-track .step-num.is-active + .step-line {
  background: rgba(168, 85, 247, 0.4);
}

.retail-step-track .step-num.is-active + .step-line .step-dot {
  background: #C084FC;
  box-shadow: 0 0 8px #C084FC;
}

.retail-carousel-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.retail-btn-toggle {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(168, 85, 247, 0.3);
  color: #FFFFFF;
  font-family: var(--font-mono, monospace);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 7px 18px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
  user-select: none;
}

.retail-btn-toggle:hover {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(192, 132, 252, 0.55);
}

.retail-btn-toggle .toggle-icon {
  font-size: 0.75rem;
  color: #C084FC;
}

.retail-nav-arrows {
  display: flex;
  align-items: center;
  gap: 8px;
}

.retail-nav-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #CAD2DE;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  padding: 0;
}

.retail-nav-arrow:hover {
  background: #8B3DFF;
  border-color: #A855F7;
  color: #FFFFFF;
  box-shadow: 0 0 16px rgba(139, 61, 255, 0.5);
  transform: translateY(-1px);
}

/* VIEWPORT Y TRACK DEL CARRUSEL */
.retail-carousel-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 24px 0 44px 0;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
}

.retail-carousel-viewport:active {
  cursor: grabbing;
}

.retail-carousel-track {
  display: flex;
  gap: 22px;
  padding-left: 48px;
  width: max-content;
  will-change: transform;
  align-items: stretch;
}

/* TARJETAS DEL CARRUSEL (8 TARJETAS HORIZONTALES) */
.retail-card {
  flex: 0 0 320px;
  width: 320px;
  background: #0E1015;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
  position: relative;
}

.retail-card-media {
  width: 100%;
  height: 205px;
  position: relative;
  overflow: hidden;
  background: #07080B;
}

.retail-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.retail-card-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 16, 21, 0) 35%, rgba(14, 16, 21, 0.65) 75%, #0E1015 100%);
  pointer-events: none;
}

.retail-card-body {
  padding: 22px 24px 26px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.retail-card-num {
  font-family: var(--font-mono, monospace);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #A855F7;
  margin-bottom: 10px;
  opacity: 0.95;
}

.retail-card-title {
  font-family: var(--font-primary, sans-serif);
  font-size: 1.25rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 4px 0;
  letter-spacing: -0.01em;
}

.retail-card-sub {
  font-family: var(--font-primary, sans-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #D8B4FE;
  margin: 0 0 10px 0;
}

.retail-card-desc {
  font-family: var(--font-primary, sans-serif);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #8C929C;
  margin: 0 0 20px 0;
}

.retail-card-footer {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.retail-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}

.retail-tag-pill {
  font-family: var(--font-mono, monospace);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #8A9098;
  background: #141720;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  white-space: nowrap;
  transition: all 0.25s ease;
}

.retail-card-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #141720;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #8A9098;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

/* HOVER EFFECT */
.retail-card:hover {
  transform: scale(1.015);
  border-color: rgba(168, 85, 247, 0.4);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 22px rgba(139, 61, 255, 0.18);
}

.retail-card:hover .retail-card-img {
  transform: scale(1.05);
}

.retail-card:hover .retail-card-arrow {
  background: #A855F7;
  color: #FFFFFF;
  border-color: #A855F7;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
  transform: translateX(2px);
}

.retail-card:hover .retail-tag-pill {
  border-color: rgba(168, 85, 247, 0.25);
  color: #E2E8F0;
}

/* TARJETA DESTACADA / ACTIVA */
.retail-card.is-active {
  transform: scale(1.02);
  border-color: rgba(192, 132, 252, 0.95);
  box-shadow: 0 0 35px rgba(168, 85, 247, 0.32), 0 20px 48px rgba(0, 0, 0, 0.75);
}

.retail-card.is-active .retail-card-arrow {
  background: #A855F7;
  color: #FFFFFF;
  border-color: #A855F7;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.7);
}

.retail-card.is-active .retail-tag-pill {
  border-color: rgba(168, 85, 247, 0.35);
  color: #F3E8FF;
}

/* TIRA DE TICKER INFERIOR */
.retail-ticker-strip {
  max-width: 1440px;
  margin: 10px auto 0 auto;
  padding: 18px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-family: var(--font-mono, monospace);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.45);
}

.retail-ticker-strip .ticker-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.retail-ticker-strip .ticker-item {
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.25s ease;
}

.retail-ticker-strip .ticker-item.is-active {
  color: #C084FC;
  text-shadow: 0 0 8px rgba(192, 132, 252, 0.6);
  border-bottom: 1.5px solid #C084FC;
  padding-bottom: 2px;
}

.retail-ticker-strip .ticker-dash {
  color: rgba(255, 255, 255, 0.2);
}

.retail-ticker-strip .ticker-right {
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.2em;
}

/* RESPONSIVE RETAIL SECTION */
@media (max-width: 1200px) {
  .retail-carousel-header {
    padding: 0 24px;
  }

  .retail-ticker-strip {
    padding: 16px 24px;
  }
}

@media (max-width: 900px) {
  .retail-portal-wrapper {
    padding: 40px 20px 30px 20px;
  }

  .retail-carousel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 0 20px;
  }

  .retail-carousel-controls {
    width: 100%;
    justify-content: space-between;
  }

  .retail-carousel-track {
    padding-left: 20px;
  }

  .retail-card {
    flex: 0 0 285px;
    width: 285px;
  }

  .retail-card-media {
    height: 185px;
  }

  .retail-ticker-strip .ticker-right {
    display: none;
  }
}

@media (max-width: 600px) {
  .retail-tag-line {
    font-size: 0.6875rem;
    gap: 8px;
  }

  .retail-card {
    flex: 0 0 265px;
    width: 265px;
  }

  .retail-step-track {
    font-size: 0.6875rem;
    gap: 5px;
  }

  .retail-step-track .step-line {
    width: 12px;
  }
}

/* ==========================================================================
   11. 3D STUDIO & MODELADO CAD · PROTOTIPADO RÁPIDO HERO EXPERIENCE
   ========================================================================== */

.sp-hero-studio3d {
  position: relative;
  background-color: #080A0D;
  color: #FFFFFF;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
  --mouse-x: 50%;
  --mouse-y: 50%;
  --rel-x: 0px;
  --rel-y: 0px;
}

/* Ambient Background: Grid & Glows */
.studio-stage-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.studio-canvas-dark {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 60% 35%, #0B111A 0%, #080A0D 75%, #040507 100%);
}

.studio-cad-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(0, 113, 227, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 113, 227, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 80%);
}

.studio-ambient-light {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none;
  opacity: 0.45;
}

.studio-ambient-light.glow-blue-left {
  top: 10%;
  left: 5%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(0, 113, 227, 0.3) 0%, rgba(0, 113, 227, 0) 70%);
}

.studio-ambient-light.glow-blue-right {
  top: 25%;
  right: 8%;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(77, 163, 255, 0.22) 0%, rgba(0, 113, 227, 0) 70%);
}

.studio-cursor-halo {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  left: var(--mouse-x);
  top: var(--mouse-y);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0, 113, 227, 0.14) 0%, rgba(77, 163, 255, 0.05) 40%, transparent 70%);
  filter: blur(50px);
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 2;
}

/* Sticky Stage Container */
.studio-sticky-stage {
  position: relative;
  z-index: 5;
  width: 100%;
  padding-top: 120px;
  padding-bottom: 80px;
}

.studio-hero-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Hero Main Grid: Editorial + Visual + Timeline */
.studio-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1.55fr 0.45fr;
  align-items: center;
  gap: 36px;
  margin-bottom: 60px;
}

/* Column 1: Editorial */
.studio-editorial-col {
  position: relative;
  z-index: 10;
}

.studio-badge-wrap {
  margin-bottom: 20px;
}

.studio-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: #4DA3FF;
  background: rgba(0, 113, 227, 0.08);
  border: 1px solid rgba(0, 113, 227, 0.25);
  padding: 6px 14px;
  border-radius: 999px;
  text-transform: uppercase;
}

.studio-pill-badge .pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #0071E3;
  box-shadow: 0 0 8px #0071E3;
  animation: studioPulseDot 2s infinite ease-in-out;
}

@keyframes studioPulseDot {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.3); }
}

.studio-hero-title {
  font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: clamp(2.2rem, 3.4vw, 3.6rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: #FFFFFF;
  margin: 0 0 18px 0;
  text-transform: none;
}

.studio-hero-title .studio-title-accent {
  color: #0071E3;
  background: linear-gradient(90deg, #0071E3 0%, #4DA3FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.studio-subhead {
  font-family: var(--font-mono, monospace);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: #8A9098;
  text-transform: uppercase;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.studio-subhead::after {
  content: "";
  display: inline-block;
  width: 40px;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
}

.studio-hero-lead {
  font-family: var(--font-primary, sans-serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: #9BA3AF;
  max-width: 480px;
  margin: 0 0 32px 0;
  font-weight: 400;
}

.studio-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.studio-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #0071E3;
  color: #FFFFFF;
  font-family: var(--font-mono, monospace);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 14px 24px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 20px rgba(0, 113, 227, 0.35);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.studio-btn-primary:hover {
  background: #0077ED;
  box-shadow: 0 6px 28px rgba(0, 113, 227, 0.55);
  transform: translateY(-2px);
  color: #FFFFFF;
}

.studio-btn-primary .btn-arr {
  transition: transform 0.25s ease;
}

.studio-btn-primary:hover .btn-arr {
  transform: translate(2px, -2px);
}

.studio-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #E2E8F0;
  font-family: var(--font-mono, monospace);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 14px 24px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.25s ease;
}

.studio-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(77, 163, 255, 0.4);
  color: #FFFFFF;
  transform: translateY(-2px);
}

/* Column 2: Visual Card + Workbench + SVG CAD Overlay */
.studio-visual-col {
  position: relative;
  z-index: 8;
}

.studio-visual-card {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9.6;
  border-radius: 16px;
  overflow: hidden;
  background: #0B0E14;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(0, 113, 227, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.studio-visual-card:hover {
  border-color: rgba(77, 163, 255, 0.35);
  box-shadow: 
    0 24px 60px rgba(0, 0, 0, 0.8),
    0 0 30px rgba(0, 113, 227, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.studio-workbench-wrap {
  position: absolute;
  inset: -12px;
  overflow: hidden;
  transform: translate(calc(var(--rel-x, 0px) * 0.025), calc(var(--rel-y, 0px) * 0.025));
  transition: transform 0.15s ease-out;
}

.studio-workbench-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  filter: contrast(1.05) brightness(0.92);
  display: block;
}

/* SVG CAD Overlay - Hidden as requested */
.studio-cad-overlay {
  display: none !important;
}


/* Specular Light Reflection */
.studio-specular-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(
    circle 240px at var(--mouse-x) var(--mouse-y),
    rgba(255, 255, 255, 0.12) 0%,
    rgba(77, 163, 255, 0.06) 45%,
    transparent 75%
  );
  mix-blend-mode: screen;
  transition: opacity 0.2s ease;
}

/* Column 3: Vertical Timeline (01 to 05) */
.studio-timeline-col {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
}

.studio-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 10px 0 10px 8px;
}

.timeline-track-line {
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 17px;
  width: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  z-index: 1;
}

.timeline-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, #0071E3 0%, #4DA3FF 100%);
  box-shadow: 0 0 10px rgba(0, 113, 227, 0.8);
  border-radius: 2px;
  transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  z-index: 2;
  user-select: none;
  transition: transform 0.25s ease;
}

.timeline-step:hover {
  transform: translateX(4px);
}

.step-dot-wrap {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #080A0D;
  border-radius: 50%;
}

.step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2A303C;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.timeline-step.is-active .step-dot {
  background: #0071E3;
  border-color: #4DA3FF;
  transform: scale(1.35);
  box-shadow: 0 0 12px #0071E3;
}

.step-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.step-num {
  font-family: var(--font-mono, monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: #64748B;
  transition: color 0.3s ease;
}

.timeline-step.is-active .step-num {
  color: #4DA3FF;
}

.step-name {
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #8A9098;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.timeline-step.is-active .step-name {
  color: #FFFFFF;
}

/* 6 Technical Features Row */
.studio-features-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-bottom: 50px;
}

.studio-feat-card {
  background: rgba(14, 18, 25, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.studio-feat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #0071E3, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.studio-feat-card:hover {
  background: rgba(18, 24, 34, 0.85);
  border-color: rgba(77, 163, 255, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 113, 227, 0.15);
}

.studio-feat-card:hover::before {
  opacity: 1;
}

.feat-icon-wrap {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(0, 113, 227, 0.1);
  border: 1px solid rgba(0, 113, 227, 0.2);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.studio-feat-card:hover .feat-icon-wrap {
  background: rgba(0, 113, 227, 0.2);
  border-color: rgba(77, 163, 255, 0.4);
  transform: scale(1.05);
}

.feat-title {
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: #D1D5DB;
  margin: 0;
  text-transform: uppercase;
}

.studio-feat-card:hover .feat-title {
  color: #FFFFFF;
}

/* Bottom Grid: Materials & Technology */
.studio-bottom-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
}

.section-micro-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.section-micro-label .label-text {
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #64748B;
  text-transform: uppercase;
}

.section-micro-label .label-line {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

/* Materials Swatches Grid (5 Materials) */
.studio-mat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.mat-swatch-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: rgba(14, 18, 25, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 14px 10px;
  cursor: pointer;
  transition: all 0.25s ease;
  outline: none;
}

.mat-swatch-card:hover,
.mat-swatch-card:focus,
.mat-swatch-card.is-active {
  background: rgba(20, 26, 38, 0.95);
  border-color: rgba(77, 163, 255, 0.5);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 113, 227, 0.25);
  z-index: 40;
}

/* Floating Technical Popover */
.mat-popover {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 250px;
  background: rgba(8, 12, 18, 0.96);
  border: 1px solid rgba(77, 163, 255, 0.35);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.8),
    0 0 25px rgba(0, 113, 227, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
  z-index: 60;
  text-align: left;
}

.mat-popover::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: rgba(77, 163, 255, 0.5) transparent transparent transparent;
}

/* Edge alignment for first and last cards */
.mat-swatch-card:first-child .mat-popover {
  left: 0;
  transform: translateX(0) translateY(8px);
}
.mat-swatch-card:first-child .mat-popover::after {
  left: 28px;
}

.mat-swatch-card:last-child .mat-popover {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(8px);
}
.mat-swatch-card:last-child .mat-popover::after {
  left: auto;
  right: 28px;
}

/* Reveal on hover & focus & active */
.mat-swatch-card:hover .mat-popover,
.mat-swatch-card:focus .mat-popover,
.mat-swatch-card:focus-within .mat-popover,
.mat-swatch-card.is-active .mat-popover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.mat-swatch-card:first-child:hover .mat-popover,
.mat-swatch-card:first-child:focus .mat-popover,
.mat-swatch-card:first-child:focus-within .mat-popover,
.mat-swatch-card:first-child.is-active .mat-popover {
  transform: translateX(0) translateY(0);
}

.mat-swatch-card:last-child:hover .mat-popover,
.mat-swatch-card:last-child:focus .mat-popover,
.mat-swatch-card:last-child:focus-within .mat-popover,
.mat-swatch-card:last-child.is-active .mat-popover {
  transform: translateX(0) translateY(0);
}

/* Popover Content Styling */
.popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.popover-title {
  font-family: var(--font-mono, monospace);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #FFFFFF;
}

.popover-badge {
  font-family: var(--font-mono, monospace);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #4DA3FF;
  background: rgba(0, 113, 227, 0.18);
  border: 1px solid rgba(0, 113, 227, 0.35);
  padding: 2px 7px;
  border-radius: 4px;
}

.popover-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 8px;
}

.popover-row:last-child {
  margin-bottom: 0;
}

.popover-tag {
  font-family: var(--font-mono, monospace);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #60A5FA;
}

.popover-val {
  font-family: var(--font-primary, sans-serif);
  font-size: 0.75rem;
  line-height: 1.45;
  color: #CBD5E1;
}

.popover-val em {
  font-style: normal;
  color: #93C5FD;
}


.mat-swatch-preview {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2), 0 4px 10px rgba(0, 0, 0, 0.4);
}

/* Swatch Textures */
.swatch-pla {
  background: #1E293B;
}
.swatch-pla .swatch-ribs {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.12) 0px, rgba(255, 255, 255, 0.12) 2px, transparent 2px, transparent 5px);
}

.swatch-petg {
  background: linear-gradient(135deg, #0F172A 0%, #1E3A5F 100%);
}
.swatch-petg .swatch-gloss {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.4) 50%, transparent 60%);
  transform: rotate(25deg);
}

.swatch-abs {
  background: #111827;
}
.swatch-abs .swatch-matte {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 0);
  background-size: 3px 3px;
}

.swatch-tpu {
  background: #1E1B4B;
}
.swatch-tpu .swatch-flex {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, rgba(99, 102, 241, 0.25) 0px, rgba(99, 102, 241, 0.25) 3px, transparent 3px, transparent 7px);
}

.swatch-carbon {
  background: #09090B;
}
.swatch-carbon .swatch-twill {
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(45deg, #18181B 25%, transparent 25%), 
    linear-gradient(-45deg, #18181B 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #18181B 75%), 
    linear-gradient(-45deg, transparent 75%, #18181B 75%);
  background-size: 6px 6px;
  background-position: 0 0, 0 3px, 3px -3px, -3px 0px;
}

.swatch-resina {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(14, 116, 144, 0.6) 100%);
  border: 1px solid rgba(6, 182, 212, 0.4);
}
.swatch-resina .swatch-clear {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.5) 0%, transparent 60%);
}

.mat-name {
  font-family: var(--font-mono, monospace);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #94A3B8;
  text-align: center;
  transition: color 0.25s ease;
}

.mat-swatch-card:hover .mat-name {
  color: #FFFFFF;
}

/* Technology List */
.studio-tech-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.tech-item-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(14, 18, 25, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 12px 14px;
  transition: all 0.3s ease;
}

.tech-item-card:hover {
  background: rgba(20, 26, 38, 0.9);
  border-color: rgba(77, 163, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.tech-thumb-wrap {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.tech-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.tech-item-card:hover .tech-thumb-img {
  transform: scale(1.1);
}

.tech-thumb-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(0, 113, 227, 0.25) 0%, transparent 80%);
  pointer-events: none;
}

.tech-item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.tech-name {
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #FFFFFF;
}

.tech-sub {
  font-family: var(--font-primary, sans-serif);
  font-size: 0.75rem;
  color: #8A9098;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* RESPONSIVE DESIGN FOR 3D STUDIO */
@media (max-width: 1200px) {
  .studio-hero-grid {
    grid-template-columns: 1fr 1.3fr;
    gap: 30px;
  }

  .studio-timeline-col {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .studio-timeline {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 10px;
  }

  .timeline-track-line {
    top: 50%;
    left: 10px;
    right: 10px;
    bottom: auto;
    width: auto;
    height: 2px;
  }

  .timeline-progress-bar {
    width: 0%;
    height: 100%;
  }

  .studio-features-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .studio-bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .studio-sticky-stage {
    padding-top: 130px;
    padding-bottom: 60px;
  }

  .studio-hero-container {
    padding: 0 20px;
  }

  .studio-hero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .studio-features-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .studio-mat-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .mat-popover {
    width: 220px;
    padding: 12px 14px;
  }

  .studio-tech-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .studio-hero-title {
    font-size: 2.1rem;
    line-height: 1.12;
  }

  .studio-hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .studio-btn-primary,
  .studio-btn-secondary {
    width: 100%;
    justify-content: center;
  }

  .studio-features-row {
    grid-template-columns: 1fr;
  }

  .studio-mat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .mat-popover {
    width: 190px;
    padding: 10px 12px;
    bottom: calc(100% + 10px);
  }

  .popover-val {
    font-size: 0.6875rem;
    line-height: 1.35;
  }
}

/* ==========================================================================
   12. MATERIAL SELECTOR & 3D LAB EXPERIENCE
   ========================================================================== */

.mat-selector-section {
  position: relative;
  background-color: #07090D;
  color: #FFFFFF;
  padding: 100px 0;
  overflow: hidden;
  scroll-margin-top: 90px;
  --mouse-x: 50%;
  --mouse-y: 50%;
}

/* Ambient technical background */
.mat-ambient-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.mat-ambient-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none;
}

.mat-ambient-glow.glow-1 {
  top: 15%;
  left: 10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 113, 227, 0.16) 0%, transparent 70%);
}

.mat-ambient-glow.glow-2 {
  bottom: 10%;
  right: 12%;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(77, 163, 255, 0.12) 0%, transparent 70%);
}

.mat-grid-pattern {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(0, 113, 227, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 113, 227, 0.035) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, black 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, black 30%, transparent 85%);
}

.mat-selector-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 5;
}

/* Main Tool Card Container */
.mat-tool-card {
  position: relative;
  background: #090C12;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  padding: 36px 40px;
  box-shadow: 
    0 30px 80px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(0, 113, 227, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transition: border-color 0.4s ease;
}

@media (min-width: 901px) {
  .mat-tool-card {
    height: 640px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
  }
}

/* Specular follower light */
.mat-cursor-specular {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  left: var(--mouse-x);
  top: var(--mouse-y);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0, 113, 227, 0.12) 0%, rgba(77, 163, 255, 0.03) 45%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.3s ease;
}

/* Top Progress Track */
.mat-progress-header {
  margin-bottom: 24px;
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}

.mat-steps-track {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.mat-step-node {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.4;
  transition: all 0.3s ease;
}

.mat-step-node.is-completed {
  opacity: 0.85;
}

.mat-step-node.is-active {
  opacity: 1;
}

.step-node-num {
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #64748B;
  transition: color 0.3s ease;
}

.mat-step-node.is-completed .step-node-num {
  color: #4DA3FF;
}

.mat-step-node.is-active .step-node-num {
  color: #0071E3;
  text-shadow: 0 0 10px rgba(0, 113, 227, 0.6);
}

.step-node-label {
  font-family: var(--font-mono, monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: #858C96;
  text-transform: uppercase;
}

.mat-step-node.is-active .step-node-label {
  color: #FFFFFF;
  font-weight: 600;
}

.mat-progress-line-track {
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.mat-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 16.66%;
  background: linear-gradient(90deg, #0071E3 0%, #4DA3FF 100%);
  box-shadow: 0 0 12px rgba(0, 113, 227, 0.8);
  border-radius: 2px;
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Screens Viewport */
.mat-screens-viewport {
  position: relative;
  flex: 1;
  min-height: 0;
  z-index: 10;
}

.mat-screen {
  display: none;
  height: 100%;
  box-sizing: border-box;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.mat-screen.is-active {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 1;
  transform: translateX(0);
}

.mat-screen-intro.is-active,
.mat-screen-result.is-active {
  justify-content: center;
}

.mat-screen.is-leaving,
.mat-screen.is-leaving-back {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
}

.mat-screen.is-leaving {
  transform: translateX(-36px);
}

.mat-screen.is-leaving-back {
  transform: translateX(36px);
}

/* Screen 00: Intro */
.mat-intro-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  align-items: center;
  gap: 40px;
  padding: 10px 0;
}

.mat-badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: #4DA3FF;
  background: rgba(0, 113, 227, 0.1);
  border: 1px solid rgba(0, 113, 227, 0.28);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 22px;
  text-transform: uppercase;
}

.mat-badge-tag .badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0071E3;
  box-shadow: 0 0 8px #0071E3;
}

.mat-intro-title {
  font-family: var(--font-primary, sans-serif);
  font-size: clamp(2.2rem, 3.5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: #FFFFFF;
  margin: 0 0 16px 0;
}

.mat-intro-title .text-blue {
  color: #0071E3;
}

.mat-intro-desc {
  font-family: var(--font-primary, sans-serif);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #858C96;
  max-width: 480px;
  margin: 0 0 32px 0;
}

.mat-intro-action-wrap {
  margin-bottom: 34px;
}

.mat-btn-start {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #0071E3;
  color: #FFFFFF;
  font-family: var(--font-primary, sans-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 6px 25px rgba(0, 113, 227, 0.4);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.mat-btn-start:hover {
  background: #0077ED;
  box-shadow: 0 8px 32px rgba(0, 113, 227, 0.6);
  transform: translateY(-2px);
}

.mat-btn-start .btn-arrow {
  transition: transform 0.25s ease;
}

.mat-btn-start:hover .btn-arrow {
  transform: translateX(4px);
}

.mat-intro-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 22px;
}

.intro-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-primary, sans-serif);
  font-size: 0.8125rem;
  font-weight: 500;
  color: #858C96;
}

.intro-meta-item .meta-icon {
  font-size: 0.9rem;
}

/* Realistic 3D Visual in Intro */
.mat-intro-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mat-intro-img-frame {
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 113, 227, 0.15);
}

.mat-intro-hero-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.mat-intro-img-frame:hover .mat-intro-hero-img {
  transform: scale(1.02);
}

/* Question Screens */
.mat-q-header {
  margin-bottom: 26px;
}

.mat-q-counter {
  display: inline-block;
  font-family: var(--font-mono, monospace);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #0071E3;
  margin-bottom: 8px;
}

.mat-q-title {
  font-family: var(--font-primary, sans-serif);
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  margin: 0 0 8px 0;
}

.mat-q-sub {
  font-family: var(--font-primary, sans-serif);
  font-size: 0.9375rem;
  color: #858C96;
  margin: 0;
}

/* Options Grid */
.mat-options-grid {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}

.mat-options-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.mat-options-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.mat-options-grid.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.mat-option-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #0E1218;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  padding: 16px 20px;
  text-align: left;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  outline: none;
  width: 100%;
}

.mat-option-card:hover {
  background: #121822;
  border-color: rgba(0, 113, 227, 0.45);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(0, 113, 227, 0.14);
  transform: translateY(-2px);
}

.mat-option-card.is-selected {
  background: rgba(0, 113, 227, 0.12);
  border-color: #0071E3;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6), 0 0 24px rgba(0, 113, 227, 0.25);
}

/* Option Card with Thumbnail (Q1) */
.mat-option-card.with-thumb {
  display: grid;
  grid-template-columns: auto 1fr 54px;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
}

.opt-thumb-wrap {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  overflow: hidden;
  background: #06090E;
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.opt-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.mat-option-card:hover .opt-thumb-img {
  transform: scale(1.08);
}

/* Option Card Signal (Q3: Resistencia) */
.card-signal {
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  padding: 24px 20px;
}

.signal-indicator {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 38px;
}

.sig-bar {
  width: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  transition: all 0.3s ease;
}

.sig-bar.bar-1 { height: 12px; }
.sig-bar.bar-2 { height: 18px; }
.sig-bar.bar-3 { height: 26px; }
.sig-bar.bar-4 { height: 38px; }

.sig-bar.is-lit {
  background: #0071E3;
  box-shadow: 0 0 10px rgba(0, 113, 227, 0.6);
}

.card-signal:hover .sig-bar.is-lit,
.card-signal.is-selected .sig-bar.is-lit {
  background: #3898FF;
  box-shadow: 0 0 14px rgba(56, 152, 255, 0.8);
}

/* Option Card Cube (Q5: Acabado Visual) */
.card-cube {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 20px 18px 24px;
}

.cube-thumb-frame {
  width: 100%;
  height: 130px;
  border-radius: 10px;
  background: #070A0F;
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cube-thumb-img {
  max-height: 110px;
  max-width: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
}

.card-cube:hover .cube-thumb-img {
  transform: scale(1.06);
}

.card-cube .opt-body {
  align-items: center;
}

.opt-icon-wrap {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #4DA3FF;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.mat-option-card:hover .opt-icon-wrap {
  background: rgba(0, 113, 227, 0.16);
  border-color: rgba(77, 163, 255, 0.35);
  color: #FFFFFF;
}

.mat-option-card.is-selected .opt-icon-wrap {
  background: #0071E3;
  border-color: #4DA3FF;
  color: #FFFFFF;
  box-shadow: 0 0 14px rgba(0, 113, 227, 0.7);
}

.opt-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.opt-title {
  font-family: var(--font-primary, sans-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}

.opt-title small {
  font-size: 0.75rem;
  color: #858C96;
  font-weight: 400;
}

.opt-desc {
  font-family: var(--font-primary, sans-serif);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #858C96;
}

/* Question Navigation */
.mat-q-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: auto;
  padding-top: 18px;
}

.mat-nav-btn {
  font-family: var(--font-primary, sans-serif);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 12px 26px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.mat-nav-btn.btn-back {
  background: transparent;
  color: #858C96;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.mat-nav-btn.btn-back:hover {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.04);
}

.mat-nav-btn.btn-next {
  background: #0071E3;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 18px rgba(0, 113, 227, 0.35);
}

.mat-nav-btn.btn-next:hover:not(:disabled) {
  background: #0077ED;
  box-shadow: 0 6px 24px rgba(0, 113, 227, 0.55);
  transform: translateY(-2px);
}

.mat-nav-btn.btn-next:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
}

/* Screen 07: Result Screen */
.mat-result-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: flex-start;
  padding: 10px 0;
}

.mat-res-sub {
  font-family: var(--font-primary, sans-serif);
  font-size: 0.9375rem;
  color: #FFFFFF;
  margin-bottom: 6px;
}

.mat-res-name {
  font-family: var(--font-primary, sans-serif);
  font-size: clamp(2.6rem, 4vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #0071E3;
  line-height: 1.05;
  margin: 0 0 16px 0;
  text-transform: uppercase;
  word-break: break-word;
}

.mat-res-explanation {
  font-family: var(--font-primary, sans-serif);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #CBD5E1;
  margin: 0 0 24px 0;
}

.mat-res-ideal-block {
  margin-bottom: 30px;
}

.res-ideal-label {
  display: block;
  font-family: var(--font-primary, sans-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #94A3B8;
  margin-bottom: 10px;
}

.res-ideal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.res-tag {
  font-family: var(--font-primary, sans-serif);
  font-size: 0.8125rem;
  color: #E2E8F0;
  background: #141A24;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 14px;
  border-radius: 999px;
}

.mat-res-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.mat-res-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #0071E3;
  color: #FFFFFF;
  font-family: var(--font-primary, sans-serif);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 14px 26px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 6px 20px rgba(0, 113, 227, 0.4);
  transition: all 0.25s ease;
}

.mat-res-btn-primary:hover {
  background: #0077ED;
  box-shadow: 0 8px 28px rgba(0, 113, 227, 0.6);
  transform: translateY(-2px);
  color: #FFFFFF;
}

.mat-res-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #E2E8F0;
  font-family: var(--font-primary, sans-serif);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 14px 24px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.25s ease;
}

.mat-res-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(77, 163, 255, 0.4);
  color: #FFFFFF;
  transform: translateY(-2px);
}

.mat-btn-reset {
  background: transparent;
  border: none;
  color: #858C96;
  font-family: var(--font-primary, sans-serif);
  font-size: 0.8125rem;
  cursor: pointer;
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.25s ease;
}

.mat-btn-reset:hover {
  color: #4DA3FF;
}

/* Result Right Column: Visual Card + Property Metrics */
.mat-visual-card {
  background: #0E1218;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

.mat-visual-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 12px;
}

.mat-visual-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mat-visual-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(0, 113, 227, 0.2) 0%, transparent 75%);
  pointer-events: none;
}

.mat-visual-caption {
  position: absolute;
  bottom: 10px;
  left: 12px;
  font-family: var(--font-mono, monospace);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #FFFFFF;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Metrics Panel (Segmented Bars) */
.mat-metrics-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.metrics-title {
  font-family: var(--font-primary, sans-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #94A3B8;
  margin-bottom: 2px;
}

.metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.metric-name {
  font-family: var(--font-primary, sans-serif);
  font-size: 0.8125rem;
  color: #CBD5E1;
}

.metric-segments {
  display: flex;
  align-items: center;
  gap: 5px;
}

.m-seg {
  width: 22px;
  height: 7px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.m-seg.is-on {
  background: #0071E3;
  box-shadow: 0 0 8px rgba(0, 113, 227, 0.5);
}

/* Alternative box with thumbnail */
.mat-alt-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.alt-label {
  font-family: var(--font-primary, sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  color: #94A3B8;
}

.alt-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.25s ease;
  width: 100%;
}

.alt-btn:hover {
  background: rgba(0, 113, 227, 0.1);
  border-color: rgba(0, 113, 227, 0.4);
}

.alt-thumb-wrap {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.alt-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.alt-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.alt-name {
  font-family: var(--font-primary, sans-serif);
  font-size: 0.875rem;
  font-weight: 700;
  color: #FFFFFF;
}

.alt-desc {
  font-family: var(--font-primary, sans-serif);
  font-size: 0.75rem;
  color: #858C96;
}

/* Card 02: Explora las opciones */
.mat-explore-card {
  margin-top: 28px;
  background: #090C12;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  padding: 32px 40px;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(0, 113, 227, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}

/* Explore Footer: 6 Materials Overview */
.mat-explore-footer {
  margin-top: 50px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 40px;
}

.explore-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 24px;
}

.explore-sub {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #64748B;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.explore-title {
  font-family: var(--font-primary, sans-serif);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0;
}

.explore-lead {
  font-family: var(--font-primary, sans-serif);
  font-size: 0.875rem;
  color: #858C96;
  margin: 0;
}

.mat-cards-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.mat-catalog-card {
  background: #0E1218;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.mat-catalog-card:hover {
  background: #141A24;
  border-color: rgba(0, 113, 227, 0.5);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6), 0 0 16px rgba(0, 113, 227, 0.18);
  z-index: 5;
}

.mat-catalog-card.is-highlighted {
  border-color: #0071E3;
  background: rgba(0, 113, 227, 0.08);
  box-shadow: 0 8px 24px rgba(0, 113, 227, 0.25);
}

.cat-thumb-frame {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  background: #06090E;
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cat-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.mat-catalog-card:hover .cat-thumb-img {
  transform: scale(1.06);
}

.cat-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cat-name {
  font-family: var(--font-primary, sans-serif);
  font-size: 0.875rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
}

.cat-sub {
  font-family: var(--font-primary, sans-serif);
  font-size: 0.75rem;
  line-height: 1.4;
  color: #858C96;
  margin: 0;
}

.cat-link {
  font-family: var(--font-primary, sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  color: #3898FF;
  margin-top: 6px;
  display: inline-block;
  transition: transform 0.2s ease;
}

.mat-catalog-card:hover .cat-link {
  transform: translateX(3px);
}

/* RESPONSIVE DESIGN FOR MATERIAL SELECTOR */
@media (max-width: 900px) {
  .mat-tool-card {
    height: auto;
    min-height: 520px;
    padding: 32px 24px;
  }

  .mat-explore-card {
    padding: 28px 24px;
    border-radius: 18px;
    margin-top: 24px;
  }

  .mat-intro-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .mat-intro-visual {
    display: block;
    max-width: 480px;
    width: 100%;
    margin: 16px auto 0;
  }

  .mat-result-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .mat-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .mat-selector-section {
    padding: 60px 0;
  }

  .mat-selector-container {
    padding: 0 16px;
  }

  .mat-tool-card {
    padding: 24px 18px;
    border-radius: 16px;
  }

  .mat-explore-card {
    padding: 24px 18px;
    border-radius: 16px;
  }

  .mat-steps-track {
    overflow-x: auto;
    gap: 14px;
    padding-bottom: 8px;
  }

  .mat-options-grid.cols-2 {
    grid-template-columns: 1fr;
  }

  .explore-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .mat-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .mat-res-actions {
    flex-direction: column;
    width: 100%;
  }

  .mat-res-btn-primary,
  .mat-res-btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   05. CREATIVE WEB: HERO SHOWCASE (EDITORIAL + 3D FLOATING SCREENS DECK)
   Fiel a referencia visual: 40% Editorial / 60% Deck 3D Pantallas Flotantes
   ========================================================================== */
.cw-showcase-hero {
  position: relative;
  min-height: 100vh;
  background: #06080E;
  color: #FFFFFF;
  padding: 120px 48px 40px 48px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Fondo de Estudio Tecnológico con Resplandor Azul & Suelo Reflectante */
.cw-ambient-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cw-studio-glow-blue {
  position: absolute;
  width: 950px;
  height: 650px;
  top: 8%;
  right: 8%;
  background: radial-gradient(circle, rgba(0, 113, 227, 0.16) 0%, rgba(0, 80, 180, 0.05) 50%, transparent 75%);
  filter: blur(75px);
}

.cw-studio-glow-top {
  position: absolute;
  width: 700px;
  height: 450px;
  top: -120px;
  left: 15%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.025) 0%, transparent 70%);
  filter: blur(60px);
}

.cw-studio-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.65;
}

.cw-studio-floor-reflection {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 380px;
  background: 
    radial-gradient(ellipse 65% 35% at 68% 80%, rgba(0, 113, 227, 0.14) 0%, transparent 60%),
    linear-gradient(to top, rgba(0, 113, 227, 0.06) 0%, rgba(6, 8, 14, 0.88) 45%, #06080E 100%);
  z-index: 2;
}

/* Contenedor Principal */
.cw-hero-inner {
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ==========================================================================
   FILA SUPERIOR: 40% EDITORIAL IZQUIERDA / 60% DECK 3D DERECHA
   ========================================================================== */
.cw-hero-top-row {
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: 30px;
  align-items: center;
  min-height: 480px;
}

/* Columna Editorial Izquierda */
.cw-editorial-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 5;
}

.cw-kicker {
  font-family: 'Space Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: #8A92A2;
  margin-bottom: 18px;
  font-weight: 500;
  text-transform: uppercase;
}

.cw-hero-title {
  font-size: 2.35rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  margin: 0 0 16px 0;
}

.cw-hero-title .accent-blue {
  color: #0071E3;
}

.cw-hero-subtitle {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #7B8494;
  margin-bottom: 22px;
}

.cw-hero-description {
  font-size: 14px;
  line-height: 1.65;
  color: #9BA4B5;
  max-width: 440px;
  margin: 0 0 32px 0;
}

.cw-hero-cta-group {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.cw-btn-primary {
  background: #FFFFFF;
  color: #000000;
  border-radius: 9999px;
  padding: 13px 28px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 32px rgba(0, 113, 227, 0.72), 0 0 18px rgba(0, 113, 227, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cw-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 44px rgba(0, 113, 227, 0.9), 0 0 26px rgba(0, 113, 227, 0.6);
}

.cw-btn-secondary {
  background: rgba(255, 255, 255, 0.02);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9999px;
  padding: 13px 26px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(8px);
  transition: background 0.25s ease, border-color 0.25s ease;
}

.cw-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   COLUMNA DERECHA: DECK 3D DE PANTALLAS FLOTANTES
   ========================================================================== */
.cw-deck-col {
  position: relative;
  width: 100%;
  height: 460px;
}

.cw-deck-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cw-deck-cards-track {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Tarjetas Generales: pantallas web inmersivas full-bleed */
.cw-deck-viewport { perspective: 1800px; }
.cw-deck-card {
  position: absolute;
  top: 50%;
  border-radius: 16px;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s ease, filter 0.9s ease,
              left 0.9s cubic-bezier(0.16, 1, 0.3, 1), width 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  cursor: pointer;
  will-change: transform;
}
.card-screen-glass {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: #07090D;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 60px -18px rgba(0, 0, 0, 0.95);
}
.card-shadow-plane {
  position: absolute;
  bottom: -28px; left: 8%; right: 8%;
  height: 36px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.85) 0%, transparent 72%);
  filter: blur(10px);
  pointer-events: none;
}
/* Reflejo en el piso de estudio */
.card-reflection {
  position: absolute;
  left: 4%; right: 4%;
  top: calc(100% + 6px);
  height: 38%;
  border-radius: 16px;
  background: linear-gradient(to bottom, rgba(120, 160, 255, 0.10), transparent 70%);
  filter: blur(6px);
  opacity: 0.5;
  pointer-events: none;
}

/* Imagen inmersiva full-bleed */
.imm-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.9s ease;
  filter: saturate(0.95);
}
.card-slot-center .imm-bg { animation: immKenBurns 14s ease-in-out infinite alternate; }
@keyframes immKenBurns {
  0%   { transform: scale(1.04) translate(0, 0); }
  100% { transform: scale(1.14) translate(-2%, -1.5%); }
}
.imm-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 7, 11, 0.88) 0%, rgba(5, 7, 11, 0.55) 38%, rgba(5, 7, 11, 0.05) 70%),
    linear-gradient(to top, rgba(5, 7, 11, 0.85) 0%, transparent 32%),
    linear-gradient(to bottom, rgba(5, 7, 11, 0.6) 0%, transparent 22%);
}
.theme-light .imm-shade {
  background:
    linear-gradient(90deg, rgba(10, 9, 7, 0.82) 0%, rgba(10, 9, 7, 0.45) 40%, transparent 72%),
    linear-gradient(to top, rgba(10, 9, 7, 0.8) 0%, transparent 32%),
    linear-gradient(to bottom, rgba(10, 9, 7, 0.55) 0%, transparent 22%);
}
.theme-fintech .imm-shade {
  background:
    linear-gradient(90deg, rgba(3, 10, 28, 0.92) 0%, rgba(3, 14, 40, 0.6) 45%, rgba(0, 60, 160, 0.15) 100%),
    linear-gradient(to top, rgba(3, 8, 20, 0.9) 0%, transparent 35%);
}
.theme-red .imm-shade {
  background:
    linear-gradient(90deg, rgba(14, 2, 4, 0.9) 0%, rgba(30, 3, 6, 0.55) 42%, transparent 75%),
    linear-gradient(to top, rgba(10, 2, 3, 0.85) 0%, transparent 32%);
}
.theme-warm .imm-shade {
  background:
    linear-gradient(90deg, rgba(12, 8, 4, 0.9) 0%, rgba(12, 8, 4, 0.5) 42%, transparent 75%),
    linear-gradient(to top, rgba(12, 8, 4, 0.85) 0%, transparent 32%);
}
/* Producto sobre fondo negro: anclado a la derecha para dejar aire al copy */
.theme-dark { background: #000000; }
.imm-bg.imm-bg-product { left: auto; right: 0; width: 66%; }
.cw-deck-card:not(.card-slot-center) .imm-bg.imm-bg-product { width: 100%; }

/* Barrido de luz sobre el cristal */
.imm-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.09) 48%, transparent 60%);
  transform: translateX(-120%);
  pointer-events: none;
}
.card-slot-center .imm-shine { animation: immShine 6s ease-in-out 1.2s infinite; }
@keyframes immShine {
  0%, 70% { transform: translateX(-120%); }
  100%    { transform: translateX(120%); }
}

/* Navegación del sitio */
.imm-nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 22px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.72);
  z-index: 2;
}
.imm-brand {
  font-weight: 700;
  letter-spacing: 0.16em;
  font-size: 10.5px;
  color: #FFFFFF;
  white-space: nowrap;
}
.theme-red .imm-brand {
  font-family: Georgia, serif;
  font-style: italic;
  letter-spacing: 0;
  font-size: 15px;
  color: #FF2B3A;
  text-shadow: 0 0 14px rgba(255, 43, 58, 0.55);
}
.imm-links, .imm-actions { display: flex; gap: 16px; white-space: nowrap; }
.imm-link.is-on { color: #FFFFFF; }

/* Copy hero del sitio */
.imm-copy {
  position: absolute;
  left: 24px;
  bottom: 62px;
  width: 260px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.imm-kicker {
  font-family: 'Space Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 10px;
  white-space: nowrap;
}
.theme-fintech .imm-kicker { color: #4DA3FF; }
.theme-red .imm-kicker { color: #FF6B76; }
.theme-warm .imm-kicker, .theme-light .imm-kicker { color: #D9B77E; }
.imm-title {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  margin: 0 0 10px 0;
  white-space: nowrap;
  transition: font-size 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.imm-desc {
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.68);
  margin: 0 0 14px 0;
  max-width: 230px;
}
.imm-chip-row { display: flex; gap: 8px; margin-bottom: 14px; }
.imm-chip {
  font-family: 'Space Mono', monospace;
  font-size: 8.5px;
  color: rgba(255, 255, 255, 0.7);
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(77, 163, 255, 0.35);
  background: rgba(0, 113, 227, 0.12);
  backdrop-filter: blur(6px);
}
.imm-chip b { color: #FFFFFF; }
.imm-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  color: #000000;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.imm-cta i { font-style: normal; transition: transform 0.3s ease; }
.cw-deck-card:hover .imm-cta i { transform: translateX(3px); }
.theme-red .imm-cta { background: #E4101F; color: #FFFFFF; }

/* Paginación del sitio */
.imm-foot {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px 16px;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  z-index: 2;
}
.imm-progress {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  overflow: hidden;
}
.imm-progress-fill {
  display: block;
  height: 100%;
  width: 25%;
  background: #FFFFFF;
  transition: width 0.5s ease;
}
.imm-arrows { display: flex; gap: 8px; }
.imm-arrow {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
  font-size: 12px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.imm-arrow:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.5); }

/* Estado lateral: solo se insinúa el sitio (nav + titular recortado) */
.cw-deck-card:not(.card-slot-center) .imm-links,
.cw-deck-card:not(.card-slot-center) .imm-actions,
.cw-deck-card:not(.card-slot-center) .imm-desc,
.cw-deck-card:not(.card-slot-center) .imm-chip-row,
.cw-deck-card:not(.card-slot-center) .imm-foot,
.cw-deck-card:not(.card-slot-center) .imm-kicker {
  opacity: 0;
  pointer-events: none;
}
.cw-deck-card:not(.card-slot-center) .imm-copy { left: 14px; bottom: 22px; }
.cw-deck-card:not(.card-slot-center) .imm-nav { padding: 12px 14px; }
.cw-deck-card:not(.card-slot-center) .imm-title { font-size: 17px; }
.cw-deck-card:not(.card-slot-center) .imm-cta { padding: 5px 10px; font-size: 7px; }
.imm-links, .imm-actions, .imm-desc, .imm-chip-row, .imm-foot, .imm-kicker {
  transition: opacity 0.5s ease 0.25s;
}

/* -------------------------------------------------------------
   POSICIONES DEL DECK (5 pantallas)
   ------------------------------------------------------------- */
.card-slot-1 {
  width: 150px; height: 300px;
  left: 6%;
  transform: translate(-50%, -50%) rotateY(28deg) scale(0.86);
  opacity: 0.55;
  filter: brightness(0.6) blur(0.6px);
  z-index: 10;
}
.card-slot-2 {
  width: 190px; height: 360px;
  left: 18%;
  transform: translate(-50%, -50%) rotateY(20deg) scale(0.94);
  opacity: 0.9;
  filter: brightness(0.78);
  z-index: 20;
}
.card-slot-center {
  width: 560px; height: 380px;
  left: 52%;
  transform: translate(-50%, -50%) rotateY(-9deg) rotateX(2deg);
  opacity: 1;
  filter: none;
  z-index: 30;
}
.card-slot-center .card-screen-glass {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(0, 113, 227, 0.15), 0 0 60px rgba(0, 113, 227, 0.22);
}
.card-slot-center .card-shadow-plane {
  bottom: -40px; height: 54px;
  background: radial-gradient(ellipse at center, rgba(0, 113, 227, 0.35) 0%, rgba(0, 0, 0, 0.9) 50%, transparent 75%);
  filter: blur(16px);
}
.card-slot-4 {
  width: 190px; height: 360px;
  left: 85%;
  transform: translate(-50%, -50%) rotateY(-20deg) scale(0.94);
  opacity: 0.9;
  filter: brightness(0.78);
  z-index: 20;
}
.card-slot-5 {
  width: 150px; height: 300px;
  left: 97%;
  transform: translate(-50%, -50%) rotateY(-28deg) scale(0.86);
  opacity: 0.55;
  filter: brightness(0.6) blur(0.6px);
  z-index: 10;
}
.card-slot-1:hover, .card-slot-2:hover, .card-slot-4:hover, .card-slot-5:hover {
  opacity: 1;
  filter: brightness(0.95);
}
.cw-deck-card:not(.card-slot-center):hover .imm-bg { transform: scale(1.12); }

@media (prefers-reduced-motion: reduce) {
  .card-slot-center .imm-bg, .card-slot-center .imm-shine { animation: none; }
}

/* ==========================================================================
   FILA MEDIA: BARRA SELECTORA DE SOLUCIONES SEGÚN EL CLIENTE
   ========================================================================== */
.cw-solutions-selector-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.cw-solutions-label {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6E7684;
}

.cw-solutions-pills-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.cw-solution-pill {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 9999px;
  padding: 10px 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.25s ease;
  outline: none;
}

.cw-solution-pill .pill-num {
  font-family: 'Space Mono', monospace;
  font-size: 11.5px;
  font-weight: 700;
  color: #8A92A2;
  transition: color 0.25s ease;
}

.cw-solution-pill .pill-text {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
}

.cw-solution-pill:hover {
  border-color: rgba(0, 113, 227, 0.5);
  background: rgba(0, 113, 227, 0.04);
}

.cw-solution-pill.is-active {
  border-color: #0071E3;
  background: rgba(0, 113, 227, 0.08);
  box-shadow: 0 0 20px rgba(0, 113, 227, 0.4), inset 0 0 10px rgba(0, 113, 227, 0.15);
}

.cw-solution-pill.is-active .pill-num {
  color: #0071E3;
}

/* ==========================================================================
   FILA INFERIOR: TIRA DE 3 COLUMNAS CON ICONOS
   ========================================================================== */
.cw-features-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 26px;
  margin-top: 8px;
}

.cw-feature-col {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 28px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.cw-feature-col:first-child {
  padding-left: 0;
}
.cw-feature-col:last-child {
  border-right: none;
}

.cw-feature-icon-box {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cw-feature-heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #FFFFFF;
  margin-bottom: 4px;
}

.cw-feature-sub {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #7E8797;
  text-transform: uppercase;
}

/* ==========================================================================
   MARGEN DERECHO: INDICADOR VERTICAL DE SCROLL
   ========================================================================== */
.cw-scroll-indicator {
  position: absolute;
  right: 28px;
  bottom: 85px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 5;
}

.cw-scroll-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: 'Space Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: #697282;
  font-weight: 500;
}

.cw-scroll-track {
  width: 1px;
  height: 64px;
  background: rgba(255, 255, 255, 0.14);
  position: relative;
}

.cw-scroll-pip {
  position: absolute;
  top: 20px;
  left: -1px;
  width: 3px;
  height: 18px;
  background: #0071E3;
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(0, 113, 227, 0.9);
  animation: scrollPipPulse 2.4s ease-in-out infinite;
}

@keyframes scrollPipPulse {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.8;
  }
  50% {
    transform: translateY(18px);
    opacity: 1;
    box-shadow: 0 0 14px rgba(0, 113, 227, 1);
  }
}

/* ==========================================================================
   RESPONSIVE DESIGN (TABLET & MOBILE)
   ========================================================================== */
@media (max-width: 1200px) {
  .cw-hero-top-row {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .cw-editorial-col {
    max-width: 650px;
  }
  .cw-deck-col {
    height: 400px;
  }
  .card-slot-center {
    width: 500px;
    height: 340px;
  }
  .cw-features-strip {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .cw-feature-col {
    padding: 12px 0;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .cw-feature-col:last-child {
    border-bottom: none;
  }
}

@media (max-width: 768px) {
  .cw-showcase-hero {
    padding: 95px 20px 32px 20px;
  }
  .cw-hero-title {
    font-size: 2.1rem;
  }
  .cw-hero-description {
    font-size: 13.5px;
  }
  .cw-deck-col {
    height: 330px;
  }
  .card-slot-1, .card-slot-5 {
    display: none;
  }
  .card-slot-2 { left: 8%; width: 120px; height: 240px; opacity: 0.5; }
  .card-slot-4 { left: 92%; width: 120px; height: 240px; opacity: 0.5; }
  .card-slot-center { width: 300px; height: 300px; left: 50%; transform: translate(-50%, -50%); }
  .card-slot-center .imm-links { display: none; }
  .card-slot-center .imm-title { font-size: 24px; }
  .cw-scroll-indicator {
    display: none;
  }
}

/* ==========================================================================
   08. APPLE-STYLE DIGITAL SOLUTIONS INTERACTIVE SHOWCASE (creative-web)
   ========================================================================== */
.sp-apple-interactive-section {
  padding: 100px 32px 120px 32px;
  background: #06080C;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.apple-showcase-wrapper {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: 40px;
  align-items: start;
  position: relative;
  z-index: 5;
}

/* Columna Izquierda: Pills y Controles */
.apple-solutions-left {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: sticky;
  top: 100px;
}

.apple-nav-chevrons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
  flex-shrink: 0;
}

.apple-chevron-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #8A9098;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  outline: none;
}

.apple-chevron-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(0, 113, 227, 0.5);
  color: #FFFFFF;
  transform: scale(1.05);
}

.apple-pills-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.apple-solution-card {
  width: 100%;
  transition: all 0.3s ease;
}

.apple-pill-btn {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  text-align: left;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}

.apple-pill-btn:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.22);
}

.apple-pill-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #D1D5DB;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.apple-pill-icon .icon-active-symbol {
  display: none;
}

.apple-pill-icon .icon-plus {
  display: block;
}

.apple-pill-title {
  font-family: var(--font-primary, sans-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #CAD2DE;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}

/* Estado Activo de la Solución */
.apple-solution-card.is-active .apple-pill-btn {
  background: rgba(0, 113, 227, 0.15);
  border-color: #0071E3;
  box-shadow: 0 0 24px rgba(0, 113, 227, 0.22);
}

.apple-solution-card.is-active .apple-pill-btn .apple-pill-title {
  color: #FFFFFF;
  font-weight: 700;
}

.apple-solution-card.is-active .apple-pill-icon {
  background: #0071E3;
  border-color: #0071E3;
  color: #FFFFFF;
  box-shadow: 0 0 10px rgba(0, 113, 227, 0.6);
}

.apple-solution-card.is-active .apple-pill-icon .icon-plus {
  display: none;
}

.apple-solution-card.is-active .apple-pill-icon .icon-active-symbol {
  display: block;
}

/* Tarjeta expandida */
.apple-expanded-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, margin 0.35s ease;
  margin-top: 0;
}

.apple-solution-card.is-active .apple-expanded-content {
  max-height: 700px;
  opacity: 1;
  margin-top: 10px;
  background: rgba(14, 18, 26, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  padding: 22px 24px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 113, 227, 0.10);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.apple-card-lead {
  font-family: var(--font-primary, sans-serif);
  font-size: 0.875rem;
  line-height: 1.55;
  color: #CAD2DE;
  margin: 0 0 16px 0;
}

.apple-card-lead strong {
  color: #FFFFFF;
}

.apple-elements-guide {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.guide-label {
  font-family: var(--font-mono, monospace);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: #8A9098;
  font-weight: 700;
  text-transform: uppercase;
}

.apple-elements-pills {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.apple-elem-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: var(--font-primary, sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  color: #A0AAB8;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  outline: none;
}

.apple-elem-btn .elem-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #64748b;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.apple-elem-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(0, 113, 227, 0.4);
  color: #FFFFFF;
}

.apple-elem-btn.is-active {
  background: rgba(0, 113, 227, 0.16);
  border-color: #0071E3;
  color: #FFFFFF;
  box-shadow: 0 0 12px rgba(0, 113, 227, 0.25);
}

.apple-elem-btn.is-active .elem-dot {
  background: #0071E3;
  box-shadow: 0 0 8px #0071E3;
}

.apple-elem-dynamic-desc {
  background: rgba(0, 0, 0, 0.45);
  border-left: 2px solid #0071E3;
  border-radius: 0 10px 10px 0;
  padding: 10px 14px;
}

.desc-badge {
  font-family: var(--font-mono, monospace);
  font-size: 0.5625rem;
  color: #0071E3;
  letter-spacing: 0.12em;
  font-weight: 700;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.desc-text {
  font-family: var(--font-primary, sans-serif);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #E2E8F0;
  margin: 0;
}

.desc-text strong {
  color: #FFFFFF;
}

/* Columna Derecha: Hardware Frame Estilo Apple */
.apple-preview-right {
  width: 100%;
}

.apple-hardware-frame {
  background: #0A0D14;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 26px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.88), 0 0 50px rgba(0, 113, 227, 0.15);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.apple-hardware-bar {
  height: 44px;
  background: rgba(16, 20, 28, 0.96);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
}

.apple-window-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.apple-window-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dot-red { background: #FF5F56; }
.dot-yellow { background: #FFBD2E; }
.dot-green { background: #27C93F; }

.apple-url-container {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 4px 14px;
  font-family: var(--font-mono, monospace);
  font-size: 0.6875rem;
  color: #CAD2DE;
}

.apple-inspector-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 0.625rem;
  font-weight: 700;
  color: #0071E3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.inspector-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00E676;
  box-shadow: 0 0 8px #00E676;
  animation: cwPulseDot 2s infinite ease-in-out;
}

/* Pantalla Viewport y Página Store Continua Estilo Apple (Colores Claros) */
.apple-viewport-screen {
  height: 560px;
  max-height: 560px;
  position: relative;
  background: #F5F5F7;
  overflow: hidden;
}

.aura-phone-store-page {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  position: relative;
  background: #F5F5F7;
  color: #1D1D1F;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", var(--font-primary, sans-serif);
  -webkit-overflow-scrolling: touch;
}

.aura-phone-store-page::-webkit-scrollbar {
  width: 6px;
}
.aura-phone-store-page::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
}
.aura-phone-store-page::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 999px;
}
.aura-phone-store-page::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.35);
}

/* Sticky Sub-Nav de la Tienda AURA Phone Pro */
.aura-subnav {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 18px;
  gap: 12px;
}

.aura-subnav-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.aura-subnav-brand {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #1D1D1F;
  letter-spacing: -0.01em;
}

.aura-subnav-badge {
  font-size: 0.5625rem;
  font-weight: 700;
  color: #86868B;
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}

.aura-subnav-links {
  display: flex;
  align-items: center;
  gap: 6px;
}

.aura-nav-pill {
  background: transparent;
  border: none;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #515154;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

.aura-nav-pill:hover {
  color: #1D1D1F;
  background: rgba(0, 0, 0, 0.05);
}

.aura-nav-pill.is-active {
  color: #FFFFFF;
  background: #1D1D1F;
  font-weight: 600;
}

.aura-subnav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.aura-subnav-price {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #1D1D1F;
}

.aura-subnav-buy-btn {
  background: #0071E3;
  color: #FFFFFF;
  border: none;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.aura-subnav-buy-btn:hover {
  background: #0077ED;
  box-shadow: 0 2px 8px rgba(0, 113, 227, 0.35);
}

/* Secciones de la Tienda AURA Phone Pro */
.aura-store-section {
  position: relative;
  padding: 28px 24px 34px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.aura-store-section:last-child {
  border-bottom: none;
}

/* SECCIÓN 01: HERO & ACABADOS */
.aura-hero-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.aura-eyebrow {
  font-size: 0.625rem;
  font-weight: 700;
  color: #BF4800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.aura-hero-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: #1D1D1F;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
}

.aura-hero-subtitle {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #6E6E73;
  margin: 0;
}

.aura-hero-price-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
}

.aura-hero-price {
  font-size: 0.875rem;
  font-weight: 700;
  color: #1D1D1F;
}

.aura-hero-msi {
  font-size: 0.6875rem;
  color: #86868B;
}

.aura-hero-cta-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.aura-primary-btn {
  background: #0071E3;
  color: #FFFFFF;
  border: none;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.aura-primary-btn:hover {
  background: #0077ED;
}

.aura-ghost-btn {
  background: transparent;
  color: #0071E3;
  border: 1px solid rgba(0, 113, 227, 0.35);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.aura-ghost-btn:hover {
  background: rgba(0, 113, 227, 0.08);
}

.aura-hero-product-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.aura-product-img-box {
  position: relative;
  width: 100%;
  max-width: 260px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 6px 0;
  perspective: 1000px;
  cursor: grab;
}

.aura-titanium-img {
  max-width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: contain;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.12));
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), filter 0.45s ease;
  transform-style: preserve-3d;
  will-change: transform, filter;
  border-radius: 12px;
}

.aura-phone-specular-glare {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  mix-blend-mode: screen;
  z-index: 2;
}

.aura-floating-spec-badge {
  position: absolute;
  bottom: -6px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.5625rem;
  font-weight: 700;
  color: #1D1D1F;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 5px;
}

.badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #0071E3;
}

.aura-bento-selectors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
}

.aura-selector-card {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.selector-lbl {
  font-size: 0.5625rem;
  font-weight: 700;
  color: #86868B;
  letter-spacing: 0.05em;
}

.selector-val {
  font-size: 0.625rem;
  font-weight: 700;
  color: #1D1D1F;
}

.aura-color-swatches {
  display: flex;
  gap: 8px;
}

.color-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  outline: none;
}

.color-swatch:hover {
  transform: scale(1.15);
}

.color-swatch.is-active {
  box-shadow: 0 0 0 2px #0071E3;
  transform: scale(1.15);
}

.aura-storage-pills {
  display: flex;
  gap: 6px;
}

.storage-pill {
  flex: 1;
  text-align: center;
  font-size: 0.5625rem;
  font-weight: 600;
  color: #515154;
  background: #F5F5F7;
  border-radius: 6px;
  padding: 5px 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.storage-pill.is-active {
  background: #1D1D1F;
  color: #FFFFFF;
}

.aura-trust-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trust-icon {
  font-size: 1rem;
}

.trust-text {
  display: flex;
  flex-direction: column;
}

.trust-text strong {
  font-size: 0.625rem;
  font-weight: 700;
  color: #1D1D1F;
}

.trust-text span {
  font-size: 0.5625rem;
  color: #86868B;
}

/* SECCIÓN 02: CÁMARAS & INTERACCIÓN 60 FPS */
.aura-section-header-clean {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

.aura-eyebrow-accent {
  font-size: 0.625rem;
  font-weight: 700;
  color: #0071E3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.aura-subheadline {
  font-size: 1.35rem;
  font-weight: 800;
  color: #1D1D1F;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}

.aura-section-p {
  font-size: 0.75rem;
  color: #6E6E73;
  margin: 0;
  max-width: 480px;
}

.aura-focal-controller {
  display: flex;
  justify-content: center;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  padding: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  margin: 4px auto;
}

.focal-pill {
  background: transparent;
  border: none;
  font-size: 0.625rem;
  font-weight: 600;
  color: #515154;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

.focal-pill.is-active {
  background: #1D1D1F;
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.aura-camera-interactive-stage {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 14px;
  align-items: stretch;
}

.aura-optical-card {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.optical-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding-bottom: 4px;
}

.spec-label {
  font-size: 0.5625rem;
  font-weight: 700;
  color: #86868B;
}

.spec-val {
  font-size: 0.625rem;
  font-weight: 600;
  color: #1D1D1F;
}

/* ==========================================================================
   FOTORREALISMO & VISOR 3D DE CÁMARAS (Reemplaza maquetas CSS sintéticas)
   ========================================================================== */
.aura-lens-macro-stage {
  background: #0A0D14;
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  margin: 4px 0;
}

.lens-macro-viewport {
  position: relative;
  width: 100%;
  height: 140px;
  border-radius: 12px;
  overflow: hidden;
  background: #000000;
  cursor: crosshair;
}

.lens-macro-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), filter 0.45s ease;
  transform: scale(1.05);
}

.lens-macro-viewport:hover .lens-macro-photo {
  transform: scale(1.18);
}

.lens-specular-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(0, 113, 227, 0.6) 0%, rgba(255, 255, 255, 0.25) 20%, transparent 65%);
  opacity: 0.7;
  transition: opacity 0.2s ease;
  mix-blend-mode: screen;
}

.lens-hud-overlay {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
}

.hud-focal-tag {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  padding: 4px 8px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.hud-mm {
  font-size: 0.75rem;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.01em;
}

.hud-res {
  font-size: 0.4375rem;
  font-weight: 700;
  color: #00E676;
  letter-spacing: 0.06em;
}

.hud-aperture-badge {
  background: rgba(0, 113, 227, 0.85);
  color: #FFFFFF;
  font-size: 0.5625rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  box-shadow: 0 0 10px rgba(0, 113, 227, 0.5);
}

.aura-lens-toggles {
  display: flex;
  gap: 6px;
}

.lens-toggle-btn {
  flex: 1;
  background: #F5F5F7;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  padding: 6px 4px;
  font-size: 0.5625rem;
  font-weight: 700;
  color: #515154;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lens-toggle-btn.is-active {
  background: #0071E3;
  color: #FFFFFF;
  border-color: #0071E3;
}

/* Visor 3D Interactivo de la Cámara Cuádruple */
.aura-camera-visual-box {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
  perspective: 1000px;
}

.aura-camera-3d-chassis {
  position: relative;
  width: 100%;
  max-width: 210px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
  background: #ECECF0;
  cursor: grab;
}

.camera-real-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.camera-photo-glare {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, transparent 55%);
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

/* Retículas interactivas sobre cada lente real */
.lens-reticle {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 113, 227, 0.15);
  border: 1.5px solid rgba(0, 113, 227, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  transition: all 0.25s ease;
  z-index: 5;
  transform: translate(-50%, -50%);
}

.lens-reticle .reticle-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px dashed rgba(0, 113, 227, 0.6);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.lens-reticle .reticle-label {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  background: rgba(0, 0, 0, 0.85);
  color: #FFFFFF;
  font-size: 0.5rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.lens-reticle:hover,
.lens-reticle.is-active {
  background: rgba(0, 113, 227, 0.35);
  border-color: #0071E3;
  box-shadow: 0 0 16px rgba(0, 113, 227, 0.6);
  transform: translate(-50%, -50%) scale(1.12);
}

.lens-reticle.is-active .reticle-ring {
  opacity: 1;
  animation: reticleSpin 6s linear infinite;
}

.lens-reticle:hover .reticle-label,
.lens-reticle.is-active .reticle-label {
  display: block;
}

@keyframes reticleSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.reticle-13mm {
  top: 30%;
  left: 45%;
}

.reticle-24mm {
  top: 72%;
  left: 45%;
}

.reticle-120mm {
  top: 55%;
  left: 77%;
}

.camera-floating-telemetry {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 4;
}

.telemetry-badge {
  font-size: 0.4375rem;
  font-weight: 800;
  color: #CAD2DE;
  letter-spacing: 0.08em;
}

.camera-fps-pill {
  background: #E8F5E9;
  border: 1px solid #A5D6A7;
  color: #2E7D32;
  font-size: 0.5625rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(46, 125, 50, 0.12);
}

/* Acabados de titanio reactivos en tiempo real */
.aura-titanium-img.finish-natural {
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.14));
}
.aura-titanium-img.finish-grafito {
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.18)) brightness(0.72) contrast(1.18) saturate(0.35);
}
.aura-titanium-img.finish-desierto {
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.14)) sepia(0.32) saturate(1.4) brightness(1.05);
}
.aura-titanium-img.finish-blanco {
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.12)) brightness(1.22) contrast(1.08) saturate(0.25);
}

/* SECCIÓN 03: LOOKBOOK & MONOGRAFÍA EDITORIAL */
.aura-editorial-header {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.editorial-monumental-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #1D1D1F;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 4px 0 0 0;
}

.editorial-quote-text {
  font-size: 0.75rem;
  line-height: 1.5;
  color: #515154;
  font-style: italic;
  border-left: 2px solid #0071E3;
  padding-left: 12px;
  margin: 0;
}

.aura-editorial-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 14px;
  align-items: stretch;
}

.editorial-specs-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.editorial-metric-block {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.metric-huge {
  font-size: 1.5rem;
  font-weight: 800;
  color: #1D1D1F;
  letter-spacing: -0.03em;
  display: block;
  line-height: 1;
}

.metric-title {
  font-size: 0.5625rem;
  font-weight: 700;
  color: #86868B;
  letter-spacing: 0.06em;
  margin-top: 2px;
  display: block;
}

.metric-desc {
  font-size: 0.6875rem;
  color: #6E6E73;
  margin: 4px 0 0 0;
  line-height: 1.35;
}

.editorial-press-action {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.aura-download-dossier-btn {
  background: #1D1D1F;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.6875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.aura-download-dossier-btn:hover {
  background: #0071E3;
}

.dossier-subtext {
  font-size: 0.5625rem;
  color: #86868B;
}

.editorial-media-column {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  min-height: 220px;
}

.editorial-photo-chassis {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  perspective: 1000px;
}

.editorial-art-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
}

.editorial-photo-chassis:hover .editorial-art-img {
  transform: scale(1.04);
}

@keyframes auraPricePop {
  0% { transform: scale(0.96); opacity: 0.6; }
  50% { transform: scale(1.05); color: #0071E3; }
  100% { transform: scale(1); opacity: 1; }
}

.aura-price-pop {
  animation: auraPricePop 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes shutterFlash {
  0% { opacity: 0; }
  25% { opacity: 0.85; }
  100% { opacity: 0; }
}

.lens-macro-viewport.is-shutter-flashing::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #FFFFFF;
  z-index: 10;
  pointer-events: none;
  animation: shutterFlash 0.3s ease-out forwards;
}

.editorial-photo-overlay {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.photo-art-badge {
  font-size: 0.5625rem;
  font-weight: 700;
  color: #1D1D1F;
}

.photo-art-credit {
  font-size: 0.5rem;
  color: #86868B;
}

/* SECCIÓN 04: RENDIMIENTO & SEO SUB-1S */
.aura-lighthouse-card {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.audit-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.audit-card-title {
  font-size: 0.625rem;
  font-weight: 700;
  color: #86868B;
  letter-spacing: 0.06em;
}

.audit-card-badge {
  font-size: 0.625rem;
  font-weight: 700;
  color: #34C759;
  background: #E8F5E9;
  padding: 2px 8px;
  border-radius: 4px;
}

.audit-gauges-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.gauge-apple-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.gauge-ring-box {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid #34C759;
  background: rgba(52, 199, 89, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(52, 199, 89, 0.2);
}

.gauge-score {
  font-size: 0.875rem;
  font-weight: 800;
  color: #248A3D;
}

.gauge-label {
  font-size: 0.5rem;
  font-weight: 700;
  color: #515154;
  letter-spacing: 0.04em;
  text-align: center;
}

.aura-perf-dual-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.aura-white-card {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.white-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-chip {
  font-size: 0.5625rem;
  font-weight: 700;
  color: #86868B;
  letter-spacing: 0.06em;
}

.card-status-green {
  font-size: 0.5625rem;
  font-weight: 700;
  color: #34C759;
}

.card-status-blue {
  font-size: 0.5625rem;
  font-weight: 700;
  color: #0071E3;
}

.vitals-micro-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vital-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.625rem;
}

.v-name {
  color: #6E6E73;
}

.v-val.green {
  font-weight: 700;
  color: #248A3D;
}

.checkout-hint {
  font-size: 0.6875rem;
  color: #6E6E73;
  line-height: 1.35;
  margin: 0;
}

.aura-one-tap-button {
  background: #000000;
  color: #FFFFFF;
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  margin-top: 4px;
  transition: transform 0.2s ease;
}

.aura-one-tap-button:hover {
  transform: scale(1.02);
}

.pay-logo {
  font-size: 0.8125rem;
  font-weight: 700;
}

.pay-label {
  font-size: 0.6875rem;
  font-weight: 600;
}

.aura-google-search-preview {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.google-preview-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.google-favicon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #4285F4;
  color: #FFFFFF;
  font-size: 0.5rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.google-domain {
  font-size: 0.625rem;
  color: #202124;
}

.google-headline {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1A0DAB;
  line-height: 1.25;
}

.google-rich-snippets {
  font-size: 0.625rem;
  color: #4D5156;
  display: flex;
  align-items: center;
  gap: 4px;
}

.stars {
  color: #E37400;
  font-weight: 700;
}

.google-snippet-text {
  font-size: 0.6875rem;
  color: #4D5156;
  line-height: 1.35;
  margin: 0;
}

/* Indicador inferior estilo iPhone/iPad */
.apple-hardware-footer {
  height: 20px;
  background: #F5F5F7;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.apple-home-indicator {
  width: 90px;
  height: 4px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 999px;
}

/* ========================================================================== 
   DIGITAL LAB — Editorial control + live web experiences
   ========================================================================== */
.sp-capabilities-section:has(.digital-lab) { background: #07090D; padding: clamp(96px, 10vw, 140px) 48px; }
.sp-capabilities-section:has(.digital-lab) .sp-section-header { max-width: 1240px; margin: 0 auto clamp(52px, 6vw, 76px); display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: 48px; }
.sp-capabilities-section:has(.digital-lab) .sp-section-title { max-width: 690px; font-size: clamp(2.55rem, 5.2vw, 4.65rem); line-height: .98; letter-spacing: -.055em; }
.sp-capabilities-section:has(.digital-lab) .sp-section-title span { color: #0071E3; }
.sp-capabilities-section:has(.digital-lab) .sp-section-desc { max-width: 385px; margin: 0 0 5px; font-size: .94rem; line-height: 1.58; color: #858B95; }
.sp-capabilities-section:has(.digital-lab) > .apple-showcase-wrapper { display: none; }
.digital-lab { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(280px, 34%) 1fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.digital-lab-nav { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.digital-lab-tab { appearance: none; color: #858B95; background: transparent; border: 0; border-top: 1px solid rgba(255,255,255,.11); min-height: 48px; display: flex; align-items: center; gap: 18px; padding: 0; font: 600 .76rem/1 var(--font-primary, Inter, sans-serif); letter-spacing: .035em; cursor: pointer; text-align: left; transition: color .32s ease, padding .32s ease, border-color .32s ease; }
.digital-lab-tab:last-of-type { border-bottom: 1px solid rgba(255,255,255,.11); }
.digital-lab-tab b { color: #505761; width: 22px; font-size: .68rem; font-weight: 500; }
.digital-lab-tab:hover { color: #f4f7fb; padding-left: 8px; border-top-color: #0071E3; }
.digital-lab-tab.is-active { color: #fff; padding-left: 12px; border-top-color: #0071E3; background: linear-gradient(90deg, rgba(0,113,227,.12), transparent 78%); }
.digital-lab-tab.is-active b { color: #0071E3; }
.digital-lab-note { color: #858B95; font: 400 .88rem/1.55 var(--font-primary, Inter, sans-serif); margin: 28px 0 0; max-width: 290px; transition: opacity .22s ease, transform .22s ease; }
.digital-lab-note strong { display: block; color: #fff; font-size: .67rem; letter-spacing: .13em; margin-bottom: 9px; }
.digital-stage { position: relative; min-height: 515px; perspective: 1300px; display: grid; place-items: center; isolation: isolate; }
.digital-stage::before { content: ''; position: absolute; inset: 10% 5%; background: radial-gradient(circle at 60% 45%, rgba(0,113,227,.18), transparent 55%); filter: blur(28px); z-index: -3; }
.digital-stage-back { position: absolute; width: 90%; height: 82%; border: 1px solid rgba(255,255,255,.09); background: #10141b; border-radius: 3px; opacity: .34; filter: blur(1px); z-index: -2; transition: transform .65s cubic-bezier(.16,1,.3,1), opacity .65s ease; }
.back-one { transform: translate(-20px, 14px) rotate(-2.6deg); }.back-two { transform: translate(28px, -13px) rotate(2.6deg); opacity: .18; }
.digital-stage:hover .back-one { transform: translate(-27px, 17px) rotate(-3.5deg); }.digital-stage:hover .back-two { transform: translate(34px, -17px) rotate(3.5deg); }
.digital-site { display: none; position: relative; overflow: hidden; width: 100%; min-height: 475px; background: #f1f0ed; color: #101116; border-radius: 3px; box-shadow: 0 28px 70px rgba(0,0,0,.48); transform: translateZ(18px); }
.digital-site.is-active { display: block; animation: digitalViewIn .68s cubic-bezier(.16,1,.3,1) both; }
@keyframes digitalViewIn { from { opacity: 0; transform: translate3d(0,20px,0) scale(.975); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: translateZ(18px) scale(1); clip-path: inset(0); } }
.site-top { height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 5%; border-bottom: 1px solid rgba(16,17,22,.14); font: 600 9px/1 var(--font-primary, Inter, sans-serif); letter-spacing: .08em; }.site-brand { font-size: 12px; font-weight: 800; letter-spacing: -.04em; }.site-action { color: #0071E3; }
.editorial-hero { position: relative; min-height: 380px; padding: 6.5% 7%; overflow: hidden; background: #d3c8bb; }.editorial-hero > p:first-child, .motion-copy p, .component-intro p, .performance-hero p, .analytics-head p { font-size: 9px; letter-spacing: .12em; font-weight: 700; }.editorial-hero h3, .motion-copy h3, .component-intro h3, .performance-hero h3, .analytics-head h3 { font-size: clamp(2.7rem,5.6vw,4.7rem); line-height: .84; letter-spacing: -.075em; margin: 20px 0; }.editorial-object { position:absolute; right: 11%; bottom: -8%; width: 43%; aspect-ratio: .74; background: radial-gradient(circle at 38% 22%, #f4eeeb 0 8%, transparent 9%), linear-gradient(125deg,#463d38,#aa9d92 48%,#514942); border-radius: 49% 49% 18% 18%; color: rgba(255,255,255,.72); display:grid; place-items:center; font-size: 6.3vw; font-weight: 800; letter-spacing: -.1em; transform: rotate(12deg); box-shadow: inset 20px 0 30px rgba(255,255,255,.2), 18px 20px 30px rgba(30,20,14,.2); }.editorial-copy { width: 27%; min-width: 130px; font-size: 11px; line-height: 1.35; position: relative; z-index: 1; }.site-bottom { position: absolute; bottom: 0; height: 44px; padding: 0 5%; width: 100%; display:flex; align-items:center; justify-content:space-between; font-size: 8px; letter-spacing:.08em; border-top:1px solid rgba(16,17,22,.12); }
.motion-view { background: #0b0d12; color: #f7f7f5; }.motion-view .site-top { border-color: rgba(255,255,255,.14); }.motion-copy { position:absolute; inset: 31% 0 auto 8%; z-index: 3; }.motion-copy h3 { font-size: clamp(2.6rem,5vw,4.35rem); }.motion-trigger { margin-top: 10px; padding: 10px 13px; border-radius: 30px; background: #f4f4ef; color:#111; border:0; font:700 9px var(--font-primary); letter-spacing:.06em; }.motion-trigger i { color:#0071e3; font-style:normal; }.motion-orb { position:absolute; border-radius: 50%; mix-blend-mode: screen; filter: blur(.5px); animation: orbFloat 8s ease-in-out infinite alternate; }.orb-a { width: 47%; aspect-ratio:1; background: radial-gradient(circle at 35% 30%,#e7fcff, #087cf0 25%, #1d1c69 57%,transparent 70%); right: 12%; top: 13%; }.orb-b { width: 31%; aspect-ratio:1; background: radial-gradient(circle at 60% 28%,#ffdff1,#e6007e 30%,transparent 70%); right: 31%; bottom:-10%; animation-delay:-3s; }.orb-c { width:19%; aspect-ratio:1; background:#008dff; filter:blur(28px); left: 30%; top:15%; }.motion-footer { position:absolute; bottom: 18px; left:8%; right:8%; display:flex; justify-content:space-between; font-size:8px; letter-spacing:.1em; }.motion-live { color:#42e59a; } @keyframes orbFloat { to { transform: translate3d(12px,-14px,25px) scale(1.08); } }
.responsive-view { background:#e6e9e4; }.device-line { height: 363px; display:flex; gap: 5%; justify-content:center; align-items:end; padding: 32px 8% 10px; background:linear-gradient(135deg,#dfe4de,#bcc3ba); }.device { background:#151a17; border:5px solid #2b312d; box-shadow:0 15px 28px rgba(0,0,0,.25); overflow:hidden; }.desktop-device { width:52%; height:252px; }.tablet-device { width:23%; height:222px; border-width:4px; border-radius:7px; }.mobile-device { width:10%; height:176px; border-width:4px; border-radius:9px; }.device-ui { height:100%; padding:8%; color:#fff; background:linear-gradient(145deg,#303a32 5%,#789671 55%,#d5b891); position:relative; }.device-ui b { font-size:8px; letter-spacing:.13em; }.device-ui h4 { font-size:clamp(1.1rem,2.4vw,2.4rem); line-height:.85; letter-spacing:-.08em; margin-top:20%; }.mobile-device h4 { font-size:1rem; }.device-ui span { position:absolute; bottom:8%; font-size:7px; }.responsive-labels { display:flex; justify-content:space-around; font-size:8px; font-weight:700; letter-spacing:.1em; padding:15px 5%; }
.components-view { background:#f7f7f3; }.component-intro { padding: 5% 7% 0; }.component-intro h3 { font-size: clamp(2.15rem,4.4vw,3.8rem); margin:10px 0; }.component-grid { padding:0 7% 6%; display:grid; grid-template-columns: 1.35fr 1fr; grid-template-rows:105px 90px; gap:10px; }.component-card { position:relative; padding:13px; border:1px solid #d1d1ca; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; }.component-card small { font-size:7px; letter-spacing:.12em; }.big-card { grid-row:span 2; background:#141922; color:#fff; background:radial-gradient(circle at 75% 35%,#167fd9 0 3%,transparent 4%),radial-gradient(circle at 75% 35%,#0a4d8e 0 24%,#161b24 25%); }.big-card b { font-size:24px; line-height:.9; letter-spacing:-.07em; }.big-card span,.mini-card span,.data-card span { font-size:8px; letter-spacing:.08em; }.round-card { background:#e2e9ec; align-items:flex-start; justify-content:flex-end; }.round-card button { background:#0071E3; color:#fff; border:0; border-radius:20px; padding:9px 11px; font:700 8px var(--font-primary); }.data-card { background:#e6007e; color:#fff; }.data-card b { font-size:35px; letter-spacing:-.07em; line-height:.8; }.mini-card { grid-column:span 1; background:#fff; }
.performance-view { background:#0d171b; color:#f4f4ee; }.performance-view .site-top { border-color:rgba(255,255,255,.13); }.performance-hero { display:flex; justify-content:space-between; align-items:center; padding:8% 9% 4%; }.performance-hero h3 { margin:14px 0; }.speed-ring { width:134px; aspect-ratio:1; display:grid; place-items:center; align-content:center; border-radius:50%; background:conic-gradient(#2df1a1 0 80%, #254648 80%); box-shadow:inset 0 0 0 12px #0d171b; position:relative; }.speed-ring::before { content:''; position:absolute; inset:12px; background:#0d171b; border-radius:50%; }.speed-ring b,.speed-ring span { z-index:1; }.speed-ring b { font-size:29px; letter-spacing:-.08em; }.speed-ring span { font-size:8px; color:#2df1a1; }.performance-track { margin: 2% 9%; border-top:1px solid rgba(255,255,255,.16); }.performance-track div { display:flex; justify-content:space-between; padding:17px 0; border-bottom:1px solid rgba(255,255,255,.16); font-size:9px; letter-spacing:.1em; }.performance-track b { color:#2df1a1; font-weight:600; }
.analytics-view { background:#f0eee9; }.analytics-head { padding:5% 7% 0; position:relative; }.analytics-head h3 { font-size:clamp(2.2rem,4.7vw,4rem); margin:11px 0; }.analytics-head > span { position:absolute; right:7%; bottom:9px; font-size:8px; letter-spacing:.1em; }.analytics-layout { display:grid; grid-template-columns:1.55fr .9fr; gap:18px; padding: 1% 7% 6%; align-items:end; }.line-chart { height:150px; position:relative; border-bottom:1px solid #a7aaa9; background:repeating-linear-gradient(0deg,transparent,transparent 36px,rgba(20,25,25,.1) 37px); color:#0071e3; }.line-chart svg { width:100%; height:100%; }.line-chart b { position:absolute; right:0; top:8px; color:#111; font-size:17px; letter-spacing:-.06em; }.analytics-card { height:125px; padding:16px; background:#111a1e; color:#fff; display:flex; flex-direction:column; justify-content:space-between; }.analytics-card small,.analytics-card span { font-size:8px; letter-spacing:.09em; }.analytics-card b { font-size:32px; letter-spacing:-.08em; }.analytics-card span { color:#58d7ac; }
@media (max-width: 900px) { .sp-capabilities-section:has(.digital-lab) { padding-inline:24px; }.sp-capabilities-section:has(.digital-lab) .sp-section-header,.digital-lab { grid-template-columns:1fr; gap:32px; }.digital-lab-nav { max-width:560px; }.digital-stage { min-height:470px; }.digital-site { min-height:430px; } }
@media (max-width: 560px) { .sp-capabilities-section:has(.digital-lab) { padding-inline:18px; }.digital-stage { min-height:350px; }.digital-site { min-height:340px; }.site-top { height:40px; font-size:7px; }.site-top span:nth-child(2) { display:none; }.editorial-hero { min-height:260px; }.editorial-object { width:47%; }.digital-lab-tab { min-height:43px; font-size:.69rem; }.performance-hero { padding-top:10%; }.speed-ring { width:94px; }.performance-track div { font-size:7px; }.component-grid { grid-template-rows:82px 72px; }.analytics-layout { grid-template-columns:1fr; }.line-chart { height:85px; }.analytics-card { height:85px; flex-direction:row; align-items:center; }.analytics-card span { max-width:85px; }.device-line { height:250px; }.desktop-device { height:172px; }.tablet-device { height:150px; }.mobile-device { height:122px; }.responsive-labels { font-size:6px; }.motion-copy { top:23%; } }

/* ==========================================================================
   HOTSPOTS INTERACTIVOS DE APPLE SOBRE LA PÁGINA STORE
   CRITICAL REQUIREMENT: Los números NO deben estar visibles siempre,
   SOLO cuando el usuario selecciona lo que quiere ver (.is-active).
   ========================================================================== */
.apple-hotspot {
  position: absolute;
  z-index: 25;
  transform: translate(-50%, -50%) scale(0.85);
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s !important;
}

.apple-hotspot.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

.hotspot-pin {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0071E3;
  border: 2px solid #FFFFFF;
  color: #FFFFFF;
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  position: relative;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(0, 113, 227, 0.5), 0 0 0 3px rgba(0, 113, 227, 0.2);
}

.hotspot-pin .pin-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 113, 227, 0.6);
  animation: pinPulseRing 2s infinite ease-out;
}

@keyframes pinPulseRing {
  0% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}

.apple-hotspot:hover .hotspot-pin {
  transform: scale(1.15);
  background: #0077ED;
  box-shadow: 0 0 24px #0071E3;
}

.hotspot-callout {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 240px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(0, 113, 227, 0.35);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16), 0 0 20px rgba(0, 113, 227, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  pointer-events: none;
  opacity: 0;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 30;
}

.hotspot-callout::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: #FFFFFF;
  border-right: 1px solid rgba(0, 113, 227, 0.35);
  border-bottom: 1px solid rgba(0, 113, 227, 0.35);
}

.apple-hotspot.callout-down .hotspot-callout {
  bottom: auto;
  top: calc(100% + 12px);
  transform: translateX(-50%) translateY(-8px);
}

.apple-hotspot.callout-down .hotspot-callout::after {
  bottom: auto;
  top: -6px;
  border-right: none;
  border-bottom: none;
  border-left: 1px solid rgba(0, 113, 227, 0.35);
  border-top: 1px solid rgba(0, 113, 227, 0.35);
}

.apple-hotspot.is-active .hotspot-callout {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.callout-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
}

.callout-tag {
  font-family: var(--font-mono, monospace);
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  color: #0071E3;
  font-weight: 700;
  text-transform: uppercase;
}

.callout-title {
  font-family: var(--font-primary, sans-serif);
  font-size: 0.75rem;
  font-weight: 800;
  color: #1D1D1F;
}

.callout-desc {
  font-family: var(--font-primary, sans-serif);
  font-size: 0.6875rem;
  line-height: 1.4;
  color: #515154;
  margin: 0;
}

/* Efecto de resaltado sobre el elemento de la mini web */
.highlight-target {
  transition: all 0.3s ease;
}

.highlight-target.is-highlighted {
  outline: 2.5px solid #0071E3 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 20px rgba(0, 113, 227, 0.28) !important;
  border-radius: 12px;
}

/* RESPONSIVE SHOWCASE ESTILO APPLE */
@media (max-width: 1024px) {
  .apple-showcase-wrapper {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .apple-solutions-left {
    position: static;
  }
  .apple-elements-pills {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .sp-apple-interactive-section {
    padding: 80px 16px 90px 16px;
  }
  .apple-solutions-left {
    flex-direction: column;
  }
  .apple-nav-chevrons {
    flex-direction: row;
    padding-top: 0;
  }
  .apple-viewport-screen {
    height: 520px;
    max-height: 520px;
  }
  .aura-subnav {
    padding: 8px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .aura-subnav-links {
    order: 3;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .aura-store-section {
    padding: 20px 14px 24px 14px;
  }
  .aura-camera-interactive-stage,
  .aura-editorial-grid,
  .aura-editorial-header,
  .aura-bento-selectors,
  .aura-perf-dual-grid {
    grid-template-columns: 1fr;
  }
  .aura-trust-bar {
    grid-template-columns: 1fr;
  }
  .audit-gauges-row {
    grid-template-columns: repeat(2, 1fr);
  }
}