/* ===== Resto del sitio: todos los efectos aprobados por animar-interfaz ===== */

:root {
  --color-primario: #235789;
  --color-secundario: #020100;
  --color-acento: #ed1c24;
  --color-fondo: #235789;
  --color-tarjeta: transparent;
}

/* --- 1. Fade-in al hacer scroll --- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- 2. Hover en tarjetas --- */
.tarjeta, .service-card, .contact-card, .logro-box, .client-card, .testimonial-card, .blog-card-home {
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}
.tarjeta:hover, .service-card:hover, .contact-card:hover, .logro-box:hover, .client-card:hover, .testimonial-card:hover, .blog-card-home:hover {
  transform: translateY(-5px) !important;
  border-color: var(--color-acento) !important;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.25) !important;
}

/* --- 3. Hover en botones --- */
.btn, .btn-primary, .btn-secondary {
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.btn:hover, .btn-primary:hover, .btn-secondary:hover {
  transform: translateY(-2px);
}
.btn:active, .btn-primary:active, .btn-secondary:active {
  transform: translateY(0);
}

/* --- 4. Pulso del botón flotante de WhatsApp --- */
.whatsapp-flotante, .floating-wa {
  position: fixed !important;
}
.whatsapp-flotante::before, .floating-wa::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  opacity: .55;
  animation: pulso 2.4s ease-out infinite;
  z-index: -1;
  pointer-events: none;
}
@keyframes pulso {
  0% { transform: scale(1); opacity: .55; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* --- 5. Acordeón de FAQs --- */
.faq-pregunta, .accordion-header {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-pregunta .icono, .accordion-header .accordion-icon {
  transition: transform .25s ease;
  color: var(--color-acento);
}
.faq-item.abierto .icono, .accordion-item.open .accordion-icon, .accordion-item.abierto .accordion-icon {
  transform: rotate(180deg);
}
.faq-respuesta, .accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .35s ease;
}
.faq-item.abierto .faq-respuesta, .accordion-item.open .accordion-body, .accordion-item.abierto .accordion-body {
  max-height: 320px;
}

/* --- 6. Barra de progreso de fases --- */
.fases {
  position: relative;
  padding-left: 32px;
}
.fases .linea-base {
  position: absolute;
  left: 9px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: rgba(255, 255, 255, .12);
}
.fases .linea-progreso {
  position: absolute;
  left: 9px;
  top: 6px;
  width: 2px;
  height: 0%;
  background: var(--color-acento);
  transition: height 1.2s ease;
}
.fase {
  position: relative;
}
.fase::before {
  content: "";
  position: absolute;
  left: -32px;
  top: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-fondo);
  border: 2px solid rgba(255, 255, 255, .2);
  transition: border-color .4s ease, background .4s ease;
}
.fase.activa::before {
  border-color: var(--color-acento);
  background: var(--color-acento);
}

/* --- 7. Subrayado animado en menú --- */
.nav-menu > li > a:not(.btn-primary) {
  position: relative;
}
.nav-menu > li > a:not(.btn-primary)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--color-acento);
  transition: width .25s ease;
}
.nav-menu > li > a:not(.btn-primary):hover::after {
  width: 100%;
}

/* --- 9. Shimmer al cargar imágenes --- */
.img-wrap {
  position: relative;
  overflow: hidden;
}
.img-wrap.cargando::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-tarjeta) 25%, rgba(255, 255, 255, .08) 50%, var(--color-tarjeta) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  z-index: 2;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- 10. Confirmación animada de formulario --- */
.confirmacion-envio {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease;
  display: none;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #4ADE80;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
}
.confirmacion-envio.visible {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* --- Accesibilidad: respeta "reducir movimiento" --- */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
  .whatsapp-flotante::before, .floating-wa::before { animation: none; display: none; }
  .tarjeta, .service-card, .contact-card, .logro-box, .client-card, .testimonial-card, .blog-card-home,
  .btn, .btn-primary, .btn-secondary, .faq-respuesta, .accordion-body, .faq-pregunta .icono, .accordion-icon,
  .fases .linea-progreso, .fase::before, .nav-menu > li > a::after,
  .img-wrap.cargando::before, .confirmacion-envio {
    transition: none !important;
    animation: none !important;
  }
}



