/* Estilos personalizados para Soluciones Hidro Plus */
:root{
  --primary: #0E2F44;
  --accent: #FF7A00;
  --muted: #476b75;
  --light-bg: #f8fafb;
  --card-border: #eef3f6;
  --card-border-2: #e6eef2;
  --text: #0b2430;
}

* , *::before, *::after { box-sizing: border-box; }

body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color: var(--text); }

a { color: var(--primary); }

/* Footer */
footer.site-footer { background-color: var(--primary); color: #ffffff; }
footer.site-footer a { color: var(--accent); }

/* No degradados: usar colores planos */
.header-brand { background: none; }

.blockquote { background: #fff; }

/* Accents */
.accent { color: var(--accent); }

/* Cards */
/* Estilos personalizados para Soluciones Hidro Plus */
:root{
  --primary: #0E2F44;
  --accent: #FF7A00;
  --accent-dark: #e56a00;
  --muted: #476b75;
  --light-bg: #f8fafb;
  --card-border: #eef3f6;
  --card-border-2: #e6eef2;
  --text: #0b2430;
}

* , *::before, *::after { box-sizing: border-box; }

body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color: var(--text); }

a { color: var(--primary); }

/* Footer */
footer.site-footer { background-color: var(--primary); color: #ffffff; }
footer.site-footer a { color: var(--accent); }

/* No degradados: usar colores planos */
.header-brand { background: none; }

.blockquote { background: #fff; }

/* Accents */
.accent { color: var(--accent); }

/* Cards */
.card-body h3 { color: var(--primary); }

/* Accessibility */
.btn-accent:focus { box-shadow: 0 0 0 0.2rem rgba(255,122,0,0.25); outline: none; }

@media (max-width: 767px) {
  header .container { flex-direction: column; gap: 12px; }
}

/* Estilos para los botones de la navegación en el header */
.nav-btn {
  background-color: var(--accent);
  color: #ffffff !important;
  padding: 8px 14px;
  border-radius: 2px; /* ligeramente rectangular */
  margin-left: 6px;
  font-weight: 500;
}
.nav-btn:hover, .nav-btn:focus {
  background-color: var(--accent-dark);
  color: #fff !important;
  text-decoration: none;
}

@media (max-width: 575px) {
  .nav-btn { padding: 6px 10px; font-size: 14px; }
}

/* Sobre nosotros - diseño moderno (solo dentro de #sobre) */
#sobre .bg-light, #sobre.bg-light { background-color: var(--light-bg) !important; }
.about-card { background: #ffffff; border: 1px solid var(--card-border); }
.about-card h4, .about-card h3 { color: var(--primary); }
.about-card p { color: #1f3b45; }
.stats .stat-box { background: #ffffff; border: 1px solid var(--card-border-2); display: flex; flex-direction: column; align-items: flex-start; }
.stat-value { font-size: 1.6rem; font-weight: 700; color: var(--primary); }
.stat-label { color: var(--muted); font-size: 0.9rem; }

@media (max-width: 991px) {
  .about-card { margin-bottom: 18px; }
}

/* Borde delgado azul para resaltar la columna derecha en 'Sobre' */
.about-highlight { border-left: 3px solid var(--primary); padding-left: 20px; }

@media (max-width: 991px) {
  .about-highlight { border-left: none; border-top: 3px solid var(--primary); padding-left: 0; padding-top: 12px; }
}

/* Estilos mejorados para la sección Servicios (sin cambiar HTML) */
#servicios .card {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  border: 1px solid var(--card-border-2);
  box-shadow: 0 6px 18px rgba(14,47,68,0.06);
}
#servicios .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 26px rgba(14,47,68,0.12);
  border-color: rgba(255,122,0,0.35);
}
#servicios .card .card-body h3 {
  color: var(--primary);
  position: relative;
}
/* línea de acento naranja bajo el título */
#servicios .card .card-body h3::after {
  content: '';
  display: block;
  width: 48px;
  height: 4px;
  background: var(--accent);
  margin-top: 10px;
  border-radius: 2px;
}

/* Ajustes de espaciado en dispositivos pequeños */
@media (max-width: 575px) {
  #servicios .card { margin-bottom: 12px; }
  #servicios .card .card-body h3::after { width: 36px; height:3px; }
}

/* Hero logo sizing */
.hero-logo { max-height: 260px; }
@media (max-width: 991px) {
  .hero-logo { max-height: 180px; }
}
@media (max-width: 575px) {
  .hero-logo { max-height: 140px; }
}

/* Experiencia */
.metric { background: #ffffff; border: 1px solid var(--card-border-2); }
.metric-value { font-size: 1.4rem; font-weight: 700; color: var(--primary); }
.metric-label { color: var(--muted); }
.timeline-content h4 { margin-bottom:6px; color: var(--primary); }

/* Timeline - Proceso */
.timeline { display: flex; flex-direction: column; gap: 18px; }
.timeline-item { display: flex; gap: 16px; align-items: flex-start; }
.timeline-step { background: var(--accent); color: #fff; width:44px; height:44px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:700; }
.timeline-content h4 { margin-bottom:6px; color: var(--primary); }

/* Testimonios */
.testimonial-avatar { font-weight:700; color:var(--primary); }

/* FAQ - acento */
.accordion-button:not(.collapsed) { background: #fff; border-left: 4px solid var(--accent); }

/* Contacto */
.contact-info { background: #ffffff; border: 1px solid var(--card-border); }
.contact-form .form-control { border-radius: 4px; }

/* Pequeños ajustes generales */
.metric, .timeline-item, .contact-info, .stat-box { transition: box-shadow 160ms ease, transform 160ms ease; }

@media (max-width: 767px) {
  /* En móviles apilamos los items de la timeline verticalmente */
  .timeline-item { flex-direction: column; align-items: flex-start; }
  .timeline-step { margin-bottom: 8px; }
}