/* ==========================================================================
   COMPONENTES.CSS
   Piezas reutilizables del sitio: botones, tarjetas, badges, inputs de
   formulario. Todo lo que se repite en más de una sección o página vive
   aquí UNA sola vez. Depende de variables.css y base.css.
   ========================================================================== */

/* ---------- BOTONES ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaciado-xs);
  padding: 12px 28px;
  border-radius: var(--radio-borde);
  font-weight: var(--peso-medio);
  font-size: 0.95rem;
  text-align: center;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}

/* Botón primario: relleno azul (ej. "Cotiza con nosotros", "Conoce nuestros servicios") */
.btn-primario {
  background-color: var(--color-primario);
  color: var(--color-texto-claro);
}

.btn-primario:hover {
  background-color: var(--color-primario-hover);
}

/* Botón outline: borde blanco, fondo transparente (ej. "Habla con un experto") */
.btn-outline {
  background-color: transparent;
  color: var(--color-texto-claro);
  border: 1.5px solid var(--color-texto-claro);
}

.btn-outline:hover {
  background-color: var(--color-texto-claro);
  color: var(--color-oscuro);
}

/* ---------- TARJETAS DE SERVICIO ---------- */
.card-servicio {
  background-color: var(--color-gris-claro);
  border-radius: var(--radio-borde);
  padding: var(--espaciado-lg);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card-servicio:hover {
  box-shadow: var(--sombra-media);
  transform: translateY(-4px);
}

/* DESPUÉS */
.card-servicio__icono {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-bottom: var(--espaciado-sm);
}

.card-servicio__titulo {
  font-size: 1.05rem;
  font-weight: var(--peso-semibold);
  color: var(--color-texto);
  margin-bottom: var(--espaciado-xs);
}

.card-servicio__texto {
  font-size: 0.9rem;
  color: var(--color-texto-secundario);
}

/* ---------- PLACEHOLDER TEMPORAL DE ÍCONOS ----------
   Cuadro gris con borde que ocupa el mismo espacio que tendrá el ícono
   final. Reemplazar por <img src="assets/iconos/nombre.svg"> cuando
   los archivos de íconos reales estén disponibles. */
.icono-placeholder {
  background-color: var(--color-borde);
  border: 1px dashed var(--color-texto-secundario);
  border-radius: var(--radio-borde-sm);
}

/* ---------- FRANJA DE SELLOS DE CONFIANZA ---------- */
.sello {
  display: flex;
  align-items: center;
  gap: var(--espaciado-xs);
  text-align: left;
}

/* DESPUÉS */
.sello__icono {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.sello__texto {
  font-size: 0.85rem;
  font-weight: var(--peso-medio);
  color: var(--color-texto);
  line-height: 1.3;
}