@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600;700&family=Roboto:wght@300;400;500;700&display=swap');



/* ==========================================================

   DICTAMEN ESTRUCTURAL QUERÉTARO - HOJA DE ESTILOS

   Paleta de 4 colores:

   Primario: #2C3E50 (Azul Noche)

   Acento: #E67E22 (Naranja Cobre)

   Secundario: #BDC3C7 (Gris Plata)

   Neutro: #F8FAFC (Blanco Roto)

   Ancho máximo: 1150px

========================================================== */



:root {

  /* Variables Oficiales paleta-por-servicio (construccion_ingenieria) */

  --c-primario: #1F64B1;

  --c-secundario: #F2A900;

  --c-acento: #4FC3F7;

  --c-fondo: #080F16;

  --c-tarjeta: #0F1B29;

  --c-cyan: #4FC3F7;

  --color-primario: #1F64B1;

  --color-secundario: #F2A900;

  --color-acento: #4FC3F7;

  --color-fondo: #080F16;

  --color-texto: #F1F5F9;

  --color-tarjeta: #0F1B29;

  --color-borde: #1F64B1;

  --color-acento-hover: #38bdf8;

  --color-muted: #94A3B8;



  /* Mapeo de compatibilidad para estilos existentes */

  --primary: #1F64B1;

  --primary-dark: #14447A;

  --accent: #4FC3F7;

  --accent-hover: #38bdf8;

  --secondary: #F2A900;

  --text-dark: #F1F5F9;

  --text-muted: #94A3B8;

  --neutral: #0F1B29;

  --white: #080F16;

  --card-bg: #0F1B29;

  --card-border: rgba(31, 100, 177, 0.35);



  /* Familias tipográficas Google Fonts */

  --font-titulo: 'Oswald', ui-sans-serif, system-ui, sans-serif;

  --font-texto: 'Roboto', ui-sans-serif, system-ui, sans-serif;

}



* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



body {

  background-color: var(--color-fondo);

  line-height: 1.6;

  overflow-x: hidden;

}



.max-w-custom {

  max-width: 1150px;

  margin-left: auto;

  margin-right: auto;

  padding-left: 20px;

  padding-right: 20px;

}



/* Header Transparente */

.site-header {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 1000;

  background: transparent;

  transition: all 0.3s ease;

  padding: 16px 0;

}



.site-header.scrolled {

  background: rgba(44, 62, 80, 0.95);

  backdrop-filter: blur(10px);

  padding: 10px 0;

  box-shadow: 0 4px 20px rgba(0,0,0,0.15);

}



.site-header.inner-page-header {
  background: transparent !important;
  position: fixed !important;
  padding: 16px 0 !important;
}



/* Logo Nativo HTML Flexbox */

.logo-block {

  display: flex;

  align-items: center;

  gap: 12px;

  text-decoration: none;

  width: 230px;

  min-width: 190px;

  max-width: 260px;

}



.logo-text-col {

  display: flex;

  flex-direction: column;

  justify-content: center;

  line-height: 1.05;

}



.logo-line-1 {

  font-size: 13px;

  font-weight: 800;

  color: #FFFFFF;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}



.logo-line-2 {

  font-size: 13px;

  font-weight: 800;

  color: var(--accent);

  text-transform: uppercase;

  letter-spacing: 0.5px;

}



.logo-line-3 {

  font-size: 11px;

  font-weight: 300;

  color: var(--secondary);

  text-transform: uppercase;

  letter-spacing: 1px;

}



/* Menú de Navegación */

.nav-menu {

  display: flex;

  align-items: center;

  gap: 22px;

  list-style: none;

}



.nav-link {

  color: #FFFFFF;

  text-decoration: none;

  font-size: 14px;

  font-weight: 500;

  transition: color 0.2s ease;

  position: relative;

  padding: 8px 0;

}



.nav-link:hover {

  color: var(--accent);

}



.dropdown-container {

  position: relative;

}



.dropdown-menu {

  position: absolute;

  top: 100%;

  left: 0;

  background: var(--primary);

  min-width: 260px;

  border-radius: 8px;

  box-shadow: 0 10px 30px rgba(0,0,0,0.25);

  list-style: none;

  padding: 10px 0;

  opacity: 0;

  visibility: hidden;

  transform: translateY(10px);

  transition: all 0.25s ease;

  border: 1px solid rgba(255,255,255,0.1);

}



.dropdown-container:hover .dropdown-menu {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);

}



.dropdown-item a {

  display: block;

  padding: 10px 20px;

  color: #FFFFFF;

  text-decoration: none;

  font-size: 13px;

  font-weight: 500;

  transition: background 0.2s, color 0.2s;

}



.dropdown-item a:hover {

  background: rgba(230, 126, 34, 0.15);

  color: var(--accent);

}



.btn-header {

  background: var(--accent);

  color: #FFFFFF;

  padding: 10px 22px;

  border-radius: 6px;

  text-decoration: none;

  font-size: 14px;

  font-weight: 700;

  transition: all 0.25s ease;

  display: inline-block;

  border: 2px solid var(--accent);

}

.btn-header {

  background: var(--color-secundario) !important;

  color: #080F16 !important;

  border: 2px solid var(--color-secundario) !important;

  font-family: var(--font-titulo) !important;

  font-weight: 700 !important;

  text-transform: uppercase !important;

}

.btn-header:hover {

  background: transparent !important;

  color: var(--color-secundario) !important;

}



.btn-header:hover {

  background: transparent;

  color: #FFFFFF;

}



/* HERO SLIDER 550px */

