/* ============================================================ */
/* PROCESOS 2025 — Refined B2B Editorial                      */
/* Inspirado en: Stripe Atlas, Linear, Notion, Figma Docs     */
/* Diseño minimalista sofisticado adaptado al contenido       */
/* ============================================================ */

/* ==================== DESIGN TOKENS ==================== */

:root {
  /* Navy System */
  --p25-navy-900: #0a0e27;
  --p25-navy-800: #0f1433;
  --p25-navy-700: #1a1d3a;

  /* Blue Accent - UNIFICADO AL AZUL BRILLANTE */
  --p25-blue-500: #3BAAFE;
  --p25-blue-400: #3BAAFE;

  /* Cyan Tech - UNIFICADO AL AZUL BRILLANTE */
  --p25-cyan-500: #3BAAFE;

  /* Neutral */
  --p25-white: #ffffff;
  --p25-gray-50: #fafbfc;
  --p25-gray-100: #f5f7fa;
  --p25-gray-200: #e8ecf1;
  --p25-gray-700: #374151;
  --p25-gray-800: #1f2937;
  --p25-gray-900: #0f1419;

  /* Shadows — Subtle */
  --p25-shadow-sm: 0 1px 3px rgba(10, 14, 39, 0.04);
  --p25-shadow-md: 0 2px 8px rgba(10, 14, 39, 0.06);
  --p25-shadow-lg: 0 4px 16px rgba(10, 14, 39, 0.08);

  /* Typography */
  --p25-font-display: 'Space Grotesk', system-ui, sans-serif;
  --p25-font-body: 'Inter', system-ui, sans-serif;

  /* Easing */
  --p25-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==================== BASE WRAPPER ==================== */

.proceso-2025 {
  position: relative !important;
  width: 100% !important;
  overflow-x: hidden !important;
  background: var(--p25-white) !important;
}

/* ==================== HERO — EDITORIAL AVANZADO ==================== */

.p25-hero {
  position: relative !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: 72px !important; /* Compensar header fijo */
  box-sizing: border-box !important;
  background: #0a0e27 !important;
}

/* Media — Imagen muy visible */
.p25-hero-media {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}

.p25-hero-media video,
.p25-hero-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0.75 !important;
  filter: brightness(0.85) contrast(1.05) saturate(1.1) !important;
}

/* Overlay — Muy transparente */
.p25-hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(
      to right,
      rgba(10, 14, 39, 0.75) 0%,
      rgba(10, 14, 39, 0.58) 40%,
      rgba(10, 14, 39, 0.40) 70%,
      rgba(10, 14, 39, 0.25) 100%
    ) !important;
  z-index: 1 !important;
}

/* Grid sutil */
.p25-hero::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  z-index: 1 !important;
  opacity: 0.6 !important;
  pointer-events: none !important;
}

/* Content — Grid moderno */
.p25-hero-content {
  position: relative !important;
  z-index: 2 !important;
  max-width: 1440px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 clamp(2rem, 5vw, 5rem) !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: clamp(2rem, 4vw, 4rem) !important;
  align-items: center !important;
}

/* Main content (izquierda) */
.p25-hero-main {
  max-width: 780px !important;
}

.p25-hero-content h1 {
  font-family: var(--p25-font-display) !important;
  font-size: clamp(2.125rem, 3.5vw + 0.5rem, 3.75rem) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  color: var(--p25-white) !important;
  margin: 0 0 clamp(1.25rem, 2.5vw, 1.5rem) 0 !important;
  letter-spacing: -0.03em !important;
  max-width: 32ch !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25) !important;
}

.p25-hero-description {
  font-family: var(--p25-font-body) !important;
  font-size: clamp(0.9375rem, 1.1vw + 0.15rem, 1.0625rem) !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, 0.86) !important;
  margin: 0 0 clamp(1.75rem, 3vw, 2rem) 0 !important;
  max-width: 72ch !important;
  font-weight: 400 !important;
}

.p25-hero-description strong {
  color: var(--p25-white) !important;
  font-weight: 600 !important;
}

