/* ====================================================================
   ASPharma — design-system.css
   ────────────────────────────────────────────────────────────────────
   SCOPE: Lenguaje visual y comportamiento interactivo del sistema
          de diseño. Fuente de verdad para componentes DS.

   Contiene:
     • Cards (service, value, differential, result) completos
     • Badges, section headers, stats-bar items, timeline markers
     • Hovers, reveals y motion (todos en @media (hover:hover))
     • Accesibilidad (prefers-reduced-motion, focus-visible, touch)
     • Variantes contextuales (glass / data-nav-theme="dark")
     • Gradientes y sombras de marca

   NO contiene:
     • Tokens :root, reset, tipografía base  → main.css
     • Utilidades y layout primitives        → main.css
     • Navigation, footer, forms, modales    → main.css / conversion.css

   Regla de cascada: se carga DESPUÉS de main.css. Usa solo
   var(--color-*), var(--shadow-*), var(--transition-*), var(--sp-*),
   var(--radius-*), var(--text-*) definidos en main.css :root.
   NUNCA redefine :root.

   Criterio "¿va aquí?": si expresa marca o interacción → sí;
   si es reset/token/utility/layout → main.css.
   ==================================================================== */

/* ══════════════════════════════════════════════════════════════════════
   BLOCK 1 — Section Header (Split Layout + Eyebrow)
   Patrón estándar: izq = eyebrow + H2 / der = párrafo descriptivo.
   En mobile se apila. Inspiración: stripe.com (eyebrow), linear.app (split).
   ══════════════════════════════════════════════════════════════════════ */

.section-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 4rem;
  margin-bottom: 3rem;
}

/* Columna izquierda: eyebrow + H2 */
.section-header__lead {
  text-align: left;
}

.section-header__eyebrow {
  /* Patrón "H2 Split" (spec tipográfico v2.0): línea 1 = frase de contexto.
     Mismo cuerpo que el H2 main, en navy 40% Light 300, sentence-case. */
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-h2);            /* 38px (26 en móvil) */
  font-weight: var(--font-weight-display); /* 300 */
  line-height: var(--lh-h2);            /* 1.10 */
  letter-spacing: var(--track-h2);      /* -0.04em */
  text-transform: none;
  color: rgba(var(--palette-azure-500-rgb), 0.53); /* navy 53% — sube de 0.40 para ≥3:1 (WCAG 1.4.3, large text) */
  margin: 0 0 0.3em; /* aire entre la línea de contexto y la main del split */
}

/* Voz Luxury — palabra-clave en bronce itálica.
   El template renderea el segundo elemento del array `title` con esta
   clase (las secciones editoriales pasan title=[pre, key, post]). */
.section-header__title-key {
  /* FIX-1 (WCAG 1.4.3): el acento vivo --brand-accent (#C8A45D) da ~2.4:1
     sobre blanco y falla incluso como texto grande (3:1). Usamos el dorado
     cálido --brand-accent-hover (#8B6E2E, ~4.55:1) — pasa AA Normal y Large.
     El token vivo se conserva para decoración (puntos, bordes, iconos). */
  color: var(--brand-accent-hover);
  font-weight: var(--font-weight-regular); /* 400 — main line del split */
  font-style: italic;
}

/* Variante on-dark — el split sobre fondo oscuro: contexto en blanco
   translúcido, keyword en teal claro. */
[data-nav-theme="dark"] .section-header__eyebrow {
  color: rgba(255, 255, 255, 0.45);
}

[data-nav-theme="dark"] .section-header__title-key {
  color: rgb(var(--palette-teal-100-rgb));
}

/* En dark, la línea main no puede ser navy (invisible): va en blanco.
   Defensivo — hoy ninguna sección con section-header.php es dark, pero
   completa el set de overrides junto a eyebrow/title-key. */
[data-nav-theme="dark"] .section-header__title {
  color: var(--content-on-dark);
}

.section-header__title {
  /* Línea 2 (main) del split — pisa el weight 300 del token H2 a 400. */
  margin: 0;
  font-weight: var(--font-weight-regular); /* 400 */
  color: var(--brand-primary);             /* navy sólido */
}

/* Columna derecha: párrafo descriptivo */
.section-header__desc {
  font-size: var(--text-lead); /* 18px — secundario, bajo el título */
  line-height: 1.65;
  font-weight: var(--font-weight-display); /* 300 Light — firma editorial */
  color: var(--content-muted); /* secundario — no compite con el título */
  max-width: 480px;
  margin: 0;
  text-align: left;
}

/* Desktop: split 2/3 título · 1/3 desc. El desc arranca alineado al tope
   (a la altura del eyebrow), sin compensación — queda claramente secundario. */