.hero-slider {

  position: relative;

  height: 550px;

  overflow: hidden;

  background: var(--primary);

}



.hero-slide {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 550px;

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.8s ease-in-out, visibility 0.8s;

  background-size: cover;

  background-position: center;

  display: flex;

  align-items: center;

  justify-content: flex-start;

}



.hero-slide.active {

  opacity: 1;

  visibility: visible;

}



.hero-overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.5) !important;

}



.hero-container {

  width: 100%;

  position: relative;

  z-index: 10;

}



.hero-content {

  position: relative;

  z-index: 10;

  max-width: 780px;

  color: #FFFFFF;

  padding-top: 0; margin-top: -35px;

  text-align: left;

  margin-left: 0;

  margin-right: auto;

}



.max-w-custom.hero-content {

  width: 100%;

  max-width: 1150px;

  text-align: left;

}



.hero-title {

  font-size: 60px;

  line-height: 1.1;

  font-weight: 800;

  color: #FFFFFF;

  margin-bottom: 18px;

  letter-spacing: -1px;

  text-align: left;

}



.hero-desc {

  font-size: 17px;

  line-height: 1.5;

  color: #FFFFFF !important;

  margin-bottom: 28px;

  max-width: 680px;

  text-align: left;

  margin-left: 0;

}



.hero-btn {

  background: var(--accent);

  color: #FFFFFF;

  padding: 14px 34px;

  border-radius: 6px;

  text-decoration: none;

  font-size: 16px;

  font-weight: 700;

  transition: all 0.25s ease;

  display: inline-block;

  box-shadow: 0 4px 15px rgba(230, 126, 34, 0.4);

}

.hero-btn {

  background: var(--color-secundario) !important;

  color: #080F16 !important;

  font-family: var(--font-titulo) !important;

  font-weight: 700 !important;

  text-transform: uppercase !important;

  box-shadow: 0 4px 15px rgba(242, 169, 0, 0.35) !important;

}

.hero-btn:hover {

  background: #e59f00 !important;

  color: #080F16 !important;

}



.hero-btn:hover {

  background: var(--accent-hover);

  transform: translateY(-2px);

  color: #FFFFFF;

}



.hero-dots {

  position: absolute;

  bottom: 25px;

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  gap: 10px;

  z-index: 20;

}



.hero-dot {

  width: 14px;

  height: 14px;

  border-radius: 50%;

  background: rgba(255,255,255,0.4);

  cursor: pointer;

  transition: all 0.3s;

}



.hero-dot.active {

  background: var(--accent);

  width: 32px;

  border-radius: 10px;

}



/* Secciones Generales */

.section-padding {

  padding: 85px 0;

}



.section-title {

  font-size: 34px;

  font-weight: 800;

  color: var(--primary);

  margin-bottom: 10px;

  text-align: center;

  position: relative;

}



.section-desc {

  font-size: 17px;

  color: var(--text-muted);

  text-align: center;

  max-width: 720px;

  margin: 0 auto 50px auto;

  line-height: 1.6;

}



/* 3. Tarjetas de Servicios */

.services-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 24px;

}



.service-card {

  background: var(--card-bg);

  border: 1px solid var(--card-border);

  border-radius: 10px;

  padding: 30px 22px;

  text-align: center;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  min-height: 250px;

  box-shadow: 0 4px 12px rgba(0,0,0,0.04);

  transition: all 0.3s ease;

}



.service-card:hover {

  transform: translateY(-6px);

  box-shadow: 0 12px 28px rgba(44, 62, 80, 0.12);

  border-color: var(--accent);

}



.service-card-title {

  font-size: 18px;

  font-weight: 700;

  color: var(--primary);

  line-height: 1.35;

  margin-bottom: 25px;

}



.btn-card {

  background: var(--primary);

  color: #FFFFFF;

  padding: 10px 24px;

  border-radius: 6px;

  text-decoration: none;

  font-size: 14px;

  font-weight: 600;

  transition: all 0.2s ease;

  display: inline-block;

  align-self: center;

}

.btn-card {

  background: var(--color-primario) !important;

  color: #FFFFFF !important;

  border: 1px solid var(--color-acento) !important;

  font-family: var(--font-titulo) !important;

}

.btn-card:hover {

  background: var(--color-acento) !important;

  color: #080F16 !important;

}



.service-card:hover .btn-card {

  background: var(--accent);

}

.btn-card {

  background: var(--color-primario) !important;

  color: #FFFFFF !important;

  border: 1px solid var(--color-acento) !important;

  font-family: var(--font-titulo) !important;

}

.btn-card:hover {

  background: var(--color-acento) !important;

  color: #080F16 !important;

}



/* 4. Quiénes Somos */

.about-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 45px;

  align-items: center;

}



.about-img {

  width: 100%;

  height: 380px;

  object-fit: cover;

  border-radius: 10px;

  box-shadow: 0 12px 30px rgba(0,0,0,0.12);

}



.about-text p {

  color: var(--text-dark);

  font-size: 16px;

  line-height: 1.7;

  margin-bottom: 18px;

}



/* 5. Contáctanos Cards */

.contact-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 22px;

}



.contact-card {

  background: var(--neutral);

  border: 1px solid var(--card-border);

  border-radius: 10px;

  padding: 26px 18px;

  text-align: center;

  transition: all 0.3s ease;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

}



.contact-card:hover {

  border-color: var(--accent);

  background: var(--card-bg);

  transform: translateY(-4px);

  box-shadow: 0 10px 24px rgba(0,0,0,0.06);

}



.contact-card-icon {

  width: 48px;

  height: 48px;

  background: rgba(230, 126, 34, 0.12);

  color: var(--accent);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 16px auto;

  font-size: 20px;

}