.p25-hero-description a {
  color: var(--p25-white) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
  transition: border-color 0.2s ease !important;
}

.p25-hero-description a:hover {
  border-color: var(--p25-cyan-500) !important;
}

/* ==================== BADGES DESKTOP ONLY (>640px) ==================== */
@media (min-width: 641px) {
  .p25-hero-badges-wrapper {
    position: absolute !important;
    top: 58px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: auto !important;
    padding-right: clamp(1.5rem, 4vw, 3rem) !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    align-items: flex-end !important;
    overflow: visible !important;
  }

  /* Animación premium - cada badge entra desde la derecha, uno a uno */
  .p25-hero-badges-wrapper .p25-hero-badge {
    opacity: 0;
    transform: translateX(100px);
    animation: badgeSlideFromRight 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    position: static !important;
    flex-shrink: 0 !important;
  }

  .p25-hero-badges-wrapper .p25-hero-badge:nth-child(1) { animation-delay: 0.4s; }
  .p25-hero-badges-wrapper .p25-hero-badge:nth-child(2) { animation-delay: 0.55s; }
  .p25-hero-badges-wrapper .p25-hero-badge:nth-child(3) { animation-delay: 0.7s; }
  .p25-hero-badges-wrapper .p25-hero-badge:nth-child(4) { animation-delay: 0.85s; }
  .p25-hero-badges-wrapper .p25-hero-badge:nth-child(5) { animation-delay: 1.0s; }
  .p25-hero-badges-wrapper .p25-hero-badge:nth-child(6) { animation-delay: 1.15s; }
  .p25-hero-badges-wrapper .p25-hero-badge:nth-child(7) { animation-delay: 1.3s; }
  .p25-hero-badges-wrapper .p25-hero-badge:nth-child(8) { animation-delay: 1.45s; }

  @keyframes badgeSlideFromRight {
    0% {
      opacity: 0;
      transform: translateX(100px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
}
/* ==================== FIN BADGES DESKTOP ==================== */

/* Legacy class (por si se usa en otro lugar) */
.p25-hero-badges {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.625rem !important;
  align-items: flex-end !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.p25-hero-badge {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 0.5rem 1rem !important;
  border-radius: 8px !important;
  font-family: var(--p25-font-body) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  transition: all 0.3s var(--p25-ease) !important;
  white-space: nowrap !important;
}

/* Estados de animación */
.p25-hero-badges.will-animate {
  opacity: 0 !important;
  transform: translateX(30px) !important;
}

.p25-hero-badges.animated {
  opacity: 1 !important;
  transform: translateX(0) !important;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.p25-hero-badge.will-animate {
  opacity: 0 !important;
  transform: translateX(30px) !important;
}

.p25-hero-badge.animated {
  opacity: 1 !important;
  transform: translateX(0) !important;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.p25-hero-badge:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  transform: translateX(-4px) !important;
}

.p25-hero-actions {
  display: flex !important;
  gap: 0.875rem !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

/* OLD BUTTON STYLES REMOVED - Now using unified .btn-principal and .btn-secundario from _buttons.css */

/* ==================== SECTIONS ==================== */

.p25-section {
  position: relative !important;
  width: 100% !important;
  padding: clamp(4rem, 8vw, 7rem) 0 !important;
}

.p25-section-white {
  background: var(--p25-white) !important;
}

.p25-section-gray {
  background: var(--p25-gray-50) !important;
}

.p25-container {
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 clamp(1.5rem, 4vw, 3rem) !important;
  box-sizing: border-box !important;
}

/* ==================== EYEBROW — Refined ==================== */

.p25-eyebrow {
  display: block !important;
  font-family: var(--p25-font-body) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #3BAAFE !important;
  margin-bottom: 0.75rem !important;
}

.p25-eyebrow-light {
  color: #3BAAFE !important;
}

/* ==================== CENTERED SECTIONS ==================== */

.p25-centered {
  text-align: center !important;
  margin-bottom: clamp(3rem, 5vw, 4rem) !important;
}

.p25-centered .p25-eyebrow {
  display: inline-block !important;
}

.p25-centered h2 {
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 0 !important;
}

/* ==================== TYPOGRAPHY — Refined Scale ==================== */

.p25-section h2,
.p25-products h2,
.p25-value h2,
.p25-table-section h2 {
  font-family: var(--p25-font-display) !important;
  font-size: clamp(1.875rem, 2.5vw + 0.5rem, 2.5rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.025em !important;
  color: var(--p25-gray-900) !important;
  margin-bottom: clamp(2rem, 3vw, 2.5rem) !important;
}

/* ==================== TECH INTRO — Clean Grid ==================== */

.p25-tech-intro {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(3rem, 6vw, 5rem) !important;
  align-items: start !important;
}

.p25-tech-intro h2 {
  font-size: clamp(1.5rem, 2vw + 0.3rem, 1.875rem) !important;
  font-weight: 600 !important;
  color: var(--p25-gray-900) !important;
  margin-bottom: clamp(1.25rem, 2vw, 1.5rem) !important;
  letter-spacing: -0.02em !important;
}

.p25-tech-intro p {
  font-family: var(--p25-font-body) !important;
  font-size: clamp(0.9375rem, 1.1vw + 0.1rem, 1rem) !important;
  line-height: 1.7 !important;
  color: var(--p25-gray-700) !important;
  margin: 0 !important;
}

.p25-tech-intro p strong,
.p25-tech-intro p a {
  color: var(--p25-gray-900) !important;
  font-weight: 600 !important;
}

.p25-tech-intro ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

.p25-tech-intro li {
  position: relative !important;
  padding-left: 1.5rem !important;
  font-family: var(--p25-font-body) !important;
  font-size: clamp(0.875rem, 1vw + 0.05rem, 0.9375rem) !important;
  line-height: 1.65 !important;
  color: var(--p25-gray-700) !important;
}

.p25-tech-intro li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: calc(0.5em + 2px) !important;
  width: 6px !important;
  height: 6px !important;
  background: #3BAAFE !important;
  border-radius: 1px !important;
}

/* ==================== INDUSTRIES — Editorial Magazine Style ==================== */

.p25-industries {
  background: var(--p25-white) !important;
  border: 1px solid var(--p25-gray-200) !important;
  padding: 0 !important;
  border-radius: 24px !important;
  box-shadow: 0 2px 20px rgba(10, 14, 39, 0.04), 0 0 0 1px rgba(10, 14, 39, 0.02) !important;
  position: relative !important;
  overflow: hidden !important;
}

.p25-industries::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--p25-blue-500) 0%, var(--p25-cyan-500) 100%) !important;
  opacity: 0.8 !important;
}

.p25-industries-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

/* Sectores — Bento Box Grid Cards */
.p25-sectors-section {
  padding: clamp(2.5rem, 4vw, 3.5rem) clamp(2.5rem, 4vw, 3.5rem) clamp(2rem, 3vw, 2.5rem) !important;
  border-bottom: 1px solid var(--p25-gray-200) !important;
  background: linear-gradient(135deg, #fafbfc 0%, #ffffff 100%) !important;
}

.p25-sectors-section h2 {
  font-size: clamp(1.5rem, 2vw + 0.3rem, 1.875rem) !important;
  font-weight: 700 !important;
  color: var(--p25-gray-900) !important;
  margin-bottom: clamp(1.75rem, 3vw, 2.25rem) !important;
  letter-spacing: -0.025em !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.p25-sectors-title {
  justify-content: center !important;
}

.p25-sectors-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 2rem !important;
  height: 2rem !important;
  padding: 0 0.625rem !important;
  background: linear-gradient(135deg, var(--p25-blue-500), var(--p25-cyan-500)) !important;
  color: white !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 102, 255, 0.25) !important;
}

.p25-sectors-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 1rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.p25-sectors-grid li {
  padding: 0 !important;
  margin: 0 !important;
}

.p25-sector-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  padding: 1.25rem 1.375rem !important;
  background: var(--p25-white) !important;
  border: 1.5px solid var(--p25-gray-200) !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  position: relative !important;
  height: 100% !important;
  min-height: 100px !important;
}

.p25-sector-card::before {
  content: '' !important;
  position: absolute !important;
  inset: -1px !important;
  background: linear-gradient(135deg, var(--p25-blue-500), var(--p25-cyan-500)) !important;
  border-radius: 12px !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  z-index: -1 !important;
}

.p25-sector-card-icon {
  font-size: 1.5rem !important;
  color: #3BAAFE !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease !important;
}

.p25-sector-card-text {
  font-family: var(--p25-font-body) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: var(--p25-gray-800) !important;
  line-height: 1.45 !important;
  transition: color 0.3s ease !important;
}

.p25-sector-card:hover {
  border-color: transparent !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(0, 102, 255, 0.15), 0 0 0 1px rgba(0, 102, 255, 0.1) !important;
}

.p25-sector-card:hover::before {
  opacity: 1 !important;
}

.p25-sector-card:hover .p25-sector-card-icon {
  transform: scale(1.1) rotate(5deg) !important;
  color: var(--p25-white) !important;
}

.p25-sector-card:hover .p25-sector-card-text {
  color: var(--p25-white) !important;
}

/* Aplicaciones — Chip Tags Flow */
.p25-apps-section {
  padding: clamp(2.5rem, 4vw, 3.5rem) !important;
  background: var(--p25-white) !important;
}

.p25-apps-section h2 {
  font-size: clamp(1.5rem, 2vw + 0.3rem, 1.875rem) !important;
  font-weight: 700 !important;
  color: var(--p25-gray-900) !important;
  margin-bottom: clamp(1.75rem, 3vw, 2.25rem) !important;
  letter-spacing: -0.025em !important;
}

.p25-apps-flow {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.875rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-top: 1rem !important; /* Espacio para hover de primera fila */
}

.p25-apps-flow li {
  padding: 0 !important;
  margin: 0 !important;
}

.p25-app-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
  padding: 0.75rem 1.25rem !important;
  background: linear-gradient(135deg, var(--p25-gray-50) 0%, var(--p25-white) 100%) !important;
  border: 1px solid var(--p25-gray-200) !important;
  border-radius: 12px !important;
  font-family: var(--p25-font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--p25-gray-800) !important;
  line-height: 1.5 !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: default !important;
  position: relative !important;
}

.p25-app-chip::before {
  content: '' !important;
  position: absolute !important;
  left: 0.75rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 6px !important;
  height: 6px !important;
  background: #3BAAFE !important;
  border-radius: 50% !important;
  transition: all 0.25s ease !important;
}

.p25-app-chip-text {
  padding-left: 0.875rem !important;
}

.p25-app-chip:hover {
  background: var(--p25-white) !important;
  border-color: #3BAAFE !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(59, 170, 254, 0.12) !important;
  z-index: 10 !important;
}

.p25-app-chip:hover::before {
  background: #3BAAFE !important;
  box-shadow: 0 0 8px rgba(59, 170, 254, 0.6) !important;
}

/* ==================== PRODUCTS ==================== */

.p25-products {
  background: var(--p25-white) !important;
  padding: clamp(4rem, 7vw, 6.5rem) 0 !important;
}

.p25-products h2 {
  color: var(--p25-gray-900) !important;
  max-width: 900px !important;
}

.p25-products-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5rem !important;
}

