/* style.css - Estilos personalizados para PROCONSA */
:root{
  --accent: #2F3640;
  --bg: #ffffff;
}

body{
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color: #222;
  background: var(--bg);
}

.logo{ /* asegura que el logo no se distorsione */
  height:110px; /* tamaño mayor en desktop */
  width:auto;
}

@media (max-width: 768px) {
  .logo{
    height:80px; /* tamaño más pequeño en pantallas pequeñas */
  }
}

header{ background: #ffffff; /* fondo blanco explícito para header */ }

a:hover{ text-decoration: underline; }

.btn-primary{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

.card{ border-radius: .5rem; }

/* Evitar degradados en cualquier componente bootstrap que use utilidades */
.bg-gradient{ background-image: none !important; }

/* Accesibilidad: usar focus-visible para mostrar el anillo de foco sólo cuando corresponde (teclado) */
:focus-visible { outline: 3px solid rgba(47,54,64,0.15); outline-offset: 2px; }
:focus { outline: none; }

/* Timeline / Steps */
/* Nota: anteriormente `.steps` estaba oculto por defecto. Comentado para evitar ocultar contenido accidentalmente. */
/* .steps{ display:none; } */
.process-cards .process-card{ background: #fff; border-radius: .6rem; box-shadow: 0 6px 18px rgba(47,54,64,0.06); transition: transform .18s ease, box-shadow .18s ease; }
.process-cards .process-card:hover{ transform: translateY(-6px); box-shadow: 0 12px 30px rgba(47,54,64,0.08); }
.process-icon{ width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:8px; background: rgba(47,54,64,0.04); }
.process-icon svg{ display:block; }
.process-card .extra{ color:#6c757d; }

/* Benefits cards */
.benefit-card{ background:#fff; border-radius:.5rem; box-shadow: 0 6px 18px rgba(47,54,64,0.04); }
.benefit-card h6{ color:var(--accent); }
.benefit-card p{ color:#444; }

/* Foto del equipo (tarjetas) */
.team-photo{ width:88px; height:88px; border-radius:50%; background-color:#dee2e6; background-size:cover; background-position:center; display:block; }
.team-photo img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }

/* Guarantee block */
.guarantee{ background: rgba(47,54,64,0.04); border-left: 4px solid var(--accent); }
.guarantee ul{ margin-left: 1rem; }
.guarantee .btn-outline-light{ border-color: #fff; }

/* Botón oscuro con acento */
.btn-dark-accent{
  background: var(--accent);
  color: #fff !important;
  border: 0;
  padding: .5rem .9rem;
  border-radius: .4rem;
}
.btn-dark-accent:hover{ background: #263033; color: #fff !important; }
.btn-dark-accent:focus{ box-shadow: 0 0 0 3px rgba(47,54,64,0.15); }

@media (max-width: 768px){
  .steps{ padding-left: 30px; }
  .step{ padding-left: 36px; }
  .step-marker{ left: -8px; width:12px; height:12px; top:16px; }
}

/* Footer: usar tono solicitado #2F3640 */
.site-footer{ background: #2F3640; color: rgba(255,255,255,0.95); }
/* Regla más específica para forzar el fondo del footer en caso de que una hoja externa (CDN bootstrap u otra) lo sobrescriba. */
footer.site-footer, .site-footer.footer, .site-footer { background-color: #2F3640 !important; background: #2F3640 !important; }
/* Evitar selector universal que fuerza color blanco a TODOS los elementos dentro del footer
  porque hace ilegibles elementos con fondo blanco (ej. .footer-social). */
.site-footer, .site-footer p, .site-footer .footer-heading, .site-footer .text-muted { color: #ffffff !important; }
.site-footer a.footer-link{ color: #ffffff !important; text-decoration: none; opacity:0.95; }
.site-footer a.footer-link:hover{ text-decoration: underline; opacity:1; }
.site-footer .footer-social{ color: #2F3640 !important; background:#ffffff; display:inline-block; width:34px; height:34px; line-height:34px; text-align:center; border-radius:6px; text-decoration:none; font-weight:600; }
.site-footer .footer-social:hover{ opacity:0.9; }
.site-footer .footer-logo{ filter: brightness(0) invert(1); }
.site-footer .text-muted{ color: rgba(255,255,255,0.75) !important; }
.site-footer .footer-heading{ color: #ffffff; }