.contact-card-title {

  font-size: 16px;

  font-weight: 700;

  color: var(--primary);

  margin-bottom: 12px;

}



.contact-card-lines {

  font-size: 13px;

  color: var(--text-muted);

  line-height: 1.45;

  height: 58px;

  display: flex;

  flex-direction: column;

  justify-content: center;

}



.email-special-size {

  font-size: 8px !important;

  word-break: break-all;

  display: block;

}



/* 6. Más Informes Formulario */

.form-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 45px;

  align-items: center;

}



.form-img {

  width: 100%;

  height: 450px;

  object-fit: cover;

  border-radius: 10px;

  box-shadow: 0 12px 30px rgba(0,0,0,0.1);

}



.form-wrapper {

  background: var(--card-bg);

  border: 1px solid var(--card-border);

  border-radius: 10px;

  padding: 35px;

  box-shadow: 0 10px 30px rgba(0,0,0,0.06);

}



.form-group {

  margin-bottom: 18px;

}



.form-label {

  display: block;

  font-size: 13px;

  font-weight: 600;

  color: var(--primary);

  margin-bottom: 6px;

}



.form-input, .form-textarea {

  width: 100%;

  padding: 12px 16px;

  border: 1px solid #CBD5E1;

  border-radius: 6px;

  font-size: 14px;

  color: var(--text-dark);

  transition: border-color 0.2s;

  background: var(--neutral);

}



.form-input:focus, .form-textarea:focus {

  outline: none;

  border-color: var(--accent);

  background: var(--card-bg);

}



.form-btn {

  background: var(--accent);

  color: #FFFFFF;

  width: 100%;

  padding: 14px;

  border: none;

  border-radius: 6px;

  font-size: 16px;

  font-weight: 700;

  cursor: pointer;

  transition: all 0.25s;

}



.form-btn:hover {

  background: var(--accent-hover);

}



/* 7. Nuestros Logros */

.achievements-bg {

  background: var(--primary);

  color: #FFFFFF;

}



.achievements-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 30px;

  text-align: center;

}



.achievement-card {

  padding: 30px 20px;

}



.achievement-number {

  font-size: 56px;

  font-weight: 800;

  color: var(--accent);

  line-height: 1;

  margin-bottom: 12px;

}



.achievement-label {

  font-size: 18px;

  font-weight: 600;

  color: #FFFFFF;

}



/* 8. Nuestros Clientes */

.clients-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 28px;

}



.client-card {

  background: var(--neutral);

  border: 1px solid var(--card-border);

  border-radius: 10px;

  padding: 32px 24px;

  text-align: center;

  transition: all 0.3s;

}



.client-card:hover {

  background: var(--card-bg);

  border-color: var(--accent);

  transform: translateY(-4px);

  box-shadow: 0 10px 25px rgba(0,0,0,0.06);

}



.client-icon {

  font-size: 32px;

  color: var(--accent);

  margin-bottom: 16px;

}



.client-title {

  font-size: 19px;

  font-weight: 700;

  color: var(--primary);

  margin-bottom: 12px;

}



.client-desc {

  font-size: 14px;

  color: var(--text-muted);

  line-height: 1.6;

}



/* 9. Preguntas Frecuentes Acordeón */

.faq-container {

  max-width: 860px;

  margin: 0 auto;

}



.faq-item {

  border: 1px solid var(--card-border);

  border-radius: 8px;

  margin-bottom: 12px;

  overflow: hidden;

  background: var(--card-bg);

}



.faq-question {

  width: 100%;

  text-align: left;

  padding: 18px 22px;

  background: var(--neutral);

  border: none;

  font-size: 16px;

  font-weight: 700;

  color: var(--primary);

  cursor: pointer;

  display: flex;

  justify-content: space-between;

  align-items: center;

  transition: background 0.2s;

}



.faq-question:hover {

  background: #EEF2F6;

  color: var(--accent);

}



.faq-answer {

  padding: 0 22px;

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.35s ease, padding 0.35s ease;

  font-size: 15px;

  color: var(--text-dark);

  line-height: 1.6;

  background: var(--card-bg);

}



.faq-item.active .faq-answer {

  padding: 20px 22px;

  max-height: 400px;

}



.faq-icon {

  transition: transform 0.3s;

  font-size: 18px;

  color: var(--accent);

}



.faq-item.active .faq-icon {

  transform: rotate(180deg);

}



/* 10. Testimonios */

.testimonials-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 28px;

}



.testimonial-card {

  background: var(--card-bg);

  border: 1px solid var(--card-border);

  border-radius: 10px;

  padding: 32px 24px;

  box-shadow: 0 6px 18px rgba(0,0,0,0.04);

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}



.testimonial-quote {

  font-size: 15px;

  font-style: italic;

  color: var(--text-dark);

  line-height: 1.6;

  margin-bottom: 22px;

}



.testimonial-author {

  font-size: 15px;

  font-weight: 700;

  color: var(--primary);

}



.testimonial-company {

  font-size: 13px;

  color: var(--accent);

  font-weight: 600;

}



/* 11. Blog Grid */

.blog-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 28px;

}



.blog-card {

  background: var(--card-bg);

  border: 1px solid var(--card-border);

  border-radius: 10px;

  padding: 28px 22px;

  box-shadow: 0 4px 14px rgba(0,0,0,0.04);

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  min-height: 180px;

  transition: all 0.3s;

}



.blog-card:hover {

  transform: translateY(-4px);

  border-color: var(--accent);

  box-shadow: 0 10px 24px rgba(0,0,0,0.08);

}