/* ==================== VALUE PROPOSITION ==================== */

.p25-value {
  background: linear-gradient(135deg, var(--p25-navy-900) 0%, var(--p25-navy-700) 100%) !important;
  padding: clamp(4rem, 7vw, 5rem) clamp(3rem, 5vw, 4rem) !important;
  border-radius: 24px !important;
  box-shadow: var(--p25-shadow-lg) !important;
  position: relative !important;
  overflow: hidden !important;
}

.p25-value::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(0, 102, 255, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(0, 212, 255, 0.04) 0%, transparent 50%) !important;
  pointer-events: none !important;
}

.p25-value h2 {
  color: var(--p25-white) !important;
  position: relative !important;
  z-index: 1 !important;
  max-width: 900px !important;
}

.p25-value-grid {
  display: grid !important;
  grid-template-columns: 1.2fr 0.8fr !important;
  gap: clamp(3rem, 5vw, 4rem) !important;
  align-items: start !important;
  position: relative !important;
  z-index: 1 !important;
}

.p25-value-benefits h3 {
  font-family: var(--p25-font-display) !important;
  font-size: clamp(1.125rem, 1.5vw + 0.2rem, 1.375rem) !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.96) !important;
  margin-bottom: 1.5rem !important;
}

.p25-value-benefits ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.125rem !important;
}