@media (min-width: 768px) {
  .section-header {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }

  .section-header__desc {
    max-width: none;
  }
}

/* Variante sobre fondo oscuro — contexto muteado bajo el main blanco. */
[data-nav-theme="dark"] .section-header__eyebrow {
  color: rgba(255, 255, 255, 0.45);
}

[data-nav-theme="dark"] .section-header__desc {
  color: rgba(var(--content-on-dark-rgb), 0.75);
}

/* ══════════════════════════════════════════════════════════════════════
   BLOCK 2 — Service Cards
   (grid layout en main.css; aquí la card completa)
   ══════════════════════════════════════════════════════════════════════ */

.service-card {
  position: relative;
  background: var(--card-bg);
  color: var(--card-text);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-section);
  box-shadow: var(--shadow-card);
  padding: 2rem;
  overflow: hidden;
  /* Igualar alturas en fila cuando el grid hace stretch */
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base),
              background-color var(--transition-base),
              color var(--transition-base);
}

/* Gradient border via ::before en hover */
.service-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--brand-accent), var(--content-heading));
  opacity: 0;
  transition: opacity var(--transition-base);
  z-index: 0;
  pointer-events: none;
}

.service-card__tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: var(--font-weight-medium);
  color: var(--content-strong);
  background: var(--surface-card);
  border: 1px solid var(--surface-card);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-pill);
  margin-bottom: 0.75rem;
  position: relative;
  z-index: 1;
  transition: background-color var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base);
}

/* Voz Luxury — bronze-soft pill con texto bronze (coherente con
   .faq-bento__tile-cat y demás chips del flow Luxury). */
.industry-card__tag {
  position: absolute;
  top: 1.25rem;
  left: 1.5rem;
  font-family: var(--font-label);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-accent);
  background: rgba(200, 164, 93, 0.12);
  border: 1px solid rgba(var(--brand-accent-rgb), 0.16);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
  z-index: 1;
  transition: background-color var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base);
}

.service-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 1rem;
  color: var(--brand-primary);
  position: relative;
  z-index: 1;
  transition: color var(--transition-base), background-color var(--transition-base);
}

.service-card__icon .icon {
  width: 32px;
  height: 32px;
}

.service-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.01em;
  color: var(--content-heading);
  line-height: var(--lh-h3);
  margin: 0 0 0.5rem 0;
  position: relative;
  z-index: 1;
  transition: color var(--transition-base);
}

.service-card__desc {
  font-size: var(--text-h4);
  color: var(--content-body);
  line-height: 1.6;
  position: relative;
  z-index: 1;
  transition: color var(--transition-base);
}

/* ══════════════════════════════════════════════════════════════════════
   BLOCK 3 — Value Cards
   ──────────────────────────────────────────────────────────────────────
   Anatomía Luxury (Propuesta de Valor):
     ┌─────────────────────────────────────────┐
     │ ○ icon          [body]              01  │
     │                  título italic          │
     │                  descripción            │
     │ ──                                      │  ← hairline bronze
     └─────────────────────────────────────────┘
   Card 3 columnas implícitas: icon · body · index. El hairline anclado
   bottom-left crece de 24px → 56px en hover (firma luxury).
   ══════════════════════════════════════════════════════════════════════ */

.value-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.75rem 1.75rem 2.25rem;
  background: var(--card-bg);
  color: var(--card-text);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base),
              background-color var(--transition-base),
              color var(--transition-base);
}

/* Glow esquina superior-derecha — sutil, se intensifica en hover */
.value-card::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle at center, rgba(var(--brand-accent-rgb), 0.18), transparent 65%);
  opacity: 0;
  transition: opacity var(--transition-slow);
  pointer-events: none;
  z-index: 0;
}

.value-card__icon {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  min-width: 64px;
  min-height: 64px;
  background: transparent;
  border: 1px solid rgba(var(--brand-accent-rgb), 0.55);
  border-radius: 50%;
  color: var(--brand-accent-vivid);
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              color var(--transition-base),
              transform var(--transition-base);
}

.value-card__icon .icon {
  width: 26px;
  height: 26px;
}

.value-card__body {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding-top: 0.375rem;
}

.value-card__index {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--font-weight-medium);
  font-size: var(--text-body);
  letter-spacing: 0.08em;
  color: rgba(var(--brand-accent-rgb), 0.55);
  transition: color var(--transition-base);
}

.value-card__title {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-h3);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--content-heading);
  margin-bottom: 0.5rem;
}

.value-card__desc {
  font-size: var(--text-h4);
  color: var(--content-body);
  line-height: 1.6;
  font-style: normal;
}