.blog-card-title {

  font-size: 16px;

  font-weight: 700;

  color: var(--primary);

  line-height: 1.4;

  margin-bottom: 20px;

}



/* 12. Footer */

.site-footer {

  background: var(--primary);

  color: #FFFFFF;

  padding: 70px 0 30px 0;

}



.footer-grid {

  display: grid;

  grid-template-columns: 1.5fr 1fr 1fr;

  gap: 40px;

  margin-bottom: 45px;

}



.footer-col-title {

  font-size: 17px;

  font-weight: 700;

  color: var(--accent);

  margin-bottom: 18px;

}



.footer-desc {

  font-size: 14px;

  color: #CBD5E1;

  line-height: 1.6;

  margin-top: 14px;

  margin-bottom: 20px;

}



.social-links {

  display: flex;

  gap: 12px;

}



.social-icon {

  width: 36px;

  height: 36px;

  background: rgba(255,255,255,0.1);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #FFFFFF;

  text-decoration: none;

  font-size: 15px;

  transition: all 0.2s;

}



.social-icon:hover {

  background: var(--accent);

  transform: translateY(-2px);

}



.footer-links {

  list-style: none;

}



.footer-links li {

  margin-bottom: 10px;

}



.footer-links a {

  color: #CBD5E1;

  text-decoration: none;

  font-size: 14px;

  transition: color 0.2s;

}



.footer-links a:hover {

  color: var(--accent);

}



.footer-contact-item {

  display: flex;

  align-items: flex-start;

  gap: 12px;

  margin-bottom: 14px;

  font-size: 13px;

  color: #CBD5E1;

}



.footer-contact-item i {

  color: var(--accent);

  margin-top: 3px;

}



/* 13. Subfooter */

.site-subfooter {

  border-top: 1px solid rgba(255,255,255,0.1);

  padding: 20px 0;

  text-align: center;

  font-size: 13px;

  color: var(--secondary);

}



.subfooter-link {

  color: var(--accent);

  text-decoration: none;

}



.subfooter-link:hover {

  text-decoration: underline;

}



/* BOTONES FLOTANTES CON LATIDO INFINITO */

@keyframes infiniteHeartbeat {

  0% { transform: scale(1); }

  14% { transform: scale(1.12); }

  28% { transform: scale(1); }

  42% { transform: scale(1.12); }

  70% { transform: scale(1); }

}



.floating-whatsapp {

  position: fixed !important;

  bottom: 30px !important;

  left: 30px !important;

  width: 60px !important;

  height: 60px !important;

  background-color: #25D366 !important;

  border-radius: 50% !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  color: #FFFFFF !important;

  text-decoration: none !important;

  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45) !important;

  z-index: 99999 !important;

  animation: pulseWhatsAppInfinite 2s infinite ease-in-out !important;

}



.floating-whatsapp:hover {

  transform: scale(1.08);

  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.6) !important;

}



.floating-whatsapp svg {

  width: 34px !important;

  height: 34px !important;

  fill: #FFFFFF !important;

  display: block !important;

}



.floating-veronica {

  position: fixed;

  bottom: 30px;

  right: 30px;

  width: 60px;

  height: 60px;

  border-radius: 50%;

  background: var(--accent);

  border: 3px solid #FFFFFF;

  box-shadow: 0 6px 22px rgba(230, 126, 34, 0.5);

  z-index: 9999;

  cursor: pointer;

  overflow: hidden;

  animation: infiniteHeartbeat 2.4s infinite ease-in-out;

}



.floating-veronica img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 50%;

}



/* Modal Chat Verónica Gómez */

.chat-modal {

  position: fixed;

  bottom: 100px;

  right: 30px;

  width: 360px;

  background: var(--card-bg);

  border-radius: 14px;

  box-shadow: 0 12px 40px rgba(0,0,0,0.2);

  z-index: 10000;

  overflow: hidden;

  display: none;

  flex-direction: column;

  border: 1px solid var(--card-border);

  animation: fadeIn 0.3s ease;

}



.chat-modal.active {

  display: flex;

}



@keyframes fadeIn {

  from { opacity: 0; transform: translateY(15px); }

  to { opacity: 1; transform: translateY(0); }

}



.chat-header {

  background: var(--primary);

  color: #FFFFFF;

  padding: 16px;

  display: flex;

  align-items: center;

  gap: 12px;

  position: relative;

}



.chat-header-avatar {

  width: 46px;

  height: 46px;

  border-radius: 50%;

  object-fit: cover;

  border: 2px solid var(--accent);

}



.chat-header-info h4 {

  font-size: 15px;

  font-weight: 700;

  margin: 0;

}



.chat-header-info p {

  font-size: 11px;

  color: var(--secondary);

  margin: 0;

}



.chat-close-btn {

  position: absolute;

  top: 14px;

  right: 14px;

  background: transparent;

  border: none;

  color: #FFFFFF;

  font-size: 20px;

  cursor: pointer;

}



.chat-body {

  padding: 18px;

  background: var(--neutral);

  max-height: 280px;

  overflow-y: auto;

}



.chat-message {

  background: var(--card-bg);

  padding: 12px 16px;

  border-radius: 10px;

  font-size: 14px;

  color: var(--text-dark);

  line-height: 1.5;

  box-shadow: 0 2px 8px rgba(0,0,0,0.04);

}