.p25-value-benefits li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 1rem !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-family: var(--p25-font-body) !important;
  font-size: clamp(0.875rem, 1vw + 0.05rem, 0.9375rem) !important;
  line-height: 1.65 !important;
}

.p25-value-benefits li i {
  flex-shrink: 0 !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #3BAAFE !important;
  font-size: 0.875rem !important;
  margin-top: 0.15rem !important;
}

.p25-value-conclusion {
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: clamp(2rem, 3vw, 2.5rem) !important;
  border-radius: 16px !important;
}

.p25-value-conclusion p {
  font-family: var(--p25-font-body) !important;
  font-size: clamp(0.875rem, 1vw + 0.05rem, 0.9375rem) !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  margin: 0 !important;
}

.p25-value-conclusion strong {
  color: var(--p25-white) !important;
  font-weight: 600 !important;
}

/* ==================== CERTIFICACIONES ==================== */

.p25-cert {
  max-width: 100% !important;
}

.p25-cert-intro {
  font-family: var(--p25-font-body) !important;
  font-size: clamp(0.9375rem, 1.1vw + 0.1rem, 1rem) !important;
  line-height: 1.7 !important;
  color: var(--p25-gray-700) !important;
  text-align: center !important;
  max-width: 800px !important;
  margin: 0 auto clamp(3rem, 5vw, 4rem) auto !important;
}