/* --- Utilidades CSS estáticas (Reemplazo autónomo de Tailwind CDN) --- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-light { font-weight: 300; }
.leading-tight { line-height: 1.25; }
.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }
.text-\[11px\] { font-size: 11px; }
.text-\[12px\] { font-size: 12px; }
.text-white { color: #ffffff; }
.uppercase { text-transform: uppercase; }
.bg-dark-alt { background-color: var(--card-dark, transparent); }



    /* Borde fijo muy fino del color de los botones (#ed1c24) a todas las tarjetas/etiquetas */
    .tarjeta, .service-card, .contact-card, .logro-box, .client-card, .testimonial-card, .blog-card-home, .accordion-item, .etiqueta, .badge, .tag {
      border: 1px solid #ed1c24 !important;
    }
    .service-card-icon, .client-card-icon, .contact-card-icon {
      display: none !important;
    }


/* Iconos Redes Sociales Footer */
.social-links {
  display: flex !important;
  gap: 12px !important;
  margin-top: 16px !important;
}
.social-link, .social-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #ed1c24 !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
}
.social-link svg, .social-btn svg {
  fill: #ffffff !important;
  color: #ffffff !important;
  width: 18px !important;
  height: 18px !important;
}
.social-link:hover, .social-btn:hover {
  transform: translateY(-2px) !important;
  opacity: 0.9 !important;
}


/* Colores de URLs consistentes con la Home */
.site-footer p, .site-footer a, .site-footer span, .site-subfooter, .site-subfooter a {
  color: #FFFFFF !important;
}
.site-footer a:hover, .site-subfooter a:hover {
  color: #ed1c24 !important;
}
.nav-menu a, .nav-item {
  color: #E2E8F0 !important;
}
.nav-menu a:hover, .nav-item:hover {
  color: #ed1c24 !important;
}
.dropdown-menu a, .dropdown-item {
  color: #FFFFFF !important;
  text-decoration: none !important;
}
.dropdown-menu a:hover, .dropdown-item:hover {
  background: #ed1c24 !important;
  color: #FFFFFF !important;
}
/* URLs dentro de las tarjetas de contacto (sin negritas y color #111111 como en la home) */
.contact-card {
  background: #ffffff !important;
  border: 1px solid #ed1c24 !important;
  color: #111111 !important;
}
.contact-card h4 {
  color: #111111 !important;
}
.contact-card p, .contact-card p span, .contact-card p a {
  color: #111111 !important;
  font-weight: 400 !important;
  text-decoration: none !important;
}


