/* =========================================================
   ASSET REALITY - TEMA COMPARTIDO
   Mismo diseño que el Inicio para todas las páginas.
   Se carga al final para unificar encabezados, tipografía,
   botones, tarjetas, animaciones y banner de contacto.
   ========================================================= */
:root {
  --ar-primary: #1a8fd1;
  --ar-primary-dark: #1565c0;
  --ar-deep: #0d4d7a;
  --ar-teal: #3bbfb8;
  --ar-teal-light: #7ee3dd;
  --ar-text: #1a1a1a;
  --ar-muted: #5a6a78;
  --ar-border: #e8edf2;
}

/* ---------- Tipografía ---------- */
body.index-page { font-family: 'Open Sans', sans-serif; color: #3a4a5a; background: #fff; }
body.index-page main h1,
body.index-page main h2,
body.index-page main h3,
body.index-page main h4,
body.index-page main h5 { font-family: 'Raleway', sans-serif !important; }
body.index-page main .btn,
body.index-page main button { font-family: 'Poppins', sans-serif; }

/* ---------- Banner superior de cada página (mismo diseño) ---------- */
.products-hero, .about-hero, .page-title, .cronograma-hero, .formaciones-hero,
.curso-hero, .cat-hero, .mc-hero, .detail-hero, .ar-page-hero {
  position: relative;
  background: linear-gradient(135deg, var(--ar-deep) 0%, var(--ar-primary-dark) 55%, var(--ar-primary) 100%) !important;
  background-image: linear-gradient(135deg, var(--ar-deep) 0%, var(--ar-primary-dark) 55%, var(--ar-primary) 100%) !important;
  color: #fff !important;
  text-align: center !important;
  padding: 80px 0 70px !important;
  margin: 0 !important;
  min-height: 0 !important;
  overflow: hidden;
}
.products-hero::before, .about-hero::before, .page-title::before, .cronograma-hero::before,
.formaciones-hero::before, .curso-hero::before, .cat-hero::before, .mc-hero::before,
.detail-hero::before, .ar-page-hero::before,
.products-hero::after, .about-hero::after, .page-title::after, .cronograma-hero::after,
.formaciones-hero::after, .curso-hero::after, .cat-hero::after, .mc-hero::after,
.detail-hero::after, .ar-page-hero::after { content: none !important; }

.products-hero h1, .about-hero h1, .page-title h1, .cronograma-hero h1, .formaciones-hero h1,
.curso-hero h1, .cat-hero h1, .mc-hero h1, .detail-hero h1, .ar-page-hero h1 {
  font-family: 'Raleway', sans-serif !important;
  font-size: clamp(1.9rem, 4vw, 2.7rem) !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: .5px;
  margin: 0 0 12px !important;
  text-shadow: none !important;
}
.products-hero h1 span, .about-hero h1 span, .cronograma-hero h1 span, .formaciones-hero h1 span,
.curso-hero h1 span, .cat-hero h1 span, .mc-hero h1 span, .detail-hero h1 span, .ar-page-hero h1 span {
  color: var(--ar-teal-light) !important;
  -webkit-text-fill-color: var(--ar-teal-light) !important;
  background: none !important;
}
.products-hero p, .about-hero p, .page-title p, .cronograma-hero p, .formaciones-hero p,
.curso-hero p, .cat-hero p, .mc-hero p, .detail-hero p, .ar-page-hero p {
  color: rgba(255,255,255,.88) !important;
  font-size: 1.05rem !important;
  max-width: 760px;
  margin: 0 auto !important;
}
.about-hero img { max-height: 90px; width: auto; margin-bottom: 14px; }
.hero-divider {
  width: 60px; height: 3px; border-radius: 2px;
  background: var(--ar-teal) !important;
  margin: 22px auto 0 !important;
}
.badge-label, .badge-servicio, .hero-count {
  display: inline-block;
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  border-radius: 30px;
  padding: 5px 16px;
  font-family: 'Poppins', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
/* breadcrumbs dentro del banner */
.page-title .breadcrumbs ol, .detail-hero .breadcrumb { justify-content: center; list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 14px; background: none; }
.page-title .breadcrumbs a, .detail-hero .breadcrumb a { color: rgba(255,255,255,.85) !important; }
.page-title .breadcrumbs li, .detail-hero .breadcrumb-item, .detail-hero .breadcrumb-item.active { color: #fff !important; }
.detail-hero .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.6); }

/* ---------- Títulos de sección (mismo estilo del inicio) ---------- */
.section-heading, .section-header h2 {
  font-family: 'Raleway', sans-serif;
  color: #222;
  text-align: center;
}
.section-heading::after, .section-header .section-divider {
  content: '';
  display: block;
  width: 50px; height: 3px;
  background: var(--ar-primary) !important;
  margin: 10px auto 30px;
  border-radius: 2px;
}

/* ---------- Tarjetas: mismo borde y efecto hover del inicio ---------- */
.product-card, .course-card, .curso-card, .mc-card, .cat-card, .service-card,
.formacion-card, .detail-card, .info-card, .timeline-content {
  border-radius: 8px;
  transition: all .25s;
}
.product-card:hover, .course-card:hover, .curso-card:hover, .mc-card:hover, .cat-card:hover,
.service-card:hover, .formacion-card:hover, .detail-card:hover, .info-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.10);
  transform: translateY(-3px);
}