.p25-cert-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2rem !important;
  margin-bottom: 2rem !important;
}

.p25-cert-block {
  background: var(--p25-white) !important;
  border: 1px solid var(--p25-gray-200) !important;
  padding: clamp(2rem, 3vw, 2.5rem) !important;
  border-radius: 16px !important;
  box-shadow: var(--p25-shadow-sm) !important;
}

.p25-cert-block-full {
  grid-column: 1 / -1 !important;
}

.p25-cert-block h3 {
  font-family: var(--p25-font-display) !important;
  font-size: clamp(1.125rem, 1.5vw + 0.2rem, 1.375rem) !important;
  font-weight: 600 !important;
  color: var(--p25-gray-900) !important;
  margin-bottom: 1.25rem !important;
  letter-spacing: -0.015em !important;
}

.p25-cert-block ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.625rem !important;
}

.p25-cert-block li {
  position: relative !important;
  padding-left: 1.5rem !important;
  font-family: var(--p25-font-body) !important;
  font-size: clamp(0.9375rem, 1.1vw + 0.1rem, 1.0625rem) !important;
  line-height: 1.65 !important;
  color: var(--p25-gray-700) !important;
}

.p25-cert-block li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: calc(0.5em + 2px) !important;
  width: 6px !important;
  height: 6px !important;
  background: #3BAAFE !important;
  border-radius: 1px !important;
}

/* Lista en columnas para complementarias */
.p25-cert-list-cols {
  column-count: 2 !important;
  column-gap: 2rem !important;
}