/* Hairline luxury: bronze line bottom-left, crece en hover */
.value-card__rule {
  position: absolute;
  left: 1.75rem;
  bottom: 1.25rem;
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg,
              var(--brand-accent-vivid) 0%,
              rgba(var(--brand-accent-rgb), 0.25) 100%);
  transition: width var(--transition-slow);
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════════════════
   BLOCK 4 — Differential Cards
   ══════════════════════════════════════════════════════════════════════ */

.differential-card {
  background: var(--card-bg);
  color: var(--card-text);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-shadow: rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px;
  transition: transform var(--transition-base),
              box-shadow var(--transition-base),
              border-color var(--transition-base);
}

.differential-card__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: var(--brand-primary);
  border-radius: 50%;
  color: #ffffff;
  margin-bottom: 1.5rem;
}

.differential-card__icon .icon {
  width: 16px;
  height: 16px;
}

.differential-card__body {
  flex: 1;
}

.differential-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.01em;
  line-height: var(--lh-h3);
  color: var(--content-heading);
  margin-bottom: 0.375rem;
}

.differential-card__desc {
  font-size: var(--text-h4);
  color: var(--content-body);
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════════════
   BLOCK 6 — Stats Bar / Metric Cards
   (contenedor .stats-bar y .stats-bar__container viven en main.css)
   ══════════════════════════════════════════════════════════════════════ */

.stats-bar__item {
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 160px;
  position: relative;
}

.stats-bar__trend {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-heading);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-heading);
  color: var(--brand-primary);
}

.stats-bar__trend .icon {
  width: 14px;
  height: 14px;
}

.stats-bar__number {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: var(--font-weight-heading);
  color: var(--brand-accent-text-strong);   /* #8B6E2E — era --brand-accent (#C8A45D, 2.35:1) */
  line-height: 1;
  letter-spacing: -0.02em;
}

.stats-bar__number[data-counter] {
  font-variant-numeric: tabular-nums;
}

.stats-bar__plus {
  font-size: 0.6em;
  vertical-align: super;
  color: var(--brand-accent-text-strong);   /* #8B6E2E — era --brand-accent */
}

/* Voz Luxury — label en mono caps tracking ancho */
.stats-bar__label {
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--content-muted);
  margin-top: var(--sp-2);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

/* Divider con tinte bronce más visible — coherente con hairlines del flow */
.stats-bar__divider {
  width: 1px;
  height: 48px;
  background: rgba(var(--brand-accent-rgb), 0.22);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .stats-bar__divider { display: none; }
  .stats-bar__item {
    min-width: 120px;
    flex: 0 0 calc(50% - var(--sp-4));
  }
}

/* ══════════════════════════════════════════════════════════════════════
   BLOCK 7 — Process Timeline (marker + line visual)
   Layout estructural del timeline vive en main.css.
   ══════════════════════════════════════════════════════════════════════ */

.timeline__line {
  display: none;
}

@media (min-width: 1024px) {
  /* Línea central — tinte bronce suave (voz Luxury) en lugar de gradient
     bronce→negro. Más discreta, más editorial. */
  .timeline__line {
    display: block;
    background: rgba(var(--brand-accent-rgb), 0.32);
    width: 1px;
    border: none;
  }
}

/* Voz Luxury — marker más sobrio: círculo cream con anillo bronze
   sutil + número monoespaciado bronze. Menos infográfico, más editorial.
   Mantiene la visibilidad como punto de anclaje del timeline. */
.timeline__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface-page);
  border: 1.5px solid var(--brand-accent);
  color: var(--brand-accent-deep);   /* #6B5320 — texto; el borde decorativo (línea anterior) se mantiene en --brand-accent */
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 6px rgba(200, 164, 93, 0.08),
              0 8px 20px -8px rgba(var(--brand-accent-rgb), 0.20);
}

/* Imagen timeline: grayscale por defecto → tono bronce Luxury al hover
   (en lugar del color original). La filter exacta vive en main.css. */
.timeline__image-container:hover .timeline__image {
  filter: sepia(55%) saturate(1.25) hue-rotate(-12deg) brightness(0.95);
  transition: filter 500ms ease;
}

/* ══════════════════════════════════════════════════════════════════════
   BLOCK 8 — Hover States (solo en dispositivos con hover real)
   ══════════════════════════════════════════════════════════════════════ */

