/* --- RESPONSIVE HARDENING OLA 1: MIN-WIDTH PROBLEMÁTICOS (360-412px) --- */
@media (max-width: 480px) {
  .hero-superbox-metrics .metric-card,
  .hero-actions .btn,
  .service-card,
  .plan-card,
  .content-card,
  .metric-card,
  .flow-card,
  .domain-card,
  .cap-card,
  .impact-card,
  .diagnostic-card,
  .story-card,
  .work-card {
    min-width: 0 !important;
  }
}
/* --- FIN OLA 1 MIN-WIDTH PROBLEMÁTICOS --- */
/* --- RESPONSIVE HARDENING OLA 1: CARDS BASE (360-412px) --- */
@media (max-width: 480px) {
  .service-card,
  .plan-card,
  .content-card,
  .metric-card,
  .flow-card,
  .domain-card,
  .cap-card,
  .impact-card,
  .diagnostic-card,
  .story-card,
  .work-card {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-left: 4vw !important;
    padding-right: 4vw !important;
  }
}
/* --- FIN OLA 1 CARDS BASE --- */
/* --- RESPONSIVE HARDENING OLA 1: GRIDS BASE (360-412px) --- */
@media (max-width: 480px) {
  .hero-grid,
  .service-grid,
  .plans-grid,
  .footer-grid,
  .split-grid {
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
  }
}
/* --- FIN OLA 1 GRIDS BASE --- */
/* =============================
   DOCUMENTACIÓN DE EXCEPCIONES
   =============================
   - Overrides contextuales activos:
     * .plan-card.featured: box-shadow premium solo en services
     * .plan-card h3: tamaño especial solo en services
     * .seo-content h2, .seo-content h3: margen especial solo en services


.seo-content {
  /* Servicios y planes */
  .service-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
  /* Reglas de tarjetas y CTA consolidadas en home.css */
  .plans-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
  /* OVERRIDE: plan-card.featured solo en services, mantiene box-shadow premium */
  .plan-card.featured{border-color:var(--lineStrong); box-shadow:0 18px 50px rgba(94,208,200,.12)}
  .plan-badge{
    display:inline-block; padding:6px 10px; border-radius:999px;
    background:rgba(94,208,200,.1); border:1px solid var(--lineStrong); color:var(--turq); font-size:.8rem; font-weight:700;
  }
  /* OVERRIDE: plan-card h3 solo en services, tamaño especial */
  .plan-card h3{margin:14px 0 4px; font-size:1.5rem}
  .plan-sub{margin:0 0 14px; color:var(--gray); font-weight:600}
  max-width: 900px;
  margin: 0 auto;
}

.seo-content h2,
.seo-content h3 {
  margin-top: var(--space-2xl);
}

.seo-content p,
.seo-content li {
  color: var(--gray-neutral);
  line-height: 1.72;
}

.seo-content ul {
  margin: 0;
  padding-left: 1.2rem;
}

.seo-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  color: var(--gray-neutral);
  font-size: var(--text-sm);
  margin-top: var(--space-lg);
}

.reusable-cta {
  margin-top: var(--space-3xl);
  padding: var(--space-2xl);
  border-radius: var(--card-radius-premium, 22px);
  border: 1px solid var(--lineStrong);
  background: linear-gradient(180deg, var(--card), var(--panel-2));
  box-shadow: var(--card-shadow-premium, var(--shadow-soft));
  text-align: center;
}

.reusable-cta .cta-actions {
  margin-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
}

/* ============================================
   BREADCRUMB BAR (páginas de servicio)
   ============================================ */
.breadcrumb-bar {
  position: sticky;
  top: 84px;
  z-index: 19;
  background: rgba(8, 17, 32, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.breadcrumb-bar nav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 0;
  font-size: 0.72rem;
  color: var(--gray-neutral);
  letter-spacing: 0.03em;
}

.breadcrumb-bar a {
  color: var(--gray-neutral);
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.breadcrumb-bar a:hover {
  color: var(--turquoise-main);
}

.breadcrumb-bar .bc-sep {
  color: rgba(159, 179, 200, 0.4);
  font-size: 0.65rem;
  -webkit-user-select: none;
  user-select: none;
}

.breadcrumb-bar .bc-current {
  color: var(--turquoise-main);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .breadcrumb-bar nav {
    font-size: 0.68rem;
  }
}

.related-block {
  margin-top: var(--space-3xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--line);
}

.related-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

  /* OVERRIDE: story-card en related-grid, solo layout/contexto */
  .related-grid .story-card {
    margin: 0;
    display: block;
    text-decoration: none;
  }

/* ============================================
   VISUAL SPLIT (framework y modelo)
   ============================================ */
.visual-split {
  display: grid;
  grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(20px, 3vw, 40px);
  margin-top: var(--space-xl);
}

.visual-split .image-panel {
  margin: 0;
  justify-self: start;
}

.visual-split--framework .framework-pillars {
  margin-top: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.visual-split--model .model-grid {
  margin-top: 0;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.visual-split--model .model-card {
  margin: 0;
  display: block;
}

@media (max-width: 980px) {
  .visual-split {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .visual-split .image-panel {
    justify-self: center;
    margin: 0 auto;
  }

  .visual-split--framework .framework-pillars,
  .visual-split--model .model-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .seo-content {
    max-width: 100%;
  }

  .related-grid {
    grid-template-columns: 1fr;
  }

  .reusable-cta {
    padding: var(--space-xl);
  }
}