/* Normas complementarias (expandible) */
.p25-cert-complementarias {
  margin-bottom: 1.5rem !important;
  animation: slideDown 0.3s var(--p25-ease) !important;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Botón toggle */
.p25-cert-toggle-wrapper {
  text-align: center !important;
}

.p25-cert-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.75rem 1.5rem !important;
  font-family: var(--p25-font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #3BAAFE !important;
  background: var(--p25-white) !important;
  border: 1px solid var(--p25-gray-200) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.2s var(--p25-ease) !important;
}

.p25-cert-toggle:hover {
  background: var(--p25-gray-50) !important;
  border-color: #3BAAFE !important;
  transform: translateY(-1px) !important;
}

.p25-cert-toggle svg {
  transition: transform 0.3s var(--p25-ease) !important;
}

/* ==================== TABLE SECTION ==================== */

.p25-table-section h2 {
  color: var(--p25-gray-900) !important;
}

.p25-table-section.p25-centered h2 {
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==================== FINAL CONCLUSION ==================== */

.p25-final {
  max-width: 840px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.p25-final p {
  font-family: var(--p25-font-body) !important;
  font-size: clamp(0.9375rem, 1.1vw + 0.1rem, 1.0625rem) !important;
  line-height: 1.75 !important;
  color: var(--p25-gray-700) !important;
}

.p25-final p strong {
  color: var(--p25-gray-900) !important;
  font-weight: 600 !important;
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 1200px) {
  /* Hero — Stack en tablets */
  .p25-hero-content {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  .p25-hero-badges {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  /* Products grid */
  .p25-products-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 1024px) {
  .p25-tech-intro,
  .p25-industries-grid,
  .p25-value-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .p25-hero {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding-top: 72px !important;
    box-sizing: border-box !important;
  }

  .p25-cert-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .p25-cert-list-cols {
    column-count: 1 !important;
  }
}

@media (max-width: 900px) {
  .p25-products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .p25-sectors-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .p25-hero-content h1 {
    max-width: 100% !important;
  }

  .p25-hero-content {
    padding: 0 1.5rem !important;
  }

  .p25-hero-badges {
    display: none !important; /* Ocultar badges en móvil */
  }

  /* Scroll horizontal moderno 2025 para productos */
  .p25-products-grid {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    scroll-snap-type: x mandatory !important;
    gap: 1rem !important;
    padding: 0 1rem 1rem 1.25rem !important;
    margin: 1.5rem 0 1.5rem 0 !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .p25-products-grid::-webkit-scrollbar {
    display: none !important;
  }

  .p25-products-grid > * {
    flex: 0 0 auto !important;
    width: clamp(260px, 75vw, 320px) !important;
    scroll-snap-align: start !important;
    scroll-margin-left: 1rem !important;
  }

  .p25-sectors-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* .p25-btn removed - using unified button system */
}

/* ==================== RESPONSIVE MÓVIL - NEXT LEVEL ==================== */
@media (max-width: 640px) {

  /* ========== HERO MÓVIL - FULLSCREEN INMERSIVO ========== */
  .proceso-2025 .p25-hero {
    position: relative !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    overflow: visible !important;
  }

  /* IMAGEN/VIDEO - FULLSCREEN ABSOLUTO */
  .proceso-2025 .p25-hero-media {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 0 !important;
  }

  .proceso-2025 .p25-hero-media video,
  .proceso-2025 .p25-hero-media img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-width: 100vw !important;
    min-height: 100dvh !important;
    object-fit: cover !important;
    object-position: center center !important;
    opacity: 1 !important;
    filter: brightness(0.85) contrast(1.1) saturate(1.2) !important;
  }

  /* OVERLAY - Sutil para ver bien la imagen */
  .proceso-2025 .p25-hero-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(
      180deg,
      rgba(0, 20, 40, 0.4) 0%,
      rgba(0, 20, 40, 0.2) 30%,
      rgba(0, 20, 40, 0.3) 70%,
      rgba(0, 20, 40, 0.7) 100%
    ) !important;
    z-index: 1 !important;
  }

  /* Sin grid pattern en móvil */
  .proceso-2025 .p25-hero::after {
    display: none !important;
  }

  /* CONTENIDO - Posicionado desde arriba */
  .proceso-2025 .p25-hero-content {
    position: relative !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    padding: 130px 1.5rem 90px !important; /* Espacio para badges */
    text-align: left !important;
    gap: 0 !important;
    overflow: visible !important; /* Permitir ver badges */
  }

  .proceso-2025 .p25-hero-main {
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    flex: 1 !important; /* Ocupar todo el espacio disponible */
    gap: 1.25rem !important;
  }

  /* H1 - BRUTAL Y GRANDE */
  .proceso-2025 .p25-hero-content h1 {
    font-size: clamp(2.5rem, 11vw, 3.5rem) !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
    margin: 0 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    text-shadow:
      0 2px 30px rgba(0, 0, 0, 0.6),
      0 4px 60px rgba(0, 0, 0, 0.4) !important;
  }

  /* DESCRIPCIÓN - Legible y grande */
  .proceso-2025 .p25-hero-description {
    font-size: 1.0625rem !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    max-width: 100% !important;
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5) !important;
    font-weight: 400 !important;
  }

  /* Botón ver más inline */
  .proceso-2025 .p25-hero-read-more {
    display: inline !important;
    font-size: inherit !important;
    font-weight: 600 !important;
    color: #3BAAFE !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
  }

  .proceso-2025 .p25-hero-read-more:hover {
    color: #fff !important;
    text-decoration: underline !important;
  }

  /* BOTONES - Full width, grandes */
  .proceso-2025 .p25-hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 0.875rem !important;
    margin-top: 0.5rem !important;
  }

  /* Ocultar btn contacto en móvil - ya hay botón fijo visible */
  .proceso-2025 .p25-hero-actions .btn-principal {
    display: none !important;
  }

  .proceso-2025 .p25-hero-actions .btn-secundario {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1rem 1.5rem !important;
    font-size: 0.9375rem !important;
    justify-content: center !important;
  }

  /* ===== BADGES MARQUEE ===== */
  .proceso-2025 .p25-hero-badges-wrapper {
    position: absolute !important;
    top: 85px !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 100 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  /* Inner wrapper que se anima */
  .proceso-2025 .marquee-inner {
    display: flex !important;
    width: max-content !important;
    animation: marqueeScroll 14s linear infinite !important;
  }

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

  /* Track con badges */
  .proceso-2025 .marquee-track {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding-right: 12px !important;
    flex-shrink: 0 !important;
  }

  /* Badge - RESET COMPLETO de estilos heredados */
  .proceso-2025 .p25-hero-badge {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    padding: 10px 18px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    color: #fff !important;
    background: rgba(59, 170, 254, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    /* RESET de transforms heredados */
    transform: none !important;
    opacity: 1 !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
  }

  /* Títulos centrados */
  .p25-sectores-section h2 {
    text-align: center !important;
    justify-content: center !important;
    margin-bottom: 1.5rem !important;
  }

  .p25-apps-section h2 {
    text-align: center !important;
    margin-top: 0.5rem !important;
    margin-bottom: 2rem !important;
  }

  /* SECTORES: Grid 2 columnas compacto con fondo azul marino */
  .p25-sectors-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    padding: 0 1rem !important;
  }

  .p25-sector-card {
    min-height: 70px !important;
    padding: 0.875rem 0.75rem !important;
    background: linear-gradient(135deg, #0a0e27 0%, #1a1d3a 100%) !important;
    border: none !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Ocultar iconos en móvil */
  .p25-sector-card-icon {
    display: none !important;
  }

  .p25-sector-card-text {
    color: #fff !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    text-align: center !important;
    line-height: 1.5 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
    hyphens: auto !important;
  }

  /* Hover state para móvil */
  .p25-sector-card:hover {
    transform: none !important;
    box-shadow: none !important;
    background: linear-gradient(135deg, #1a1d3a 0%, #0a0e27 100%) !important;
  }

  .p25-sector-card:hover::before {
    display: none !important;
  }

  /* APLICACIONES: Cards verticales con altura fija */
  .p25-apps-flow {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.875rem !important;
    padding: 0 1rem !important;
  }

  .p25-apps-flow li {
    width: 100% !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .p25-app-chip {
    display: flex !important;
    width: 100% !important;
    min-height: 70px !important;
    padding: 1rem 1.125rem !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    background: #fff !important;
    border: 1.5px solid #e5e7eb !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  }

  .p25-app-chip::before {
    display: none !important;
  }

  .p25-app-chip-text {
    padding-left: 0 !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    line-height: 1.5 !important;
  }

  .p25-app-chip:hover {
    transform: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  }

  /* Padding de las secciones */
  .p25-sectores-section,
  .p25-apps-section {
    padding: 2rem 0 !important;
  }
}

/* ==================== OVERRIDE: Certificaciones con fondo blanco en procesos ==================== */
.proceso-2025 section:has(.p25-cert) {
  background: var(--p25-white) !important;
}

/* ==================== MOBILE TYPOGRAPHY: Tamaños mínimos 14px ==================== */
@media (max-width: 768px) {
  /* Párrafos: mínimo 14px (0.875rem) */
  .proceso-2025 p,
  .p25-hero-description,
  .p25-tech-intro p,
  .p25-cert-intro,
  .p25-value-conclusion p,
  .p25-final p {
    font-size: 0.9375rem !important; /* 15px para buena legibilidad */
    line-height: 1.65 !important;
  }

  /* Listas y items: mínimo 14px */
  .p25-tech-intro li,
  .p25-value-benefits li,
  .p25-cert-block li {
    font-size: 0.9375rem !important; /* 15px */
    line-height: 1.65 !important;
  }

  /* H4: 18px para diferenciar de párrafos */
  .proceso-2025 h4 {
    font-size: 1.125rem !important; /* 18px */
    line-height: 1.4 !important;
    margin-bottom: 0.875rem !important;
  }

  /* H3: 20px para clara jerarquía */
  .proceso-2025 h3,
  .p25-cert-block h3,
  .p25-value-benefits h3,
  .p25-tech-intro h2 {
    font-size: 1.25rem !important; /* 20px */
    line-height: 1.35 !important;
    margin-bottom: 1rem !important;
  }

  /* H2: 26px para secciones principales */
  .proceso-2025 h2,
  .p25-section h2,
  .p25-products h2,
  .p25-value h2,
  .p25-table-section h2,
  .p25-sectores-section h2,
  .p25-apps-section h2 {
    font-size: 1.625rem !important; /* 26px */
    line-height: 1.25 !important;
    margin-bottom: 1.25rem !important;
  }

  /* Eyebrow: legible pero compacto */
  .p25-eyebrow {
    font-size: 0.8125rem !important; /* 13px - OK porque es decorativo */
    letter-spacing: 0.1em !important;
    margin-bottom: 0.625rem !important;
  }

  /* Badges del hero: pueden ser más pequeños */
  .p25-hero-badge {
    font-size: 0.6875rem !important; /* 11px - OK porque son badges decorativos */
  }

  /* Chips de aplicaciones: 15px mínimo */
  .p25-app-chip-text {
    font-size: 0.9375rem !important; /* 15px */
    line-height: 1.5 !important;
  }

  /* Textos de sector cards: 15px */
  .p25-sector-card-text {
    font-size: 0.9375rem !important; /* 15px */
    line-height: 1.5 !important;
  }

  /* Botón de toggle certificaciones: legible */
  .p25-cert-toggle {
    font-size: 0.9375rem !important; /* 15px */
    padding: 0.875rem 1.75rem !important;
  }

  /* Tablas: contenido mínimo 14px */
  .proceso-2025 .p25-tabla tbody td {
    font-size: 0.875rem !important; /* 14px - mínimo aceptable para tablas */
    line-height: 1.5 !important;
  }

  .proceso-2025 .p25-tabla thead th {
    font-size: 0.8125rem !important; /* 13px - headers pueden ser más pequeños */
    padding: 0.875rem !important;
  }

  /* Ajustar spacing para compensar textos más grandes */
  .p25-section {
    padding: 3.5rem 0 !important;
  }

  .p25-container {
    padding: 0 1.25rem !important;
  }
}