@media (hover: hover) {
  /* Service Card */
  .service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
  }

  .service-card:hover .service-card__tag {
    background: var(--surface-dark);
    color: var(--content-on-dark);
    border-color: var(--surface-dark);
  }

  /* Value Card — Luxury hover orquestado:
     lift sutil + glow corner-glow + ring solid + index full opacity + hairline grows */
  .value-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.45),
                0 12px 24px -12px rgba(var(--brand-accent-rgb), 0.25);
    border-color: rgba(var(--brand-accent-rgb), 0.6);
  }

  .value-card:hover::before {
    opacity: 1;
  }

  .value-card:hover .value-card__icon {
    background: var(--brand-accent-vivid);
    border-color: var(--brand-accent-vivid);
    color: var(--brand-primary);
  }

  .value-card:hover .value-card__index {
    color: var(--brand-accent-vivid);
  }

  .value-card:hover .value-card__rule {
    width: 56px;
  }

  /* Industry Card — mismo lenguaje de hover que service-card */
  .industry-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
  }

  .industry-card:hover .industry-card__tag {
    background: var(--surface-dark);
    color: var(--content-on-dark);
    border-color: var(--surface-dark);
  }

  /* Differential Card */
  .differential-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--brand-accent);
  }

}

/* ══════════════════════════════════════════════════════════════════════
   BLOCK 9 — Accessibility + Reduced Motion
   ══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .service-card,
  .value-card,
  .differential-card,
  .service-card::before,
  .value-card::before,
  .value-card__icon,
  .value-card__index,
  .value-card__rule,
  .timeline__image {
    transition: none;
  }
}

/* Focus visible unificado para cards interactivas */
.service-card:focus-visible,
.value-card:focus-visible,
.differential-card:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Touch targets mínimos 44×44px en mobile */
@media (max-width: 768px) {
  .service-card,
  .value-card,
  .differential-card {
    min-height: 44px;
  }
}

/* ─── FIX-6 (WCAG 2.2.2) — Control de pausa de movimiento del hero ─────
   Pill glass navy con acento gold en la esquina del hero; gobierna vídeo
   de fondo + marquee de logos vía JS. 44×44px (cumple 2.5.8). Oculto bajo
   prefers-reduced-motion: ahí ya no hay movimiento que pausar. */