.chat-footer {

  padding: 14px;

  background: var(--card-bg);

  border-top: 1px solid #E2E8F0;

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.chat-action-btn {

  background: var(--accent);

  color: #FFFFFF;

  border: none;

  border-radius: 6px;

  padding: 10px;

  font-size: 13px;

  font-weight: 700;

  text-decoration: none;

  text-align: center;

  display: block;

}



.chat-action-btn.secondary {

  background: var(--primary);

}



/* Responsive */

@media (max-width: 992px) {

  .hero-title { font-size: 42px; }

  .services-grid, .contact-grid { grid-template-columns: repeat(2, 1fr); }

  .about-grid, .form-grid, .footer-grid, .achievements-grid, .clients-grid, .testimonials-grid, .blog-grid { grid-template-columns: 1fr; }

  .about-img, .form-img { height: 280px; }

  .nav-menu { display: none; }

  .hero-slider { height: 500px; }

}



h1, h2, h3, h4, h5, h6, .hero-title, .section-title, .logo-line-1, .logo-line-2, .logo-line-3 {

  font-family: var(--font-titulo) !important;

  letter-spacing: 0.5px;

}



/* Ajustes adicionales paleta-por-servicio */

.form-input, .form-textarea, .form-select {

  background: #080F16 !important;

  color: #F1F5F9 !important;

  border: 1px solid var(--card-border) !important;

}

.form-input:focus, .form-textarea:focus {

  border-color: var(--color-acento) !important;

  outline: none;

}

.faq-question {

  background: var(--card-bg) !important;

  color: #F1F5F9 !important;

}

.faq-item.active .faq-question {

  color: var(--color-acento) !important;

}

.faq-answer {

  background: #0a1420 !important;

  color: #CBD5E1 !important;

}

.site-header.scrolled {

  background: rgba(8, 15, 22, 0.96) !important;

  border-bottom: 1px solid rgba(79, 195, 247, 0.2);

}

.dropdown-menu {

  background: var(--card-bg) !important;

  border: 1px solid var(--card-border) !important;

}

.dropdown-item a {

  color: #F1F5F9 !important;

}

.dropdown-item a:hover {

  background: rgba(79, 195, 247, 0.15) !important;

  color: var(--color-acento) !important;

}



.section-desc, .about-desc, .footer-desc {

  color: #94A3B8 !important;

}

.hero-desc {

  color: #FFFFFF !important;

}



@keyframes pulseWhatsAppInfinite {

  0% {

    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.75), 0 6px 20px rgba(37, 211, 102, 0.45);

    transform: scale(1);

  }

  50% {

    box-shadow: 0 0 0 18px rgba(37, 211, 102, 0), 0 8px 25px rgba(37, 211, 102, 0.6);

    transform: scale(1.06);

  }

  100% {

    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0), 0 6px 20px rgba(37, 211, 102, 0.45);

    transform: scale(1);

  }

}





/* OVERRIDE - AJUSTES EXACTOS SEGÚN ESPECIFICACIÓN DEL USUARIO */



:root {

  --color-primario: #343a1a !important;

  --color-secundario: #2b9720 !important;

  --color-acento: #a80874 !important;

  --color-fondo: #ffffff !important;

  --color-texto: #111111 !important;

  --color-tarjeta: #ffffff !important;

  --color-borde: #a80874 !important;

  --color-acento-hover: #820659 !important;

  --color-muted: #111111 !important;



  --primary: #343a1a !important;

  --primary-dark: #242912 !important;

  --accent: #a80874 !important;

  --accent-hover: #820659 !important;

  --secondary: #2b9720 !important;

  --text-dark: #111111 !important;

  --text-muted: #111111 !important;

  --neutral: #ffffff !important;

  --white: #ffffff !important;

  --card-bg: #ffffff !important;

  --card-border: #a80874 !important;

}



/* Quitar fondo negro de fondo en scroll */

body {

  background-color: #ffffff !important;

  color: #111111 !important;

}



/* Header Sticky y Footer en #343a1a */

.site-header.scrolled {

  background: #343a1a !important;

  backdrop-filter: none !important;

  box-shadow: 0 4px 20px rgba(52, 58, 26, 0.35) !important;

  border-bottom: 1px solid rgba(168, 8, 116, 0.3) !important;

}



.site-footer {

  background: #343a1a !important;

  color: #ffffff !important;

}

.site-subfooter {

  background: #343a1a !important;

  color: #ffffff !important;

  text-align: center !important;

}

.site-subfooter a {

  color: #ffffff !important;

}



/* Títulos del Logo siempre en Blanco */

.logo-line-1, .logo-line-2, .logo-line-3 {

  color: #ffffff !important;

}



/* Menú del Header: un solo renglón y centrado */

.nav-link {

  white-space: nowrap !important;

  color: #ffffff !important;

}

.nav-link:hover {

  color: #a80874 !important;

}

.nav-menu li a {

  white-space: nowrap !important;

}



/* Dropdown Menu */

.dropdown-menu {

  background: #343a1a !important;

  border: 1px solid #a80874 !important;

}

.dropdown-item a {

  color: #ffffff !important;

  white-space: nowrap !important;

}

.dropdown-item a:hover {

  background: rgba(168, 8, 116, 0.25) !important;

  color: #ffffff !important;

}



/* Todos los Botones y elementos menores en #a80874 */

.hero-btn, .btn-header, .btn-card, .form-btn, .chat-action-btn {

  background: #a80874 !important;

  background-color: #a80874 !important;

  color: #ffffff !important;

  border: 1px solid #a80874 !important;

  box-shadow: none !important;

}

.hero-btn:hover, .btn-header:hover, .btn-card:hover, .form-btn:hover {

  background: #820659 !important;

  background-color: #820659 !important;

  border-color: #820659 !important;

  color: #ffffff !important;

}