/* ---------- Botones: estilo del inicio ---------- */
.btn-primary, .btn-solicitar, .btn-event, .btn-cronograma, .btn-contacto, .btn-servicio {
  background: var(--ar-primary) !important;
  border-color: var(--ar-primary) !important;
  color: #fff !important;
  border-radius: 4px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  transition: all .25s;
}
.btn-primary:hover, .btn-solicitar:hover, .btn-cronograma:hover, .btn-contacto:hover, .btn-servicio:hover {
  background: var(--ar-primary-dark) !important;
  border-color: var(--ar-primary-dark) !important;
  transform: translateY(-2px);
}

/* ---------- Banner CTA "Llámanos" (igual que en el inicio) ---------- */
.cta-banner { background: linear-gradient(90deg, #1565c0 0%, #1a8fd1 100%); padding: 50px 0; }
.cta-banner .cta-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.cta-banner .cta-text h3 { color: #fff; font-size: 1.7rem; font-weight: 700; margin: 0 0 4px; font-family: 'Raleway', sans-serif !important; }
.cta-banner .cta-text p { color: rgba(255,255,255,.85); margin: 0; font-size: 1rem; font-family: 'Open Sans', sans-serif; }
.btn-cta {
  display: inline-block; border: 2px solid #fff; color: #fff; padding: 12px 32px; border-radius: 4px;
  font-weight: 700; font-size: .9rem; letter-spacing: .5px; text-decoration: none; transition: all .25s;
  font-family: 'Poppins', sans-serif; white-space: nowrap; background: transparent; cursor: pointer;
}
.btn-cta:hover { background: #fff; color: #1565c0; transform: scale(1.05); }
@media (max-width: 768px) {
  .cta-banner .cta-text h3 { font-size: 1.3rem; }
  .cta-banner .cta-inner { justify-content: center; text-align: center; }
  .products-hero, .about-hero, .page-title, .cronograma-hero, .formaciones-hero,
  .curso-hero, .cat-hero, .mc-hero, .detail-hero, .ar-page-hero { padding: 56px 0 48px !important; }
}

/* ---------- Tarjetas de servicios: imagen limpia + título debajo ---------- */
.mc-card {
  aspect-ratio: auto !important;
  display: flex !important;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ar-border);
  box-shadow: none !important;
}
.mc-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.10) !important; transform: translateY(-3px); }
.mc-card .mc-card-img { position: static !important; width: 100%; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; }
.mc-card:hover .mc-card-img { transform: none !important; }
.mc-card .mc-card-overlay, .mc-card .mc-card-content { display: none !important; }
.mc-card .mc-card-caption {
  padding: 16px 18px 18px;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--ar-deep);
  border-top: 3px solid var(--ar-teal);
  flex: 1;
}
.mc-card:hover .mc-card-caption { color: var(--ar-primary); }

/* Imágenes que fallan: sin texto alternativo visible */
img { color: transparent; font-size: 0; }