.hero__motion-toggle {
  position: absolute;
  right: var(--hero-toggle-inset);
  bottom: var(--hero-toggle-inset);
  z-index: 4;
  width: var(--hero-toggle-size);
  height: var(--hero-toggle-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(16, 25, 53, 0.45);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  transition: background var(--transition-fast),
              border-color var(--transition-fast),
              transform var(--transition-fast);
}

@media (hover: hover) {
  .hero__motion-toggle:hover {
    background: rgba(16, 25, 53, 0.72);
    border-color: var(--brand-accent);
    transform: translateY(-1px);
  }
}

.hero__motion-toggle:focus-visible {
  outline: 2px solid var(--palette-teal-400);
  outline-offset: 2px;
}

/* Por defecto (movimiento activo) se ve el icono de pausa; al pausar
   se intercambia por el de play. */
.hero__motion-icon--play {
  display: none;
}

.hero__motion-toggle.is-paused .hero__motion-icon--pause {
  display: none;
}

.hero__motion-toggle.is-paused .hero__motion-icon--play {
  display: inline;
}

@media (prefers-reduced-motion: reduce) {
  .hero__motion-toggle {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   BLOCK 10 — Card variant modifiers
   ──────────────────────────────────────────────────────────────────────
   Permiten marcar una card individual con un color destacado distinto
   del default tonal de su sección. Override controlado por modificador
   BEM, sin tocar el HTML del resto.

   Uso:
     <div class="service-card service-card--brand">  → fondo brand-primary
     <div class="value-card value-card--accent">     → fondo brand-accent
     <div class="industry-card industry-card--dark"> → fondo dark
   ══════════════════════════════════════════════════════════════════════ */

.service-card--brand,
.value-card--brand,
.industry-card--brand,
.differential-card--brand {
  --card-bg:   var(--card-bg-brand);
  --card-text: var(--card-text-on-brand);
  border-color: transparent;
}

.service-card--accent,
.value-card--accent,
.industry-card--accent,
.differential-card--accent {
  --card-bg:   var(--card-bg-accent);
  --card-text: var(--card-text-on-accent);
  border-color: transparent;
}

.service-card--dark,
.value-card--dark,
.industry-card--dark,
.differential-card--dark {
  --card-bg:   var(--card-bg-dark);
  --card-text: var(--card-text-on-dark);
  border-color: var(--border-on-dark);
}

/* En cards destacadas (brand/accent/dark), los textos hijos heredan
   el color contextual via --card-text. Estos overrides aseguran que
   children con color explícito (ej. titles que usan --content-heading)
   también respondan al contexto. */
.service-card--brand .service-card__title,
.service-card--accent .service-card__title,
.service-card--dark .service-card__title,
.value-card--brand .value-card__title,
.value-card--accent .value-card__title,
.value-card--dark .value-card__title,
.industry-card--brand .industry-card__title,
.industry-card--accent .industry-card__title,
.industry-card--dark .industry-card__title,
.differential-card--brand .differential-card__title,
.differential-card--accent .differential-card__title,
.differential-card--dark .differential-card__title {
  color: var(--card-text);
}

.service-card--brand .service-card__desc,
.service-card--accent .service-card__desc,
.service-card--dark .service-card__desc,
.value-card--brand .value-card__desc,
.value-card--accent .value-card__desc,
.value-card--dark .value-card__desc,
.industry-card--brand .industry-card__desc,
.industry-card--accent .industry-card__desc,
.industry-card--dark .industry-card__desc,
.differential-card--brand .differential-card__desc,
.differential-card--accent .differential-card__desc,
.differential-card--dark .differential-card__desc {
  color: var(--card-text);
  opacity: 0.9;
}

/* ══════════════════════════════════════════════════════════════════════
   LUXURY — Aesthetic adjustments
   ──────────────────────────────────────────────────────────────────────
   Migrado desde themes.css cuando se eliminó el sistema de temas. Estas
   reglas aplican universalmente porque Luxury es ahora la única identidad
   visual del proyecto. Todas vienen del bloque [data-theme="luxury"]
   pero el prefix se removió.
   ══════════════════════════════════════════════════════════════════════ */

/* Service-card tag: ghost dorado — borde y texto en accent */
.service-card__tag {
  background: transparent;
  border: 1px solid var(--brand-accent);
  color: var(--brand-accent);
}

.service-card:hover .service-card__tag {
  background: var(--brand-primary);
  color: var(--content-on-brand);
  border-color: var(--brand-primary);
}

/* Headings: tracking editorial (Nunito Sans gana con tracking ligeramente negativo a tamaños grandes).
   Las utilidades .text-h1/.text-h2 y los titulares con tamaño propio aplican su tracking de rol. */
h1, h2, h3 {
  letter-spacing: -0.02em;
}

/* ─── Hero glass refresh ─── */
.hero-badge,
.hero .lead-magnet-trigger,
.hero__microcopy,
.hero__urgency-signal,
.hero .trust-badges {
  display: none;
}

.hero__cta-microcopy {
  color: rgba(255, 255, 255, 0.7);
}

.hero__stat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0 0 1.75rem;
}

.hero__stat-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background: rgba(var(--brand-primary-rgb), 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 9999px;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.3;
}

/* ─── CTAs Luxury (Book Demo pill style con icon-circle a izquierda) ─── */
.btn--primary,
.btn--primary-white,
.faq-contact-card__btn,
[data-nav-theme="dark"] .btn--primary {
  background-color: var(--action-primary-bg);
  color: var(--action-primary-text);
  border-radius: 9999px;
  flex-direction: row-reverse;
  padding: 0.5rem 1.5rem 0.5rem 0.5rem;
  gap: 0.75rem;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.35);
}

.faq-contact-card__btn {
  width: fit-content;
  align-self: flex-start;
}

.btn--primary:hover,
.btn--primary-white:hover,
.faq-contact-card__btn:hover,
[data-nav-theme="dark"] .btn--primary:hover {
  background-color: var(--action-primary-bg-hover);
  color: var(--action-primary-text);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -5px rgba(var(--action-primary-bg-rgb), 0.45);
}

/* faq-contact-card y el botón "volver" conservan el círculo translúcido original
   (no son CTA de conversión). */
.faq-contact-card__btn .icon,
.nav__cta--back .icon {
  width: 20px;
  height: 20px;
  padding: 6px;
  background-color: rgba(255, 255, 255, 0.20);
  border-radius: 50%;
  box-sizing: content-box;
  flex-shrink: 0;
}

/* ── Sistema unificado de CTA: círculo-flecha sólido a la IZQUIERDA + rotación
   en hover (igual que hero-cta / nav-cta). Excluye el botón "volver". ────── */
.btn--primary:not(.nav__cta--back) .icon,
.btn--primary-white .icon {
  /* La posición a la izquierda la da el flex-direction:row-reverse de la regla
     "CTAs Luxury" (arriba). NO usar order aquí: pelearía con el row-reverse. */
  width: 26px;                                /* círculo, = .hero-cta__arrow */
  height: 26px;
  padding: 5.5px;                             /* deja la flecha a ~15px dentro del círculo (= .hero-cta__arrow-icon) */
  border-radius: 50%;
  box-sizing: border-box;
  flex-shrink: 0;
  background-color: var(--surface-page);      /* círculo blanco */
  color: var(--action-primary-bg);            /* flecha indigo (currentColor) */
  transition: transform 250ms ease;
}

.btn--primary:not(.nav__cta--back):hover .icon,
.btn--primary-white:hover .icon {
  transform: rotate(45deg);                   /* ↗ → → */
}

/* El botón es indigo en todo contexto (ver override en main.css), así que el
   círculo queda blanco/indigo siempre — idéntico al hero-cta, sin override dark. */

@media (prefers-reduced-motion: reduce) {
  .btn--primary:not(.nav__cta--back) .icon { transition: none; }
  .btn--primary:not(.nav__cta--back):hover .icon { transform: none; }
}

.btn--ghost {
  border-radius: 9999px;
}

/* btn--back y CTA primary del form wizard: altura idéntica */
.btn--back,
.form-step__actions .btn--primary {
  height: 48px;
  box-sizing: border-box;
}

.btn--back {
  border-radius: 9999px;
  padding: 0 1.5rem;
  border: none;
  background: rgba(var(--brand-primary-rgb), 0.10);
  color: var(--brand-primary);
  font-weight: var(--font-weight-medium);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.35);
  transition: background var(--transition-fast),
              box-shadow var(--transition-fast);
}