/* Sección Contacto y Tarjetas consistentes con la Home */
#contacto, .bg-dark-primary#contacto {
  background-color: #ffffff !important;
}
#contacto .section-header h3, #contacto .section-header p {
  color: #111111 !important;
}
.contact-card, .contact-card.tarjeta {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  padding: 28px 18px !important;
  text-align: center !important;
  background: #ffffff !important;
  border: 1px solid #ed1c24 !important;
  color: #111111 !important;
}
.contact-card h4 {
  margin: 0 0 16px 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.contact-card p, .contact-card p span, .contact-card p a {
  color: #111111 !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  line-height: 1.6 !important;
  font-size: 14px !important;
}
.contact-card p {
  margin: 0 !important;
}


/* ========================================================
   COLORES DE LA HOME EN PÁGINAS INTERNAS (FONDO BLANCO)
   ======================================================== */
.bg-dark-primary {
  background-color: #ffffff !important;
}
.bg-dark-primary,
.bg-dark-primary .section-header h3,
.bg-dark-primary .section-header p,
.bg-dark-primary .about-text p,
.bg-dark-primary .service-content-p,
.bg-dark-primary .article-content-p,
.bg-dark-primary p,
.bg-dark-primary li,
.bg-dark-primary h1, .bg-dark-primary h2, .bg-dark-primary h3, .bg-dark-primary h4, .bg-dark-primary h5,
.bg-dark-primary strong, .bg-dark-primary b,
.bg-dark-primary span:not(.badge):not(.tag):not(.btn) {
  color: #111111 !important;
}

/* Tarjetas, formularios y acordeones en páginas internas */
.bg-dark-primary .service-card,
.bg-dark-primary .service-card.tarjeta,
.bg-dark-primary .tarjeta {
  background: #ffffff !important;
  border: 1px solid #ed1c24 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  color: #111111 !important;
}
.bg-dark-primary .service-card h4,
.bg-dark-primary .service-card-title {
  color: #111111 !important;
}
.bg-dark-primary .service-card-body p {
  color: #111111 !important;
}

/* FAQs Acordeón */
.bg-dark-primary .accordion-item {
  background: #ffffff !important;
  border: 1px solid #ed1c24 !important;
}
.bg-dark-primary .accordion-header {
  color: #111111 !important;
  background: #ffffff !important;
}
.bg-dark-primary .accordion-icon {
  color: #ed1c24 !important;
}
.bg-dark-primary .accordion-body {
  background: #ffffff !important;
}
.bg-dark-primary .accordion-body p {
  color: #111111 !important;
}

/* Formularios */
.bg-dark-primary .form-grid,
.bg-dark-primary .form-box-col,
.bg-dark-primary .form-content-col {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.bg-dark-primary .form-group label {
  color: #111111 !important;
}
.bg-dark-primary .form-control {
  background: #ffffff !important;
  border: 1px solid #ed1c24 !important;
  color: #111111 !important;
}
.bg-dark-primary .form-control::placeholder {
  color: #777777 !important;
}

/* Enlaces de contenido en páginas internas */
.bg-dark-primary a:not(.btn):not(.btn-primary):not(.btn-secondary) {
  color: #111111 !important;
}
.bg-dark-primary a:not(.btn):not(.btn-primary):not(.btn-secondary):hover {
  color: #ed1c24 !important;
}

/* Centrado de títulos y textos en el Hero Banner de todas las URLs */
.inner-hero {
  border-bottom: none !important;
  text-align: center !important;
  justify-content: center !important;
}
.inner-hero .container-1150 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
}
.inner-hero h1 {
  color: #FFFFFF !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.inner-hero p {
  color: #FFFFFF !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 750px !important;
}


/* ========================================================
   ESTRUCTURA, TIPOGRAFÍA Y DISTRIBUCIÓN EXACTA DEL HEADER (IDÉNTICO A LA HOME)
   ======================================================== */
/* ==========================================================================
   STICKY HEADER HOMOLOGADO EN TODAS LAS URLS (FONDO DEL FOOTER #020100)
   ========================================================================== */
.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 81px !important;
  min-height: 81px !important;
  max-height: 81px !important;
  z-index: 1000 !important;
  padding: 0 !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
}

.site-header.scrolled {
  background: #020100 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important;
  height: 81px !important;
  min-height: 81px !important;
  max-height: 81px !important;
  padding: 0 !important;
}

.site-header .container-1150,
.site-header .header-container {
  max-width: 1150px !important;
  width: 1150px !important;
  height: 81px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}

