/* ============================================================================
   vorecol-modern.css — capa de modernización visual del home (EN/ES)
   ----------------------------------------------------------------------------
   Aditiva: se carga DESPUÉS de style.css y solo refina la presentación.
   No altera layout estructural, sliders ni JS. Identidad clara + naranja #F26522.
   v1.0.0 — 2026-08-20
   ============================================================================ */

:root {
  --vor-ink: #1a1a2e;        /* títulos con contraste real (antes #727272) */
  --vor-body: #4b5563;       /* cuerpo más legible (antes #737887) */
  --vor-orange: #F26522;
  --vor-orange-dark: #d9541a;
  --vor-orange-soft: rgba(242, 101, 34, 0.08);
  --vor-orange-border: rgba(242, 101, 34, 0.22);
  --vor-shadow-card: 0 24px 48px -16px rgba(26, 26, 46, 0.16);
}

/* ── Tipografía de héroe ─────────────────────────────────────────────────── */
.hero-style3 .hero-title {
  color: var(--vor-ink);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.hero-style3 .hero-text {
  color: var(--vor-body);
  font-size: 18px;
  line-height: 1.7;
  max-width: 580px;
}

/* Subtítulo del héroe como badge pill */
.hero-style3 .hero-subtitle {
  display: inline-block;
  background: var(--vor-orange-soft);
  border: 1px solid var(--vor-orange-border);
  color: var(--vor-orange);
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 8px 18px;
  border-radius: 999px;
  margin-bottom: 18px;
}

/* ── Botones ─────────────────────────────────────────────────────────────── */
.th-btn {
  border-radius: 12px;
  box-shadow: 0 10px 24px -10px rgba(242, 101, 34, 0.55);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.th-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -12px rgba(242, 101, 34, 0.6);
}

.th-btn:active {
  transform: translateY(0);
}

/* ── Títulos de sección con contraste real ───────────────────────────────── */
.sec-title,
.brand-title {
  color: var(--vor-ink);
  letter-spacing: -0.01em;
}

/* ── Strip de logos de clientes ──────────────────────────────────────────── */
.brand-slider4 .swiper-slide img {
  filter: grayscale(1);
  opacity: 0.5;
  transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.brand-slider4 .swiper-slide:hover img {
  filter: none;
  opacity: 1;
  transform: scale(1.05);
}

/* ── Cards de módulos (Our solutions) ────────────────────────────────────── */
.service-card {
  border-radius: 20px;
  border: 1px solid #eceff3;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  border-color: var(--vor-orange-border);
  box-shadow: var(--vor-shadow-card);
}

.service-card .box-title {
  color: var(--vor-ink);
}

.service-card .box-title a {
  transition: color 0.25s ease;
}

.service-card .box-title a:hover {
  color: var(--vor-orange);
}

.service-card .service-card_text {
  color: var(--vor-body);
  line-height: 1.7;
}

/* ── About / checklist ───────────────────────────────────────────────────── */
.checklist.style3 ul li p {
  color: var(--vor-body);
  font-weight: 500;
}

.checklist.style3 ul li i {
  color: var(--vor-orange);
}

/* ── Banda de contadores ─────────────────────────────────────────────────── */
.counter-card_number {
  letter-spacing: -0.02em;
}

.counter-card {
  transition: transform 0.3s ease;
}

.counter-card:hover {
  transform: translateY(-4px);
}

/* ── Corrección de centrado de iconos ──────────────────────────────────────
   El blob del counter es asimétrico: su centroide visual medido por píxeles es
   55.4%/52.5% del contenedor → padding-left:10px centra el icono ahí.
   (Los service-card quedaron centrados corrigiendo el markup: img width/height
   explícitos y sin   espurio, como en la versión ES.) */
.counter-card_icon {
  padding-left: 10px;
}

/* El blob de las service-cards usa line-height:85px con la img inline:
   sin vertical-align:middle la imagen se asienta en la baseline (se ve alta). */
.service-card .shape-icon img {
  vertical-align: middle;
}

/* ── Accesibilidad: respeto a reduced-motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .th-btn,
  .service-card,
  .counter-card,
  .brand-slider4 .swiper-slide img {
    transition: none;
  }

  .th-btn:hover,
  .service-card:hover,
  .counter-card:hover {
    transform: none;
  }
}

/* ── Contacto: contraste sobre el fondo naranja (contact_bg) ──────────────
   El template pinta .sub-title en naranja y .sec-text en gris #737887, ambos
   ilegibles sobre la foto naranja. Blanco + pill translúcido conserva el
   diseño y cumple contraste AA. El JS del template mueve data-bg-src a un
   style inline (background-image), por eso se cubren ambos estados. */
.bg-smoke[data-bg-src*="contact_bg"] .sub-title,
.bg-smoke[style*="contact_bg"] .sub-title {
  color: #F26522;
  background-color: #fff;
}

.bg-smoke[data-bg-src*="contact_bg"] .sec-text,
.bg-smoke[style*="contact_bg"] .sec-text {
  color: #3d3d3d;
}