.btn--back:hover {
  background: rgba(var(--brand-primary-rgb), 0.16);
  color: var(--brand-primary);
  border-color: transparent;
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.42);
}

/* btn--next: icon a la DERECHA del texto (mirror del btn--primary) */
.btn--next {
  flex-direction: row;
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
}

/* Cards unificadas a 8px radius */
.differential-card,
.stat-card,
.contact-card {
  border-radius: 8px;
}

.form-input,
.cs__trigger,
.lead-magnet-form .form-group input {
  border-radius: 8px;
}

/* ─── Form section (clásico): bronze → navy/grayscale, stepper pills ─── */
.form-progress__fill {
  background: var(--brand-primary);
}

.form-progress__label {
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  background: var(--surface-card);
  color: var(--content-strong);
}

.form-progress__label.is-active {
  background: var(--brand-primary);
  color: var(--content-on-brand);
}

.form-progress__dot {
  background: rgba(0, 0, 0, 0.15);
  border-color: rgba(0, 0, 0, 0.15);
}

.form-progress__label.is-active .form-progress__dot {
  background: var(--content-on-brand);
  border-color: var(--content-on-brand);
}

.form-trust-bar {
  background: var(--surface-card);
  border-color: var(--border-subtle);
  margin-bottom: 0.75rem;
}

.form-trust-item {
  color: var(--content-strong);
}

.form-divider {
  display: none;
}

.contact-card {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.form-consent {
  font-size: var(--text-eyebrow);
  line-height: 1.4;
  margin-top: -0.25rem;
}

.cta-microcopy--block {
  margin-top: -0.25rem;
}

.form-progress {
  margin-bottom: 1.5rem;
}

/* Form chips: bronze → navy/grayscale */
.form-chip:hover > span {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.form-chip input[type="radio"]:checked + span {
  background: rgba(var(--brand-primary-rgb), 0.08);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.form-chip input[type="radio"]:focus-visible + span {
  outline-color: var(--focus-ring);
}

.cs__option--selected {
  color: var(--brand-primary);
}

.form-consent a {
  color: var(--brand-primary);
}

.form-consent a:hover {
  color: var(--brand-primary-active);
}

/* Floating label como eyebrow editorial */
.form-input:focus + .form-label,
.form-input:not(:placeholder-shown) + .form-label,
.form-group.is-focused > .form-label,
.form-group.has-value > .form-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--text-eyebrow);
}

.form-input:focus + .form-label,
.form-group.is-focused > .form-label {
  color: var(--brand-primary);
}

.form-input:not(:focus):not(:placeholder-shown) + .form-label,
.form-group.has-value:not(.is-focused) > .form-label {
  color: var(--content-muted);
}

.form-input.is-valid,
.form-group.is-valid .form-input {
  border-color: var(--brand-primary);
}

.form-step {
  gap: 1.25rem;
}

/* Editorial callout para el chip group con rail navy a izquierda */
.form-group--chips {
  margin-bottom: 0.5rem;
  padding: 1rem 1.25rem;
  background: var(--surface-card);
  border-left: 3px solid var(--brand-primary);
  border-radius: 0 8px 8px 0;
}

.form-group--chips .form-label--static {
  margin-bottom: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--text-caption);
  color: var(--brand-primary);
}

/* ══════════════════════════════════════════════════════════════════════
   Value Card · Luxury anatomy refinement
   Override del modificador value-card--dark con el brief de Propuesta
   de Valor: container gradient navy con highlight superior, icon chip
   gold-ring transparente, content cream/slate.
   ══════════════════════════════════════════════════════════════════════ */