@media (max-width: 1180px) {
  .site-header .container-1150,
  .site-header .header-container {
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

.site-header .header-logo-col,
.site-header .logo-link {
  width: auto !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  height: 44px !important;
}

.site-header .header-logo-col img,
.site-header .logo-link img {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  display: block !important;
}

.site-header .logo-text-col {
  width: 156px !important;
  height: 44px !important;
  min-width: 156px !important;
  max-width: 156px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  line-height: 1.15 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.site-header .logo-row-1,
.site-header .logo-line-1,
.site-footer .logo-row-1,
.site-footer .logo-line-1 {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  line-height: 1.2 !important;
}
.site-header .logo-row-2,
.site-header .logo-line-2,
.site-footer .logo-row-2,
.site-footer .logo-line-2 {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  line-height: 1.2 !important;
}
.site-header .logo-row-3,
.site-header .logo-line-3,
.site-footer .logo-row-3,
.site-footer .logo-line-3 {
  font-size: 11px !important;
  font-weight: 300 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  line-height: 1.2 !important;
}

.site-header .nav-menu {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
  gap: 18px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  list-style: none !important;
}

.site-header .nav-item,
.site-header .nav-menu a,
.site-header .nav-menu > a,
.site-header .nav-menu > .nav-item,
.site-header .nav-menu > .nav-item > a {
  font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  color: #E2E8F0 !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
  display: inline-block !important;
  line-height: normal !important;
}

.site-header .nav-item:hover,
.site-header .nav-menu a:hover,
.site-header .nav-menu > a:hover,
.site-header .nav-menu > .nav-item > a:hover {
  color: #ed1c24 !important;
}

.site-header .dropdown-item,
.site-header .dropdown-menu a {
  font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  padding: 10px 20px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.site-header .header-action-col {
  width: auto !important;
  flex: 0 0 auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

.site-header .header-action-col a,
.site-header .header-action-col .btn,
.site-header .header-action-col .btn-primary,
.site-header a.btn-primary,
.site-header .btn-primary {
  width: 130px !important;
  height: 38px !important;
  min-width: 130px !important;
  max-width: 130px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  box-sizing: border-box !important;
  font-family: "Playfair Display", serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  border-radius: 8px !important;
  background: #ed1c24 !important;
  border: 1px solid #ed1c24 !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(237, 28, 36, 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 38px !important;
}

.site-header .header-action-col a:hover,
.site-header .header-action-col .btn:hover,
.site-header .header-action-col .btn-primary:hover {
  background: #c8141b !important;
  border-color: #c8141b !important;
  color: #FFFFFF !important;
}


/* ========================================================
   SUBFOOTER CENTRADO EN TODAS LAS URLS
   ======================================================== */
.site-subfooter {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding-top: 25px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  font-size: 13px !important;
  color: #FFFFFF !important;
}
.site-subfooter a {
  color: #FFFFFF !important;
  display: inline !important;
  margin-left: 6px !important;
}
.site-subfooter a:hover {
  color: #ed1c24 !important;
  text-decoration: underline !important;
}


/* ========================================================
   SUBMENÚ DESPLEGABLE VERTICAL Y OCULTO POR DEFECTO
   ======================================================== */
.dropdown-menu,
.site-header .dropdown-menu {
  display: flex !important;
  flex-direction: column !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  background: #020100 !important;
  min-width: 320px !important;
  width: max-content !important;
  border-radius: 8px !important;
  padding: 6px 0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  z-index: 1000 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(10px) !important;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease !important;
}

/* Puente invisible para evitar que se cierre al mover el cursor hacia el submenu */
.dropdown-menu::before,
.site-header .dropdown-menu::before {
  content: '' !important;
  position: absolute !important;
  top: -10px !important;
  left: 0 !important;
  right: 0 !important;
  height: 10px !important;
  background: transparent !important;
}

/* Mostrar verticalmente al pasar el cursor */
.has-dropdown:hover .dropdown-menu,
.dropdown:hover .dropdown-menu,
.site-header .has-dropdown:hover .dropdown-menu,
.site-header .dropdown:hover .dropdown-menu,
.nav-item:hover .dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}
.dropdown-menu a,
.dropdown-menu .dropdown-item,
.site-header .dropdown-menu a,
.site-header .dropdown-item {
  display: block !important;
  width: 100% !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #FFFFFF !important;
  text-align: left !important;
  white-space: nowrap !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
}
.dropdown-menu a:last-child,
.dropdown-menu .dropdown-item:last-child,
.site-header .dropdown-menu a:last-child,
.site-header .dropdown-item:last-child {
  border-bottom: none !important;
}
.dropdown-menu a:hover,
.dropdown-menu .dropdown-item:hover,
.site-header .dropdown-menu a:hover,
.site-header .dropdown-item:hover {
  background: #ed1c24 !important;
  color: #FFFFFF !important;
}


/* ========================================================
   CENTRADO DE H2 Y BOTÓN EN PÁGINAS DE /SERVICIOS/
   ======================================================== */
.service-card-box h2 {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

.service-card-box div[style*="text-align"],
.service-card-box .btn-container,
.service-card-box div:has(> a.btn) {
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.service-card-box a.btn,
.service-card-box .btn-primary,
.service-card-box .btn-magnetico {
  margin-left: auto !important;
  margin-right: auto !important;
  display: inline-block !important;
}


/* Ocultar imágenes de tarjetas en la sección de servicios */
.services-grid .service-card-img,
.service-card .service-card-img,
.service-card img.service-card-img {
  display: none !important;
}

.services-grid .service-card {
  border-radius: 16px !important;
  text-align: center !important;
}

.services-grid .service-card a.btn,
.services-grid .service-card .btn {
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.services-grid .service-card-title {
  text-align: center !important;
}

/* ==========================================================================
   HERO BANNER HOMOLOGADO EN TODAS LAS URLS (IMAGEN DE CURSOS HERO-2)
   ========================================================================== */
.inner-hero {
  background: linear-gradient(rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60)), url('/assets/images/hero-2-cursos-pc.webp?v=pc1') center/cover no-repeat !important;
}

/* ==========================================================================
   BOTONES VER MÁS Y SECUNDARIOS: ROJO #ed1c24 CON TEXTO BLANCO
   ========================================================================== */
.btn-secondary,
.service-card .btn,
.service-card .btn-secondary,
.service-card-body .btn,
.service-card-body .btn-secondary,
.services-grid .service-card .btn,
.services-grid .service-card .btn-secondary,
.blog-card-home .btn,
.blog-card-home .btn-secondary,
.tarjeta .btn-secondary,
a.btn.btn-secondary {
  background: #ed1c24 !important;
  color: #FFFFFF !important;
  border: 1px solid #ed1c24 !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 12px 24px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(237, 28, 36, 0.3) !important;
  transition: all 0.25s ease !important;
  font-size: 14px !important;
  cursor: pointer !important;
}

.btn-secondary:hover,
.service-card .btn:hover,
.service-card .btn-secondary:hover,
.service-card-body .btn:hover,
.service-card-body .btn-secondary:hover,
.services-grid .service-card .btn:hover,
.services-grid .service-card .btn-secondary:hover,
.blog-card-home .btn:hover,
.blog-card-home .btn-secondary:hover,
.tarjeta .btn-secondary:hover,
a.btn.btn-secondary:hover {
  background: #c81018 !important;
  border-color: #c81018 !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(237, 28, 36, 0.45) !important;
}

/* === BLOG CARDS: ELIMINAR ETIQUETAS Y FORZAR 3 RENGLONES EXACTOS === */
.blog-card span[style*="text-transform:uppercase"],
.blog-card .tag,
.blog-card .badge,
.blog-card .category,
article.blog-card > div > span:first-child {
  display: none !important;
}

.blog-card p {
  font-size: 15px !important;
  line-height: 1.5 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 4.5em !important;
  max-height: 4.5em !important;
  margin-bottom: 20px !important;
}

/* === BOTONES LEER MAS EN TARJETAS DE BLOG === */
/* replaced */

.blog-card .btn:hover,
.blog-card .btn-primary:hover,
.blog-card .btn-secondary:hover,
.blog-card a.btn:hover,
.blog-card a.btn-primary:hover {
  background: #c81018 !important;
  border-color: #c81018 !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(237, 28, 36, 0.45) !important;
}

/* === HOME BLOG CARDS: 2 RENGLONES TITULO, 3 RENGLONES PARRAFO, BOTON LEER ARTICULO === */
.blog-card-home {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 24px !important;
  border-radius: 10px !important;
}

.blog-card-home h4 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2.7em !important;
  max-height: 2.7em !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

.blog-card-home p {
  font-size: 15px !important;
  line-height: 1.5 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 4.5em !important;
  max-height: 4.5em !important;
  color: #4A5568 !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  flex: 1 !important;
}

/* Centrar botón de blog-card-home manteniendo tamaño exacto */
.blog-card-home .btn,
.blog-card-home a.btn,
.blog-card-home .btn-secondary {
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}



/* === BOTONES BLOG (HOME Y URL BLOG): CENTRADOS A LA MITAD DE SU TAMAÑO === */
.blog-card-home .btn,
.blog-card-home a.btn,
.blog-card-home .btn-secondary,
.blog-card .btn,
.blog-card a.btn,
.blog-card .btn-primary,
.blog-card .btn-secondary {
  background: #ed1c24 !important;
  color: #FFFFFF !important;
  border: 1px solid #ed1c24 !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  padding: 6px 14px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0.04em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: auto !important;
  width: auto !important;
  max-width: fit-content !important;
  box-shadow: 0 2px 8px rgba(237, 28, 36, 0.25) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.blog-card-home .btn:hover,
.blog-card-home a.btn:hover,
.blog-card-home .btn-secondary:hover,
.blog-card .btn:hover,
.blog-card a.btn:hover,
.blog-card .btn-primary:hover,
.blog-card .btn-secondary:hover {
  background: #c81018 !important;
  border-color: #c81018 !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(237, 28, 36, 0.35) !important;
}


/* ==========================================================================
   ALINEACIÓN CENTRADA DE TÍTULOS: HERO, SECCIONES, ARTÍCULOS Y DEMÁS
   ========================================================================== */

/* 1. TÍTULOS DEL HERO (HOME Y TODAS LAS PÁGINAS INTERNAS) */
.hero-content,
.hero .hero-content,
.slide-item .hero-content {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.slide-title,
.hero-content h1,
.hero-content h2,
.hero-title,
.hero h1,
.hero h2 {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.slide-desc,
.hero-content p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero-content .btn,
.hero-content a.btn,
.slide-item a.btn {
  margin-left: auto !important;
  margin-right: auto !important;
  align-self: center !important;
}

/* Inner Hero en todas las páginas internas (servicios, blog, quiénes somos, etc.) */
.inner-hero,
.page-hero,
.hero-section {
  text-align: center !important;
  justify-content: center !important;
  display: flex !important;
  align-items: center !important;
}

.inner-hero .container-1150,
.page-hero .container-1150 {
  width: 100% !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.inner-hero h1,
.page-hero h1,
.inner-hero h2,
.page-hero h2 {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

.inner-hero p,
.page-hero p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 2. TÍTULOS DE SECCIONES (TODAS LAS URLs) */
.section-header,
.section-title-wrap {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.section-header h1,
.section-header h2,
.section-header h3,
.section-header h4,
.section-title,
section > .container-1150 > h2,
section > .container-1150 > h3 {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.section-header h2::after,
.section-header h3::after {
  margin-left: auto !important;
  margin-right: auto !important;
}

.section-header p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Títulos de tarjetas en secciones */
.service-card h4,
.service-card-title,
.service-card-box h4 {
  text-align: center !important;
}

.contact-card h4 {
  text-align: center !important;
}

.client-card h4 {
  text-align: center !important;
}

.logro-box h4,
.logro-box h3 {
  text-align: center !important;
}

.testimonial-card h4 {
  text-align: center !important;
}

.cta-banner-section h3,
.form-box-col h4,
.cta-box h3,
.articulo-cta-box h3 {
  text-align: center !important;
}

.about-text h3,
.about-text h4 {
  text-align: center !important;
}

.faq-section h3,
.faq-section h4 {
  text-align: center !important;
}

/* 3. TÍTULOS DE ARTÍCULOS (BLOG CATALOG Y ARTÍCULOS INDIVIDUALES) */
/* En tarjetas de blog (Home y URL /blog/) */
.blog-card h3,
.blog-card h3 a,
.blog-card-title,
.blog-card-title a {
  text-align: center !important;
  display: block !important;
}

.blog-card-home h4,
.blog-card-home h4 a {
  text-align: center !important;
  display: block !important;
}

/* Títulos y subtítulos dentro de las páginas de artículos individuales */
.articulo-contenido h1,
.articulo-contenido h2,
.articulo-contenido h3,
.articulo-contenido h4,
.articulo-seccion h2,
.articulo-seccion h3,
.articulo-seccion h4,
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4 {
  text-align: center !important;
}

/* Footer: títulos de columnas */
.footer-col h4 {
  text-align: center !important;
}

.footer-col h4::after {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Centrar párrafos de todas las tarjetas de todos los artículos */
.blog-card p,
.blog-card-home p,
article.blog-card p,
div.blog-card-home p,
.blog-card div > p,
.blog-card-home div > p {
  text-align: center !important;
}


/* ==========================================================================
   CENTRAR TEXTO DE TESTIMONIOS Y DE CADA PERSONA
   ========================================================================== */
.testimonial-card,
.testimonials-grid .testimonial-card {
  text-align: center !important;
  align-items: center !important;
}

.testimonial-quote,
.testimonial-card .testimonial-quote,
.testimonial-card p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.testimonial-author,
.testimonial-card .testimonial-author {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

.testimonial-author h5,
.testimonial-author h4,
.testimonial-author h6 {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

.testimonial-author span,
.testimonial-author p,
.testimonial-author small {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  width: 100% !important;
}


/* ==========================================================================
   CENTRAR PÁRRAFOS DEBAJO DE CADA TÍTULO EN TARJETAS
   ========================================================================== */
.client-card p,
.contact-card p,
.service-card p,
.service-card-body p,
.logro-box p,
.tarjeta p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ===== HERO SLIDER: ALTURA 550PX, TÍTULOS 60PX (2 RENGLONES), PÁRRAFO 25PX (2 RENGLONES), BOTÓN 152X44 (15PX) ===== */
.hero-slider-section,
.hero-slider {
  position: relative !important;
  height: 550px !important;
  min-height: 550px !important;
  max-height: 550px !important;
  width: 100% !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
}

.slide-item {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 550px !important;
  min-height: 550px !important;
  max-height: 550px !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease-in-out, visibility 0.8s;
  background-size: cover;
  background-position: center;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 40px !important;
  box-sizing: border-box !important;
}

.slide-item.active {
  opacity: 1 !important;
  visibility: visible !important;
}

.hero-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.6) !important;
}

.hero-content {
  position: relative !important;
  z-index: 10 !important;
  max-width: 1150px !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 auto !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.slide-title {
  font-size: 60px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: #FFFFFF !important;
  margin-bottom: 12px !important;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
  text-align: center !important;
}

.slide-desc {
  font-size: 20px !important;
  line-height: 1.3 !important;
  color: #E2E8F0 !important;
  margin-bottom: 20px !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero-slider-section .hero-content .btn,
.hero-slider-section .hero-content a.btn,
.hero-slider-section .slide-item a.btn,
.hero-slider-section a.btn-magnetico {
  width: 152px !important;
  min-width: 152px !important;
  max-width: 152px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  background: #ed1c24 !important;
  border: 1px solid #ed1c24 !important;
  color: #ffffff !important;
  border-radius: 6px !important;
}

.slider-dots {
  position: absolute !important;
  bottom: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  gap: 8px !important;
  z-index: 20 !important;
}

/* ==========================================================================
   SECCIÓN NUESTROS SERVICIOS (HOMEPAGE) - EXACTO USUARIO
   ========================================================================== */
#servicios,
#servicios.reveal {
  height: 501px !important;
  min-height: 501px !important;
  max-height: 501px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
  transform: none !important;
}

#servicios .container-1150 {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 auto !important;
}

#servicios .section-header {
  margin-bottom: 24px !important;
  text-align: center !important;
}

#servicios .section-header h3 {
  font-size: 30px !important;
  line-height: 1.2 !important;
  margin: 0 0 10px 0 !important;
  text-align: center !important;
}

#servicios .section-header p {
  font-size: 16px !important;
  line-height: 1.4 !important;
  max-width: 650px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

#servicios .services-grid {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 24px !important;
  width: 100% !important;
}

#servicios .service-card,
#servicios .services-grid .service-card,
#servicios .service-card.tarjeta {
  width: 216px !important;
  min-width: 216px !important;
  max-width: 216px !important;
  height: 166px !important;
  min-height: 166px !important;
  max-height: 166px !important;
  padding: 16px 12px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  text-align: center !important;
}

#servicios .service-card h4,
#servicios .service-card-title,
#servicios .service-card h4 br + span {
  font-size: 16px !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  text-align: center !important;
}

#servicios .service-card a.btn,
#servicios .service-card .btn,
#servicios .service-card .btn-secondary,
#servicios .service-card.tarjeta .btn-secondary,
#servicios .services-grid .service-card a.btn.btn-secondary,
#servicios a.btn.btn-secondary,
#servicios .service-card a.btn.btn-secondary {
  width: 130px !important;
  min-width: 130px !important;
  max-width: 130px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 0 !important;
  margin: 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  text-align: center !important;
}