.hero-dot.active {

  background: #a80874 !important;

}



/* Transparencia del Hero: Negro 60% */

.hero-overlay {

  background: rgba(0, 0, 0, 0.60) !important;

}



/* Hero: Párrafos de 2 renglones en blanco */

.hero-desc {

  color: #ffffff !important;

}



/* No poner ninguna barra de llamado a la acción hasta abajo */

.barra-cta {

  display: none !important;

}



/* No poner ningún icono en ninguna tarjeta */

.service-card i, .contact-card-icon, .client-icon, .card-icon, .testimonial-card i, .blog-card i {

  display: none !important;

}



/* Borde fijo muy fino de #a80874 en todas las tarjetas */

.service-card, .contact-card, .client-card, .testimonial-card, .blog-card, .tarjeta, .achievement-card {

  border: 1px solid #a80874 !important;

}



/* No poner ninguna etiqueta en ninguna sección */

.badge, .tag, .etiqueta, .rotativo-etiqueta {

  display: none !important;

}



/* Campos de Formulario Más Informes: fondo blanco */

.form-input, .form-textarea, .form-select {

  background: #ffffff !important;

  background-color: #ffffff !important;

  color: #111111 !important;

  border: 1px solid #cbd5e1 !important;

}

.form-input:focus, .form-textarea:focus {

  border-color: #a80874 !important;

  background: #ffffff !important;

}



/* Iconos de Redes Sociales en Footer */

.social-links {

  display: flex !important;

  gap: 12px !important;

}

.social-icon {

  background: #a80874 !important;

  background-color: #a80874 !important;

  color: #ffffff !important;

  border-radius: 50% !important;

  width: 36px !important;

  height: 36px !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

}

.social-icon i {

  color: #ffffff !important;

  font-size: 16px !important;

}

.social-icon:hover {

  background: #820659 !important;

  background-color: #820659 !important;

}



/* Alternancia estricta de Secciones y Tipografía */

/* SECCIONES BLANCAS (#ffffff): tipografía #111111 */

#nuestros-servicios, #contactanos, #nuestros-logros, #preguntas-frecuentes, #nuestro-blog {

  background: #ffffff !important;

  color: #111111 !important;

}

#nuestros-servicios .section-title, #contactanos .section-title, #nuestros-logros .section-title, #preguntas-frecuentes .section-title, #nuestro-blog .section-title {

  color: #111111 !important;

}

#nuestros-servicios .section-desc, #contactanos .section-desc, #nuestros-logros .section-desc, #preguntas-frecuentes .section-desc, #nuestro-blog .section-desc {

  color: #111111 !important;

}

#nuestros-servicios .service-card {

  background: #ffffff !important;

}

#nuestros-servicios .service-card-title {

  color: #111111 !important;

}

#contactanos .contact-card {

  background: #ffffff !important;

}

#contactanos .contact-card-title, #contactanos .contact-card a, #contactanos .contact-card p, #contactanos .contact-card span {

  color: #111111 !important;

}

#nuestros-logros .achievement-card {

  background: #ffffff !important;

}

#nuestros-logros .achievement-number {

  color: #a80874 !important;

}

#nuestros-logros .achievement-label {

  color: #111111 !important;

}

#preguntas-frecuentes .faq-item {

  background: #ffffff !important;

  border: 1px solid #a80874 !important;

}

#preguntas-frecuentes .faq-question {

  background: #ffffff !important;

  color: #111111 !important;

}

#preguntas-frecuentes .faq-question span {

  color: #111111 !important;

}

#preguntas-frecuentes .faq-answer {

  background: #ffffff !important;

  color: #111111 !important;

}

#preguntas-frecuentes .faq-answer p {

  color: #111111 !important;

}

#preguntas-frecuentes .faq-icon {

  color: #a80874 !important;

}

#nuestro-blog .blog-card {

  background: #ffffff !important;

}

#nuestro-blog .blog-card-title {

  color: #111111 !important;

}



/* SECCIONES VERDES (#2b9720): tipografía #ffffff */

#quienes-somos, #mas-informes, #nuestros-clientes, #testimonios {

  background: #2b9720 !important;

  color: #ffffff !important;

}

#quienes-somos .section-title, #quienes-somos .section-desc, #quienes-somos p, #quienes-somos strong,

#mas-informes .section-title, #mas-informes .section-desc, #mas-informes .form-label,

#nuestros-clientes .section-title, #nuestros-clientes .section-desc,

#testimonios .section-title, #testimonios .section-desc {

  color: #ffffff !important;

}

#mas-informes .form-wrapper {

  background: #2b9720 !important;

  border: 1px solid #a80874 !important;

}

#nuestros-clientes .client-card {

  background: #2b9720 !important;

}

#nuestros-clientes .client-title, #nuestros-clientes .client-desc {

  color: #ffffff !important;

}

#testimonios .testimonial-card {

  background: #2b9720 !important;

}

#testimonios .testimonial-quote, #testimonios .testimonial-author {

  color: #ffffff !important;

}

#testimonios .testimonial-company {

  color: #ffffff !important;

}



/* Reglas actualizadas Header Sticky y Dropdown */

.site-header {

  position: fixed !important;

  top: 0 !important;

  left: 0 !important;

  width: 100% !important;

  z-index: 1000 !important;

  transition: all 0.3s ease !important;

}

.site-header.scrolled {

  background: #343a1a !important;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;

}




/* ==========================================================================
   PERSONALIZACIONES OFICIALES Y CORRECCIONES DE ARMONÍA VISUAL
   ========================================================================== */