.value-card--dark {
  grid-template-columns: auto 1fr;
  /* flex-start (no center): alinea icono + texto arriba para que TODOS los
     títulos de la grilla queden a la misma altura, sin importar el largo de
     la descripción. Con `center` las cards de descripción corta centraban el
     bloque y el título "bajaba", rompiendo la alineación de la fila. */
  align-items: flex-start;
  gap: 18px;
  padding: 26px 28px;
  background: linear-gradient(155deg, var(--card-dark-bg-from) 0%, var(--card-dark-bg-to) 100%);
  border: 1px solid rgba(156, 140, 63, 0.18);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
              0 12px 32px -16px rgba(0, 0, 0, 0.35);
}

.value-card--dark::before {
  background: radial-gradient(circle at center,
              rgba(232, 221, 181, 0.10), transparent 70%);
}

.value-card--dark .value-card__icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  background: transparent;
  border: 1.5px solid var(--card-dark-icon-border);
  color: var(--card-dark-icon);
}

.value-card--dark .value-card__icon .icon {
  width: 22px;
  height: 22px;
}

.value-card--dark .value-card__body {
  padding-top: 0;
}

.value-card--dark .value-card__title {
  font-style: normal;
  font-size: var(--text-h3-section);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--card-dark-title);
  margin-bottom: 0.5rem;
}

.value-card--dark .value-card__desc {
  font-size: var(--text-body-lg);   /* 16px — era --text-body (14px) */
  line-height: 1.5;
  color: var(--card-dark-text);
}

/* Mobile (1 columna): igualar altura de todas las value-cards. Apiladas, cada
   una toma su altura de contenido y las de título 2-líneas + desc 3-líneas
   (ej. "Packaging sostenible") quedan más altas. min-height las nivela; con el
   contenido top-aligned (flex-start), el sobrante queda abajo, sin huecos
   entre título y desc. A partir de 640px la grilla pasa a 2/3 columnas y el
   stretch por fila ya las iguala, así que este min-height solo aplica acá. */
@media (max-width: 640px) {
  .value-card--dark {
    min-height: 12rem;
    align-items: center;   /* 1 columna: centra el bloque ícono+texto → reparte el aire arriba/abajo y elimina el hueco inferior (era flex-start de :1153; en desktop ese flex-start sigue gobernando) */
  }
}

