/* ─── Variables Específicas SEO ─── */
:root {
  --cyan: #00f3ff;
  --cyan-dark: #008f99;
}

/* ─── Hero 3D Scene SEO ─── */
.hero-visual-container {
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
  transform-style: preserve-3d;
}

@keyframes float3dSeo {
  0% { transform: translateY(0) rotateY(-15deg) rotateX(8deg); }
  50% { transform: translateY(-12px) rotateY(-12deg) rotateX(10deg); }
  100% { transform: translateY(0) rotateY(-15deg) rotateX(8deg); }
}

.scene-3d-seo {
  position: relative;
  width: 100%;
  height: 500px;
  transform-style: preserve-3d;
  animation: float3dSeo 9s ease-in-out infinite;
}

/* Mockup de la Consola (Ventana principal) */
.seo-console-mockup {
  position: absolute;
  top: 40px;
  left: 5%;
  width: 90%;
  height: 360px;
  transform: translateZ(-30px);
  box-shadow: -20px 30px 60px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(0, 243, 255, 0.2);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #050d0c;
}

.seo-top-bar {
  background: rgba(0, 243, 255, 0.05);
  padding: 12px 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(0, 243, 255, 0.1);
  position: relative;
  z-index: 10;
}
.seo-top-bar span { width: 10px; height: 10px; border-radius: 50%; }
.dot-red { background: #ff5f56; }
.dot-yellow { background: #ffbd2e; }
.dot-green { background: #27c93f; }
.seo-top-bar small {
  margin-left: auto;
  color: #5b6a65;
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 1px;
}

.seo-content {
  flex-grow: 1;
  position: relative;
  background: #07110f;
  display: grid;
  place-items: center;
  perspective: 800px;
  overflow: hidden;
}

/* Fondo de cuadrícula tipo radar/datos */
.seo-grid {
  position: absolute;
  inset: 0;
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(0, 243, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 243, 255, 0.03) 1px, transparent 1px);
  transform: rotateX(45deg) scale(1.5) translateY(20%);
  transform-origin: bottom;
  opacity: 0.6;
}

/* Gráfica 3D */
.chart-container {
  display: flex;
  align-items: flex-end;
  gap: 15px;
  height: 140px;
  transform-style: preserve-3d;
  transform: rotateX(20deg) translateZ(40px);
  position: relative;
  z-index: 2;
}

@keyframes growBar {
  0% { transform: scaleY(0.1); opacity: 0; }
  100% { transform: scaleY(1); opacity: 1; }
}

.chart-bar {
  width: 35px;
  background: linear-gradient(to top, rgba(0, 243, 255, 0.2), rgba(0, 243, 255, 0.8));
  border: 1px solid rgba(0, 243, 255, 0.6);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  transform-origin: bottom;
  animation: growBar 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  box-shadow: 0 0 20px rgba(0, 243, 255, 0.2);
}

.chart-bar.b1 { height: 40px; animation-delay: 0.1s; }
.chart-bar.b2 { height: 70px; animation-delay: 0.2s; }
.chart-bar.b3 { height: 50px; animation-delay: 0.3s; }
.chart-bar.b4 { height: 110px; animation-delay: 0.4s; }
.chart-bar.b5 { height: 90px; animation-delay: 0.5s; background: linear-gradient(to top, rgba(199, 242, 104, 0.2), rgba(199, 242, 104, 0.8)); border-color: rgba(199, 242, 104, 0.6); box-shadow: 0 0 20px rgba(199, 242, 104, 0.2); }
.chart-bar.b6 { height: 140px; animation-delay: 0.6s; background: linear-gradient(to top, rgba(199, 242, 104, 0.2), rgba(199, 242, 104, 1)); border-color: rgba(199, 242, 104, 0.8); box-shadow: 0 0 30px rgba(199, 242, 104, 0.4); }

/* Tarjeta de Métricas sobre la gráfica */
@keyframes floatMetric {
  0%, 100% { transform: translateY(0) translateZ(80px); }
  50% { transform: translateY(-10px) translateZ(100px); }
}

.seo-metrics-card {
  position: absolute;
  top: 40px;
  right: 40px;
  background: rgba(7, 17, 15, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 243, 255, 0.3);
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
  transform: translateZ(80px);
  animation: floatMetric 5s ease-in-out infinite;
  display: flex;
  flex-direction: column;
}
.seo-metrics-card small {
  color: var(--cyan);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
}
.seo-metrics-card strong {
  color: white;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  margin-top: 5px;
}
.metric-line {
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,0.1);
  margin-top: 10px;
  position: relative;
}
.metric-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 60%;
  background: var(--lime);
}

/* Floating Chips overriding global styles for SEO */
.scene-3d-seo .floating-chip {
  background: var(--ink) !important;
  color: white !important;
  border: 1px solid rgba(0, 243, 255, 0.2) !important;
}

.scene-3d-seo .floating-chip.floating-chip-top {
  position: absolute; right: -20px; top: 10px; 
  transform: translateZ(150px) !important; 
  z-index: 100 !important;
}

.scene-3d-seo .floating-chip.floating-chip-bottom {
  position: absolute; left: -20px; bottom: 80px; 
  transform: translateZ(120px) !important; 
  z-index: 100 !important;
}

.chip-icon-cyan { background: var(--cyan); color: var(--ink); }
.chip-text-cyan { color: var(--cyan); }

/* --- Modificadores para Services V2 --- */
.service-main-copy .service-kicker { font-size: 9px; font-weight: 800; letter-spacing: 1.5px; display: block; margin-bottom: 12px; }
.service-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 25px; }
.service-tags span { font-size: 10px; padding: 6px 12px; background: rgba(0,243,255,0.05); border: 1px solid rgba(0,243,255,0.15); color: var(--cyan); border-radius: 99px; }

.art-layout-dark { background: #050d0c; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 40px; position: relative; overflow: hidden; height: 100%; }
.art-layout-dark strong { color: white; font-size: clamp(32px, 4vw, 48px); font-weight: 800; line-height: 1; margin-top: 10px; }
.art-layout-dark strong em { font-family: "DM Serif Display"; font-weight: 400; color: #768079; }
.art-shape-cyan { position: absolute; right: -50px; bottom: -50px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(0,243,255,0.15), transparent 70%); }
.art-note { position: absolute; right: 30px; top: 30px; font-family: monospace; font-size: 9px; color: var(--cyan); text-align: right; line-height: 1.4; border-right: 2px solid var(--cyan); padding-right: 10px; }

.service-mini-dark { background: #fff; }