/* 1. Header Transparente y Sticky en TODAS las Páginas */
.site-header,
.site-header.inner-page-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 16px 0 !important;
  transition: background-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease, border-bottom 0.3s ease !important;
}

/* Estado Scrolled / Sticky al desplazarse hacia abajo */
.site-header.scrolled,
.site-header.inner-page-header.scrolled,
.site-header.sticky {
  background: rgba(52, 58, 26, 0.96) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
  border-bottom: 1px solid rgba(168, 8, 116, 0.35) !important;
  padding: 10px 0 !important;
}

/* Compensación de padding-top en los banners de páginas internas */
.hero-slider[style*="380px"] .hero-content,
.hero-slider[style*="height: 380px"] .hero-content,
.hero-slider[style*="height:380px"] .hero-content {
  padding-top: 85px !important;
}

.hero-slider[style*="320px"] .hero-content,
.hero-slider[style*="height: 320px"] .hero-content,
.hero-slider[style*="height:320px"] .hero-content {
  padding-top: 80px !important;
}

.site-header .nav-menu {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 20px !important;
}

.site-header .nav-link {
  font-family: var(--font-texto, 'Roboto'), sans-serif !important;
  font-size: 16.5px !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.site-header .nav-link:hover {
  color: #a80874 !important;
}

.btn-header {
  font-family: var(--font-texto, 'Roboto'), sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding: 10px 22px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  text-transform: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  background: #a80874 !important;
  border: 1px solid #a80874 !important;
  color: #ffffff !important;
  transition: all 0.2s ease !important;
}

.btn-header:hover {
  background: #8b0660 !important;
  border-color: #8b0660 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

/* 2. Hero Alineado a la Izquierda, Tipografía y Botón */
.hero, .hero-slider {
  position: relative !important;
  overflow: hidden !important;
}

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

.hero-slide {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  transition: opacity 0.8s ease-in-out !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.hero-slide.active {
  opacity: 1 !important;
  z-index: 2 !important;
}

.hero-container,
.hero-slide .max-w-custom,
.hero .max-w-custom {
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  max-width: 1150px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.hero-content {
  position: relative !important;
  z-index: 3 !important;
  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;
  max-width: 850px !important;
  width: 100% !important;
  padding: 0 !important;
}

.hero-title {
  font-family: 'Oswald', sans-serif !important;
  font-size: 54px !important;
  font-weight: 700 !important;
  text-align: center !important;
  line-height: 1.15 !important;
  margin-bottom: 20px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  color: #ffffff !important;
  text-transform: none !important;
}

.hero-title span,
.hero-title .title-accent {
  color: #a80874 !important;
  display: block !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero-desc {
  font-family: 'Roboto', sans-serif !important;
  font-size: 18px !important;
  text-align: center !important;
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 25px !important;
  color: #ffffff !important;
  line-height: 1.5 !important;
}

.hero-btn,
.hero-content .hero-btn {
  font-family: 'Roboto', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 14px 32px !important;
  border-radius: 6px !important;
  background: #a80874 !important;
  border: 2px solid #a80874 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  display: inline-block !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-shadow: 0 4px 15px rgba(168, 8, 116, 0.4) !important;
  transition: all 0.2s ease !important;
}

.hero-btn:hover {
  background: #8b0660 !important;
  border-color: #8b0660 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

/* 3. Hero Slider Bar Centrada */


.hero-slider-bar .hero-arrow,
.hero-arrow,
#hero-prev,
#hero-next {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.hero-slider-bar .hero-dots {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.hero-slider-bar .hero-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.45) !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  padding: 0 !important;
}

.hero-slider-bar .hero-dot.active {
  width: 24px !important;
  border-radius: 9999px !important;
  background: #a80874 !important;
}

/* 4. Footer y Subfooter */
.site-footer {
  background: #343a1a !important;
  color: #ffffff !important;
}

.site-subfooter {
  background: #343a1a !important;
  color: #ffffff !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* 5. Botones Centrados en Tarjetas de Blog */
.blog-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.blog-card .btn-card-half,
.blog-card a.btn-card-half,
.blog-card .btn {
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* 6. Texto Justificado en Servicios y Artículos */
.service-article p,
.service-detail p,
.servicio-content p,
.article-content p,
.blog-detail p,
.blog-article p,
.post-content p {
  text-align: justify !important;
  text-justify: inter-word !important;
}

/* 7. Modal del Asistente Virtual Oculto por Defecto */
.chat-modal {
  position: fixed !important;
  bottom: 100px !important;
  right: 30px !important;
  width: 340px !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
  z-index: 999999 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(20px) scale(0.95) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.chat-modal.active {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}


/* ==========================================================================
   AJUSTES DE ESPACIADO Y COMPACIDAD VISUAL
   ========================================================================== */

/* 1. Scroll margin para que el header sticky no cubra los títulos */
html {
  scroll-behavior: smooth !important;
  scroll-padding-top: 90px !important;
}

section[id], [id] {
  scroll-margin-top: 90px !important;
}

/* 2. Reducción de espaciado en secciones generales */
.section-padding {
  padding: 45px 0 !important;
}

.section-title {
  margin-bottom: 8px !important;
}

.section-desc {
  margin: 0 auto 24px auto !important;
  line-height: 1.5 !important;
}

/* 3. Tarjetas de Servicios compactas y proporcionadas sin espacio muerto */
.services-grid {
  gap: 20px !important;
}

.service-card {
  min-height: auto !important;
  height: auto !important;
  padding: 24px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.service-card-title,
.service-card h4,
#nuestros-servicios .service-card-title {
  color: #111111 !important;
  font-family: var(--font-titulo, 'Oswald'), sans-serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  text-align: center !important;
  line-height: 1.3 !important;
  margin-bottom: 0 !important;
}

.service-card .btn-card {
  padding: 8px 22px !important;
  font-size: 14px !important;
  margin: 0 !important;
}


/* ==========================================================================
   TÍTULOS DE HERO DE ARTÍCULOS EN EXACTAMENTE DOS RENGLONES
   ========================================================================== */

.article-hero-title,
.hero-title.article-hero-title,
section[style*="320px"] .hero-title,
.hero-slider[style*="320px"] .hero-title,
.hero-slider[style*="height: 320px"] .hero-title,
.hero-slider[style*="height:320px"] .hero-title {
  font-family: 'Oswald', sans-serif !important;
  font-size: clamp(22px, 2.5vw, 34px) !important;
  line-height: 1.25 !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1100px !important;
  width: 100% !important;
  margin-bottom: 14px !important;
  word-break: normal !important;
  white-space: normal !important;
}

section[style*="320px"] .hero-content,
.hero-slider[style*="320px"] .hero-content,
.hero-slider[style*="height: 320px"] .hero-content,
.hero-slider[style*="height:320px"] .hero-content {
  max-width: 1100px !important;
  width: 100% !important;
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
  display: flex !important;
  flex-direction: column !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* ==========================================================================
   ANCHO DE 1150PX EN TODAS LAS SECCIONES DE ARTÍCULOS
   ========================================================================== */

.max-w-custom,
.hero .max-w-custom,
.hero-slider .max-w-custom,
.section-padding .max-w-custom,
.article-page .max-w-custom,
.blog-article .max-w-custom,
article .max-w-custom,
section .max-w-custom {
  max-width: 1150px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

section[style*="320px"] .hero-content,
.hero-slider[style*="320px"] .hero-content,
.hero-slider[style*="height: 320px"] .hero-content,
.hero-slider[style*="height:320px"] .hero-content {
  max-width: 1150px !important;
  width: 100% !important;
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
  display: flex !important;
  flex-direction: column !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.article-content,
.blog-detail,
.post-content,
.blog-content {
  max-width: 1150px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}


/* ==========================================================================
   TARJETAS DE BLOG: TÍTULOS Y DESCRIPCIONES SIEMPRE EN OSCURO VISIBLE
   ========================================================================== */
.blog-card-title,
.blog-card h4,
#nuestro-blog .blog-card-title {
  color: #111111 !important;
  font-family: var(--font-titulo, 'Oswald'), sans-serif !important;
  font-size: 17.5px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin-bottom: 10px !important;
  text-align: left !important;
}

.blog-card-desc,
.blog-card p,
#nuestro-blog .blog-card-desc {
  color: #555555 !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  margin-bottom: 0 !important;
}

.blog-card {
  background: #ffffff !important;
  border: 1px solid #a80874 !important;
  border-radius: 10px !important;
}


/* ==========================================================================
   HERO CENTRADO (MÁS INFORMES Y PÁGINAS DE CONTACTO/LEADS)
   ========================================================================== */
.hero-content-center,
.hero-content.hero-content-center,
.hero-content.text-center {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
  display: flex !important;
  flex-direction: column !important;
}

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

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

.hero-content-center .hero-btn,
.hero-content.hero-content-center .hero-btn {
  margin-left: auto !important;
  margin-right: auto !important;
  display: inline-block !important;
}

/* ==========================================================================
   GLOBAL: TITULOS DEL HERO, SECCIONES Y ARTICULOS CENTRADOS HORIZONTALMENTE
   ========================================================================== */
.hero-title,
.hero-title span,
.hero-title .title-accent,
.article-hero-title,
.hero-desc,
.section-title,
.section-header,
.section-header h2,
.section-header h3,
.section-header p,
.section-desc,
h1.hero-title,
h2.section-title,
h3.section-title,
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content .section-title,
.blog-detail h1,
.blog-detail h2,
.blog-detail h3,
.blog-detail h4,
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4 {
  text-align: center !important;
}

.hero-content,
.hero-container,
.section-header {
  margin-left: auto !important;
  margin-right: auto !important;
  align-items: center !important;
  justify-content: center !important;
}

.hero-btn,
.hero-content .hero-btn {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* TESTIMONIOS COMPLETAMENTE CENTRADOS */
#testimonios .testimonial-card,
.testimonial-card,
.testimonial-quote,
.testimonial-author,
.testimonial-company {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* BLOG CARDS: TITULOS CENTRADOS Y PARRAFOS JUSTIFICADOS DE 3 RENGLONES */
.blog-card-title,
.blog-card h4,
#nuestro-blog .blog-card-title {
  color: #111111 !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 65px !important;
  line-height: 1.3 !important;
  margin-bottom: 14px !important;
  height: auto !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
}

.blog-card-desc,
.blog-card p,
#nuestro-blog .blog-card-desc {
  color: #444444 !important;
  text-align: justify !important;
  text-justify: inter-word !important;
  line-height: 1.5 !important;
  min-height: 62px !important;
  height: auto !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  display: block !important;
}


/* PUNTOS DE CONTROL DEL SLIDER (header-hero) */
.hero-slider-bar {
  display: none !important;
  background: transparent !important;
  border: none !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.hero-dots {
  position: absolute !important;
  bottom: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  z-index: 20 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.hero-dot {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.4) !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: all 0.25s ease !important;
}

.hero-dot.active {
  width: 32px !important;
  height: 12px !important;
  border-radius: 9999px !important;
  background: #a80874 !important;
}