@media (hover: hover) {
  .value-card--dark:hover {
    transform: translateY(-4px);
    border-color: rgba(156, 140, 63, 0.45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
                0 24px 48px -16px rgba(0, 0, 0, 0.55),
                0 12px 24px -12px rgba(156, 140, 63, 0.20);
  }

  .value-card--dark:hover .value-card__icon {
    background: rgba(232, 221, 181, 0.06);
    border-color: var(--card-dark-icon);
    color: var(--card-dark-title);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Service Card · Luxury split-half
   Tarjeta dividida en dos zonas:
     - Top:  gradient navy 155° (mismo de value-card--dark) + chip gold
     - Body: cream/surface-warm + título sans-serif + descripción slate
   Tipografía y tokens heredados de value-card.
   ══════════════════════════════════════════════════════════════════════ */

.service-card--lux {
  display: flex;
  flex-direction: column;
  background: #FAF7F1;
  border: 1px solid rgba(156, 140, 63, 0.16);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 32px -20px rgba(0, 0, 0, 0.18);
  height: 100%;
  padding: 0;
  transition: transform var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base);
}

.service-card--lux .service-card__top {
  background: linear-gradient(155deg, var(--card-dark-bg-from) 0%, var(--card-dark-bg-to) 100%);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.service-card--lux .service-card__icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1.5px solid var(--card-dark-icon-border);
  border-radius: 50%;
  color: var(--card-dark-icon);
  margin: 0;
}

.service-card--lux .service-card__icon .icon {
  width: 18px;
  height: 18px;
}

.service-card--lux .service-card__title {
  flex: 1;
  font-family: var(--font-heading);
  font-style: normal;
  font-size: var(--text-card-title);       /* 18px — era --text-subhead (20px) */
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--card-dark-title);
  margin: 0;
}

.service-card--lux .service-card__body {
  flex: 1;
  padding: 22px 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.service-card--lux .service-card__name {
  font-family: var(--font-heading);
  font-style: normal;
  font-size: var(--text-h3-section);   /* 22px (20px móvil) — era --text-subhead (20px) */
  font-weight: var(--font-weight-light);   /* 300 — era --font-weight-medium (500) */
  letter-spacing: -0.005em;                /* afloja para el peso light — era -0.01em */
  line-height: 1.2;                    /* era 1.25 */
  text-wrap: balance;                  /* reparte palabras para igualar líneas — paridad con industry title */
  color: var(--content-heading);
  margin: 0;
}

.service-card--lux .service-card__desc {
  font-size: var(--text-body);      /* 14px — era --text-body-lg (16px) */
  line-height: 1.6;                 /* era 1.5 */
  color: var(--content-body);
  margin: 0;
}

.service-card--lux .service-card__link {
  font-size: var(--text-body);              /* 14px — antes heredaba ~body */
  font-weight: var(--font-weight-semibold); /* 600 — marca la acción */
  color: var(--brand-primary);              /* navy/indigo — igual al color actual */
}

@media (hover: hover) {
  .service-card--lux:hover {
    transform: translateY(-4px);
    border-color: rgba(156, 140, 63, 0.4);
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.22),
                0 12px 24px -12px rgba(156, 140, 63, 0.16);
  }

  .service-card--lux:hover .service-card__top {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .service-card--lux:hover .service-card__icon {
    background: rgba(232, 221, 181, 0.06);
    border-color: var(--card-dark-icon);
    color: var(--card-dark-title);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Industry Card · Luxury vertical split
   Layout vertical 2 zonas:
     - Top:  gradient navy 155° + pill outline gold (placeholder de imagen
             futura — cuando llegue se reemplaza por <img>)
     - Body: cream + eyebrow gold + título Nunito Sans + descripción slate
   Reusa tokens y patrón visual de service-card--lux y value-card--dark.
   ══════════════════════════════════════════════════════════════════════ */

.industry-card--lux {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: #FAF7F1;
  border: 1px solid rgba(156, 140, 63, 0.16);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 32px -20px rgba(0, 0, 0, 0.18);
  height: 100%;
  transition: transform var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base);
}

.industry-card--lux .industry-card__top {
  position: relative;
  min-height: 220px;
  background: linear-gradient(155deg, var(--card-dark-bg-from) 0%, var(--card-dark-bg-to) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

/* Imagen ad-hoc (cuando se incorpore reemplaza al pill).
   La img cubre todo el top zone con object-fit. */
.industry-card--lux .industry-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.industry-card--lux .industry-card__pill {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-family: var(--font-heading);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(var(--palette-teal-400-rgb));
  background: rgba(10, 31, 56, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(var(--palette-teal-500-rgb), 0.55);
  border-radius: 9999px;
  white-space: nowrap;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.4);
}

.industry-card--lux .industry-card__body {
  flex: 1;
  padding: 22px 28px 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  background: #FAF7F1;
}

.industry-card--lux .industry-card__title {
  font-family: var(--font-heading);
  font-style: normal;
  font-size: var(--text-h3-section);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--content-heading);
  margin: 0;
}

.industry-card--lux .industry-card__desc {
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--content-body);
  margin: 0;
}

.industry-card--lux .industry-card__link {
  font-size: var(--text-body);              /* 14px — era --text-small (13px) del shared */
  font-weight: var(--font-weight-semibold); /* 600 — marca la acción (igual que Servicios) */
  color: var(--brand-primary);              /* navy/indigo — sin cambio; margin-top:auto se conserva del shared */
}

@media (hover: hover) {
  .industry-card--lux:hover {
    transform: translateY(-4px);
    border-color: rgba(156, 140, 63, 0.4);
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.22),
                0 12px 24px -12px rgba(156, 140, 63, 0.16);
  }

  .industry-card--lux:hover .industry-card__top {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .industry-card--lux:hover .industry-card__pill {
    border-color: rgb(var(--palette-teal-400-rgb));
    color: rgb(var(--palette-teal-100-rgb));
  }
}

/* ── Overrides móviles de cards lux — colocados DESPUÉS de las reglas base --lux
   para ganar por orden de cascada (misma especificidad 0,2,0). En el @media de la
   línea ~662 (antes que las base) eran ignorados. ── */
@media (max-width: 768px) {
  /* Legibilidad: desc a 16px (cada una conserva su lh: service 1.6 / industry 1.5). */
  .service-card--lux .service-card__desc,
  .industry-card--lux .industry-card__desc {
    font-size: var(--text-body-lg);   /* 16px — era --text-body (14px) */
  }

  /* Tap target del link a 44px (WCAG 2.5.5); margin-top:auto y align-self del shared se conservan. */
  .service-card--lux .service-card__link,
  .industry-card--lux .industry-card__link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* #3 — red de seguridad low-DPI: nombre de Servicios 300→400 solo en móvil
     (en desktop sigue light 300). Industrias queda en 500, no se toca. */
  .service-card--lux .service-card__name {
    font-weight: var(--font-weight-regular);   /* 400 — era 300 (light) */
  }
}